website-name less distractive; added border to articles

assets/_default/list.scss

@@ -28,10 +28,11 @@ header {
     flex-flow: column;
     height: max-content;
     transition: background .2s;
+    border: 1px solid rgb(60, 60, 90);
     img {
       order: -1;
       max-width: calc(100% + 40px);
-      border-radius: 5px;
+      border-radius: 5px 5px 0px 0px;
       margin: -20px -20px 20px -20px;
       background: rgb(80, 80, 120);
       object-fit: cover;

assets/_default/single.scss

@@ -16,20 +16,21 @@
       max-width: 100%;
       margin-bottom: 15px;
       border-radius: 5px;
+      border: 1px solid rgb(60, 60, 90);
     }
     a {
       background: rgb(60, 60, 90);
-      color: rgb(240, 240, 255);
+      color: rgb(240, 240, 250);
       transition: background .2s, color .2s;
       margin: -5px 0;
       padding: 5px 5px;
       border-radius: 5px;
-    }
+      &:hover {
-    a:hover {
         background: rgb(255, 130, 130);
         color: rgb(255, 255, 255);
         text-decoration: none;
       }
+    }
     aside {
       margin-top: 80px;
       .tags {
@@ -42,8 +43,7 @@
             color: rgb(180, 180, 220);
             padding: 10px;
             margin-left: 10px;
-          }
+            &:hover {
-          a:hover {
               background: rgb(70, 70, 105);
             }
           }
@@ -51,6 +51,7 @@
       }
     }
   }
+}
 
 .section-articles {
   margin: 20px auto -50px auto;

assets/index.scss

@@ -29,11 +29,12 @@ header {
     grid-template-areas: "img h1"
                          "img p";
     transition: background .2s;
+    border: 1px solid rgb(60, 60, 90);
     img {
       object-fit: cover;
       height: 180px;
       width: 120px;
-      border-radius: 5px;
+      border-radius: 5px 0px 0px 5px;
       border: 0px solid rgb(40, 40, 60);
       grid-area: img;
       margin: -20px;
@@ -79,10 +80,11 @@ header {
     flex-flow: column;
     height: max-content;
     transition: background .2s;
+    border: 1px solid rgb(60, 60, 90);
     img {
       order: -1;
       max-width: calc(100% + 40px);
-      border-radius: 5px;
+      border-radius: 5px 5px 0px 0px;
       margin: -20px -20px 20px -20px;
       background: rgb(80, 80, 120);
       object-fit: cover;

assets/partials/_main.scss

@@ -22,10 +22,10 @@ body {
 a {
   color: rgb(255, 130, 130);
   text-decoration: none;
-}
+  &:hover {
-a:hover {
     text-decoration: underline;
   }
+}
 
 .container {
   width: calc(100% - 40px);

assets/partials/_nav.scss

@@ -9,10 +9,12 @@ nav {
        a {
         color: rgb(245, 245, 245);
         text-decoration: none;
-        background: rgb(255, 130, 130);
+        padding: 20px 30px;
-        padding: 5px 10px;
+        display: block;
-        border-radius: 20px;
+        transition: background .2s;
-        text-shadow: rgb(255, 100, 100) 2px 2px;
+      }
+      a:hover {
+        background: rgb(50, 50, 75);
       }
     }
     .website-nav {

assets/projects/list.scss

@@ -28,10 +28,11 @@ header {
     max-width: 562px;
     height: max-content;
     transition: background .2s;
+    border: 1px solid rgb(60, 60, 90);
     img {
       order: -1;
       max-width: calc(100% + 40px);
-      border-radius: 5px;
+      border-radius: 5px 5px 0px 0px;
       margin: -20px -20px 20px -20px;
       background: rgb(80, 80, 120);
       object-fit: cover;

config.yaml

@@ -2,6 +2,8 @@ baseURL: https://vrifox.cc/
 languageCode: en-us
 title: vrifox.cc
 enableRobotsTXT: true
+params:
+  menuname: vrifox.cc
 menu:
   main:
   - identifier: blog

layouts/_default/single.html

@@ -14,7 +14,7 @@
         </p>
         <h1 class="title">{{ .Title }}</h1>
         {{ with .Params.featured_image }}
-        <img src="{{ . | relURL }}_720w" loading="lazy">
+        <img src="{{ . | relURL }}" loading="lazy">
         {{ end }}
         {{ .Content }}
         <aside class="meta">

layouts/partials/nav.html

@@ -1,7 +1,7 @@
 <nav>
   <div class="container">
     <section class="website-name">
-      <a href="{{ .Site.BaseURL }}">Vrifox</a>
+      <a href="{{ .Site.BaseURL }}">{{ .Site.Params.menuname }}</a>
     </section>
     <section class="website-nav">
       <ul>