feat: Underline links for accessebility, add active style for clickable elements, use current year in footer

sass/_buttons.scss

@@ -13,6 +13,7 @@
   display: inline-block;
   font-size: 0.9rem;
   padding: 0.4rem 1rem;
+  text-decoration: none;
   transition: var(--transition);
 
   &:hover {
@@ -20,6 +21,10 @@
     text-decoration: none;
   }
 
+  &:active {
+    transform: scale(var(--active));
+  }
+
   &.colored {
     color: var(--primary-color);
     background-color: transparent;

sass/_comments.scss

@@ -33,6 +33,11 @@ section#comments {
           box-shadow: var(--shadow-raised);
           transform: rotate(10deg) scale(1.1);
         }
+
+        &:active {
+          box-shadow: var(--shadow);
+          transform: scale(var(--active));
+        }
       }
 
       &.op::after {
@@ -63,7 +68,7 @@ section#comments {
 
       .instance {
         background-color: var(--fg-muted-1);
-        border-radius: 9999px;
+        border-radius: 999px;
         color: var(--fg-color);
         font-size: 0.8rem;
         font-weight: 600;

sass/_crt.scss

@@ -4,10 +4,6 @@
   box-shadow: var(--glow);
   background: var(--crt-bg);
 
-  a {
-    text-decoration: underline;
-  }
-
   pre {
     color: var(--primary-color);
     padding: 1rem 1rem;
@@ -44,10 +40,10 @@
   width: 100%;
 
   @keyframes scanlines {
-    0% {
+    from {
       transform: translateY(0px);
     }
-    100% {
+    to {
       transform: translateY(-8px);
     }
   }
@@ -57,7 +53,7 @@
   animation: blicking 1s infinite;
 
   @keyframes blicking {
-    0% {
+    from {
       opacity: 1;
     }
     50% {

sass/_main.scss

@@ -130,7 +130,7 @@ a {
   color: var(--primary-color);
   cursor: pointer;
   font-weight: 600;
-  text-decoration: none;
+  text-decoration: underline dotted;
 
   &:hover {
     text-decoration: underline;
@@ -236,18 +236,18 @@ pre {
 }
 
 kbd {
-  background-color: var(--fg-muted-1);
+  background-color: var(--fg-muted-2);
   border-radius: var(--rounded-corner-small);
-  box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-2);
+  box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3);
   cursor: pointer;
   display: inline-block;
   font-size: 0.8rem;
   line-height: normal;
   padding: 2px 6px;
-
+  transition: var(--transition);
   // Small nice thingy, keys can be pressed!
   &:active {
-    background-color: var(--fg-muted-2);
+    background-color: var(--fg-muted-3);
     box-shadow: inset 0 1px 0 var(--fg-muted-2);
     transform: translateY(2px);
   }
@@ -312,4 +312,3 @@ td,
 th {
   padding: 0;
 }
-

sass/_nav.scss

@@ -38,6 +38,7 @@
     display: inline-block;
     font-weight: 400;
     padding: 0.4rem 1rem;
+    text-decoration: none;
     transform: scale(1);
     transition: var(--transition);
 
@@ -46,6 +47,10 @@
       color: var(--primary-color);
       text-decoration: none;
     }
+
+    &:active {
+      transform: scale(var(--active));
+    }
   }
 
   @media only screen and (max-device-width: 480px) {
@@ -57,7 +62,7 @@
 
   @media (min-width: 600px) {
     & {
-      border-radius: 9999px;
+      border-radius: 999px;
 
       &-container {
         text-align: left;
@@ -70,7 +75,7 @@
       }
 
       a {
-        border-radius: 9999px;
+        border-radius: 999px;
       }
     }
   }

sass/_tags.scss

@@ -6,14 +6,19 @@
   li {
     display: inline-block;
     margin: 0 0.2rem 0.4rem 0;
-  }
-}
+    transition: var(--transition);
 
-.tag {
+    &:active {
+      transform: scale(var(--active));
+    }
+  }
+
+  .tag {
     background-color: var(--fg-muted-1);
-  border-radius: 9999px;
+    border-radius: 999px;
     color: var(--fg-color);
     padding: 0.25rem 0.75rem;
+    text-decoration: none;
     transition: var(--transition);
 
     &:hover {
@@ -25,4 +30,5 @@
     &::before {
       content: "#";
     }
+  }
 }

sass/_variables.scss

@@ -46,6 +46,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   --yellow-fg: rgb(156, 110, 3);
 
   // VARIABLES
+  --active: 0.9;
   --content-width: 720px;
   --drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
     drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));

templates/includes/footer.html

@@ -1,6 +1,6 @@
 <footer class="footer">
   {% if config.extra.footer.show_copyright %}
-    <p title="Last built at {{ now() | date(format='%F %R %Z') }}">&copy; {{ config.title }}, 2023</p>
+    <p title="Last built at {{ now() | date(format='%F %R %Z') }}">&copy; {{ config.title }}, {{ now() | date(format="%Y") }}</p>
   {% endif %}
 
   {% if config.extra.footer.show_source %}