sass 'use', lighthouse/observatory tweaks (#54)

getzola · May 6, 2023 · 7246221 · 7246221
1 parent 76561e0
commit 7246221
Show file tree

Hide file tree

Showing 14 changed files with 287 additions and 92 deletions.
diff --git a/config.toml b/config.toml
@@ -3,7 +3,7 @@ base_url = "https://zola-even.netlify.app"
 
 compile_sass = true
 title = "even theme"
-description = ""
+description = "A clean, responsive theme"
 generate_feed = true
 
 taxonomies = [
@@ -13,6 +13,7 @@ taxonomies = [
 
 [markdown]
 highlight_code = true
+highlight_theme = "css"
 
 [extra]
 author = "Vincent"

diff --git a/content/markdown_overview.md b/content/markdown_overview.md
@@ -62,5 +62,4 @@ fn main() {
 
 ## An image
 
-![a cat](https://placekitten.com/200/300?image=4 "A cat photo taken by Energetic
-Spirit (CC BY-SA 2.0)")
+![a cat](https://i.imgur.com/dmnJACE.jpg "A cat")
diff --git a/netlify.toml b/netlify.toml
@@ -2,7 +2,17 @@
     command = "zola build"
 
 [build.environment]
-    ZOLA_VERSION = "0.16.0"
+    ZOLA_VERSION = "0.17.2"
 
 [context.deploy-preview]
-    command = "zola build --base-url $DEPLOY_PRIME_URL"
+    command = "zola build --base-url $DEPLOY_PRIME_URL"
+
+[[headers]]
+  for = "/*"
+  [headers.values]
+    X-Frame-Options = "DENY"
+    X-Content-Type-Options = "nosniff"
+    X-XSS-Protection = "1; mode=block"
+    Referrer-Policy = "strict-origin-when-cross-origin"
+    Strict-Transport-Security = "max-age=63072000; includeSubdomains"
+    Content-Security-Policy = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; script-src 'self' cdnjs.cloudflare.com; img-src 'self' i.imgur.com data: cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;"
diff --git a/sass/_animations.scss b/sass/_animations.scss
@@ -1,3 +1,4 @@
+@use "variables";
 @mixin underline-from-center() {
   display: inline-block;
   vertical-align: middle;
@@ -15,7 +16,7 @@
     bottom: 0;
     left: 51%;
     right: 51%;
-    background: $main-colour;
+    background: variables.$main-colour;
     transition-duration: 0.2s;
     transition-property: right, left;
     transition-timing-function: ease-out;
@@ -104,7 +105,7 @@
     top: calc((100% - 1px) / 2);
     width: 20px;
     height: 1px;
-    background-color: $main-colour;
+    background-color: variables.$main-colour;
 
     &:nth-child(1) {
       transform: translateY(6px) rotate(0deg);

diff --git a/sass/_base.scss b/sass/_base.scss
@@ -1,3 +1,4 @@
+@use "variables";
 html {
   font-size: 16px;
   box-sizing: border-box;
@@ -7,17 +8,17 @@ body {
   line-height: 1.5;
   color: #34495e;
   background: #fefefe;
-  border-top: 3px solid $main-colour;
+  border-top: 3px solid variables.$main-colour;
   overflow-y: scroll;
 }
 
 .container {
-  width: $body-width;
+  width: variables.$body-width;
   margin: 0 auto;
   padding-bottom: 4rem;
 }
 
-@include max-screen() {
+@include variables.max-screen() {
   body {
     border-top: 0;
   }
@@ -29,7 +30,7 @@ body {
 }
 
 a {
-  color: $main-colour;
+  color: variables.$main-colour;
   text-decoration: none;
 }
 
@@ -48,7 +49,7 @@ pre {
 pre, code {
   font-size: 90%;
   overflow: auto;
-  font-family: $code-font-family;
+  font-family: variables.$code-font-family;
   margin-bottom: 0;
   color: #c9d2dc;
 }

diff --git a/sass/_header.scss b/sass/_header.scss
@@ -1,3 +1,5 @@
+@use "variables";
+@use "animations";
 #header {
   padding: 20px;
   display: flex;
@@ -15,7 +17,7 @@
 
   .menu {
     align-self: flex-start;
-    font-family: $decoration-font-family;
+    font-family: variables.$decoration-font-family;
 
     ul {
       display: inline-block;
@@ -24,7 +26,7 @@
       li {
         display: inline-block;
         margin-right: 5px;
-        @include underline-from-center;
+        @include animations.underline-from-center;
 
         a {
           color: #34495e;
@@ -34,7 +36,7 @@
     }
   }
 }
-@include max-screen() {
+@include variables.max-screen() {
   #header {
     .logo, .menu {
       display: none;

diff --git a/sass/_main.scss b/sass/_main.scss
@@ -1,3 +1,5 @@
+@use "variables";
+@use "animations";
 main {
   clear: both;
 
@@ -11,8 +13,8 @@ main {
   }
 
   .read-more a {
-    color: $main-colour;
-    font-family: $decoration-font-family;
+    color: variables.$main-colour;
+    font-family: variables.$decoration-font-family;
     font-size: 1.1rem;
 
     &:hover {
@@ -25,7 +27,7 @@ main {
     padding: 1.5rem 0;
 
     .post__title {
-      font-family: $decoration-font-family;
+      font-family: variables.$decoration-font-family;
 
       a {
         color: #34495e;
@@ -39,15 +41,15 @@ main {
     :not(pre) > code {
       padding: 3px 5px;
       border-radius: 4px;
-      color: $code-colour;
-      background: $secondary-colour;
+      color: variables.$code-colour;
+      background: variables.$secondary-colour;
     }
 
     p > a {
-      color: $main-colour;
+      color: variables.$main-colour;
 
       &:hover {
-        border-bottom: 1px solid $main-colour;
+        border-bottom: 1px solid variables.$main-colour;
       }
     }
 
@@ -73,24 +75,24 @@ main {
       box-shadow: 2px 2px 3px rgba(0, 0, 0, .125);
 
       thead {
-        background: $secondary-colour;
+        background: variables.$secondary-colour;
       }
 
       th, td {
         padding: 5px 15px;
-        border: 1px double darken($secondary-colour, 3%);
+        border: 1px double darken(variables.$secondary-colour, 3%);
       }
 
       tr:hover {
-        background-color: $secondary-colour;
+        background-color: variables.$secondary-colour;
       }
     }
 
     .footnote-definition {
       padding-left: 40px;
 
       &:first-of-type {
-        border-top: 2px dashed $main-colour;
+        border-top: 2px dashed variables.$main-colour;
         margin-top: 1rem;
         padding-top: 1rem;
       }
@@ -117,7 +119,7 @@ main {
       font-size: 26px;
       font-weight: 400;
 
-      @include underline-from-center;
+      @include animations.underline-from-center;
     }
 
     &__category {
@@ -132,14 +134,14 @@ main {
         }
 
         &:hover {
-          color: $main-colour;
+          color: variables.$main-colour;
         }
       }
     }
 
     &__meta {
       font-size: 14px;
-      color: #8a8a8a;
+      color: #757575;
     }
 
     &__summary {
@@ -165,7 +167,7 @@ main {
 
     a {
       margin-right: 5px;
-      color: $main-colour;
+      color: variables.$main-colour;
       word-break: break-all;
     }
   }
@@ -180,7 +182,7 @@ main {
 
   .pagination {
     clear: both;
-    font-family: $decoration-font-family;
+    font-family: variables.$decoration-font-family;
     margin: 2rem 0;
 
     a {
@@ -195,7 +197,7 @@ main {
   transition: transform 0.3s ease-out;
 
   &:hover {
-    color: $main-colour;
+    color: variables.$main-colour;
   }
 }
 
@@ -220,8 +222,8 @@ main {
   &__title {
     display: inline-block;
     font-size: 18px;
-    color: $main-colour;
-    border-bottom: 2px solid $main-colour;
+    color: variables.$main-colour;
+    border-bottom: 2px solid variables.$main-colour;
   }
 
   &__items {
@@ -233,14 +235,14 @@ main {
       position: relative;
 
       &:hover {
-        color: $main-colour;
+        color: variables.$main-colour;
       }
 
       .count {
         position: relative;
         top: -8px;
         right: -2px;
-        color: $main-colour;
+        color: variables.$main-colour;
         font-size: 12px;
       }
     }
@@ -256,28 +258,28 @@ main {
     transition: 0.2s ease-out;
 
     &:hover {
-      border-left: 3px solid $main-colour;
+      border-left: 3px solid variables.$main-colour;
       transform: translateX(4px);
     }
 
     &__time {
       margin-right: 10px;
-      color: #8a8a8a;
+      color: #757575;
     }
 
     &__title a {
-      color: $main-colour;
+      color: variables.$main-colour;
     }
   }
 }
 
 .about {
   p > a {
-    color: $main-colour;
+    color: variables.$main-colour;
     word-break: break-all;
 
     &:hover {
-      border-bottom: 1px solid $main-colour;
+      border-bottom: 1px solid variables.$main-colour;
     }
   }
 }