Header: Fixed f5 sites content alignment + clean up CSS (#316)

Author: lamATnginx

assets/css/v2/style.css

@@ -488,39 +488,47 @@ ol li:last-child {
       }
     }
 
-    > ul {
-      padding: 0;
-    }
-  }
+    .header__f5sites {
+      li.nav-item-explore {
+        margin: 0;
+        position: relative;
+        display: inline-block;
+      }
 
-  .dropdown-content {
-    position: absolute;
-    background-color: oklch(var(--color-background));
-    border: oklch(var(--color-foreground)) 1px solid;
-    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-    z-index: 1;
-    right: 0;
-    display: none;
-    width: 400px;
-    max-width: 80vw;
-    margin-right: 1rem;
-  }
+      .dropdown-button {
+        padding: 0.5rem 0.5rem;
+        border: none;
+        text-align: center;
+        text-decoration: none;
+        cursor: pointer;
+      }
 
-  .dropdown-content ul {
-    padding: 20px 10px;
-  }
+      .dropdown-content {
+        position: absolute;
+        background-color: oklch(var(--color-background));
+        border: oklch(var(--color-foreground)) 1px solid;
+        box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+        z-index: 1;
+        right: 0;
+        display: none;
+        width: 400px;
+        max-width: 80vw;
+        margin-block-start: 0.5rem;
 
-  .nav-item-explore {
-    margin: 0;
-  }
+        ul {
+          padding: 20px 10px;
+          margin: 0.5rem 1rem;
 
-  .navbar-button {
-    padding: 0.5rem 0.5rem;
-    border: none;
-    border-radius: 0.25rem;
-    text-align: center;
-    text-decoration: none;
-    cursor: pointer;
+          li:first-child {
+            margin-block-start: 0;
+          }
+        }
+      }
+    }
+
+    > ul {
+      padding: 0;
+    }
   }
 
   ul {

layouts/partials/header.html

@@ -93,11 +93,11 @@
 
     <ul class="navbar navbar-nav">
         <li class="nav-item-explore active">
-          <button id="navbar-sites-button" class="button navbar-button">
+          <button id="navbar-sites-button" class="button navbar-button dropdown-button" data-testid="header__f5sites_button">
               F5 Sites
               <i id="navbar-sites-button-icon" class="link-chevron-icon fa-solid fa-chevron-down"></i>
           </button>
-          <div class="dropdown-content" id="dropdown-content">
+          <div class="dropdown-content" id="dropdown-content" data-testid="header__f5sites_content">
             <ul>
               {{ range $f5Sites }}
                 <li>