From e739a3e0d2088fea9dd23bbded5737a838129a05 Mon Sep 17 00:00:00 2001 From: Anujjoshi3105 Date: Tue, 13 Aug 2024 23:29:30 +0530 Subject: [PATCH 1/4] feat(search): make search field sticky on scroll --- source/style.css | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/source/style.css b/source/style.css index 27da0af..91679d1 100644 --- a/source/style.css +++ b/source/style.css @@ -61,12 +61,21 @@ button:hover, */ .header { display: flex; - gap: 0.5em; + position: sticky; + top: 1em; + z-index: 10; + justify-content: space-between; + align-items: center; + background: inherit; } .header-burger { - flex-shrink: 1; - width: 1.3em; + position: absolute; + right: 0; + width: 1.5rem; + height: 1.5rem; + cursor: pointer; + text-align: center; } /** From cd630c9e90d5e9628116fe0a673cf32ae09a4058 Mon Sep 17 00:00:00 2001 From: Anujjoshi3105 Date: Wed, 14 Aug 2024 00:15:59 +0530 Subject: [PATCH 2/4] updated --- source/style.css | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/source/style.css b/source/style.css index 91679d1..b2f3259 100644 --- a/source/style.css +++ b/source/style.css @@ -62,20 +62,14 @@ button:hover, .header { display: flex; position: sticky; - top: 1em; - z-index: 10; - justify-content: space-between; - align-items: center; - background: inherit; + z-index: 100; + top: var(--margin); + outline: solid var(--margin) #2b2c2c; } .header-burger { - position: absolute; - right: 0; - width: 1.5rem; - height: 1.5rem; - cursor: pointer; - text-align: center; + flex-shrink: 1; + width: 1.3em; } /** From 1d436902eb67bcf1baa6d044aa1b30a29d2daed8 Mon Sep 17 00:00:00 2001 From: Anujjoshi3105 Date: Wed, 14 Aug 2024 09:32:16 +0530 Subject: [PATCH 3/4] Light and Dark mode --- source/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/style.css b/source/style.css index b2f3259..2627353 100644 --- a/source/style.css +++ b/source/style.css @@ -64,7 +64,7 @@ button:hover, position: sticky; z-index: 100; top: var(--margin); - outline: solid var(--margin) #2b2c2c; + outline: solid var(--margin) light-dark(#fff, #292a2d); } .header-burger { From fb17bf75b23f9225a5b6f23b106a5cb49000e655 Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Wed, 14 Aug 2024 11:13:00 +0700 Subject: [PATCH 4/4] Restore gap; move color to var --- source/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/source/style.css b/source/style.css index 2627353..2e27279 100644 --- a/source/style.css +++ b/source/style.css @@ -2,6 +2,7 @@ :root { --margin: 8px; --ext-icon-margin: 0.3em; + --background-color: light-dark(#fff, #292a2d); color-scheme: light dark; } @@ -11,6 +12,7 @@ body { max-width: 800px; padding: var(--margin); direction: auto; + background-color: var(--background-color); } main { @@ -62,9 +64,10 @@ button:hover, .header { display: flex; position: sticky; + gap: 0.5em; z-index: 100; top: var(--margin); - outline: solid var(--margin) light-dark(#fff, #292a2d); + outline: solid var(--margin) var(--background-color); } .header-burger { @@ -155,7 +158,6 @@ button:hover, @media (prefers-color-scheme: dark) { body { - background-color: #292a2d; color: #e8eaed; }