Observatory - defuss-shadcn

Hill Observatory, public nights
The Look select switches the sky: Night sky (a Shader starfield), Red light (everything in red on black - what observers use so their eyes stay dark-adapted) and Day visit (light, the clouds drifting). The moon's phase is CSS, the brightest objects are drawn by magnitude.
<style>
  @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
  /* Hill Observatory: a hill outside town with a 60 cm telescope and public nights on Fridays. Layout: the sky as
     the hero with tonight's conditions beside the title, a table of what is up by brightness, a constellation card
     with a hint, the next public night as a ticket. */
  #sc-observatory {
    --background: oklch(0.16 0.04 265);
    --foreground: oklch(0.95 0.015 250);
    --card: oklch(0.21 0.045 265);
    --card-foreground: var(--foreground);
    --muted: oklch(0.24 0.045 265);
    --muted-foreground: oklch(0.76 0.03 255);
    --border: oklch(0.34 0.05 265);
    --input: var(--border);
    --primary: oklch(0.86 0.1 85);
    --primary-foreground: oklch(0.16 0.04 265);
    --secondary: oklch(0.26 0.05 265);
    --secondary-foreground: var(--foreground);
    --accent: oklch(0.86 0.1 85);
    --accent-foreground: oklch(0.16 0.04 265);
    --ring: var(--primary);
    --radius: 0.75rem;
    --radius-sm: max(0px, calc(var(--radius) - 4px));
    --radius-md: max(0px, calc(var(--radius) - 2px));
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --ob-moon: oklch(0.95 0.02 90);
    --ob-shadow: oklch(0.16 0.04 265);
    --ob-star: oklch(0.95 0.03 90);
    color-scheme: dark;
    box-sizing: border-box;
    width: 100%;
    overflow-x: clip;
    padding: 0 0 clamp(2rem, 5vw, 4rem);
    background: var(--background);
    color: var(--foreground);
    font-family: 'IBM Plex Sans', var(--font-sans);
  }
  #sc-observatory[data-look='red'] {
    --background: oklch(0.12 0.03 25);
    --foreground: oklch(0.62 0.21 27);
    --card: oklch(0.16 0.05 25);
    --muted: oklch(0.18 0.05 25);
    --muted-foreground: oklch(0.5 0.17 27);
    --border: oklch(0.3 0.09 27);
    --primary: oklch(0.62 0.21 27);
    --primary-foreground: oklch(0.12 0.03 25);
    --secondary: oklch(0.2 0.06 25);
    --secondary-foreground: oklch(0.62 0.21 27);
    --accent: oklch(0.62 0.21 27);
    --accent-foreground: oklch(0.12 0.03 25);
    --ob-moon: oklch(0.62 0.21 27);
    --ob-shadow: oklch(0.12 0.03 25);
    --ob-star: oklch(0.62 0.21 27);
  }
  #sc-observatory[data-look='day'] {
    color-scheme: light;
    --background: oklch(0.88 0.06 235);
    --foreground: oklch(0.24 0.07 260);
    --card: oklch(0.97 0.015 235);
    --muted: oklch(0.92 0.03 235);
    --muted-foreground: oklch(0.42 0.06 255);
    --border: oklch(0.24 0.07 260 / 0.2);
    --primary: oklch(0.42 0.14 260);
    --primary-foreground: oklch(0.97 0.015 235);
    --secondary: oklch(0.92 0.03 235);
    --secondary-foreground: oklch(0.24 0.07 260);
    --accent: oklch(0.82 0.13 80);
    --accent-foreground: oklch(0.24 0.07 260);
    --ob-moon: oklch(0.99 0.01 90);
    --ob-shadow: oklch(0.8 0.05 235);
    --ob-star: oklch(0.42 0.14 260);
  }
  #sc-observatory .ob-only {
    display: none;
  }
  #sc-observatory:not([data-look='day']) .ob-only[data-for='night'],
  #sc-observatory[data-look='day'] .ob-only[data-for='day'] {
    display: block;
  }
  #sc-observatory[data-look='red'] .ob-only[data-for='night'] {
    filter: grayscale(1) sepia(1) hue-rotate(-50deg) saturate(6) brightness(0.7);
  }
  #sc-observatory .ob-page {
    display: flex;
    flex-direction: column;
    gap: clamp(3.5rem, 8vw, 6rem);
    box-sizing: content-box;
    max-width: 72rem;
    margin: clamp(3.5rem, 8vw, 6rem) auto 0;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
  }
  #sc-observatory [hidden] {
    display: none !important;
  }
  /* the Site Header: over the sky - the telescope and the name in Unbounded, the sections, the look and the mode */
  #sc-observatory .ob-bar {
    grid-column: 1 / -1;
    align-self: start;
    background: none;
    color: inherit;
  }
  #sc-observatory .mk-header-inner {
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    max-width: none;
    min-height: 4.5rem;
    padding: 0;
  }
  #sc-observatory :is(.mk-header-brand, .mk-footer-brand) {
    gap: 0.6rem;
    color: inherit;
  }
  #sc-observatory :is(.mk-header-brand, .mk-footer-brand) svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary);
  }
  #sc-observatory :is(.mk-header-name, .mk-footer-brand-name) {
    color: inherit;
    font:
      800 1.05rem/1 'Unbounded',
      sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  #sc-observatory .mk-header-nav {
    display: flex;
    margin-inline-start: auto;
  }
  #sc-observatory .nav-menu-link {
    color: inherit;
    font-size: 0.9375rem;
  }
  #sc-observatory .mk-header-actions {
    gap: 0.5rem;
  }
  /* the sky */
  #sc-observatory .ob-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: end;
    gap: 2rem;
    min-height: 40rem;
    padding: 1.25rem max(clamp(1rem, 3vw, 2.5rem), calc((100% - 72rem) / 2)) clamp(2.5rem, 6vw, 4.5rem);
    overflow: clip;
  }
  /* the sky fades into the page below it */
  #sc-observatory .ob-hero > .shader {
    mask-image: linear-gradient(#000 72%, transparent);
  }
  #sc-observatory .ob-hero h1 {
    margin: 0;
    font:
      800 clamp(2.8rem, 7.5vw, 5.75rem)/0.92 'Unbounded',
      sans-serif;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  #sc-observatory .ob-hero p {
    max-width: 30rem;
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--muted-foreground);
  }
  /* the day sky stays bright in dark mode: the light text there sits on a pane of the night ground */
  .dark #sc-observatory[data-look='day'] .ob-hero p {
    width: fit-content;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--background) 62%, transparent);
    backdrop-filter: blur(8px);
    color: var(--foreground);
  }
  /* tonight: the moon, the seeing, the times */
  #sc-observatory .ob-tonight {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--card) 80%, transparent);
    backdrop-filter: blur(6px);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8125rem;
    rotate: 1.5deg;
  }
  #sc-observatory .ob-tonight h2 {
    margin: 0;
    font:
      500 0.75rem/1 'IBM Plex Mono',
      monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
  #sc-observatory .ob-moon {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  #sc-observatory .ob-moon-disc {
    flex: none;
    width: 3.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(circle at 22% 50%, var(--ob-shadow) 0 38%, transparent 39%),
      radial-gradient(circle at 60% 35%, color-mix(in oklch, var(--ob-moon) 85%, black) 0 8%, transparent 9%),
      radial-gradient(circle at 45% 70%, color-mix(in oklch, var(--ob-moon) 88%, black) 0 6%, transparent 7%),
      var(--ob-moon);
    box-shadow: 0 0 1.5rem color-mix(in oklch, var(--ob-moon) 40%, transparent);
  }
  #sc-observatory .ob-tonight dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
  }
  #sc-observatory .ob-tonight dt {
    color: var(--muted-foreground);
  }
  #sc-observatory .ob-tonight dd {
    margin: 0;
    text-align: end;
    font-variant-numeric: tabular-nums;
  }
  /* what is up, by brightness: the smaller the magnitude, the bigger the dot */
  #sc-observatory .ob-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    margin-block-end: 1.25rem;
  }
  #sc-observatory .ob-head h2 {
    margin: 0;
    font:
      800 clamp(1.6rem, 3.5vw, 2.4rem)/1 'Unbounded',
      sans-serif;
    letter-spacing: -0.02em;
  }
  #sc-observatory .ob-head p {
    margin: 0;
    color: var(--muted-foreground);
  }
  #sc-observatory .ob-up {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
  }
  #sc-observatory .ob-up th {
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid var(--border);
    text-align: start;
    font:
      500 0.6875rem/1 'IBM Plex Mono',
      monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
  #sc-observatory .ob-up td {
    padding: 0.8rem 0.75rem;
    border-block-end: 1px solid var(--border);
  }
  #sc-observatory .ob-up td:nth-child(n + 3) {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
  }
  #sc-observatory .ob-dot {
    display: inline-block;
    width: calc((6 - var(--mag)) * 0.32rem);
    aspect-ratio: 1;
    margin-inline-end: 0.6rem;
    border-radius: 50%;
    background: var(--ob-star);
    box-shadow: 0 0 0.6rem var(--ob-star);
    vertical-align: middle;
  }
  /* the constellation, pinned up, and how to find it */
  #sc-observatory .ob-find {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
  }
  #sc-observatory .ob-chart {
    position: relative;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    rotate: -2deg;
    box-shadow: 0 1.5rem 2.5rem -1.5rem oklch(0 0 0 / 0.6);
  }
  #sc-observatory .ob-chart::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: calc(50% - 0.5rem);
    width: 1rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 2px 3px oklch(0 0 0 / 0.5);
  }
  #sc-observatory .ob-chart svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--ob-star);
  }
  #sc-observatory .ob-chart figcaption {
    margin-block-start: 0.5rem;
    font:
      500 0.75rem/1 'IBM Plex Mono',
      monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
  #sc-observatory .ob-bubble {
    position: relative;
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1.5rem;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 1.15rem;
    line-height: 1.4;
    rotate: 1.5deg;
  }
  #sc-observatory .ob-bubble::after {
    content: '';
    position: absolute;
    left: -1rem;
    top: 1.6rem;
    width: 1.3rem;
    height: 1.3rem;
    background: inherit;
    clip-path: polygon(100% 0, 100% 100%, 0 30%);
  }
  /* the next public night */
  #sc-observatory .ob-ticket {
    --shape-cut: 0.9rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.75rem;
    padding: 1.5rem 2.25rem;
    background: var(--primary);
    color: var(--primary-foreground);
    rotate: -1.2deg;
  }
  #sc-observatory .ob-ticket b {
    font:
      800 clamp(1.8rem, 4vw, 2.8rem)/0.95 'Unbounded',
      sans-serif;
  }
  #sc-observatory .ob-ticket small {
    display: block;
    font:
      500 0.75rem/1.4 'IBM Plex Mono',
      monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  #sc-observatory .ob-ticket .btn {
    background: var(--primary-foreground);
    color: var(--primary);
  }
  /* the Site Footer: how to get up the hill, when the dome opens, tonight's sky, the club and its legal notes */
  #sc-observatory .mk-footer {
    background: none;
    color: inherit;
  }
  #sc-observatory .mk-footer-inner {
    max-width: none;
    padding: 2rem 0 0;
    border-block-start: 1px solid var(--border);
  }
  #sc-observatory .mk-footer-heading {
    color: inherit;
    font:
      500 0.75rem/1.3 'IBM Plex Mono',
      monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  #sc-observatory .mk-footer address {
    font-style: normal;
    line-height: 1.5;
  }
  #sc-observatory .ob-note {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.5;
  }
  #sc-observatory .ob-hours {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    font-size: 0.9375rem;
  }
  #sc-observatory .ob-hours dt {
    color: var(--muted-foreground);
    font:
      500 0.75rem/1.4 'IBM Plex Mono',
      monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  #sc-observatory .ob-hours dt:not(:first-child) {
    margin-block-start: 0.5rem;
  }
  #sc-observatory .ob-hours dd {
    margin: 0;
  }
  #sc-observatory .mk-footer-list :is(a, button) {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  #sc-observatory .mk-footer-list :is(a, button):is(:hover, :focus-visible) {
    color: var(--primary);
  }
  #sc-observatory .mk-footer-rule {
    margin: 0;
    background: var(--border);
  }
  #sc-observatory .mk-footer-copy {
    color: var(--muted-foreground);
  }
  /* the dialogs: the booking and the legal notes, on the look's card */
  #sc-observatory .sc-dialog {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--card-foreground);
  }
  #sc-observatory .sc-dialog .dialog-title {
    font:
      800 1.35rem/1.15 'Unbounded',
      sans-serif;
    letter-spacing: -0.01em;
  }
  #sc-observatory .sc-dialog .dialog-description {
    color: var(--muted-foreground);
  }
  #sc-observatory :is(.sc-form, .sc-done) {
    display: grid;
    gap: 1rem;
  }
  #sc-observatory .sc-row {
    display: grid;
    gap: 0.4rem;
  }
  #sc-observatory .sc-dialog:not([data-sent]) .sc-done,
  #sc-observatory .sc-dialog[data-sent] .sc-form {
    display: none;
  }
  #sc-observatory .sc-legal {
    display: grid;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  #sc-observatory .sc-legal :is(p, address) {
    margin: 0;
    font-style: normal;
  }
  #sc-observatory .sc-legal a {
    color: inherit;
  }
  @media (max-width: 48rem) {
    #sc-observatory :is(.ob-hero, .ob-find) {
      grid-template-columns: 1fr;
    }
    #sc-observatory .mk-header-inner {
      column-gap: 0.75rem;
    }
    #sc-observatory .mk-header-name {
      font-size: 0.8125rem;
    }
    #sc-observatory .mk-header-nav {
      order: 3;
      width: 100%;
      margin-inline-start: -0.75rem;
    }
    #sc-observatory .mk-header-actions {
      margin-inline-start: auto;
    }
    #sc-observatory .ob-ticket {
      grid-template-columns: 1fr;
    }
    #sc-observatory .ob-up th:nth-child(4),
    #sc-observatory .ob-up td:nth-child(4) {
      display: none;
    }
  }
  /* light or dark: the Swap writes the page's dark class - every look has a light and a dark palette */
  #sc-observatory .site-mode {
    flex: none;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--foreground);
  }
  #sc-observatory .site-mode:hover {
    background: var(--accent);
    color: var(--accent-foreground);
  }
  /* -- modes: each look in light and dark, derived from the palettes above (the other mode of each look) -- */
  .dark #sc-observatory[data-look='night'] {
    --accent: oklch(0.25 0.05 85);
    --accent-foreground: oklch(0.95 0.015 250);
  }
  :root:not(.dark) #sc-observatory[data-look='night'] {
    color-scheme: light;
    --background: oklch(0.985 0.025 265);
    --foreground: oklch(0.2 0.015 250);
    --card: oklch(0.997 0.025 265);
    --card-foreground: oklch(0.2 0.015 250);
    --muted: oklch(0.95 0.025 265);
    --muted-foreground: oklch(0.46 0.03 255);
    --border: oklch(0.9 0.025 265);
    --input: oklch(0.88 0.025 265);
    --primary: oklch(0.54 0.1 85);
    --primary-foreground: oklch(0.985 0.005 85);
    --secondary: oklch(0.955 0.025 265);
    --secondary-foreground: oklch(0.25 0.015 250);
    --accent: oklch(0.94 0.025 85);
    --accent-foreground: oklch(0.2 0.015 250);
    --ring: oklch(0.58 0.1 85);
    --ob-moon: oklch(0.205 0.02 90);
    --ob-shadow: oklch(0.984 0.03 265);
    --ob-star: oklch(0.205 0.03 90);
    --popover: oklch(0.997 0 0);
    --popover-foreground: oklch(0.2 0 0);
  }
  .dark #sc-observatory[data-look='red'] {
    --muted-foreground: oklch(0.62 0.17 27);
    --secondary-foreground: oklch(0.635 0.21 27);
    --accent: oklch(0.24 0.05 27);
    --accent-foreground: oklch(0.65 0.21 27);
  }
  :root:not(.dark) #sc-observatory[data-look='red'] {
    color-scheme: light;
    --background: oklch(0.985 0.025 25);
    --foreground: oklch(0.2 0.03 27);
    --card: oklch(0.997 0.025 25);
    --card-foreground: oklch(0.2 0.03 27);
    --muted: oklch(0.95 0.025 25);
    --muted-foreground: oklch(0.46 0.03 27);
    --border: oklch(0.9 0.025 27);
    --input: oklch(0.88 0.025 27);
    --primary: oklch(0.42 0.21 27);
    --primary-foreground: oklch(0.985 0.005 27);
    --secondary: oklch(0.955 0.025 25);
    --secondary-foreground: oklch(0.25 0.03 27);
    --accent: oklch(0.94 0.025 27);
    --accent-foreground: oklch(0.2 0.03 27);
    --ring: oklch(0.42 0.21 27);
    --ob-moon: oklch(0.42 0.21 27);
    --ob-shadow: oklch(0.993 0.03 25);
    --ob-star: oklch(0.42 0.21 27);
    --popover: oklch(0.997 0 0);
    --popover-foreground: oklch(0.2 0 0);
  }
  :root:not(.dark) #sc-observatory[data-look='day'] {
    --accent: oklch(0.86 0.045 80);
  }
  .dark #sc-observatory[data-look='day'] {
    color-scheme: dark;
    --background: oklch(0.17 0.035 235);
    --foreground: oklch(0.94 0.03 260);
    --card: oklch(0.205 0.015 235);
    --card-foreground: oklch(0.94 0.03 260);
    --muted: oklch(0.24 0.03 235);
    --muted-foreground: oklch(0.74 0.03 255);
    --border: oklch(0.95 0.02 260 / 0.14);
    --input: oklch(0.95 0.02 260 / 0.14);
    --primary: oklch(0.66 0.14 260);
    --primary-foreground: oklch(0.17 0.03 260);
    --secondary: oklch(0.25 0.03 235);
    --secondary-foreground: oklch(0.9 0.03 260);
    --accent: oklch(0.26 0.045 80);
    --accent-foreground: oklch(0.94 0.03 260);
    --ring: oklch(0.66 0.14 260);
    --ob-moon: oklch(0.165 0.01 90);
    --ob-shadow: oklch(0.8 0.05 235);
    --ob-star: oklch(0.66 0.14 260);
    --popover: oklch(0.215 0 0);
    --popover-foreground: oklch(0.94 0 0);
  }
  /* -- modes: end -- */
  /* the hero is the night sky in both modes: in light mode it keeps the look's dark palette, the page below turns light */
  :root:not(.dark) #sc-observatory:is([data-look='night'], [data-look='red']) .ob-hero {
    color-scheme: dark;
    --background: oklch(0.16 0.04 265);
    --foreground: oklch(0.95 0.015 250);
    --card: oklch(0.21 0.045 265);
    --card-foreground: var(--foreground);
    --muted: oklch(0.24 0.045 265);
    --muted-foreground: oklch(0.76 0.03 255);
    --border: oklch(0.34 0.05 265);
    --input: var(--border);
    --primary: oklch(0.86 0.1 85);
    --primary-foreground: oklch(0.16 0.04 265);
    --accent: oklch(0.27 0.05 265);
    --accent-foreground: var(--foreground);
    background: var(--background);
    color: var(--foreground);
  }
  :root:not(.dark) #sc-observatory[data-look='red'] .ob-hero {
    --background: oklch(0.12 0.03 25);
    --foreground: oklch(0.66 0.21 27);
    --card: oklch(0.16 0.05 25);
    --muted: oklch(0.18 0.05 25);
    --muted-foreground: oklch(0.62 0.17 27);
    --border: oklch(0.3 0.09 27);
    --primary: oklch(0.62 0.21 27);
    --primary-foreground: oklch(0.12 0.03 25);
    --accent: oklch(0.22 0.06 25);
  }
