anagram-finder/web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add bordeaux as secondary color

Browse source
This commit is contained in:
myrmidex 2026-08-23 15:02:34 +02:00
parent a365d85764
commit 128649c73b
2 changed files with 57 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
resources/css/app.css
View file

@ -8,6 +8,13 @@
@custom-variant dark (&:where(.dark, .dark *)); @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-face {
font-family: '7Segment'; font-family: '7Segment';
/* Relative so Vite resolves and fingerprints it; an absolute /fonts path /* Relative so Vite resolves and fingerprints it; an absolute /fonts path
@ -22,21 +29,51 @@ .font-digital {
} }
.glow-red { .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; transition: box-shadow 300ms ease;
} }
.glow-red:hover { .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 { .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-red {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--color-red-500) transparent; scrollbar-color: var(--color-bordeaux) transparent;
} }
.scrollbar-red::-webkit-scrollbar { .scrollbar-red::-webkit-scrollbar {
@ -48,12 +85,12 @@ .scrollbar-red::-webkit-scrollbar-track {
} }
.scrollbar-red::-webkit-scrollbar-thumb { .scrollbar-red::-webkit-scrollbar-thumb {
background: var(--color-red-500); background: var(--color-bordeaux);
border: 2px solid #000; border: 2px solid #000;
} }
.scrollbar-red::-webkit-scrollbar-thumb:hover { .scrollbar-red::-webkit-scrollbar-thumb:hover {
background: var(--color-red-400); background: var(--color-red-900);
} }
@theme { @theme {

26
resources/views/index.blade.php
View file

@ -15,14 +15,14 @@
</head> </head>
<body class="bg-black antialiased min-h-screen flex flex-col items-center p-6 lg:p-8"> <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"> <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">
&gt; Anagram Finder &gt; Anagram Finder
</h1> </h1>
<form method="POST" action="{{ route('find') }}" class="space-y-4 mb-8"> <form method="POST" action="{{ route('find') }}" class="space-y-4 mb-8">
@csrf @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">
&gt; Letters &gt; Letters
</label> </label>
<input <input
@ -37,10 +37,10 @@
spellcheck="false" spellcheck="false"
autofocus autofocus
required 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') @error('anagram')
<p class="text-red-400 font-mono text-xs">{{ $message }}</p> <p class="text-primary font-mono text-xs">{{ $message }}</p>
@enderror @enderror
<div class="flex gap-3"> <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" type="submit"
id="submit-btn" id="submit-btn"
@class([ @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-2/3' => isset($matches),
'w-full' => ! 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) @isset($matches)
<a <a
href="{{ route('home') }}" 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] [CLEAR]
</a> </a>
@ -68,22 +68,24 @@ class="w-1/3 inline-flex items-center justify-center bg-black hover:bg-red-950 t
</form> </form>
@isset($matches) @isset($matches)
<section class="border-red-500 rounded-none border-2 glow-red"> <hr class="border-0 border-t-2 border-bordeaux glow-bordeaux-line mb-8">
<h2 class="text-red-400 font-mono text-xs uppercase tracking-wider border-red-500 border-b-2 px-4 py-2">
<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">
&gt; {{ count($matches) }} {{ Str::plural('match', count($matches)) }} &gt; {{ count($matches) }} {{ Str::plural('match', count($matches)) }}
</h2> </h2>
@if (count($matches)) @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) @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>{{ $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> </li>
@endforeach @endforeach
</ul> </ul>
@else @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. No words found.
</p> </p>
@endif @endif