From 25709716b3c7895d61f8577c40925433fc46daf0 Mon Sep 17 00:00:00 2001
From: Aadil Ayub <aadilayub@protonmail.com>
Date: Wed, 2 Feb 2022 17:30:15 +0500
Subject: [PATCH] style calendar cards

---
 .../layouts/partials/calendar_card.html       |  1 +
 .../layouts/partials/video_box.html           |  2 +-
 themes/lumbung-theme/static/css/main.css      | 38 +++++++++++++++++--
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/themes/lumbung-theme/layouts/partials/calendar_card.html b/themes/lumbung-theme/layouts/partials/calendar_card.html
index 6203067..c41cfa9 100644
--- a/themes/lumbung-theme/layouts/partials/calendar_card.html
+++ b/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>
diff --git a/themes/lumbung-theme/layouts/partials/video_box.html b/themes/lumbung-theme/layouts/partials/video_box.html
index 508ad70..54170a6 100644
--- a/themes/lumbung-theme/layouts/partials/video_box.html
+++ b/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 }}"
diff --git a/themes/lumbung-theme/static/css/main.css b/themes/lumbung-theme/static/css/main.css
index 1b0916e..10e0574 100644
--- a/themes/lumbung-theme/static/css/main.css
+++ b/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;