website created
This commit is contained in:
Priec
266
static/css/site.css
Normal file
266
static/css/site.css
Normal file
@@ -0,0 +1,266 @@
|
||||
/* ==========================================================================
|
||||
tui-pages website — custom layer on top of Tailwind + DaisyUI
|
||||
Loaded AFTER Tailwind Play CDN compiles and DaisyUI prebuilt.
|
||||
Keep this small. Tailwind utility classes do the heavy lifting.
|
||||
========================================================================== */
|
||||
|
||||
/* ---------- Smooth scroll, native feel ----------------------------------- */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.001ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.001ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Theme (default to dark) -------------------------------------- */
|
||||
:root {
|
||||
color-scheme: dark light;
|
||||
--tp-accent: #b7410e;
|
||||
--tp-accent-fg: #fff5f0;
|
||||
--tp-grid-line: rgba(63, 63, 70, 0.35);
|
||||
--tp-hero-from: #0b0b0f;
|
||||
--tp-hero-to: #18181b;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--tp-accent: #93330c;
|
||||
--tp-accent-fg: #fff5f0;
|
||||
--tp-grid-line: rgba(228, 228, 231, 0.7);
|
||||
--tp-hero-from: #fafafa;
|
||||
--tp-hero-to: #f4f4f5;
|
||||
}
|
||||
|
||||
/* ---------- Body --------------------------------------------------------- */
|
||||
body {
|
||||
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
font-feature-settings: 'cv11', 'ss01', 'ss03';
|
||||
}
|
||||
|
||||
/* ---------- View Transitions (progressive enhancement) ------------------ */
|
||||
@supports (view-transition-name: foo) {
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation-duration: 220ms;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Hero --------------------------------------------------------- */
|
||||
.tp-hero {
|
||||
background:
|
||||
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(183, 65, 14, 0.15), transparent 70%),
|
||||
linear-gradient(180deg, var(--tp-hero-from) 0%, var(--tp-hero-to) 100%);
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.tp-hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(var(--tp-grid-line) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--tp-grid-line) 1px, transparent 1px);
|
||||
background-size: 56px 56px;
|
||||
background-position: -1px -1px;
|
||||
-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 30%, transparent 80%);
|
||||
mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 30%, transparent 80%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Subtle floating code lines in the hero, behind the content */
|
||||
.tp-hero-glow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
opacity: 0.6;
|
||||
background:
|
||||
radial-gradient(circle at 15% 30%, rgba(183, 65, 14, 0.08), transparent 35%),
|
||||
radial-gradient(circle at 85% 70%, rgba(126, 231, 135, 0.05), transparent 35%);
|
||||
}
|
||||
|
||||
/* ---------- Cursor caret animation --------------------------------------- */
|
||||
@keyframes tp-blink {
|
||||
0%, 49% { opacity: 1; }
|
||||
50%, 100% { opacity: 0; }
|
||||
}
|
||||
.tp-cursor {
|
||||
display: inline-block;
|
||||
width: 0.55em;
|
||||
height: 1em;
|
||||
background: var(--tp-accent);
|
||||
margin-left: 0.15em;
|
||||
vertical-align: -0.12em;
|
||||
animation: tp-blink 1.1s steps(1) infinite;
|
||||
}
|
||||
|
||||
/* ---------- Soft float for the hero terminal ----------------------------- */
|
||||
@keyframes tp-float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-6px); }
|
||||
}
|
||||
.tp-float {
|
||||
animation: tp-float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ---------- Glass nav ---------------------------------------------------- */
|
||||
.tp-nav {
|
||||
background: rgba(9, 9, 11, 0.65);
|
||||
backdrop-filter: saturate(160%) blur(12px);
|
||||
-webkit-backdrop-filter: saturate(160%) blur(12px);
|
||||
border-bottom: 1px solid rgba(63, 63, 70, 0.4);
|
||||
}
|
||||
:root[data-theme="light"] .tp-nav {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-bottom-color: rgba(228, 228, 231, 0.7);
|
||||
}
|
||||
|
||||
/* ---------- Feature cards ------------------------------------------------ */
|
||||
.tp-card {
|
||||
position: relative;
|
||||
background: rgba(24, 24, 27, 0.5);
|
||||
border: 1px solid rgba(63, 63, 70, 0.5);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
|
||||
}
|
||||
.tp-card:hover {
|
||||
border-color: rgba(183, 65, 14, 0.6);
|
||||
background: rgba(24, 24, 27, 0.75);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
:root[data-theme="light"] .tp-card {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-color: rgba(228, 228, 231, 0.8);
|
||||
}
|
||||
:root[data-theme="light"] .tp-card:hover {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-color: rgba(183, 65, 14, 0.4);
|
||||
}
|
||||
|
||||
.tp-card-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.75rem;
|
||||
background: rgba(183, 65, 14, 0.12);
|
||||
color: var(--tp-accent);
|
||||
border: 1px solid rgba(183, 65, 14, 0.25);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* ---------- Code blocks (kitchen sink — hljs + custom) ------------------ */
|
||||
.tp-code {
|
||||
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
tab-size: 4;
|
||||
}
|
||||
.tp-code pre {
|
||||
background: #0b0b0f;
|
||||
border: 1px solid rgba(63, 63, 70, 0.5);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
overflow-x: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.tp-code pre code.hljs {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ---------- Inline kbd --------------------------------------------------- */
|
||||
.tp-kbd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.15rem 0.5rem;
|
||||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid rgba(63, 63, 70, 0.7);
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 0.375rem;
|
||||
background: rgba(39, 39, 42, 0.6);
|
||||
color: #f4f4f5;
|
||||
line-height: 1;
|
||||
}
|
||||
:root[data-theme="light"] .tp-kbd {
|
||||
background: #fff;
|
||||
color: #18181b;
|
||||
border-color: #d4d4d8;
|
||||
}
|
||||
|
||||
/* ---------- Terminal window wrapper -------------------------------------- */
|
||||
.tp-terminal {
|
||||
position: relative;
|
||||
border-radius: 0.875rem;
|
||||
background: #0b0b0f;
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.04) inset,
|
||||
0 30px 60px -20px rgba(0, 0, 0, 0.6),
|
||||
0 18px 36px -18px rgba(0, 0, 0, 0.5);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(63, 63, 70, 0.4);
|
||||
}
|
||||
.tp-terminal::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
/* ---------- Selection --------------------------------------------------- */
|
||||
::selection {
|
||||
background: var(--tp-accent);
|
||||
color: var(--tp-accent-fg);
|
||||
}
|
||||
|
||||
/* ---------- Focus ring -------------------------------------------------- */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--tp-accent);
|
||||
outline-offset: 2px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* ---------- Scrollbar (subtle) ----------------------------------------- */
|
||||
::-webkit-scrollbar { width: 10px; height: 10px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(63, 63, 70, 0.6);
|
||||
border-radius: 999px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover { background-color: rgba(82, 82, 91, 0.8); background-clip: padding-box; }
|
||||
|
||||
/* ---------- No-FOUC theme flash ----------------------------------------- */
|
||||
html:not([data-theme]) body { background: #09090b; }
|
||||
:root[data-theme="light"] body { background: #fafafa; }
|
||||
|
||||
/* ---------- Alpine x-cloak (prevents flash of un-initialised content) --- */
|
||||
[x-cloak] { display: none !important; }
|
||||
|
||||
/* ---------- DaisyUI overrides for our theme ----------------------------- */
|
||||
/* Bring DaisyUI's primary to our accent so .btn-primary etc. look on-brand. */
|
||||
[data-theme="night"] {
|
||||
--p: 28 70% 36%;
|
||||
--pc: 0 0% 100%;
|
||||
--b1: 240 5% 8%;
|
||||
--b2: 240 4% 12%;
|
||||
--b3: 240 4% 16%;
|
||||
--bc: 0 0% 96%;
|
||||
}
|
||||
Reference in New Issue
Block a user