Thiner handle of OUDS mod + small tweaks of the doc.

Orange-OpenSource · Nov 13, 2024 · ff4b7fb · ff4b7fb
1 parent 60abb03
commit ff4b7fb
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 22 deletions.
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -185,7 +185,8 @@ h6 {
 p {
   margin-top: 0;
   margin-bottom: $paragraph-margin-bottom;
-  // todo lm: @extend %body-medium;
+  // todo lm: Decide if we keep this as-is or not.
+  // @extend %body-medium;
 }
 
 
@@ -205,7 +206,7 @@ abbr[title] {
 // Address
 
 address {
-  margin-bottom: 1rem;
+  margin-bottom: $ouds-space-fixed-medium; // OUDS mod: instead of `1rem`
   font-style: normal;
   line-height: inherit;
 }
@@ -287,7 +288,7 @@ dd {
 // Blockquote
 
 blockquote {
-  margin: 0 0 1rem;
+  margin: 0 0 $ouds-space-fixed-medium; // OUDS mod: instead of `0 0 1rem`
 }
 
 // OUDS mod: No italic
@@ -389,7 +390,7 @@ samp {
 pre {
   display: block;
   margin-top: 0; // 1
-  margin-bottom: 1rem; // 2
+  margin-bottom: $ouds-space-fixed-medium; // 2 // OUDS mod: instead of `1rem`
   overflow: auto; // 3
   @extend %code-medium; // OUDS mod: instead of `@include font-size($code-font-size)`
   color: $pre-color;

diff --git a/scss/_type.scss b/scss/_type.scss
@@ -31,7 +31,6 @@
   font-weight: $lead-font-weight;
 }
 
-// OUDS mod: no @each
 // Type display classes
 @each $display, $font-size in $display-font-sizes {
   .display-#{$display} {
@@ -43,8 +42,6 @@
     @extend #{$font-size}; // OUDS mod: instead of `@include font-size($font-size)`
   }
 }
-// End mod
-
 
 //
 // Emphasis

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -537,7 +537,7 @@ $icon-link-icon-transform:    translate3d(.25em, 0, 0) !default;
 //
 // Style p element.
 
-$paragraph-margin-bottom:   1rem !default;
+$paragraph-margin-bottom: $ouds-space-fixed-medium !default; // OUDS mod: instead of `1rem`
 
 
 // Grid breakpoints
@@ -763,7 +763,7 @@ $font-sizes: (
 // scss-docs-end font-sizes
 
 // scss-docs-start headings-variables
-$headings-margin-bottom:      $spacer !default; // OUDS mod
+$headings-margin-bottom:      $ouds-space-fixed-medium !default; // OUDS mod: instead of `$spacer * .5`
 $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        $ouds-font-weight-web-heading !default;
@@ -812,12 +812,12 @@ $text-muted:                  var(--#{$prefix}secondary-color) !default; // Depr
 
 // OUDS mod: no $initialism-font-size
 
-$blockquote-margin-y:         $spacer !default;
+$blockquote-margin-y:         $ouds-space-fixed-medium !default; // OUDS mod: instead of `1rem`
 // OUDS mod: no `$blockquote-font-size`
 $blockquote-footer-color:     var(--#{$prefix}secondary-color) !default; // OUDS mod: instead of `$gray-600`
 // OUDS mod: no `$blockquote-footer-font-size`
 
-$hr-margin-y:                 $spacer !default;
+$hr-margin-y:                 $ouds-space-fixed-medium !default;
 $hr-color:                    inherit !default;
 
 // fusv-disable

diff --git a/site/content/docs/0.0/content/reboot.md b/site/content/docs/0.0/content/reboot.md
@@ -139,14 +139,14 @@ The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are
 
 {{< example >}}
 <hr>
+{{< /example >}}
 
 <!--<div class="text-success">
   <hr>
 </div>
 
 <hr class="border border-danger border-2 opacity-50">
 <hr class="border border-primary border-3 opacity-75">-->
-{{< /example >}}
 
 <!-- ## Lists
 

diff --git a/site/content/docs/0.0/content/typography.md b/site/content/docs/0.0/content/typography.md
@@ -101,15 +101,15 @@ We provide `.display-*` from `1` through `3`. Each class sets `font-size` but al
 </details>
 
 <div class="bd-example">
-  <div class="display-large pb-3 mb-3 border-bottom">Display 1</div>
-  <div class="display-medium pb-3 mb-3 border-bottom">Display 2</div>
-  <div class="display-small">Display 3</div>
+  <div class="display-large pb-3 mb-3 border-bottom">Display large</div>
+  <div class="display-medium pb-3 mb-3 border-bottom">Display medium</div>
+  <div class="display-small">Display small</div>
 </div>
 
 ```html
-<h1 class="display-large">Display 1</h1>
-<h1 class="display-medium">Display 2</h1>
-<h1 class="display-small">Display 3</h1>
+<h1 class="display-large">Display large</h1>
+<h1 class="display-medium">Display medium</h1>
+<h1 class="display-small">Display small</h1>
 ```
 
 Display headings are configured via the `$display-font-sizes` Sass map and the variable `$display-font-weight`.

diff --git a/site/content/docs/0.0/utilities/text.md b/site/content/docs/0.0/utilities/text.md
@@ -13,6 +13,7 @@ toc: true
 Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
 
 // TODO LM
+
 {{< callout info >}}
 Note that you may use `.ms-{breakpoint}-auto` (respectively `.mx-{breakpoint}-auto`) in addition of `.text-{breakpoint}-end` (respectively `.text-{breakpoint}-center`) in some cases.
 {{< /callout >}}

diff --git a/site/layouts/partials/home/get-started.html b/site/layouts/partials/home/get-started.html
@@ -3,10 +3,10 @@
     <svg class="bi fs-1"><use xlink:href="#code"></use></svg>
   </div>
   <h2 class="mb-tall lh-sm fw-semibold">Get started any way you&nbsp;want</h2>
-  <p class="lead fw-normal">
+  <p class="lead mx-md-auto fw-normal">
     Jump right into building with OUDS Web—use the CDN, install it via package manager, or download the source code.
   </p>
-  <p class="d-flex justify-content-md-start justify-content-md-center lead fw-normal">
+  <p class="d-flex justify-content-md-start justify-content-md-center lead mx-auto fw-normal">
     <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-tallest">
       Read installation docs
       <svg class="bi"><use xlink:href="#arrow-right"></use></svg>

diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
@@ -8,10 +8,10 @@
       </p>
       -->
       <h1 class="mb-tall display-large">Build fast, responsive sites with OUDS Web</h1>
-      <p class="lead mb-short">
+      <p class="lead mx-auto 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>
-      <p class="lead mb-tallest">
+      <p class="lead mx-auto mb-tallest">
         OUDS Web is a Bootstrap based, Orange branded accessible and ergonomic components library.
       </p>
       <div class="d-flex flex-column flex-lg-row align-items-md-stretch justify-content-md-center gap-tall mb-tallest">