style: 💄 header

jaskaransarkaria · Jan 11, 2022 · 324e9c2 · 324e9c2
1 parent 236788e
commit 324e9c2
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 40 deletions.
diff --git a/.routify/config.js b/.routify/config.js
@@ -8,5 +8,5 @@ module.exports = {
   noHashScroll: false,
   distDir: 'dist',
   extensions: ['svelte', 'html', 'svx', 'md'],
-  started: '2022-01-08T14:25:54.212Z',
+  started: '2022-01-11T17:46:17.853Z',
 };
diff --git a/.routify/routes.js b/.routify/routes.js
@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Sat Jan 08 2022 14:25:56 GMT+0000 (Greenwich Mean Time)
+ * File generated Tue Jan 11 2022 17:46:20 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2022-01-08T14:25:56.786Z';
+export const __timestamp = '2022-01-11T17:46:20.423Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';

diff --git a/public/index.html b/public/index.html
@@ -9,9 +9,9 @@
 
     <link rel='icon' type='image/png' href='/favicon.png'>
     <link rel='stylesheet' href='/global.css'>
-    <link rel='stylesheet' href='/build/bundle-1641651954210.css'>
+    <link rel='stylesheet' href='/build/bundle-1641923177851.css'>
 
-    <script defer src='/build/bundle-1641651954210.js'></script>
+    <script defer src='/build/bundle-1641923177851.js'></script>
   </head>
   <body>
   </body>

diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte
@@ -3,6 +3,7 @@
   import SearchProducts from '@/components/SearchProducts/SearchProducts.svelte';
   import Hamburger from '@/components/Hamburger/Hamburger.svelte';
   import { tweened } from 'svelte/motion';
+  import { fade } from 'svelte/transition';
 
   const lessThan960 = 150;
   const moreThan960 = 300;
@@ -55,18 +56,21 @@
   {:else}
     <img
       class="home-icon"
-      src="https://enki.imgix.net/home_icon.svg?q=50"
+      src="https://enki.imgix.net/home_icon.svg?q=50&auto=compress&auto=format"
       alt="home"
       on:click={$goto('/')}
     />
   {/if}
-  <img
-    src="https://enki.imgix.net/moving_header.svg?wm=webp&q=90"
-    alt="Enki"
-    loading="eager"
-    class="enki-logo"
-    on:click={$goto('/')}
-  />
+  {#if !showSearch}
+    <img
+      transition:fade|local
+      src="https://enki.imgix.net/moving_header.svg?q=50&auto=compress&auto=format"
+      alt="Enki"
+      loading="eager"
+      class="enki-logo"
+      on:click={$goto('/')}
+    />
+  {/if}
   <div class="right-container">
     {#if outerWidth > 960}
       <button style={move($left)} on:click={$goto('/shop')}> shop </button>
@@ -80,7 +84,7 @@
     {/if}
     <img
       class="search-icon"
-      src="https://enki.imgix.net/search_icon.svg?q=50"
+      src="https://enki.imgix.net/search_icon.svg?q=50&auto=compress&auto=format"
       alt="search"
       style={move($left)}
       on:click={handleClick}
@@ -92,7 +96,7 @@
     {/if}
     <img
       class="basket-icon"
-      src="https://enki.imgix.net/basket_icon.svg?q=50"
+      src="https://enki.imgix.net/basket_icon.svg?q=50&auto=compress&auto=format"
       alt="basket"
     />
   </div>
@@ -116,27 +120,33 @@
     align-self: flex-end;
     position: absolute;
     left: 100%;
+    height: 100%;
     transform: translateX(-100%);
   }
 
   .right-container * {
-    margin-right: 10px;
     align-self: flex-end;
   }
 
   img:hover {
     cursor: pointer;
   }
 
-  img {
-    width: 45px;
+  .basket-icon {
+    margin-right: 10px;
+  }
+
+  .basket-icon,
+  .search-icon {
+    width: 25px;
+    align-self: center;
   }
 
   .enki-logo {
     position: absolute;
-    top: 0;
+    top: 22.5%;
     left: 50%;
-    width: 250px;
+    width: 140px;
     transform: translateX(-50%);
   }
 
@@ -150,45 +160,72 @@
     border-bottom: 3px solid orange;
   }
 
-  @media (min-width: 960px) {
-    .header {
-      display: flex;
-      justify-content: space-between;
-      position: fixed;
+  @media (min-width: 360px) {
+    .basket-icon,
+    .search-icon {
+      width: 30px;
+    }
+
+    .enki-logo {
+      top: 10%;
+      width: 200px;
+    }
+  }
+
+  @media (min-width: 700px) {
+    .basket-icon,
+    .search-icon {
+      width: 35px;
+    }
+
+    .enki-logo {
       top: 0;
-      width: 100%;
-      height: 55px;
-      z-index: 99;
-      background-color: white;
-      box-shadow: 0 0 20px 0 #a3a8a5;
+      width: 250px;
     }
+  }
 
+  @media (min-width: 960px) {
     .right-container {
       display: flex;
       justify-content: flex-end;
-      width: 50%;
-      padding-right: 20px;
+      width: 35%;
     }
 
     .right-container * {
       margin-right: 10px;
-      align-self: flex-end;
+      align-self: center;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .header {
+      height: 65px;
     }
 
-    img:hover {
-      cursor: pointer;
+    .basket-icon,
+    .search-icon {
+      width: 40px;
     }
 
-    img {
+    .enki-logo {
+      top: 0;
+      width: 300px;
+    }
+  }
+
+  @media (min-width: 1960px) {
+    .header {
+      height: 75px;
+    }
+
+    .basket-icon,
+    .search-icon {
       width: 45px;
     }
 
     .enki-logo {
-      position: absolute;
       top: 0;
-      left: 50%;
-      width: 250px;
-      transform: translateX(-50%);
+      width: 350px;
     }
   }
 </style>