From cd545e1a38812e0baf5e2bad430626c3a843ce40 Mon Sep 17 00:00:00 2001
From: Andrew <74398819+AndrewDTR@users.noreply.github.com>
Date: Wed, 25 Sep 2024 19:12:22 -0500
Subject: [PATCH] hide icons beyond 680px

---
 src/components/Header.astro | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index b3aec3b..83d2241 100644
--- 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>