add: card style

assets/css/dark.css

@@ -1,6 +1,9 @@
 /* dark.css */ 
---font-color: #eee;
---bg-color: #212121;
+--font-color: #dadadb;
+--bg-color: #1d1e20;
+  
+--card-color: #2e2e33;
+--card-border-color: #333333;
 
 --link-color:#599ada;
 --link-state-color:#ff5858;
@@ -9,7 +12,7 @@
 --thead-bg-color: #343a40;
 --table-border-color: lightgrey;
 
---nav-bg-color: #242424;
+--nav-bg-color: #2e2e33;
 --nav-link-color: #b6b6b6;
 
 --pre-color: #f8f8f2;

assets/css/light.css

@@ -1,7 +1,10 @@
 :root {
    /* light.css */ 
-    --font-color: #333;
-    --bg-color: #f5f5f5;
+    --font-color: #1e1e1e;
+    --bg-color: #ffffff;
+    
+    --card-color: #fafafa;
+    --card-border-color: #eeeeee;
 
     --link-color:#1d60a3;
     --link-state-color:#a31d1d;
@@ -10,7 +13,7 @@
     --thead-bg-color: lightgrey;
     --table-border-color: lightgrey;
 
-    --nav-bg-color: #f1f1f1;
+    --nav-bg-color: #fafafa;
     --nav-link-color: #696969;
     --nav-border-radius: 10px;
 

assets/css/main.css

@@ -198,7 +198,7 @@ hr {
 
 .common-header {
     padding-bottom: 1.5em;
-    border-bottom: thin solid var(--hr-color);
+    /* border-bottom: thin solid var(--hr-color); */
 }
 
 header a {
@@ -236,6 +236,7 @@ header nav:not(:empty){
     max-width: 100%;
     text-align: center;
     padding: 0.5em 0;
+    border: 1px solid var(--card-border-color);
     border-radius: var(--nav-border-radius);
 }
 
@@ -286,6 +287,17 @@ main h1 {
     font-weight: 600;
 }
 
+.post-card {
+    border: 1px solid var(--card-border-color) !important;
+    border-radius: 0.5em;
+    padding: 0em 1em 1em 1em;
+    background: var(--card-color);
+}
+
+article:not(:last-of-type) {
+    margin-bottom: 1.5em;
+}
+
 .post-short-list:first-of-type {
     margin-top: 1em;
 }
@@ -339,6 +351,10 @@ main h1 {
     color: var(--link-state-color);
 }
 
+.post-list {
+    border: #777;
+}
+
 .post-short-list .post-title {
     display: inline;
 }
@@ -361,10 +377,10 @@ main h1 {
     margin-left: 0.2em;
 }
 
-article:not(:last-of-type) {
+/* article:not(:last-of-type) {
     border-bottom: thin solid var(--hr-color);
     padding-bottom: 2em;
-}
+} */
 
 article header h1 {
     font-size: 1.35em;

layouts/partials/post-summary.html

@@ -1,4 +1,4 @@
-<article class="post-list h-feed">
+<article class="post-list h-feed post-card">
     <div class="post-header">
         <header>
             <h1 class="p-name post-title{{ if .Params.favorite }} favorite{{end}}{{ if .Params.draft }} draft{{end}}"><a class="u-url" href="{{ .RelPermalink }}">{{ trim .Title " " | markdownify }}</a></h1>