Some modifs + some OUDS mods

scss/_reboot.scss

@@ -626,8 +626,9 @@ legend {
   width: 100%;
   padding: 0;
   margin-bottom: $legend-margin-bottom;
-  @extend %body-large; // OUDS mod: instead of `@include font-size($legend-font-size)`
   font-weight: $legend-font-weight;
+  // OUDS mod: no line-height
+  @extend %body-large; // OUDS mod: instead of `@include font-size($legend-font-size)`
 
   + * {
     clear: left; // 2

scss/_root.scss

@@ -63,6 +63,7 @@
   --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
   --#{$prefix}gradient: #{$gradient};
 
+  // OUDS mod
   // scss-docs-start root-font-variables-ouds
   --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-mobile)};
   --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-mobile)};
@@ -191,6 +192,7 @@
     --#{$prefix}font-max-width-body-small: #{px-to-rem($ouds-size-max-width-type-body-small-desktop)};
   }
   // scss-docs-end root-font-variables-ouds
+  // End mod
 
   // Root and body
   // scss-docs-start root-body-variables
@@ -201,7 +203,7 @@
   @include rfs($font-size-base, --#{$prefix}body-font-size);
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
-  --#{$prefix}body-letter-spacing: #{$letter-spacing-base};
+  --#{$prefix}body-letter-spacing: #{$letter-spacing-base}; // OUDS mod
   @if $body-text-align != null {
     --#{$prefix}body-text-align: #{$body-text-align};
   }

scss/_type.scss

@@ -43,24 +43,6 @@
     @extend #{$font-size}; // OUDS mod: instead of `@include font-size($font-size)`
   }
 }
-
-// .display-1 {
-//   @extend %heading;
-//   font-weight: $display-font-weight;
-//   @extend %display-large;
-// }
-
-// .display-2 {
-//   @extend %heading;
-//   font-weight: $display-font-weight;
-//   @extend %display-medium;
-// }
-
-// .display-3 {
-//   @extend %heading;
-//   font-weight: $display-font-weight;
-//   @extend %display-small;
-// }
 // End mod
 
 

scss/_variables.scss

@@ -444,7 +444,7 @@ $enable-bootstrap-compatibility:  false !default; // OUDS mod: used to enforce B
 $enable-dark-mode:            true !default;
 $color-mode-type:             data !default; // `data` or `media-query`
 
-// Prefix for :root CSS variables has been moved to `_config.scss`
+// OUDS mod: Prefix for :root CSS variables has been moved to `_config.scss`
 
 // Gradient
 //
