Change homepage masthead for Orange/Sosh

NOTICE.txt

@@ -32,8 +32,8 @@ site/static/**/docs/[version]/assets/img/favicons/mstile-310x150.png
 site/static/**/docs/[version]/assets/img/favicons/mstile-310x310.png
 site/static/**/docs/[version]/assets/img/favicons/safari-pinned-tab.svg
 site/static/**/docs/[version]/assets/img/ouds-web-home-desktop.png
-site/static/**/docs/[version]/assets/img/ouds-web-home-mobile.png
 site/static/**/docs/[version]/assets/img/ouds-web-home-tablet.png
+site/static/**/docs/[version]/assets/img/ouds-web-home.svg
 site/static/**/docs/[version]/assets/img/ouds-web-sprite.svg
 
 End of the parts list under Orange SA Copyright

site/src/components/home/MastHead.astro

@@ -2,10 +2,12 @@
 import { getConfig } from '@libs/config'
 import { getVersionedDocsPath } from '@libs/path'
 import Code from '@components/shortcodes/Code.astro'
+
 ---
 
-<div class="bd-masthead bg-always-black" id="content" data-bs-theme="dark">
-  <div class="container-fluid container-max-width pt-scaled-xlarge pb-scaled-3xlarge">
+<div class="bd-masthead position-relative" id="content" {...((getConfig().brand === 'orange') && { "data-bs-theme": "dark" })}>
+  <div class="bd-masthead-bg position-absolute w-100 h-100"></div>
+  <div class="container-fluid container-max-width pt-scaled-xlarge pb-scaled-3xlarge z-1 position-relative">
     <div class="col-md-8">
       <h1 class="display-medium text-brand-primary mb-scaled-small">OUDS Web</h1>
 
@@ -15,27 +17,25 @@ import Code from '@components/shortcodes/Code.astro'
         based, {getConfig().display_brand} branded accessible and ergonomic components library.
       </p>
 
-      <div class="mb-scaled-xsmall d-inline-block">
-        <Code
-          code={`npm i @ouds/web-common@${getConfig().current_version} @ouds/web-${getConfig().brand}@${getConfig().current_version}`}
-          lang="sh"
-        />
+      <div class="bd-masthead-code mb-scaled-xsmall d-none d-md-inline-block">
+        <Code lang="sh"
+          code={`npm i @ouds/web-common@${getConfig().current_version} @ouds/web-${getConfig().brand}@${getConfig().current_version}`}/>
       </div>
 
       <div class="mb-scaled-medium">
         <a href={getVersionedDocsPath('getting-started/introduction')} class="btn btn-strong">
