hide icons beyond 680px

AndrewDTR · Sep 26, 2024 · cd545e1 · cd545e1
1 parent 30a2c2a
commit cd545e1
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -10,9 +10,7 @@ console.log(currentPath);
     <a class={currentPath === "/posts" ? "nav bold" : "nav"} href="/posts"
       >Blog</a
     >
-    <a class="nav" href="/public/redacted_resume.pdf"
-      >Resume</a
-    >
+    <a class="nav" href="/public/redacted_resume.pdf">Resume</a>
     <a class={currentPath === "/about" ? "nav bold" : "nav"} href="/about"
       >About</a
     >
@@ -104,11 +102,13 @@ console.log(currentPath);
 
   .icons {
     margin-left: auto;
+    opacity: 1;
+    transition: opacity 0.1s;
   }
 
   svg {
     vertical-align: middle;
-    transition: fill 0.2s;
+    transition: fill 0.1s;
   }
 
   .svg-white {
@@ -118,4 +118,10 @@ console.log(currentPath);
   .svg-white:hover {
     fill: #ffaaaa;
   }
+
+  @media (max-width: 680px) {
+    .icons {
+      opacity: 0;
+    }
+  }
 </style>