From 3b5607736d90dd83f9156a58671687c86f3bf891 Mon Sep 17 00:00:00 2001
From: alexisben <alexiben7@gmail.com>
Date: Thu, 21 Jul 2022 10:50:26 +0200
Subject: [PATCH] Small components wip
---
assets/sass/_theme/_configuration.sass | 15 ++++-
assets/sass/_theme/_utils.sass | 1 +
assets/sass/_theme/blocks/blocks.sass | 6 +-
.../sass/_theme/design-system/breadcrumb.sass | 20 +++++++
assets/sass/_theme/design-system/header.sass | 5 ++
assets/sass/_theme/design-system/hero.sass | 60 +++++++++++++++++++
assets/sass/_theme/design-system/layout.sass | 4 ++
assets/sass/_theme/design-system/nav.sass | 53 ++++++++++++++++
.../sass/_theme/design-system/typography.sass | 3 +
assets/sass/_theme/hugo-osuny.sass | 1 +
10 files changed, 164 insertions(+), 4 deletions(-)
create mode 100644 assets/sass/_theme/design-system/hero.sass
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index c0aea845..578c644b 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -5,9 +5,12 @@ $main-background-color: white !default // Background color
$body-color: $main-color !default
$body-background-color: $main-background-color !default
+$link-color: $main-color !default
+
// TYPOGRAPHY
// Fonts family
+// TODO: choisir typo system par défaut
$body-font-family: "Georgia", serif !default
$heading-font-family: "Helvetica", "Arial", sans-serif !default
@@ -32,6 +35,9 @@ $h4-weight: $heading-font-weight !default
$h5-weight: $heading-font-weight !default
$h6-weight: $heading-font-weight !default
+// Breadcrumb
+$breadcrumb-color: white !default
+
// Spacing
$spacing1: 24px !default
$spacing2: 48px !default
@@ -44,12 +50,19 @@ $zindex-nav-accessibility: 1010 !default
// Header
$header-color: $main-color !default
+$header-hover-color: rgba($main-color, 0.7) !default // TODO : Réflechir à plus élégant / générique
$header-background-color: $main-background-color !default
$header-sticky-enabled: true
// Footer
$footer-color: $main-color !default
-$footer-background-color: $main-background-color !default
+$footer-background-color: darken($main-background-color, 2.5) !default
+
+// Hero
+$hero-height: 375px !default
+$hero-height-md: 450px !default
+$hero-color: white !default
+$hero-background-color: black !default
// Icons
$icons: ()
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index c1f0be4e..d9821045 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -21,6 +21,7 @@
@content
@mixin link
+ color: $link-color
text-decoration-color: rgba($link-color, 0.3)
text-decoration-line: underline
text-decoration-thickness: 1px
diff --git a/assets/sass/_theme/blocks/blocks.sass b/assets/sass/_theme/blocks/blocks.sass
index f67e851c..0c6945fe 100644
--- a/assets/sass/_theme/blocks/blocks.sass
+++ b/assets/sass/_theme/blocks/blocks.sass
@@ -1,3 +1,3 @@
-// .blocks
-// > *
-// margin-top: map-get($spacers, 5)
+.blocks
+ > *
+ margin-top: $spacing1
diff --git a/assets/sass/_theme/design-system/breadcrumb.sass b/assets/sass/_theme/design-system/breadcrumb.sass
index e69de29b..34b3116f 100644
--- a/assets/sass/_theme/design-system/breadcrumb.sass
+++ b/assets/sass/_theme/design-system/breadcrumb.sass
@@ -0,0 +1,20 @@
+.breadcrumb
+ -webkit-touch-scrolling: touch
+ flex-wrap: nowrap
+ overflow: auto
+ list-style: none
+ display: flex
+ padding-left: 0
+ a
+ color: $breadcrumb-color
+ text-decoration-color: rgba($breadcrumb-color, 0.3)
+ &:hover
+ text-decoration-color: rgba($breadcrumb-color, 1)
+ li
+ flex-shrink: 0
+ white-space: nowrap
+ &-item + &-item
+ &:before
+ color: lighten($breadcrumb-color, 0.5)
+ content: "/"
+ padding-right: 0.5rem
diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass
index a931b66f..969c58b4 100644
--- a/assets/sass/_theme/design-system/header.sass
+++ b/assets/sass/_theme/design-system/header.sass
@@ -13,7 +13,12 @@ header[role="banner"]
position: sticky
nav[role="navigation"]
+ .container
+ display: flex
+ padding: $spacing1
+ justify-content: space-between
button[type="button"]
+ display: none
border: 0
color: $body-color
position: relative
diff --git a/assets/sass/_theme/design-system/hero.sass b/assets/sass/_theme/design-system/hero.sass
new file mode 100644
index 00000000..a27216ec
--- /dev/null
+++ b/assets/sass/_theme/design-system/hero.sass
@@ -0,0 +1,60 @@
+.hero
+ align-items: flex-end
+ background-color: $hero-background-color
+ color: $hero-color
+ display: flex
+ margin-bottom: 3rem
+ min-height: $hero-height
+ overflow: hidden
+ padding-bottom: 2rem
+ padding-top: 2rem
+ position: relative
+ @include media-breakpoint-up(md)
+ min-height: $hero-height-md
+
+ .page-with-blocks &
+ margin-bottom: 0
+
+ *:focus-visible
+ outline-color: white
+
+ p
+ margin-bottom: 0
+
+ > div:first-of-type
+ > div
+ margin-top: $spacing1
+ @include media-breakpoint-up(xl)
+ margin-top: px2rem(70)
+
+ > div + div
+ margin-top: auto
+ .container
+ padding-bottom: $spacing1
+ padding-top: $spacing1
+ @include media-breakpoint-up(md)
+ &::before
+ background-color: rgba(white, .2)
+ content: ''
+ display: block
+ height: 1px
+ width: 100%
+ & + aside
+ margin-top: 0
+ > div
+ position: relative
+ z-index: 1
+ > picture
+ img
+ height: 100%
+ inset: 0
+ object-fit: cover
+ opacity: 0.3
+ position: absolute
+ width: 100%
+ // polyfill for inset
+ @supports not (inset: 0)
+ bottom: 0
+ left: 0
+ right: 0
+ top: 0
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index c487f8d0..dfb92b74 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -1,3 +1,7 @@
body
color: $body-color
background: $body-background-color
+
+img
+ max-width: 100%
+ height: auto
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index e69de29b..e7f66dc2 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -0,0 +1,53 @@
+.menu
+ a,
+ a:hover,
+ a:focus,
+ a:active
+ color: $header-color
+ ul
+ display: flex
+ list-style: none
+ margin: 0
+ padding: 0
+ a,
+ span
+ font-size: px2rem(18)
+ line-height: px2rem(26)
+ color: $header-color
+ a:hover,
+ a:focus
+ color: $header-hover-color
+
+ .dropdown-menu
+ display: none
+ background: $header-background-color
+
+ .nav-level-1
+ display: flex
+ > li > a
+ padding: $spacing1
+ li.has-children:hover
+ .dropdown-menu
+ padding: $spacing1
+ inset: 100% 0 auto 0
+ display: block
+ position: absolute
+
+ .nav-level-2
+ @include media-breakpoint-up(lg)
+ display: grid
+ grid-gap: $spacing1 $spacing1
+ grid-template-columns: repeat(4, 1fr)
+ > li
+ &,
+ & > a,
+ & > span
+ font-size: px2rem(16)
+ line-height: px2rem(26)
+ @include media-breakpoint-up(lg)
+ font-size: px2rem(18)
+
+ .nav-level-3
+ a,
+ span
+ font-size: px2rem(14)
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index 125dda31..ad7bd10f 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -39,3 +39,6 @@ p
small
font-size: $small-font-size
+
+a, .link
+ @include link
diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass
index 7d1f922c..4128b742 100644
--- a/assets/sass/_theme/hugo-osuny.sass
+++ b/assets/sass/_theme/hugo-osuny.sass
@@ -15,6 +15,7 @@
@import "design-system/footer"
@import "design-system/grid"
@import "design-system/header"
+@import "design-system/hero"
@import "design-system/nav"
@import "design-system/typography"
--
GitLab