From 62c80062950157509c05656c383a3b307cc16e2c Mon Sep 17 00:00:00 2001 From: Sir Blob Date: Mon, 1 Dec 2025 06:55:28 +0000 Subject: [PATCH] Styles and About Page Fixes --- package.json | 6 +- src/lib/assets/css/tui-body.css | 41 +++++++++---- src/lib/components/tui/TuiBody.svelte | 2 +- src/lib/components/tui/TuiCard.svelte | 84 +++++++++++++++++++++----- src/lib/components/tui/TuiGroup.svelte | 5 +- src/lib/pages/about.ts | 33 ++++++---- src/routes/+error.svelte | 2 +- src/routes/about/+page.server.ts | 34 +++++++---- src/routes/about/+page.svelte | 31 ++++++---- 9 files changed, 167 insertions(+), 71 deletions(-) diff --git a/package.json b/package.json index 53a5e35..4ed0474 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "svelte-check": "^4.3.4", "tailwindcss": "^4.1.17", "typescript": "^5.9.3", - "vite": "^7.2.4" + "vite": "^7.2.6" }, "dependencies": { "@iconify/svelte": "^5.1.0", @@ -31,7 +31,7 @@ "dotenv": "^17.2.3", "express": "^5.1.0", "hotkeys-js": "^4.0.0-beta.7", - "three": "^0.181.2", - "ytpl": "^2.3.0" + "play-dl": "^1.9.7", + "three": "^0.181.2" } } diff --git a/src/lib/assets/css/tui-body.css b/src/lib/assets/css/tui-body.css index 55f8508..022029a 100644 --- a/src/lib/assets/css/tui-body.css +++ b/src/lib/assets/css/tui-body.css @@ -65,7 +65,7 @@ } .tui-line.blank { - min-height: 0.5em; + min-height: 0.15em; } @keyframes lineSlideIn { @@ -73,6 +73,7 @@ opacity: 0; transform: translateX(-5px); } + to { opacity: 1; transform: translateX(0); @@ -173,12 +174,10 @@ .divider-line { flex: 1; height: 1px; - background: linear-gradient( - to right, - transparent, - var(--terminal-border), - transparent - ); + background: linear-gradient(to right, + transparent, + var(--terminal-border), + transparent); } .divider-text { @@ -223,15 +222,26 @@ width: 0.5em; height: 1.1em; background: var(--terminal-primary); - animation: cursorBlink 1s step-end infinite; + background: var(--terminal-primary); margin-left: 2px; vertical-align: baseline; transform: translateY(0.15em); } +.cursor.blink { + animation: cursorBlink 1s step-end infinite; +} + @keyframes cursorBlink { - 0%, 100% { opacity: 1; } - 50% { opacity: 0; } + + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0; + } } /* Scrollbar */ @@ -265,6 +275,15 @@ flex-direction: column; } + /* Keep inline flow for specific containers */ + .tui-card .tui-inline-group, + .tui-group .tui-inline-group, + .tui-accordion .tui-inline-group { + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + } + .tui-inline-group .inline-image img { max-width: 100% !important; width: 100%; @@ -280,4 +299,4 @@ max-width: 100% !important; width: 100%; } -} +} \ No newline at end of file diff --git a/src/lib/components/tui/TuiBody.svelte b/src/lib/components/tui/TuiBody.svelte index 50e79a7..0ce662f 100644 --- a/src/lib/components/tui/TuiBody.svelte +++ b/src/lib/components/tui/TuiBody.svelte @@ -137,7 +137,7 @@ class="symbol">$ - + {/if} diff --git a/src/lib/components/tui/TuiCard.svelte b/src/lib/components/tui/TuiCard.svelte index a56294b..200f4e5 100644 --- a/src/lib/components/tui/TuiCard.svelte +++ b/src/lib/components/tui/TuiCard.svelte @@ -6,7 +6,7 @@ getSegmentStyle, parseDimension, } from "./utils"; - import type { CardLine } from "./types"; + import type { CardLine, TerminalLine } from "./types"; import TuiLine from "./TuiLine.svelte"; import "$lib/assets/css/tui-card.css"; @@ -46,6 +46,43 @@ .filter(Boolean) .join("; "), ); + const processedChildren = $derived.by(() => { + if (!line.children) return []; + const groups: Array< + | { kind: "single"; index: number; line: TerminalLine } + | { + kind: "inline"; + items: Array<{ index: number; line: TerminalLine }>; + } + > = []; + let i = 0; + + while (i < line.children.length) { + const child = line.children[i]; + const isInline = child.inline || child.display === "inline"; + + if (isInline) { + const inlineItems: Array<{ + index: number; + line: TerminalLine; + }> = []; + while (i < line.children.length) { + const nextChild = line.children[i]; + const nextIsInline = + nextChild.inline || nextChild.display === "inline"; + if (!nextIsInline) break; + + inlineItems.push({ index: i, line: nextChild }); + i++; + } + groups.push({ kind: "inline", items: inlineItems }); + } else { + groups.push({ kind: "single", index: i, line: child }); + i++; + } + } + return groups; + });
@@ -91,19 +128,38 @@ class:flex={line.display === "flex"} class:grid={line.display === "grid"} > - {#each line.children as child, i} - + {#each processedChildren as group} + {#if group.kind === "inline"} +
+ {#each group.items as item} + + {/each} +
+ {:else} + + {/if} {/each}
{/if} diff --git a/src/lib/components/tui/TuiGroup.svelte b/src/lib/components/tui/TuiGroup.svelte index d473f50..51a3937 100644 --- a/src/lib/components/tui/TuiGroup.svelte +++ b/src/lib/components/tui/TuiGroup.svelte @@ -120,10 +120,7 @@ } @media (max-width: 768px) { - .tui-group.inline { - flex-direction: column; - align-items: stretch; - } + /* .tui-group.inline removed to allow inline flow on mobile */ .tui-group.grid { grid-template-columns: 1fr; diff --git a/src/lib/pages/about.ts b/src/lib/pages/about.ts index 76b3296..83ced34 100644 --- a/src/lib/pages/about.ts +++ b/src/lib/pages/about.ts @@ -39,8 +39,7 @@ export const lines: TerminalLine[] = [ { type: 'command', content: 'cat ~/about.md' }, { type: 'blank', content: '' }, - { type: 'image', content: '', image: user.avatar, imageAlt: user.name, imageWidth: 180, inline: true }, - + { type: 'image', content: '', image: user.avatar, imageAlt: user.name, imageWidth: 200, inline: true }, { type: 'group', content: '', @@ -48,6 +47,7 @@ export const lines: TerminalLine[] = [ groupAlign: 'start', inline: true, children: [ + { type: 'blank', content: '' }, { type: 'header', content: `(&bold)${user.name}(&)` }, { type: 'info', content: `(&accent)${user.title}(&)` }, { type: 'output', content: `(&white)Location:(&) (&primary)${user.location}(&)` }, @@ -57,18 +57,25 @@ export const lines: TerminalLine[] = [ { type: 'blank', content: '' }, { type: 'divider', content: 'Music Recommendations' }, - { type: 'output', content: '(&accent)Artist:(&) ', inline: true }, - ...artist.flatMap((a, i): TerminalLine[] => { - const item: TerminalLine = { type: 'link', content: `(&white)${a.name}(&)`, href: a.url, inline: true }; - return i < artist.length - 1 ? [item, { type: 'output', content: ' (&muted)•(&) ', inline: true }] : [item]; - }), - { type: 'blank', content: '' }, + { + type: 'group', + content: '', + groupDirection: 'row', + children: [ + { type: 'output', content: '(&accent)Artist:(&) ', inline: true }, + ...artist.flatMap((a, i): TerminalLine[] => { + const item: TerminalLine = { type: 'link', content: `(&white)${a.name}(&)`, href: a.url, inline: true }; + return i < artist.length - 1 ? [item, { type: 'output', content: ' (&muted)•(&) ', inline: true }] : [item]; + }), + ] + }, - { type: 'output', content: '(&accent)Songs:(&) ', inline: true }, - ...songs.flatMap((s, i): TerminalLine[] => { - const item: TerminalLine = { type: 'link', content: `(&white)${s.name}(&)`, href: s.url, inline: true }; - return i < songs.length - 1 ? [item, { type: 'output', content: ' (&muted)•(&) ', inline: true }] : [item]; - }), + // { type: 'blank', content: '' }, + // { type: 'output', content: '(&accent)Songs:(&) ', inline: true }, + // ...songs.flatMap((s, i): TerminalLine[] => { + // const item: TerminalLine = { type: 'link', content: `(&white)${s.name}(&)`, href: s.url, inline: true }; + // return i < songs.length - 1 ? [item, { type: 'output', content: ' (&muted)•(&) ', inline: true }] : [item]; + // }), { type: 'blank', content: '' }, { type: 'card', diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte index 351cb29..90543af 100644 --- a/src/routes/+error.svelte +++ b/src/routes/+error.svelte @@ -141,7 +141,7 @@
- +