feat: 🎸 add santa hat to the thunderbolt icon

instantusername · Dec 23, 2022 · 6e8942f · 6e8942f
1 parent 947c46e
commit 6e8942f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 15 deletions.
diff --git a/src/components/Search.js b/src/components/Search.js
@@ -25,6 +25,7 @@ export default function Search({ input, onChange }) {
           }}
         >
           <div className="header">
+            <img id="santa" src={require('../resources/santa.svg')} alt="Santa hat" />
             <Icon type="thunderbolt" theme="filled" />
             <h1>{'Instant Username Search'}</h1>
           </div>

diff --git a/src/styles/Landing.css b/src/styles/Landing.css
@@ -13,15 +13,6 @@
   position: relative;
 }
 
-#santa {
-  width: 2.6rem;
-  height: 2.6rem;
-  position: absolute;
-  top: -1.2rem;
-  left: 2.45rem;
-  transform: rotate(11deg);
-}
-
 .landing .intro h2 {
   font-weight: bold;
 }
@@ -38,12 +29,6 @@
     min-width: 5rem;
     min-height: 5rem;
   }
-  #santa {
-    width: 2rem;
-    height: 2rem;
-    top: -1rem;
-    left: 1.8rem;
-  }
 }
 @media (min-width: 1200px) {
   .landing .intro p {

diff --git a/src/styles/Search.css b/src/styles/Search.css
@@ -19,6 +19,7 @@
 .header {
   display: flex;
   flex-direction: row;
+  position: relative;
 }
 
 .header h1 {
@@ -36,6 +37,14 @@
   font-size: 0.8rem;
 }
 
+#santa {
+  width: 2.7rem;
+  height: 2.7rem;
+  position: absolute;
+  top: -1.3rem;
+  left: 1rem;
+}
+
 @media (max-width: 360px) {
   .header {
     margin-bottom: 0.5rem;
@@ -50,6 +59,13 @@
     font-size: 0.9rem;
     height: 1.8rem !important;
   }
+  #santa {
+    width: 1.8rem;
+    height: 1.8rem;
+    position: absolute;
+    top: -1rem;
+    left: 0.6rem;
+  }
 }
 
 @media (min-width: 360px) {
@@ -66,6 +82,13 @@
     font-size: 1.05rem;
     height: 2.1rem !important;
   }
+  #santa {
+    width: 2rem;
+    height: 2rem;
+    position: absolute;
+    top: -1rem;
+    left: 0.85rem;
+  }
 }
 
 @media (min-width: 768px) {
@@ -82,6 +105,13 @@
     font-size: 1.3rem;
     height: 2.6rem !important;
   }
+  #santa {
+    width: 2.7rem;
+    height: 2.7rem;
+    position: absolute;
+    top: -1.3rem;
+    left: 1rem;
+  }
 }
 @media (min-width: 992px) {
   .header {
@@ -97,4 +127,11 @@
     font-size: 1.25rem;
     height: 2.7rem !important;
   }
+  #santa {
+    width: 2.7rem;
+    height: 2.7rem;
+    position: absolute;
+    top: -1.3rem;
+    left: 1rem;
+  }
 }