make collapsible descriptions on event cards

layouts/partials/calendar_card.html

@@ -11,14 +11,13 @@
             </div>
             <div class='calendar-meta'>
               <div class='calendar-duration'>{{ .Params.duration }}</div>
+              <span class='descr_button' id='toggle-button' onclick="toggleDescription('#event-{{ .Params.uid }}')"> <a href='#'>  </a></span>
               <div class='calendar-location'>{{ .Params.location | markdownify }}</div>
             </div>
-            <div class='calendar-description'>
+            <div class='calendar-description collapsed' id='event-{{ .Params.uid }}'>
             {{.Content}}
             </div>
 
 
-
-            
           </article>
     </div>

static/css/main.css

@@ -250,7 +250,6 @@ footer.post-footer {
 
 .calendar-meta {
   display: flex;
-  border-bottom: 2px solid cornflowerblue;
   justify-content: space-between;
 }
 
@@ -289,6 +288,9 @@ footer.post-footer {
   padding-left: 1em;
   padding-right: 1em;
   padding-bottom: 0.5em;
+  display: block;
+  overflow: hidden;
+  border-top: 2px solid cornflowerblue;
 }
 
 .calendar-description p {

static/css/video-box.css

@@ -81,7 +81,6 @@
   .description{
     padding: 1em;
     display: block;
-    /*transition: height 0.5s linear;*/
     overflow: hidden;
     border-top: 2px solid var(--video-border-color);
   }