Merge pull request #193 from ericmasiello/refactor/grid-for-nav

refactor: use grid for nav layout
ericmasiello · Feb 6, 2024 · 59bd7f9 · 59bd7f9
2 parents 4524efb + 6ccfdbd
commit 59bd7f9
Showing 1 changed file with 3 additions and 10 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -94,7 +94,9 @@ const classes = classNames('header', className, {
   }
 
   .nav-list {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(4, max-content);
+    gap: 1rem;
     font-size: 0.75rem;
     list-style-type: none;
     margin: 0;
@@ -108,16 +110,7 @@ const classes = classNames('header', className, {
   }
 
   .nav-item {
-    padding-inline-end: 1rem;
     text-transform: uppercase;
     font-weight: var(--font-body-weight-bold);
   }
-
-  .nav-item:first-child {
-    padding-inline-start: 0;
-  }
-
-  .nav-item:last-child {
-    padding-inline-end: 0;
-  }
 </style>