lots of changes

author: Joseph Hutchinson <hutch7995@gmail.com> 2018-04-23 05:54:22 +0300
committer: Joseph Hutchinson <hutch7995@gmail.com> 2018-04-23 05:54:22 +0300
commit: 5532b3f7d4d3d1811164d587a605b311d9bd4949 (patch)
tree: 6cfc6f9f28e23e94366ff6c3a23df41ebc1122eb
parent: d38b73187970dc6eff376a4ea5fcaf8f5fcb85a8 (diff)
6 files changed, 54 insertions, 31 deletions
diff --git a/layouts/_default/li.html b/layouts/_default/li.html
index 77f2429..46f5eee 100644
--- a/layouts/_default/li.html
+++ b/layouts/_default/li.html
@@ -1,7 +1,7 @@
 <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" >
+  href="{{ .Permalink }}" class="card" rel="bookmark" >
     {{ if isset .Params "featuredimage" }}
-    <div>
+    <div class="card-img-container">
       <img src="{{ .Site.BaseURL }}/{{.Params.featuredimage }}" class="card-img">
     </div>
     {{ end }}
@@ -11,7 +11,7 @@
     <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>
+      <p style="margin: 0 1em 0 0;">#{{ .Params.category }}</p>
     </div>
   </article>
 </a>
 \ No newline at end of file
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 18a394a..dd75224 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -8,7 +8,7 @@
         <h1 class="list-header-title">Technologic</h1>
       </header>
       {{ range .Paginator.Pages }}
-        {{ .Render "li" }}
+      {{ .Render "li" }}
       {{ end }}
     </main>
     <div class="pagination-nav side-gutter">
diff --git a/layouts/_default/single-li.html b/layouts/_default/single-li.html
index 5cfa96c..552c9e4 100644
--- a/layouts/_default/single-li.html
+++ b/layouts/_default/single-li.html
@@ -1,9 +1,9 @@
 <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" >
+  href="{{ .Permalink }}" class="card card-top-spacing side-gutter" 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>
+      <img src="{{ .Site.BaseURL }}/{{.Params.featuredimage }}" class="card-img">
     </div>
     {{ end }}
   <article class="card-body">
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 4092351..b12c548 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -3,7 +3,7 @@
   {{ partial "head.html" . }}
   <body class="single-body">
     {{ partial "nav-bar.html" . }}
-    <main class="content side-gutter">
+    <main class="content side-padding">
       <article class="post">
         <header class="post-header">
           <h1 class="post-title">{{ .Title }}</h1>
@@ -21,9 +21,8 @@
       -->
     </main>
     {{ with .Next }}
-      {{ .Render "single-li" }}
+    {{ .Render "single-li" }}
     {{ end }}
-    {{ partial "footer.html" . }}
     {{ partial "scripts.html" . }}
   </body>
 </html>
 \ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index b7d022c..256c00e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -33,16 +33,18 @@ strong {
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin-bottom: 2em;
 }
 .nav-bar {
     width: 100%;
-    padding: 0.45em 0;
+    padding: 0.7em 0;
     text-align: center;
 }
 .nav-header {
     margin: 0 0;
 }
 .post {
+    margin: 2em 0 3em 0;
     line-height: 1.5;
 }
 .post-header {
@@ -74,10 +76,10 @@ strong {
     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);
+    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);
     max-width: 42em;
     width: 100%;
-    margin: 1em 0 3em 0;
+    margin: 0em 0 2em 0;
 }
 .list-header {
     margin: 9em 0 5em 0;
@@ -98,7 +100,7 @@ strong {
 .card-columns {
     display: grid;
     grid-template-columns: 1fr;
-    grid-gap: 1.5em;
+    grid-gap: 2em;
     justify-content: center;
     max-width: 42em;
 }
@@ -107,26 +109,18 @@ strong {
     flex-direction: column;
     align-items: stretch;
     background-color: white;
-    border-radius: 0.2em;
+    border-radius: 0.3em;
     text-decoration: none;
     -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;
+    border-radius: 0.3em 0.3em 0 0;
     margin-bottom: -0.28em;
     max-height: 10em;
     object-fit: cover;
@@ -137,7 +131,7 @@ strong {
     top: 0;
     font-size: 1.27em;
     text-align: center;
-    padding: 1.225em 0 0.5em 0;
+    padding: 1.18em 0 0.5em 0;
     width: 100%;
     box-sizing: border-box;
     margin: 0;
@@ -162,6 +156,9 @@ strong {
     justify-content: flex-start;
     font-size: 0.8em;
 }
+.card-top-spacing {
+    margin-top: 2em;
+}
 .pagination-nav {
     margin: 3em 0 2em 0;
     display: grid;
@@ -198,6 +195,11 @@ strong {
     margin: -0.05em;
 }
 .side-gutter {
+    margin-left: 0.7em !important;
+    margin-right: 0.7em !important;
+    box-sizing: border-box !important;
+}
+.side-padding {
     padding-left: 0.7em !important;
     padding-right: 0.7em !important;
     box-sizing: border-box !important;
@@ -266,7 +268,30 @@ footer {
     padding: 2em 0;
     margin: 2em 0 0 0;
 }
-
+@media screen and (pointer: coarse) {
+ .card-hover {
+    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);
+    }
+}
+@media not screen and (pointer: coarse) {
+    .card:hover {
+        transform: scale(0.97);
+        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 {
+        transform: scale(1) !important;
+    }
+}
+@media not screen and (pointer: coarse) {
+    .card:hover {
+        transform: scale(0.97);
+        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 {
+        transform: scale(1) !important;
+    }
+}
 /* Medium devices (tablets, ~641px and up) */
 @media only screen and (min-width: 40.063em) {
     body {
@@ -285,9 +310,7 @@ footer {
     .card {
         flex-direction: row;
         align-items: stretch;
-    }
-    .card-active {
-        transform: scale(0.97);
+        border-radius: 0.2em;
     }
     .card-img {
         border-radius: 0.2em 0 0 0.2em;
@@ -310,7 +333,7 @@ footer {
         font-size: 0.7em;
     }
     .post {
-        margin: 2em 1em;
+        margin: 3em 1em;
     }
     .post-title {
         font-size: 2.5em;
@@ -322,6 +345,7 @@ footer {
 
 /* Large devices (desktops, ~1025px and up) */
 @media only screen and (min-width: 64.063em) {
+
 }
 
 /* Extra large devices (large desktops, ~1441px and up) */
diff --git a/static/js/core.js b/static/js/core.js
index 6828392..efd5859 100644
--- a/static/js/core.js
+++ b/static/js/core.js
@@ -1,8 +1,8 @@
 
 function cardPressed() {
-    this.classList.add('card-active');
+    this.classList.add('card-hover');
 }
 
 function cardReleased() {
-    this.classList.remove('card-active');
+    this.classList.remove('card-hover');
 }
 \ No newline at end of file
author	Joseph Hutchinson <hutch7995@gmail.com>	2018-04-23 05:54:22 +0300
committer	Joseph Hutchinson <hutch7995@gmail.com>	2018-04-23 05:54:22 +0300
commit	5532b3f7d4d3d1811164d587a605b311d9bd4949 (patch)
tree	6cfc6f9f28e23e94366ff6c3a23df41ebc1122eb
parent	d38b73187970dc6eff376a4ea5fcaf8f5fcb85a8 (diff)