From d0243c2c33c5816436467a1ad0064bf8bb17d4a0 Mon Sep 17 00:00:00 2001
From: Joseph Hutchinson <hutch7995@gmail.com>
Date: Fri, 13 Apr 2018 14:41:38 -0400
Subject: [PATCH] Make cards display horizontally on desktop

---
 layouts/_default/li.html |  7 +++++--
 static/css/style.css     | 32 ++++++++++++++++++++++++--------
 static/js/core.js        |  4 ++--
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/layouts/_default/li.html b/layouts/_default/li.html
index 5217082..88a3ed5 100644
--- a/layouts/_default/li.html
+++ b/layouts/_default/li.html
@@ -1,8 +1,11 @@
-<a ontouchstart="cardPressed.call(this)" ontouchend="cardReleased.call(this)" href="{{ .Permalink }}" class="card-link-wrapper" rel="bookmark" title="Link to {{ .Title }}" >
+<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" title="Link to {{ .Title }}" >
     {{ if isset .Params "featuredimage" }}
+    <div>
       <img src="{{ .Site.BaseURL }}/{{.Params.featuredimage }}" class="card-img">
+    </div>
     {{ end }}
-  <article class="card">
+  <article class="card-body">
     <h2 class="card-title">{{ .Title }}</h2>
     <p class="card-text">{{ .Description }}</p>
     <p class="card-date post-date">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
diff --git a/static/css/style.css b/static/css/style.css
index 9ab85fb..06e3396 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -98,9 +98,11 @@ img {
     grid-gap: 1.2em;
     justify-content: center;
 }
-.card-link-wrapper {
+.card {
     color: rgb(52, 58, 63);
-    display: block;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
     background-color: white;
     border-radius: 0.2em;
     text-decoration: none;
@@ -108,11 +110,11 @@ img {
     transition: transform 0.3s, box-shadow 0.3s;
     box-shadow: 0 0.2em 0.7em 0 rgba(0, 0, 0, 0.1), 0 0 0.2em 0 rgba(0, 0, 0, 0.05);
 }
-.card-link-wrapper-active {
+.card-active {
     transform: scale(0.95);
     box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.15);
 }
-.card {
+.card-body {
     padding: 1em;
 }
 .card-img {
@@ -200,10 +202,21 @@ footer {
         font-size: 1.125rem;
     }
     .card-container{
-        max-width: 700px;
+        max-width: 42em;
     }
     .card-columns {
-        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 2em;
+    }
+    .card {
+        flex-direction: row;
+        align-items: stretch;
+    }
+    .card-img {
+        border-radius: 0.2em 0 0 0.2em;
+        margin: 0 0.5em 0 0;
+        max-height: unset;
+        height: 100%;
+        width: 15em;
     }
 }
 
@@ -212,11 +225,14 @@ footer {
     .post-title {
         font-size: 2.5em;
     }
+    .card-active {
+        transform: scale(0.97);
+    }
     .card-container{
-        max-width: 900px;
+        
     }
     .card-columns {
-        grid-template-columns: repeat(2, 1fr);
+
     }
 }
 
diff --git a/static/js/core.js b/static/js/core.js
index 00c0ee7..6828392 100644
--- a/static/js/core.js
+++ b/static/js/core.js
@@ -1,8 +1,8 @@
 
 function cardPressed() {
-    this.classList.add('card-link-wrapper-active');
+    this.classList.add('card-active');
 }
 
 function cardReleased() {
-    this.classList.remove('card-link-wrapper-active');
+    this.classList.remove('card-active');
 }
\ No newline at end of file