From 324e9c2676685dbd6fa04a17da9e5c9540549c09 Mon Sep 17 00:00:00 2001 From: Jaskaran Sarkaria Date: Tue, 11 Jan 2022 18:28:27 +0000 Subject: [PATCH] =?UTF-8?q?style:=20=F0=9F=92=84=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .routify/config.js | 2 +- .routify/routes.js | 4 +- public/index.html | 4 +- src/components/Header/Header.svelte | 107 +++++++++++++++++++--------- 4 files changed, 77 insertions(+), 40 deletions(-) diff --git a/.routify/config.js b/.routify/config.js index a3a993d5..6a5b2095 100644 --- 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 index ece362d4..fa689150 100644 --- 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 index 06905bd3..3746827a 100644 --- a/public/index.html +++ b/public/index.html @@ -9,9 +9,9 @@ - + - + diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte index 88ffabd2..59ab17ce 100644 --- 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} home {/if} - + {#if !showSearch} + + {/if}
{#if outerWidth > 960} @@ -80,7 +84,7 @@ {/if} search
@@ -116,11 +120,11 @@ align-self: flex-end; position: absolute; left: 100%; + height: 100%; transform: translateX(-100%); } .right-container * { - margin-right: 10px; align-self: flex-end; } @@ -128,15 +132,21 @@ 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; } }