Add bordeaux as secondary color
This commit is contained in:
parent
a365d85764
commit
128649c73b
2 changed files with 57 additions and 18 deletions
|
|
@ -8,6 +8,13 @@
|
|||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
/* lvl0 palette. Primary is the house red shared with incr and buckets;
|
||||
bordeaux is the secondary, used for dividers and recessed chrome. */
|
||||
--color-primary: oklch(63.7% 0.237 25.331);
|
||||
--color-bordeaux: oklch(25.8% 0.092 26.042);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: '7Segment';
|
||||
/* Relative so Vite resolves and fingerprints it; an absolute /fonts path
|
||||
|
|
@ -22,21 +29,51 @@ .font-digital {
|
|||
}
|
||||
|
||||
.glow-red {
|
||||
box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
|
||||
box-shadow: 0 0 20px color-mix(in oklab, var(--color-primary) 40%, transparent);
|
||||
transition: box-shadow 300ms ease;
|
||||
}
|
||||
|
||||
.glow-red:hover {
|
||||
box-shadow: 0 0 25px rgba(239, 68, 68, 0.6);
|
||||
box-shadow: 0 0 25px color-mix(in oklab, var(--color-primary) 60%, transparent);
|
||||
}
|
||||
|
||||
.glow-red:focus,
|
||||
.glow-red:focus-within {
|
||||
box-shadow: 0 0 28px color-mix(in oklab, var(--color-primary) 70%, transparent);
|
||||
}
|
||||
|
||||
.glow-red-text {
|
||||
text-shadow: 0 0 12px rgba(239, 68, 68, 0.7), 0 0 30px rgba(239, 68, 68, 0.4);
|
||||
text-shadow:
|
||||
0 0 12px color-mix(in oklab, var(--color-primary) 70%, transparent),
|
||||
0 0 30px color-mix(in oklab, var(--color-primary) 40%, transparent);
|
||||
}
|
||||
|
||||
/* Bordeaux itself is too dark to bloom against black, so the halo is emitted in
|
||||
primary red at low alpha — dim element, brighter glow, as CRT phosphor behaves. */
|
||||
.glow-bordeaux {
|
||||
box-shadow: 0 0 14px color-mix(in oklab, var(--color-primary) 35%, transparent);
|
||||
transition: box-shadow 300ms ease;
|
||||
}
|
||||
|
||||
.glow-bordeaux:hover {
|
||||
box-shadow: 0 0 18px color-mix(in oklab, var(--color-primary) 50%, transparent);
|
||||
}
|
||||
|
||||
.glow-bordeaux:focus,
|
||||
.glow-bordeaux:focus-within {
|
||||
box-shadow: 0 0 26px color-mix(in oklab, var(--color-primary) 65%, transparent);
|
||||
}
|
||||
|
||||
/* Same bloom for a 1-2px rule, where a spread-based shadow has no box to hug. */
|
||||
.glow-bordeaux-line {
|
||||
box-shadow:
|
||||
0 0 6px color-mix(in oklab, var(--color-primary) 45%, transparent),
|
||||
0 0 14px color-mix(in oklab, var(--color-primary) 25%, transparent);
|
||||
}
|
||||
|
||||
.scrollbar-red {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-red-500) transparent;
|
||||
scrollbar-color: var(--color-bordeaux) transparent;
|
||||
}
|
||||
|
||||
.scrollbar-red::-webkit-scrollbar {
|
||||
|
|
@ -48,12 +85,12 @@ .scrollbar-red::-webkit-scrollbar-track {
|
|||
}
|
||||
|
||||
.scrollbar-red::-webkit-scrollbar-thumb {
|
||||
background: var(--color-red-500);
|
||||
background: var(--color-bordeaux);
|
||||
border: 2px solid #000;
|
||||
}
|
||||
|
||||
.scrollbar-red::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-red-400);
|
||||
background: var(--color-red-900);
|
||||
}
|
||||
|
||||
@theme {
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@
|
|||
</head>
|
||||
<body class="bg-black antialiased min-h-screen flex flex-col items-center p-6 lg:p-8">
|
||||
<main class="w-full max-w-2xl">
|
||||
<h1 class="text-red-500 font-mono text-5xl font-bold uppercase tracking-widest glow-red-text mb-8">
|
||||
<h1 class="text-primary font-mono text-5xl font-bold uppercase tracking-widest glow-red-text mb-8">
|
||||
> Anagram Finder
|
||||
</h1>
|
||||
|
||||
<form method="POST" action="{{ route('find') }}" class="space-y-4 mb-8">
|
||||
@csrf
|
||||
|
||||
<label for="anagram" class="block text-red-400 font-mono text-xs uppercase tracking-wider">
|
||||
<label for="anagram" class="block text-primary font-mono text-xs uppercase tracking-wider">
|
||||
> Letters
|
||||
</label>
|
||||
<input
|
||||
|
|
@ -37,10 +37,10 @@
|
|||
spellcheck="false"
|
||||
autofocus
|
||||
required
|
||||
class="w-full bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-3xl tracking-wider uppercase rounded-none border-2 focus:ring-0 focus:outline-none placeholder:text-red-400/40 placeholder:normal-case transition-all glow-red px-4 py-3"
|
||||
class="w-full bg-black border-bordeaux text-primary focus:border-primary font-mono text-3xl tracking-wider uppercase rounded-none border-2 focus:ring-0 focus:outline-none placeholder:text-primary/30 placeholder:normal-case transition-all glow-bordeaux px-4 py-3"
|
||||
>
|
||||
@error('anagram')
|
||||
<p class="text-red-400 font-mono text-xs">{{ $message }}</p>
|
||||
<p class="text-primary font-mono text-xs">{{ $message }}</p>
|
||||
@enderror
|
||||
|
||||
<div class="flex gap-3">
|
||||
|
|
@ -48,7 +48,7 @@ class="w-full bg-black border-red-500 text-red-400 focus:border-red-300 font-mon
|
|||
type="submit"
|
||||
id="submit-btn"
|
||||
@class([
|
||||
'bg-black hover:bg-red-500 text-red-400 hover:text-black font-mono text-sm font-bold border-red-500 rounded-none border-2 uppercase tracking-wider transition-all glow-red cursor-pointer px-4 py-2 disabled:cursor-not-allowed disabled:bg-black disabled:text-red-400/30 disabled:border-red-500/30 disabled:shadow-none',
|
||||
'bg-black hover:bg-primary text-primary hover:text-black font-mono text-sm font-bold border-primary rounded-none border-2 uppercase tracking-wider transition-all glow-bordeaux cursor-pointer px-4 py-2 disabled:cursor-not-allowed disabled:bg-black disabled:text-primary/30 disabled:border-primary/30 disabled:shadow-none',
|
||||
'w-2/3' => isset($matches),
|
||||
'w-full' => ! isset($matches),
|
||||
])
|
||||
|
|
@ -59,7 +59,7 @@ class="w-full bg-black border-red-500 text-red-400 focus:border-red-300 font-mon
|
|||
@isset($matches)
|
||||
<a
|
||||
href="{{ route('home') }}"
|
||||
class="w-1/3 inline-flex items-center justify-center bg-black hover:bg-red-950 text-red-400/60 hover:text-red-400 font-mono text-sm font-bold border-red-500/40 hover:border-red-500 rounded-none border-2 uppercase tracking-wider transition-all px-4 py-2"
|
||||
class="w-1/3 inline-flex items-center justify-center bg-black hover:bg-bordeaux text-primary/60 hover:text-primary font-mono text-sm font-bold border-bordeaux hover:border-primary rounded-none border-2 glow-bordeaux uppercase tracking-wider transition-all px-4 py-2"
|
||||
>
|
||||
[CLEAR]
|
||||
</a>
|
||||
|
|
@ -68,22 +68,24 @@ class="w-1/3 inline-flex items-center justify-center bg-black hover:bg-red-950 t
|
|||
</form>
|
||||
|
||||
@isset($matches)
|
||||
<section class="border-red-500 rounded-none border-2 glow-red">
|
||||
<h2 class="text-red-400 font-mono text-xs uppercase tracking-wider border-red-500 border-b-2 px-4 py-2">
|
||||
<hr class="border-0 border-t-2 border-bordeaux glow-bordeaux-line mb-8">
|
||||
|
||||
<section class="border-bordeaux rounded-none border-2 glow-bordeaux">
|
||||
<h2 class="text-primary font-mono text-xs uppercase tracking-wider border-bordeaux border-b-2 glow-bordeaux-line px-4 py-2">
|
||||
> {{ count($matches) }} {{ Str::plural('match', count($matches)) }}
|
||||
</h2>
|
||||
|
||||
@if (count($matches))
|
||||
<ul class="divide-red-500/30 divide-y font-mono text-[1.3125rem] max-h-96 overflow-y-auto scrollbar-red">
|
||||
<ul class="divide-bordeaux divide-y font-mono text-[1.3125rem] max-h-96 overflow-y-auto scrollbar-red">
|
||||
@foreach ($matches as $match)
|
||||
<li class="flex items-baseline justify-between px-4 py-1.5 text-red-400 hover:bg-red-950">
|
||||
<li class="flex items-baseline justify-between px-4 py-1.5 text-primary hover:bg-bordeaux">
|
||||
<span>{{ $match }}</span>
|
||||
<span class="font-digital text-red-500/70 text-2xl">{{ strlen($match) }}</span>
|
||||
<span class="font-digital text-primary text-2xl">{{ strlen($match) }}</span>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@else
|
||||
<p class="text-red-400/60 font-mono text-xs px-4 py-3">
|
||||
<p class="text-primary/60 font-mono text-xs px-4 py-3">
|
||||
No words found.
|
||||
</p>
|
||||
@endif
|
||||
|
|
|
|||
Loading…
Reference in a new issue