[Build] Fixes and stuff

Fix mobile nav not having home button Fix theme selector being broken on mobile Fix brightness on image links again
Team-Resourceful · Aug 22, 2024 · e450144 · e450144
1 parent e8e7d4c
commit e450144
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
@@ -344,10 +344,10 @@ svg.inline-svg {
   background-color: aliceblue !important;
 }
 
-.markdown-body a:focus-visible,.markdown-body a:hover img:only-child {
+.markdown-body a:focus-visible,.markdown-body a:hover:has(img:only-child) {
   filter: none !important;
 }
 
-.markdown-body a:active img:only-child {
+.markdown-body a:active:has(img:only-child) {
   filter: none !important;
 }
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -43,15 +43,21 @@
         </div>
         <div class="mobile-navbar" :class="{ expanded: mobileBrowseOpen || mobileUserOpen }">
           <button
-            class="tab button-animation"
+            class="tab button-animation no-active"
             :class="{ 'router-link-exact-active': mobileBrowseOpen }"
             title="Search"
             @click="toggleBrowseMenu()"
           >
             <LinkIcon/>
             Links
           </button>
-          <button class="tab button-animation" title="Toggle Mobile Menu"
+          <nuxt-link class="tab" href="/projects">
+            <span>
+              <BeeHiveOutline/>
+              Home
+            </span>
+          </nuxt-link>
+          <button class="tab button-animation no-active" title="Toggle Mobile Menu"
                   @click="toggleMobileMenu()">
             <template v-if="!mobileUserOpen">
               <HamburgerIcon/>
@@ -549,6 +555,7 @@ function toggleBrowseMenu() {
         text-align: center;
         font-size: var(--font-size-sm);
         height: 100%;
+        aspect-ratio: 1/1;
 
         &.browse {
           svg {
@@ -588,15 +595,6 @@ function toggleBrowseMenu() {
           }
 
           color: var(--color-brand);
-
-          &::before {
-            content: '';
-            inset: 0.25rem;
-            position: absolute;
-            background-color: var(--color-brand-highlight);
-            z-index: -1;
-            border-radius: 1rem;
-          }
         }
       }
     }

diff --git a/pages/settings/index.vue b/pages/settings/index.vue
@@ -109,6 +109,14 @@ onMounted(() => {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--gap-lg);
+
+  @media screen and (max-width: 800px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media screen and (max-width: 400px) {
+    grid-template-columns: repeat(1, 1fr);
+  }
 }
 .theme-option {
   width: 100%;