feat: Zephyr v0.1

Itz-fork · Nov 27, 2023 · 1676f3c · 1676f3c
commit 1676f3c
Show file tree

Hide file tree

Showing 8 changed files with 498 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,49 @@
+<h1 align="center">Zephyr 🎐</h1>
+
+<p align="center">
+  Minimal class-less* css stylesheet to make boring sites look cool!
+</p>
+
+
+
+## Demo 👀
+Check out the [**demo**]()
+
+
+## Usage 🤔
+Looks good? Then why don't you try using it ~
+
+
+**In HTML**
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/Zephyr.all.css">
+
+<!-- Or just use what you want -->
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/buttons.css">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/card.css">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/text.css">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Itz-fork/Zephyr-Css@latest/Zephyr/styles/form.css">
+```
+
+**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
@@ -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;
+}
diff --git a/Zephyr/styles/buttons.css 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
@@ -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
@@ -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
@@ -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;
+}