Skip to content

Commit

Permalink
attributes, more tags, performance fix, font change, custom fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@dxxxxy
dxxxxy committed Dec 9, 2021
1 parent 7f5cf8c commit 31fc545
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 58 deletions.
22 changes: 13 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,37 +6,41 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="zephyr.css">
<!-- TODO: cant change font oops -->
<zconfig $darkColor="#4a94fa" --test="test"></zconfig>
<zconfig $darkColor="#4a94fa"></zconfig>
<title>Zephyr - Example</title>
</head>

<zbody>
<zloader waitFor="windowLoad"></zloader>
<zloader waitFor="windowLoad" delay="2000"></zloader>
<zbody font-family="Euclid Circular B Bold">
<znav>
<zh1>ZEPHYR</zh1>
<zl>
<zli>
<za href="index.html">Home</za>
</zli>
<zli>
<za href="example.html">Example</za>
<za href="example.html">Media</za>
</zli>
<zli>
<za href="example.html">Example</za>
<za href="example.html">Guides</za>
</zli>
<zli>
<za href="example.html">Example</za>
<za href="example.html">Stores</za>
</zli>
<zli>
<za href="example.html">Example</za>
<za href="example.html">Contact</za>
</zli>
<zli>
<za href="example.html">Example</za>
<za href="example.html">Credits</za>
</zli>
</zl>
</znav>

<zsection>
<zh2>Welcome</zh2>
</zsection>


<zfoot>
<zh1 href="#">ZEPHYR</zh1>
<zdark cursor="pointer"></zdark>
Expand Down
15 changes: 10 additions & 5 deletions zephyr.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@import "utils/fonts.css";
* {
font-family: "Euclid Circular B Bold", sans-serif;
color: var(--color);
background-color: var(--bgColor);
scroll-behavior: smooth;
Expand Down Expand Up @@ -48,22 +47,21 @@ zdark {
padding: 0.5vw;
}


/* h2 {
zh2 {
font-size: 3.5vw;
letter-spacing: 0.1vw;
padding: 0;
margin: 0;
text-align: center;
}

h3 {
zh3 {
font-size: 2vw;
letter-spacing: 0.05vw;
padding: 0;
margin: 0;
text-align: center;
} */
}

