style calendar cards

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

@@ -1,30 +1,27 @@
 {{  $t := (time .Params.event_end) }} 
-    <div class='card calendar {{ if $t.Before now }}past{{end}}'>
+<div class='card calendar {{ if $t.Before now }}past{{end}}'>
-          <article class="h-event calendar ">
+  <div class='date tape-label'><span> {{ substr .Params.date 0 11}}</span></div>
-            <header>
+  <article class="h-event calendar ">
-              <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
+    <header>
-            </header>
+      <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
-            {{ range first 1 (.Resources.ByType "image") }} 
+    </header>
-            <div class='calendar-image-holder'><a href="{{ $.Permalink }}"> <img class="calendar-image" src="{{ .Permalink }}"></a></div>
+    {{ range first 1 (.Resources.ByType "image") }} 
-            {{ end }}
+    <div class='calendar-image-holder'><a href="{{ $.Permalink }}"> <img class="calendar-image" src="{{ .Permalink }}"></a></div>
-            <div class='start-scroller'>
+    {{ end }}
-                <marquee behavior="scroll" direction="left">
+    <div class='start-scroller'>
-                  {{ .Params.localized_begin | markdownify }}
+      <marquee behavior="scroll" direction="left">
-                </marquee>
+        {{ .Params.localized_begin | markdownify }}
-            </div>
+      </marquee>
-            <div class='calendar metadata'>
-              <div class='calendar-duration'>Duration: <b>{{ .Params.duration }}</b></div>
-              <input class='descr_button' type='checkbox' id='toggle-{{ .Params.uid }}'/>
-              <label class='calendar' for='toggle-{{ .Params.uid }}'>↕</label>
-              <div class='calendar-location p-location'>{{ .Params.location | markdownify }}</div>
- 
-              <div class='calendar description p-description' id='event-{{ .Params.uid }}'>
-                {{.Content}}
-              </div>
-            </div>
-
-
-
-          </article>
     </div>
-        
+    <div class='calendar metadata'>
+      <div class='calendar-duration'>Duration: <b>{{ .Params.duration }}</b></div>
+      <input class='descr_button' type='checkbox' id='toggle-{{ .Params.uid }}'/>
+      <label class='calendar' for='toggle-{{ .Params.uid }}'>↕</label>
+      <div class='calendar-location p-location'>{{ .Params.location | markdownify }}</div>
+      
+      <div class='calendar description p-description' id='event-{{ .Params.uid }}'>
+        {{.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 {
@@ -575,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;