@rathnasgala/theme 2.0.1 → 2.0.3

package/payload/src/styles/theme.css

@@ -263,12 +263,14 @@
 
 /* Motion is not a choice a writer has to make; it is a property of a considered page. */
 @media (prefers-reduced-motion: reduce) {
-  :root { --gala-motion-fast: 0ms; --gala-motion-base: 0ms; }
+  :root { --gala-motion-fast: 0ms; --gala-motion-base: 0ms; scroll-behavior: auto; }
   *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
 }
 
 :root[data-layout='portfolio'] { --gala-content-width: 82rem; }
 
+html { scroll-behavior: smooth; }
+
 body {
   margin: 0;
   padding: var(--gala-space-page);
@@ -301,6 +303,10 @@ body {
   font-weight: var(--gala-weight-display);
   letter-spacing: var(--gala-tracking-tight);
   text-decoration: none;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .gala-header-link { color: var(--gala-color-text); font-size: var(--gala-text-sm); text-decoration: none; }
 .gala-account-control {
@@ -314,21 +320,28 @@ body {
 .gala-account-control svg { inline-size: 1rem; block-size: 1rem; }
 
 .gala-article { max-inline-size: 76rem; margin-inline: auto; }
-.gala-article-header { padding-block: clamp(3rem, 9vw, 8rem); }
+.gala-page--article .gala-site-header,
+.gala-page--article main,
+.gala-page--article .gala-page-footer { max-inline-size: 112rem; }
+.gala-page--article .gala-article,
+.gala-page--article .gala-engagement { max-inline-size: none; }
+.gala-article-header { padding-block: clamp(2.5rem, 5vw, 5rem); }
 .gala-article-header h1 {
   max-inline-size: 12ch;
-  font-size: clamp(3.25rem, 9vw, 7.5rem);
-  line-height: .92;
+  font-size: clamp(2.5rem, 7vw, 5.25rem);
+  line-height: .96;
   letter-spacing: -.055em;
 }
 .gala-byline { color: var(--gala-color-muted); font-size: var(--gala-text-sm); }
 .gala-markdown { max-inline-size: 42rem; margin-inline: auto; font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); }
 .gala-markdown :where(h2) { margin-block-start: clamp(3rem, 7vw, 5rem); font-size: clamp(2.2rem, 5vw, 3.8rem); }
+.gala-markdown :where(h2, h3, h4, h5, h6) { scroll-margin-block-start: 7rem; }
 .gala-markdown :where(img, video) { max-inline-size: 100%; block-size: auto; }
-
-@media (max-width: 47.99rem) {
-  .gala-header-link { display: none; }
-  .gala-site-header__actions { gap: .25rem; }
+.gala-markdown :where(pre) {
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  overflow-x: auto;
+  scrollbar-color: var(--gala-color-border-strong) var(--gala-color-surface);
 }
 
 /* Headings carry the hierarchy, so they get the display face, a tighter measure and tighter
@@ -399,7 +412,8 @@ blockquote {
   .gala-site-header { background: var(--gala-color-background); }
 }
 
-.gala-site-header__actions { display: flex; gap: 0.5rem; }
+.gala-site-header__actions { display: flex; align-items: center; gap: 0.5rem; }
+.gala-header-link { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
 .gala-icon-control {
   display: inline-grid;
   inline-size: 2.75rem;
@@ -447,8 +461,10 @@ blockquote {
 }
 /* The close control belongs on the same line as the title, not floated above it. */
 .gala-dialog { display: grid; gap: var(--gala-space-sm); }
+.gala-dialog:not([open]) { display: none; }
 .gala-dialog__close { justify-self: end; margin: 0; }
-.gala-dialog > h2 { margin-block: 0; }
+.gala-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--gala-space-md); }
+.gala-dialog__header h2 { margin: 0; }
 
 main,
 .gala-page-footer {
@@ -535,7 +551,18 @@ button:focus-visible {
 .gala-search-results { display: grid; gap: 1rem; padding: 0; list-style: none; }
 .gala-search-results article { padding: 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
 .gala-search-results h2 { margin-block-start: 0; }
-.gala-toc { padding: 1rem; background: var(--gala-color-surface); }
+.gala-toc {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 42rem;
+  margin-inline: auto;
+  padding: 1rem;
+  background: var(--gala-color-surface);
+}
+.gala-toc summary { color: var(--gala-color-text); font-weight: var(--gala-weight-display); cursor: pointer; }
+.gala-toc nav { margin-block-start: var(--gala-space-sm); overscroll-behavior: contain; }
+.gala-toc ol { margin: 0; padding-inline-start: 1.25rem; }
+.gala-toc a[aria-current='location'] { color: var(--gala-color-text); font-weight: 700; }
 .gala-share__fallback { inline-size: min(100%, 36rem); }
 .gala-engagement__placeholder { display: grid; min-block-size: var(--gala-widget-min-block-size); align-content: center; margin: 0; }
 .gala-engagement-profile > * { margin-block: 0 0.5rem; }
@@ -550,11 +577,47 @@ button:focus-visible {
 .gala-engagement-actions label { display: grid; gap: 0.5rem; }
 .gala-engagement-actions textarea,
 [data-comment-editor] textarea { min-block-size: 7rem; padding: 0.75rem; font: inherit; }
-.gala-page-footer { margin-block-start: 4rem; padding-block-start: 1rem; border-block-start: 0.125rem solid var(--gala-color-border); }
+.gala-page-footer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--gala-space-lg);
+  margin-block-start: var(--gala-space-xl);
+  padding-block-start: var(--gala-space-md);
+  border-block-start: 0.125rem solid var(--gala-color-border);
+}
+.gala-page-footer__identity { display: flex; gap: var(--gala-space-sm); max-inline-size: 56rem; }
+.gala-page-footer__identity img { flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
+.gala-page-footer__identity p { margin: 0; color: var(--gala-color-muted); font-size: var(--gala-text-sm); }
+.gala-page-footer__details { display: grid; gap: var(--gala-space-2xs); align-content: center; }
+.gala-page-footer__line { display: grid; grid-template-columns: repeat(3, max-content); align-items: baseline; gap: 0 var(--gala-space-sm); }
+.gala-page-footer__line > * + *::before { content: "·"; margin-inline-end: var(--gala-space-sm); color: var(--gala-color-border); }
+.gala-page-footer__bio { line-height: 1.4; }
+.gala-page-footer__author { color: var(--gala-color-text); font-weight: var(--gala-weight-display); }
+.gala-page-footer nav { margin-inline-start: auto; }
+.gala-page-footer ul { justify-content: flex-end; margin: 0; }
 .gala-error-page { min-block-size: 60vh; display: grid; align-content: center; justify-items: start; }
-.gala-code-block { position: relative; }
+.gala-code-block {
+  position: relative;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  inline-size: 100%;
+  overflow: hidden;
+}
 .gala-code-block > button { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; background: var(--gala-color-background); }
-.gala-code-block pre { overflow: auto; padding: 3.5rem 1rem 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
+.gala-code-block pre {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  inline-size: 100%;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  padding: 3.5rem 1rem 1rem;
+  background: var(--gala-color-surface);
+  border-radius: var(--gala-radius-control);
+}
+.gala-code-block code { display: block; inline-size: max-content; min-inline-size: 100%; }
 .gala-embed {
   display: grid;
   place-items: center;
@@ -583,13 +646,7 @@ button:focus-visible {
 .gala-embed--gist .gala-embed__icon { background-image: url('../assets/embed-gist.svg'); }
 .gala-embed--x .gala-embed__icon { background-image: url('../assets/embed-x.svg'); }
 .shiki,
-.shiki span { color: var(--shiki-light); background-color: var(--shiki-light-bg); }
-:root[data-mode='dark'] .shiki,
-:root[data-mode='dark'] .shiki span { color: var(--shiki-dark); background-color: var(--shiki-dark-bg); }
-@media (prefers-color-scheme: dark) {
-  :root[data-mode='system'] .shiki,
-  :root[data-mode='system'] .shiki span { color: var(--shiki-dark); background-color: var(--shiki-dark-bg); }
-}
+.shiki span { color: inherit; background-color: var(--gala-color-surface); }
 .gala-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .gala-contact form { display: grid; gap: 1rem; max-inline-size: 42rem; }
 .gala-contact label { display: grid; gap: .35rem; }
@@ -701,20 +758,20 @@ button:focus-visible {
 .gala-engagement-profile p { margin: 0; color: var(--gala-color-muted); font-size: var(--gala-text-sm); }
 
 /* Counts read as data, not as three stacked paragraphs. */
-.gala-engagement dl {
+.gala-engagement > dl {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gala-space-lg);
   margin-block: var(--gala-space-md);
 }
-.gala-engagement dl > div { display: flex; flex-direction: column-reverse; gap: 0.1rem; }
-.gala-engagement dt {
+.gala-engagement > dl > div { display: flex; flex-direction: column-reverse; gap: 0.1rem; }
+.gala-engagement > dl dt {
   font-size: var(--gala-text-xs);
   letter-spacing: var(--gala-tracking-wide);
   text-transform: uppercase;
   color: var(--gala-color-muted);
 }
-.gala-engagement dd {
+.gala-engagement > dl dd {
   margin: 0;
   font-size: var(--gala-text-lg);
   font-variant-numeric: tabular-nums;
@@ -727,7 +784,22 @@ button:focus-visible {
 
 /* v2 keeps every reader action in one stable DOM region. The rail is pure CSS: no scroll
    observer toggles competing copies, so reaching the conversation cannot cause flicker. */
-.gala-engagement { position: relative; margin-block-start: clamp(4rem, 9vw, 8rem); }
+.gala-engagement { position: relative; }
+.gala-reading-progress {
+  position: fixed;
+  z-index: 20;
+  inset: 0 0 auto;
+  inline-size: 100%;
+  block-size: .2rem;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  pointer-events: none;
+}
+.gala-reading-progress::-webkit-progress-bar { background: transparent; }
+.gala-reading-progress::-webkit-progress-value { background: var(--gala-color-accent); }
+.gala-reading-progress::-moz-progress-bar { background: var(--gala-color-accent); }
+.gala-reading-layout { display: block; }
 .gala-conversation {
   max-width: var(--gala-measure);
   margin-inline: auto;
@@ -739,26 +811,30 @@ button:focus-visible {
   font: var(--gala-weight-display) var(--gala-text-2xl)/var(--gala-leading-tight) var(--gala-font-display);
   letter-spacing: var(--gala-tracking-tight);
 }
+.gala-conversation__status { display: block; min-block-size: 1.5em; color: var(--gala-color-muted); }
+.gala-conversation__status:empty { display: none; }
 .gala-action-rail {
-  position: sticky;
+  position: static;
   z-index: 4;
   inset-block-start: 6rem;
-  float: left;
-  width: 3.25rem;
-  margin-inline-start: max(-5rem, calc((var(--gala-measure) - 100%) / 2 - 4rem));
+  box-sizing: border-box;
+  width: min(100%, 42rem);
+  margin: var(--gala-space-xl) auto 0;
   display: grid;
-  gap: .5rem;
-  padding: .5rem;
+  grid-template-columns: 1fr auto 1fr;
+  gap: var(--gala-space-md);
+  align-items: center;
+  padding: var(--gala-space-md);
   border: 1px solid var(--gala-color-hairline);
-  border-radius: 999px;
+  border-radius: var(--gala-radius-surface);
   background: color-mix(in srgb, var(--gala-color-background) 88%, transparent);
   box-shadow: var(--gala-shadow-high);
   backdrop-filter: blur(16px);
 }
 .gala-action-rail button,
 .gala-action-rail a {
-  inline-size: 2.25rem;
-  min-block-size: 2.25rem;
+  inline-size: 2.5rem;
+  min-block-size: 2.5rem;
   display: grid;
   place-items: center;
   padding: 0;
@@ -770,14 +846,49 @@ button:focus-visible {
   text-decoration: none;
   cursor: pointer;
 }
+.gala-action-rail svg { inline-size: 1.2rem; block-size: 1.2rem; }
 .gala-action-rail button:hover,
 .gala-action-rail a:hover,
 .gala-action-rail button[aria-pressed='true'] {
   color: var(--gala-color-background);
   background: var(--gala-color-accent);
 }
-.gala-action-rail .gala-reaction-actions,
-.gala-action-rail .gala-share { display: contents; }
+.gala-engagement .gala-action-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--gala-space-xs);
+  margin: 0;
+}
+.gala-action-stats > div {
+  display: flex;
+  min-block-size: 2.5rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: .4rem;
+  padding-inline: .25rem;
+}
+.gala-action-stats dt {
+  display: grid;
+  place-items: center;
+  color: var(--gala-color-muted);
+}
+.gala-action-stats dt svg { inline-size: 1.2rem; block-size: 1.2rem; }
+.gala-action-stats dd {
+  margin: 0;
+  color: var(--gala-color-text);
+  font: 400 1.2rem/1 var(--gala-font-mono);
+}
+.gala-action-group { display: grid; }
+.gala-reaction-actions,
+.gala-utility-actions,
+.gala-share { display: grid; grid-template-columns: repeat(6, 2.5rem); gap: var(--gala-space-2xs); justify-content: center; }
+.gala-utility-actions > .gala-share { display: contents; }
+.gala-action-rail__separator {
+  inline-size: 1px;
+  align-self: stretch;
+  margin-block: .25rem;
+  background: var(--gala-color-hairline);
+}
 .gala-action-rail .gala-share__fallback {
   position: fixed;
   inline-size: 1px;
@@ -794,18 +905,154 @@ button:focus-visible {
   overflow: visible;
   clip-path: none;
 }
+.gala-action-dock { display: block; min-block-size: 4.25rem; }
+.gala-article-boundary {
+  width: 100%;
+  margin: clamp(4rem, 8vw, 7rem) auto var(--gala-space-lg);
+  padding-block-start: var(--gala-space-md);
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--gala-space-md);
+  border-block-start: .25rem solid var(--gala-color-text);
+  font-size: var(--gala-text-sm);
+}
 
-@media (max-width: 54rem) {
+@media (min-width: 75rem) {
+  .gala-reading-layout {
+    display: grid;
+    grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) 8.5rem;
+    align-items: start;
+    justify-content: space-between;
+    gap: clamp(2rem, 4vw, 5rem);
+  }
+  .gala-reading-layout .gala-toc {
+    grid-column: 1;
+    grid-row: 1;
+    position: sticky;
+    inset-block-start: 6rem;
+    max-inline-size: none;
+    margin-inline: 0;
+    max-block-size: calc(100vh - 8rem);
+    transition: box-shadow var(--gala-motion-fast) var(--gala-ease);
+  }
+  .gala-reading-layout .gala-toc--floating { box-shadow: var(--gala-shadow-high); }
+  .gala-reading-layout .gala-toc > summary { display: none; }
+  .gala-reading-layout .gala-toc > nav {
+    display: block;
+    max-block-size: calc(100vh - 10rem);
+    margin-block-start: 0;
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+  .gala-reading-layout .gala-toc--overflowing ol {
+    padding-block: max(1rem, calc((100vh - 11.5rem) / 2));
+  }
+  .gala-reading-layout .gala-markdown { grid-column: 2; grid-row: 1; max-inline-size: 56rem; inline-size: 100%; margin: 0; }
+  .gala-article-boundary { grid-column: 1 / -1; grid-row: 2; margin-inline: 0; }
+  .gala-action-dock { grid-column: 2; grid-row: 3; }
   .gala-action-rail {
-    inset-block-start: auto;
-    inset-block-end: 1rem;
-    float: none;
-    box-sizing: border-box;
-    width: calc(100% - 2rem);
-    max-width: calc(100% - 2rem);
-    margin: 0 auto;
-    grid-auto-flow: column;
-    overflow-x: auto;
+    grid-column: 3;
+    grid-row: 1;
+    position: sticky;
+    inset-block-start: 6rem;
+    width: 8.5rem;
+    margin: 0;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--gala-space-sm);
+    padding: var(--gala-space-sm);
+    border-radius: var(--gala-radius-surface);
+  }
+  .gala-action-rail .gala-action-stats { gap: var(--gala-space-2xs); }
+  .gala-action-rail:not(.gala-action-rail--integrated) .gala-action-stats { grid-template-columns: 1fr; }
+  .gala-action-rail .gala-action-stats > div {
+    min-block-size: 2.5rem;
+    display: grid;
+    grid-template-columns: repeat(2, 2.5rem);
+    justify-content: center;
+    gap: .25rem;
+    padding-inline: 0;
+  }
+  .gala-action-rail .gala-action-stats dd { justify-self: center; }
+  .gala-action-rail .gala-reaction-actions,
+  .gala-action-rail .gala-utility-actions,
+  .gala-action-rail .gala-share { grid-template-columns: repeat(2, 2.5rem); }
+  .gala-action-rail__separator {
+    inline-size: auto;
+    block-size: 1px;
+    margin: .25rem;
+  }
+  .gala-action-rail--integrated {
+    grid-column: 2;
+    grid-row: 3;
+    position: static;
+    align-self: start;
+    width: 100%;
+    margin: 0;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
+    grid-template-rows: auto 1px auto;
+    grid-template-areas:
+      "reactions utility-separator utilities"
+      "stats-separator stats-separator stats-separator"
+      "stats stats stats";
+    justify-content: stretch;
+    gap: clamp(var(--gala-space-2xs), 1vw, var(--gala-space-md));
+    align-items: center;
+    padding: var(--gala-space-md);
+    border-radius: var(--gala-radius-surface);
+  }
+  .gala-action-rail--integrated .gala-action-rail__separator {
+    grid-area: utility-separator;
+    inline-size: 1px;
+    block-size: auto;
+    margin: .25rem 0;
+  }
+  .gala-action-rail--integrated .gala-action-rail__separator--stats {
+    grid-area: stats-separator;
+    inline-size: auto;
+    block-size: 1px;
+    margin: 0;
+  }
+  .gala-action-rail--integrated .gala-action-group--reactions { grid-area: reactions; }
+  .gala-action-rail--integrated .gala-action-group--utilities { grid-area: utilities; }
+  .gala-action-rail--integrated .gala-reaction-actions { grid-template-columns: repeat(6, 2.5rem); }
+  .gala-action-rail--integrated .gala-utility-actions { grid-template-columns: repeat(4, 2.5rem); }
+  .gala-action-rail--integrated .gala-action-stats > div {
+    min-block-size: 2.5rem;
+    display: flex;
+    flex-direction: row;
+    gap: .4rem;
+    padding-inline: .25rem;
   }
-  .gala-conversation { padding-block-start: var(--gala-space-xl); }
+  .gala-action-rail--integrated .gala-action-stats {
+    grid-area: stats;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 74.99rem) {
+  .gala-action-rail {
+    grid-template-columns: 1fr;
+    width: min(100%, 42rem);
+  }
+  .gala-action-rail__separator {
+    inline-size: auto;
+    block-size: 1px;
+    margin: 0;
+  }
+}
+
+@media (max-width: 47.99rem) {
+  .gala-page-footer { flex-direction: column; }
+  .gala-page-footer__line { grid-template-columns: minmax(0, 1fr); gap: var(--gala-space-2xs); }
+  .gala-page-footer__line > * + *::before { content: none; }
+  .gala-page-footer nav { margin-inline-start: 0; }
+  .gala-page-footer ul { justify-content: flex-start; }
+  .gala-site-name { flex: 1 1 auto; min-inline-size: 4rem; font-size: var(--gala-text-base); }
+  .gala-header-link { display: none; }
+  .gala-site-header__actions { flex: 0 0 auto; gap: .125rem; }
+  .gala-account-control { inline-size: 2.75rem; padding: 0; justify-content: center; }
+  .gala-account-control [data-user-label] { display: none; }
 }