243 lines
6.1 KiB
CSS
243 lines
6.1 KiB
CSS
@layer reset, base, components, utilities;
|
|
|
|
@layer reset {
|
|
/*
|
|
Josh's Custom CSS Reset slightly Modified
|
|
https://www.joshwcomeau.com/css/custom-css-reset/
|
|
*/
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
* {
|
|
border: 0 solid;
|
|
line-height: calc(1em + 0.5rem);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
img,
|
|
picture,
|
|
video,
|
|
canvas,
|
|
svg {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
input,
|
|
button,
|
|
textarea,
|
|
select {
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
p,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
word-break: break-word;
|
|
}
|
|
|
|
p {
|
|
text-wrap: pretty;
|
|
hyphens: auto;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
a {
|
|
color: #fff;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--sidebar-width: 400px;
|
|
--spacing: 0.25rem;
|
|
|
|
--color-accent-text: #000;
|
|
|
|
/* Accent Color Options */
|
|
|
|
/* violet (current default) */
|
|
--accent-violet: #A010FF;
|
|
--accent-violet-hover: #8D00E8;
|
|
|
|
/* volcanic heat - orange-red */
|
|
--accent-volcano: #ef4410;
|
|
--accent-volcano-hover: #dc2626;
|
|
|
|
/* neon lime */
|
|
--accent-lime: #77fb6b;
|
|
--accent-lime-hover: #5ee04f;
|
|
|
|
/* electric sky */
|
|
--accent-sky: #38d3fa;
|
|
--accent-sky-hover: #2bc7ee;
|
|
|
|
/* crushed coral - warm pink-orange */
|
|
--accent-coral: #FF6B6B;
|
|
--accent-coral-hover: #E55555;
|
|
|
|
/* deep emerald - rich green */
|
|
--accent-emerald: #10B981;
|
|
--accent-emerald-hover: #059669;
|
|
|
|
/* golden hour - warm amber */
|
|
--accent-amber: #F59E0B;
|
|
--accent-amber-hover: #D97706;
|
|
|
|
/* rose quartz - soft pink-red */
|
|
--accent-rose: #F43F5E;
|
|
--accent-rose-hover: #E11D48;
|
|
|
|
/* arctic cyan - crisp blue */
|
|
--accent-cyan: #06B6D4;
|
|
--accent-cyan-hover: #0891B2;
|
|
|
|
/* midnight indigo - deep blue-purple */
|
|
--accent-indigo: #6366F1;
|
|
--accent-indigo-hover: #4F46E5;
|
|
|
|
/* sunset magenta - vibrant pink-purple */
|
|
--accent-magenta: #EC4899;
|
|
--accent-magenta-hover: #DB2777;
|
|
|
|
/* Neutral Base Colors - different gray variations */
|
|
|
|
/* zinc - deep gray-blue */
|
|
--neutral-zinc-dark: #171619;
|
|
--neutral-zinc-light: #fbfafd;
|
|
|
|
/* charcoal - deep black-gray */
|
|
--neutral-charcoal-dark: #0a0a0a;
|
|
--neutral-charcoal-light: #fefdff;
|
|
}
|
|
|
|
:root.dark {
|
|
--color-base: color-mix(in srgb, var(--base-hinting) #040305, var(--accent-hinting) var(--color-accent));
|
|
--color-highlight-low: color-mix(in srgb, var(--base-hinting) rgba(255, 255, 255, 0.05), var(--accent-hinting) var(--color-accent));
|
|
--color-highlight: color-mix(in srgb, var(--base-hinting) rgba(255, 255, 255, 0.10), var(--accent-hinting) var(--color-accent));
|
|
--color-highlight-high: color-mix(in srgb, var(--base-hinting) rgba(255, 255, 255, 0.18), var(--accent-hinting) var(--color-accent));
|
|
--color-text: color-mix(in srgb, var(--base-hinting) #fafafa, var(--accent-hinting) var(--color-accent));
|
|
--color-subtle: color-mix(in srgb, var(--base-hinting) #a1a1aa, var(--accent-hinting) var(--color-accent));
|
|
--color-input: color-mix(in srgb, var(--base-hinting) #222124, var(--accent-hinting) var(--color-accent));
|
|
--color-neutral: color-mix(in srgb, var(--base-hinting) var(--neutral-dark), var(--accent-hinting) var(--color-accent));
|
|
}
|
|
|
|
:root.light {
|
|
--color-base: color-mix(in srgb, var(--base-hinting) #f2f0f0, var(--accent-hinting) var(--color-accent));
|
|
--color-highlight-low: color-mix(in srgb, var(--base-hinting) rgba(0, 0, 0, 0.06), var(--accent-hinting) var(--color-accent));
|
|
--color-highlight: color-mix(in srgb, var(--base-hinting) rgba(0, 0, 0, 0.08), var(--accent-hinting) var(--color-accent));
|
|
--color-highlight-high: color-mix(in srgb, var(--base-hinting) rgba(0, 0, 0, 0.12), var(--accent-hinting) var(--color-accent));
|
|
--color-text: color-mix(in srgb, var(--base-hinting) #1a1a1a, var(--accent-hinting) var(--color-accent));
|
|
--color-subtle: color-mix(in srgb, var(--base-hinting) #6b7280, var(--accent-hinting) var(--color-accent));
|
|
--color-input: color-mix(in srgb, var(--base-hinting) #ffffff, var(--accent-hinting) var(--color-accent));
|
|
--color-neutral: color-mix(in srgb, var(--base-hinting) var(--neutral-light), var(--accent-hinting) var(--color-accent));
|
|
}
|
|
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: system-ui, sans-serif;
|
|
background-color: var(--color-base);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
html {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
padding: 0.5rem;
|
|
height: 100%;
|
|
}
|
|
|
|
button {
|
|
color: inherit;
|
|
display: flex;
|
|
}
|
|
|
|
button.accent {
|
|
display: flex;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent-text);
|
|
border-radius: calc(var(--spacing) * 1.5);
|
|
padding-inline: calc(var(--spacing) * 2);
|
|
padding-block: calc(var(--spacing) * 1);
|
|
transition: background-color 150ms cubic-bezier(0.45, 0, 0.55, 1);
|
|
}
|
|
|
|
button.accent:hover {
|
|
background-color: var(--color-accent-hover);
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.object-cover {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.backdrop-blur-md {
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.cursor {
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 0.9em;
|
|
background-color: currentColor;
|
|
animation: blink 1s step-end infinite;
|
|
vertical-align: middle;
|
|
margin-left: 0.125rem;
|
|
}
|
|
|
|
@keyframes blink {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
} |