zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Zoe
2026-01-11 05:04:29 -06:00
commit 0877cc10bd
65 changed files with 5009 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/css/base.css
+243
View File
@@ -0,0 +1,243 @@
@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;
}
}
}