zli {
font-size: 1.5vw;
Expand All @@ -72,6 +70,13 @@ zli {
padding: 0;
}

zsection {
margin: 5vw 0 5vw;
display: flex;
width: 100%;
justify-content: space-around;
}

zloader {
position: absolute;
left: 50%;
Expand Down
94 changes: 50 additions & 44 deletions zephyr.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
// Dark mode
var dark = true
var dark = false
var darkcolor = "#4a94fa"
var lightcolor = "#990099"
var darkbgcolor = "#000000"
var lightbgcolor = "#ffffff"
if (localStorage.getItem("current_theme") == "light") dark = false
else localStorage.setItem("current_theme", dark ? "dark" : "light")

var i = 0

//Loop
setInterval(() => {
//360deg reset
if (i == 360) i = 0
const darkSwitch = () => {
if (localStorage.getItem("current_theme") == "dark") localStorage.setItem("current_theme", "light")
else if (localStorage.getItem("current_theme") == "light") localStorage.setItem("current_theme", "dark")
else localStorage.setItem("current_theme", dark ? "dark" : "light")
dark = !dark

document.querySelectorAll("za").forEach(navlink => {
console.log(window.location.pathname.split("/").pop())
if (window.location.pathname.split("/").pop() == "")
if (navlink.getAttribute("href") == "index.html") return navlink.className = "active"
if (navlink.getAttribute("href") == window.location.pathname.split("/").pop()) return navlink.className = "active"
Expand All @@ -24,44 +21,10 @@ setInterval(() => {

document.querySelector("zdark").innerText = dark ? "Light Mode" : "Dark Mode"

// Apply site wide color scheme
document.querySelector("*").style.setProperty("--color", dark ? darkcolor : lightcolor)
document.querySelector("*").style.setProperty("--bgColor", dark ? darkbgcolor : lightbgcolor)

//Rotate gradient
document.querySelectorAll("zh1").forEach(e => {
e.style.background = dark ? `linear-gradient(${i}deg, rgba(2, 0, 36, 1) 25%, rgba(2, 0, 36, 1) 50%, #4a94fa 75%, #4a94fa 100%)` : `linear-gradient(${i}deg, rgb(117, 22, 117) 25%, rgb(82, 41, 82) 50%, rgb(75, 23, 75) 75%, rgb(82, 41, 82) 100%)`
e.style.webkitBackgroundClip = "text"
})
i++
}, 10)

document.addEventListener("DOMContentLoaded", () => document.querySelectorAll("zloader").forEach(loader => { if (loader.getAttribute("waitFor") == "windowLoad") loader.remove() }))

HTMLElement.prototype.attributeToCSS = function() {
Array.prototype.slice.call(this.attributes).forEach(a => {
if (a.name == "href") {
this.addEventListener("click", (() => window.location.href = a.value))
return this.style.cursor = "pointer"
}
this.style[a.name] = a.value
})
}

document.querySelector("zdark").addEventListener("click", () => {
if (localStorage.getItem("current_theme") == "dark") localStorage.setItem("current_theme", "light")
else if (localStorage.getItem("current_theme") == "light") localStorage.setItem("current_theme", "dark")
dark = !dark
})

Array.prototype.slice.call(document.querySelector("zconfig").attributes).forEach(a => {
if (a.name.startsWith("--")) return document.querySelector("*").style.setProperty(a.name.split("--").pop(), a.value)
if (a.name.startsWith("$")) return window[a.name.split("$").pop()] = a.value
document.querySelector("*").style[a.name] = a.value
})

document.querySelectorAll("zloader, znav, zl, za, zh1, zdark, zbody").forEach(custom => custom.attributeToCSS())

const shadeColor = (color, decimal) => {
const base = color.startsWith('#') ? 1 : 0;

Expand All @@ -82,4 +45,47 @@ const shadeColor = (color, decimal) => {
const bb = ((b.toString(16).length === 1) ? `0${b.toString(16)}` : b.toString(16));

return `#${rr}${gg}${bb}`;
}
}

HTMLElement.prototype.attributeToCSS = function() {
Array.prototype.slice.call(this.attributes).forEach(a => {
if (a.name == "href") {
this.addEventListener("click", (() => window.location.href = a.value))
return this.style.cursor = "pointer"
}
this.style[a.name] = a.value
})
}

setInterval(() => {
if (i == 360) i = 0

document.querySelectorAll("zh1").forEach(e => {
e.style.background = dark ? `linear-gradient(${i}deg, rgba(2, 0, 36, 1) 25%, rgba(2, 0, 36, 1) 50%, #4a94fa 75%, #4a94fa 100%)` : `linear-gradient(${i}deg, rgb(117, 22, 117) 25%, rgb(82, 41, 82) 50%, rgb(75, 23, 75) 75%, rgb(82, 41, 82) 100%)`
e.style.webkitBackgroundClip = "text"
})
i++
}, 10)

document.querySelector("zbody").style.opacity = 0

document.addEventListener("DOMContentLoaded", () => document.querySelectorAll("zloader").forEach(loader => {
if (loader.getAttribute("waitFor") == "windowLoad") {
if (loader.hasAttribute("delay")) {
return setTimeout(() => {
loader.remove()
document.querySelector("zbody").style.opacity = 1
}, loader.getAttribute("delay"))
}
loader.remove()
document.querySelector("zbody").style.opacity = 1
}
}))

document.querySelector("zdark").addEventListener("click", darkSwitch)

document.querySelectorAll('*').forEach(e => { if (e.nodeName.toLowerCase().startsWith("z")) e.attributeToCSS() })

Array.prototype.slice.call(document.querySelector("zconfig").attributes).forEach(a => { if (a.name.startsWith("$")) window[a.name.split("$").pop()] = a.value })

darkSwitch()

0 comments on commit 31fc545

Please sign in to comment.