@stnd/styles 0.7.5 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stnd/styles
 
+## 0.8.0
+
+### Minor Changes
+
+- Auto-bumped @stnd/styles due to modified code.
+
+## 0.7.6
+
+### Patch Changes
+
+- Auto-bumped @stnd/styles due to modified code.
+
 ## 0.7.5
 
 ### Patch Changes

package/_standard-06-prose.scss

@@ -79,7 +79,10 @@
   transition: grid-template-columns var(--transition);
 
   position: relative;
+  width: 100%;
   max-width: var(--body-max-width);
+  margin-inline: auto;
+  padding-inline: var(--gap-body);
   /*z-index: var(--z-base);*/
   /* Default content positioning */
 
@@ -104,8 +107,8 @@
   > .callout,
   > blockquote,
   > pre,
-  > figure,
-  > p:has(img),
+  > figure:not(.full-bleed):not(.breakout),
+  > p:has(img:not(.full-bleed):not(.breakout):not(.hero):not(.full)),
   > .stnd-code-block {
     grid-column: content;
     margin-inline: var(--content-width-sm);
@@ -125,13 +128,25 @@
     max-width: none;
   }
 
-  .full,
-  .hero {
-    grid-column: hero;
-    max-width: 100vw;
+  .breakout,
+  p:has(> img.breakout),
+  p:has(> video.breakout),
+  figure.breakout {
+    grid-column: 1 / -1;
+    width: min(100%, 72rem);
+    max-width: 72rem;
+    margin-inline: auto !important;
   }
 
-  .hero {
+  .full,
+  .hero,
+  p:has(> img.hero),
+  p:has(> img.full),
+  p:has(> video.hero),
+  p:has(> video.full) {
+    grid-column: 1 / -1;
+    width: calc(100% + var(--gap-body) * 2);
+    max-width: calc(100% + var(--gap-body) * 2);
     margin-inline: calc(var(--gap-body) * -1);
     border-radius: 0 !important;
 
@@ -140,6 +155,26 @@
     }
   }
 
+  .full-bleed,
+  p:has(> img.full-bleed),
+  p:has(> video.full-bleed),
+  figure.full-bleed {
+    grid-column: 1 / -1 !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    margin-inline: calc(50% - 50vw) !important;
+    border-radius: 0 !important;
+
+    img,
+    video {
+      width: 100% !important;
+      max-width: 100% !important;
+      margin-inline: 0 !important;
+      border-radius: 0 !important;
+      display: block;
+    }
+  }
+
   /* Image gallery layout */
   &:not(.no-grid) {
     p:has(img),

package/_standard-07-base.scss

@@ -77,13 +77,18 @@ html {
   }
 }
 
+html,
+body {
+  overflow-x: clip;
+}
+
 body {
   margin: 0;
-  padding: var(--gap-body);
+  padding: 0;
   padding-top: var(--gap-header);
   padding-bottom: var(--gap-footer);
-  max-width: var(--body-max-width);
-  margin-inline: auto;
+  width: 100%;
+  min-height: 100vh;
 
   transition:
     background-color var(--transition),
@@ -98,6 +103,13 @@ body {
   }
 }
 
+.container {
+  width: 100%;
+  max-width: var(--body-max-width);
+  margin-inline: auto;
+  padding-inline: var(--gap-body);
+}
+
 main {
   transition:
     background-color var(--transition),

package/_standard-11-forms.scss

@@ -269,11 +269,19 @@ input[type="checkbox"][role="switch"] {
   border: none;
   cursor: pointer;
   background: var(--color-surface-lowest);
-  box-shadow: var(--shadow-ring), var(--shadow-inset);
+  /* --shadow-inset (not just the thumb's own shadow, fixed two commits ago)
+     is ALSO asymmetric: inset 0 1px 3px (a dark inset shadow pooling near
+     the TOP-inner edge) plus inset 0 -1px 0 0 (a bright highlight line just
+     inside the BOTTOM edge). On a thumb sized to exactly fill this track,
+     that bottom highlight brightens a sliver of the track color right where
+     the thumb's bottom edge sits, reading as the track's own color (accent
+     orange, once checked) peeking out underneath — which is exactly what it
+     is. --shadow-ring alone is symmetric on all four sides. */
+  box-shadow: var(--shadow-ring);
   transition: background 0.2s;
 
   &:hover {
-    box-shadow: var(--shadow-ring), var(--shadow-inset);
+    box-shadow: var(--shadow-ring);
     &::before {
       background: var(--color-accent);
     }

package/_standard-50-utilities.scss

@@ -374,6 +374,19 @@
   margin-inline: calc((var(--gap-body) * -1)) !important;
 }
 
+.full-bleed {
+  width: 100vw !important;
+  max-width: 100vw !important;
+  margin-inline: calc(50% - 50vw) !important;
+  border-radius: 0 !important;
+}
+
+.breakout {
+  width: min(100%, 72rem) !important;
+  max-width: 72rem !important;
+  margin-inline: auto !important;
+}
+
 /* ============================================================ */
 /*  TYPOGRAPHY — Size                                           */
 /* ============================================================ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stnd/styles",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "type": "module",
   "author": "Francis Fontaine",
   "license": "MIT",