fix: layout on small screens

styles/style.css

@@ -33,9 +33,9 @@ body {
 body {
   display: grid;
   grid-template:
-    "header" 10vh
+    "header" 4rem
     "main" 1fr
-    "footer" 10vh
+    "footer" 4rem
     / 1fr;
   gap: 0;
   font-family: 'Iosevka';
@@ -121,6 +121,11 @@ a:focus {
 
 .links {
   display: flex;
+  gap: 2rem;
+}
+
+.links > a:hover{
+  background-color: var(--bg);
 }
 
 #sections-button {
@@ -135,29 +140,21 @@ a:focus {
   border: 2px solid var(--border);
   background-color: var(--bg);
   position: absolute;
-  bottom: calc(10vh - 2px);
+  bottom: calc(4rem - 2px);
   left: calc(0px - 2px);
   align-items: center;
   padding: 2rem 3rem;
   display: none;
 }
 
-.copyleft a,
+.sections, #sections-menu {
+  font-variant: small-caps;
+}
+
 .sections a {
   margin: 0 1rem 0 0;
 }
 
-.copyleft a:hover,
-.copyleft a:focus {
-  background-color: var(--bg);
-}
-
-.copyleft {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
 button {
   font-style: italic;
   font-weight: lighter;
@@ -195,7 +192,11 @@ screen and (max-width: 1500px) {
   }
 
   .links {
-    display: none;
+    gap: 1.2rem;
+  }
+
+  .links a {
+    width: 1.5rem;
   }
 
   header,
@@ -206,4 +207,8 @@ screen and (max-width: 1500px) {
   #theme-switcher {
     margin-right: 1rem;
   }
+
+  .account {
+    font-size: 1rem;
+  }
 }