-          <svg class="bi me-small" aria-hidden="true"
-            ><use xlink:href={getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#book-half')}></use></svg
-          >
+          <svg class="bi me-small" aria-hidden="true">
+            <use xlink:href={getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#book-half')}></use>
+          </svg>
           Read the docs
         </a>
       </div>
 
       <div class="hstack gap-small">
         <p class="mb-none">Currently v{getConfig().current_version}</p>
-        <div class="vr m-none border-always-on-black"></div>
+        <div class="vr m-none border-emphasized"></div>
         <a href={getVersionedDocsPath('getting-started/download')} class="fw-bold">Download</a>
-        <div class="vr m-none border-always-on-black"></div>
+        <div class="vr m-none border-emphasized"></div>
         <a href={`/${getConfig().brand}/docs/versions/`} class="text-nowrap fw-bold">All releases</a>
       </div>
     </div>

site/src/content/docs/components/buttons.mdx

@@ -71,7 +71,7 @@ OUDS Web offers a few variations to use on [colored backgrounds]([[docsref:/util
 - Negative buttons should never be used on colored background.
 </Callout>
 
-<Example class="p-none bd-btn-example" code={`<div class="bg-brand-primary p-large">
+<Example class="p-none bd-btn-example bd-first-rounded" code={`<div class="bg-brand-primary p-large">
     <div data-bs-theme="${getMode('modes-on-brand-primary')}" class="d-flex gap-xsmall flex-wrap">
       <button type="button" class="btn btn-default btn-on-colored-bg">Default</button>
       <button type="button" class="btn btn-strong btn-on-colored-bg">Strong</button>

site/src/content/docs/components/links.mdx

@@ -33,7 +33,7 @@ OUDS Web offers a few variations to use on [colored backgrounds]([[docsref:/util
 **Heads up!** Background utilities used to make colored backgrounds, should always be used with the appropriate color theme (see an example below). Please refer to [colored backgrounds documentation]([[docsref:/utilities/background#colored-backgrounds]]).
 </Callout>
 
-<Example class="p-none" code={`<div class="bg-brand-primary p-large">
+<Example class="p-none bd-first-rounded" code={`<div class="bg-brand-primary p-large">
     <div data-bs-theme="${getMode('modes-on-brand-primary')}">
       <a class="link link-on-colored-bg" href="#">This is an example of link</a>
     </div>

site/src/scss/_component-examples.scss

@@ -8,11 +8,8 @@
   margin-bottom: var(--bs-space-scaled-xsmall); // OUDS mod: instead of `margin: 0 ($bd-gutter-x * -.5) 1rem`
   border: solid var(--bs-color-border-default); // OUDS mod: instead of `var(--bs-border-color)`
   border-width: 1px; // OUDs mod: instead of `border-width: 1px 0`
-
-  @include media-breakpoint-up(md) {
-    // OUDS mod: no margin-right, margin-left, border-width
-    @include border-radius(var(--bs-border-radius));
-  }
+  @include border-radius(var(--bs-border-radius)); // OUDS mod: apply border-radius for all breakpoints
+  // OUDS mod: no margin-right, margin-left, border-width from md breakpoint
 }
 
 .bd-example {
@@ -109,6 +106,11 @@
   .pagination {
     margin-bottom: 0;
   }
+
+  // OUDS mod: rounded corners on first child elements when needed (especially for colored backgrounds)
+  &.bd-first-rounded > :first-child {
+    @include border-radius(calc(var(--bs-border-radius) - 1px) calc(var(--bs-border-radius) - 1px) 0 0);
+  }
 }
 
 //
@@ -380,18 +382,16 @@
 //
 .highlight-container {
   background-color: var(--bd-pre-bg);
+  @include border-radius(var(--bs-border-radius)); // OUDS mod
 }
 
 .highlight {
   position: relative;
   padding: .75rem .75rem 0; // OUDS mod: instead of ` padding: .75rem ($bd-gutter-x * .5)`
   white-space: nowrap; // OUDS mod
   background-color: var(--bd-pre-bg);
-
-  @include media-breakpoint-up(md) {
-    // OUDS mod: no `padding: .75rem 1.25rem`
-    @include border-radius(calc(var(--bs-border-radius) - 1px));
-  }
+  @include border-radius(var(--bs-border-radius)); // OUDS mod: apply border-radius for all breakpoints
+  // OUDS mod: no `padding: .75rem 1.25rem` from breakpoint md
 
   @include media-breakpoint-up(lg) {
     pre {

site/src/scss/_masthead.scss

@@ -1,32 +1,59 @@
 // OUDS mod
 .bd-masthead {
-  padding-bottom: 7.5rem;
-  background-image: url("/#{$brand}/docs/0.5/assets/img/ouds-web-home-mobile.png");
-  background-repeat: no-repeat;
-  background-position: center right;
-  background-size: auto 100%;
+  @if ($brand == "orange") {
+    background-color: var(--#{$prefix}color-bg-primary);
+  }
 
   @include media-breakpoint-up(md) {
-    padding-bottom: 0;
-    background-image: url("/#{$brand}/docs/0.5/assets/img/ouds-web-home-tablet.png");
+    @if ($brand == "orange") {
+      background-color: var(--#{$prefix}color-always-black);
+    }
   }
 
-  @include media-breakpoint-up(xl) {
-    background-image: url("/#{$brand}/docs/0.5/assets/img/ouds-web-home-desktop.png");
-  }
+  .bd-masthead-bg {
+    @include media-breakpoint-up(md) {
+      @if ($brand == "sosh") {
+        background-color: var(--#{$prefix}color-content-brand-primary);
+        mask-image: url("/#{$brand}/docs/0.5/assets/img/ouds-web-home.svg");
+        mask-repeat: no-repeat;
+        mask-position: -200px center;
+      } @else {
+        background-image: url("/#{$brand}/docs/0.5/assets/img/ouds-web-home-tablet.png");
+        background-repeat: no-repeat;
+        background-position: center right;
+        background-size: auto 100%;
+      }
+    }
 
-  .highlight {
-    padding-top: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include media-breakpoint-up(xl) {
+      @if ($brand == "sosh") {
+        mask-position: center right;
+      } @else {
+        background-image: url("/#{$brand}/docs/0.5/assets/img/ouds-web-home-desktop.png");
+      }
+    }
+  }
 
+  .bd-masthead-code {
     @include media-breakpoint-up(md) {
-      padding-right: 6rem;
+      width: 100%;
+      max-width: 31rem;
     }
 
-    pre {
-      padding-top: .75rem;
+    .highlight {
+      padding-top: 0;
       overflow: hidden;
+      text-overflow: ellipsis;
+
+      @include media-breakpoint-up(md) {
+        padding-right: 6rem;
+      }
+
+      pre {
+        padding-top: .75rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 }