</style>
<div id="sc-observatory" data-look="night">
  <section class="ob-hero" aria-labelledby="ob-title">
    <div
      class="shader ob-only"
      data-for="night"
      data-variant="background"
      data-effect="starfield"
      data-speed="0.25"
      data-warp="0.08"
      data-twinkle="0.8"
      data-density="0.5"
      data-fps="30"
      aria-hidden="true"
    ></div>
    <div
      class="shader ob-only"
      data-for="day"
      data-variant="background"
      data-effect="clouds"
      data-speed="0.3"
      data-fps="30"
      aria-hidden="true"
    ></div>
    <header class="mk-header ob-bar">
      <div class="mk-header-inner">
        <a class="mk-header-brand" href="#sc-observatory"
          ><i data-lucide="telescope"></i><span class="mk-header-name">Hill Observatory</span></a
        >
        <nav class="mk-header-nav" aria-label="Site">
          <ul class="nav-menu-list">
            <li class="nav-menu-item"><a class="nav-menu-link" href="#ob-up">Tonight</a></li>
            <li class="nav-menu-item"><a class="nav-menu-link" href="#ob-find">Find it</a></li>
            <li class="nav-menu-item"><a class="nav-menu-link" href="#ob-night">Public nights</a></li>
            <li class="nav-menu-item"><a class="nav-menu-link" href="#ob-visit">Visit</a></li>
          </ul>
        </nav>
        <div class="mk-header-actions">
          <select class="select" data-size="sm" data-site-look aria-label="Look" style="width: auto">
            <option value="night">Night sky</option>
            <option value="red">Red light</option>
            <option value="day">Day visit</option>
          </select>
          <label class="swap site-mode" data-variant="rotate" data-size="sm">
            <input type="checkbox" data-site-mode aria-label="Dark mode" />
            <span class="swap-on" aria-hidden="true"><i data-lucide="moon"></i></span>
            <span class="swap-off" aria-hidden="true"><i data-lucide="sun"></i></span>
          </label>
        </div>
      </div>
    </header>
    <div>
      <h1 id="ob-title">Clear skies from nine tonight</h1>
      <p
        >A 60 cm telescope on the hill above town, and an astronomer who will point it at whatever you ask - every
        Friday after dark.</p
      >
      <button class="btn" data-size="lg" type="button" commandfor="ob-book" command="show-modal"
        >Book a public night</button
      >
    </div>
    <aside class="ob-tonight" aria-labelledby="ob-tonight-title">
      <h2 id="ob-tonight-title">Tonight · Fri 14 Nov</h2>
      <div class="ob-moon"
        ><span class="ob-moon-disc" role="img" aria-label="The moon, waxing gibbous"></span
        ><span>Waxing gibbous<br />78 % lit, sets 03:12</span></div
      >
      <dl>
        <dt>Sunset</dt>
        <dd>16:38</dd>
        <dt>Astronomical dusk</dt>
        <dd>18:34</dd>
        <dt>Seeing</dt>
        <dd>1.8″</dd>
        <dt>Cloud cover after 21:00</dt>
        <dd>10 %</dd>
      </dl>
    </aside>
  </section>
  <div class="ob-page">
    <section id="ob-up" aria-labelledby="ob-up-title">
      <div class="ob-head">
        <h2 id="ob-up-title">What is up</h2>
        <p>Brightest first - a smaller magnitude is a brighter object</p>
      </div>
      <div class="overflow-x-auto">
        <table class="ob-up">
          <thead>
            <tr
              ><th scope="col">Object</th><th scope="col">Type</th><th scope="col">Magnitude</th
              ><th scope="col">Best seen</th></tr
            >
          </thead>
          <tbody>
            <tr
              ><td><span class="ob-dot" style="--mag: 0.9" aria-hidden="true"></span>Saturn</td><td>Planet</td
              ><td>0.9</td><td>19:30, south, 32°</td></tr
            >
            <tr
              ><td><span class="ob-dot" style="--mag: 1.6" aria-hidden="true"></span>Pleiades (M45)</td
              ><td>Open cluster</td><td>1.6</td><td>22:00, east, 48°</td></tr
            >
            <tr
              ><td><span class="ob-dot" style="--mag: 3.4" aria-hidden="true"></span>Andromeda Galaxy (M31)</td
              ><td>Galaxy</td><td>3.4</td><td>20:00, overhead, 78°</td></tr
            >
            <tr
              ><td><span class="ob-dot" style="--mag: 4" aria-hidden="true"></span>Orion Nebula (M42)</td><td>Nebula</td
              ><td>4.0</td><td>after 23:30, south-east</td></tr
            >
          </tbody>
        </table>
      </div>
    </section>
    <section id="ob-find" class="ob-find" aria-labelledby="ob-find-title">
      <figure class="ob-chart" style="margin: 0">
        <svg viewBox="0 0 320 180" role="img" aria-label="Cassiopeia: five stars in the shape of a W">
          <polyline
            points="30,60 95,120 160,80 225,130 290,50"
            fill="none"
            stroke="currentColor"
            stroke-width="1.2"
            stroke-dasharray="4 5"
            opacity="0.6"
          />
          <circle cx="30" cy="60" r="5" fill="currentColor" />
          <circle cx="95" cy="120" r="6" fill="currentColor" />
          <circle cx="160" cy="80" r="7" fill="currentColor" />
          <circle cx="225" cy="130" r="5.5" fill="currentColor" />
          <circle cx="290" cy="50" r="4.5" fill="currentColor" />
          <circle cx="70" cy="25" r="1.5" fill="currentColor" opacity="0.6" />
          <circle cx="200" cy="30" r="1.2" fill="currentColor" opacity="0.6" />
          <circle cx="260" cy="160" r="1.4" fill="currentColor" opacity="0.6" />
        </svg>
        <figcaption>Cassiopeia · high in the north-east</figcaption>
      </figure>
      <div>
        <p class="ob-bubble"
          >Find the W first. Follow its second V down and to the right - the faint smudge there is the Andromeda Galaxy,
          2.5 million light-years away.</p
        >
        <h2 id="ob-find-title" class="ob-head" style="margin: 0"
          ><span
            style="
              font:
                800 clamp(1.6rem, 3.5vw, 2.4rem)/1 'Unbounded',
                sans-serif;
              letter-spacing: -0.02em;
            "
            >Find it yourself</span
          ></h2
        >
      </div>
    </section>
    <section id="ob-night" class="ob-ticket ticket" aria-labelledby="ob-night-title">
      <b id="ob-night-title">Fri 14 Nov</b>
      <span
        ><small>Public night · doors 19:30 · 2 hours</small>Up to 24 visitors, warm clothes, no telescope needed.
        Cancelled if it is cloudy - we email at 17:00.</span
      >
      <button class="btn" type="button" commandfor="ob-book" command="show-modal">€6 · Book</button>
    </section>
    <footer id="ob-visit" class="mk-footer">
      <div class="mk-footer-inner">
        <nav class="mk-footer-nav" aria-label="Footer">
          <div class="mk-footer-col">
            <h3 class="mk-footer-heading">Find the hill</h3>
            <address>Hill Observatory<br />Sternwartenweg 3<br />412 m above sea level</address>
            <p class="ob-note">Bus 7 to Sternwarte, then ten minutes uphill on foot.</p>
          </div>
          <div class="mk-footer-col">
            <h3 class="mk-footer-heading">When we open</h3>
            <dl class="ob-hours">
              <dt>Public nights</dt>
              <dd>Fridays, doors 19:30</dd>
              <dt>Sun telescope</dt>
              <dd>Sundays 14:00 - 16:00</dd>
              <dt>Cloudy?</dt>
              <dd>We email at 17:00</dd>
            </dl>
          </div>
          <div class="mk-footer-col">
            <h3 class="mk-footer-heading">Tonight</h3>
            <ul class="mk-footer-list">
              <li><a href="#ob-up">What is up</a></li>
              <li><a href="#ob-find">Find it yourself</a></li>
              <li><a href="#ob-night">The next public night</a></li>
              <li><button type="button" commandfor="ob-book" command="show-modal">Book a night</button></li>
            </ul>
          </div>
          <div class="mk-footer-col">
            <h3 class="mk-footer-heading">The club</h3>
            <ul class="mk-footer-list">
              <li><a href="mailto:night@example.com">night@example.com</a></li>
              <li><button type="button" commandfor="ob-imprint" command="show-modal">Imprint</button></li>
              <li><button type="button" commandfor="ob-privacy" command="show-modal">Privacy</button></li>
            </ul>
          </div>
        </nav>
        <hr class="separator mk-footer-rule" />
        <div class="mk-footer-bottom">
          <a class="mk-footer-brand" href="#sc-observatory"
            ><i data-lucide="telescope"></i><span class="mk-footer-brand-name">Hill Observatory</span></a
          >
          <div class="mk-footer-meta">
            <p class="mk-footer-copy">Bring a torch with a red filter - white light ruins everyone's night vision.</p>
          </div>
        </div>
      </div>
    </footer>
  </div>
  <dialog class="dialog sc-dialog" id="ob-book" aria-labelledby="ob-book-title">
    <div class="dialog-content">
      <form class="sc-form" data-sc-form>
        <div class="dialog-header">
          <h2 class="dialog-title" id="ob-book-title">Book a public night</h2>
          <p class="dialog-description"
            >Two hours at the 60 cm telescope with an astronomer. €6 a person, paid at the door.</p
          >
        </div>
        <div class="sc-row">
          <label class="label" for="ob-book-night">Which Friday?</label>
          <select class="select" id="ob-book-night" name="night">
            <option>Fri 14 Nov - 6 places left</option>
            <option>Fri 21 Nov - 15 places left</option>
            <option>Fri 28 Nov - 22 places left</option>
          </select>
        </div>
        <div class="sc-row">
          <label class="label" for="ob-book-people">How many of you?</label>
          <input
            class="input"
            id="ob-book-people"
            name="people"
            type="number"
            min="1"
            max="6"
            value="2"
            inputmode="numeric"
            required
          />
        </div>
        <div class="sc-row">
          <label class="label" for="ob-book-name">Name</label>
          <input class="input" id="ob-book-name" name="name" autocomplete="name" required />
        </div>
        <div class="sc-row">
          <label class="label" for="ob-book-mail">Email - for the cloud warning</label>
          <input class="input" id="ob-book-mail" name="email" type="email" autocomplete="email" required />
        </div>
        <div class="dialog-footer">
          <button class="btn" data-variant="outline" type="button" commandfor="ob-book" command="close">Cancel</button>
          <button class="btn" type="submit">Book my places</button>
        </div>
      </form>
      <div class="sc-done" tabindex="-1">
        <h2 class="dialog-title">See you on the hill</h2>
        <p class="dialog-description"
          >Doors open at 19:30. If the sky closes, we email you at 17:00 and your places move to the next clear Friday.
          Dress for a cold dome.</p
        >
        <div class="dialog-footer">
          <button class="btn" type="button" commandfor="ob-book" command="close">Close</button>
        </div>
      </div>
    </div>
  </dialog>
  <dialog class="dialog sc-dialog" id="ob-imprint" aria-labelledby="ob-imprint-title">
    <div class="dialog-content">
      <div class="dialog-header">
        <h2 class="dialog-title" id="ob-imprint-title">Imprint</h2>
        <p class="dialog-description">Who runs this site</p>
      </div>
      <div class="sc-legal">
        <address>Hill Observatory, a registered club<br />Sternwartenweg 3<br />412 m above sea level</address>
        <p>Chair of the board: Dr. Lea Brandt<br />Register of associations: VR 0000</p>
        <p>Contact: <a href="mailto:night@example.com">night@example.com</a></p>
      </div>
      <div class="dialog-footer">
        <button class="btn" type="button" commandfor="ob-imprint" command="close">Close</button>
      </div>
    </div>
  </dialog>
  <dialog class="dialog sc-dialog" id="ob-privacy" aria-labelledby="ob-privacy-title">
    <div class="dialog-content">
      <div class="dialog-header">
        <h2 class="dialog-title" id="ob-privacy-title">Privacy</h2>
        <p class="dialog-description">What we keep, and why</p>
      </div>
      <div class="sc-legal">
        <p>This site sets no cookies and runs no trackers. The fonts come from Google Fonts.</p>
        <p
          >For a booking we keep your name and email until the night is over - to send the cloud warning at 17:00 - and
          delete them the week after. We never pass them on.</p
        >
        <p>Questions or a request to delete: <a href="mailto:privacy@example.com">privacy@example.com</a></p>
      </div>
      <div class="dialog-footer">
        <button class="btn" type="button" commandfor="ob-privacy" command="close">Close</button>
      </div>
    </div>
  </dialog>
