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>
@@ -22,9 +23,5 @@
         {{.Content}}
       </div>
     </div>  
-
-
-
   </article>
 </div>
-        

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

@@ -36,16 +36,24 @@
 
 :root {
     --border-color: tomato;
+    
     --tv-dark: #237D0F;
     --tv-light: #E2FAD7;
+    
     --pen-dark: #E0005C;
     --pen-light: #FEDAE9;
+    
     --social-light: #C2E4F2;
     --social-dark: #0163A4;
+    
     --gallery-light: #FCF4B9;
     --gallery-dark: #846A00;
+    
     --shouts-dark: #CB001D;
     --shouts-light: #FFD9DD;
+    
+    --calendar-light: #B6EDFF;
+    --calendar-dark: #0E64C8;
 }
 
 
@@ -488,23 +496,32 @@ div.network-source {
 /* calendar cards */
 
 .card.calendar {
-    border: 2px solid cornflowerblue;
+    border: 2px solid var(--calendar-dark);
-    background-color: lightblue;
+    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);
 }
 
-.card.calendar.past {
+.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 */
+/* .card.calendar.past {
     opacity: 0.3;
 }
 
 .card.calendar.past:hover {
     opacity: 1;
-}
+} */
 
 .h-event.calendar header {
     display: flex;
@@ -518,13 +535,16 @@ div.network-source {
 }
 
 .h-event.calendar header h2:hover {
-    box-shadow: inset 4px 4px 0px royalblue;
     cursor: pointer;
 }
 
 .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 {
@@ -576,6 +596,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;
     justify-content: space-between;