From fbbfef9b8254b0dfb3a2a7ad47a01b3664aaa289 Mon Sep 17 00:00:00 2001 From: Katy248 Date: Sat, 1 Jun 2024 11:08:22 +0300 Subject: [PATCH 1/6] Add light style css --- style.css | 98 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 53 insertions(+), 45 deletions(-) diff --git a/style.css b/style.css index fd777e7..7d9ca83 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 { background-color: #d65d0e; } + #s2 { background-color: #cc241d; } + #s3 { background-color: #98971a; } + #s4 { background-color: #d79921; } + #s5 { background-color: #458588; } + #s6 { background-color: #b16286; } + #s7 { background-color: #689d6a; } #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,35 @@ 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; } - From 1db5c74b2c86c3661274952f0722534616589c32 Mon Sep 17 00:00:00 2001 From: Katy248 Date: Sat, 1 Jun 2024 11:10:12 +0300 Subject: [PATCH 2/6] Add viewport meta tag --- build.sh | 1 + 1 file changed, 1 insertion(+) diff --git a/build.sh b/build.sh index 266da86..ea6da5d 100755 --- a/build.sh +++ b/build.sh @@ -26,6 +26,7 @@ write_header(){ + Gruvbox wallpapers + From d0eee7a6a4f2e18c7b7ec8b3593436efa2f14902 Mon Sep 17 00:00:00 2001 From: Katy248 Date: Sat, 1 Jun 2024 12:50:16 +0300 Subject: [PATCH 6/6] Fix some issues, fix JS, fix meta tag --- app.js | 14 ++++++++++++++ build.sh | 34 ++++++++++++---------------------- style.css | 6 +++++- 3 files changed, 31 insertions(+), 23 deletions(-) diff --git a/app.js b/app.js index 2fb1c4f..68931d5 100644 --- a/app.js +++ b/app.js @@ -21,3 +21,17 @@ function loadPage(section, page) { 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 22ffdf1..10f2754 100755 --- a/build.sh +++ b/build.sh @@ -26,10 +26,10 @@ write_header(){ - + Gruvbox wallpapers - + @@ -37,7 +37,7 @@ write_header(){ } write_section_header(){ - echo "

" >> $3 + echo "

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

" >> $3 } @@ -75,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) @@ -84,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 @@ -96,7 +96,7 @@ do touch ./$subhtml - echo "
" >> ./$subhtml + echo "
" >> ./$subhtml img_count=0 fi @@ -117,26 +117,16 @@ done echo "" >> ./index.html diff --git a/style.css b/style.css index 5a8d72f..0216b17 100644 --- a/style.css +++ b/style.css @@ -65,7 +65,7 @@ h2 { background-color: #689d6a; } -#c { +.c { padding: 1em; background-color: var(--bg-color-3); text-align: center; @@ -120,3 +120,7 @@ img:hover { .clickable { cursor: pointer; } + +.section { + display: none; +}