assets/css/override.css

@@ -33,7 +33,7 @@ line-height: 3.1em;
   .content {
       background: #121212;
       border: solid;
-      border-width: 3px;
+      border-width: 1px;
       border-color: white;
   }
 
@@ -61,7 +61,7 @@ line-height: 3.1em;
       color: white;
       border: solid;
       border-color: white;
-      border-width: 3px;
+      border-width: 2px;
 
   }
 

assets/css/style.css

@@ -16,15 +16,17 @@
 body {
     font-family: Avenir, HelveticaNeue-Light, "Helvetica Neue Light",
                  "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-    color: #454545;
+    /* color: #454545; */
     font-size: 1.1em;
+    background: linear-gradient(90deg, #000 21px, transparent 1%) center, linear-gradient(#000 21px, transparent 1%) center, white;
+    background-color: #C9C8C8;
     background-size: 22px 22px;
     margin: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-    /* box-sizing: border-box; */
+    box-sizing: border-box;
     word-break: break-word;
 }
 
@@ -52,7 +54,7 @@ p {
     width: 100%;
     background-color: white;
     border-radius: 1.2rem;
-    /* box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.3); */
+    box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.3);
 }
 .home-faceshot {
     margin: 0;
@@ -93,6 +95,7 @@ p {
     color: black;
     font-weight: bolder;
     font-size: 5rem;
+    transition: font-size 0.4s;
 }
 
 
@@ -166,10 +169,10 @@ p {
     max-width: 50rem;
     /* border-radius: 1.2rem; */
     z-index: 2;
-    /* transition: transform 0.2s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.2s cubic-bezier(0.25,0.8,0.25,1); */
+    transition: transform 0.2s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.2s cubic-bezier(0.25,0.8,0.25,1);
 
     border: solid;
-    border-width: 3px;
+    border-width: 1px;
     border-color: black;
 }
 
@@ -202,12 +205,13 @@ p {
     /* margin: 3rem 0; */
     width: 100%;
     max-width: 50rem;
-    /* /* box-sizing: border-box; */ */
+    box-sizing: border-box;
     background-color: white;
     text-decoration: none;
     /* border-radius: 1.2rem; */
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    /* transition: transform 0.2s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.2s cubic-bezier(0.25,0.8,0.25,1); */
+    transition: transform 0.2s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.2s cubic-bezier(0.25,0.8,0.25,1);
+    /* box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.3); */
 }
 .home-card {
     padding: 0.8em;
@@ -222,7 +226,7 @@ p {
     display: flex;
 
     border: solid;
-    border-color: black;
+    border-color: grey;
     border-width: 3px;
 
     flex-direction: column;
@@ -257,7 +261,7 @@ p {
     text-align: center;
     padding: 0.77em 0;
     width: 100%;
-    /* /* box-sizing: border-box; */ */
+    box-sizing: border-box;
     margin: 0;
     color: white;
     background-color: rgba(0, 0, 0, 0.4);
@@ -318,11 +322,11 @@ p {
     background-color: #FFF;
     text-decoration: none;
     border-radius: 0.3rem;
-    /* transition: transform 0.1s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.1s cubic-bezier(0.25,0.8,0.25,1); */
+    transition: transform 0.1s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.1s cubic-bezier(0.25,0.8,0.25,1);
-    /* box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.3); */
+    box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.3);
 }
 .button:hover {
-    /* box-shadow: 0 0.05rem 0.15rem rgba(0,0,0,0.12), 0 0.05rem 0.1rem rgba(0,0,0,0.24); */
+    box-shadow: 0 0.05rem 0.15rem rgba(0,0,0,0.12), 0 0.05rem 0.1rem rgba(0,0,0,0.24);
     transform: scale(0.97);
 }
 .button:active {
@@ -335,12 +339,12 @@ p {
 .side-padding {
     padding-left: 1.2rem !important;
     padding-right: 1.2rem !important;
-    /* /* box-sizing: border-box !important; */ */
+    box-sizing: border-box !important;
 }
 .side-text-padding {
     padding-left: 1.2rem !important;
     padding-right: 1.2rem !important;
-    /* /* box-sizing: border-box !important; */ */
+    box-sizing: border-box !important;
 }
 .small-pic {
     display: block;
@@ -526,9 +530,8 @@ footer h3 {
         flex-direction: row;
         align-items: stretch;
         border: solid;
-        border-color: black;
+        border-color: grey;
         border-width: 3px;
-        border-style: solid;
     }
     .card-img {
         margin: 0;

layouts/_default/home.html

@@ -1,8 +1,6 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.LanguageCode }}" dir="ltr">
-
   {{ partial "head.html" . }}
-  
   <body class="list-body">
 
     <main class="card-container side-gutter">

layouts/_default/li.html

@@ -1,4 +1,5 @@
-<a href="{{ .Permalink }}" class="card blog-card blog-card-feed" rel="bookmark" >
+<a
+  href="{{ .Permalink }}" class="card blog-card blog-card-feed" rel="bookmark" >
   <div class="card-img-container">
       {{ with .Resources.GetMatch "featuredImage" }}
     <picture>