+ Minimal class-less* css stylesheet to make boring sites look cool! +
+ + + +## Demo 👀 +Check out the [**demo**]() + + +## Usage 🤔 +Looks good? Then why don't you try using it ~ + + +**In HTML** +```html + + + + + + + + + + + +``` + +**In Css** +```css +@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/Zephyr.all.css"); + +/* Again, use what you want */ + +@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/buttons.css") + +@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/card.css") + +@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/text.css") + +@import url("https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/form.css") +``` + + +## Examples 👷 +Take a look at [Demo Html File](https://github.com/Itz-fork/Zephyr-Css/blob/main/index.html) diff --git a/Zephyr/main.css b/Zephyr/main.css new file mode 100644 index 0000000..fe7ca51 --- /dev/null +++ b/Zephyr/main.css @@ -0,0 +1,39 @@ +/* + +$ Copyright (c) 2023 Itz-fork +$ Project - Zephyr.css + +*/ + +@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600&display=swap"); + +:root { + /* White colors */ + --x-white: #e9edf5; + --x-white_hover: #ced3cf; + --x-white-text: #D8DEE9; + + /* Dark colors */ + --x-dark: #18202c; + --x-dark-back: #202936; + + /* Button colors */ + --x-disabled: #475364c5; + --x-default: #1f2936; + --x-default-shadow: #61666e; + --x-red: #e21818; + --x-red-shadow: #e73434; + --x-green: #26d451; + --x-green-shadow: #3be665; + --x-white: #ebedf0; + --x-white-shadow: #d3d5da; + --x-yellow: #e7f083; + --x-yellow-shadow: #f1fa8c; + --x-purple: #b388f0; + --x-purple-shadow: #bb93f3; + --x-blue: #72cbdf; + --x-blue-shadow: #82dcf0; + + /* Fonts */ + --x-font: "Space Grotesk", sans-serif; +} \ No newline at end of file diff --git a/Zephyr/styles/buttons.css b/Zephyr/styles/buttons.css new file mode 100644 index 0000000..5124a70 --- /dev/null +++ b/Zephyr/styles/buttons.css @@ -0,0 +1,71 @@ +/* + +$ Copyright (c) 2021 Itz-fork +$ Project - Zephyr + +*/ + +@import url("../main.css"); + + +button { + font-family: var(--x-font); + color: var(--x-white-text); + font-weight: bold; + font-size: 1em; + border-radius: 8px; + background-color: var(--x-default); + box-shadow: 0 2px 4px 0 var(--x-default-shadow); + padding: 0.8em; + margin: 0.6em 0.5em; + border: none; + transition: 0.3s ease-in-out; +} + +button:disabled, button[disabled=disabled] { + background-color: var(--x-disabled); + transition: unset; + pointer-events: none; + color: #969595d0; +} + +button.red { + background-color: var(--x-red); + box-shadow: 0 2px 4px 0 var(--x-red-shadow); +} + +button.green { + color: #111720; + background-color: var(--x-green); + box-shadow: 0 2px 4px 0 var(--x-green-shadow); +} + +button.white { + color: #111720; + background-color: var(--x-white); + box-shadow: 0 2px 4px 0 var(--x-white-shadow); +} + +button.yellow { + color: #111720; + background-color: var(--x-yellow); + box-shadow: 0 2px 4px 0 var(--x-yellow-shadow); +} + +button.purple { + color: #111720; + background-color: var(--x-purple); + box-shadow: 0 2px 4px 0 var(--x-purple-shadow); +} + +button.blue { + color: #111720; + background-color: var(--x-blue); + box-shadow: 0 2px 4px 0 var(--x-blue-shadow); +} + +button:hover { + color: var(--x-white-text); + border-radius: 8px; + background-color: #434b55; +} diff --git a/Zephyr/styles/card.css b/Zephyr/styles/card.css new file mode 100644 index 0000000..50c7726 --- /dev/null +++ b/Zephyr/styles/card.css @@ -0,0 +1,27 @@ +/* + +$ Copyright (c) 2021 Itz-fork +$ Project - Zephyr + +*/ + +@import url("../main.css"); + +.x-card-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); +} + +.x-card { + border-radius: 10px; + background-color: var(--x-dark); + box-shadow: 0 2px 4px 0 #61666e; + padding: 1rem; + margin: 2em 1em; + transition: 0.5s ease-in-out; + width: fit-content; +} +.x-card:hover { + background-color: var(--x-dark-back); + box-shadow: 0 2px 4px 0 #bdbdbd; +} diff --git a/Zephyr/styles/form.css b/Zephyr/styles/form.css new file mode 100644 index 0000000..b43c015 --- /dev/null +++ b/Zephyr/styles/form.css @@ -0,0 +1,113 @@ +/* + +$ Copyright (c) 2021 Itz-fork +$ Project - Zephyr + +*/ + +@import url("../main.css"); + +form { + padding: 1rem 0.5rem; + background-color: var(--x-dark); + border-radius: 0.5em; + display: grid; + gap: 1rem; + line-height: 1.5; + text-align: center; + @media only screen and (min-device-width: 800px) { + margin: clamp(3vw, 5vw, 20vw); + place-items: center; + grid-template-columns: auto auto; + } +} + +label { + color: var(--x-white); + font-family: var(--x-font); + /* display: inline-block; */ +} + +input[type="text"] { + color: var(--x-white-text); + background-color: var(--x-dark-back); + padding: 0.5rem 1rem; + border-radius: 0.3em; + width: clamp(20em, 75%, 1000em); + border: none; + box-sizing: border-box; + transition: 0.5s ease-in-out; + + &:focus { + outline: none; + box-shadow: 0 1px 2px 1px #7dd5e9; + } +} + +input[type="checkbox"] { + -webkit-appearance: none; + appearance: none; + margin: 0; + width: 1rem; + height: 1rem; + font: inherit; + background-color: var(--x-dark); + border: 0.15em solid var(--x-white); + border-radius: 0.15em; + &:checked { + background: var(--x-blue); + } + &:disabled { + user-select: none; + background-color: var(--x-disabled); + color: #959495; + } +} + +input[type="radio"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + font: inherit; + background: radial-gradient( + farthest-side, + var(--x-blue) 94%, + var(--x-dark-back) + ) + 50%/0 0 no-repeat content-box; + border-radius: 50%; + border: calc(1rem / 6) solid var(--x-white); + outline-offset: calc(1rem / 10); + padding: calc(1rem / 4); + aspect-ratio: 1; + transition: 0.2s; + + &:checked { + border-color: var(--x-blue); + -webkit-box-shadow: 0px 1px 6px 3px rgba(130, 220, 240, 1); + -moz-box-shadow: 0px 1px 6px 3px rgba(130, 220, 240, 1); + box-shadow: 0px 1px 6px 3px rgba(130, 220, 240, 1); + } + + &:disabled { + opacity: 0.2; + color: rgba(0, 0, 0, 0.2) !important; + text-decoration: line-through; + user-select: none; + } +} + +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + font: inherit; + background-color: var(--x-dark-back); + color: var(--x-white-text); + padding: 0.2rem; + cursor: pointer; + border: 0.1rem solid var(--x-blue); + border-radius: 0.3rem; +} diff --git a/Zephyr/styles/text.css b/Zephyr/styles/text.css new file mode 100644 index 0000000..e2f13f5 --- /dev/null +++ b/Zephyr/styles/text.css @@ -0,0 +1,78 @@ +/* + +$ Copyright (c) 2021 Itz-fork +$ Project - Zephyr + +*/ + +@import url("../main.css"); + + +h1 { + color: var(--x-white); + font-size: 2em; + font-family: var(--x-font); + font-weight: bold; +} + +h2 { + color: var(--x-white); + font-size: 1.8em; + font-family: var(--x-font); + font-weight: bold; +} + +h3 { + color: var(--x-white); + font-size: 1.6em; + font-family: var(--x-font); + font-weight: bold; +} + +h4 { + color: var(--x-white); + font-size: 1.4em; + font-family: var(--x-font); + font-weight: bold; +} + +h5 { + color: var(--x-white); + font-size: 1.2em; + font-family: var(--x-font); + font-weight: bold; +} + +h6 { + color: var(--x-white); + font-size: 1em; + font-family: var(--x-font); + font-weight: bold; +} + +p { + font-family: --x-font; + font-weight: bold; + font-size: 1.1em; + color: var(--x-white-text); +} + +code { + font-family: monospace; + font-size: 1.1em; + font-weight: bold; + color: var(--x-white-text); + background-color: var(--x-dark-back); +} + +.x-text { + font-family: --x-font; + font-weight: bold; + font-size: 1em; + color: var(--x-white-text); + text-align: center; +} + +.x-center { + text-align: center; +} \ No newline at end of file diff --git a/Zephyr/zephyr.all.css b/Zephyr/zephyr.all.css new file mode 100644 index 0000000..e087795 --- /dev/null +++ b/Zephyr/zephyr.all.css @@ -0,0 +1,16 @@ +/* + +$ Copyright (c) 2021 Itz-fork +$ Project - Zephyr + +*/ + +@import url("styles/text.css"); +@import url("styles/buttons.css"); +@import url("styles/card.css"); +@import url("styles/form.css"); + +html { + scroll-behavior: smooth; + background-color: #111720; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..19b06b4 --- /dev/null +++ b/index.html @@ -0,0 +1,105 @@ + + + + + + + + +Minimal class-less* css stylesheet to make boring sites look cool!
+ +This is a code text
+ + But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born + and I will give you a complete account of the system, +
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
+ massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
+ felis,
+ It's in a Card Baby 🔥
+ Centered using x-center
+
+ One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a + horrible vermin. He lay on his armour-like back, and if he lifted + It's in a Card Baby 🔥 +
+