@giana/cryptic-reset 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Georgiana Blantin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Cryptic Reset
+
+A highly opinionated CSS reset for personal projects, featuring responsive text sizing; OKLCH-based color formulas; line-height-based layout spacing; automatic formatting of minor HTML elements and more.

package/css/base.css

@@ -0,0 +1,487 @@
+/*
+ * Custom properties used
+ * Be sure to set these to customize the reset otherwise the defaults will be used
+ * Variables marked with ✨ are prioritized for customization, the rest should work as-is
+ *
+ * // Text
+ * --font-family-default: sans-serif ✨
+ * --font-family-heading: var(--font-family-default, sans-serif) ✨
+ * --font-family-monospace: monospace
+ * --font-size-default: 1em
+ * --line-height-default: 1.5
+ *
+ * // Spacing / rhythm
+ * --margin-heading-start: var(--spacing, 1.5rem) * 2
+ * --margin-heading-end: var(--spacing, 1.5rem)
+ * --min-tap-size: 48px
+ * --spacing: 1.5rem
+ *
+ * // Colors ✨
+ * --color-background: white
+ * --color-text: black
+ * --color-link: blue
+ * --color-link-hover: var(--color-link, blue)
+ *
+ * --color-highlight-background: highlight
+ * --color-highlight-text: highlighttext
+ * --color-scrollbar-thumb: var(--color-background, white)
+ * --color-scrollbar-track: var(--color-text, black)
+ *
+ * --color-form-elements: var(--border-color, blue)
+ * --color-button-background: transparent
+ * --color-button-text: currentColor
+ * --color-button-border: currentColor
+ * --color-button-border-hover: blue
+ * --color-input-background: transparent
+ * --color-input-text: currentColor
+ * --color-input-border: currentColor
+ * --color-input-border-hover: blue
+ *
+ * // Buttons
+ * --border-width-button: 1px ✨
+ * --height-button: calc(var(--spacing, 1.5rem) * 2)
+ * --padding-block-button: calc((var(--height) - 1lh) / 2 - var(--border-width) * 2)
+ * --padding-inline-button: var(--padding-block-button)
+ *
+ * // Inputs
+ * --border-width-input: 1px ✨
+ * --height-input: calc(var(--spacing, 1.5rem) * 2)
+ * --padding-block-input: 0
+ * --padding-inline-input: var(--spacing, 1.5rem)
+ *
+ * // Form elements
+ * --height-textarea: calc(var(--spacing, 1.5rem) * 6)
+ * --padding-block-textarea: calc(var(--spacing, 1.5rem) / 2)
+ *
+ * // Misc
+ * --hr-height: 2px
+ * --scroll-offset: var(--spacing, 1.5rem)
+ *
+*/
+
+@layer base {
+  :root {
+    box-sizing: border-box;
+    interpolate-size: allow-keywords;
+    color-scheme: light dark;
+  }
+
+  @view-transition {
+    navigation: auto;
+  }
+
+  *,
+  ::before,
+  ::after {
+    background-repeat: no-repeat;
+    box-decoration-break: clone;
+    box-sizing: inherit;
+    outline-offset: 0.25em;
+    paint-order: stroke;
+    transition-behavior: allow-discrete;
+  }
+
+  /* Prevent text-shadows making highlighted text unreadable */
+  ::selection {
+    background-color: var(--color-highlight-background, highlight);
+    color: var(--color-highlight-text, highlighttext);
+    text-shadow: none !important;
+  }
+
+  html {
+    -moz-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+
+    background-color: var(--color-background, white);
+    height: 100%;
+    overflow-x: clip;
+
+    /* Removed for `prefers-reduced-motion` in overwrites.css */
+    scroll-behavior: smooth;
+    scrollbar-gutter: stable;
+  }
+
+  /* Custom scrollbar styles for non-document elements */
+  :where(:not(html)) {
+    scrollbar-color: var(--color-scrollbar-thumb, var(--color-background, white))
+      var(--color-scrollbar-track, var(--color-text, black));
+    scrollbar-width: thin;
+  }
+
+  body {
+    background-color: var(--color-background, white);
+    color: var(--color-text, black);
+    font-family: var(--font-family-default, sans-serif);
+    font-size: var(--font-size-default, 1em);
+    font-size-adjust: ex-height from-font;
+    font-synthesis-weight: none;
+    font-synthesis-style: none;
+    font-synthesis-small-caps: auto;
+    hanging-punctuation: first allow-end last;
+    hyphens: auto;
+    hyphenate-limit-chars: auto 4 3;
+    line-height: var(--line-height-default, 1.5);
+    min-height: 100%;
+    margin: 0;
+    overflow-wrap: break-word;
+    text-rendering: optimizeLegibility;
+	}
+
+  main {
+    outline: 0;
+  }
+
+  :target {
+    scroll-margin-block-start: var(
+      --scroll-offset,
+      var(--section-spacing-y, var(--spacing, 1.5rem))
+    );
+  }
+
+  /* Reset spacing and add bottom margin for basic elements */
+  ol,
+  ul,
+  dl,
+  dd,
+  p,
+  blockquote,
+  pre,
+  table,
+  figure,
+  form,
+  fieldset,
+  details {
+    padding: 0;
+    margin: 0;
+    margin-block-end: var(--spacing, 1.5rem);
+  }
+
+  /* Indent nested lists */
+  ol,
+  ul {
+    & ol,
+    & ul {
+      padding-inline-start: var(--spacing, 1.5rem);
+    }
+  }
+
+  dt {
+    font-weight: bold;
+  }
+
+  dd {
+    margin: 0;
+    padding-inline-start: var(--spacing, 1.5rem);
+  }
+
+  /* Limit width of objects with intrinsic size */
+  img,
+  picture,
+  object,
+  video,
+  embed,
+  iframe {
+    max-width: 100%;
+    height: auto;
+  }
+
+  audio,
+  canvas {
+    max-width: 100%;
+  }
+
+  video {
+    object-fit: cover;
+  }
+
+  a {
+    color: var(--color-link, blue);
+    transition-duration: var(--transition-duration--sm, 0.25s);
+    transition-property: background, border, color, box-shadow, filter, opacity, transform;
+
+    &:where(:not([class])) {
+      text-underline-offset: 0.25em;
+      text-decoration-thickness: 1px;
+      text-decoration-skip-ink: auto;
+    }
+
+    &:hover,
+    &:focus {
+      color: var(--color-link-hover, var(--color-link, blue));
+    }
+
+    &:focus-visible {
+      outline: 2px dashed var(--color-link-hover, var(--color-link, blue));
+    }
+  }
+
+  h1,
+  .h1,
+  h2,
+  .h2,
+  h3,
+  .h3,
+  h4,
+  .h4,
+  h5,
+  .h5,
+  h6,
+  .h6 {
+    font-family: var(--font-family-heading, var(--font-family-default, 1rem));
+    font-size: var(--font-size);
+    font-weight: 400;
+    line-height: var(--line-height);
+    margin-block-start: var(--margin-heading-start, var(--spacing-xl, 3rem));
+    margin-block-end: var(--margin-heading-end, var(--spacing, 1.5rem));
+    text-box: trim-both cap alphabetic;
+  }
+
+  h1,
+  .h1,
+  h2,
+  .h2,
+  h3,
+  .h3 {
+    --line-height: var(--line-height-heading, 1.25);
+
+    text-wrap: balance;
+  }
+
+  h5,
+  .h5,
+  h6,
+  .h6 {
+    font-weight: 700;
+  }
+
+  p {
+    text-box-edge: cap alphabetic;
+    text-wrap: pretty;
+
+    &:where(:first-child) {
+      text-box-trim: trim-start;
+    }
+
+    &:where(:last-child) {
+      text-box-trim: trim-end;
+    }
+
+    &:where(:only-child) {
+      text-box-trim: trim-both;
+    }
+  }
+
+  strong,
+  b {
+    font-weight: bolder;
+  }
+
+  small {
+    font-size: var(--font-size, 0.875rem);
+  }
+
+  pre {
+    max-width: 100%;
+    white-space: pre-wrap;
+    overflow-x: auto;
+  }
+
+  code:where(:not(pre *)),
+  pre:where(:has(code)) {
+    background-color: var(--color-text);
+    border-radius: 3px;
+    color: var(--color-background);
+    font-family: var(--font-family-monospace, monospace);
+  }
+
+  pre:where(:has(code)) {
+    padding: var(--spacing);
+  }
+
+  /* Sensible defaults for tables */
+  table {
+    border-color: inherit;
+    border-collapse: collapse;
+    table-layout: fixed;
+    text-indent: 0;
+    max-width: 100%;
+  }
+
+  th,
+  td {
+    padding: 0;
+  }
+
+  hr {
+    border: 0;
+    clear: both;
+    margin: 0;
+
+    border-block-end: var(--hr-height, 2px) solid;
+
+    /* Pull up by half-height to center */
+    margin-block-start: calc(var(--hr-height, 2px) / -2);
+
+    /* Reset rhythm by compensating for height */
+    margin-block-end: calc(var(--spacing, 1.5rem) - var(--hr-height, 2px) / 2);
+  }
+
+  svg {
+    display: inline-block;
+    fill: currentColor;
+    vertical-align: middle;
+  }
+
+  /* Assume dimensionless SVGs are icons and set sensible defaults */
+  svg:where(:not([width]):not([height])) {
+    width: 2ex;
+    height: 2ex;
+  }
+
+  /* Format lists inside nav elements and footer <ul>s as nav lists */
+  nav :where(ol),
+  nav :where(ul),
+  footer :where(ul:has(a)) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing, 1.5rem);
+    flex-wrap: wrap;
+
+    & li,
+    & a {
+      display: block;
+    }
+  }
+
+  /* Fix... bug? where children of details inherit content-box */
+  details {
+    display: block;
+
+    & * {
+      box-sizing: border-box;
+    }
+  }
+
+  ::details-content {
+    transition-behavior: allow-discrete;
+  }
+
+  /* Input resets */
+  input,
+  textarea,
+  button {
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+    margin: 0;
+    vertical-align: middle;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px dashed var(--border-color-hover, blue);
+    }
+  }
+
+  /* All button-style elements */
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"],
+  .button {
+    --background-color: var(--color-button-background, transparent);
+    --border-width: var(--border-width-button, 1px);
+    --border-color: var(--color-button-border, currentColor);
+    --border-color-hover: var(--color-button-border-hover, blue);
+    --text-color: var(--color-button-text, currentColor);
+    --height: max(var(--min-tap-size, 48px), var(--height-button, var(--spacing-xl, 4rem)));
+    --padding-block: var(
+      --padding-block-button,
+      calc((var(--height) - 1lh) / 2 - var(--border-width) * 2)
+    );
+    --padding-inline: var(--padding-inline-button, var(--padding-block));
+    --width: fit-content;
+
+    cursor: pointer;
+    line-height: var(--button-line-height, var(--line-height, 1.5));
+  }
+
+  /* All text-style elements */
+  [type="text"],
+  [type="email"],
+  [type="password"],
+  [type="number"],
+  [type="url"],
+  [type="tel"],
+  [type="search"],
+  textarea {
+    --background-color: var(--color-input-background, transparent);
+    --border-width: var(--border-width-input, 1px);
+    --border-color: var(--color-input-border, currentColor);
+    --border-color-hover: var(--color-input-border-hover, blue);
+    --text-color: var(--color-input-text, currentColor);
+    --height: max(var(--min-tap-size, 48px), var(--height-input, var(--spacing-xl, 4rem)));
+    --padding-block: var(--padding-block-input, 0);
+    --padding-inline: var(--padding-inline-input, var(--spacing-sm, 0.5rem));
+    --width: 30ch;
+  }
+
+  textarea {
+    --padding-block: var(--padding-block-textarea, var(--spacing-sm, 0.5rem));
+    --height: max(var(--min-tap-size, 48px), var(--height-textarea, var(--spacing-4xl, 6rem)));
+    --width: 60ch;
+  }
+
+  ::placeholder {
+    color: currentColor;
+    opacity: 0.65;
+  }
+
+  /* Common styles for button-style and text-style elements */
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"],
+  [type="text"],
+  [type="email"],
+  [type="password"],
+  [type="number"],
+  [type="url"],
+  [type="tel"],
+  [type="search"],
+  textarea,
+  .button {
+    background: var(--background-color);
+    border: var(--border-width) solid var(--border-color);
+    color: var(--text-color);
+    min-height: var(--height);
+    min-width: min(100%, var(--width));
+    padding-block: var(--padding-block);
+    padding-inline: var(--padding-inline);
+    text-decoration: none;
+    transition-duration: var(--transition-duration--sm, 0.25s);
+    transition-property: background, border, color, box-shadow, opacity, transform;
+
+    &:hover,
+    &:focus {
+      border-color: var(--border-color-hover);
+    }
+  }
+
+  /* Accent color for other form elements */
+  [type="checkbox"],
+  [type="radio"],
+  [type="range"],
+  progress {
+    accent-color: var(--color-form-elements, var(--border-color, blue));
+    height: 1em;
+  }
+
+  /* Make label display:block when followed by textarea */
+  label:where(:has(+ textarea)) {
+    display: block;
+  }
+}

