style calendar cards

themes/lumbung-theme/layouts/partials/calendar_card.html

@@ -1,5 +1,6 @@
 {{  $t := (time .Params.event_end) }} 
 <div class='card calendar {{ if $t.Before now }}past{{end}}'>
+  <div class='date tape-label'><span> {{ substr .Params.date 0 11}}</span></div>
   <article class="h-event calendar ">
     <header>
       <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>

themes/lumbung-theme/layouts/partials/video_box.html

@@ -1,5 +1,5 @@
 <div class='video-box'>
-  <div class='video channel'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></div>
+  <div class='video channel tape-label'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></div>
   <div class='media' id='media-{{ .Params.uuid }}'>
     <span class='video-thumbnail' id='thumb-{{ .Params.uuid }}'
      href="https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}"

themes/lumbung-theme/static/css/main.css

@@ -496,14 +496,22 @@ div.network-source {
 /* calendar cards */
 
 .card.calendar {
-    border: 2px solid cornflowerblue;
-    background-color: lightblue;
+    border: 2px solid var(--calendar-dark);
+    background-color: var(--calendar-light);
     max-width: 360px;
     margin-bottom: 2em;
     flex: auto;
     margin: 0 3em 3em 0;
     align-self: start;
-    color: royalblue;
+    color: var(--calendar-dark);
+}
+
+.calendar .tape-label {
+    background-color: var(--calendar-light);
+}
+
+.calendar .tape-label span {
+    background-color: var(--calendar-dark);
 }
 
 /* disabling temporarily since all the events are past events atm */
@@ -532,7 +540,11 @@ div.network-source {
 
 .h-event.calendar header h2 a {
     text-decoration: none;
-    color: royalblue;
+    color: var(--calendar-dark);
+}
+
+.h-event.calendar .calendar-location a {
+    color: var(--calendar-dark);
 }
 
 .header-filler {
@@ -583,6 +595,24 @@ div.network-source {
 
 
 /* Card metadata (video & calendar) */
+  
+.tape-label {
+    display: flex;
+    justify-content: center;
+    border: none;
+    font-size: 1rem;
+}
+
+.tape-label a,
+.tape-label span {
+    width: max-content;
+    padding: 0.5em;
+    position: relative;
+    bottom: 19px;
+    z-index: 1;
+    transform: rotate(2deg);
+    color: white;
+}
 
 .metadata {
     display: flex;