miacelium-web

Static website for miacelium.gay
Log | Files | Refs

theme.css (3104B)

      1 /* 
      2  * miacelium.gay Color Theme
      3  * Based on terminal color scheme - purple/magenta aesthetic
      4  * Use these CSS custom properties for consistent theming
      5  */
      6 
      7 :root {
      8   /* Background colors */
      9   --bg-primary: #0a0a0a;
     10   --bg-secondary: #121212;
     11   --bg-tertiary: #1a1a1a;
     12   --bg-elevated: #242424;
     13   
     14   /* Text colors */
     15   --text-primary: #e0e0e0;
     16   --text-secondary: #a0a0a0;
     17   --text-muted: #666666;
     18   --text-dim: #444444;
     19   
     20   /* Accent colors - Purple/Magenta theme */
     21   --accent-primary: #b48ead;      /* Soft purple - main accent */
     22   --accent-secondary: #a277ff;    /* Bright purple - links, highlights */
     23   --accent-tertiary: #c792ea;     /* Light purple - hover states */
     24   
     25   /* Semantic colors */
     26   --color-success: #a3be8c;       /* Green - success, online */
     27   --color-warning: #ebcb8b;       /* Yellow - warnings */
     28   --color-error: #bf616a;         /* Red - errors, offline */
     29   --color-info: #88c0d0;          /* Cyan - info, comments */
     30   
     31   /* Border colors */
     32   --border-subtle: #333333;
     33   --border-default: #444444;
     34   --border-accent: #b48ead40;
     35   
     36   /* Special */
     37   --selection-bg: #b48ead30;
     38   --code-bg: #1a1a1a;
     39   --scrollbar-thumb: #333333;
     40   --scrollbar-track: #0a0a0a;
     41 }
     42 
     43 /* Dark mode is default, but define explicitly */
     44 @media (prefers-color-scheme: dark) {
     45   :root {
     46     color-scheme: dark;
     47   }
     48 }
     49 
     50 /* Typography scale */
     51 :root {
     52   --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;
     53   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     54   
     55   --text-xs: 0.75rem;
     56   --text-sm: 0.875rem;
     57   --text-base: 1rem;
     58   --text-lg: 1.125rem;
     59   --text-xl: 1.25rem;
     60   --text-2xl: 1.5rem;
     61   --text-3xl: 2rem;
     62   
     63   --leading-tight: 1.25;
     64   --leading-normal: 1.5;
     65   --leading-relaxed: 1.75;
     66 }
     67 
     68 /* Spacing scale */
     69 :root {
     70   --space-1: 0.25rem;
     71   --space-2: 0.5rem;
     72   --space-3: 0.75rem;
     73   --space-4: 1rem;
     74   --space-6: 1.5rem;
     75   --space-8: 2rem;
     76   --space-12: 3rem;
     77   --space-16: 4rem;
     78 }
     79 
     80 /* Utility classes */
     81 .text-primary { color: var(--text-primary); }
     82 .text-secondary { color: var(--text-secondary); }
     83 .text-muted { color: var(--text-muted); }
     84 .text-accent { color: var(--accent-primary); }
     85 .text-success { color: var(--color-success); }
     86 .text-warning { color: var(--color-warning); }
     87 .text-error { color: var(--color-error); }
     88 .text-info { color: var(--color-info); }
     89 
     90 .bg-primary { background-color: var(--bg-primary); }
     91 .bg-secondary { background-color: var(--bg-secondary); }
     92 .bg-elevated { background-color: var(--bg-elevated); }
     93 
     94 /* Link styles */
     95 a {
     96   color: var(--accent-secondary);
     97   text-decoration: none;
     98   transition: color 0.15s ease;
     99 }
    100 
    101 a:hover {
    102   color: var(--accent-tertiary);
    103   text-decoration: underline;
    104 }
    105 
    106 /* Selection */
    107 ::selection {
    108   background-color: var(--selection-bg);
    109   color: var(--text-primary);
    110 }
    111 
    112 /* Scrollbar */
    113 ::-webkit-scrollbar {
    114   width: 8px;
    115   height: 8px;
    116 }
    117 
    118 ::-webkit-scrollbar-track {
    119   background: var(--scrollbar-track);
    120 }
    121 
    122 ::-webkit-scrollbar-thumb {
    123   background: var(--scrollbar-thumb);
    124   border-radius: 4px;
    125 }
    126 
    127 ::-webkit-scrollbar-thumb:hover {
    128   background: var(--border-default);
    129 }