package/css/color.css

@@ -0,0 +1,101 @@
+@layer color {
+  :root {
+    /*
+    * Color tools for working with OKLCH
+    *
+    * `Softest` and `strongest` refer to how strong the contrast is depending on color mode.
+    * `Soft` are lighter colors in light mode and darker colors in dark mode.
+    * `Strong` are darker colors in light mode and lighter colors in dark mode.
+    *
+    */
+
+    /* Arbitrary, visually-selected values */
+    --_lightness-softest: 0.975;
+    --_lightness-strongest: 0.20;
+
+    --_chroma-softest: 0.02;
+    --_chroma-strongest: 0.08;
+
+    --_hue-cool: 300; /* Blue toward purple */
+    --_hue-warm: 70; /* Orange */
+
+    --_hue-softest: var(--_hue-warm);
+    --_hue-strongest: var(--_hue-cool);
+
+    /* Reverse formula for dark mode */
+    /* @media (prefers-color-scheme: dark) {
+      --_lightness-softest: 0.15;
+      --_lightness-strongest: 0.975;
+
+      --_chroma-softest: 0.07;
+      --_chroma-strongest: 0.01;
+
+      --_hue-softest: var(--_hue-cool);
+      --_hue-strongest: var(--_hue-warm);
+    } */
+  }
+
+  @function --shift-hue(
+    --color <color>,
+    --amount <percentage>,
+    --direction <string>
+  )
+  returns <color> {
+    --new-hue: 
+      if(style(--direction: "softer"): var(--_hue-softest); 
+      else: var(--_hue-strongest));
+  
+    --new-color: oklch(from var(--color) l c var(--new-hue));
+
+    result: color-mix(in oklch, var(--color), var(--new-color) var(--amount));
+  }
+
+  @function --shift-brightness(
+    --color <color>,
+    --amount <integer>,
+    --direction <string>,
+    --scale <number>: 5
+  )
+  returns <color> {
+    --_lightness-shift: 
+      if(style(--direction: "softer"): var(--_lightness-softest); 
+      else: var(--_lightness-strongest));
+    --_chroma-shift: 
+      if(style(--direction: "softer"): var(--_chroma-softest); 
+      else: var(--_chroma-strongest));
+      
+    --_amount-c-soft: calc(var(--amount) - (var(--amount) * -0.05));
+    --_amount-c-strong: calc(var(--amount) + (var(--amount) * 0.25));
+    --_amount-l-soft: var(--amount);
+    --_amount-l-strong: calc(var(--amount) + (var(--amount) * 0.075));
+
+    --_amount-c: 
+      if(style(--direction: "softer"): var(--_amount-c-soft); 
+      else: var(--_amount-c-strong));
+    --_amount-l: 
+      if(style(--direction: "softer"): var(--_amount-l-soft); 
+      else: var(--_amount-l-strong));
+
+    --_lightness: calc((var(--_lightness-shift) - l) / var(--scale) * var(--_amount-l) + l);
+    --_chroma: calc((min(c, var(--_chroma-shift)) - c) / var(--scale) * var(--_amount-c) + c);
+
+    result: oklch(from var(--color) var(--_lightness) var(--_chroma) h);
+  }
+
+  @function --shift-color(
+    --color <color>,
+    --amount <integer>,
+    --direction <string>,
+    --scale <number>: 5
+  ) 
+  returns <color> {
+    --_amount_percentage: calc(100% - (var(--amount) * 10%));
+
+    --_hue-shifted-color: --shift-hue(var(--color), 100%, var(--direction));
+    --_hue-brightness-color: --shift-brightness(var(--_hue-shifted-color), var(--amount), var(--direction), var(--scale));
+    
+    --_brightness-shifted-color: --shift-brightness(var(--color), var(--amount), var(--direction), var(--scale));
+    
+    result: color-mix(in oklch, var(--_brightness-shifted-color) var(--_amount_percentage), var(--_hue-brightness-color));
+  }
+}

