cards everywhere

layouts/_default/li.html

@@ -1,5 +1,5 @@
 <a ontouchstart="cardPressed.call(this)" ontouchend="cardReleased.call(this)" ontouchmove="cardReleased.call(this)" 
-  onmousedown="cardPressed.call(this)" ondrag="cardReleased.call(this)" href="{{ .Permalink }}" class="card" rel="bookmark" >
+  onmouseover="cardPressed.call(this)" onmouseout="cardReleased.call(this)" href="{{ .Permalink }}" class="card" rel="bookmark" >
     {{ if isset .Params "featuredimage" }}
     <div>
       <img src="{{ .Site.BaseURL }}/{{.Params.featuredimage }}" class="card-img">

layouts/_default/list.html

@@ -12,7 +12,6 @@
       {{ end }}
     </main>
     <div class="pagination-nav side-gutter">
-      <a href="#" class="pagination-prev button">Newer Posts</a>
       {{ if .Paginator.HasPrev }}<a href="{{ .Paginator.Prev.URL }}" class="pagination-prev button">Newer Posts</a>{{ end }}
       <p class="pagination-pagenum muted-text">Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</p>
       {{ if .Paginator.HasNext }}<a href="{{ .Paginator.Next.URL }}" class="pagination-next button">Older Posts</a>{{ end }}

layouts/_default/single-li.html

@@ -0,0 +1,18 @@
+<a ontouchstart="cardPressed.call(this)" ontouchend="cardReleased.call(this)" ontouchmove="cardReleased.call(this)" 
+  onmouseover="cardPressed.call(this)" onmouseout="cardReleased.call(this)" href="{{ .Permalink }}" class="card" rel="bookmark" >
+    {{ if isset .Params "featuredimage" }}
+    <div class="card-img-container">
+      <img src="{{ .Site.BaseURL }}/{{.Params.featuredimage }}" class="card-img">
+      <p class="card-img-overlay">Next Article</p>
+    </div>
+    {{ end }}
+  <article class="card-body">
+    <h2 class="card-title">{{ .Title }}</h2>
+    <p class="card-text">{{ .Description }}</p>
+    <div class="card-subtext muted-text">
+      <p style="margin: 0 1em 0 0;">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
+      <p style="margin: 0 1em 0 0;">|</p>
+      <p style="margin: 0 1em 0 0;">#{{ .Params.category}}</p>
+    </div>
+  </article>
+</a>

layouts/_default/single.html

@@ -20,6 +20,9 @@
       If you're going to use DISQUS comments, insert code here.
       -->
     </main>
+    {{ with .Next }}
+      {{ .Render "single-li" }}
+    {{ end }}
     {{ partial "footer.html" . }}
     {{ partial "scripts.html" . }}
   </body>

layouts/partials/scripts.html

@@ -1,6 +1,6 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-<script type="text/javascript" src="js/core.js"></script>
+<script type="text/javascript" src="{{ .Site.BaseURL }}/js/core.js"></script>
 <script>
   hljs.initHighlightingOnLoad();
 </script>

static/css/style.css

@@ -29,6 +29,7 @@ strong {
     align-items: center;
 }
 .single-body {
+    background-color: #f0f1f2;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -66,13 +67,17 @@ strong {
     float: left;
     font-size: 3em;
     line-height: 1;
-    margin-bottom: -0.5em;
-    padding-right: 0.1em;
+    margin: 0 0.1em -0.1em 0;
     /* initial-letter: 2; Maybe someday*/
 }
 .content {
-    max-width: 40em;
+    background-color: white;
+    border-radius: 0.2em;
+    transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
+    box-shadow: 0 0.4em 0.8em 0 rgba(0,0,0,0.16), 0 0.3em 0.3em -0.1em rgba(0,0,0,0.23);
+    max-width: 42em;
     width: 100%;
+    margin: 1em 0 3em 0;
 }
 .list-header {
     margin: 9em 0 5em 0;
@@ -107,17 +112,39 @@ strong {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
     box-shadow: 0 0.4em 0.8em 0 rgba(0,0,0,0.16), 0 0.3em 0.3em -0.1em rgba(0,0,0,0.23);
+    max-width: 42em;
 }
 .card-active {
     transform: scale(0.95);
     box-shadow: 0 0.15em 0.3em 0 rgba(0, 0, 0, 0.16), 0 0.15em 0.3em -0.04em rgba(0, 0, 0, 0.23);
 }
+.card:active {
+    border: 0.05em solid #7A7B7C;
+    margin: -0.05em;
+}
+.card-img-container {
+    position: relative;
+}
 .card-img {
     border-radius: 0.2em 0.2em 0 0;
     margin-bottom: -0.28em;
     max-height: 10em;
     object-fit: cover;
 }
+.card-img-overlay {
+    border-top-left-radius: 0.3em;
+    position: absolute;
+    top: 0;
+    font-size: 1.27em;
+    text-align: center;
+    padding: 1.225em 0 0.5em 0;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 5;
+}
 .card-body {
     padding: 1em;
 }
@@ -163,9 +190,13 @@ strong {
     border-radius: 0.2em;
     box-shadow: 0 0.04em 0.12em rgba(0,0,0,0.12), 0 0.04em 0.08em rgba(0,0,0,0.24);
 }
-.button:active {
+.button:hover {
     transform: scale(0.97);
 }
+.button:active {
+    border: 0.05em solid #7A7B7C;
+    margin: -0.05em;
+}
 .side-gutter {
     padding-left: 0.7em !important;
     padding-right: 0.7em !important;
@@ -239,7 +270,7 @@ footer {
 /* Medium devices (tablets, ~641px and up) */
 @media only screen and (min-width: 40.063em) {
     body {
-        font-size: 1.2rem;
+        font-size: 1.125rem;
     }
     .list-header {
         margin: 8em 0 4em 0;
@@ -278,6 +309,9 @@ footer {
     .card-subtext {
         font-size: 0.7em;
     }
+    .post {
+        margin: 2em 1em;
+    }
     .post-title {
         font-size: 2.5em;
     }