mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
Adding css in and formatting a little better.
This commit is contained in:
parent
68828905b3
commit
6ade326c8d
5 changed files with 550 additions and 6 deletions
|
|
@ -1,11 +1,86 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import '../app.postcss';
|
|
||||||
import Header from '$lib/components/header/index.svelte';
|
import Header from '$lib/components/header/index.svelte';
|
||||||
import Footer from '$lib/components/footer/index.svelte';
|
import Footer from '$lib/components/footer/index.svelte';
|
||||||
|
import '$root/styles/styles.pcss';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Header />
|
<div class="wrapper">
|
||||||
<main>
|
<Header />
|
||||||
<slot />
|
<main>
|
||||||
</main>
|
<slot />
|
||||||
<Footer />
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="postcss">
|
||||||
|
/* .loading {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 101;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
|
||||||
|
.background {
|
||||||
|
background: black;
|
||||||
|
opacity: 0.8;
|
||||||
|
cursor: none;
|
||||||
|
inset: 0;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 850px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem 0rem;
|
||||||
|
max-width: 80vw;
|
||||||
|
|
||||||
|
@media (min-width: 1600px) {
|
||||||
|
max-width: 70vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 480px) {
|
||||||
|
footer {
|
||||||
|
padding: 40px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
li {
|
||||||
|
word-wrap: normal;
|
||||||
|
font-size: var(--bodyTextSize);
|
||||||
|
color: var(--lightShade);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
271
src/styles/global.pcss
Normal file
271
src/styles/global.pcss
Normal file
|
|
@ -0,0 +1,271 @@
|
||||||
|
/* Setup */
|
||||||
|
|
||||||
|
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Define Colors as colors */
|
||||||
|
--white: #ffffff;
|
||||||
|
--grey: #efefef;
|
||||||
|
--yellow: #ffc600;
|
||||||
|
--light: #ffffff;
|
||||||
|
--black: #2e2e2e;
|
||||||
|
--dark: #000000;
|
||||||
|
--lighterDark: #131415;
|
||||||
|
--shellYellow: #ffc850;
|
||||||
|
--lightGrey: #d8d8d8;
|
||||||
|
--lightShade: #f8f7f5;
|
||||||
|
--darkGrey: #272727;
|
||||||
|
|
||||||
|
/* Define Colors intentions */
|
||||||
|
--primary: var(--black);
|
||||||
|
--danger: var(--grey);
|
||||||
|
--background: var(--lighterDark);
|
||||||
|
--textColor: var(--lightGrey);
|
||||||
|
--buttonTextColor: var(--black);
|
||||||
|
--lineColor: var(--grey);
|
||||||
|
--cardBg: var(--darkGrey);
|
||||||
|
--headerBackground: var(--darkGrey);
|
||||||
|
--footerBackground: var(--darkGrey);
|
||||||
|
--linkHover: var(--shellYellow);
|
||||||
|
--lightHairLine: #c5c5c5;
|
||||||
|
|
||||||
|
/* Styles */
|
||||||
|
--line: solid 1px var(--lineColor);
|
||||||
|
|
||||||
|
/* Type */
|
||||||
|
--headingFont: 'Fira Code', monospace;
|
||||||
|
--bodyFont: 'Fira Sans', Sans-Serif;
|
||||||
|
--baseFontSize: 100%;
|
||||||
|
--h1: 3.052rem;
|
||||||
|
--h2: 2.441rem;
|
||||||
|
--h3: 1.953rem;
|
||||||
|
--h4: 1.563rem;
|
||||||
|
--h5: 1.25rem;
|
||||||
|
--h6: 1.8rem;
|
||||||
|
--bodyTextSize: 1.8rem;
|
||||||
|
--smallText: 1.44rem;
|
||||||
|
--lineHeight: 1.75;
|
||||||
|
|
||||||
|
/* Elevation */
|
||||||
|
--level-0: none;
|
||||||
|
--level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||||
|
--level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||||
|
--level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||||
|
--level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
|
/* Positioning */
|
||||||
|
--containerPadding: 2.5%;
|
||||||
|
--headerHeight: 8rem;
|
||||||
|
--borderRadius: 10px;
|
||||||
|
--maxWidth: 1200px;
|
||||||
|
|
||||||
|
/* Cards */
|
||||||
|
--cardHeightMin: 15rem;
|
||||||
|
--cardHeightMax: 50rem;
|
||||||
|
--cardWidthMin: 15rem;
|
||||||
|
|
||||||
|
/* Media Queries - Not yet supported in CSS */
|
||||||
|
/*
|
||||||
|
--xsmall: 340px;
|
||||||
|
--small: 500px;
|
||||||
|
--large: 960px;
|
||||||
|
--wide: 1200px;
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background: var(--background) none repeat scroll 0% 0%;
|
||||||
|
font-size: 62.5%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
line-height: var(--lineHeight);
|
||||||
|
color: var(--textColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollbar Styles */
|
||||||
|
body::-webkit-scrollbar {
|
||||||
|
width: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--lightGrey) var(--darkGrey);
|
||||||
|
}
|
||||||
|
|
||||||
|
body::-webkit-scrollbar-track {
|
||||||
|
background: var(--darkGrey);
|
||||||
|
}
|
||||||
|
|
||||||
|
body::-webkit-scrollbar-thumb {
|
||||||
|
background-color: var(--lightGrey);
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 3px solid var(--darkGrey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gatsby-image-wrapper img[src*='base64\\,'] {
|
||||||
|
image-rendering: -moz-crisp-edges;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: var(--white);
|
||||||
|
color: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border-color: rgba(0, 0, 0, 0.1);
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.button,
|
||||||
|
button {
|
||||||
|
background: var(--darkAccent);
|
||||||
|
color: var(--lightShade);
|
||||||
|
border: 0;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
--cast: 2px;
|
||||||
|
box-shadow: var(--cast) var(--cast) 0 var(--lightAccent);
|
||||||
|
text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.2);
|
||||||
|
transition: all 0.2s;
|
||||||
|
text-decoration: none;
|
||||||
|
&:hover {
|
||||||
|
--cast: 4px;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
--cast: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration-color: var(--shellYellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--linkHover);
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
padding: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: var(--headingFont);
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: var(--h1);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: var(--h2);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: var(--h3);
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: var(--h4);
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: var(--h5);
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: 0;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
a::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
bottom: -5px;
|
||||||
|
left: 0px;
|
||||||
|
background: var(--linkHover);
|
||||||
|
transition: transform 0.3s ease 0s;
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
font-size: 2rem;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&[aria-current='page'],
|
||||||
|
&.active,
|
||||||
|
&.current-parent {
|
||||||
|
&:after {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
&:after {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin-inline: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1.5rem;
|
||||||
|
background: var(--cardBg);
|
||||||
|
box-shadow: var(--level-3);
|
||||||
|
border-radius: var(--borderRadius);
|
||||||
|
max-width: var(--cardWidthMax);
|
||||||
|
min-width: var(--cardWidthMin);
|
||||||
|
max-height: var(--cardHeightMax);
|
||||||
|
min-height: var(--cardHeightMin);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* First item will never have margin top */
|
||||||
|
.card > *:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Last item will never have margin bottom */
|
||||||
|
.card > *:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
58
src/styles/reset.pcss
Normal file
58
src/styles/reset.pcss
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
img,
|
||||||
|
picture,
|
||||||
|
video,
|
||||||
|
canvas,
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe,
|
||||||
|
video {
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
font: inherit;
|
||||||
|
color: inherit;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font: inherit;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
3
src/styles/styles.pcss
Normal file
3
src/styles/styles.pcss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@import 'reset.pcss';
|
||||||
|
@import 'global.pcss';
|
||||||
|
/* @import '$root/styles/theme.pcss'; */
|
||||||
137
src/styles/theme.pcss
Normal file
137
src/styles/theme.pcss
Normal file
|
|
@ -0,0 +1,137 @@
|
||||||
|
html[data-theme='🌛 Dark'] {
|
||||||
|
/* Global */
|
||||||
|
--clr-primary: hsl(173 100% 66%);
|
||||||
|
--clr-txt: hsl(0 0% 98%);
|
||||||
|
--clr-bg: hsl(210 7% 11%);
|
||||||
|
|
||||||
|
--bg: radial-gradient(hsl(173 100% 4%), var(--clr-bg));
|
||||||
|
--bg-opacity: 0.7;
|
||||||
|
|
||||||
|
/* Menu */
|
||||||
|
--clr-menu-text: hsl(0 0% 78%);
|
||||||
|
--clr-menu-bg: linear-gradient(180deg, hsl(180 7% 14%) 0%, hsl(216 7% 14%) 100%);
|
||||||
|
--clr-menu-arrow-bg: hsl(180 7% 14%);
|
||||||
|
--clr-menu-border: hsl(0 0% 19%);
|
||||||
|
|
||||||
|
--clr-theme-txt: hsl(177 100% 15%);
|
||||||
|
--clr-theme-active: hsl(177 100% 80%);
|
||||||
|
--clr-switch-on-bg: hsl(0 0% 24%);
|
||||||
|
--clr-switch-off-bg: hsl(0 0% 10%);
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
--clr-hero-txt: hsl(174 27% 73%);
|
||||||
|
--clr-hero-bg: linear-gradient(270deg, hsl(210 15% 13%) 43%, hsl(176 19% 15%) 66%);
|
||||||
|
--clr-hero-divider-bg: hsl(0 0% 21%);
|
||||||
|
--clr-input-txt: hsl(177 100% 15%);
|
||||||
|
--clr-input-bg: hsl(210 13% 24%);
|
||||||
|
--clr-input-placeholder-txt: hsl(210 13% 50%);
|
||||||
|
--clr-input-border: hsl(0 0% 21%);
|
||||||
|
|
||||||
|
/* Card */
|
||||||
|
--clr-card-bg: linear-gradient(180deg, hsl(180 7% 14%) 0%, hsl(216 7% 14%) 100%);
|
||||||
|
--clr-card-txt: hsl(0 0% 78%);
|
||||||
|
|
||||||
|
/* Link */
|
||||||
|
--clr-link-txt: hsl(0 100% 98%);
|
||||||
|
--clr-link-background: hsl(0 0% 4%);
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
--clr-footer-txt: hsl(0 0% 78%);
|
||||||
|
--clr-footer-bg: hsl(210 5% 7%);
|
||||||
|
|
||||||
|
/* Post */
|
||||||
|
--post-overlay-bg: radial-gradient(hsl(173 100% 4% / 80%), var(--clr-bg));
|
||||||
|
--post-blockquote-txt: hsl(173 100% 94%);
|
||||||
|
--post-blockquote-bg: hsl(173 60% 4%);
|
||||||
|
--post-blockquote-border: hsl(173 10% 10%);
|
||||||
|
|
||||||
|
--clr-code-bg: hsl(173 60% 4%);
|
||||||
|
--clr-code-title: hsl(173 100% 94%);
|
||||||
|
--clr-code-border: hsl(173 10% 10%);
|
||||||
|
--clr-code-line-number: hsl(173 20% 20%);
|
||||||
|
--clr-code-line-highlight: hsl(173 40% 8%);
|
||||||
|
--clr-code-inline-txt: hsl(173 100% 94%);
|
||||||
|
--clr-code-inline-bg: hsl(173 60% 4%);
|
||||||
|
|
||||||
|
--clr-token-1: hsl(173 100% 66%);
|
||||||
|
--clr-token-2: hsl(180 60% 80%);
|
||||||
|
--clr-token-3: hsl(173 100% 66%);
|
||||||
|
--clr-token-4: hsl(0 0% 98%);
|
||||||
|
--clr-token-5: hsl(173 10% 60%);
|
||||||
|
|
||||||
|
/* Input Fields */
|
||||||
|
--input-bg: #181a1b;
|
||||||
|
|
||||||
|
/* Button */
|
||||||
|
--warning: hsla(0, 75%, 60%, 0.9);
|
||||||
|
--warning-hover: hsla(0, 75%, 60%, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='☀️ Daylight'] {
|
||||||
|
/* Global */
|
||||||
|
--clr-primary: hsl(220 100% 50%);
|
||||||
|
--clr-txt: hsl(220 10% 10%);
|
||||||
|
--clr-bg: hsl(0 0% 98%);
|
||||||
|
|
||||||
|
--bg: radial-gradient(hsl(0 0% 98%), var(--clr-bg));
|
||||||
|
--bg-opacity: 0.7;
|
||||||
|
|
||||||
|
/* Menu */
|
||||||
|
--clr-menu-text: hsl(220 10% 10%);
|
||||||
|
--clr-menu-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
|
||||||
|
--clr-menu-arrow-bg: hsl(0 0% 98%);
|
||||||
|
--clr-menu-border: hsl(0 0% 80%);
|
||||||
|
|
||||||
|
--clr-theme-txt: hsl(0 0% 98%);
|
||||||
|
--clr-theme-active: hsl(220 100% 60%);
|
||||||
|
--clr-switch-on-bg: hsl(220 40% 90%);
|
||||||
|
--clr-switch-off-bg: hsl(220 40% 80%);
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
--clr-hero-txt: hsl(220 10% 40%);
|
||||||
|
--clr-hero-bg: linear-gradient(270deg, hsl(0 0% 94%) 43%, hsl(0 0% 98%) 66%);
|
||||||
|
--clr-hero-divider-bg: hsl(0 0% 80%);
|
||||||
|
--clr-input-txt: hsl(220 10% 98%);
|
||||||
|
--clr-input-bg: hsl(0 0% 98%);
|
||||||
|
--clr-input-placeholder-txt: hsl(220 10% 60%);
|
||||||
|
--clr-input-border: hsl(0 0% 80%);
|
||||||
|
|
||||||
|
/* Card */
|
||||||
|
--clr-card-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
|
||||||
|
--clr-card-txt: hsl(220 10% 40%);
|
||||||
|
|
||||||
|
/* Link */
|
||||||
|
--clr-link-txt: hsl(220 10% 10%);
|
||||||
|
--clr-link-background: hsl(0 0% 100%);
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
--clr-footer-txt: hsl(220 10% 10%);
|
||||||
|
--clr-footer-bg: hsl(0 0% 98%);
|
||||||
|
|
||||||
|
/* Post */
|
||||||
|
--post-overlay-bg: radial-gradient(hsl(0 0% 100% / 60%), var(--clr-bg));
|
||||||
|
--post-blockquote-txt: hsl(0 0% 40%);
|
||||||
|
--post-blockquote-bg: hsl(0 0% 98%);
|
||||||
|
--post-blockquote-border: hsl(0 0% 84%);
|
||||||
|
|
||||||
|
--clr-code-bg: hsl(0 0% 98%);
|
||||||
|
--clr-code-title: hsl(0 0% 40%);
|
||||||
|
--clr-code-border: hsl(0 0% 84%);
|
||||||
|
--clr-code-line-number: hsl(0 0% 60%);
|
||||||
|
--clr-code-line-highlight: hsl(0 0% 94%);
|
||||||
|
--clr-code-inline-txt: hsl(0 0% 98%);
|
||||||
|
--clr-code-inline-bg: hsl(0 0% 20%);
|
||||||
|
|
||||||
|
--clr-token-1: hsl(220 100% 50%);
|
||||||
|
--clr-token-2: hsl(220 60% 50%);
|
||||||
|
--clr-token-3: hsl(220 100% 50%);
|
||||||
|
--clr-token-4: hsl(0 0% 20%);
|
||||||
|
--clr-token-5: hsl(0 0% 60%);
|
||||||
|
|
||||||
|
/* Input Fields */
|
||||||
|
--input-bg: #181a1b;
|
||||||
|
|
||||||
|
/* Button */
|
||||||
|
--warning: hsla(0, 75%, 60%, 0.9);
|
||||||
|
--warning-hover: hsla(0, 75%, 60%, 1);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue