Fix a few navbar and styling issues

xypnox · Feb 27, 2024 · f90ed67 · f90ed67
1 parent 3f13eda
commit f90ed67
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 25 deletions.
diff --git a/src/components/footer.astro b/src/components/footer.astro
@@ -61,6 +61,7 @@ const links = [
   .footer-row {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
     gap: 1rem;
   }
   footer p {

diff --git a/src/components/nav/Navbar.astro b/src/components/nav/Navbar.astro
@@ -21,7 +21,7 @@ import NavLink from "./NavLink.astro";
     <NavLink href="https://x5z.studio">x5z</NavLink>
   </div>
   <div class="mobile-menu-button navButton navSurface">
-    <iconify-icon icon={icons.menu} />
+    <iconify-icon icon={icons.menu}></iconify-icon>
   </div>
   <div id="themePopupSection">
     <ThemePopup client:only />
@@ -74,6 +74,7 @@ import NavLink from "./NavLink.astro";
   .navbar > .navSurface {
     display: flex;
     align-items: center;
+    color: var(--text);
     border-radius: calc(var(--border-radius) * 2);
     background: var(--background);
     padding: 0 0.5rem;
@@ -83,6 +84,27 @@ import NavLink from "./NavLink.astro";
     animation: borderFlash 3s;
   }
 
+  .navbar :global(.navButton) {
+    padding: 0.5rem;
+    width: 4rem;
+    border-radius: calc(var(--border-radius) * 2);
+    color: var(--primary-contrast);
+    background: var(--primary-color);
+    border: none;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    iconify-icon {
+      font-size: 2rem;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 3px;
+    }
+  }
+
   .navbar .mobile-menu,
   .navbar .mobile-menu-button {
     display: none;
@@ -149,12 +171,6 @@ import NavLink from "./NavLink.astro";
     .navbar .navlinks {
       display: none;
     }
-    .navbar :global(.navButton) {
-      width: 4rem;
-      display: flex;
-      font-size: 2rem;
-      cursor: pointer;
-    }
 
     .navbar .mobile-menu-button {
       display: flex;

diff --git a/src/components/themeManager/popup.tsx b/src/components/themeManager/popup.tsx
@@ -142,23 +142,5 @@ const PopupControls = styled('div')`
 `
 
 const PopupButton = styled('button')`
-  padding: 0.5rem;
-  width: 4rem;
-  border-radius: calc(${theme.border.radius} * 2);
-  color: var(--primary-contrast);
-  background: var(--primary-color);
-  border: none;
-  position: relative;
   z-index: 120;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  iconify-icon {
-    font-size: 2rem;
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--primary-color);
-    outline-offset: 3px;
-  }
 `
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -150,6 +150,12 @@ import LatestBlog from "../components/latestBlog.astro";
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   }
 
+  @media (max-width: 400px) {
+    .containers {
+      grid-template-columns: 1fr;
+    }
+  }
+
   .blog-and-links {
     display: flex;
     flex-direction: column;