</div>
<script type="module">
  // the look: one of the site's designs; a shader reads its colors again on defuss-theme-change
  addEventListener('DOMContentLoaded', () => {
    // light or dark: the switch writes the page's dark class (every look has both palettes); it follows the class when
    // something else sets it (the docs card follows the site's mode)
    const siteMode = df$('#sc-observatory [data-site-mode]');
    const syncMode = () => siteMode.prop('checked', document.documentElement.classList.contains('dark'));
    siteMode.on('change', () => {
      document.documentElement.classList.toggle('dark', siteMode.prop('checked'));
      document.dispatchEvent(new CustomEvent('defuss-theme-change'));
    });
    new MutationObserver(syncMode).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    syncMode();

    // the booking form: sending shows the confirmation (a demo - nothing leaves the page); closing resets it
    df$('#sc-observatory [data-sc-form]').each((_i, form) => {
      const dialog = df$(form).closest('dialog');
      df$(form).on('submit', (event) => {
        event.preventDefault();
        dialog.attr('data-sent', '');
        dialog.find('.sc-done').get(0).focus();
      });
      dialog.on('close', () => {
        dialog.attr('data-sent', null);
        form.reset();
      });
    });

    const root = df$('#sc-observatory').get(0);
    const look = df$('#sc-observatory [data-site-look]');
    look.val(root.dataset.look).on('change', () => {
      root.dataset.look = look.val();
      document.dispatchEvent(new CustomEvent('defuss-theme-change'));
    });
  });
</script>
Composed from Button, Select, two Shaders (starfield at night, clouds by day) and the ticket shape of shapes.css. The moon is radial gradients, the constellation an inline SVG, the dots in the table are sized by the magnitude.
Comments, ideas or improvements? Edit this page's source on GitHub