Engineering Outreach Portal — Design Exploration

by malatmals

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap" rel="stylesheet">

<!-- =========================================================
     VIEW SWITCHER (demo scaffolding, not part of the real portal)
     ========================================================= -->
<div class="view-switch" role="tablist" aria-label="Demo views">
  <button role="tab" aria-current="true" data-view="login">Login</button>
  <button role="tab" data-view="dashboard">Dashboard</button>
  <button role="tab" data-view="docs">Docs</button>
</div>

<button class="diag-toggle" id="diagToggle" title="Open theme diagnostics">◱ Theme Inspector</button>

<!-- =========================================================
     VIEW: LOGIN
     ========================================================= -->
<section class="view" data-view="login" data-active="true">
  <div class="login-wrap">
    <div class="login-marketing">
      <div>
        <span class="eyebrow">Engineering Outreach</span>
        <h1>Remote lectures for working engineers.</h1>
        <p class="lede">Pre-recorded coursework from University of Idaho's College of Engineering. Watch on your schedule; your cohort, your pace.</p>
      </div>
      <div class="login-stats">
        <div class="stat"><div class="n">40+</div><div class="l">Courses / term</div></div>
        <div class="stat"><div class="n">12</div><div class="l">Degree programs</div></div>
        <div class="stat"><div class="n">24/7</div><div class="l">Lecture access</div></div>
      </div>
    </div>

    <div class="login-card-wrap">
      <div class="login-card">
        <header>
          <div class="brand" style="margin-bottom: 28px;">
            <div...

CSS

/* =========================================================
   GENERATEPRESS GLOBAL COLORS — the 7 canonical variables
   These are the ONLY color primitives the design touches.
   Every Omarchy theme swap just rewrites these 7 values.
   ========================================================= */
:root {
  /* Defaults = Omarchy "Futurism" palette
     (bjarneo/omarchy-futurism-theme colors.toml) */
  --contrast:   #F0F8FF;  /* primary text (foreground) */
  --contrast-2: #AFC3DA;  /* secondary text */
  --contrast-3: #5076B2;  /* borders, placeholders, tertiary */
  --base:       #0A1428;  /* page background */
  --base-2:     #0F1D3A;  /* surface (cards, header) */
  --base-3:     #17294F;  /* elevated / hover / input bg */
  --accent:     #FF40A3;  /* primary interactive */

  /* Extension vars — bonus slots. Not required for the GP mapping
     to work; we add them so the design can express more richness
     without breaking the core 7-slot contract. */
  --accent-2:   #00BFFF;  /* secondary accent (e.g. info) */
  --danger:     #FF40A3;  /* shares accent in Futurism */
  --success:    #00BFFF;

  /* Geometry + motion */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow-1: 0 1px 0 color-mix(in oklab, var(--contrast) 6%, transparent);
  --shadow-2: 0 8px 32px color-mix(in oklab, #000 35%, transparent),
              0 2px 6px color-mix(in oklab, #000 30%, transparent);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Grayscale mode: desaturate everything on the fly.
   Applied by toggling [data-grayscale] on <html>. */
html[data-grayscale] { filter: grayscale(1); }

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--contrast);
  background: var(--base);
  -webkit-font-smoothing:...

JavaScript

/* =========================================================
   THEME REGISTRY
   Each theme is a sparse representation derived from an
   Omarchy colors.toml. In production, these would be fetched
   on demand; here we seed a handful for the demo.
   ========================================================= */
const SEED_THEMES = [
  { id: 'futurism',     name: 'Futurism',     kind: 'stock', author: 'bjarneo',
    toml: { background: '#0A1428', foreground: '#F0F8FF', accent: '#FF40A3',
            c2: '#00BFFF', c3: '#5076B2' } },
  { id: 'tokyo-night',  name: 'Tokyo Night',  kind: 'stock', author: 'basecamp',
    toml: { background: '#1a1b26', foreground: '#c0caf5', accent: '#7aa2f7',
            c2: '#bb9af7', c3: '#565f89' } },
  { id: 'catppuccin',   name: 'Catppuccin',   kind: 'stock', author: 'basecamp',
    toml: { background: '#1e1e2e', foreground: '#cdd6f4', accent: '#cba6f7',
            c2: '#89b4fa', c3: '#6c7086' } },
  { id: 'catppuccin-latte', name: 'Catppuccin Latte', kind: 'stock', author: 'basecamp',
    toml: { background: '#eff1f5', foreground: '#4c4f69', accent: '#8839ef',
            c2: '#1e66f5', c3: '#9ca0b0' } },
  { id: 'gruvbox',      name: 'Gruvbox',      kind: 'stock', author: 'basecamp',
    toml: { background: '#282828', foreground: '#ebdbb2', accent: '#fe8019',
            c2: '#8ec07c', c3: '#928374' } },
  { id: 'nord',         name: 'Nord',         kind: 'stock', author: 'basecamp',
    toml: { background: '#2e3440', foreground: '#eceff4', accent: '#88c0d0',
            c2: '#a3be8c', c3: '#4c566a' } },
  { id: 'rose-pine',    name: 'Rose Pine',    kind: 'stock', author: 'basecamp',
    toml: { background: '#191724', foreground: '#e0def4', accent: '#ebbcba',
            c2: '#9ccfd8', c3: '#6e6a86' } },
  { id: 'everforest',   name: 'Everforest',   kind: 'stock', author: 'basecamp',
    toml: { background: '#2d353b', foreground: '#d3c6aa', accent: '#a7c080',
            c2: '#7fbbb3', c3:...