diff --git a/app.js b/app.js new file mode 100644 index 0000000..68931d5 --- /dev/null +++ b/app.js @@ -0,0 +1,37 @@ +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 (page - 1 == i) return; + else { + currSel = buttons[i]; + break; + } + } + } + + fetch(section + "_page" + page + ".html") + .then((response) => response.text()) + .then((data) => { + document.getElementById(section + "-content").innerHTML = data; + if (currSel) { + currSel.classList.remove("sel-btn"); + } + document.getElementById(section).getElementsByTagName("button")[page - 1].classList.add("sel-btn"); + }); +} + +function activeSection(section) { + hideAll(); + + const targetSection = document.getElementById(section); + targetSection.style.display = "block"; + targetSection.focus(); +} + +function hideAll() { + document.querySelectorAll(".section").forEach((s) => { + s.style.display = "none"; + }); +} diff --git a/build.sh b/build.sh index 266da86..10f2754 100755 --- a/build.sh +++ b/build.sh @@ -26,35 +26,10 @@ write_header(){ + Gruvbox wallpapers - + @@ -62,7 +37,7 @@ write_header(){ } write_section_header(){ - echo "

" >> $3 + echo "

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

" >> $3 } @@ -100,7 +75,7 @@ do subhtml="${section}_page${page}.html" touch ./$subhtml - echo "
" >> ./index.html + echo "
" >> ./index.html echo "
" >> ./index.html countImgs=$(find "$subdir" -type f | wc -l) @@ -109,8 +84,8 @@ do echo "" >> ./index.html done echo "
" >> ./index.html - echo "
" >> ./index.html - echo "
" >> ./$subhtml + echo "
" >> ./index.html + echo "
" >> ./$subhtml for wallpaper in ${subdir}/* do if [ "$img_count" -ge $maxPerPage ]; then @@ -121,7 +96,7 @@ do touch ./$subhtml - echo "
" >> ./$subhtml + echo "
" >> ./$subhtml img_count=0 fi @@ -141,27 +116,17 @@ do done echo "" >> ./index.html diff --git a/style.css b/style.css index fd777e7..0216b17 100644 --- a/style.css +++ b/style.css @@ -1,74 +1,85 @@ +: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-hard: light-dark(#f9f5d7, #1d2021); + --gray: light-dark(#7c6f64, #a89984); +} + body { - color: #ebdbb2; - background-color: #282828; + background-color: var(--bg-color); padding-left: 15%; padding-right: 15%; font-family: "Curier New", monospace; } -h1 { - background-color: #ebdbb2; - color: #282828; - text-align: center; - text-decoration: none; - /*border-radius: 8px; */ +* { + color: var(--fg-color); } +h1, h2 { - background-color: #ebdbb2; - color: #282828; + background-color: var(--bg-color-reverse); + color: var(--fg-color-reverse); text-align: center; text-decoration: none; - /*border-radius: 8px; */ } -a { - color: #ebdbb2; -} - -.showmore{ +.showmore { text-align: center; - background-color: #ebdbb2; - color: #282828; + background-color: var(--bg-color-reverse); + color: var(--fg-color-reverse); } -#s1 { +.s1 { background-color: #d65d0e; } -#s2 { + +.s2 { background-color: #cc241d; } -#s3 { + +.s3 { background-color: #98971a; } -#s4 { + +.s4 { background-color: #d79921; } -#s5 { + +.s5 { background-color: #458588; } -#s6 { + +.s6 { background-color: #b16286; } -#s7 { + +.s7 { background-color: #689d6a; } -#c { +.c { padding: 1em; - background-color: #665c54; + background-color: var(--bg-color-3); text-align: center; /*border-radius: 8px; */ } img { - transition: all .2s ease-in-out; + transition: all .2s ease-in-out; } img:hover { - transform: scale(1.5); + transform: scale(1.5); border: none; - box-shadow: 5px 4px 10px #000000; + box-shadow: 5px 4px 10px black; } @@ -77,38 +88,39 @@ img:hover { margin-bottom: 10px; padding: 5px; /*border-radius: 8px; */ - color: #282828; + color: var(--fg-color-reverse); /*display: flex; justify-content: center;*/ text-align: center; } .pager button { - background-color: #ebdbb2; - border: none; - color: #282828; - padding: 10px 20px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 16px; + background-color: var(--bg-color-reverse); + border: none; + color: var(--fg-color-reverse); + padding: 10px 20px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; font-weight: 900; - margin: 4px 2px; - cursor: pointer; - /*border-radius: 8px; */ + margin: 4px 2px; + cursor: pointer; + + &.sel-btn { + background-color: var(--bg-color); + color: var(--fg-color); + + border-color: var(--fg-color); + border-width: thick; + border-style: solid; + } } -.sel-btn{ - background-color: #282828 !important; - border-color: #ebdbb2 !important; - color: #ebdbb2 !important; - border-width: thick !important; - border-style: solid !important; -} - - - .clickable { cursor: pointer; } +.section { + display: none; +}