-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
basic tags, dark mode, underline, readme
- Loading branch information
0 parents
commit 96c4ed0
Showing
15 changed files
with
297 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| # Zephyr | ||
| A totally different CSS framework strieving to achieve elegance with darkmode built-in using only HTML. No CSS or JS. Heavily in development. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <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"> | ||
| <title>Zephyr - Example</title> | ||
| </head> | ||
|
|
||
| <zbody> | ||
| <zloader waitFor="windowLoad"></zloader> | ||
| <znav> | ||
| <zh1>ZEPHYR</zh1> | ||
| <zl> | ||
| <zli> | ||
| <za href="index.html">Home</za> | ||
| </zli> | ||
| <zli> | ||
| <za href="example.html">Example</za> | ||
| </zli> | ||
| <zli> | ||
| <za href="example.html">Example</za> | ||
| </zli> | ||
| <zli> | ||
| <za href="example.html">Example</za> | ||
| </zli> | ||
| <zli> | ||
| <za href="example.html">Example</za> | ||
| </zli> | ||
| <zli> | ||
| <za href="example.html">Example</za> | ||
| </zli> | ||
| </zl> | ||
| </znav> | ||
|
|
||
| <zfoot> | ||
| <zh1 href="#">ZEPHYR</zh1> | ||
| <zdark></zdark> | ||
| </zfoot> | ||
| <script src="zephyr.js"></script> | ||
| </zbody> | ||
|
|
||
| </html> |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| /* #### Generated By: http://www.cufonfonts.com #### */ | ||
|
|
||
| @font-face { | ||
| font-family: 'Euclid Circular B Regular'; | ||
| font-style: normal; | ||
| font-weight: normal; | ||
| 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: normal; | ||
| 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: normal; | ||
| 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: normal; | ||
| 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: normal; | ||
| 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: normal; | ||
| 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: normal; | ||
| 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: normal; | ||
| 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: normal; | ||
| 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: normal; | ||
| src: local('Euclid Circular B Bold Italic'), url('font/Euclid Circular B Bold Italic.woff') format('woff'); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| @import "utils/fonts.css"; | ||
| * { | ||
| font-family: "Euclid Circular B Bold", sans-serif; | ||
| color: var(--color); | ||
| background-color: var(--bgColor); | ||
| scroll-behavior: smooth; | ||
| } | ||
|
|
||
| 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; | ||
| } | ||
|
|
||
| zbody { | ||
| display: block; | ||
| margin: 0 3vw 0; | ||
| } | ||
|
|
||
| zfoot { | ||
| display: flex; | ||
| width: 100%; | ||
| height: 10vw; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| zh1 { | ||
| -webkit-text-fill-color: transparent; | ||
| font-size: 4vw; | ||
| letter-spacing: 0.5vw; | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
|
|
||
| zdark { | ||
| border: 0.25vw solid var(--color); | ||
| font-size: 1.3vw; | ||
| padding: 0.5vw; | ||
| } | ||
|
|
||
|
|
||
| /* h2 { | ||
| font-size: 3.5vw; | ||
| letter-spacing: 0.1vw; | ||
| padding: 0; | ||
| margin: 0; | ||
| text-align: center; | ||
| } | ||
| h3 { | ||
| font-size: 2vw; | ||
| letter-spacing: 0.05vw; | ||
| padding: 0; | ||
| margin: 0; | ||
| text-align: center; | ||
| } */ | ||
|
|
||
| zli { | ||
| font-size: 1.5vw; | ||
| letter-spacing: 0.1vw; | ||
| margin: 0 1vw 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| 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; | ||
| } | ||
|
|
||
| za { | ||
| display: inline-block; | ||
| position: relative; | ||
| } | ||
|
|
||
| za:after { | ||
| content: ''; | ||
| position: absolute; | ||
| width: 100%; | ||
| transform: scaleX(0); | ||
| height: 0.15vw; | ||
| bottom: -0.25vw; | ||
| left: 0; | ||
| background-color: var(--color); | ||
| transform-origin: bottom right; | ||
| transition: transform 0.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(0deg); | ||
| } | ||
| 100% { | ||
| transform: rotate(360deg); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| // Dark mode | ||
| let dark = true | ||
| if (localStorage.getItem("current_theme") == "light") dark = false | ||
| else localStorage.setItem("current_theme", dark ? "dark" : "light") | ||
|
|
||
| let i = 0 | ||
|
|
||
| //Loop | ||
| setInterval(() => { | ||
| //360deg reset | ||
| if (i == 360) i = 0 | ||
|
|
||
| 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" | ||
| navlink.style.color = dark ? "#0d5ca5" : "#600360" | ||
| }) | ||
|
|
||
| document.querySelector("zdark").innerText = dark ? "Light Mode" : "Dark Mode" | ||
|
|
||
| // Apply site wide color scheme | ||
| document.querySelector(":root").style.setProperty("--color", dark ? "#4a94fa" : "#990099") | ||
| document.querySelector(":root").style.setProperty("--bgColor", dark ? "#000000" : "#ffffff") | ||
|
|
||
| //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(e => { | ||
| if (e.name == "href") { | ||
| this.addEventListener("click", (() => window.location.href = e.value)) | ||
| return this.style.cursor = "pointer" | ||
| } | ||
| this.style[e.name] = e.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 | ||
| }) | ||
|
|
||
| document.querySelectorAll("zloader, znav, zl, za, zh1, zdark, zbody").forEach(custom => custom.attributeToCSS()) |