package/css/components.css

@@ -0,0 +1,226 @@
+/*
+ * Custom properties used
+ * 
+ * // Buttons
+ * --button-icon-size: 2ex
+ * --button-icon-space: 1ch
+ * 
+ * // Form elements
+ * --form-inner-spacing: calc(var(--spacing, 1.5rem) / 2)
+ *
+ */
+
+@layer components {
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"],
+  .button {
+    --width: calc(var(--height) * 3.5);
+
+    display: inline-flex;
+    gap: var(--button-icon-space, 1ch);
+    align-items: center;
+    justify-content: center;
+
+    /* Icons inside buttons */
+    & svg,
+    & img,
+    & i {
+      width: var(--button-icon-size, 2ex);
+      height: var(--button-icon-size, 2ex);
+    }
+
+    /* Icon-only buttons */
+    /* Note: only-child does not count raw text nodes */
+    &:where(:has(svg:only-child, img:only-child, i:only-child)) {
+      --width: var(--height);
+    }
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    gap: var(--form-inner-spacing, var(--spacing-sm, 0.5rem));
+
+    container-name: form;
+    container-type: inline-size;
+    margin-block-end: var(--spacing);
+    width: 100%;
+
+    /* Make all form elements full width of form */
+    &:where(*:not(button, [type="submit"], [type="reset"], [type="button"])) {
+      --width: 100%;
+    }
+  }
+
+  label {
+    font-weight: bolder;
+  }
+
+  :where(form > div),
+  :where(label:not(:has([type="radio"] + , [type="checkbox"] + ))) {
+    display: block;
+    width: 100%;
+  }
+
+  /* Compensate for flex-gap where label is directly followed by its form element */
+  :where(form > label + input),
+  :where(form > label + textarea) {
+    margin-block-start: calc(var(--form-inner-spacing, var(--spacing-sm, 0.5rem)) * -1);
+  }
+
+  /* Add asterisk to labels of required fields */
+  label:has([required], + [required]) {
+    &::after {
+      content: " * ";
+    }
+  }
+
+  fieldset {
+    --border-width: 1px;
+    --border-color: var(--color-form-elements, var(--color-primary));
+
+    border: var(--border-width) solid var(--border-color);
+    margin-block-start: calc(var(--border-width) * -1);
+    padding: var(--form-inner-spacing, var(--spacing-sm, 0.5rem));
+  }
+
+  legend {
+    color: var(--color-form-elements, var(--color-primary));
+    font-weight: 400;
+  }
+
+  select {
+    appearance: base-select;
+  }
+
+  details,
+  summary,
+  ::details-content {
+    transition-duration: 0.5s;
+  }
+
+  details {
+    border: 1px solid var(--color-form-elements, var(--color-primary));
+
+    & + :where(details) {
+      border-top: 0;
+    }
+
+    & > :where(:not(summary)) {
+      padding: var(--spacing);
+    }
+  }
+
+  summary {
+    border-block-end: 0 solid var(--color-form-elements, var(--color-primary));
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-block: var(--spacing-sm, 0.5rem);
+    padding-inline: var(--spacing);
+
+    &::after {
+      content: '⌵';
+      transition-duration: 0.25s;
+    }
+
+    [open] &::after {
+      rotate: 180deg;
+    }
+  }
+
+  summary::marker {
+    display: none;
+  }
+
+  [open] summary {
+    border-block-end-width: 1px;
+  }
+
+  ::details-content {
+    height: 0;
+    overflow: clip;
+  }
+
+  [open]::details-content {
+    height: auto;
+  }
+  
+  /* Default styles for dialogs, popovers, and backdrops */
+  [popover],
+  dialog {
+    border: 0;
+    margin: 0;
+    max-width: calc(100% - var(--spacing, 1.5rem));
+    max-height: calc(100% - var(--spacing, 1.5rem));
+    padding: 0;
+  }
+
+  /* Position popover at the bottom of the anchor, extending horizontally */
+  [popover] {
+    position-area: block-end span-all;
+    position-try-fallbacks: flip-block;
+  }
+
+  ::backdrop {
+    background-color: var(--color-background, black);
+  }
+
+  /* Default animations for dialogs, popovers, and backdrops */
+  /* Transition-to on close */
+  [popover],
+  dialog,
+  ::backdrop {
+    opacity: 0;
+    transition-duration: 0.5s;
+  }
+
+  /* Improve styling for popover hints */
+  [popover="hint"] {
+    text-align: center;
+    text-wrap: balance;
+    transition-duration: 0.25s;
+  }
+
+  /* When visible */
+  [popover]:popover-open,
+  dialog[open] {
+    opacity: 1;
+  }
+
+  /* Show backdrop only on dialog */
+  [open]::backdrop {
+    opacity: 0.8;
+  }
+
+  /* Transition-from on open */
+  @starting-style {
+    [popover]:popover-open,
+    [popover]:popover-open::backdrop,
+    dialog[open],
+    [open]::backdrop {
+      opacity: 0;
+    }
+  }
+}
+
+@layer overwrites {
+  /* Compensate for form spacing to maintain rhythm */
+  /* I am so deeply sorry for this selector */
+  form:where(:has(label:last-of-type:nth-of-type(odd)):has(*:last-child:nth-child(odd))),
+  form:where(:has(label:last-of-type:nth-of-type(even)):has(*:last-child:nth-child(even))) {
+    margin-block-end: calc(
+      var(--spacing) +
+      var(--form-inner-spacing, var(--spacing-sm, 0.5rem))
+    );
+  }
+
+  /* Center dialog on page */
+  dialog {
+    margin: auto;
+  }
+}

