more attributes, more tags, fixes, minify

index.html

@@ -10,7 +10,7 @@
     <title>Zephyr - Example</title>
 </head>
 
-<zloader waitFor="windowLoad" delay="2000"></zloader>
+<!-- <zloader waitFor="windowLoad" delay="2000"></zloader> -->
 <zbody font-family="Euclid Circular B Bold">
     <znav>
         <zh1>ZEPHYR</zh1>
@@ -38,11 +38,24 @@
 
     <zsection>
         <zh2>Welcome</zh2>
+        <zh3>to the framework!</zh3>
+        <!-- <ztable margin="2vw 0 2vw">
+            <ztr>
+                <ztd>
+                    <zp>Table cell 1</zp>
+                </ztd>
+                <ztd>Table cell 2</ztd>
+            </ztr>
+        </ztable> -->
+        <zp text-align="center" margin="4vw 5vw 0">A totally different CSS framework striving to achieve elegance and efficiency by using custom HTML tags with predefined CSS and JS instead of classes. It is highly customizable, allowing for CSS properties to be used as HTML attributes. Has dark-mode
+            built in. Heavily in development.</zp>
     </zsection>
 
 
     <zfoot>
         <zh1 href="#">ZEPHYR</zh1>
+        <zicon href="https://github.com/DxxxxY/Zephyr" src="https://pngimg.com/uploads/github/github_PNG63.png"></zicon>
+        <zp>Made with Zephyr</zp>
         <zdark cursor="pointer"></zdark>
     </zfoot>
     <script src="zephyr.js"></script>

package.json

@@ -0,0 +1,5 @@
+{
+    "scripts": {
+        "min": "css-minify -f zephyr.css -o /"
+    }
+}

zephyr.css

@@ -7,15 +7,12 @@
 
 znav {
     display: flex;
-    width: 100%;
     height: 10vw;
     align-items: center;
     justify-content: space-between;
 }
 
 zl {
-    padding: 0;
-    margin: 0;
     display: flex;
     list-style-type: none;
 }
@@ -27,18 +24,20 @@ zbody {
 
 zfoot {
     display: flex;
-    width: 100%;
     height: 10vw;
     align-items: center;
     justify-content: space-between;
 }
 
+zp {
+    font-size: 1.2vw;
+    letter-spacing: 0.01vw;
+}
+
 zh1 {
     -webkit-text-fill-color: transparent;
     font-size: 4vw;
     letter-spacing: 0.5vw;
-    padding: 0;
-    margin: 0;
 }
 
 zdark {
@@ -50,48 +49,85 @@ zdark {
 zh2 {
     font-size: 3.5vw;
     letter-spacing: 0.1vw;
-    padding: 0;
-    margin: 0;
-    text-align: center;
 }
 
 zh3 {
     font-size: 2vw;
     letter-spacing: 0.05vw;
-    padding: 0;
-    margin: 0;
-    text-align: center;
+}
+
+zh4 {
+    font-size: 1.3vw;
+    letter-spacing: 0.05vw;
 }
 
 zli {
     font-size: 1.5vw;
     letter-spacing: 0.1vw;
     margin: 0 1vw 0;
-    padding: 0;
 }
 
 zsection {
-    margin: 5vw 0 5vw;
     display: flex;
-    width: 100%;
-    justify-content: space-around;
+    flex-direction: column;
+    height: 20vw;
+    align-items: center;
 }
 
 zloader {
     position: absolute;
     left: 50%;
     top: 50%;
-    z-index: 1;
     width: 120px;
     height: 120px;
     margin: -76px 0 0 -76px;
     border: 16px solid var(--bgColor);
     border-radius: 50%;
     border-top: 16px solid var(--color);
-    -webkit-animation: spin 2s linear infinite;
     animation: spin 2s linear infinite;
 }
 
+zicon {
+    display: block;
+    height: 4vw;
+    width: 4vw;
+    background-size: cover;
+}
+
+ztable {
+    display: table;
+    border-collapse: separate;
+    box-sizing: border-box;
+    text-indent: initial;
+    border-spacing: 2px;
+    font-size: 1.75vw;
+    letter-spacing: 0.15vw;
+    padding: 0;
+    margin: 0;
+    border: 0.25vw solid var(--color);
+    border-radius: 2px;
+}
+
+ztr {
+    display: table-row;
+    vertical-align: inherit;
+    border-color: inherit;
+    border-collapse: separate;
+    text-indent: initial;
+    border-spacing: 2px;
+}
+
+ztd {
+    font-size: 1.2vw;
+    letter-spacing: 0.01vw;
+    padding: 1vw;
+    display: table-cell;
+    vertical-align: inherit;
+    border-collapse: separate;
+    text-indent: initial;
+    border-spacing: 2px;
+}
+
 za {
     display: inline-block;
     position: relative;

zephyr.js

@@ -13,6 +13,7 @@ const darkSwitch = () => {
     dark = !dark
 
     document.querySelectorAll("za").forEach(navlink => {
+        if (navlink.parentNode.nodeName.toLowerCase() != "zli") return
         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"
@@ -53,6 +54,10 @@ HTMLElement.prototype.attributeToCSS = function() {
             this.addEventListener("click", (() => window.location.href = a.value))
             return this.style.cursor = "pointer"
         }
+        if (a.name == "src") {
+            if (a.value.includes("http")) return this.style.backgroundImage = `url(${a.value})`
+            return this.style.backgroundImage = `url(${a.value})`
+        }
         this.style[a.name] = a.value
     })
 }
@@ -67,9 +72,8 @@ setInterval(() => {
     i++
 }, 10)
 
-document.querySelector("zbody").style.opacity = 0
-
 document.addEventListener("DOMContentLoaded", () => document.querySelectorAll("zloader").forEach(loader => {
+    document.querySelector("zbody").style.opacity = 0
     if (loader.getAttribute("waitFor") == "windowLoad") {
         if (loader.hasAttribute("delay")) {
             return setTimeout(() => {