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

Merge pull request #25 from Katy248/light-style

Browse Source 
Add light style
This commit is contained in:
AngelJumbo
2024-06-01 10:47:00 -05:00
committed by GitHub
parent f298aa85e8 d0eee7a6a4
commit 9d9ad8f367
3 changed files with 114 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+37
View File
@@ -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";
});
}
build.sh
+13 -48
View File
@@ -26,35 +26,10 @@ write_header(){
<head> <head>
<meta charset=\"utf-8\"> <meta charset=\"utf-8\">
<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> <script src='app.js'></script>
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');
});
}
</script>
</head> </head>
<body> <body>
@@ -62,7 +37,7 @@ write_header(){
} }
write_section_header(){ write_section_header(){
echo "<h2 id=\"s$1\" class=\"clickable\" 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
} }
@@ -100,7 +75,7 @@ do
subhtml="${section}_page${page}.html" subhtml="${section}_page${page}.html"
touch ./$subhtml touch ./$subhtml
echo "<div id=\"$section\" style={display : \"none\"}>" >> ./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)
@@ -109,8 +84,8 @@ do
echo "<button class=\"clickable\" onclick=\"loadPage('$section', $i)\">$i</button>" >> ./index.html echo "<button class=\"clickable\" 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 id=\"c\">" >> ./$subhtml echo "<div class='c'>" >> ./$subhtml
for wallpaper in ${subdir}/* for wallpaper in ${subdir}/*
do do
if [ "$img_count" -ge $maxPerPage ]; then if [ "$img_count" -ge $maxPerPage ]; then
@@ -121,7 +96,7 @@ do
touch ./$subhtml touch ./$subhtml
echo "<div id=\"c\">" >> ./$subhtml echo "<div class='c'>" >> ./$subhtml
img_count=0 img_count=0
fi fi
@@ -141,27 +116,17 @@ do
done done
echo "<script> echo "<script>
window.onload = function myFunc() {" >> ./index.html window.onload = () => {" >> ./index.html
echo "console.log('fuck');" >> ./index.html
echo "hideAll();" >> ./index.html
for section in "${sections[@]}"; do for section in "${sections[@]}"; do
echo " loadPage('$section', 1); echo " loadPage('$section', 1);" >> ./index.html
document.getElementById('$section').style.display = \"none\";
" >> ./index.html
done done
echo " echo "
document.getElementById(\"${sections[0]}\").style.display = \"block\"; activeSection(\"${sections[0]}\");
} }
function activeSection(section){">> ./index.html
for section in "${sections[@]}"; do
echo "
document.getElementById('$section').style.display = \"none\";
" >> ./index.html
done
echo " document.getElementById(section).style.display = \"block\";
document.getElementById(section).focus();
}
</script>" >> ./index.html </script>" >> ./index.html
style.css
+64 -52
View File
@@ -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 { body {
color: #ebdbb2; background-color: var(--bg-color);
background-color: #282828;
padding-left: 15%; padding-left: 15%;
padding-right: 15%; padding-right: 15%;
font-family: "Curier New", monospace; font-family: "Curier New", monospace;
} }
h1 { * {
background-color: #ebdbb2; color: var(--fg-color);
color: #282828;
text-align: center;
text-decoration: none;
/*border-radius: 8px; */
} }
h1,
h2 { h2 {
background-color: #ebdbb2; background-color: var(--bg-color-reverse);
color: #282828; color: var(--fg-color-reverse);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
/*border-radius: 8px; */
} }
a { .showmore {
color: #ebdbb2;
}
.showmore{
text-align: center; text-align: center;
background-color: #ebdbb2; background-color: var(--bg-color-reverse);
color: #282828; color: var(--fg-color-reverse);
} }
#s1 { .s1 {
background-color: #d65d0e; background-color: #d65d0e;
} }
#s2 {
.s2 {
background-color: #cc241d; background-color: #cc241d;
} }
#s3 {
.s3 {
background-color: #98971a; background-color: #98971a;
} }
#s4 {
.s4 {
background-color: #d79921; background-color: #d79921;
} }
#s5 {
.s5 {
background-color: #458588; background-color: #458588;
} }
#s6 {
.s6 {
background-color: #b16286; background-color: #b16286;
} }
#s7 {
.s7 {
background-color: #689d6a; background-color: #689d6a;
} }
#c { .c {
padding: 1em; padding: 1em;
background-color: #665c54; background-color: var(--bg-color-3);
text-align: center; text-align: center;
/*border-radius: 8px; */ /*border-radius: 8px; */
} }
img { img {
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
} }
img:hover { img:hover {
transform: scale(1.5); transform: scale(1.5);
border: none; border: none;
box-shadow: 5px 4px 10px #000000; box-shadow: 5px 4px 10px black;
} }
@@ -77,38 +88,39 @@ img:hover {
margin-bottom: 10px; margin-bottom: 10px;
padding: 5px; padding: 5px;
/*border-radius: 8px; */ /*border-radius: 8px; */
color: #282828; color: var(--fg-color-reverse);
/*display: flex; /*display: flex;
justify-content: center;*/ justify-content: center;*/
text-align: center; text-align: center;
} }
.pager button { .pager button {
background-color: #ebdbb2; background-color: var(--bg-color-reverse);
border: none; border: none;
color: #282828; color: var(--fg-color-reverse);
padding: 10px 20px; padding: 10px 20px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
font-weight: 900; font-weight: 900;
margin: 4px 2px; margin: 4px 2px;
cursor: pointer; cursor: pointer;
/*border-radius: 8px; */
&.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 { .clickable {
cursor: pointer; cursor: pointer;
} }
.section {
display: none;
}