@@ -711,8 +711,8 @@ $aspect-ratios: (
 // Font, line-height, and color for body text, headings, and more.
 
 // scss-docs-start font-variables
-$font-family-sans-serif:      $ouds-font-family-sans-serif-stack !default;
-$font-family-monospace:       $ouds-font-family-monospace-stack !default;
+$font-family-sans-serif:      $ouds-font-family-sans-serif-stack !default; // OUDS mod
+$font-family-monospace:       $ouds-font-family-monospace-stack !default; // OUDS mod
 $font-family-base:            var(--#{$prefix}font-sans-serif) !default;
 $font-family-code:            var(--#{$prefix}font-monospace) !default;
 
@@ -741,9 +741,7 @@ $line-height-base:            var(--#{$prefix}font-line-height-body-medium) !def
 $line-height-sm:              var(--#{$prefix}font-line-height-body-small) !default;
 $line-height-lg:              var(--#{$prefix}font-line-height-body-large) !default;
 
-$letter-spacing-base:         var(--#{$prefix}font-letter-spacing-body-medium) !default;
-// $letter-spacing-sm:           var(--#{$prefix}font-letter-spacing-body-small) !default;
-$letter-spacing-lg:           var(--#{$prefix}font-letter-spacing-body-large) !default;
+$letter-spacing-base:         var(--#{$prefix}font-letter-spacing-body-medium) !default; // OUDS mod
 
 $h1-font-size:                var(--#{$prefix}font-size-heading-xlarge) !default;
 $h2-font-size:                var(--#{$prefix}font-size-heading-large) !default;
@@ -803,8 +801,6 @@ $display-line-height: $headings-line-height !default;
 // scss-docs-start type-variables
 $lead-font-size:              $h5-font-size !default;
 $lead-font-weight:            $ouds-font-weight-web-body-default !default;
-// $lead-line-height:            $line-height-lg !default;
-// $lead-letter-spacing:         $letter-spacing-lg !default;
 
 $small-font-size:             .875em !default;
 
@@ -817,9 +813,9 @@ $text-muted:                  var(--#{$prefix}secondary-color) !default; // Depr
 $initialism-font-size:        $small-font-size !default;
 
 $blockquote-margin-y:         $spacer !default;
-// $blockquote-font-size:        $font-size-lg !default;
+// OUDS mod: no `$blockquote-font-size`
 $blockquote-footer-color:     var(--#{$prefix}secondary-color) !default; // OUDS mod: instead of `$gray-600`
-// $blockquote-footer-font-size: $small-font-size !default;
+// OUDS mod: no `$blockquote-footer-font-size`
 
 $hr-margin-y:                 $spacer !default;
 $hr-color:                    inherit !default;
@@ -838,14 +834,14 @@ $vr-border-width:             2px !default; // OUDS mod: instead of `var(--#{$pr
 // scss-docs-end vr-variables
 
 $legend-margin-bottom:        $spacer * .25 !default;
-// $legend-font-size:            $font-size-lg !default;
+// OUDS mod: no `$legend-font-size`
 $legend-font-weight:          $font-weight-bold !default;
 
 $dt-font-weight:              $font-weight-bold !default;
 
 $list-inline-padding:         $spacer * .25 !default;
 
-$mark-padding:                .125em .1875em !default; // OUDS mod
+$mark-padding:                .125em !default; // OUDS mod: instead of `.1875rem`
 $mark-color:                  $white !default; // OUDS mod: instead of `$body-color`
 $mark-bg:                     $black !default; // OUDS mod: instead of `$yellow-100`
 // scss-docs-end type-variables

site/assets/scss/_toc.scss

@@ -11,7 +11,7 @@
   }
 
   nav {
-    @extend %label-small; // OUDS mod: instead of `.875rem`
+    @extend %label-medium; // OUDS mod: instead of `.875rem`
 
     ul {
       padding-left: 0;
@@ -20,16 +20,16 @@
 
       ul {
         padding-left: 1rem;
-        margin-left: -.5rem; // OUDS mod
+        margin-left: -$ouds-space-fixed-shorter; // OUDS mod
       }
     }
 
     a {
       display: block;
-      padding: .3125rem 0 .3125rem .75rem; // OUDS mod
+      padding: $ouds-space-fixed-shortest 0 $ouds-space-fixed-shortest $ouds-space-fixed-medium; // OUDS mod
       color: inherit;
       text-decoration: none;
-      border-left: .125rem solid transparent;
+      // OUDS mod: no border-left
 
       &:hover,
       &.active {
@@ -64,7 +64,7 @@
 .bd-toc-collapse {
   @include media-breakpoint-down(md) {
     nav {
-      padding: 1.25rem 1.25rem 1.25rem 1rem;
+      padding: $ouds-space-fixed-medium; // OUDS mod: instead of `1.25rem 1.25rem 1.25rem 1rem`
       background-color: var(--bs-tertiary-bg);
       border: 1px solid var(--bs-border-color);
       @include border-radius(var(--bs-border-radius));

site/content/docs/0.0/examples/font/index.html

@@ -7,7 +7,7 @@
 ---
 
 <main class="container-fluid container-max-width">
-  <h1 class="display-1">Page title.</h1>
+  <h1 class="display-large">Page title.</h1>
   <p class="lead">Description paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue.</p>
   <h2>H2 title with <code>code</code> and a very very very very very very very very very very very very very very very very very very very very very very very very very very very long title</h2>
   <p>Default body paragraph. <code>Code.</code> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique <del>bibendum</del> tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. <abbr title="HyperText Markup Language">HTML</abbr> Nunc blandit dolor lacus, sed venenatis erat maximus et. <a href="#">Default link</a> Vestibulum eu mi nec elit finibus feugiat. Vestibulum commodo, leo quis hendrerit egestas, <mark>turpis eros</mark> ultrices diam, vitae volutpat leo nisl nec mauris. <b>Vestibulum in quam et mauris bibendum efficitur.</b> <small>hIn porttitor enim consectetur odio mollis, at fermentum velit volutpat.</small> Vestibulum facilisis, mauris eu viverra vestibulum, erat nunc volutpat justo, id finibus nisi purus ultricies ante. Mauris consectetur magna vel mollis fermentum. Aenean lacus mi, tempor at mi in, efficitur gravida lectus. Curabitur in massa ultrices, hendrerit nisl ut, lobortis elit. <kbd><kbd>Ctrl</kbd> \+ <kbd>,</kbd></kbd> Nunc sagittis nisi ut nulla eleifend iaculis. CO<sub>2</sub> and 3m<sup>2</sup></p>

site/content/docs/0.0/migration.md

@@ -11,8 +11,6 @@ toc: true
 
 ## v0.0.4
 
-### Content
-
 ### Layout
 
 - <span class="badge text-bg-success">New</span> Responsive flexbox grid system is now available with eight default responsive tiers defined at breakpoints `2xs`, `xs`, `sm`, `md`, `xl`, `2xl`, and `3xl`.

site/layouts/_default/docs.html

@@ -42,7 +42,7 @@ <h2 class="mb-none">
             <span class="d-none d-md-block h6 my-short ms-tall">On this page</span>
           </h2>
           <hr class="d-none d-md-block my-short ms-tall">
-          <div class="collapse bd-toc-collapse ms-md-shortest" id="tocContents">
+          <div class="collapse bd-toc-collapse ms-shorter" id="tocContents">
             {{ .TableOfContents }}
           </div>
         </div>

site/layouts/_default/single.html

@@ -5,7 +5,7 @@
   <main class="bd-content order-1" id="content">
     <div class="title-bar mb-short mb-md-none">
       <div class="container-fluid container-max-width">
-        <h1 class="display-1">{{ .Title | markdownify }}</h1>
+        <h1 class="display-large">{{ .Title | markdownify }}</h1>
       </div>
     </div>
     <div class="pb-tallest pb-md-short">

site/layouts/partials/home/masthead.html

@@ -7,7 +7,7 @@
         <span class="text-body-secondary">Color mode support, expanded color palette, and more!</span>
       </p>
       -->
-      <h1 class="mb-tall display-1">Build fast, responsive sites with OUDS Web</h1>
+      <h1 class="mb-tall display-large">Build fast, responsive sites with OUDS Web</h1>
       <p class="lead mb-short">
         Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
       </p>