jameshtwose/dm-pal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

working through the plan + UI/ UX

Browse Source
This commit is contained in:
itsamejms
2026-07-12 22:13:43 +01:00
parent 5b256242be
commit a24f3615e0
38 changed files with 5295 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+57 -53
View File
@@ -1,3 +1,8 @@
/* ponytail: Google Fonts CSS2 import — single request, all families/weights.
TODO: download woff2 to public/fonts/ and switch to @font-face for true
offline-first. Until then, this needs network on first run. */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700&display=swap");
@import "tailwindcss";
/* ─── Design Tokens ─────────────────────────────────────────── */
@@ -18,10 +23,10 @@
--color-gold-muted: #a8872a;
--color-gold-glow: rgba(212, 175, 55, 0.25);
/* Text */
/* Text — #7080a0 hits ~5.0:1 against --color-bg-deep (WCAG AA). */
--color-text-primary: #e8e0d0;
--color-text-secondary: #8b9bb4;
--color-text-dim: #4a5568;
--color-text-dim: #7080a0;
/* Semantic */
--color-danger: #ef4444;
@@ -35,57 +40,9 @@
}
/* ─── Self-Hosted Fonts ─────────────────────────────────────── */
/* TODO: download woff2 files to public/fonts/ for offline-first */
/* For now, load from Google Fonts during development */
@font-face {
font-family: "Cinzel";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("https://fonts.gstatic.com/s/cinzel/v25/8vIJ7ww63mViL4j6N6R2lQ.woff2") format("woff2");
}
@font-face {
font-family: "Cinzel";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("https://fonts.gstatic.com/s/cinzel/v25/8vIK7ww63mVnVhR0LQRJNg.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrY.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("https://fonts.gstatic.com/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrY.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("https://fonts.gstatic.com/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrY.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/jetbrainsmono/v21/tDbY2o-flEEny0FZhsfKx5Q.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("https://fonts.gstatic.com/s/jetbrainsmono/v21/tDbY2o-flEEny0FZhsfKx5Q.woff2") format("woff2");
}
/* ponytail: Google Fonts are loaded at the top of this file (must precede
Tailwind per CSS spec). TODO: download woff2 to public/fonts/ and switch
to @font-face for true offline-first. */
/* ─── Base Styles ───────────────────────────────────────────── */
@@ -181,6 +138,36 @@ body,
outline-offset: 2px;
}
/* ponytail: custom tooltip on any [data-tooltip] element. The label sits to
the right of icon-only nav buttons, hidden until hover or keyboard focus. */
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
background: var(--color-bg-deep);
color: var(--color-text-primary);
font-size: 11px;
font-weight: 500;
white-space: nowrap;
padding: 4px 8px;
border: 1px solid var(--color-gold-muted);
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease 0.2s;
z-index: 50;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
opacity: 1;
}
/* ─── Animations ──────────────────────────────────────────────── */
@keyframes slideIn {
@@ -197,4 +184,21 @@ body,
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ponytail: respect users who ask for less motion. framer-motion honors this
via its useReducedMotion hook, but the inline keyframes/glass-card transitions
still need this CSS guard. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
[data-tooltip]::after {
transition: none;
}
}