From 697ead7113d5453a69911dc8eb73542cf482466a Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Mon, 17 Aug 2020 15:20:51 -0400
Subject: [PATCH] Header: improve mobile breakpoint document structure

---
 src/components/Header/Header.css |  45 +++-----
 src/components/Header/Header.tsx | 170 +++++++++++++++----------------
 2 files changed, 100 insertions(+), 115 deletions(-)

diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 9b4c60f..c0dd8b9 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -59,6 +59,21 @@ a.nav-link:hover:after {
   flex-wrap: wrap;
 }
 
+#cutting-mat {
+  position: absolute;
+  /* transform: translate(120px, 824px); */
+}
+
+#receipt {
+  position: absolute;
+  transform: translate(-116px, 136px);
+}
+
+#calculator {
+  position: absolute;
+  transform: translate(724px, 240px);
+}
+
 @media screen and (max-width: 759px) {
   .intro h2 {
     font-size: 40px;
@@ -111,21 +126,6 @@ a.nav-link:hover:after {
     position: absolute;
     transform: translate(672px, -900px);
   }
-
-  #cutting-mat {
-    position: absolute;
-    transform: translate(96px, 766px);
-  }
-
-  #calculator {
-    position: absolute;
-    transform: translate(632px, 938px);
-  }
-
-  #receipt {
-    position: absolute;
-    transform: translate(-96px, 958px);
-  }
 }
 
 @media screen and (min-width: 760px) and (max-width: 1023px) {
@@ -178,19 +178,4 @@ a.nav-link:hover:after {
     position: absolute;
     transform: translate(982px, 621px);
   }
-
-  #cutting-mat {
-    position: absolute;
-    transform: translate(120px, 824px);
-  }
-
-  #receipt {
-    position: absolute;
-    transform: translate(-16px, 1016px);
-  }
-
-  #calculator {
-    position: absolute;
-    transform: translate(924px, 940px);
-  }
 }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 5ebc343..d1959e9 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -89,6 +89,91 @@ const Header: React.FC<HeaderProps> = () => {
               Github
             </a>
           </div>
+          {hovered === "cutting-mat" ? (
+          <motion.img
+            id="cutting-mat"
+            key="cutting-mat-spec"
+            className="inspectable"
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            variants={illustrationVariants}
+            // onHoverStart={() => setHovered("cutting-mat")}
+            onHoverEnd={clearHover}
+            src={cuttingMatSpec}
+            alt=""
+          />
+        ) : (
+          <motion.img
+            id="cutting-mat"
+            key="cutting-mat"
+            className="inspectable"
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            variants={illustrationVariants}
+            onHoverStart={() => setHovered("cutting-mat")}
+            // onHoverEnd={clearHover}
+            src={cuttingMat}
+            alt=""
+          />
+        )}
+        {hovered === "receipt" ? (
+          <motion.img
+            id="receipt"
+            key="receipt-spec"
+            className="inspectable"
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            variants={illustrationVariants}
+            // onHoverStart={() => setHovered("receipt")}
+            onHoverEnd={clearHover}
+            src={receiptSpec}
+            alt=""
+          />
+        ) : (
+          <motion.img
+            id="receipt"
+            key="receipt"
+            className="inspectable"
+            initial="visible"
+            variants={illustrationVariants}
+            onHoverStart={() => setHovered("receipt")}
+            // onHoverEnd={clearHover}
+            src={receipt}
+            alt=""
+          />
+        )}
+        {hovered === "calculator" ? (
+          <motion.img
+            id="calculator"
+            key="calculator-spec"
+            className="inspectable"
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            variants={illustrationVariants}
+            // onHoverStart={() => setHovered("calculator")}
+            onHoverEnd={clearHover}
+            src={calculatorSpec}
+            alt=""
+          />
+        ) : (
+          <motion.img
+            id="calculator"
+            key="calculator"
+            className="inspectable"
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            variants={illustrationVariants}
+            onHoverStart={() => setHovered("calculator")}
+            // onHoverEnd={clearHover}
+            src={calculator}
+            alt=""
+          />
+        )}
         </div>
         <AnimatePresence>
           {hovered === "tablet" ? (
@@ -178,91 +263,6 @@ const Header: React.FC<HeaderProps> = () => {
               alt=""
             />
           )}
-          {hovered === "cutting-mat" ? (
-            <motion.img
-              id="cutting-mat"
-              key="cutting-mat-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={illustrationVariants}
-              // onHoverStart={() => setHovered("cutting-mat")}
-              onHoverEnd={clearHover}
-              src={cuttingMatSpec}
-              alt=""
-            />
-          ) : (
-            <motion.img
-              id="cutting-mat"
-              key="cutting-mat"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={illustrationVariants}
-              onHoverStart={() => setHovered("cutting-mat")}
-              // onHoverEnd={clearHover}
-              src={cuttingMat}
-              alt=""
-            />
-          )}
-          {hovered === "receipt" ? (
-            <motion.img
-              id="receipt"
-              key="receipt-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={illustrationVariants}
-              // onHoverStart={() => setHovered("receipt")}
-              onHoverEnd={clearHover}
-              src={receiptSpec}
-              alt=""
-            />
-          ) : (
-            <motion.img
-              id="receipt"
-              key="receipt"
-              className="inspectable"
-              initial="visible"
-              variants={illustrationVariants}
-              onHoverStart={() => setHovered("receipt")}
-              // onHoverEnd={clearHover}
-              src={receipt}
-              alt=""
-            />
-          )}
-          {hovered === "calculator" ? (
-            <motion.img
-              id="calculator"
-              key="calculator-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={illustrationVariants}
-              // onHoverStart={() => setHovered("calculator")}
-              onHoverEnd={clearHover}
-              src={calculatorSpec}
-              alt=""
-            />
-          ) : (
-            <motion.img
-              id="calculator"
-              key="calculator"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={illustrationVariants}
-              onHoverStart={() => setHovered("calculator")}
-              // onHoverEnd={clearHover}
-              src={calculator}
-              alt=""
-            />
-          )}
         </AnimatePresence>
       </motion.div>
     </header>