clean up & modularize css

layouts/partials/calendar_card.html

@@ -9,14 +9,16 @@
                   {{ .Params.localized_begin | markdownify }}
                 </marquee>
             </div>
-            <div class='calendar-meta'>
+            <div class='calendar metadata'>
               <div class='calendar-duration'>{{ .Params.duration }}</div>
-              <span class='descr_button' id='toggle-button' onclick="toggleDescription('#event-{{ .Params.uid }}')"> <a href='#'>  </a></span>
+              <input class='descr_button' type='checkbox' id='toggle-{{ .Params.uid }}'/>
+              <label class='calendar' for='toggle-{{ .Params.uid }}'>↕</label>
               <div class='calendar-location'>{{ .Params.location | markdownify }}</div>
+              <div class='calendar description' id='event-{{ .Params.uid }}'>
+                {{.Content}}
+              </div>
             </div>
-            <div class='calendar-description collapsed' id='event-{{ .Params.uid }}'>
-            {{.Content}}
-            </div>
+
 
 
           </article>

layouts/partials/video_box.html

@@ -14,16 +14,13 @@
       </div>
     </span>
   </div>
-  <div class='metadata'>
+  <div class='video metadata'>
     <div class='title'>{{ .Title }}</div>
-    <span class="description collapsed" id='vid-{{ .Params.uuid }}'> {{ .Content }}</span>
-    <div class='footer'>
-      <span class='channel'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></span>
-      
-        <span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-{{ .Params.uuid }}')"> <a href='#'>  </a></span>
-      
-      <span class='date'> <a href='https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}'> {{ .Date.Format "Jan 02, 2006" }}</a></span>
-    </div>
+    <div class='video channel'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></div>
+    <input class='descr_button' type='checkbox' id='toggle-{{ .Params.uuid }}'/>
+    <label class='video' for='toggle-{{ .Params.uuid }}'>↕</label>
+    <div class='video date'> <a href='https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}'> {{ .Date.Format "Jan 02, 2006" }}</a></div>
+    <div class="description video" id='vid-{{ .Params.uuid }}'> {{ .Content }}</div>
   </div>
 </div>
 

static/css/main.css

@@ -227,10 +227,8 @@ footer.post-footer {
 }
 
 .h-entry.calendar header h2{
-  padding: 0.2em;
+  padding: 0.2em 0.5em 0.2em 0.5em;
   margin: 0;
-  padding-right: 0.3em;
-  padding-left: 0.3em;
   border-right: 2px solid cornflowerblue;
 }
 
@@ -248,28 +246,17 @@ footer.post-footer {
     min-width: 10%;
 }
 
-.calendar-meta {
-  display: flex;
-  justify-content: space-between;
-}
-
 .calendar-location{
   font-size: 0.8rem;
   min-width: 20%;
-  padding-top: 0.2em;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  padding-bottom: 0.2em;
+  padding: 0.5em 0.9em 0.5em 0.9em;
   border-left: 2px solid cornflowerblue;
 }
 
 .calendar-duration{
   font-size: 0.8rem;
   border-right: 2px solid cornflowerblue;
-  padding-top: 0.2em;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  padding-bottom: 0.2em;
+  padding: 0.5em 0.9em 0.5em 0.9em;
 }
 
 .start-scroller {
@@ -283,21 +270,59 @@ footer.post-footer {
   padding-bottom: 0.2em;
 }
 
-.calendar-description {
-  padding-top: 0.5em;
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-bottom: 0.5em;
-  display: block;
-  overflow: hidden;
+.calendar .description {
   border-top: 2px solid cornflowerblue;
 }
 
-.calendar-description p {
+/* Card metadata (video & calendar) */
+
+.metadata {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.description p {
   margin:0;
 }
 
-/* footer */
+input + label +.calendar-location+.description{
+    display: none;
+  }
+
+input:checked + label +.calendar-location+.description {
+    display: block;
+    transition: ease .5s;
+  }
+
+.metadata label {
+  text-align: center;
+  vertical-align: sub;
+  flex-grow: 1;
+  font-weight: normal;
+  cursor: pointer;
+  padding: 0.4em 0.9em 0.4em 0.9em;
+  font-size: 0.9em;
+}
+
+label:hover {
+  box-shadow: inset 2px 2px 0px #95948c;
+}
+
+.description{
+  padding: 0.5em 0.7em 0.7em 0.5em;
+  overflow: hidden;
+  flex-basis: 100%;
+}
+
+.descr_button {
+  cursor: pointer;
+  flex-grow: 1;
+  text-align: center;
+}
+
+
+/* Page footer */
 
 footer.bar {
   margin-top:0;

static/css/video-box.css

@@ -36,80 +36,59 @@
     line-height: 0;
   }
 
-  .metadata{
-    display: flex;
-    flex-direction: column;
+  .video {
     background-color: var(--video-background-color);
-    font-size:0.9rem;
   }
 
+  .video .metadata{
+    font-size:0.9rem;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
 
-  .title{
+  .metadata .title{
     margin-top:0;
     border-top: 2px solid var(--video-border-color);
+    border-bottom: 2px solid var(--video-border-color);
     padding:0.5em;
     font-weight:700;
     font-size:1.3rem;
+    flex-basis: 100%;
   }
 
-  .footer{
-    margin-top:0;
-    border-top: 2px solid var(--video-border-color);
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .channel{
+  .video.channel{
     border-right: 2px solid var(--video-border-color);
-    padding-left: 1em;
-    padding-right: 1em;
-    padding-top: 0.2em;
-    display: inline-block;
-    padding-bottom: 0.2em;
+    padding: 0.5em 0.9em 0.5em 0.9em;
+    font-size: 0.8rem;
   }
 
-  .date {
+  .video.date {
     float:right;
     border-left: 2px solid var(--video-border-color);
-    padding-left: 1em;
-    padding-right: 1em;
-    padding-top: 0.2em;
-    display: inline-block;
-    padding-bottom: 0.2em;
+    padding: 0.5em 0.9em 0.5em 0.9em;
+    font-size: 0.8rem;
   }
 
-  .description{
-    padding: 1em;
-    display: block;
-    overflow: hidden;
+  .video.description {
     border-top: 2px solid var(--video-border-color);
-  }
+    padding: 0.8em 0.8em 0.8em 0.8em;
 
-  .collapsed {
-    border-top: 0px;
-    /*transform:scaleY(0);*/
-    height: 0;
-    padding:0;
   }
-
-  .descr_button {
-    cursor: pointer;
-    flex-grow: 1;
-    text-align: center;
-  }
-
   .descr_button a {
     color:inherit;
     text-decoration: inherit;
   }
 
-  .descr_button a:before {
-    content:'↕';
-    vertical-align: sub;
+  input.descr_button {
+    display: none;
   }
 
-  .descr_button:hover {
-    box-shadow: inset 2px 2px 0px #95948c; 
+  input + label + .video.date + .description{
+    display: none;
+  }
+
+  input:checked + label + .video.date +.description {
+    display: block;
   }
 
   .play-icon {