From 96eef9616a81d50cc1244a8d5fe2b438c393d4dc Mon Sep 17 00:00:00 2001 From: Katy248 Date: Wed, 5 Jun 2024 12:56:59 +0000 Subject: [PATCH 1/6] Fixed theme switcher, changed `\"` to `'` in `build.sh`, added `.btn` class and hover color for it --- app.js | 55 +++++++++++++++++++++++++++++++++---------------- build.sh | 52 +++++++++++++++++++++-------------------------- style.css | 61 +++++++++++++++++++++++++++++++------------------------ 3 files changed, 94 insertions(+), 74 deletions(-) diff --git a/app.js b/app.js index ccea8c8..cea0841 100644 --- a/app.js +++ b/app.js @@ -2,7 +2,7 @@ function loadPage(section, page) { let buttons = document.getElementById(section).getElementsByTagName("button"); let currSel; for (let i in buttons) { - if (buttons[i].classList?.contains("sel-btn")) { + if (buttons[i].classList?.contains("selected")) { if (page - 1 == i) return; else { currSel = buttons[i]; @@ -16,9 +16,9 @@ function loadPage(section, page) { .then((data) => { document.getElementById(section + "-content").innerHTML = data; if (currSel) { - currSel.classList.remove("sel-btn"); + currSel.classList.remove("selected"); } - document.getElementById(section).getElementsByTagName("button")[page - 1].classList.add("sel-btn"); + document.getElementById(section).getElementsByTagName("button")[page - 1].classList.add("selected"); }); } @@ -27,9 +27,9 @@ function activeSection(section) { const targetSection = document.getElementById(section); targetSection.style.display = "block"; - setTimeout(()=>{ - targetSection.scrollIntoView({ block: "start", behavior: "smooth" }); - },100) + setTimeout(() => { + targetSection.scrollIntoView({ block: "start", behavior: "smooth" }); + }, 100); } function hideAll() { @@ -37,18 +37,37 @@ function hideAll() { s.style.display = "none"; }); } +const HIDDEN_CLASS = "hidden"; - -function switchTheme(){ - let currTheme = document.documentElement.style.getPropertyValue('color-scheme'); - console.log(currTheme); - if (currTheme == "dark") { - document.getElementsByClassName("fa-sun")[0].style.display = "none"; - document.getElementsByClassName("fa-moon")[0].style.display = "block"; - document.documentElement.style.setProperty('color-scheme', 'light'); +function hideThemeSwitcher(currentTheme) { + if (currentTheme == "dark") { + document.getElementById("dark-icon")?.classList.add(HIDDEN_CLASS); + document.getElementById("light-icon")?.classList.remove(HIDDEN_CLASS); } else { - document.getElementsByClassName("fa-moon")[0].style.display = "none"; - document.getElementsByClassName("fa-sun")[0].style.display = "block"; - document.documentElement.style.setProperty('color-scheme', 'dark'); + document.getElementById("light-icon")?.classList.add(HIDDEN_CLASS); + document.getElementById("dark-icon")?.classList.remove(HIDDEN_CLASS); } -} \ No newline at end of file +} +function getCurrentTheme() { + const fromProperty = document.documentElement.style.getPropertyValue("color-scheme"); + if (fromProperty) return fromProperty; + const prefersTheme = window.matchMedia("(prefers-color-scheme: dark)") ? "dark" : "light"; + return prefersTheme; +} + +function setTheme(newTheme) { + document.documentElement.style.setProperty("color-scheme", newTheme); + hideThemeSwitcher(newTheme); +} + +function switchTheme() { + let currentTheme = getCurrentTheme(); + console.debug("Start theme switching to " + currentTheme + " theme"); + setTheme(currentTheme == "dark" ? "light" : "dark"); +} + +function initColorTheme() { + const currentTheme = getCurrentTheme(); + console.debug("Current theme is " + currentTheme + ""); + setTheme(currentTheme); +} diff --git a/build.sh b/build.sh index 48e19f5..83f25e6 100755 --- a/build.sh +++ b/build.sh @@ -22,14 +22,14 @@ write_section_header(){ - echo "

" >> $3 + echo "

" >> $3 echo "$2" | tr a-z A-Z >> $3 echo "

" >> $3 } write_img(){ - echo " -\"$1\"" >> $2 + echo " +$1" >> $2 } rm *.html @@ -37,32 +37,30 @@ rm *.html touch ./index.html echo " - + - + - + Gruvbox wallpapers - - + + -
- -
- -

Gruvbox Wallpapers

" > ./index.html @@ -85,16 +83,16 @@ do subhtml="${section}_page${page}.html" touch ./$subhtml - echo "
" >> ./index.html + echo "
" >> ./index.html - echo "
" >> ./index.html + echo "
" >> ./index.html countImgs=$(find "$subdir" -type f | wc -l) countImgs=$((countImgs - 1)) for i in $(seq 1 $((( $countImgs / $maxPerPage)+1))); do - echo "" >> ./index.html + echo "" >> ./index.html done echo "
" >> ./index.html - echo "
" >> ./index.html + echo "
" >> ./index.html echo "
" >> ./$subhtml for wallpaper in ${subdir}/* do @@ -128,18 +126,14 @@ done echo "" >> ./index.html diff --git a/style.css b/style.css index 9cbfc38..4c32a10 100644 --- a/style.css +++ b/style.css @@ -8,6 +8,7 @@ --fg-color-reverse: light-dark(#fbf1c7, #282828); --bg-color-3: light-dark(#bdae93, #665c54); + --bg-color-3-switch: light-dark(#665c54, #bdae93); --bg-color-hard: light-dark(#f9f5d7, #1d2021); --gray: light-dark(#7c6f64, #a89984); } @@ -19,8 +20,9 @@ body { font-family: "Curier New", monospace; } -*:not( i ) { +* { color: var(--fg-color); + border: none; } h1, @@ -87,27 +89,33 @@ img:hover { margin-top: 5px; margin-bottom: 10px; padding: 5px; - /*border-radius: 8px; */ color: var(--fg-color-reverse); - /*display: flex; - justify-content: center;*/ text-align: center; } -.pager button { +.btn { + cursor: pointer; background-color: var(--bg-color-reverse); - border: none; color: var(--fg-color-reverse); + + /* Horizontal and vertical center content */ + display: inline-flex; + flex-direction: column; + justify-content: center; + align-items: center; + + &:hover { + background-color: var(--bg-color-3-switch); + } +} + +.btn.pager-btn { padding: 10px 20px; - text-align: center; - text-decoration: none; - display: inline-block; font-size: 16px; font-weight: 900; margin: 4px 2px; - cursor: pointer; - &.sel-btn { + &.selected { background-color: var(--bg-color); color: var(--fg-color); @@ -125,26 +133,25 @@ img:hover { display: none; } -.float-btns{ +.float-btns { position: fixed; - /*top: 80%;*/ - bottom: 10px; - right: 35px; + bottom: 1rem; + right: 2rem; + display: flex; + flex-direction: column; + gap: 0.5rem; } -.float-btn{ - background-color: var(--bg-color-reverse); - border: none; - color: var(--fg-color-reverse); - text-align: center; - text-decoration: none; - display: inline-block; +.btn.float-btn { height: 2.5rem; width: 2.5rem; - margin-bottom: 10px; + font-size: 1.5rem; + + & i { + color: var(--fg-color-reverse); + } } -.float-btn span{ - font-size: 1.5rem; - color: var(--fg-color-reverse); -} \ No newline at end of file +.hidden { + display: none !important; +} From 841e75f581545ebe1b3f1e0c423ad1205e519e50 Mon Sep 17 00:00:00 2001 From: Katy248 Date: Wed, 5 Jun 2024 13:10:57 +0000 Subject: [PATCH 2/6] Add hover colors for `.s[1-7]` classes --- build.sh | 2 +- style.css | 67 ++++++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 60 insertions(+), 9 deletions(-) diff --git a/build.sh b/build.sh index 83f25e6..e52d074 100755 --- a/build.sh +++ b/build.sh @@ -22,7 +22,7 @@ write_section_header(){ - echo "

" >> $3 + echo "

" >> $3 echo "$2" | tr a-z A-Z >> $3 echo "

" >> $3 } diff --git a/style.css b/style.css index 4c32a10..da433c7 100644 --- a/style.css +++ b/style.css @@ -11,6 +11,22 @@ --bg-color-3-switch: light-dark(#665c54, #bdae93); --bg-color-hard: light-dark(#f9f5d7, #1d2021); --gray: light-dark(#7c6f64, #a89984); + + --orange: #d65d0e; + --red: #cc241d; + --green: #98971a; + --yellow: #d79921; + --blue: #458588; + --purple: #b16286; + --aqua: #689d6a; + + --orange-dim: light-dark(#af3a03, #fe8019); + --red-dim: light-dark(#9d0006, #fb4934); + --green-dim: light-dark(#79740e, #b8bb26); + --yellow-dim: light-dark(#b57614, #fabd2f); + --blue-dim: light-dark(#076678, #83a598); + --purple-dim: light-dark(#8f3f71, #d3869d); + --aqua-dim: light-dark(#427b58, #8ec07c); } body { @@ -39,39 +55,74 @@ h2 { color: var(--fg-color-reverse); } +h2 { + cursor: pointer; +} + +.s { + transition: all 0.7s ease-in-out; +} + .s1 { - background-color: #d65d0e; + background-color: var(--orange); + + &:hover { + background-color: var(--orange-dim); + } } .s2 { - background-color: #cc241d; + background-color: var(--red); + + &:hover { + background-color: var(--red-dim); + } } .s3 { - background-color: #98971a; + background-color: var(--green); + + &:hover { + background-color: var(--green-dim); + } } .s4 { - background-color: #d79921; + background-color: var(--yellow); + + &:hover { + background-color: var(--yellow-dim); + } } .s5 { - background-color: #458588; + background-color: var(--blue); + + &:hover { + background-color: var(--blue-dim); + } } .s6 { - background-color: #b16286; + background-color: var(--purple); + + &:hover { + background-color: var(--purple-dim); + } } .s7 { - background-color: #689d6a; + background-color: var(--aqua); + + &:hover { + background-color: var(--aqua-dim); + } } .c { padding: 1em; background-color: var(--bg-color-3); text-align: center; - /*border-radius: 8px; */ } img { From cf81ba31f9a4b71ff6b2c262e12d9c1c4a1e011c Mon Sep 17 00:00:00 2001 From: Katy248 Date: Wed, 5 Jun 2024 13:12:07 +0000 Subject: [PATCH 3/6] Fixed pager button --- build.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build.sh b/build.sh index e52d074..be7f95f 100755 --- a/build.sh +++ b/build.sh @@ -89,7 +89,7 @@ do countImgs=$(find "$subdir" -type f | wc -l) countImgs=$((countImgs - 1)) for i in $(seq 1 $((( $countImgs / $maxPerPage)+1))); do - echo "" >> ./index.html + echo "" >> ./index.html done echo "
" >> ./index.html echo "
" >> ./index.html From 4a1caafdfe8921bb03303d36f188e0216bc2e0ca Mon Sep 17 00:00:00 2001 From: Katy248 Date: Wed, 5 Jun 2024 13:14:39 +0000 Subject: [PATCH 4/6] Added `.btn` transition --- style.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index da433c7..43b0182 100644 --- a/style.css +++ b/style.css @@ -60,7 +60,7 @@ h2 { } .s { - transition: all 0.7s ease-in-out; + transition: background 0.7s ease-in-out; } .s1 { @@ -145,6 +145,8 @@ img:hover { } .btn { + transition: background 0.4s ease-in-out; + cursor: pointer; background-color: var(--bg-color-reverse); color: var(--fg-color-reverse); From 0dfad272945af5c734e80e28660deff0be62335d Mon Sep 17 00:00:00 2001 From: Katy248 Date: Wed, 5 Jun 2024 14:35:27 +0000 Subject: [PATCH 5/6] 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 { From 6299537d22b292eeb9582484b5b8b7a204c58a35 Mon Sep 17 00:00:00 2001 From: Katy248 Date: Thu, 6 Jun 2024 07:09:07 +0000 Subject: [PATCH 6/6] Fix floating buttons --- app.js | 6 +++-- build.sh | 4 +-- layout.css | 54 +++++++++++++++++++++++++++++++++++++++ style.css | 74 ++++++++---------------------------------------------- 4 files changed, 70 insertions(+), 68 deletions(-) create mode 100644 layout.css diff --git a/app.js b/app.js index cea0841..cbdfd26 100644 --- a/app.js +++ b/app.js @@ -26,7 +26,8 @@ function activeSection(section) { hideAll(); const targetSection = document.getElementById(section); - targetSection.style.display = "block"; + targetSection.focus(); + targetSection.classList.add("selected"); setTimeout(() => { targetSection.scrollIntoView({ block: "start", behavior: "smooth" }); }, 100); @@ -34,7 +35,8 @@ function activeSection(section) { function hideAll() { document.querySelectorAll(".section").forEach((s) => { - s.style.display = "none"; + s.classList.remove("selected"); + // s.style.display = "none"; }); } const HIDDEN_CLASS = "hidden"; diff --git a/build.sh b/build.sh index 06c7dc4..cb45269 100755 --- a/build.sh +++ b/build.sh @@ -125,7 +125,7 @@ echo " " >> ./index.html echo " - +" >> ./index.html echo " diff --git a/layout.css b/layout.css new file mode 100644 index 0000000..a7138a7 --- /dev/null +++ b/layout.css @@ -0,0 +1,54 @@ +main { + display: flex; + flex-direction: column; + padding-left: 1rem; + padding-right: 1rem; + flex-grow: 1; +} + +footer { + position: sticky; + bottom: 0; + margin-top: 2rem; + flex-shrink: 0; + + display: flex; + flex-direction: row; + justify-content: end; + align-content: centers; +} + +@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; + } +} diff --git a/style.css b/style.css index 2de3665..a1cd55b 100644 --- a/style.css +++ b/style.css @@ -1,9 +1,10 @@ +@import url("/layout.css"); + :root { color-scheme: light dark; --bg-color: light-dark(#fbf1c7, #282828); --fg-color: light-dark(#3c3836, #ebdbb2); - --bg-color-reverse: light-dark(#3c3836, #ebdbb2); --fg-color-reverse: light-dark(#fbf1c7, #282828); @@ -35,60 +36,16 @@ body { font-family: "Curier New", monospace; margin: 0; min-height: 100svh; -} -main { - display: flex; + /* display: flex; */ flex-direction: column; - padding-left: 1rem; - padding-right: 1rem; - /* height: 100svh; */ - + justify-content: space-evenly; } -@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; + box-sizing: border-box; } h1, @@ -176,14 +133,13 @@ h2 { } img { - transition: all .2s ease-in-out; + transition: all 0.2s ease-in-out; } img:hover { transform: scale(1.5); border: none; box-shadow: 5px 4px 10px black; - } .pager { @@ -234,25 +190,15 @@ img:hover { .section { display: none; -} -.float-container { - - position: sticky; - top: 0; - /* width: 100vw; */ - /* height: 100vh; */ - - display: flex; - flex-direction: row; - justify-content: end; - align-content: centers; + &.selected { + display: block; + } } .float-btns { - /* position: static; */ margin-bottom: 1rem; - margin-right: 2rem; + margin-right: 1rem; display: flex; flex-direction: column; gap: 0.5rem;