unigrid.css 0.3.0 → 0.3.2

package/src/scss/_reset.scss

@@ -1,82 +1,82 @@
-// ==========================================================================
-// Unigrid CSS Framework — Reset / Base
-//
-// Line-height and font sizing aligned to Gutenberg vertical rhythm.
-// ==========================================================================
-
-
-@use "variables" as *;
-@use "mixins" as *;
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-:root {
-  font-family: $ug-font-family;
-  font-feature-settings: 'liga' 1, 'calt' 1, 'ss07' 1; /* fix for Chrome */
-}
-@supports (font-variation-settings: normal) {
-  :root { font-family: $ug-font-family-variable; }
-}
-
-html {
-  font-size: #{$ug-base}px;
-  font-size: #{$ug-base-font-size};
-  -webkit-text-size-adjust: 100%;
-  --ug-leading: #{$ug-leading}px;
-  line-height: var(--ug-leading);
-
-  @media screen and (min-width: #{$ug-prose-max-width}) {
-    font-size: #{$ug-base-desktop}px;
-    font-size: #{$ug-base-font-size-desktop};
-    --ug-leading: #{$ug-leading-desktop}px;
-  }
-}
-
-body {
-  font-family: $ug-font-family;
-  font-feature-settings: 'liga' 1, 'calt' 1, 'ss07' 1;
-  @include ug-font-size("base");
-  @include ug-font-weight("regular");
-  color: $ug-black;
-  background-color: $ug-white;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-@supports (font-variation-settings: normal) {
-  body {
-    font-family: $ug-font-family-variable;
-  }
-}
-
-img,
-svg,
-video {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-
-a {
-  color: inherit;
-  text-decoration: underline;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-button,
-input,
-select,
-textarea {
-  font: inherit;
-  color: inherit;
-}
+// ==========================================================================
+// Unigrid CSS Framework — Reset / Base
+//
+// Line-height and font sizing aligned to Gutenberg vertical rhythm.
+// ==========================================================================
+
+
+@use "variables" as *;
+@use "mixins" as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  font-family: $ug-font-family;
+  font-feature-settings: 'liga' 1, 'calt' 1, 'ss07' 1; /* fix for Chrome */
+}
+@supports (font-variation-settings: normal) {
+  :root { font-family: $ug-font-family-variable; }
+}
+
+html {
+  font-size: #{$ug-base}px;
+  font-size: #{$ug-base-font-size};
+  -webkit-text-size-adjust: 100%;
+  --ug-leading: #{$ug-leading}px;
+  line-height: var(--ug-leading);
+
+  @media screen and (min-width: #{$ug-prose-max-width}) {
+    font-size: #{$ug-base-desktop}px;
+    font-size: #{$ug-base-font-size-desktop};
+    --ug-leading: #{$ug-leading-desktop}px;
+  }
+}
+
+body {
+  font-family: $ug-font-family;
+  font-feature-settings: 'liga' 1, 'calt' 1, 'ss07' 1;
+  @include ug-font-size("base");
+  @include ug-font-weight("regular");
+  color: $ug-black;
+  background-color: $ug-white;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@supports (font-variation-settings: normal) {
+  body {
+    font-family: $ug-font-family-variable;
+  }
+}
+
+img,
+svg,
+video {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}

package/src/scss/_scrollspy.scss

@@ -1,62 +1,62 @@
-// ==========================================================================
-// Unigrid CSS Framework — Scrollspy (BEM)
-//
-// Highlights navigation links based on scroll position.
-// Requires scrollspy.js for IntersectionObserver-based tracking.
-//
-// Block: .ug-scrollspy
-// Elements: __nav, __link
-// Modifiers: __link--active
-//
-// Usage:
-//   <nav class="ug-scrollspy" data-ug-scrollspy>
-//     <a class="ug-scrollspy__link" href="#section1">Section 1</a>
-//     <a class="ug-scrollspy__link" href="#section2">Section 2</a>
-//   </nav>
-// ==========================================================================
-
-@use "variables" as *;
-@use "mixins" as *;
-
-.ug-scrollspy {
-  position: sticky;
-  top: var(--ug-leading);
-  align-self: flex-start;
-
-  &__nav {
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    border-left: 2px solid $ug-light-gray;
-  }
-
-  &__link {
-    display: block;
-    padding: calc(var(--ug-leading) * 0.25) var(--ug-leading);
-    @include ug-font-size("sm");
-    @include ug-rhythm-line-height(1);
-    color: $ug-medium-gray;
-    text-decoration: none;
-    border-left: 2px solid transparent;
-    margin-left: -2px;
-    transition: color 0.15s, border-color 0.15s;
-
-    &:hover {
-      color: $ug-black;
-    }
-
-    &--active {
-      color: $ug-black;
-      @include ug-font-weight("bold");
-      border-left-color: $ug-black;
-    }
-  }
-
-  // Nested (indented sub-sections)
-  &__link--nested {
-    padding-left: calc(var(--ug-leading) * 1.5);
-    @include ug-font-size("xs");
-  }
-}
+// ==========================================================================
+// Unigrid CSS Framework — Scrollspy (BEM)
+//
+// Highlights navigation links based on scroll position.
+// Requires scrollspy.js for IntersectionObserver-based tracking.
+//
+// Block: .ug-scrollspy
+// Elements: __nav, __link
+// Modifiers: __link--active
+//
+// Usage:
+//   <nav class="ug-scrollspy" data-ug-scrollspy>
+//     <a class="ug-scrollspy__link" href="#section1">Section 1</a>
+//     <a class="ug-scrollspy__link" href="#section2">Section 2</a>
+//   </nav>
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-scrollspy {
+  position: sticky;
+  top: var(--ug-leading);
+  align-self: flex-start;
+
+  &__nav {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border-left: 2px solid $ug-light-gray;
+  }
+
+  &__link {
+    display: block;
+    padding: calc(var(--ug-leading) * 0.25) var(--ug-leading);
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    color: $ug-medium-gray;
+    text-decoration: none;
+    border-left: 2px solid transparent;
+    margin-left: -2px;
+    transition: color 0.15s, border-color 0.15s;
+
+    &:hover {
+      color: $ug-black;
+    }
+
+    &--active {
+      color: $ug-black;
+      @include ug-font-weight("bold");
+      border-left-color: $ug-black;
+    }
+  }
+
+  // Nested (indented sub-sections)
+  &__link--nested {
+    padding-left: calc(var(--ug-leading) * 1.5);
+    @include ug-font-size("xs");
+  }
+}

package/src/scss/_section.scss

@@ -1,91 +1,91 @@
-// ==========================================================================
-// Unigrid CSS Framework — Section Title (BEM)
-//
-// The signature black band with white heading spanning the full width.
-// Padding aligned to the vertical rhythm (leading multiples).
-//
-// Block: .ug-section
-// Elements: __title, __subtitle
-// Modifiers: --brown, --red, --green, --blue, --light, --compact, --large
-// ==========================================================================
-
-
-@use "variables" as *;
-@use "mixins" as *;
-
-.ug-section {
-  width: 100%;
-  background-color: $ug-black;
-  color: $ug-white;
-  padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
-
-  // -- Title --
-  &__title {
-    @include ug-rhythm-font-size(1.6875);
-    @include ug-rhythm-line-height(1.5);
-    @include ug-font-weight("black");
-    letter-spacing: -0.01em;
-    margin: 0;
-  }
-
-  // -- Subtitle --
-  &__subtitle {
-    @include ug-font-size("sm");
-    @include ug-font-weight("light");
-    @include ug-rhythm-line-height(1);
-    opacity: 0.7;
-    margin: 0;
-  }
-
-  // ==============================
-  // Size Modifiers
-  // ==============================
-
-  &--compact {
-    padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 1.5);
-
-    .ug-section__title {
-      @include ug-rhythm-font-size(1.2);
-      @include ug-rhythm-line-height(1);
-    }
-  }
-
-  &--large {
-    padding: calc(var(--ug-leading) * 2) calc(var(--ug-leading) * 1.5);
-
-    .ug-section__title {
-      @include ug-rhythm-font-size(2.5);
-      @include ug-rhythm-line-height(2);
-    }
-  }
-
-  // ==============================
-  // Color Modifiers
-  // ==============================
-
-  &--brown { background-color: $ug-brown; }
-  &--red   { background-color: $ug-red; }
-  &--green { background-color: $ug-green; }
-  &--blue  { background-color: $ug-blue; }
-
-  &--light {
-    background-color: $ug-warm-gray;
-    color: $ug-black;
-  }
-
-  // ==============================
-  // Responsive
-  // ==============================
-
-  @include ug-breakpoint-down("md") {
-    padding: var(--ug-leading) var(--ug-leading);
-
-    &--large {
-      padding: calc(var(--ug-leading) * 1.5) var(--ug-leading);
-    }
-
-    &--compact {
-      padding: calc(var(--ug-leading) * 0.5) var(--ug-leading);
-    }
-  }
-}
+// ==========================================================================
+// Unigrid CSS Framework — Section Title (BEM)
+//
+// The signature black band with white heading spanning the full width.
+// Padding aligned to the vertical rhythm (leading multiples).
+//
+// Block: .ug-section
+// Elements: __title, __subtitle
+// Modifiers: --brown, --red, --green, --blue, --light, --compact, --large
+// ==========================================================================
+
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-section {
+  width: 100%;
+  background-color: $ug-black;
+  color: $ug-white;
+  padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
+
+  // -- Title --
+  &__title {
+    @include ug-rhythm-font-size(1.6875);
+    @include ug-rhythm-line-height(1.5);
+    @include ug-font-weight("black");
+    letter-spacing: -0.01em;
+    margin: 0;
+  }
+
+  // -- Subtitle --
+  &__subtitle {
+    @include ug-font-size("sm");
+    @include ug-font-weight("light");
+    @include ug-rhythm-line-height(1);
+    opacity: 0.7;
+    margin: 0;
+  }
+
+  // ==============================
+  // Size Modifiers
+  // ==============================
+
+  &--compact {
+    padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 1.5);
+
+    .ug-section__title {
+      @include ug-rhythm-font-size(1.2);
+      @include ug-rhythm-line-height(1);
+    }
+  }
+
+  &--large {
+    padding: calc(var(--ug-leading) * 2) calc(var(--ug-leading) * 1.5);
+
+    .ug-section__title {
+      @include ug-rhythm-font-size(2.5);
+      @include ug-rhythm-line-height(2);
+    }
+  }
+
+  // ==============================
+  // Color Modifiers
+  // ==============================
+
+  &--brown { background-color: $ug-brown; }
+  &--red   { background-color: $ug-red; }
+  &--green { background-color: $ug-green; }
+  &--blue  { background-color: $ug-blue; }
+
+  &--light {
+    background-color: $ug-warm-gray;
+    color: $ug-black;
+  }
+
+  // ==============================
+  // Responsive
+  // ==============================
+
+  @include ug-breakpoint-down("md") {
+    padding: var(--ug-leading) var(--ug-leading);
+
+    &--large {
+      padding: calc(var(--ug-leading) * 1.5) var(--ug-leading);
+    }
+
+    &--compact {
+      padding: calc(var(--ug-leading) * 0.5) var(--ug-leading);
+    }
+  }
+}