From 5a9e4621f031a3637ecee495e1481fe084ebc71f Mon Sep 17 00:00:00 2001 From: DxxxxY Date: Wed, 8 Dec 2021 22:19:40 -0500 Subject: [PATCH] more attributes, more tags, fixes, minify --- index.html | 15 ++++++++++- package.json | 5 ++++ zephyr.css | 72 +++++++++++++++++++++++++++++++++++++------------- zephyr.js | 8 ++++-- zephyr.min.css | 1 + 5 files changed, 80 insertions(+), 21 deletions(-) create mode 100644 package.json create mode 100644 zephyr.min.css diff --git a/index.html b/index.html index 1b16fe3..5d3fc42 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ Zephyr - Example - + ZEPHYR @@ -38,11 +38,24 @@ Welcome + to the framework! + + 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. ZEPHYR + + Made with Zephyr diff --git a/package.json b/package.json new file mode 100644 index 0000000..ed01df7 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "scripts": { + "min": "css-minify -f zephyr.css -o /" + } +} \ No newline at end of file diff --git a/zephyr.css b/zephyr.css index 0e80cd8..a427481 100644 --- a/zephyr.css +++ b/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; diff --git a/zephyr.js b/zephyr.js index 00df417..8c26c68 100644 --- a/zephyr.js +++ b/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(() => { diff --git a/zephyr.min.css b/zephyr.min.css new file mode 100644 index 0000000..0159e3c --- /dev/null +++ b/zephyr.min.css @@ -0,0 +1 @@ +@import "utils/fonts.css";*{background-color:var(--bgColor);color:var(--color);scroll-behavior:smooth}znav{align-items:center;height:10vw;justify-content:space-between}zl,znav{display:flex}zl{list-style-type:none}zbody{display:block;margin:0 3vw}zfoot{align-items:center;display:flex;height:10vw;justify-content:space-between}zp{font-size:1.2vw;letter-spacing:.01vw}zh1{-webkit-text-fill-color:transparent;font-size:4vw;letter-spacing:.5vw}zdark{border:.25vw solid var(--color);font-size:1.3vw;padding:.5vw}zh2{font-size:3.5vw;letter-spacing:.1vw}zh3{font-size:2vw}zh3,zh4{letter-spacing:.05vw}zh4{font-size:1.3vw}zli{font-size:1.5vw;letter-spacing:.1vw;margin:0 1vw}zsection{align-items:center;display:flex;flex-direction:column;height:20vw}zloader{animation:spin 2s linear infinite;border-radius:50%;border-top:16px solid var(--bgColor);border:16px solid var(--bgColor);border-top-color:var(--color);height:120px;left:50%;margin:-76px 0 0 -76px;position:absolute;top:50%;width:120px}zicon{background-size:cover;display:block;height:4vw;width:4vw}ztable{border:.25vw solid var(--color);border-collapse:separate;border-radius:2px;border-spacing:2px;box-sizing:border-box;display:table;font-size:1.75vw;letter-spacing:.15vw;margin:0;padding:0;text-indent:0}ztr{border-color:inherit;display:table-row}ztd,ztr{border-collapse:separate;border-spacing:2px;text-indent:0;vertical-align:inherit}ztd{display:table-cell;font-size:1.2vw;letter-spacing:.01vw;padding:1vw}za{display:inline-block;position:relative}za:after{background-color:var(--color);bottom:-.25vw;content:"";height:.15vw;left:0;position:absolute;transform:scaleX(0);transform-origin:bottom right;transition:transform .25s ease-out;width:100%}za:hover:after{color:var(--color)}.active:after,za:hover:after{transform:scaleX(1);transform-origin:bottom left}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}} \ No newline at end of file