Use a more-standard list in the nav

initialcapacity · Nov 21, 2023 · 02771d6 · 02771d6
1 parent 3bda1ec
commit 02771d6
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 34 deletions.
diff --git a/css/menu.css b/css/menu.css
@@ -1,4 +1,20 @@
-nav > * {
+nav {
+    padding: 2rem 0;
+}
+
+nav ul {
+    display: flex;
+    flex-direction: column;
+
+    list-style: none;
+    padding: 0;
+}
+
+nav li {
+    margin: 0;
+}
+
+nav li a {
     height: 2.5rem;
     padding: 0 2rem;
     display: flex;
@@ -10,10 +26,8 @@ nav h2 {
     font-weight: 700;
     text-transform: uppercase;
     font-size: .9rem;
-    align-items: flex-end;
-    height: fit-content;
-    margin-top: 2rem;
     margin-bottom: .25rem;
+    padding: 0 2rem;
 }
 
 nav a, nav a:visited {

diff --git a/index.html b/index.html
@@ -49,38 +49,53 @@ <h1>CSS Starter</h1>
 </header>
 <nav>
     <h2>Widgets</h2>
-    <a href="#">
-        <svg>
-            <use xlink:href="images/grid.svg#icon"></use>
-        </svg>
-        Dashboard
-    </a>
-    <a href="#">
-        <svg>
-            <use xlink:href="images/heart.svg#icon"></use>
-        </svg>
-        Favorites
-    </a>
-    <a href="#">
-        <svg>
-            <use xlink:href="images/plus.svg#icon"></use>
-        </svg>
-        Add
-    </a>
+    <ul>
+        <li>
+            <a href="#">
+                <svg>
+                    <use xlink:href="images/grid.svg#icon"></use>
+                </svg>
+                Dashboard
+            </a>
+
+        </li>
+        <li>
+            <a href="#">
+                <svg>
+                    <use xlink:href="images/heart.svg#icon"></use>
+                </svg>
+                Favorites
+            </a>
+        </li>
+        <li>
+            <a href="#">
+                <svg>
+                    <use xlink:href="images/plus.svg#icon"></use>
+                </svg>
+                Add
+            </a>
+        </li>
+    </ul>
 
     <h2>Profile</h2>
-    <a href="#">
-        <svg>
-            <use xlink:href="images/account.svg#icon"></use>
-        </svg>
-        Account
-    </a>
-    <a href="#">
-        <svg>
-            <use xlink:href="images/settings.svg#icon"></use>
-        </svg>
-        Settings
-    </a>
+    <ul>
+        <li>
+            <a href="#">
+                <svg>
+                    <use xlink:href="images/account.svg#icon"></use>
+                </svg>
+                Account
+            </a>
+        </li>
+        <li>
+            <a href="#">
+                <svg>
+                    <use xlink:href="images/settings.svg#icon"></use>
+                </svg>
+                Settings
+            </a>
+        </li>
+    </ul>
 </nav>
 <main>
     <section id="typography">