style(settings): rework section links to follow website style

Author: Miodec

frontend/src/html/pages/settings.html

@@ -2,6 +2,43 @@
   <div class="scrollToTopButton invisible">
     <i class="fas fa-angle-double-up"></i>
   </div>
+  <div class="settingsGroup quickNav">
+    <div class="links">
+      <a class="textButton" href="#group_behavior">
+        <i class="fas fa-tools"></i>
+        behavior
+      </a>
+      <a class="textButton" href="#group_input">
+        <i class="fas icon fa-keyboard"></i>
+        input
+      </a>
+      <a class="textButton" href="#group_sound">
+        <i class="fas icon fa-volume-up"></i>
+        sound
+      </a>
+      <a class="textButton" href="#group_caret">
+        <i class="fas icon fa-i-cursor"></i>
+        caret
+      </a>
+      <a class="textButton" href="#group_appearance">
+        <i class="fas icon fa-eye"></i>
+        appearance
+      </a>
+      <a class="textButton" href="#group_theme">
+        <i class="fas icon fa-palette"></i>
+        theme
+      </a>
+      <a class="textButton" href="#group_hideElements">
+        <i class="fas icon fa-eye-slash"></i>
+        hide elements
+      </a>
+      <a class="textButton" href="#group_dangerZone">
+        <i class="fas icon fa-exclamation-triangle"></i>
+        danger zone
+      </a>
+    </div>
+  </div>
+
   <div class="tip">
     tip: You can also change all these settings quickly using the command line (
     <key>ctrl/cmd</key>
@@ -13,18 +50,6 @@
     <key>esc</key>
     )
   </div>
-  <div class="settingsGroup quickNav">
-    <div class="links">
-      <a class="textButton" href="#group_behavior">behavior</a>
-      <a class="textButton" href="#group_input">input</a>
-      <a class="textButton" href="#group_sound">sound</a>
-      <a class="textButton" href="#group_caret">caret</a>
-      <a class="textButton" href="#group_appearance">appearance</a>
-      <a class="textButton" href="#group_theme">theme</a>
-      <a class="textButton" href="#group_hideElements">hide elements</a>
-      <a class="textButton" href="#group_dangerZone">danger zone</a>
-    </div>
-  </div>
 
   <div id="ad-settings-1-wrapper" class="ad full-width advertisement ad-h">
     <div class="icon"><i class="fas fa-ad"></i></div>

frontend/src/styles/media-queries-green.scss

@@ -77,9 +77,13 @@
         }
       }
     }
-    .settingsGroup.quickNav .links {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+    .settingsGroup.quickNav {
+      justify-content: unset;
+      .links {
+        max-width: unset;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+      }
     }
   }
   .pageAccount {

frontend/src/styles/settings.scss

@@ -50,13 +50,27 @@
   .settingsGroup {
     display: grid;
     gap: 2rem;
-    &.quickNav .links {
-      width: 100%;
-      display: flex;
-      flex-wrap: wrap;
-      text-align: center;
-      a {
-        flex-grow: 1;
+    &.quickNav {
+      justify-content: center;
+      .links {
+        font-size: 0.75rem;
+        background: var(--sub-alt-color);
+        border-radius: var(--roundness);
+        max-width: fit-content;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        text-align: center;
+        a:first-child {
+          padding-left: 2em;
+        }
+        a:last-child {
+          padding-right: 2em;
+        }
+        a {
+          padding: 1em;
+          flex-grow: 1;
+        }
       }
     }
   }