diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7d2453a --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +utils/ +zephyr.css +zephyr.js +package.json \ No newline at end of file diff --git a/README.md b/README.md index b5f2984..b7850e1 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,49 @@ # Zephyr 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. -https://dxxxxy.github.io/Zephyr/ \ No newline at end of file +https://dxxxxy.github.io/Zephyr/ + +## Usage +Use HTML as you normally would. To use the custom tags, prefix your tags by `z`. +
+ +Here's an example of a custom `` tag: + +```html +Example +``` + +You can also use `CSS` rules in `HTML` attributes: + +```html + +``` + +You can customize the preset colors by using the tag: + +```html + + + + +$darkcolor = "#4a94fa" +$lightcolor = "#990099" +$darkbgcolor = "#000000" +$lightbgcolor = "#ffffff" +``` + +Lastly, there are many built-in tags ready to be used at any time: + +```html + + + + + +``` + +There is currently a limited number of tags and the design itself has not reached its prime. + +You can check out https://dxxxxy.github.io/Zephyr/ or the `index.html` file included in the project as a reference. \ No newline at end of file diff --git a/index.html b/index.html index 5d3fc42..4654ad0 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ Zephyr - Example - + ZEPHYR diff --git a/package.json b/package.json index ed01df7..d034cca 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { "scripts": { - "min": "css-minify -f zephyr.css -o /" + "min": "minify zephyr.css > zephyr.min.css && minify zephyr.js > zephyr.min.js" } } \ No newline at end of file diff --git a/zephyr.min.css b/zephyr.min.css index 0159e3c..64b856b 100644 --- a/zephyr.min.css +++ b/zephyr.min.css @@ -1 +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 +@font-face{font-family:'Euclid Circular B Regular';font-style:normal;font-weight:400;src:local('Euclid Circular B Regular'),url('font/Euclid Circular B Regular.woff') format('woff')}@font-face{font-family:'Euclid Circular B Italic';font-style:normal;font-weight:400;src:local('Euclid Circular B Italic'),url('font/Euclid Circular B Italic.woff') format('woff')}@font-face{font-family:'Euclid Circular B Light';font-style:normal;font-weight:400;src:local('Euclid Circular B Light'),url('font/Euclid Circular B Light.woff') format('woff')}@font-face{font-family:'Euclid Circular B Light Italic';font-style:normal;font-weight:400;src:local('Euclid Circular B Light Italic'),url('font/Euclid Circular B Light Italic.woff') format('woff')}@font-face{font-family:'Euclid Circular B Medium';font-style:normal;font-weight:400;src:local('Euclid Circular B Medium'),url('font/Euclid Circular B Medium.woff') format('woff')}@font-face{font-family:'Euclid Circular B Medium Italic';font-style:normal;font-weight:400;src:local('Euclid Circular B Medium Italic'),url('font/Euclid Circular B Medium Italic.woff') format('woff')}@font-face{font-family:'Euclid Circular B SemiBold';font-style:normal;font-weight:400;src:local('Euclid Circular B SemiBold'),url('font/Euclid Circular B SemiBold.woff') format('woff')}@font-face{font-family:'Euclid Circular B SemiBold Italic';font-style:normal;font-weight:400;src:local('Euclid Circular B SemiBold Italic'),url('font/Euclid Circular B SemiBold Italic.woff') format('woff')}@font-face{font-family:'Euclid Circular B Bold';font-style:normal;font-weight:400;src:local('Euclid Circular B Bold'),url('font/Euclid Circular B Bold.woff') format('woff')}@font-face{font-family:'Euclid Circular B Bold Italic';font-style:normal;font-weight:400;src:local('Euclid Circular B Bold Italic'),url('font/Euclid Circular B Bold Italic.woff') format('woff')}*{color:var(--color);background-color:var(--bgColor);scroll-behavior:smooth}znav{display:flex;height:10vw;align-items:center;justify-content:space-between}zl{display:flex;list-style-type:none}zbody{display:block;margin:0 3vw 0}zfoot{display:flex;height:10vw;align-items:center;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;letter-spacing:.05vw}zh4{font-size:1.3vw;letter-spacing:.05vw}zli{font-size:1.5vw;letter-spacing:.1vw;margin:0 1vw 0}zsection{display:flex;flex-direction:column;height:20vw;align-items:center}zloader{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-76px 0 0 -76px;border:16px solid var(--bgColor);border-radius:50%;border-top:16px solid var(--color);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:.15vw;padding:0;margin:0;border:.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:.01vw;padding:1vw;display:table-cell;vertical-align:inherit;border-collapse:separate;text-indent:initial;border-spacing:2px}za{display:inline-block;position:relative}za:after{content:'';position:absolute;width:100%;transform:scaleX(0);height:.15vw;bottom:-.25vw;left:0;background-color:var(--color);transform-origin:bottom right;transition:transform .25s ease-out}za:hover:after{color:var(--color);transform:scaleX(1);transform-origin:bottom left}.active:after{transform:scaleX(1);transform-origin:bottom left}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} diff --git a/zephyr.min.js b/zephyr.min.js new file mode 100644 index 0000000..38fe502 --- /dev/null +++ b/zephyr.min.js @@ -0,0 +1 @@ +var dark=!1,darkcolor="#4a94fa",lightcolor="#990099",darkbgcolor="#000000",lightbgcolor="#ffffff",i=0;const darkSwitch=()=>{"dark"==localStorage.getItem("current_theme")?localStorage.setItem("current_theme","light"):"light"==localStorage.getItem("current_theme")?localStorage.setItem("current_theme","dark"):localStorage.setItem("current_theme",dark?"dark":"light"),dark=!dark,document.querySelectorAll("za").forEach((t=>{if("zli"==t.parentNode.nodeName.toLowerCase())return""==window.location.pathname.split("/").pop()&&"index.html"==t.getAttribute("href")||t.getAttribute("href")==window.location.pathname.split("/").pop()?t.className="active":void(t.style.color=shadeColor(dark?darkcolor:lightcolor,2))})),document.querySelector("zdark").innerText=dark?"Light Mode":"Dark Mode",document.querySelector("*").style.setProperty("--color",dark?darkcolor:lightcolor),document.querySelector("*").style.setProperty("--bgColor",dark?darkbgcolor:lightbgcolor)},shadeColor=(t,e)=>{const r=t.startsWith("#")?1:0;var o=parseInt(t.substring(r,3),16),a=parseInt(t.substring(r+2,5),16),l=parseInt(t.substring(r+4,7),16);o=Math.round(o/e),a=(a=Math.round(a/e))<255?a:255,l=(l=Math.round(l/e))<255?l:255;return`#${1===(o=o<255?o:255).toString(16).length?`0${o.toString(16)}`:o.toString(16)}${1===a.toString(16).length?`0${a.toString(16)}`:a.toString(16)}${1===l.toString(16).length?`0${l.toString(16)}`:l.toString(16)}`};HTMLElement.prototype.attributeToCSS=function(){Array.prototype.slice.call(this.attributes).forEach((t=>"href"==t.name?(this.addEventListener("click",(()=>window.location.href=t.value)),this.style.cursor="pointer"):"src"==t.name?(t.value.includes("http"),this.style.backgroundImage=`url(${t.value})`):void(this.style[t.name]=t.value)))},setInterval((()=>{360==i&&(i=0),document.querySelectorAll("zh1").forEach((t=>{t.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%)`,t.style.webkitBackgroundClip="text"})),i++}),10),document.addEventListener("DOMContentLoaded",(()=>document.querySelectorAll("zloader").forEach((t=>{if(document.querySelector("zbody").style.opacity=0,"windowLoad"==t.getAttribute("waitFor")){if(t.hasAttribute("delay"))return setTimeout((()=>{t.remove(),document.querySelector("zbody").style.opacity=1}),t.getAttribute("delay"));t.remove(),document.querySelector("zbody").style.opacity=1}})))),document.querySelector("zdark").addEventListener("click",darkSwitch),document.querySelectorAll("*").forEach((t=>{t.nodeName.toLowerCase().startsWith("z")&&t.attributeToCSS()})),Array.prototype.slice.call(document.querySelector("zconfig").attributes).forEach((t=>{t.name.startsWith("$")&&(window[t.name.split("$").pop()]=t.value)})),darkSwitch();