style paginator, add images to calendar cards, fix #6

layouts/partials/calendar_card.html

@@ -3,6 +3,9 @@
             <header>
               <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
             </header>
+            {{ range first 1 (.Resources.ByType "image") }} 
+            <div class='calendar-image-holder'><a href="{{ $.Permalink }}"> <img class="calendar-image" src="{{ .Permalink }}"></a></div>
+            {{ end }}
             <div class='start-scroller'>
                 <marquee behavior="scroll" direction="left">
                   {{ .Params.localized_begin | markdownify }}
@@ -13,6 +16,7 @@
               <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>

static/css/main.css

@@ -53,6 +53,11 @@ body {
     background-color: peachpuff;
   }
 
+  .side-bar {
+    border: 2px solid var(--border-color);
+    max-width: 400px;
+  }
+
 
   .card:nth-child(even){
     transform: rotate(-1deg);
@@ -87,11 +92,19 @@ body {
  
 }
 
+.entries{
+  padding-top: 15%;
+}
+
 /* base header & menu */
 
 #top-menu{
-  transform: rotate(-3deg);
-  margin-left: 2em;
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%);
+  width: 90%;
+  z-index: 1;
+  margin-top: 1em;
 }
 
 .logo {
@@ -274,6 +287,19 @@ footer.post-footer {
   border-top: 2px solid cornflowerblue;
 }
 
+.calendar-image-holder{
+  border-bottom: 2px solid cornflowerblue;
+}
+
+.calendar-image-holder a {
+  display: inherit;
+}
+
+.calendar-image{
+  max-width: 100%;
+  display: inherit;
+}
+
 /* Card metadata (video & calendar) */
 
 .metadata {
@@ -325,9 +351,71 @@ label:hover {
   text-align: center;
 }
 
+/* Paginator */
+
+nav.pagination{
+  width: 60%;
+  margin: auto;
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+ul.pagination{
+  display: flex;
+  justify-content: space-evenly; /* align horizontal */
+  align-items: center; /* align vertical */
+}
+
+.page-item{
+  display: block;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 38px;
+  border: 2px solid #1B4C8A;
+  box-shadow:0.4em 0.4em 0 #d2d1c8;
+
+}
+
+li.page-item{
+  background-color: lightblue;
+  padding: 0.4em;
+}
+
+li.page-item.active{
+  background-color: peachpuff;
+  border: 2px solid tomato;
+  padding: 0.4em;
+}
+
+li.page-item.disabled{
+  display: none;
+}
+
+  li.page-item:nth-child(even){
+    transform: rotate(-1deg);
+  }
+
+  li.page-item:nth-child(odd){
+    transform: rotate(1deg);
+  }
+
+  li.page-item:nth-child(5){
+    transform: rotate(2deg);
+  }
+
+  li.page-item:nth-child(8){
+    transform: rotate(-3deg);
+  }
+
+
 
 /* Page footer */
 
 footer.bar {
-  margin-top:0;
+  margin-top: 0;
+  width: 80%;
+  margin-left: auto;
+  display: block;
+  margin-right: auto;
+  margin-bottom: 2em;
 }