@stnd/styles 0.5.0

package/_standard-05-rhythm.scss

@@ -0,0 +1,57 @@
+@use "standard-00-variables" as *;
+
+/* ===== BULLETPROOF RHYTHM SYSTEM ===== */
+/* Applied to any container — cascades to children via margin-block-start */
+
+:where(.rhythm) {
+  /* flow-root creates a new Block Formatting Context (BFC).
+     This contains child margins — they won't collapse out of .rhythm.
+     Think of it as "overflow: hidden" but without clipping content. */
+  display: flow-root;
+
+  :where(:is(#{$rhythm-tags})) + :where(:is(#{$rhythm-tags})) {
+    margin-block-start: calc(var(--gap) * 1);
+  }
+
+  > :where(:is(#{$rhythm-double-tags})) + :where(:is(#{$rhythm-simple-tags})),
+  > :where(:is(#{$rhythm-simple-tags})) + :where(:is(#{$rhythm-double-tags})) {
+    margin-block-start: calc(var(--gap) * var(--gap-multiplicator, 2));
+  }
+
+  // EXCEPTIONS
+  //*
+  > :where(:is(#{$rhythm-tags})) ~ :where(:is(h1, h2)) {
+    margin-block-start: calc(
+      var(--gap) * calc(var(--gap-multiplicator, 2) + 3)
+    );
+  }
+
+  > :where(:is(#{$rhythm-tags})) ~ :where(:is(h3, h4, h5, h6)) {
+    margin-block-start: calc(
+      var(--gap) * calc(var(--gap-multiplicator, 2) + 2)
+    );
+  }
+
+  > :where(:is(h1, h2, h3, h4)) + :where(:is(h2, h3, h4, h5, h6)) {
+    margin-block-start: calc(var(--gap) * var(--gap-multiplicator, 2));
+  }
+
+  > :where(:is(h1, h2, h3)) + * {
+    margin-block-start: calc(var(--gap) * var(--gap-multiplicator, 2));
+  }
+
+  > :where(:is(h4, h5, h6)) + * {
+    margin-block-start: calc(var(--gap) * 1);
+  }
+
+  //*/
+
+  .flex > * {
+    margin-block-start: 0;
+  }
+}
+
+/* Individual element overrides */
+.no-rhythm * {
+  margin-block-start: 0;
+}

package/_standard-06-prose.scss

@@ -0,0 +1,289 @@
+@use "standard-00-variables" as *;
+
+/**
+ * @component Prose Layout System
+ * @category Layout
+ * @description Prose-focused layout system for optimal reading experience with proper
+ * line lengths based on typography research (60-75 characters). Uses CSS Grid with
+ * responsive content columns for sidebars, accents, and featured content.
+ * Inspired by fine-art typography and classical book design principles.
+ *
+ * @prop {class} .prose Main article/content container for readable prose
+ * @prop {class} .small Narrow sidebar width container
+ * @prop {class} .accent Accent container with background color
+ * @prop {class} .feature Featured content with larger spacing
+ * @prop {class} .hero Full-width container
+ * @prop {variable} --line-width-xs Extra small (24rem / 384px)
+ * @prop {variable} --line-width-sm Small (32rem / 512px)
+ * @prop {variable} --line-width-md Medium (42rem / 672px) - default
+ * @prop {variable} --line-width-lg Large (50rem / 800px)
+ * @prop {variable} --line-width-xl Extra large (60rem / 960px)
+ *
+ * @example
+ * // Standard article with proper reading width
+ * <article class="prose">
+ *   <h1>Article Title</h1>
+ *   <p>Content here stays within optimal reading width...</p>
+ * </article>
+ *
+ * // Narrow sidebar content
+ * <div class="prose small">
+ *   <p>Short form content</p>
+ * </div>
+ *
+ * // Featured content with emphasis
+ * <section class="prose feature">
+ *   <blockquote>Important quote with extra space</blockquote>
+ * </section>
+ *
+ * @since 0.1.0
+ * @see https://www.rsub.com/blog/how-long-should-a-line-of-text-be/
+ */
+
+/* Prose Layout Design Tokens - Using logical properties */
+
+/* Prose Layout System - Article content grid and positioning */
+/* Inspired by fine-art typography and book design principles */
+
+:where(.prose) {
+  display: grid;
+  align-content: start;
+
+  /* Left-aligned variant — content hugs the left edge */
+  &.left {
+    margin-inline: 0;
+    grid-template-columns:
+      [hero-start feature-start editorial-start content-start] var(
+        --content-width
+      )
+      [content-end editorial-end feature-end] 1fr [hero-end];
+  }
+
+  grid-template-columns:
+    [hero-start] var(--content-width-hero)
+    [feature-start] var(--content-width-feature) [editorial-start] var(
+      --content-width-editorial
+    )
+    [content-start] var(--content-width) [content-end] var(
+      --content-width-editorial
+    )
+    [editorial-end] var(--content-width-feature) [feature-end] var(
+      --content-width-hero
+    )
+    [hero-end];
+
+  transition: grid-template-columns var(--transition);
+
+  position: relative;
+  max-width: var(--prose-max-width, var(--max-width));
+  /*z-index: var(--z-base);*/
+  /* Default content positioning */
+
+  > * {
+    grid-column: content;
+    min-width: 0;
+    /* Prevents grid blowout from code blocks and tables */
+    transition:
+      margin-inline var(--transition),
+      padding-inline var(--transition);
+  }
+
+  > .small,
+  > .container-small,
+  > .callout,
+  > blockquote,
+  > pre,
+  > figure,
+  > p:has(img),
+  > .stnd-code-block {
+    grid-column: content;
+    margin-inline: var(--content-width-sm);
+  }
+
+  table,
+  .scroll:has(table),
+  .editorial {
+    grid-column: editorial;
+    margin-inline: 0;
+    max-width: none;
+  }
+
+  .feature {
+    grid-column: feature;
+    margin-inline: 0;
+    max-width: none;
+  }
+
+  .full,
+  .hero {
+    grid-column: hero;
+    max-width: 100vw;
+  }
+
+  .hero {
+    margin-inline: calc(var(--gap-body) * -1);
+    border-radius: 0 !important;
+
+    > * {
+      margin-inline: 0;
+    }
+  }
+
+  /* =========================== */
+  /* TYPOGRAPHIC NUANCES         */
+  /* =========================== */
+  .video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    /* 16:9 aspect ratio */
+    height: 0;
+    overflow: hidden;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-raised);
+
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+  }
+
+  /* Image gallery layout */
+  &:not(.no-grid) {
+    p:has(img),
+    p:has(video) {
+      display: flex;
+      gap: var(--gap-grid-img);
+      border-radius: var(--radius);
+
+      > * {
+        flex: 1 1 auto;
+        min-width: 1%;
+        min-height: 1%;
+        object-fit: cover;
+      }
+
+      img,
+      img:first-child,
+      img:last-child {
+        margin-inline: auto;
+        flex-grow: 0;
+        /* prevents the image from stretching to fill */
+      }
+
+      br {
+        display: none;
+      }
+    }
+
+    .callout p:has(img),
+    .callout p:has(img) br {
+      display: block;
+    }
+
+    /* Adjacent images get reduced spacing  + var(--img-gap)    */
+    p:has(img) + p:has(img) {
+      margin-block-start: var(--gap-grid-img) !important;
+    }
+  }
+  /* Left-aligned variant — content hugs the left edge */
+  &:not(.no-grid).left p:has(img) img,
+  &:not(.no-grid).left p:has(img) img:first-child,
+  &:not(.no-grid).left p:has(img) img:last-child {
+    margin-inline: 0 !important;
+  }
+
+  /* Note: Page's main title h1:first-child retains spacing via direct child selector */
+  /* The > h1:first-child selector in h1 rule ensures it overrides rhythm's > * margin-reset */
+
+  /* Basic media styling */
+  img,
+  audio,
+  video,
+  iframe {
+    margin: 0;
+    margin-inline: auto;
+    max-inline-size: 100%;
+  }
+
+  p {
+    text-wrap: pretty;
+    overflow-wrap: anywhere;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-wrap: balance;
+  }
+
+  @media (max-width: #{$mobile}) {
+    .container-small,
+    .callout,
+    blockquote,
+    pre,
+    figure,
+    p:has(img),
+    .stnd-code-block {
+      margin-inline: 0 !important;
+    }
+  }
+
+  @media (max-width: #{$small}) {
+    .card.accent,
+    .card.feature,
+    .card.editorial,
+    .card.full {
+      margin-inline: calc(var(--space) * -1);
+      border-radius: 0;
+    }
+  }
+
+  /* Mermaid diagrams */
+  .mermaid {
+    margin-block-end: var(--space);
+    margin-inline: auto;
+    padding: var(--space);
+  }
+
+  p img {
+    max-inline-size: 100%;
+  }
+
+  a {
+    overflow-wrap: break-word;
+  }
+
+  .mycelial-graft {
+    text-decoration: none;
+    border-bottom: 1px dotted var(--color-text-muted);
+    color: inherit;
+    cursor: help;
+    transition: all 0.2s ease;
+
+    &:hover {
+      color: var(--color-primary);
+      border-bottom: 1px solid var(--color-primary);
+      background-color: var(--color-surface-hover);
+    }
+  }
+}
+
+/* Animation keyframes */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/_standard-07-base.scss

@@ -0,0 +1,216 @@
+@use "standard-00-variables" as *;
+
+/* =========================== */
+/* BASE (HTML ROOT)            */
+/* =========================== */
+
+html {
+  /* Use the explicit background-color longhand so transitions target
+     the color property directly (avoids shorthand incompatibilities).
+     Keep font-smoothing here for consistent rendering across color modes. */
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+
+  font-family: var(--font-text), system-ui, sans-serif;
+  font-size: var(--size-base);
+  font-weight: var(--font-weight);
+  letter-spacing: var(--font-letter-spacing);
+
+  line-height: var(--line-height);
+
+  text-rendering: optimizeLegibility;
+  /* kerning & ligatures */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  font-optical-sizing: auto;
+  font-feature-settings: var(--font-feature);
+  font-variation-settings: var(--font-variation);
+
+  text-wrap: pretty;
+  hyphens: none;
+  widows: 2;
+  orphans: 2;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  /* Smoothly transition global surfaces and text color together.
+     Add `will-change` to hint the UA for smoother repainting on theme toggles.
+     Keep motion-reduced users in mind via media query above.
+  */
+  html,
+  body,
+  [data-theme] {
+    transition:
+      background-color var(--transition),
+      color var(--transition),
+      border-color var(--transition);
+    will-change: background-color, color;
+    /* Ensure consistent font smoothing during theme switches */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  a {
+    transition: color var(--transition-fast);
+  }
+}
+
+body {
+  margin: 0;
+  padding: var(--gap-body);
+  padding-top: var(--gap-header);
+  padding-bottom: var(--gap-footer);
+  max-width: var(--body-max-width, var(--max-width));
+  margin-inline: auto;
+
+  transition:
+    background-color var(--transition),
+    color var(--transition),
+    border-color var(--transition),
+    padding var(--transition),
+    margin var(--transition);
+
+  [id] {
+    scroll-margin-top: calc(var(--space-2) + var(--gap-header));
+    /* Adjust value as needed background: var(--color-surface-highest); background: var(--color-surface-highest); background: var(--color-surface-highest); background: var(--color-surface-highest); */
+  }
+}
+
+main {
+  transition:
+    background-color var(--transition),
+    color var(--transition),
+    border-color var(--transition),
+    box-shadow var(--transition),
+    padding var(--transition),
+    margin var(--transition);
+}
+
+/* Selection highlight */
+::selection {
+  background: oklch(from var(--color-yellow) l c h / 0.15);
+  color: var(--color-accent);
+}
+
+/* =========================== */
+/* TEXT LINE WIDTH              */
+/* =========================== */
+/* Comfortable reading length for text elements — works everywhere,
+   not just inside .prose. Images, tables, code blocks are not affected. */
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+li,
+div.callout,
+summary {
+  max-width: var(--line-width);
+}
+p:has(img),
+blockquote p {
+  max-width: unset;
+}
+
+/* Horizontal rules */
+hr {
+  height: var(--stroke-width, 1px);
+  background: var(--color-border);
+  border: none;
+  block-size: var(--stroke-width, 1px);
+}
+
+/* Mark highlighting */
+mark {
+  background: oklch(from var(--color-yellow) l c h / 0.3);
+  color: color-mix(in oklch, var(--color-yellow) 30%, var(--color-foreground));
+  padding: var(--trim);
+  padding-top: 0.1em;
+}
+
+/* =========================== */
+/* LAYOUT                      */
+/* =========================== */
+
+section.container-hero {
+  padding-block: var(--space-2);
+  border-top: var(--border);
+  border-bottom: var(--border);
+  box-shadow: var(--shadow);
+
+  p {
+    max-width: var(--line-width);
+    margin-inline: auto !important;
+  }
+}
+
+dt {
+  color: var(--color-header);
+  font-weight: var(--font-weight-bold);
+
+  & + dd {
+    margin-block-start: var(--space-half);
+    line-height: var(--line-height-compact);
+  }
+}
+
+/* =========================== */
+/* BODY PADDING NEGATION       */
+/* =========================== */
+
+/**
+ * Utilities to negate body padding for full-width elements
+ * Useful for footers, headers, or other elements that should extend to viewport edges
+ *
+ * .negate-body-padding — Negates horizontal body padding only
+ * .negate-body-padding-full — Negates all body padding (horizontal + bottom)
+ * .negate-body-padding-bottom — Negates extra bottom body padding (1.5× multiplier)
+ *
+ * Usage:
+ * <footer class="negate-body-padding-full">
+ *   Full-width footer content
+ * </footer>
+ */
+
+/**
+ * Negate horizontal body padding (left/right)
+ * Allows full-width backgrounds while keeping vertical padding
+ */
+
+body > footer.no-body-margin:last-of-type,
+body > header.no-body-margin:first-of-type {
+  margin-inline: calc(var(--gap-body) * -1);
+  padding-inline: calc(var(--gap-body) * 1);
+
+  @media (max-width: #{$small}) {
+    margin-inline: calc(var(--gap-body-mobile) * -1);
+  }
+}
+
+/**
+ * Negate bottom body padding (extra 1.5× multiplier)
+ * Removes the generous bottom padding applied to body elements
+ * Useful when you want footer to sit flush at bottom
+ */
+body > footer.no-body-margin:last-of-type {
+  margin-block-end: calc(var(--gap-body) * -1.5);
+
+  @media (max-width: #{$small}) {
+    margin-block-end: calc(var(--gap-body-mobile) * -1.5);
+  }
+}
+
+body > header.no-body-margin:first-of-type {
+  margin-block-start: calc(var(--gap-body) * -1);
+
+  @media (max-width: #{$small}) {
+    margin-block-end: calc(var(--gap-body-mobile) * -1);
+  }
+}