From b45f307478aa596d3c503e9ef2af3847154dc77a Mon Sep 17 00:00:00 2001 From: Ari Date: Mon, 22 Jun 2026 16:50:54 +0100 Subject: [PATCH] bro i hate css so much --- css/discord.css | 1159 ++++++++++++++++++++++++++++++++++++++++++++ css/index.css | 1 + socials/index.html | 16 +- 3 files changed, 1171 insertions(+), 5 deletions(-) create mode 100644 css/discord.css diff --git a/css/discord.css b/css/discord.css new file mode 100644 index 0000000..2ca9f2a --- /dev/null +++ b/css/discord.css @@ -0,0 +1,1159 @@ +/* ============================================================================= + presence-card.css — Discord presence card + friends grid + Extracted from c.stupid.cat for use with discord.js and friends.js. + + USAGE + 1. Load this file on any page that runs discord.js (a single card mounts on +
) or friends.js (a grid of cards in
). + 2. Copy these font files into /assets/fonts/ (or delete the @font-face blocks + to skip custom Discord display-name fonts): + gg sans.woff2 Sakura.woff2 Jellybean.woff2 Modern.woff2 + Medieval.woff2 8Bit.woff2 Vampyre.woff2 Tempo.woff2 + 3. The :root block below is a FALLBACK palette (Catppuccin Mocha). Delete it + if your site already defines these variables, or edit to match your theme. + + VARIABLES THE CARD READS (provide these, or keep the :root fallback): + --text --subtext-0 --subtext-1 --surface-0 --surface-1 --surface-2 + --overlay-0 --overlay-1 --crust --mantle --mauve --blue --green --red + --yellow --accent-rgb (the *-rgb ones are comma triplets, e.g. 245, 194, 231) + + VARIABLES discord.js SETS AT RUNTIME (do NOT define — they come from live data): + --dc-accent --pc-banner-color --pc-grad-1-rgb --pc-grad-2-rgb + ============================================================================= */ + +/* ---- Discord display-name fonts (look-alikes) — discord.js applies these per + user from display_name_styles.font_id. Files live in /assets/fonts/. -------- */ +@font-face { font-family:'DDN gg sans'; src:url('/assets/fonts/gg%20sans.woff2') format('woff2'); font-display:swap; } +@font-face { font-family:'DDN Sakura'; src:url('/assets/fonts/Sakura.woff2') format('woff2'); font-display:swap; } +@font-face { font-family:'DDN Jellybean'; src:url('/assets/fonts/Jellybean.woff2') format('woff2'); font-display:swap; } +@font-face { font-family:'DDN Modern'; src:url('/assets/fonts/Modern.woff2') format('woff2'); font-display:swap; } +@font-face { font-family:'DDN Medieval'; src:url('/assets/fonts/Medieval.woff2') format('woff2'); font-display:swap; } +@font-face { font-family:'DDN 8Bit'; src:url('/assets/fonts/8Bit.woff2') format('woff2'); font-display:swap; } +@font-face { font-family:'DDN Vampyre'; src:url('/assets/fonts/Vampyre.woff2') format('woff2'); font-display:swap; } +@font-face { font-family:'DDN Tempo'; src:url('/assets/fonts/Tempo.woff2') format('woff2'); font-display:swap; } + +/* ---- Theme palette (FALLBACK — Catppuccin Mocha). Delete if your site already + defines these custom properties. ------------------------------------------- */ +:root { + --text: #cdd6f4; --subtext-0: #a6adc8; --subtext-1: #bac2de; + --overlay-0: #6c7086; --overlay-1: #7f849c; + --surface-0: #313244; --surface-1: #45475a; --surface-2: #585b70; + --crust: #11111b; --mantle: #181825; + --mauve: #cba6f7; --blue: #89b4fa; --green: #a6e3a1; --red: #f38ba8; --yellow: #f9e2af; + --accent-rgb: 245, 194, 231; +} + + +/* =========================================================================== + CARD COMPONENT (discord.js — also used by each friend card) + =========================================================================== */ + +.presence-card { + --dc-accent: 245, 194, 231; + position: fixed; + top: 1rem; + left: 1rem; + z-index: 6; + width: max-content; + max-width: 280px; + background: var(--surface-0); + border: 1px solid var(--surface-1); + border-radius: 16px; + box-shadow: 0 8px 26px -12px rgba(17, 17, 27, 0.7); + overflow: hidden; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.presence-card[hidden] { + display: none; +} + +.presence-card.has-accent { + border-color: rgba(var(--dc-accent), 0.5); + box-shadow: 0 8px 26px -12px rgba(var(--dc-accent), 0.6); +} + +.pc-head { + display: flex; + align-items: center; + gap: 0.6rem; + padding: 0.5rem 0.7rem; +} + +.pc-avatar { + position: relative; + width: 40px; + height: 40px; + flex-shrink: 0; +} + +.pc-av-img { + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; + display: block; + + background: var(--crust); +} + +.pc-av-deco { + position: absolute; + top: 50%; + left: 50%; + width: 54px; + height: 54px; + transform: translate(-50%, -50%); + pointer-events: none; +} + +.pc-av-deco[hidden] { + display: none; +} + +.pc-status { + position: absolute; + right: -1px; + bottom: -1px; + width: 12px; + height: 12px; + border-radius: 50%; + border: 2.5px solid var(--surface-0); + background: var(--overlay-0); +} + +.presence-card[data-status="online"] .pc-status { + background: var(--green); +} + +.presence-card[data-status="idle"] .pc-status { + background: var(--yellow); +} + +.presence-card[data-status="dnd"] .pc-status { + background: var(--red); +} + +.presence-card[data-status="offline"] .pc-status { + background: var(--overlay-0); +} + +.pc-id { + display: flex; + flex-direction: column; + gap: 0.05rem; + min-width: 0; +} + +.pc-name { + font-size: 0.92rem; + font-weight: 700; + color: rgb(var(--accent-rgb)); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: color 0.5s ease; +} + +.pc-user { + font-size: 0.7rem; + color: var(--subtext-0); + white-space: nowrap; +} + +.pc-user:empty { + display: none; +} + +.pc-status-text { + font-size: 0.7rem; + font-weight: 600; + white-space: nowrap; + color: var(--overlay-1); +} + +.pc-status-text:empty { + display: none; +} + +.pc-status-text::before { + content: ""; + display: inline-block; + width: 7px; + height: 7px; + border-radius: 50%; + margin-right: 0.3rem; + vertical-align: baseline; + background: var(--overlay-0); +} + +.presence-card[data-status="online"] .pc-status-text { + color: var(--green); +} + +.presence-card[data-status="online"] .pc-status-text::before { + background: var(--green); +} + +.presence-card[data-status="idle"] .pc-status-text { + color: var(--yellow); +} + +.presence-card[data-status="idle"] .pc-status-text::before { + background: var(--yellow); +} + +.presence-card[data-status="dnd"] .pc-status-text { + color: var(--red); +} + +.presence-card[data-status="dnd"] .pc-status-text::before { + background: var(--red); +} + +.presence-card[data-status="offline"] .pc-status-text { + color: var(--overlay-1); +} + +.presence-card[data-status="offline"] .pc-status-text::before { + background: var(--overlay-0); +} + +.pc-sections { + display: flex; + flex-direction: column; + gap: 0.4rem; + padding: 0 0.6rem 0.6rem; + transition: opacity 0.2s ease; +} + +.presence-card:not(.has-sections) .pc-sections { + display: none; +} + +.pc-row { + display: flex; + align-items: center; + gap: 0.55rem; + padding: 0.4rem 0.5rem; + border-radius: 10px; + background: var(--mantle); + border: 1px solid transparent; + color: var(--text); + text-decoration: none; + transition: border-color 0.15s ease, transform 0.15s ease; +} + +a.pc-row:hover, +.pc-row--stack:hover { + border-color: rgba(var(--dc-accent), 0.55); + transform: translateX(2px); +} + +.pc-row-text { + display: flex; + flex-direction: column; + gap: 0.04rem; + min-width: 0; +} + +.pc-row-kind { + font-size: 0.6rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--subtext-0); +} + +.pc-row-title { + font-size: 0.8rem; + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; +} + +.pc-row-sub { + font-size: 0.7rem; + color: var(--subtext-0); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; +} + +.pc-row-title:empty, .pc-row-sub:empty { + display: none; +} + +.pc-row-elapsed { + font-size: 0.62rem; + color: var(--subtext-0); + margin-top: 0.1rem; +} + +.pc-row-elapsed:empty { + display: none; +} + +.pc-art, +.pc-row-ic-img { + width: 38px; + height: 38px; + border-radius: 7px; + object-fit: cover; + flex-shrink: 0; +} + +.pc-row-ic.pc-dot { + width: 9px; + height: 9px; + border-radius: 50%; + flex-shrink: 0; + margin: 0 0.5rem; + background: rgb(var(--accent-rgb)); +} + +.pc-dev .pc-row-ic.pc-dot { + background: var(--blue); border-radius: 2px; +} + +.pc-game .pc-row-ic.pc-dot { + background: var(--green); +} + +.pc-stream .pc-row-ic.pc-dot { + background: var(--mauve); +} + +.pc-custom { + position: relative; + align-self: flex-start; + background: var(--surface-1); + border: none; + padding: 0.5rem 0.7rem; + gap: 0.4rem; + align-items: flex-start; + border-radius: 13px; + border-top-left-radius: 4px; + margin-top: 0.3rem; +} + +.pc-custom::before, +.pc-custom::after { + content: ""; + position: absolute; + background: var(--surface-1); + border-radius: 50%; + pointer-events: none; +} + +.pc-custom::before { + width: 9px; height: 9px; top: -5px; left: 12px; +} + +.pc-custom::after { + width: 5px; height: 5px; top: -11px; left: 9px; +} + +.pc-custom:hover { + transform: none; border-color: transparent; +} + +.pc-emoji { + width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.05rem; +} + +.pc-custom-text { + font-size: 0.74rem; + color: var(--subtext-0); + max-width: 230px; + white-space: normal; + overflow-wrap: anywhere; + line-height: 1.35; +} + +.pc-spotify .pc-row-title { + color: var(--green); +} + +.pc-progress { + display: flex; + flex-direction: column; + gap: 0.15rem; + margin-top: 0.25rem; + width: 180px; +} + +.pc-bar { + height: 4px; + border-radius: 999px; + background: var(--surface-1); + overflow: hidden; +} + +.pc-fill { + display: block; + height: 100%; + width: 0; + border-radius: 999px; + background: rgb(var(--dc-accent)); +} + +.pc-times { + display: flex; + justify-content: space-between; + font-size: 0.58rem; + color: var(--subtext-0); + font-variant-numeric: tabular-nums; +} + +.pc-name-row { + display: flex; + align-items: center; + gap: 0.35rem; + min-width: 0; +} + +.pc-name-row .pc-name { + min-width: 0; +} + +.pc-name.is-gradient { + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; +} + +.pc-tag { + display: inline-flex; + align-items: center; + gap: 0.2rem; + flex-shrink: 0; + padding: 0.05rem 0.35rem; + border-radius: 6px; + background: var(--surface-2); + font-size: 0.58rem; + font-weight: 700; + letter-spacing: 0.03em; + color: var(--text); +} + +.pc-tag[hidden] { + display: none; +} + +.pc-tag-badge { + width: 14px; height: 14px; display: block; +} + +.pc-sub-row { + display: flex; + align-items: center; + gap: 0.35rem; +} + +.pc-platforms { + display: inline-flex; + align-items: center; + gap: 0.2rem; + color: var(--subtext-0); +} + +.pc-plat { + width: 12px; height: 12px; display: inline-flex; +} + +.pc-plat svg { + width: 12px; height: 12px; display: block; +} + +.pc-meta { + display: flex; + align-items: center; + gap: 0.25rem; + margin-top: 0.1rem; + font-size: 0.66rem; + color: var(--subtext-0); +} + +.pc-meta[hidden] { + display: none; +} + +.pc-pin { + font-size: 0.7rem; line-height: 1; +} + +.pc-row--stack { + flex-direction: column; + align-items: stretch; + gap: 0.4rem; +} + +.pc-row-link { + display: flex; + align-items: center; + gap: 0.55rem; + min-width: 0; + color: var(--text); + text-decoration: none; +} + +.pc-ic-wrap { + position: relative; + flex-shrink: 0; + width: 38px; + height: 38px; +} + +.pc-ic-wrap .pc-row-ic-img { + width: 38px; height: 38px; +} + +.pc-ic-badge { + position: absolute; + right: -3px; + bottom: -3px; + width: 16px; + height: 16px; + border-radius: 50%; + border: 2px solid var(--mantle); + object-fit: cover; +} + +.pc-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.35rem; +} + +.pc-btn { + font-size: 0.66rem; + padding: 0.22rem 0.55rem; + border-radius: 6px; + background: var(--surface-1); + color: var(--text); + text-decoration: none; + border: 1px solid transparent; + transition: border-color 0.15s ease, background 0.15s ease; +} + +.pc-btn:hover { + border-color: rgb(var(--dc-accent)); + background: var(--surface-2); +} + +.pc-badges { + display: inline-flex; + align-items: center; + gap: 0.2rem; + flex-wrap: wrap; + margin-top: 0.15rem; +} + +.pc-badges:empty { + display: none; +} + +.pc-badge { + width: 16px; height: 16px; display: block; +} + +.pc-badge-link { + display: inline-flex; line-height: 0; +} + +.pc-star { + margin-left: auto; + align-self: flex-start; + background: none; + border: none; + cursor: url('../assets/cursor/pointer_0.png'), pointer; + font-size: 0.95rem; + line-height: 1; + color: var(--subtext-0); + padding: 0.1rem 0.15rem; + transition: color 0.15s ease, transform 0.15s ease; +} + +.pc-star:hover { + color: rgb(var(--accent-rgb)); transform: scale(1.12); +} + +.pc-star.on { + color: var(--yellow); +} + +.pc-wishlist { + display: none; +} + +.presence-card.show-wishlist .pc-wishlist { + display: block; + border-top: 1px solid var(--surface-1); + margin: 0 0.6rem; + padding: 0.6rem 0 0.7rem; +} + +.pc-wishlist-title { + font-size: 0.62rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--subtext-0); + margin-bottom: 0.45rem; +} + +.pc-wl-item { + display: flex; + align-items: center; + gap: 0.45rem; + padding: 0.25rem 0.4rem; + border-radius: 8px; + text-decoration: none; + color: var(--text); +} + +a.pc-wl-item:hover { + background: var(--mantle); +} + +.pc-wl-ic { + width: 22px; height: 22px; border-radius: 5px; object-fit: cover; +} + +.pc-wl-text { + display: flex; flex-direction: column; line-height: 1.2; min-width: 0; +} + +.pc-wl-name { + font-size: 0.8rem; +} + +.pc-wl-type { + font-size: 0.6rem; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--subtext-0); +} + +.pc-wl-price { + margin-left: auto; + padding-left: 0.5rem; + font-size: 0.72rem; + color: var(--subtext-1); + white-space: nowrap; +} + +.pc-wl-item.is-owned { + opacity: 0.5; +} + +.pc-wl-empty { + font-size: 0.78rem; color: var(--subtext-0); margin: 0; +} + +.presence-card.has-profile-grad { + background: linear-gradient(180deg, rgb(var(--pc-grad-1-rgb)) 0%, rgb(var(--pc-grad-2-rgb)) 100%); +} + +.presence-card.has-profile-grad:not(.has-accent) { + border-color: rgba(var(--pc-grad-1-rgb), 0.6); +} + +.presence-card.has-profile-grad .pc-row { + background: rgba(17, 17, 27, 0.55); +} + +.pc-banner { + display: block; + width: 100%; + height: 96px; + object-fit: cover; + margin: 0; +} + +.pc-banner[hidden] { + display: none; +} + +.presence-card.has-banner-color::before { + content: ""; + display: block; + height: 64px; + background: var(--pc-banner-color, var(--surface-1)); +} + +.presence-card.has-banner .pc-head, +.presence-card.has-banner-color .pc-head { + margin-top: -22px; +} + +.presence-card.has-banner .pc-avatar, +.presence-card.has-banner-color .pc-avatar { + width: 56px; + height: 56px; +} + +.presence-card.has-banner .pc-av-img, +.presence-card.has-banner-color .pc-av-img { + width: 56px; + height: 56px; + border: 3px solid var(--surface-0); +} + +.presence-card.has-banner .pc-av-deco, +.presence-card.has-banner-color .pc-av-deco { + width: 72px; + height: 72px; +} + +.pc-bio { + margin: 0 0.7rem 0.5rem; + padding: 0.5rem 0.6rem; + border-radius: 10px; + background: var(--mantle); + font-size: 0.74rem; + line-height: 1.4; + color: var(--subtext-1); + white-space: pre-wrap; + overflow-wrap: anywhere; +} + +.pc-bio[hidden] { + display: none; +} + +.pc-connections { + display: flex; + flex-wrap: wrap; + gap: 0.35rem; + margin: 0 0.7rem 0.6rem; +} + +.pc-connections[hidden] { + display: none; +} + +.pc-conn { + display: inline-flex; + align-items: center; + gap: 0.3rem; + padding: 0.2rem 0.5rem; + border-radius: 999px; + background: var(--surface-1); + border: 1px solid transparent; + color: var(--text); + font-size: 0.66rem; + text-decoration: none; + transition: border-color 0.15s ease, background 0.15s ease; +} + +a.pc-conn:hover { + border-color: rgb(var(--accent-rgb)); + background: var(--surface-2); +} + +.pc-conn-type { + text-transform: uppercase; + letter-spacing: 0.04em; + font-size: 0.56rem; + color: var(--subtext-0); +} + +.pc-conn-check { + color: var(--green); font-weight: 700; +} + +.pc-pronouns { + padding: 0.05rem 0.4rem; + border-radius: 6px; + background: var(--surface-2); + font-size: 0.6rem; + font-weight: 600; + color: var(--subtext-1); + white-space: nowrap; +} + +.pc-pronouns[hidden] { + display: none; +} + +.presence-stage .presence-card { + position: static; + margin: 0; + width: 100%; + max-width: 680px; + border-radius: 20px; +} + +.presence-stage .pc-banner { + height: 220px; +} + +.presence-stage .presence-card.has-banner-color::before { + height: 150px; +} + +.presence-stage .pc-head { + gap: 1rem; + padding: 0.9rem 1.4rem; + align-items: flex-end; +} + +.presence-stage .presence-card.has-custom .pc-head { + align-items: flex-end; +} + +.presence-stage .presence-card.has-banner .pc-head, +.presence-stage .presence-card.has-banner-color .pc-head { + margin-top: 0; +} + +.presence-stage .presence-card.has-banner .pc-avatar, +.presence-stage .presence-card.has-banner-color .pc-avatar { + margin-top: -60px; +} + +.presence-stage .pc-avatar, +.presence-stage .presence-card.has-banner .pc-avatar, +.presence-stage .presence-card.has-banner-color .pc-avatar { + width: 120px; + height: 120px; +} + +.presence-stage .pc-av-img, +.presence-stage .presence-card.has-banner .pc-av-img, +.presence-stage .presence-card.has-banner-color .pc-av-img { + width: 120px; + height: 120px; + + background: var(--crust); + border: 6px solid var(--crust); +} + +.presence-stage .pc-av-deco, +.presence-stage .presence-card.has-banner .pc-av-deco, +.presence-stage .presence-card.has-banner-color .pc-av-deco { + width: 152px; + height: 152px; +} + +.presence-stage .pc-status { + width: 24px; + height: 24px; + border-width: 5px; +} + +.presence-stage .pc-name { + font-size: 1.5rem; +} + +.presence-stage .pc-user { + font-size: 0.9rem; +} + +.presence-stage .pc-badges { + margin-top: 0.3rem; +} + +.presence-stage .pc-badge { + width: 22px; height: 22px; +} + +.presence-stage .pc-bio { + margin: 0 1.4rem 0.8rem; + padding: 0.7rem 0.9rem; + font-size: 0.88rem; +} + +.presence-stage .pc-connections { + margin: 0 1.4rem 0.9rem; + gap: 0.5rem; +} + +.presence-stage .pc-conn { + font-size: 0.74rem; padding: 0.3rem 0.65rem; +} + +.presence-stage .pc-sections { + gap: 0.6rem; + padding: 0 1.4rem 1.1rem; +} + +.presence-stage .pc-row { + padding: 0.7rem 0.8rem; border-radius: 14px; +} + +.presence-stage .pc-art, +.presence-stage .pc-row-ic-img, +.presence-stage .pc-ic-wrap, +.presence-stage .pc-ic-wrap .pc-row-ic-img { + width: 56px; height: 56px; +} + +.presence-stage .pc-row-title { + font-size: 0.95rem; max-width: none; +} + +.presence-stage .pc-row-sub { + font-size: 0.82rem; max-width: none; +} + +.presence-stage .pc-progress { + width: 100%; +} + +.presence-stage .pc-custom-text { + font-size: 0.86rem; max-width: none; +} + +.presence-stage .pc-star { + font-size: 1.2rem; +} + +.presence-card.is-mini { + position: static; + top: auto; + left: auto; + right: auto; + bottom: auto; + z-index: auto; + margin: 0; + width: 300px; + max-width: 100%; +} + +.presence-card.is-mini .pc-banner { + height: 84px; +} + +.presence-card.is-mini .pc-bio { + max-height: 6.5em; + overflow-y: auto; +} + +.presence-card.is-mini .pc-name--link { + text-decoration: none; +} + +.presence-card.is-mini .pc-name--link:hover { + text-decoration: underline; +} + +.presence-card.is-mini .pc-name::before { + content: "🩵 "; +} + +.presence-card.is-mini.tier-known .pc-name::before { + content: "💛 "; +} + +.presence-card.is-mini.tier-wife .pc-name::before { + content: "🖤 "; +} + +.presence-card.is-mini.tier-close .pc-name::before { + content: "🤍 "; +} + +.presence-card.is-mini.tier-active-alt .pc-name::before { + content: "🎭 "; +} + +.presence-card.is-mini.tier-dead-alt .pc-name::before { + content: "💀 "; +} + +.presence-card.is-mini .pc-name.is-gradient::before { + -webkit-text-fill-color: initial; + color: var(--text); +} + +.presence-card.is-mini.tier-dead-alt .pc-av-img { + filter: grayscale(1) brightness(0.6); +} + +.presence-card.is-mini.tier-dead-alt .pc-name { + color: var(--overlay-1); + text-decoration: line-through; +} + +.presence-card.is-mini.tier-dead-alt .pc-status { + display: none; +} + +.pc-conn-ic { + width: 14px; + height: 14px; + display: block; + flex: none; +} + +.presence-card.is-mini .pc-conn-ic { + width: 13px; height: 13px; +} + + +@media (max-width: 640px) { + + .presence-card { + max-width: calc(100vw - 2rem); + } + +} + + +@media (max-width: 720px) { + + .presence-stage .presence-card { + max-width: 100%; + } + +} + + +@media (max-width: 480px) { + + .presence-stage .pc-banner { + height: 150px; + } + + .presence-stage .pc-avatar, + .presence-stage .presence-card.has-banner .pc-avatar, + .presence-stage .presence-card.has-banner-color .pc-avatar { + width: 92px; height: 92px; + } + + .presence-stage .pc-av-img, + .presence-stage .presence-card.has-banner .pc-av-img, + .presence-stage .presence-card.has-banner-color .pc-av-img { + width: 92px; height: 92px; + } + + .presence-stage .presence-card.has-banner .pc-head, + .presence-stage .presence-card.has-banner-color .pc-head { + margin-top: 0; + } + + .presence-stage .presence-card.has-banner .pc-avatar, + .presence-stage .presence-card.has-banner-color .pc-avatar { + margin-top: -46px; + } + + .presence-stage .pc-name { + font-size: 1.25rem; + } + +} + + +/* =========================================================================== + FRIENDS GRID / SECTIONS (friends.js) + =========================================================================== */ + +html:has(.project-grid), +html:has(.friend-grid) { + height: auto; + min-height: 100dvh; + overflow-y: auto; + overflow-x: hidden; +} + +body:has(.project-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; + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; + width: 100%; +} + +.section-title { + margin: 0; + font-size: 1.1rem; + font-weight: 500; + letter-spacing: 0.08em; + text-transform: uppercase; + 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); +} + +body:has(.friend-grid) .hub-header { + position: relative; + z-index: 1; + margin-bottom: 2rem; +} + +.friend-grid { + display: flex; + flex-wrap: wrap; + + justify-content: center; + align-items: flex-start; + margin-bottom: 1.5rem; + gap: 1.1rem; + width: 100%; +} + + +@media (max-width: 640px) { + + body, + body:has(.dev-info), + body:has(.project-grid), + body:has(.friend-grid) { + flex-direction: column; + justify-content: flex-start; + align-items: center; + gap: 1rem; + height: auto; + min-height: 100dvh; + overflow-x: hidden; + overflow-y: visible; + padding: 1.25rem 1rem 2rem; + + } + + .hub, + body:has(.dev-info) .hub, + body:has(.project-grid) .hub, + body:has(.friend-grid) .hub { + order: 2; + width: 100%; + max-width: 100%; + + } + + .dev-info, + .project-grid, + .friend-grid { + padding-bottom: 1rem; + + } + + .section+.section { + margin-top: 1.5rem; + + } + +} \ No newline at end of file diff --git a/css/index.css b/css/index.css index f320318..73627f2 100644 --- a/css/index.css +++ b/css/index.css @@ -12,6 +12,7 @@ /* IMPORTS */ @import url(fonts.css); @import url(picker.css); +@import url(discord.css); @import url(theme-switcher.css); @import url(themes/frappe.css); @import url(themes/latte.css); diff --git a/socials/index.html b/socials/index.html index d34e62e..ecbbd16 100644 --- a/socials/index.html +++ b/socials/index.html @@ -90,17 +90,23 @@

My Socials

-

(She/They)

A list of all of my socials

+
+

Socials

+
- Check out my - Git.Gay - Check - out my GitHub + Twitter + +
+

Gaming

+ NameMC + SkyCrypt + +