SirBlob/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styles and About Page Fixes

Browse Source
This commit is contained in:
SirBlob
2025-12-01 06:55:28 +00:00
parent e0bcba74d5
commit 62c8006295
9 changed files with 167 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/assets/css/tui-body.css
+30 -11
View File
@@ -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%;
}
}
}
src/lib/components/tui/TuiBody.svelte
+1 -1
View File
@@ -137,7 +137,7 @@
class="symbol">$</span
>
</span>
<span class="cursor"></span>
<span class="cursor blink"></span>
</div>
{/if}
</div>
src/lib/components/tui/TuiCard.svelte
+70 -14
View File
@@ -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;
});
</script>
<div class="tui-card" class:inline style={cardStyle}>
@@ -91,19 +128,38 @@
class:flex={line.display === "flex"}
class:grid={line.display === "grid"}
>
{#each line.children as child, i}
<TuiLine
line={child}
index={i}
segments={parseColorText(child.content)}
complete={true}
showImage={true}
selectedIndex={-1}
inline={false}
{onButtonClick}
{onHoverButton}
{onLinkClick}
/>
{#each processedChildren as group}
{#if group.kind === "inline"}
<div class="tui-inline-group">
{#each group.items as item}
<TuiLine
line={item.line}
index={item.index}
segments={parseColorText(item.line.content)}
complete={true}
showImage={true}
selectedIndex={-1}
inline={true}
{onButtonClick}
{onHoverButton}
{onLinkClick}
/>
{/each}
</div>
{:else}
<TuiLine
line={group.line}
index={group.index}
segments={parseColorText(group.line.content)}
complete={true}
showImage={true}
selectedIndex={-1}
inline={false}
{onButtonClick}
{onHoverButton}
{onLinkClick}
/>
{/if}
{/each}
</div>
{/if}
src/lib/components/tui/TuiGroup.svelte
+1 -4
View File
@@ -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;
src/lib/pages/about.ts
+20 -13
View File
@@ -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',