add cards for calendar items

layouts/index.html

@@ -3,16 +3,19 @@
   <div class="h-feed">
     {{ range (.Paginator 10).Pages }}
 
+      {{ if in .Params.category "tv"}}
     
-    {{ if in .Params.category "tv"}}
+        {{- partial "video_box.html" . -}}
 
-    {{- partial "video_box.html" . -}}
+      {{ else if in .Params.category "calendar" }}
 
-    {{ else }}  
+        {{- partial "calendar_card.html" . -}}
 
-    {{- partial "card.html" . -}}
+      {{ else }}
 
-    {{ end }}   
+        {{- partial "card.html" . -}}
+
+      {{ end }}   
 
     {{ end }}
   </div>

layouts/partials/calendar_card.html

@@ -0,0 +1,24 @@
+    <div class='card calendar'>
+          <article class="h-entry calendar">
+            <header>
+              <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
+              <div class='header-filler'></div>
+            </header>
+            <div class='start-scroller'>
+                <marquee behavior="scroll" direction="left">
+                  {{ .Params.event_begin | markdownify }}
+                </marquee>
+            </div>
+            <div class='calendar-meta'>
+              <div class='calendar-duration'>{{ .Params.duration }}</div>
+              <div class='calendar-location'>{{ .Params.location | markdownify }}</div>
+            </div>
+            <div class='calendar-description'>
+            {{.Content}}
+            </div>
+
+
+
+            
+          </article>
+    </div>

static/css/main.css

@@ -126,9 +126,6 @@ body {
 
 /*Article Summary Cards*/
 
-.h-entry{
-}
-
 .h-entry header {
   display: flex;
   border-bottom: 2px solid var(--border-color);
@@ -209,6 +206,95 @@ footer.post-footer {
   font-size: 0.9rem;
 }
 
+/* calendar cards */
+
+.card.calendar {
+      border: 2px solid cornflowerblue;
+      box-shadow:1em 1em 0 #d2d1c8;
+      background-color: lightblue;
+      max-width: 300px;
+      margin-bottom: 2em;
+      flex: auto;
+      margin:  0 3em 3em 0;
+      align-self: start;
+      color: royalblue;
+
+}
+
+.h-entry.calendar header {
+  display: flex;
+  border-bottom: 2px solid cornflowerblue;
+}
+
+.h-entry.calendar header h2{
+  padding: 0.2em;
+  margin: 0;
+  padding-right: 0.3em;
+  padding-left: 0.3em;
+  border-right: 2px solid cornflowerblue;
+}
+
+.h-entry.calendar header h2:hover{
+    box-shadow: inset 4px 4px 0px royalblue;
+    cursor: pointer;
+}
+
+.h-entry.calendar header h2 a {
+  text-decoration: none;
+  color: royalblue;
+}
+
+.header-filler {
+    min-width: 10%;
+}
+
+.calendar-meta {
+  display: flex;
+  border-bottom: 2px solid cornflowerblue;
+  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;
+  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;
+}
+
+.start-scroller {
+  display: flex;
+  flex-flow: row-reverse;
+  border-bottom: 2px solid cornflowerblue;
+}
+.start-scroller marquee{
+  font-size: 0.8rem;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+}
+
+.calendar-description {
+  padding-top: 0.5em;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-bottom: 0.5em;
+}
+
+.calendar-description p {
+  margin:0;
+}
+
 /* footer */
 
 footer.bar {