fujin/gruvbox-wallpapers
1
0
Fork 0
mirror of https://github.com/AngelJumbo/gruvbox-wallpapers.git synced 2026-10-19 23:56:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed theme switcher, changed \" to ' in build.sh, added .btn class and hover color for it

Browse Source
This commit is contained in:
Katy248
2024-06-05 12:56:59 +00:00
parent c5aab3de19
commit 96eef9616a
3 changed files with 94 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+36 -17
View File
@@ -2,7 +2,7 @@ function loadPage(section, page) {
let buttons = document.getElementById(section).getElementsByTagName("button"); let buttons = document.getElementById(section).getElementsByTagName("button");
let currSel; let currSel;
for (let i in buttons) { for (let i in buttons) {
if (buttons[i].classList?.contains("sel-btn")) { if (buttons[i].classList?.contains("selected")) {
if (page - 1 == i) return; if (page - 1 == i) return;
else { else {
currSel = buttons[i]; currSel = buttons[i];
@@ -16,9 +16,9 @@ function loadPage(section, page) {
.then((data) => { .then((data) => {
document.getElementById(section + "-content").innerHTML = data; document.getElementById(section + "-content").innerHTML = data;
if (currSel) { 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); const targetSection = document.getElementById(section);
targetSection.style.display = "block"; targetSection.style.display = "block";
setTimeout(()=>{ setTimeout(() => {
targetSection.scrollIntoView({ block: "start", behavior: "smooth" }); targetSection.scrollIntoView({ block: "start", behavior: "smooth" });
},100) }, 100);
} }
function hideAll() { function hideAll() {
@@ -37,18 +37,37 @@ function hideAll() {
s.style.display = "none"; s.style.display = "none";
}); });
} }
const HIDDEN_CLASS = "hidden";
function hideThemeSwitcher(currentTheme) {
function switchTheme(){ if (currentTheme == "dark") {
let currTheme = document.documentElement.style.getPropertyValue('color-scheme'); document.getElementById("dark-icon")?.classList.add(HIDDEN_CLASS);
console.log(currTheme); document.getElementById("light-icon")?.classList.remove(HIDDEN_CLASS);
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');
} else { } else {
document.getElementsByClassName("fa-moon")[0].style.display = "none"; document.getElementById("light-icon")?.classList.add(HIDDEN_CLASS);
document.getElementsByClassName("fa-sun")[0].style.display = "block"; document.getElementById("dark-icon")?.classList.remove(HIDDEN_CLASS);
document.documentElement.style.setProperty('color-scheme', 'dark');
} }
} }
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);
}
build.sh
+23 -29
View File
@@ -22,14 +22,14 @@
write_section_header(){ write_section_header(){
echo "<h2 class=\"clickable s$1\" onclick=\"activeSection('$2')\" >" >> $3 echo "<h2 class='clickable s$1' onclick='activeSection(\"$2\")' >" >> $3
echo "$2" | tr a-z A-Z >> $3 echo "$2" | tr a-z A-Z >> $3
echo "</h2>" >> $3 echo "</h2>" >> $3
} }
write_img(){ write_img(){
echo " <a target=\"_blank\" href=\"$1\"> echo " <a target='_blank' href='$1'>
<img loading=\"lazy\" src=\"$1\" alt=\"$1\" width=\"200\"></a>" >> $2 <img loading='lazy' src='$1' alt='$1' width='200'></a>" >> $2
} }
rm *.html rm *.html
@@ -37,32 +37,30 @@ rm *.html
touch ./index.html touch ./index.html
echo "<!DOCTYPE html> echo "<!DOCTYPE html>
<html lang=\"en\"> <html lang='en'>
<head> <head>
<meta charset=\"utf-8\"> <meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\"> <link rel='stylesheet' type='text/css' href='style.css'>
<title>Gruvbox wallpapers</title> <title>Gruvbox wallpapers</title>
<script src='app.js'></script> <script src='app.js' defer></script>
<script src="https://kit.fontawesome.com/13865d7982.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/13865d7982.js" crossorigin="anonymous" defer></script>
</head> </head>
<body> <body>
<div class=\"float-btns\"> <div class='float-btns'>
<button onclick=\"location.href='https://github.com/AngelJumbo/gruvbox-wallpapers'\" class=\"float-btn clickable\" > <a href='https://github.com/AngelJumbo/gruvbox-wallpapers' target='_blank' class='btn float-btn' title='Source code' >
<span> <span>
<i class=\"fa-brands fa-github\"></i> <i class='fa-brands fa-github'></i>
</span>
</a>
<button onclick='switchTheme()' class='btn float-btn' title='Switch theme'>
<span>
<i id='light-icon' class='fa-solid fa-sun'></i>
<i id='dark-icon' class='fa-solid fa-moon'></i>
</span> </span>
</button> </button>
<br />
<button onclick=switchTheme() class=\"float-btn clickable\">
<span>
<i class=\"fa-solid fa-sun\" ></i>
<i class=\"fa-solid fa-moon\" style=\"display:none\"></i>
</span>
</button>
</div> </div>
<h1>Gruvbox Wallpapers</h1>" > ./index.html <h1>Gruvbox Wallpapers</h1>" > ./index.html
@@ -85,16 +83,16 @@ do
subhtml="${section}_page${page}.html" subhtml="${section}_page${page}.html"
touch ./$subhtml touch ./$subhtml
echo "<div class='section' id=\"$section\">" >> ./index.html echo "<div class='section' id='$section'>" >> ./index.html
echo "<div class=\"pager\">" >> ./index.html echo "<div class='pager'>" >> ./index.html
countImgs=$(find "$subdir" -type f | wc -l) countImgs=$(find "$subdir" -type f | wc -l)
countImgs=$((countImgs - 1)) countImgs=$((countImgs - 1))
for i in $(seq 1 $((( $countImgs / $maxPerPage)+1))); do for i in $(seq 1 $((( $countImgs / $maxPerPage)+1))); do
echo "<button class=\"clickable\" onclick=\"loadPage('$section', $i)\">$i</button>" >> ./index.html echo "<button class='btn pager-btn' onclick='loadPage('$section', $i)'>$i</button>" >> ./index.html
done done
echo "</div>" >> ./index.html echo "</div>" >> ./index.html
echo "<div id=\"$section-content\">" >> ./index.html echo "<div id='$section-content'>" >> ./index.html
echo "<div class='c'>" >> ./$subhtml echo "<div class='c'>" >> ./$subhtml
for wallpaper in ${subdir}/* for wallpaper in ${subdir}/*
do do
@@ -128,18 +126,14 @@ done
echo "<script> echo "<script>
window.onload = () => {" >> ./index.html window.onload = () => {" >> ./index.html
echo "hideAll();" >> ./index.html echo "hideAll();" >> ./index.html
echo "initColorTheme();" >> ./index.html
for section in "${sections[@]}"; do for section in "${sections[@]}"; do
echo " loadPage('$section', 1);" >> ./index.html echo " loadPage('$section', 1);" >> ./index.html
done done
echo " echo "
activeSection(\"${sections[0]}\"); activeSection('${sections[0]}');
if(!window.matchMedia(\"(prefers-color-scheme: dark)\").matches){
document.getElementsByClassName(\"fa-sun\")[0].style.display = \"none\";
document.getElementsByClassName(\"fa-moon\")[0].style.display = \"block\";
}
} }
</script>" >> ./index.html </script>" >> ./index.html
style.css
+33 -26
View File
@@ -8,6 +8,7 @@
--fg-color-reverse: light-dark(#fbf1c7, #282828); --fg-color-reverse: light-dark(#fbf1c7, #282828);
--bg-color-3: light-dark(#bdae93, #665c54); --bg-color-3: light-dark(#bdae93, #665c54);
--bg-color-3-switch: light-dark(#665c54, #bdae93);
--bg-color-hard: light-dark(#f9f5d7, #1d2021); --bg-color-hard: light-dark(#f9f5d7, #1d2021);
--gray: light-dark(#7c6f64, #a89984); --gray: light-dark(#7c6f64, #a89984);
} }
@@ -19,8 +20,9 @@ body {
font-family: "Curier New", monospace; font-family: "Curier New", monospace;
} }
*:not( i ) { * {
color: var(--fg-color); color: var(--fg-color);
border: none;
} }
h1, h1,
@@ -87,27 +89,33 @@ img:hover {
margin-top: 5px; margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;
padding: 5px; padding: 5px;
/*border-radius: 8px; */
color: var(--fg-color-reverse); color: var(--fg-color-reverse);
/*display: flex;
justify-content: center;*/
text-align: center; text-align: center;
} }
.pager button { .btn {
cursor: pointer;
background-color: var(--bg-color-reverse); background-color: var(--bg-color-reverse);
border: none;
color: var(--fg-color-reverse); 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; padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; font-size: 16px;
font-weight: 900; font-weight: 900;
margin: 4px 2px; margin: 4px 2px;
cursor: pointer;
&.sel-btn { &.selected {
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--fg-color); color: var(--fg-color);
@@ -125,26 +133,25 @@ img:hover {
display: none; display: none;
} }
.float-btns{ .float-btns {
position: fixed; position: fixed;
/*top: 80%;*/ bottom: 1rem;
bottom: 10px; right: 2rem;
right: 35px; display: flex;
flex-direction: column;
gap: 0.5rem;
} }
.float-btn{ .btn.float-btn {
background-color: var(--bg-color-reverse);
border: none;
color: var(--fg-color-reverse);
text-align: center;
text-decoration: none;
display: inline-block;
height: 2.5rem; height: 2.5rem;
width: 2.5rem; width: 2.5rem;
margin-bottom: 10px; font-size: 1.5rem;
& i {
color: var(--fg-color-reverse);
}
} }
.float-btn span{ .hidden {
font-size: 1.5rem; display: none !important;
color: var(--fg-color-reverse);
} }