More highlight, 'brand' tweaks

config.toml

@@ -1,6 +1,6 @@
 base_url = "https://www.mat.services"
 title = "mat.services"
-description = "the personal website of matthew ess"
+description = "the personal website of mat ess"
 default_language = "en"
 
 compile_sass = true

content/about.md

@@ -3,7 +3,7 @@ title: "about me"
 path: "about"
 ---
 
-## matthew ess (they/them)
+## mat ess (they/them)
 i'm a 'software engineer'/'code monkey' by trade, currently employed by yelp inc in the engineering effectiveness department. my work is focused on improving the tooling used by other engineers at yelp to develop python services.
 
 [you can look at my resume here](/resume).

sass/style/main.scss

@@ -47,8 +47,9 @@ html {
 }
 
 // Logo
-div.brand>* {
-  padding: 0 0.25em;
+div.brand > * {
+  padding-left: 0.25em;
+  padding-right: 0.25em;
 }
 
 div.brand:hover img#logo {
@@ -97,14 +98,19 @@ footer {
   margin: 2em;
   color: var(--text-1);
   font-size: 0.75em;
-  display: flex;
+}
 
-  #site-info {
-    flex: 1 0;
-  }
+@media (min-width: 500px) {
+  footer {
+    display: flex;
 
-  #copyright {
-    align-items: flex-end;
+    #site-info {
+      flex: 1 0;
+    }
+
+    #copyright {
+      align-items: flex-end;
+    }
   }
 }
 

sass/style/parts/_header.scss

@@ -31,7 +31,7 @@ header {
 }
 
 header .main {
-  font-size: 1.5rem;
+  font-size: 1.2rem;
 
   /* Otherwise header and menu is too close on small screens*/
   margin-bottom: 10px;

sass/style/parts/_misc.scss

@@ -36,32 +36,25 @@ blockquote {
 a {
   color: inherit;
   text-decoration: none;
-  position: relative;
-  transition: all .2s ease-in;
+  box-shadow: inset 0 -3px 0 var(--primary-color);
+  padding-bottom: 3px;
+  transition: all .1s ease-in;
 }
 
 a:hover {
   color: var(--hover-color);
-  transition: all .2s ease;
+  box-shadow: inset 0 -1.45em 0 var(--primary-color);
+  transition: all .3s ease;
 }
 
-a::after {
-  content: "";
-  display: inline-block;
-  position: absolute;
-  z-index: -1;
-  bottom: -3px;
-  left: 0;
-  width: 100%;
-  height: 3px;
-  background-color: var(--primary-color);
-  transition: all .2s ease-in;
-}
+@media (prefers-reduced-motion: reduce) {
+  a {
+    transition: none;
+  }
 
-a:hover::after {
-  height: 100%;
-  transform: translateY(-3px);
-  transition: all .2s ease;
+  a:hover {
+    transition: none;
+  }
 }
 
 time {

templates/partials/footer.html

@@ -3,14 +3,14 @@
     <p id="powered-by">
       powered by <a href="https://getzola.org" target="_blank" rel="noopener noreferral">zola</a> + <a href="https://github.com/not-matthias/apollo" target="_blank" rel="noopener noreferral">apollo</a>
       and
-      <a href="https://nixos.org" target="_blank" rel="noopener noreferral">nix</a>.
+      <a href="https://nixos.org" target="_blank" rel="noopener noreferral">nix</a>
     </p>
     <p id="privacy-note">
-      <a href="/privacy">privacy notice</a>.
+      <a href="/privacy">privacy notice</a>
     </p>
   </div>
   <p id="copyright">
-    &copy; 2022-2023 mat ess.
+    &copy; 2022-2023 mat ess
   </p>
   <script data-goatcounter="https://stats.mat.services/count" async src="//stats.mat.services/count.js" crossorigin integrity="sha256-a8rh6u3maZ6JiY6w6zsLlw9OUQf2tFPUX3t1/BV+RKc="></script>
   <noscript>