package/css/layout.css

@@ -0,0 +1,112 @@
+/*
+ * Custom properties used
+ * Be sure to set these to customize the reset otherwise the defaults will be used
+ * Variables marked with ✨ are prioritized for customization, the rest should work as-is
+ *
+ * //Sizing
+ * --section-spacing-x: [media-query dependent];
+ * --section-spacing-y: [media-query dependent];
+ * --max-content-width: 100rem ✨
+ *
+ */
+
+/*----------  Page elements  ----------*/
+
+@layer layout {
+  body {
+    /* Creates section spacing variable for section-like elements */
+    --section-spacing-x: var(--spacing-lg);
+    --section-spacing-y: var(--spacing-xl);
+
+    @media (min-width: 40rem) {
+      --section-spacing-x: var(--spacing-xl);
+      --section-spacing-y: var(--spacing-xl);
+    }
+
+    @media (min-width: 60rem) {
+      --section-spacing-x: var(--spacing-2xl);
+      --section-spacing-y: var(--spacing-2xl);
+    }
+
+    @media (min-width: 80rem) {
+      --section-spacing-x: var(--spacing-3xl);
+      --section-spacing-y: var(--spacing-3xl);
+    }
+  }
+
+  /* Makes main span full height of page */
+  body,
+  main {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Lets main's children span full height of page if desired */
+  main,
+  main > :where(section:only-child),
+  main > :where(article:only-child) {
+    flex: 1;
+  }
+
+  header,
+  main,
+  section,
+  article,
+  footer {
+    clear: both;
+    max-width: 100%;
+    position: relative;
+  }
+
+  header,
+  section,
+  article,
+  footer {
+    /* Limit width of an element while maintaining padding and centering */
+    padding-inline: max(var(--section-spacing-x), calc(50% - var(--max-content-width, 100rem) / 2));
+  }
+
+  /* Add default alignment for header and footer elements */
+  header,
+  footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing, 1.5rem);
+    padding-block: var(--spacing, 1.5rem);
+
+    /* If header/footer contains more than one item */
+    &:where(:has(> :nth-child(2))) {
+      justify-content: space-between;
+    }
+
+    & > * {
+      margin-block-end: 0;
+    }
+  }
+
+  header {
+    & a,
+    & img {
+      display: block;
+    }
+  }
+
+  section,
+  article {
+    padding-block: var(--section-spacing-y);
+  }
+
+  /* Add default alignment for footer elements */
+  footer {
+    flex-direction: column;
+    text-align: center;
+
+    & p,
+    & ul,
+    & ol {
+      font-size: var(--font-size, 0.875rem);
+      justify-content: center;
+    }
+  }
+}

