diff --git a/app.js b/app.js index ccea8c8..cbdfd26 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"); }); } @@ -26,29 +26,50 @@ function activeSection(section) { hideAll(); const targetSection = document.getElementById(section); - targetSection.style.display = "block"; - setTimeout(()=>{ - targetSection.scrollIntoView({ block: "start", behavior: "smooth" }); - },100) + targetSection.focus(); + targetSection.classList.add("selected"); + setTimeout(() => { + targetSection.scrollIntoView({ block: "start", behavior: "smooth" }); + }, 100); } function hideAll() { document.querySelectorAll(".section").forEach((s) => { - s.style.display = "none"; + s.classList.remove("selected"); + // 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 04f9517..cb45269 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,34 +37,20 @@ rm *.html touch ./index.html echo " - + - + - + Gruvbox wallpapers - - + + -
- -
- - -
- + +

Gruvbox Wallpapers

" > ./index.html color=1 @@ -85,16 +71,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 @@ -124,27 +110,36 @@ do color=1 fi done - +echo "
" >> ./index.html 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 9cbfc38..a1cd55b 100644 --- a/style.css +++ b/style.css @@ -1,26 +1,51 @@ +@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); --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); + + --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 { 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; + + /* display: flex; */ + flex-direction: column; + justify-content: space-evenly; } -*:not( i ) { +* { color: var(--fg-color); + border: none; + box-sizing: border-box; } h1, @@ -37,77 +62,119 @@ h2 { color: var(--fg-color-reverse); } +h2 { + cursor: pointer; +} + +.s { + transition: background 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 { - 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 { 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 { + transition: background 0.4s ease-in-out; + + 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); @@ -123,28 +190,31 @@ img:hover { .section { display: none; + + &.selected { + display: block; + } } -.float-btns{ - position: fixed; - /*top: 80%;*/ - bottom: 10px; - right: 35px; +.float-btns { + margin-bottom: 1rem; + margin-right: 1rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + justify-content: end; } -.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; +}