From 23bad5e92228154c9ba9a2cb85968b0414503ce8 Mon Sep 17 00:00:00 2001 From: 0xmac Date: Thu, 26 Sep 2024 10:21:33 +0200 Subject: [PATCH] Added "Neocities" Theme --- global/bg.png | Bin 0 -> 1062 bytes global/global.js | 58 +++++++++++++++++++++++++++++++++-------------- global/style.css | 10 ++++++-- 3 files changed, 49 insertions(+), 19 deletions(-) create mode 100644 global/bg.png diff --git a/global/bg.png b/global/bg.png new file mode 100644 index 0000000000000000000000000000000000000000..c78d1c36961828926ffbca7ded2c090295df64ef GIT binary patch literal 1062 zcmV+>1ljwEP)N z%ChIC$MbK#N9*YpeU9#X?>~eld;LmjsSHvY&DTba&ZE_4p755XYOT}zUyHdyYdO$7 z)A&ep-FQ*&c`0R31_|%MipRCqmasED;$ZOVSIW26rg2(X1Q!ohTAty(hgI!fw3#+Q zlpy{^OkN)08+If2Xb}&FD=6%&gWzb5`}!SxUB_|Id7i^P5na#Z`;-#B-|t}zKa*o~ z&h-8LJv>V((dYA-)<*ZQ*Nf0qN}&f2<}0N%+@I$;EqojY<(%pLe$(sq8WdyUq(H2M z9Q*lvrnR5X=OpBLo^%`s_1>wJLcRCvU9FXBt=GLvi=kjMAh4Tgyz)<_I39;6CwaX(>w@lc3$X)Q40%cm zg*@vi8Hr65==*uZgPCPH3vMWBMwR6F5JvI?5pC`rJ9hI8f~huw86$W2I}%G;Sub{W zS*w&X=MiKP^xR`F?_jwLU+*iFh-Qy??19{Fxqsy;q`XD7*7)B0oJY8M!g$2s)uK?l zlW$5XqdeXsUb*NljCNtB8|M)-Mv$eVv2Zs=cFREwDG9Tw9E9?Kr_8QrqcB5ASbmS} z3Kz`}yKovT4d6EAksWC5zK^uKYiQQ`Vz>OCuGZRBJ0tpAhWg@CiY&_UC5v(VTlZe! zY<1~kpnfiEZq_(?J-F(ZQW^?y$8pf(@gO3ioby#Ydp@7TxKhecBx40?teTLygzB8y4L{R`N5HRfTw7ApG1sCzk2W!$ADJ!PZ+ zBhqS7FGj5K@~^k($-wfg1>>a=qjf7S)NZjYYH81iivr31abdN2t@Uj~FTh!~pP7AdgE49{{wW4gYdM`cV#bA_@1MrWtgMM$p zM;@)C^EHfhr81P?qMJooMaKxTB!Z6@vkU6qr#hr0Zxm%6?=yQV6|96>ZHBPQ9`OR% gOlm=o%keDFA5WAqlOv%S8UO$Q07*qoM6N<$f~gP)FaQ7m literal 0 HcmV?d00001 diff --git a/global/global.js b/global/global.js index cd97be4..4763e8e 100644 --- a/global/global.js +++ b/global/global.js @@ -62,16 +62,25 @@ funButtons = [ ]; /* Available Themes located in the footer */ -var styles = ["Tomorrow", "Forgotten", "Yotsuba"]; +var styles = ["Neocities", "Tomorrow", "Forgotten", "Yotsuba"]; dirDepth = "" /* Update CSS Colorscheme function for themes */ function updateStyle(type){ + function resetBackground(){ + try { + document.querySelector("body").style.backgroundImage = "none"; + document.querySelector("body").style.backgroundRepeat = "repeat-x"; + document.querySelector("body").style.backgroundPosition = "top"; + document.querySelector("body").style.backgroundBlendMode = "normal"; + } catch { } + } + var doc = document.documentElement; /* If type = undefined, default to "tomorrow" */ - if (type == undefined){ type = "Tomorrow"; } + if (type == undefined){ type = "Neocities"; } if (type == "Yotsuba"){ doc.style.setProperty("--main-bg-color", "#fed6af"); doc.style.setProperty("--main-bg-end-color", "#ffffee"); @@ -82,7 +91,10 @@ function updateStyle(type){ doc.style.setProperty("--font-family", "Arial, Helvetica, sans-serif"); doc.style.setProperty("--font-size", "13px"); - document.querySelector("body").style.backgroundImage = "url(" + dirDepth + "global/fade.png)"; + resetBackground(); + try { + document.querySelector("body").style.backgroundImage = "url(" + dirDepth + "global/fade.png)"; + } catch { } } else if (type == "Tomorrow"){ doc.style.setProperty("--main-bg-color", "#1d1f21"); doc.style.setProperty("--main-bg-end-color", "#1d1f21"); @@ -93,7 +105,7 @@ function updateStyle(type){ doc.style.setProperty("--font-family", "Arial, Helvetica, sans-serif"); doc.style.setProperty("--font-size", "13px"); - document.querySelector("body").style.backgroundImage = "none"; + resetBackground(); } else if (type == "Forgotten"){ doc.style.setProperty("--main-bg-color", "#282828"); doc.style.setProperty("--main-bg-end-color", "#458588"); @@ -104,27 +116,33 @@ function updateStyle(type){ doc.style.setProperty("--font-family", "FreePixel"); doc.style.setProperty("--font-size", "13px"); - document.querySelector("body").style.backgroundImage = "none"; + resetBackground(); } else if (type == "Neocities"){ - doc.style.setProperty("--main-bg-color", "#282828"); - doc.style.setProperty("--main-bg-end-color", "#458588"); - doc.style.setProperty("--main-color", "#a89984"); - doc.style.setProperty("--main-fg-color", "#282828"); - doc.style.setProperty("--main-title-fg-color", "#7c7c7c"); + doc.style.setProperty("--main-bg-color", "#000000"); + doc.style.setProperty("--main-bg-end-color", "#468184"); + doc.style.setProperty("--main-color", "#00000055"); + doc.style.setProperty("--main-fg-color", "#ffffff"); + doc.style.setProperty("--main-title-fg-color", "#2c9080"); doc.style.setProperty("--font-family", "FreePixel"); doc.style.setProperty("--font-size", "15px"); - document.querySelector("body").style.backgroundImage = "none"; + try { + document.querySelector("body").style.backgroundImage = "url(" + dirDepth + "global/bg.png)"; + document.querySelector("body").style.backgroundRepeat = "repeat"; + document.querySelector("body").style.backgroundBlendMode = "overlay"; + } catch { } } } function ButtonToggle(checkstate){ - if (checkstate){ - document.querySelector(".button-container").style.display = "flex"; - } else { - document.querySelector(".button-container").style.display = "none"; - } + try { + if (checkstate){ + document.querySelector(".button-container").style.display = "flex"; + } else { + document.querySelector(".button-container").style.display = "none"; + } + } catch { } } function LoadWebsite(){ @@ -260,6 +278,12 @@ function LoadWebsite(){ button_span.appendChild(button_check_buttons); button_span.appendChild(button_check_label); + if (document.getElementById("please-no-buttons") != null){ + button_check_buttons.checked = false; + button_check_label.disabled = true; + button_check_buttons.disabled = true; + } + button_span.appendChild(button_select_label); button_select_label.appendChild(button_select); @@ -318,7 +342,7 @@ function LoadWebsite(){ updateStyle(event.target.value); }); - if (localStorage.getItem("style") == "Yotsuba"){ + if (localStorage.getItem("style") == "Yotsuba" || localStorage.getItem("style") == "Neocities" || localStorage.getItem("style") == undefined){ updateStyle(localStorage.getItem("style")); } } diff --git a/global/style.css b/global/style.css index b5c3526..fb7c38b 100644 --- a/global/style.css +++ b/global/style.css @@ -13,8 +13,12 @@ body { color:var(--main-fg-color); - background: var(--main-bg-end-color) url(../src/fade.png) top repeat-x; - + background-image: url(../global/fade.png); + background-repeat: repeat-x; + background-position: top; + background-color: var(--main-bg-end-color); + background-position: left; + margin:0; padding-bottom:26px; @@ -62,6 +66,8 @@ nav{ width: 80%; float:left; margin-bottom: 20px; + background-color: var(--main-title-fg-color); + border-color: var(--main-title-fg-color); } main{