From 603c7333e5a8fe0575f568604b8d3532be505ad0 Mon Sep 17 00:00:00 2001 From: Jaskaran Sarkaria Date: Tue, 8 Feb 2022 19:52:00 +0000 Subject: [PATCH] =?UTF-8?q?style:=20=F0=9F=92=84=20footer=20media=20querie?= =?UTF-8?q?s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 33 +++++++++------- src/components/Footer/Footer.svelte | 18 ++++++++- src/pages/index.svelte | 59 ++++++++++++++--------------- 3 files changed, 64 insertions(+), 46 deletions(-) diff --git a/public/index.html b/public/index.html index 05a3e981..7c46e474 100644 --- a/public/index.html +++ b/public/index.html @@ -1,19 +1,24 @@ - - - - + + + Enki - - - - - - - + + + + + + + - - - \ No newline at end of file + + diff --git a/src/components/Footer/Footer.svelte b/src/components/Footer/Footer.svelte index 782e7cb1..f12a416d 100644 --- a/src/components/Footer/Footer.svelte +++ b/src/components/Footer/Footer.svelte @@ -168,17 +168,25 @@ @media (min-width: 600px) { .footer { - height: 15vh; + height: 60vh; + } + } + + @media (min-width: 960px) { + .footer { + height: 40vh; position: absolute; bottom: -225px; } .right-container { margin-right: 1%; + flex-direction: column; + justify-content: center; } .trust-container { - width: 80%; + width: 100%; } .enki-icon { @@ -186,4 +194,10 @@ height: auto; } } + + @media (min-width: 2400px) { + .footer { + height: 15vh; + } + } diff --git a/src/pages/index.svelte b/src/pages/index.svelte index fe122eb4..b130c08a 100644 --- a/src/pages/index.svelte +++ b/src/pages/index.svelte @@ -130,7 +130,6 @@ } .inside-shop { - width: 100vw; z-index: -1; grid-column-start: 1; grid-column-end: span end; @@ -152,32 +151,32 @@ @media (min-width: 450px) { .contact { - width: 50px; - grid-column-start: 70; + width: 90px; + grid-column-start: 84; grid-column-end: span end; - grid-row-start: 50; + grid-row-start: 62; grid-row-end: span end; } .online-shop { - width: 70px; - grid-column-start: 38; + width: 120px; + grid-column-start: 25; grid-column-end: span end; - grid-row-start: 43; + grid-row-start: 45; grid-row-end: span end; } .repairs-and-comms { - width: 70px; - grid-column-start: 12; + width: 90px; + grid-column-start: 2; grid-column-end: span end; grid-row-start: 5; grid-row-end: span end; } .classes { - width: 70px; - grid-column-start: 66; + width: 90px; + grid-column-start: 80; grid-column-end: span end; grid-row-start: 5; grid-row-end: span end; @@ -186,18 +185,18 @@ @media (min-width: 600px) { .contact { - width: 80px; - grid-column-start: 70; + width: 100px; + grid-column-start: 80; grid-column-end: span end; - grid-row-start: 50; + grid-row-start: 60; grid-row-end: span end; } .online-shop { - width: 100px; - grid-column-start: 37; + width: 120px; + grid-column-start: 32; grid-column-end: span end; - grid-row-start: 43; + grid-row-start: 45; grid-row-end: span end; } @@ -211,9 +210,9 @@ .classes { width: 100px; - grid-column-start: 66; + grid-column-start: 77; grid-column-end: span end; - grid-row-start: 1; + grid-row-start: 5; grid-row-end: span end; } } @@ -221,33 +220,33 @@ @media (min-width: 800px) { .contact { width: 100px; - grid-column-start: 70; + grid-column-start: 72; grid-column-end: span end; - grid-row-start: 50; + grid-row-start: 60; grid-row-end: span end; } .online-shop { width: 120px; - grid-column-start: 38; + grid-column-start: 36; grid-column-end: span end; - grid-row-start: 43; + grid-row-start: 45; grid-row-end: span end; } .repairs-and-comms { width: 120px; - grid-column-start: 12; + grid-column-start: 10; grid-column-end: span end; - grid-row-start: 5; + grid-row-start: 3; grid-row-end: span end; } .classes { width: 120px; - grid-column-start: 66; + grid-column-start: 70; grid-column-end: span end; - grid-row-start: 1; + grid-row-start: 4; grid-row-end: span end; } } @@ -307,15 +306,15 @@ width: 180px; grid-column-start: 12; grid-column-end: span end; - grid-row-start: 5; + grid-row-start: 2; grid-row-end: span end; } .classes { width: 180px; - grid-column-start: 66; + grid-column-start: 69; grid-column-end: span end; - grid-row-start: 5; + grid-row-start: 1; grid-row-end: span end; } }