diff --git a/arch.ascii b/arch.ascii new file mode 100644 index 0000000..741f09c --- /dev/null +++ b/arch.ascii @@ -0,0 +1,20 @@ +{"match": "\"Arch\"*", "color": "6 6 7 1"} +${c1} -` + .o+` + `ooo/ + `+oooo: + `+oooooo: + -+oooooo+: + `/:-:++oooo+: + `/++++/+++++++: + `/++++++++++++++: + `/+++o${c2}oooooooo${c1}oooo/` +${c2} ${c1}./${c2}ooosssso++osssssso${c1}+` +${c2} .oossssso-````/ossssss+` + -osssssso. :ssssssso. + :osssssss/ osssso+++. + /ossssssss/ +ssssooo/- + `/ossssso+/:- -:/+osssso+- + `+sso+:-` `.-/+oso: + `++:. `-/+/ + .` `/ \ No newline at end of file diff --git a/assets/88x31/antifa.gif b/assets/88x31/antifa.gif new file mode 100644 index 0000000..0809cab Binary files /dev/null and b/assets/88x31/antifa.gif differ diff --git a/assets/88x31/blink.gif b/assets/88x31/blink.gif new file mode 100644 index 0000000..2acde1c Binary files /dev/null and b/assets/88x31/blink.gif differ diff --git a/assets/88x31/estrogen.gif b/assets/88x31/estrogen.gif new file mode 100644 index 0000000..4c965dd Binary files /dev/null and b/assets/88x31/estrogen.gif differ diff --git a/assets/88x31/firefox.gif b/assets/88x31/firefox.gif new file mode 100644 index 0000000..94621d5 Binary files /dev/null and b/assets/88x31/firefox.gif differ diff --git a/assets/88x31/girlsnow.png b/assets/88x31/girlsnow.png new file mode 100644 index 0000000..9695de3 Binary files /dev/null and b/assets/88x31/girlsnow.png differ diff --git a/assets/88x31/gitgay.png b/assets/88x31/gitgay.png new file mode 100644 index 0000000..9ce0c85 Binary files /dev/null and b/assets/88x31/gitgay.png differ diff --git a/assets/88x31/killmenow.gif b/assets/88x31/killmenow.gif new file mode 100644 index 0000000..0dbe965 Binary files /dev/null and b/assets/88x31/killmenow.gif differ diff --git a/assets/88x31/linux.gif b/assets/88x31/linux.gif new file mode 100644 index 0000000..89e3562 Binary files /dev/null and b/assets/88x31/linux.gif differ diff --git a/assets/88x31/meltice.gif b/assets/88x31/meltice.gif new file mode 100644 index 0000000..7e6df98 Binary files /dev/null and b/assets/88x31/meltice.gif differ diff --git a/assets/88x31/microslop.gif b/assets/88x31/microslop.gif new file mode 100644 index 0000000..61936c7 Binary files /dev/null and b/assets/88x31/microslop.gif differ diff --git a/assets/88x31/nft.gif b/assets/88x31/nft.gif new file mode 100644 index 0000000..12f48ab Binary files /dev/null and b/assets/88x31/nft.gif differ diff --git a/assets/88x31/noweb32.gif b/assets/88x31/noweb32.gif new file mode 100644 index 0000000..9485709 Binary files /dev/null and b/assets/88x31/noweb32.gif differ diff --git a/assets/88x31/palestine.gif b/assets/88x31/palestine.gif new file mode 100644 index 0000000..e58600b Binary files /dev/null and b/assets/88x31/palestine.gif differ diff --git a/assets/88x31/skirt.gif b/assets/88x31/skirt.gif new file mode 100644 index 0000000..e2833dc Binary files /dev/null and b/assets/88x31/skirt.gif differ diff --git a/assets/88x31/ukraine.gif b/assets/88x31/ukraine.gif new file mode 100644 index 0000000..501b734 Binary files /dev/null and b/assets/88x31/ukraine.gif differ diff --git a/assets/favicon/avatar.png b/assets/favicon/avatar.png index d0c513a..fa7ac1b 100644 Binary files a/assets/favicon/avatar.png and b/assets/favicon/avatar.png differ diff --git a/assets/friends/ari.png b/assets/friends/ari.png new file mode 100644 index 0000000..61cbc3a Binary files /dev/null and b/assets/friends/ari.png differ diff --git a/assets/friends/camilla.png b/assets/friends/camilla.png new file mode 100644 index 0000000..d55b799 Binary files /dev/null and b/assets/friends/camilla.png differ diff --git a/assets/friends/fin.png b/assets/friends/fin.png new file mode 100644 index 0000000..b00dccf Binary files /dev/null and b/assets/friends/fin.png differ diff --git a/assets/friends/lilly.png b/assets/friends/lilly.png new file mode 100644 index 0000000..1a38089 Binary files /dev/null and b/assets/friends/lilly.png differ diff --git a/assets/friends/lylla.png b/assets/friends/lylla.png new file mode 100644 index 0000000..afebd93 Binary files /dev/null and b/assets/friends/lylla.png differ diff --git a/assets/friends/meme.png b/assets/friends/meme.png new file mode 100644 index 0000000..754f753 Binary files /dev/null and b/assets/friends/meme.png differ diff --git a/assets/friends/n.png b/assets/friends/n.png new file mode 100644 index 0000000..f6bde78 Binary files /dev/null and b/assets/friends/n.png differ diff --git a/assets/friends/ria.png b/assets/friends/ria.png new file mode 100644 index 0000000..ea06ae8 Binary files /dev/null and b/assets/friends/ria.png differ diff --git a/assets/friends/saphie.png b/assets/friends/saphie.png new file mode 100644 index 0000000..96f734d Binary files /dev/null and b/assets/friends/saphie.png differ diff --git a/assets/friends/simon.png b/assets/friends/simon.png new file mode 100644 index 0000000..12e58b9 Binary files /dev/null and b/assets/friends/simon.png differ diff --git a/assets/misc/meow.mp4 b/assets/misc/meow.mp4 new file mode 100644 index 0000000..0072bc2 Binary files /dev/null and b/assets/misc/meow.mp4 differ diff --git a/assets/socials/github.svg b/assets/socials/github.svg deleted file mode 100644 index ed0408e..0000000 --- a/assets/socials/github.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/cool-people/index.html b/cool-people/index.html new file mode 100644 index 0000000..920920e --- /dev/null +++ b/cool-people/index.html @@ -0,0 +1,177 @@ + + + + + + + Cool People + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +
+
+

