fix: layout on small screens

index.html

@@ -51,7 +51,6 @@
       <a href="/pages/services.html">Servisi</a>
       <a href="/pages/contact.html">Kontakt</a>
     </span>
-    <span class="copyleft">
     <span class="links">
         <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
             alt="CreativeCommons"></a>
@@ -60,7 +59,6 @@
             alt="SourceCode"></a>
         <a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
     </span>
-    </span>
   </footer>
 </body>
 

pages/account.html

@@ -40,7 +40,7 @@
       <a href="/pages/services.html">Servisi</a>
       <a href="/pages/contact.html">Kontakt</a>
     </span>
-    <span class="copyleft">
+    <span class="links">
       <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
           alt="CreativeCommons"></a>
       <a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>

pages/blog.html

@@ -33,7 +33,7 @@
       <a href="/pages/services.html">Servisi</a>
       <a href="/pages/contact.html">Kontakt</a>
     </span>
-    <span class="copyleft">
+    <span class="links">
       <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
           alt="CreativeCommons"></a>
       <a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>

pages/contact.html

@@ -38,7 +38,7 @@
       <a href="/pages/services.html">Servisi</a>
       <a href="/pages/contact.html">Kontakt</a>
     </span>
-    <span class="copyleft">
+    <span class="links">
       <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
           alt="CreativeCommons"></a>
       <a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>

pages/events.html

@@ -81,7 +81,7 @@
       <a href="/pages/services.html">Servisi</a>
       <a href="/pages/contact.html">Kontakt</a>
     </span>
-    <span class="copyleft">
+    <span class="links">
       <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
           alt="CreativeCommons"></a>
       <a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>

pages/projects.html

@@ -33,7 +33,7 @@
       <a href="/pages/services.html">Servisi</a>
       <a href="/pages/contact.html">Kontakt</a>
     </span>
-    <span class="copyleft">
+    <span class="links">
       <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
           alt="CreativeCommons"></a>
       <a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>

pages/services.html

@@ -89,7 +89,7 @@
       <a href="/pages/services.html">Servisi</a>
       <a href="/pages/contact.html">Kontakt</a>
     </span>
-    <span class="copyleft">
+    <span class="links">
       <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
           alt="CreativeCommons"></a>
       <a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>

pages/webring.html

@@ -34,7 +34,7 @@
       <a href="/pages/services.html">Servisi</a>
       <a href="/pages/contact.html">Kontakt</a>
     </span>
-    <span class="copyleft">
+    <span class="links">
       <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
           alt="CreativeCommons"></a>
       <a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>

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;
+  }
 }