diff --git a/src/components/profile/client-themes.ts b/src/components/profile/client-themes.ts index ce545bf..d4b14d3 100644 --- a/src/components/profile/client-themes.ts +++ b/src/components/profile/client-themes.ts @@ -12,6 +12,7 @@ export const CLIENT_THEMES = [ "ngerakines", "kandake", "fujocoded", + "laelaps", ] as const; export type ClientTheme = (typeof CLIENT_THEMES)[number]; @@ -43,6 +44,7 @@ const CLIENT_THEME_DOMAINS: Record< ngerakines: [".ngerakines."], kandake: [".kandake."], fujocoded: [".fujocoded."], + laelaps: [".laelaps.fyi", "heika.dog"], // your-server: [".yourdomain."] // To add a new theme: // 1. Copy src/styles/themes/_template.css → src/styles/themes/.css diff --git a/src/styles/global.css b/src/styles/global.css index a4ec1fd..bd70177 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -176,6 +176,7 @@ @import "./themes/kandake.css"; @import "./themes/spark.css"; @import "./themes/fujocoded.css"; +@import "./themes/laelaps.css"; @layer base { html { diff --git a/src/styles/themes/laelaps.css b/src/styles/themes/laelaps.css new file mode 100644 index 0000000..c9b4a78 --- /dev/null +++ b/src/styles/themes/laelaps.css @@ -0,0 +1,134 @@ +/* + * Theme: + * Source: + * + * To add this theme, see the checklist in src/components/profile/client-themes.ts + * + * This uses a selector that never matches, so it's valid CSS you can copy. + * Replace TEMPLATE with your theme name. + */ + +@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"); + +[data-theme="laelaps"] { + /* Palette */ + --theme-bg: #1c0648; + --theme-fg: #ffffff; + --theme-muted: #ffffff; + --theme-accent: #7837f1; + --theme-surface: #1c0648; + --theme-border: rgba(92, 4, 207, 0.575); + + /* Semantic overrides */ + --background: var(--theme-bg); + --foreground: var(--theme-fg); + --card: var(--theme-surface); + --card-foreground: var(--theme-fg); + --popover: var(--theme-surface); + --popover-foreground: var(--theme-fg); + --primary: var(--theme-accent); + --primary-foreground: var(--theme-fg); + --secondary: #ffffff26; + --secondary-foreground: var(--theme-fg); + --muted: var(--theme-surface); + --muted-foreground: var(--theme-muted); + --accent: #7837f1; + --accent-foreground: var(--theme-fg); + --border: var(--theme-border); + --input: #ffffff26; + --ring: var(--theme-accent); + + /* Typography */ + --font-body: "Source Sans 3", "Segoe UI", sans-serif; + --font-heading: "Source Sans 3", "Segoe UI", sans-serif; + --font-ui: "Source Sans 3", "Segoe UI", sans-serif; + + /* Header */ + --header-bg: #1c0648; + --header-fg: var(--theme-fg); + --header-fg-muted: #ffffff; + --header-border: #ffffff; + --header-logo-accent: var(--theme-accent); + + /* ATProto profile tokens */ + --atproto-profile-bg: var(--theme-bg); + --atproto-profile-banner: linear-gradient(to right #27125e, #5c2fc5); + --atproto-profile-ring: var(--theme-bg); + --atproto-profile-pill-bg: #070c0c; + --atproto-profile-pill-fg: var(--theme-accent); + --atproto-profile-link: var(--theme-accent); + + /* Event-type badge/cell colors (calendar + talk pills) */ + --event-presentation-bg: #6b3ec0; + --event-presentation-fg: #ffffff; + --event-presentation-sub: #ffffff; + --event-lightning-bg: #5220af; + --event-lightning-fg: #ffffff; + --event-lightning-sub: #ffffff; + --event-panel-bg: #4d1ba8; + --event-panel-fg: #ffffff; + --event-panel-sub: #ffffff; + --event-workshop-bg: #7526db; + --event-workshop-fg: #ffffff; + --event-workshop-sub: #ffffff; + --event-info-bg: #2a0b52; + --event-info-fg: #ffffff; + --event-info-sub: #ffffff; + --event-activity-bg: #3e1679; + --event-activity-fg: #ffffff; + --event-activity-sub: #ffffff; + --event-unconference-bg: #6022d4; + --event-unconference-fg: #ffffff; + --event-unconference-sub: #ffffff; +} + +/* Site header, hero, and navigation buttons */ +[data-theme="laelaps"] #site-header { + font-weight: 900 !important; + text-transform: uppercase; + letter-spacing: 0.23rem; +} + +[data-theme="laelaps"] button#theme-toggle, +[data-theme="laelaps"] a[href="/login"] { + font-weight: normal !important; + letter-spacing: normal; +} + +[data-theme="laelaps"] h1 + p { + text-transform: uppercase; + letter-spacing: 0.2rem; +} + +[data-theme="laelaps"] time, +[data-theme="laelaps"] .ticket-main { + text-transform: uppercase; + letter-spacing: 0.1rem; +} + +[data-theme="laelaps"] h1, +[data-theme="laelaps"] h2#schedule, +[data-theme="laelaps"] h2#join-us { + text-transform: uppercase; + letter-spacing: 0.3rem; +} + +/* would be more performant to have font-ui affect these attributes in the code itself, but quick workaround */ +[data-theme="laelaps"] .section-kicker-link, +[data-theme="laelaps"] p.rail-other-day-meta, +[data-theme="laelaps"] a.rail-other-day-button, +[data-theme="laelaps"] span.program-day-chip-kicker, +[data-theme="laelaps"] span.rail-lucky-label, +[data-theme="laelaps"] span.rail-other-day-time, +[data-theme="laelaps"] a.program-paper-summary, +[data-theme="laelaps"] a.program-mode-toggle { + font-family: var(--font-ui); + letter-spacing: 0.15rem; +} + +[data-theme="laelaps"] tito-widget .tito-release-description, +[data-theme="laelaps"] tito-widget .tito-release-description--description, +[data-theme="laelaps"] tito-widget .tito-release-description p, +[data-theme="laelaps"] tito-widget .tito-release-description li { + opacity: 1 !important; +}