Cool People

+

This is where people I know can be put up on my site, click their profiles for their pages

+
+ + +
+

Fiancee

+
+ + + Aria + +
+
+ + +
+

Close Friends

+
+ + + Ria + + + + Lilly + + + + Camilla + + + + Saphie + +
+
+ +
+

Friends

+
+ + + Memeancia + + + + N + + + + Lylla + + + + Simon + +
+
+ +
+

Other Peeps

+

You can request to be added here!

+
+ + +
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/css/main.css b/css/main.css index fe23a0d..eeeb18d 100644 --- a/css/main.css +++ b/css/main.css @@ -10,15 +10,20 @@ 5. Page nav (shared, bottom-left) 6. System badges (shared, bottom-right) 7. Theme switcher (shared, top-right) - 8. Tech-stack page + 8. dev-info page 9. Changelog page 10. Secret cat modes (toast + picker modal) 11. Discord bots page 12. Responsive overrides + 13. Friends Page ============================================================ */ @import url(/css/fonts.css); - +@import url(/css/themes/frappe.css); +@import url(/css/themes/latte.css); +@import url(/css/themes/mocha.css); +@import url(/css/themes/macchiato.css); +@import url(/api/api.css); /* ============================================================ 1. BASE & RESET @@ -234,7 +239,8 @@ body::before { colour is exposed as --np-accent (r, g, b) while .has-accent set. ============================================================ */ .now-playing { - --np-accent: 245, 194, 231; /* fallback ~ Catppuccin pink */ + --np-accent: 245, 194, 231; + /* fallback ~ Catppuccin pink */ position: fixed; top: 1rem; left: 1rem; @@ -293,10 +299,21 @@ body::before { background: var(--overlay-0); } -.now-playing[data-status="online"] .np-status { background: var(--green); } -.now-playing[data-status="idle"] .np-status { background: var(--yellow); } -.now-playing[data-status="dnd"] .np-status { background: var(--red); } -.now-playing[data-status="offline"] .np-status { background: var(--overlay-0); } +.now-playing[data-status="online"] .np-status { + background: var(--green); +} + +.now-playing[data-status="idle"] .np-status { + background: var(--yellow); +} + +.now-playing[data-status="dnd"] .np-status { + background: var(--red); +} + +.now-playing[data-status="offline"] .np-status { + background: var(--overlay-0); +} .np-status-label { font-size: 0.6rem; @@ -347,9 +364,17 @@ body::before { background: rgb(var(--np-accent)); } -.np-bars i:nth-child(2) { animation-delay: 0.15s; } -.np-bars i:nth-child(3) { animation-delay: 0.3s; } -.np-bars i:nth-child(4) { animation-delay: 0.45s; } +.np-bars i:nth-child(2) { + animation-delay: 0.15s; +} + +.np-bars i:nth-child(3) { + animation-delay: 0.3s; +} + +.np-bars i:nth-child(4) { + animation-delay: 0.45s; +} @keyframes np-eq { @@ -404,7 +429,9 @@ body::before { text-overflow: ellipsis; } -.np-track:empty { display: none; } +.np-track:empty { + display: none; +} .np-artist { font-size: 0.72rem; @@ -414,7 +441,9 @@ body::before { text-overflow: ellipsis; } -.np-artist:empty { display: none; } +.np-artist:empty { + display: none; +} /* Spotify progress bar — only shown while a track has timestamps */ .np-progress { @@ -620,25 +649,25 @@ body::before { /* ============================================================ - 8. TECH-STACK PAGE + 8. dev-info PAGE ============================================================ */ -/* Let only the tech-stack page scroll; link hub stays locked */ -html:has(.tech-stack), -body:has(.tech-stack) { +/* Let only the dev-info page scroll; link hub stays locked */ +html:has(.dev-info), +body:has(.dev-info) { height: auto; min-height: 100dvh; overflow-y: auto; } -body:has(.tech-stack) { +body:has(.dev-info) { align-items: flex-start; } -body:has(.tech-stack) .hub { +body:has(.dev-info) .hub { max-width: 860px; } -.tech-stack { +.dev-info { display: flex; flex-wrap: wrap; justify-content: center; @@ -699,19 +728,57 @@ body:has(.tech-stack) .hub { } /* Catppuccin accent classes — pull from the active flavour's vars */ -.tech-icon.rosewater { color: var(--rosewater); } -.tech-icon.pink { color: var(--pink); } -.tech-icon.mauve { color: var(--mauve); } -.tech-icon.red { color: var(--red); } -.tech-icon.maroon { color: var(--maroon); } -.tech-icon.peach { color: var(--peach); } -.tech-icon.yellow { color: var(--yellow); } -.tech-icon.green { color: var(--green); } -.tech-icon.teal { color: var(--teal); } -.tech-icon.sky { color: var(--sky); } -.tech-icon.sapphire { color: var(--saphire); } -.tech-icon.blue { color: var(--blue); } -.tech-icon.lavender { color: var(--lavender); } +.tech-icon.rosewater { + color: var(--rosewater); +} + +.tech-icon.pink { + color: var(--pink); +} + +.tech-icon.mauve { + color: var(--mauve); +} + +.tech-icon.red { + color: var(--red); +} + +.tech-icon.maroon { + color: var(--maroon); +} + +.tech-icon.peach { + color: var(--peach); +} + +.tech-icon.yellow { + color: var(--yellow); +} + +.tech-icon.green { + color: var(--green); +} + +.tech-icon.teal { + color: var(--teal); +} + +.tech-icon.sky { + color: var(--sky); +} + +.tech-icon.sapphire { + color: var(--saphire); +} + +.tech-icon.blue { + color: var(--blue); +} + +.tech-icon.lavender { + color: var(--lavender); +} /* ============================================================ @@ -968,6 +1035,24 @@ body:has(.bot-grid) .hub-header { margin-bottom: 0.25rem; } +/* FIX: bot-grid and friend-grid pages need scrolling — was missing */ +html:has(.bot-grid), +html:has(.friend-grid) { + height: auto; + min-height: 100dvh; + overflow-y: auto; + overflow-x: hidden; +} + +body:has(.bot-grid), +body:has(.friend-grid) { + height: auto; + min-height: 100dvh; + align-items: flex-start; + overflow-x: hidden; + overflow-y: visible; +} + .section { position: relative; z-index: 1; @@ -987,7 +1072,17 @@ body:has(.bot-grid) .hub-header { color: var(--mauve); } +.section-subtitle { + margin: -1.1rem 0 0; + font-size: 1.1rem; + font-weight: 500; + letter-spacing: 0.08em; + text-transform: lowercase; + color: var(--surface-2); +} + .bot-grid { + margin-bottom: 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, 96px); justify-content: center; @@ -1137,8 +1232,10 @@ body:has(.bot-grid) .hub-header { } body, - body:has(.tech-stack), - body:has(.changelog) { + body:has(.dev-info), + body:has(.changelog), + body:has(.bot-grid), + body:has(.friend-grid) { flex-direction: column; justify-content: flex-start; align-items: center; @@ -1162,20 +1259,32 @@ body:has(.bot-grid) .hub-header { width: 100%; } + /* FIX: the presence card injected by now-playing.js replaces #now-playing + with .presence-card (position:fixed by default in api.css). Inside + .topbar on mobile it must flow normally. */ + .topbar .presence-card, .topbar .now-playing, .topbar .beta-bar { position: static; inset: auto; } + /* FIX: presence-card max-width so it doesn't overflow narrow screens */ + .topbar .presence-card { + max-width: min(100%, 320px); + width: 100%; + } + .now-playing { max-width: 100%; } /* 2 — Main content */ .hub, - body:has(.tech-stack) .hub, - body:has(.changelog) .hub { + body:has(.dev-info) .hub, + body:has(.changelog) .hub, + body:has(.bot-grid) .hub, + body:has(.friend-grid) .hub { order: 2; width: 100%; max-width: 100%; @@ -1216,17 +1325,90 @@ body:has(.bot-grid) .hub-header { flex-wrap: wrap; align-items: center; justify-content: center; + /* FIX: restore pointer-events on mobile so pokéball and badges are tappable */ + pointer-events: auto; + } + + /* FIX: hide tooltips on touch (they'd stick on tap) */ + .link-card:hover .link-text, + .bot:hover .bot-link-text { + opacity: 0; + pointer-events: none; } .hub-header { margin-bottom: 1.5rem; } - /* Keep the tech-stack / changelog content from butting up against - the nav below it */ - .tech-stack, - .changelog { - padding-bottom: 0; + /* Keep the dev-info / changelog / bots / friends content from butting up + against the nav below it */ + .dev-info, + .changelog, + .bot-grid, + .friend-grid { + padding-bottom: 1rem; + } + + /* FIX: bot sections need a bit of breathing room */ + .section+.section { + margin-top: 1.5rem; + } + + /* FIX: narrow waka bar label column so bars aren't crushed */ + .waka-bar-row { + grid-template-columns: 5rem 1fr auto; + } + + /* FIX: terminal height — respect short landscape viewports */ + .terminal { + width: 94vw; + max-height: clamp(300px, 65dvh, 70vh); + } + + /* FIX: button-wall — static in mobile flow, centered */ + .button-wall { + order: 5; + position: static; + transform: none; + margin: 0 auto; + max-width: 100%; + } + + /* FIX: override the term-chrome-in transform that wins by source order + over the plain .button-wall rule above (same specificity, later in sheet) */ + body.term-booting .button-wall, + body.term-chrome-in .button-wall { + transform: none; + } +} + +/* Very narrow phones — squeeze waka bar name column further */ +@media (max-width: 380px) { + .waka-bar-row { + grid-template-columns: 4rem 1fr auto; + gap: 0.4rem; + } + + .waka-bar-val { + font-size: 0.66rem; + } + + .bot-grid, + .friend-grid { + gap: 1.5rem 1rem; + } + + /* Shrink avatar grids slightly on very small screens */ + .bot-pfp, + .friend-pfp { + width: 80px; + height: 80px; + } + + .bot, + .friend { + width: 80px; + height: 80px; } } @@ -1242,7 +1424,8 @@ body:has(.bot-grid) .hub-header { opacity: 0.18; align-self: center; cursor: default; - pointer-events: auto; /* parent .badges sets none — re-enable here */ + pointer-events: auto; + /* parent .badges sets none — re-enable here */ image-rendering: auto; transition: opacity 0.2s ease, transform 0.2s ease; -webkit-user-drag: none; @@ -1259,3 +1442,742 @@ body:has(.bot-grid) .hub-header { cursor: default; filter: drop-shadow(0 0 4px var(--red)); } + + +/* ============================================================ + 12. dev-info / CODING STATS PAGE + ============================================================ */ +/* Let the coding-stats page scroll; link hub stays locked */ +html:has(.waka), +body:has(.waka) { + height: auto; + min-height: 100dvh; + overflow-y: auto; +} + +body:has(.waka) { + align-items: flex-start; +} + +.waka { + position: relative; + z-index: 1; + width: 100%; + max-width: 640px; + margin: 0 auto; + padding-bottom: 4.5rem; +} + +.waka .hub-header { + margin-bottom: 1.5rem; +} + +.waka-meta { + margin: 0.5rem 0 0; + font-size: 0.72rem; + letter-spacing: 0.03em; + color: var(--subtext-0); +} + +.waka-section { + background: var(--surface-0); + border: 1px solid var(--surface-1); + border-radius: 16px; + padding: 1.15rem 1.25rem 1.35rem; + margin-bottom: 1.1rem; +} + +.waka-section .section-title { + text-align: left; + font-size: 0.82rem; + margin-bottom: 1rem; +} + +/* ---- headline total + weekly chart ---- */ +.waka-total { + text-align: center; +} + +.waka-total-num { + font-size: 2.1rem; + font-weight: 700; + color: rgb(var(--accent-rgb)); + line-height: 1.1; +} + +.waka-total-sub { + font-size: 0.78rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--subtext-0); + margin-bottom: 1.1rem; +} + +.waka-week { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 0.5rem; + height: 120px; +} + +.waka-day { + flex: 1 1 0; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.4rem; + height: 100%; +} + +.waka-day-track { + flex: 1; + width: 100%; + max-width: 34px; + display: flex; + align-items: flex-end; + background: var(--surface-1); + border-radius: 7px; + overflow: hidden; +} + +.waka-day-fill { + width: 100%; + min-height: 3px; + background: rgb(var(--accent-rgb)); + border-radius: 7px 7px 0 0; + transition: height 0.5s ease; +} + +.waka-day-label { + font-size: 0.66rem; + color: var(--subtext-0); +} + +/* ---- ranked horizontal bars (languages / projects / editors / os) ---- */ +.waka-bars { + display: flex; + flex-direction: column; + gap: 0.6rem; +} + +.waka-bar-row { + display: grid; + grid-template-columns: 7.5rem 1fr auto; + align-items: center; + gap: 0.7rem; +} + +.waka-bar-name { + font-size: 0.82rem; + color: var(--text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.waka-bar-track { + height: 9px; + background: var(--surface-1); + border-radius: 999px; + overflow: hidden; +} + +.waka-bar-fill { + display: block; + height: 100%; + width: 0; + background: rgb(var(--accent-rgb)); + border-radius: 999px; + transition: width 0.6s ease; +} + +.waka-bar-val { + font-size: 0.74rem; + color: var(--subtext-0); + white-space: nowrap; + font-variant-numeric: tabular-nums; +} + +/* ---- two-up grid for editors + OS on wider screens ---- */ +.waka-grid2 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.1rem; +} + +.waka-grid2 .waka-section { + margin-bottom: 0; +} + +@media (max-width: 560px) { + .waka-grid2 { + grid-template-columns: 1fr; + gap: 0; + } + + .waka-grid2 .waka-section { + margin-bottom: 1.1rem; + } + + .waka-bar-row { + grid-template-columns: 5.5rem 1fr auto; + } +} + +/* ---- empty / setup state ---- */ +.waka-empty { + font-size: 0.85rem; + color: var(--subtext-0); + line-height: 1.5; + margin: 0; +} + +.waka-setup { + background: var(--surface-0); + border: 1px solid var(--surface-1); + border-radius: 16px; + padding: 1.25rem 1.4rem 1.5rem; + text-align: left; +} + +.waka-steps { + margin: 0.9rem 0 1.2rem; + padding-left: 1.2rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + font-size: 0.85rem; + line-height: 1.45; + color: var(--text); +} + +.waka-steps code { + background: var(--surface-1); + padding: 0.05rem 0.35rem; + border-radius: 6px; + font-size: 0.8rem; +} + +.waka-steps a, +.waka-empty a, +.waka-credit a { + color: rgb(var(--accent-rgb)); + text-decoration: none; +} + +.waka-steps a:hover, +.waka-empty a:hover, +.waka-credit a:hover { + text-decoration: underline; +} + +.waka-setup-btn { + display: inline-block; + padding: 0.45rem 1rem; + border-radius: 999px; + background: rgb(var(--accent-rgb)); + color: var(--crust); + font-size: 0.82rem; + font-weight: 600; + text-decoration: none; + transition: transform 0.15s ease, filter 0.15s ease; +} + +.waka-setup-btn:hover { + transform: translateY(-1px); + filter: brightness(1.05); +} + +.waka-credit { + text-align: center; + font-size: 0.72rem; + color: var(--subtext-0); + margin: 1.4rem 0 0; +} + + +/* ============================================================ + 14. TERMINAL HOMEPAGE (+ 88x31 button wall) + ============================================================ */ +.terminal { + position: relative; + z-index: 1; + width: min(92vw, 760px); + max-height: 76vh; + display: flex; + flex-direction: column; + padding: 1rem 1.15rem 1.15rem; + background: var(--mantle); + border: 1px solid var(--surface-1); + border-radius: 14px; + box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7); + font-family: 'Comic Code', ui-monospace, 'JetBrains Mono', Menlo, monospace; + font-size: 0.86rem; + line-height: 1.5; + color: var(--text); + overflow: hidden; +} + +body:has(.terminal) .hub { + max-width: min(92vw, 760px); + width: 100%; +} + +body:has(.terminal) .hub .terminal { + width: 100%; + margin: 0 auto; +} + +/* ---- boot log ---- */ +.t-boot { + margin: 0; + white-space: pre-wrap; + word-break: break-word; + font-size: 0.78rem; + color: var(--subtext-0); + max-height: 72vh; + overflow: hidden; +} + +.t-boot[hidden] { + display: none; +} + +.b-line { + display: block; +} + +.b-time { + color: var(--overlay-0); +} + +.b-info { + color: var(--blue); + font-weight: 700; +} + +.b-ok { + color: var(--green); + font-weight: 700; +} + +/* ---- main terminal ---- */ +.t-main { + display: flex; + flex-direction: column; + min-height: 0; +} + +.t-main[hidden] { + display: none; +} + +.t-banner { + margin: 0 0 0.5rem; + color: rgb(var(--accent-rgb)); + font-size: clamp(0.4rem, 1.45vw, 0.78rem); + line-height: 1.04; + white-space: pre; + overflow-x: auto; + text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.35); +} + +.t-greet { + margin-bottom: 0.7rem; + color: var(--subtext-1); +} + +.t-greet b { + color: rgb(var(--accent-rgb)); +} + +.t-dim { + color: var(--subtext-0); +} + +.t-accent { + color: rgb(var(--accent-rgb)); +} + +.t-inputline { + display: flex; + align-items: center; + gap: 0.5rem; + padding-bottom: 0.55rem; + border-bottom: 1px solid var(--surface-0); +} + +.t-prompt { + color: var(--green); + white-space: nowrap; + font-weight: 700; +} + +.t-path { + color: var(--blue); + font-weight: 700; +} + +.t-input { + flex: 1; + min-width: 0; + background: transparent; + border: none; + outline: none; + color: var(--text); + font: inherit; + caret-color: rgb(var(--accent-rgb)); +} + +.t-output { + margin-top: 0.6rem; + min-height: 0; + flex: 1; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 0.6rem; +} + +.t-echo { + color: var(--subtext-0); +} + +.t-result { + white-space: pre-wrap; + word-break: break-word; + margin-top: 0.15rem; +} + +.t-entry.is-error .t-result { + color: var(--red); +} + +/* hyfetch trans-flag block */ +.hf-c1 { + color: #5bcefa; +} + +.hf-c2 { + color: #f5a9b8; +} + +.hf-c3 { + color: #ffffff; +} + +.hf-pad { + color: transparent; +} + +/* ---- 88x31 button wall (always visible) ---- */ +.button-wall { + position: fixed; + bottom: 1rem; + left: 50%; + transform: translateX(-50%); + z-index: 5; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.5rem; + max-width: min(90vw, 480px); +} + +.button-wall a { + display: block; + line-height: 0; +} + +.button-wall img { + width: 88px; + height: 31px; + image-rendering: pixelated; + border: 1px solid var(--surface-1); + border-radius: 2px; + transition: transform 0.12s ease, border-color 0.12s ease; +} + +.button-wall a:hover img { + transform: translateY(-2px); + border-color: rgb(var(--accent-rgb)); +} + +/* ---- boot reveal of side chrome ---- */ +.nav, +.badges, +.button-wall { + transition: opacity 0.6s ease, transform 0.6s ease; +} + +body.term-booting .nav, +body.term-booting .badges, +body.term-booting .button-wall { + opacity: 0; + transform: translateY(8px); +} + +body.term-booting .button-wall { + transform: translate(-50%, 8px); +} + +body.term-chrome-in .nav, +body.term-chrome-in .badges, +body.term-chrome-in .button-wall { + opacity: 1; + transform: none; +} + +body.term-chrome-in .button-wall { + transform: translateX(-50%); +} + +@media (max-width: 640px) { + .terminal { + width: 94vw; + max-height: clamp(300px, 65dvh, 70vh); + } + + /* FIX: button-wall mobile — override both the base fixed position AND the + term-chrome-in rule (which is later in source order and wins by cascade) */ + .button-wall, + body.term-booting .button-wall, + body.term-chrome-in .button-wall { + position: static; + transform: none; + margin: 0 auto; + max-width: 100%; + } +} + + +/* ---- terminal: socials list (svg icon + clickable link) ---- */ +.t-socials-hint { + margin-bottom: 0.4rem; +} + +.t-socials { + display: flex; + flex-direction: column; + gap: 0.1rem; +} + +.t-social { + display: grid; + grid-template-columns: 18px 6.5rem 6rem 1fr; + align-items: center; + gap: 0.55rem; + padding: 0.22rem 0.4rem; + border-radius: 6px; + text-decoration: none; + color: var(--text); + border: 1px solid transparent; +} + +.t-social:hover { + background: var(--surface-0); + border-color: rgba(var(--accent-rgb), 0.4); +} + +.t-social-ic { + width: 16px; + height: 16px; + object-fit: contain; +} + +.t-social-key { + color: rgb(var(--accent-rgb)); +} + +.t-social-label { + color: var(--text); +} + +.t-social-sub { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* the "Opening …" confirmation line */ +.t-social-open { + display: inline-flex; + align-items: center; + gap: 0.4rem; + grid-template-columns: none; + padding: 0; + border: none; +} + +.t-social-open:hover { + background: transparent; +} + + +/* ---- terminal: ls-style socials list + social card ---- */ +.t-ls { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); + gap: 0.1rem 1.2rem; +} + +.t-ls-item { + color: rgb(var(--accent-rgb)); +} + +.t-ls-foot { + margin-top: 0.6rem; +} + +.t-ls-foot b { + color: var(--text); +} + +.t-social-card { + display: flex; + flex-direction: column; + gap: 0.35rem; +} + +.t-sc-head { + display: flex; + align-items: center; + gap: 0.45rem; +} + +.t-sc-head .t-social-ic { + width: 18px; + height: 18px; +} + +.t-sc-url { + color: var(--blue); + text-decoration: none; + word-break: break-all; +} + +.t-sc-url:hover { + text-decoration: underline; +} + +.t-sc-ask { + margin-top: 0.2rem; +} + +.t-sc-ask b { + color: var(--text); +} + +.t-social-open { + display: inline-flex; + align-items: center; + gap: 0.4rem; + color: var(--text); + text-decoration: none; +} + +.t-social-open .t-social-ic { + width: 16px; + height: 16px; +} + + +/* ---- hyfetch: arch logo + info, side by side ---- */ +.hf { + display: flex; + gap: 1.1rem; + align-items: flex-start; + flex-wrap: wrap; +} + +.hf-logo { + margin: 0; + white-space: pre; + line-height: 1.02; + font-size: 0.62rem; +} + +.hf-info { + margin: 0; + white-space: pre; +} + +/* ============================================================ + 13. Friends Page + ============================================================ */ + +body:has(.friend-grid) .hub-header { + position: relative; + z-index: 1; + margin-bottom: 2rem; +} + +.friend-grid { + display: grid; + grid-template-columns: repeat(auto-fit, 96px); + justify-content: center; + margin-bottom: 1.5rem; + gap: 3rem 1.5rem; + max-width: 560px; +} + +.friend { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + width: 96px; + height: auto; + + color: var(--text); + text-decoration: none; + transition: transform 0.15s ease, border-color 0.15s ease, + background 0.15s ease, box-shadow 0.15s ease; +} + +.friend-name { + margin-top: 0.5rem; + font-size: 0.8rem; + color: var(--subtext-0); + text-align: center; +} + +.friend-name::before { + content: "🩵 "; +} + +.friend-name.wife::before { + content: "🖤 "; +} + +.friend-name.close::before { + content: "🤍 "; +} + +.friend-pfp { + width: 96px; + height: 96px; + border-radius: 50%; + object-fit: cover; + border: 3px solid var(--yellow); + box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.25); +} + +.friend-pfp.wife { + border: 3px solid var(--lavender); +} + +.friend-pfp.close { + border: 3px solid var(--red); +} + +.friend:hover { + transform: translateY(-3px); +} + +.friend:hover .friend-pfp { + filter: none; +} \ No newline at end of file diff --git a/tech-stack/index.html b/dev-info/index.html similarity index 65% rename from tech-stack/index.html rename to dev-info/index.html index d9737b7..1f17bc4 100644 --- a/tech-stack/index.html +++ b/dev-info/index.html @@ -4,27 +4,22 @@ - Clove Twilight - Tech Stack + Clove Twilight - Coding Stats - - - - - - - + + - + - + @@ -32,56 +27,62 @@ - - + + - + - - + + +
+
- +
-
Clove Twilight avatar

Clove Twilight

(fae/faer)

-

Tech Stack

+

Dev Info

+
-
+ + + +
+ + +
+ +
+ +