From 0f8a5c46ab94a0c74d60ccc1c391afa6444d2269 Mon Sep 17 00:00:00 2001
From: alexisben <alexiben7@gmail.com>
Date: Mon, 25 Jul 2022 14:56:05 +0200
Subject: [PATCH] program wip
---
assets/sass/_theme/_configuration.sass | 11 +-
assets/sass/_theme/_utils.sass | 11 +-
assets/sass/_theme/blocks/call_to_action.sass | 174 +++++++++---------
assets/sass/_theme/blocks/embed.sass | 2 +
assets/sass/_theme/design-system/header.sass | 3 +-
assets/sass/_theme/design-system/nav.sass | 1 +
.../design-system/table_of_content.sass | 2 +-
.../sass/_theme/design-system/typography.sass | 7 +
assets/sass/_theme/sections/programs.sass | 78 ++++++++
9 files changed, 192 insertions(+), 97 deletions(-)
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index a4cc5c24..b989d5bc 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -41,6 +41,10 @@ $h4-weight: $heading-font-weight !default
$h5-weight: $heading-font-weight !default
$h6-weight: $heading-font-weight !default
+$btn-font-size: px2rem(18) !default
+$btn-padding-x: px2rem(12) !default
+$btn-padding-y: px2rem(6) !default
+
// Breadcrumb
$breadcrumb-color: invert($main-color) !default
@@ -54,6 +58,7 @@ $spacing5: 256px !default
// Grid
$grid-gutter: 60px
$grid-max-width: 1980px
+$grid-gutter-sm: 20px
// Z-index
$zindex-nav-accessibility: 1010 !default
@@ -110,8 +115,10 @@ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 140
// BLOCKS
// Block call to action
-$block-call-to-action-background: $main-background-color !default
-$block-call-to-action-color: $main-color !default
+$block-call-to-action-background: invert($main-background-color) !default
+$block-call-to-action-color: invert($main-color) !default
+$block-call-to-action-button-background: invert($block-call-to-action-background) !default
+$block-call-to-action-button-color: invert($block-call-to-action-color) !default
// Block definitions
$definition-border-color: $main-border-color !default
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index 1152ae7a..d7a1c026 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -37,9 +37,9 @@
&::#{$pseudo}
transform: translateX(#{px2rem($distance)})
-@mixin sticky($top-md: calc(#{$header-height-md} + #{$spacing1}), $top-sm: calc(#{$header-height} + #{$spacing1}))
+@mixin sticky($top-md: $header-height-md, $top-sm: $header-height)
position: sticky
- top: $spacing1
+ top: 0
@if $header-sticky-enabled
transition: top $header-sticky-transition
html:not(.is-scrolling-down) &
@@ -66,9 +66,12 @@
margin-left: auto
margin-right: auto
max-width: $grid-max-width
- padding-left: $grid-gutter
- padding-right: $grid-gutter
+ padding-left: $grid-gutter-sm
+ padding-right: $grid-gutter-sm
width: 100%
+ @include media-breakpoint-up(md)
+ padding-left: $grid-gutter
+ padding-right: $grid-gutter
@mixin grid($cols: 12, $breakpoint: md)
@include media-breakpoint-up($breakpoint)
diff --git a/assets/sass/_theme/blocks/call_to_action.sass b/assets/sass/_theme/blocks/call_to_action.sass
index 5a140ea8..a63ef32a 100644
--- a/assets/sass/_theme/blocks/call_to_action.sass
+++ b/assets/sass/_theme/blocks/call_to_action.sass
@@ -1,91 +1,89 @@
-// .block-call_to_action
-// .call_to_action
-// color: $block-call-to-action-color
-// img
-// @extend .img-fluid
+.block-call_to_action
+ .call_to_action
+ color: $block-call-to-action-color
+ p:last-of-type
+ margin-bottom: 0
-// p:last-of-type
-// margin-bottom: 0
+ > div
+ // button
+ div + div,
+ & >
+ a
+ @extend .btn
+ margin-top: 1rem
+ background: $block-call-to-action-button-background
+ color: $block-call-to-action-button-color
+ @include in-page-with-aside
+ display: flex
+ flex-direction: column
+ > *
+ order: 2
+ picture
+ order: 1
+ padding-left: $grid-gutter
+ position: relative
+ img
+ margin-bottom: -50px
+ > div
+ background-color: $block-call-to-action-background
+ padding: $grid-gutter
+ width: 100%
+ &--with-image
+ > div
+ padding-top: calc(#{$grid-gutter} + 50px)
-// > div
-// // button
-// div + div,
-// & >
-// a
-// @extend .btn
-// @extend .btn-light
-// margin-top: 1rem
+ @include media-breakpoint-up(md)
+ picture
+ padding-left: col(1, 8)
+ padding-right: col(3, 8)
+ > div
+ padding: col(1, 8)
-// @include in-page-with-aside
-// display: flex
-// flex-direction: column
-// > *
-// order: 2
-// picture
-// order: 1
-// padding-left: $grid-gutter-width
-// position: relative
-// img
-// margin-bottom: -50px
-// > div
-// background-color: $block-call-to-action-background
-// padding: $grid-gutter-width
-// width: 100%
-// &--with-image
-// > div
-// padding-top: calc(#{$grid-gutter-width} + 50px)
-
-// @include media-breakpoint-up(md)
-// picture
-// padding-left: col(1, 8)
-// padding-right: col(3, 8)
-// > div
-// padding: col(1, 8)
-
-// @include in-page-without-aside
-// .block-content
-// background-color: $block-call-to-action-background
-// padding: col(1)
-// .call_to_action--with-image
-// @include media-breakpoint-down(md)
-// display: flex
-// flex-direction: column
-// > *
-// order: 2
-// picture
-// margin-bottom: col(1)
-// order: 1
-// @include media-breakpoint-up(md)
-// @include make-row
-// align-items: center
-// > *
-// @include make-col-ready
-// > div
-// @include make-col(6)
-// > *
-// margin-right: col(1, 5)
-// picture
-// @include make-col(6)
-// div + div
-// a
-// margin-right: 1rem
-// .call_to_action--without-image
-// @include media-breakpoint-up(md)
-// display: block
-// > div
-// column-gap: $grid-gutter-width
-// display: grid
-// grid-template-columns: repeat(10,1fr)
-// > *
-// grid-column: 1/5
-// div + div,
-// & > a
-// grid-column: 6/11
-// div + div
-// align-items: flex-start
-// display: flex
-// flex-direction: column
-// div + div,
-// & >
-// a:first-of-type
-// margin-top: 0
+ @include in-page-without-aside
+ .block-content
+ background-color: $block-call-to-action-background
+ padding: col(1)
+ .call_to_action--with-image
+ @include media-breakpoint-down(md)
+ display: flex
+ flex-direction: column
+ > *
+ order: 2
+ picture
+ margin-bottom: col(1)
+ order: 1
+ @include media-breakpoint-up(md)
+ // @include make-row
+ @include grid(2)
+ align-items: center
+ > *
+ // @include make-col-ready
+ > div
+ // @include make-col(6)
+ > *
+ margin-right: col(1, 5)
+ picture
+ // @include make-col(6)
+ div + div
+ a
+ margin-right: 1rem
+ .call_to_action--without-image
+ @include media-breakpoint-up(md)
+ display: block
+ > div
+ column-gap: $grid-gutter
+ display: grid
+ grid-template-columns: repeat(10,1fr)
+ > *
+ grid-column: 1/5
+ div + div,
+ & > a
+ grid-column: 6/11
+ div + div
+ align-items: flex-start
+ display: flex
+ flex-direction: column
+ div + div,
+ & >
+ a:first-of-type
+ margin-top: 0
diff --git a/assets/sass/_theme/blocks/embed.sass b/assets/sass/_theme/blocks/embed.sass
index e69de29b..9ad0900f 100644
--- a/assets/sass/_theme/blocks/embed.sass
+++ b/assets/sass/_theme/blocks/embed.sass
@@ -0,0 +1,2 @@
+iframe
+ max-width: 100%
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass
index 11a53e4e..e44d1c93 100644
--- a/assets/sass/_theme/design-system/header.sass
+++ b/assets/sass/_theme/design-system/header.sass
@@ -14,9 +14,8 @@ header[role="banner"]
nav[role="navigation"]
.container
+ align-items: center
display: flex
- padding-bottom: $grid-gutter / 2
- padding-top: $grid-gutter / 2
justify-content: space-between
button[type="button"]
display: none
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index b71c8646..c42d628e 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -31,6 +31,7 @@
> li
> a
padding: $spacing1
+ display: block
&:last-child a
padding-right: 0
li.has-children:hover
diff --git a/assets/sass/_theme/design-system/table_of_content.sass b/assets/sass/_theme/design-system/table_of_content.sass
index 1957ce72..55a7cc47 100644
--- a/assets/sass/_theme/design-system/table_of_content.sass
+++ b/assets/sass/_theme/design-system/table_of_content.sass
@@ -1,6 +1,7 @@
.toc
ol
@include list-reset
+ margin: 0
align-items: flex-start
flex-direction: column
li
@@ -15,7 +16,6 @@
padding: $spacing1/2
margin-left: -$spacing1/2
text-decoration: none
-
&:hover
text-decoration: underline
.active
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index f230530f..e62b0e1d 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -1,5 +1,6 @@
%heading
font-family: $heading-font-family
+ margin-top: 0
h1, .h1
@extend %heading
@@ -68,6 +69,12 @@ a,
&::after
content: none
+.btn
+ font-size: $btn-font-size
+ padding: $btn-padding-y $btn-padding-x
+ text-decoration: none
+ display: inline-block
+
.link-more
@include link
@include icon('arrow', before)
diff --git a/assets/sass/_theme/sections/programs.sass b/assets/sass/_theme/sections/programs.sass
index e69de29b..8cfb2176 100644
--- a/assets/sass/_theme/sections/programs.sass
+++ b/assets/sass/_theme/sections/programs.sass
@@ -0,0 +1,78 @@
+// .programs__section
+// .page-with-blocks
+// .hero
+// margin-bottom: 3rem
+
+// main > article
+// position: relative
+// > aside
+// align-self: flex-start
+// margin-bottom: $spacing5
+// pointer-events: none
+// .toc + p
+// margin-top: $grid-gutter
+// p:last-of-type
+// margin-bottom: 0
+// @include media-breakpoint-down(md)
+// position: relative
+// @include media-breakpoint-up(md)
+// height: 100%
+// margin-bottom: 0
+// position: absolute
+// width: 100%
+// ~ *
+// .container
+// > *
+// &:not(.call_to_action)
+// padding-left: col(4)
+// &.call_to_action
+// margin-left: col(4)
+// &:is(picture)
+// display: block
+// > div
+// // @extend .container
+// // @extend .sticky
+// padding: 0
+// > *
+// // @extend .col-md-3
+// padding-left: #{$grid-gutter / 2}
+// padding-right: #{$grid-gutter / 2}
+// pointer-events: auto
+// [itemprop="articleBody"]
+// margin-bottom: $spacing5
+// article
+// .persons
+// margin-bottom: 3rem
+// margin-top: -2rem
+// @include grid(2, lg)
+
+.programs__section
+ aside
+ @include container
+ @include sticky($header-height)
+ overflow: auto
+ background: darken($main-background-color, 3)
+ z-index: 50
+ .toc
+ max-width: 100%
+ ol
+ display: flex
+ flex-direction: row
+ flex-wrap: nowrap
+ white-space: nowrap
+ margin: 0 #{-$spacing1}
+ li
+ padding: $spacing1/2 $spacing1
+ margin-bottom: 0
+ [itemprop="articleBody"]
+ section
+ border-top: 1px solid $main-color
+ @include grid(12)
+ @include media-breakpoint-up(md)
+ position: relative
+ > *
+ grid-column: 7/13
+ h2
+ @include sticky(calc($header-height + $spacing4))
+ align-self: start
+ grid-column: 1/6
\ No newline at end of file
--
GitLab