package/css/overwrites.css

@@ -0,0 +1,62 @@
+@layer overwrites {
+  @media screen and (prefers-reduced-motion: reduce) {
+    /* Removes smooth-scrolling on user preference */
+    html {
+      scroll-behavior: auto;
+    }
+
+    /* Removes all transitions and animations */
+    * {
+      animation-duration: 0.001ms !important;
+      transition-duration: 0.001ms !important;
+    }
+  }
+
+  /* Removes bottom margin from last child of any element */
+  /* TODO: Upgrade to margin-trim whenever it's widespread */
+  :where(*:last-child) {
+    margin-block-end: 0;
+  }
+
+  :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
+    /* Removes margin from first child heading and headings preceeded by other headings */
+    &:first-child,
+    &:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) + & {
+      margin-block-start: 0;
+    }
+
+    /* Remove margin-bottom from heading selectors followed by other heading selectors */
+    &:has(+ :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6)) {
+      margin-block-end: 0;
+    }
+  }
+
+  /* Remove styling from links containing images */
+  :where(a:has(img)) {
+    border-width: 0;
+    text-decoration: none;
+
+    &::before,
+    &::after {
+      content: none;
+    }
+  }
+
+  /* Hides elements */
+  [hidden] {
+    display: none;
+  }
+
+  /* Hides elements visually, leaves accessible to screenreaders */
+  /* .sr-only is always hidden, .visually hidden unhides when focused */
+  .sr-only,
+  .visually-hidden:not(:focus, :active, :focus-within) {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+    height: 1px;
+  }
+}

