From 0dfad272945af5c734e80e28660deff0be62335d Mon Sep 17 00:00:00 2001 From: Katy248 Date: Wed, 5 Jun 2024 14:35:27 +0000 Subject: [PATCH] Start fixing sticky floating buttons --- build.sh | 34 ++++++++++++++----------- style.css | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 88 insertions(+), 20 deletions(-) diff --git a/build.sh b/build.sh index be7f95f..06c7dc4 100755 --- a/build.sh +++ b/build.sh @@ -49,20 +49,8 @@ echo " -
- - - - - - -
- + +

Gruvbox Wallpapers

" > ./index.html color=1 @@ -122,7 +110,7 @@ do color=1 fi done - +echo "
" >> ./index.html echo "" >> ./index.html +echo " + +
+ + + + + + +
+ " >> ./index.html echo " diff --git a/style.css b/style.css index 43b0182..2de3665 100644 --- a/style.css +++ b/style.css @@ -31,11 +31,61 @@ body { background-color: var(--bg-color); - padding-left: 15%; - padding-right: 15%; + container-type: inline-size; font-family: "Curier New", monospace; + margin: 0; + min-height: 100svh; } +main { + display: flex; + flex-direction: column; + padding-left: 1rem; + padding-right: 1rem; + /* height: 100svh; */ + +} + +@container (min-width: 640px) { + main { + padding-left: 4rem; + padding-right: 4rem; + + } +} + +@container (min-width: 768px) { + main { + padding-left: 8rem; + padding-right: 8rem; + + } +} + +@container (min-width: 1024px) { + main { + padding-left: 12rem; + padding-right: 12rem; + + } +} + +@container (min-width: 1280px) { + main { + padding-left: 14rem; + padding-right: 14rem; + + } +} + +@container (min-width: 1536px) { + main { + padding-left: 18rem; + padding-right: 18rem; + } +} + + * { color: var(--fg-color); border: none; @@ -186,13 +236,27 @@ img:hover { display: none; } +.float-container { + + position: sticky; + top: 0; + /* width: 100vw; */ + /* height: 100vh; */ + + display: flex; + flex-direction: row; + justify-content: end; + align-content: centers; +} + .float-btns { - position: fixed; - bottom: 1rem; - right: 2rem; + /* position: static; */ + margin-bottom: 1rem; + margin-right: 2rem; display: flex; flex-direction: column; gap: 0.5rem; + justify-content: end; } .btn.float-btn {