package/css/rhythm.css

@@ -0,0 +1,247 @@
+/*
+ * Custom properties used
+ * Be sure to set these to customize the reset otherwise the defaults will be used
+ * Variables marked with ✨ are prioritized for customization, the rest should work as-is
+ *
+ * // Text ✨
+ * --font-size-min: 16
+ * --font-size-max: 20
+ * --line-height-min: 1.25
+ * --line-height-max: 1.5
+ * --rhythm-scale-min: 1.25;
+ * --rhythm-scale-max: 1.5;
+ * --font-size-min-allowed: 12px;
+ *
+ * // Spacing ✨
+ * --spacing-scale: 1.5;
+ *
+ * // Screen sizes
+ * --font-size-min-viewport: 420
+ * --font-size-max-viewport: 1600
+ *
+ * // Variables created
+ * These are created on individual elements and set via --font-size-min/max and --line-height-min/max
+ * or by setting --rhythm-multiplier to scale text up or down based on base font-size
+ *
+ * font-size: var(--font-size);
+ * line-height: var(--line-height);
+ * 
+ * // Variables created on body
+ * --RHYTHM_UNITS (CONST) - Body font-size = 1rem
+ * --RHYTHM (CONST) - Body line-height = 1rlh
+ * --spacing[-<size>] - Calculated by body line-height & spacing-scale
+ *
+ */
+
+@layer rhythm {
+  @layer apply-first {
+    /*
+      Responsive typography with vertical rhythm
+    */
+
+    /* Global rhythm scale values ✨ */
+    /* 
+      Useful text scales
+      Golden Ratio: 1.618
+      Minor Sixth: 1.6
+      Perfect Fifth: 1.5
+      Augmented Fourth: 1.414
+      Perfect Fourth: 1.333
+      Major Third: 1.25
+      Minor Third: 1.2
+      Major Second: 1.125
+      Minor Second: 1.067
+    */
+    :root {
+      --rhythm-scale-min: 1.25;
+      --rhythm-scale-max: 1.5;
+      --spacing-scale: var(--rhythm-scale-max);
+
+      /* Prevents font size from going below this value when using scales */
+      /* Set to 0 to disable */
+      --font-size-min-allowed: 12px;
+    }
+
+    /* Attach to common text-based elements */
+    body,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    a,
+    span,
+    sub,
+    sup,
+    button,
+    input,
+    label,
+    textarea,
+    select,
+    small,
+    figcaption,
+    caption,
+    table,
+    ul,
+    ol,
+    .rfs {
+      /* Step 1: Establish individual responsive font-size */
+
+      /* 
+        Min and max font sizes to screen sizes 
+        That is, font size will be 16px at 320px screen width and 20px at 1440px screen width
+        These values can be customized on each element to automatically update the formula
+      */
+      --font-size-min: 16;
+      --font-size-max: 20;
+      --font-size-min-viewport: 420;
+      --font-size-max-viewport: 1600;
+
+      /* Changing the --rhythm-multiplier variable will scale the text based on base calculated font size */
+      --rhythm-multiplier: 0;
+
+      --_font-size-min: calc(var(--font-size-min) * pow(var(--rhythm-scale-min), var(--rhythm-multiplier)));
+      --_font-size-max: calc(var(--font-size-max) * pow(var(--rhythm-scale-max), var(--rhythm-multiplier)));
+
+      /* 
+        Converting from px to rem automatically for convenience and accessibility
+        If you want to set font-sizes in rem units from the start, you can set --font-size-units to 1rem
+        Default 1rem = 16px, so 1px = 0.0625rem 
+      */
+      --font-size-units: calc(0.0625rem);
+      --viewport-units: 100vw;
+
+      /* Math. Don't worry about it. And don't touch. */
+
+      /* The vws */
+      --_font-size-step: calc(
+        (var(--_font-size-max) - var(--_font-size-min)) /
+        (var(--font-size-max-viewport) - var(--font-size-min-viewport))
+      );
+
+      /* The rems */
+      --_font-size-base-value: calc(
+        var(--_font-size-min) -
+        var(--font-size-min-viewport) *
+        var(--_font-size-step)
+      );
+
+      /* 
+        Create font-size custom prop on selected elements
+         Selected elements can now use the --font-size prop
+    
+         What's more, we can tweak the values established above such as 
+         --font-size-min and --font-size-max, and the formula will update automatically
+         The same applies to the viewport units --font-size-min-viewport and --font-size-max-viewport
+         We can even set a custom --font-size prop on any element, and it will override the default 
+      */
+
+      /* Using min() and max() inside the clamp, so we can reverse the order of the values if needed */
+      /* eg, a smaller font-size-max and a larger font-size-min */
+      --_font-size: clamp(
+        min(var(--_font-size-min), var(--_font-size-max)) *
+        var(--font-size-units),
+        var(--_font-size-base-value) *
+        var(--font-size-units) +
+        var(--_font-size-step) *
+        var(--viewport-units),
+        max(var(--_font-size-max), var(--_font-size-min)) *
+        var(--font-size-units)
+      );
+
+      --font-size: max(var(--font-size-min-allowed), var(--_font-size));
+
+      /* Using ems to lock current line-height to current font-size */
+      --line-height-units: 1em;
+
+      /* Min and max line-height */
+      --line-height-min: 1.25;
+      --line-height-max: 1.5;
+
+      /* Same viewport boundaries as font-size, using font-size values to convert from pixels */
+      --line-height-min-viewport: calc(var(--font-size-min-viewport) / var(--_font-size-min));
+      --line-height-max-viewport: calc(var(--font-size-max-viewport) / var(--_font-size-max));
+
+      /* You know the drill. No touchy. */
+
+      /* The vws */
+      --_line-height-step: calc(
+        (var(--line-height-max) - var(--line-height-min)) /
+        (var(--line-height-max-viewport) - var(--line-height-min-viewport))
+      );
+
+      /* The ems */
+      --_line-height-base-value: calc(
+        var(--line-height-min) -
+        var(--line-height-min-viewport) *
+        var(--_line-height-step)
+      );
+
+      /* 
+        Just like with --font-size, all elements will now have access to responsive line-height
+        And we can tweak the values established above such as --line-height-min and --line-height-max
+      */
+      --line-height: clamp(
+        min(var(--line-height-min), var(--line-height-max)) *
+        var(--line-height-units),
+        var(--_line-height-base-value) *
+        var(--line-height-units) +
+        var(--_line-height-step) *
+        var(--viewport-units),
+        max(var(--line-height-max), var(--line-height-min)) *
+        var(--line-height-units)
+      );
+    }
+
+    body {
+      /* We can now set font-size and line-height to their respective props */
+      font-size: var(--font-size);
+      line-height: var(--line-height);
+
+      /* 
+        Notice that we are starting our type rhythm from the body element
+        The HTML element is untouched, meaning our root units remain at defaults
+        The reason for this is so we can use the root units to easily calculate sizes
+        If we start our rhythm from the root element and try to calculate sizes from there,
+        such as setting a paragraph at 16px or a heading at 4rem, we'll find that we have to
+        do a lot of math to get the right values. Such math is beyond my delicate constitution.
+
+        This is our new rem-unit and can be used whenever needed to refer to body font-size
+        NOTE: Please treat this as a CONST and do not edit or overwrite 
+      */
+      --RHYTHM_UNITS: var(--font-size);
+
+      /* 
+        Create rhythm by locking to body line-height
+        This is our new rlh unit and can be used anywhere to refer to body line-height
+        NOTE: Please treat this as a CONST and do not edit or overwrite
+      */
+      --RHYTHM: clamp(
+        min(var(--line-height-min), var(--line-height-max)) *
+        var(--RHYTHM_UNITS),
+        var(--_line-height-base-value) *
+        var(--RHYTHM_UNITS) +
+        var(--_line-height-step) *
+        var(--viewport-units),
+        max(var(--line-height-max), var(--line-height-min)) *
+        var(--RHYTHM_UNITS)
+      );
+
+      /* Here, a safe prop you can overwrite and play with as needed */
+      --spacing: var(--RHYTHM);
+
+      /* Might as well */
+      --spacing-xs: calc(var(--spacing) * pow(var(--spacing-scale), -4));
+      --spacing-sm: calc(var(--spacing) * pow(var(--spacing-scale), -2));
+      --spacing-md: var(--spacing);
+      --spacing-lg: calc(var(--spacing) * pow(var(--spacing-scale), 1));
+      --spacing-xl: calc(var(--spacing) * pow(var(--spacing-scale), 2));
+      --spacing-2xl: calc(var(--spacing) * pow(var(--spacing-scale), 3));
+      --spacing-3xl: calc(var(--spacing) * pow(var(--spacing-scale), 4));
+      --spacing-4xl: calc(var(--spacing) * pow(var(--spacing-scale), 5));
+      --spacing-5xl: calc(var(--spacing) * pow(var(--spacing-scale), 6));
+    }
+  }
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@giana/cryptic-reset",
+  "version": "1.0.0",
+  "description": "An opinionated reset/starter for personal CSS projects",
+  "main": "reset.css",
+  "style": "reset.css",
+  "author": "Giana Blantin <giana@blantin.com> (https://giana.im)",
+  "license": "MIT",
+  "files": [
+    "reset.css",
+    "css/"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gianablantin/cryptic-reset.git"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.3"
+  }
+}

package/reset.css

@@ -0,0 +1,8 @@
+@layer color, base, rhythm.apply-first, rhythm, layout, components, utilities, overwrites, default;
+
+@import "css/color.css";
+@import "css/base.css";
+@import "css/rhythm.css";
+@import "css/layout.css";
+@import "css/components.css";
+@import "css/overwrites.css";