From f7fa121a0b2849bc49589ab8f1dd60b7649a347e Mon Sep 17 00:00:00 2001
From: alexisben <alexiben7@gmail.com>
Date: Thu, 21 Jul 2022 18:16:59 +0200
Subject: [PATCH] grid
---
assets/sass/_theme/_configuration.sass | 55 ++++++-
assets/sass/_theme/_utils.sass | 61 ++++---
assets/sass/_theme/blocks/chapter.sass | 56 ++++---
assets/sass/_theme/blocks/pages.sass | 152 +++++++++---------
assets/sass/_theme/blocks/posts.sass | 3 +
.../sass/_theme/design-system/breadcrumb.sass | 3 +-
assets/sass/_theme/design-system/grid.sass | 22 +++
assets/sass/_theme/design-system/header.sass | 5 +-
assets/sass/_theme/design-system/layout.sass | 23 ++-
assets/sass/_theme/design-system/nav.sass | 21 +--
assets/sass/_theme/design-system/reset.sass | 45 ++++++
.../sass/_theme/design-system/typography.sass | 93 +++++++++--
assets/sass/_theme/hugo-osuny.sass | 2 +
assets/sass/_theme/sections/pages.sass | 31 ++++
assets/sass/_theme/sections/posts.sass | 37 +++++
package.json | 2 +-
yarn.lock | 5 +
17 files changed, 457 insertions(+), 159 deletions(-)
create mode 100644 assets/sass/_theme/design-system/reset.sass
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 578c644b..97fbc188 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -1,3 +1,5 @@
+// TODO: ranger
+
// MAIN COLORS
$main-color: black !default // Text color
$main-background-color: white !default // Background color
@@ -14,16 +16,19 @@ $link-color: $main-color !default
$body-font-family: "Georgia", serif !default
$heading-font-family: "Helvetica", "Arial", sans-serif !default
+$font-size-base: 1rem
+$line-height-base: 1.4
+
// Fonts sizes
-$body-font-size: 16 !default
-$small-font-size: 14 !default
+$body-font-size: 16px !default
+$small-font-size: 14px !default
-$h1-size: 60 !default
-$h2-size: 40 !default
-$h3-size: 30 !default
-$h4-size: 20 !default
-$h5-size: 18 !default
-$h6-size: 14 !default
+$h1-size: px2rem(60) !default
+$h2-size: px2rem(40) !default
+$h3-size: px2rem(30) !default
+$h4-size: px2rem(20) !default
+$h5-size: px2rem(18) !default
+$h6-size: px2rem(16) !default
// Font weight
$heading-font-weight: normal !default
@@ -45,6 +50,10 @@ $spacing3: 64px !default
$spacing4: 128px !default
$spacing5: 256px !default
+// Grid
+$grid-gutter: 60px
+$grid-max-width: 1980px
+
// Z-index
$zindex-nav-accessibility: 1010 !default
@@ -53,6 +62,9 @@ $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
+$header-sticky-transition: 0.3s
+$header-height: 74px
+$header-height-md: 74px
// Footer
$footer-color: $main-color !default
@@ -92,3 +104,30 @@ $icons: map-merge($icons, ("twitter": "\e90d"))
// Breakpoints
// TODO: réécrire en sass les mixins bootstrap
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
+
+// BLOCKS
+
+// Block call to action
+$block-call-to-action-background: $main-background-color !default
+$block-call-to-action-color: $main-color !default
+
+// Block pages
+$block-pages-card-background: lighten($main-background-color, 1) !default
+$block-pages-card-page-background: white !default
+$block-pages-card-page-color: $main-color !default
+$block-pages-card-page-background-hover: lighten($main-background-color, 2) !default
+$block-pages-card-page-color-hover: white !default
+
+// Block timeline
+$block-timeline-horizontal-background: black !default
+$block-timeline-horizontal-color: white !default
+
+
+// Sections
+$post-media-background: darken($main-background-color, 2) !default
+$post-media-aspect-ratio: 50%
+// MISC
+
+// Animations
+$arrow-ease-transition: cubic-bezier(0, 0.65, 0.4, 1.2) !default
+$arrow-ease-transition-2: cubic-bezier(0, 0.65, 0.4, 1) !default
\ No newline at end of file
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index d9821045..946fc3da 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -1,3 +1,5 @@
+// TODO : ranger
+
@function px2rem($size)
$remSize: $size / 16
@return #{$remSize}rem
@@ -8,7 +10,7 @@
@function col($nb, $base: 12)
$nb: $nb/$base * 12
- $nbCol: calc( (100% + #{$grid-gutter-width}) / 12 * #{$nb} )
+ $nbCol: calc( (100% + #{$grid-gutter}) / 12 * #{$nb} )
@return #{$nbCol}
@mixin in-page-with-aside
@@ -39,29 +41,52 @@
&::#{$pseudo}
transform: translateX(#{px2rem($distance)})
-@mixin sticky($top-md: calc(#{$header-height-md} + #{$grid-gutter-width}), $top-sm: calc(#{$header-height} + #{$grid-gutter-width}))
+@mixin sticky($top-md: calc(#{$header-height-md} + #{$spacing1}), $top-sm: calc(#{$header-height} + #{$spacing1}))
position: sticky
- top: $grid-gutter-width
- @if $enable-header-sticky
- transition: top $header-transition
+ top: $spacing1
+ @if $header-sticky-enabled
+ transition: top $header-sticky-transition
html:not(.is-scrolling-down) &
top: $top-sm
@include media-breakpoint-up(md)
top: $top-md
+// NEW UTILS
+@mixin icon($icon-name: '', $pseudo-element: before)
+ &::#{$pseudo-element}
+ display: inline-block
+ font-family: 'Icon'
+ font-style: normal
+ font-variant: normal
+ font-weight: normal
+ line-height: 1
+ speak: never
+ text-transform: none
+ vertical-align: middle
+ content: map-get($icons, $icon-name)
+
+@mixin container
+ max-width: $grid-max-width
+ padding-left: $grid-gutter
+ padding-right: $grid-gutter
+ margin-left: auto
+ margin-right: auto
+ width: 100%
+
+@mixin grid($cols: 12)
+ @include media-breakpoint-up(md)
+ display: grid
+ grid-gap: 0 $grid-gutter
+ grid-template-columns: repeat($cols, 1fr)
-// NEW UTILS
-@mixin icon($icon-name)
- display: inline-block
- font-family: 'Icon'
- font-style: normal
- font-variant: normal
- font-weight: normal
- line-height: 1
- speak: never
- text-transform: none
- vertical-align: middle
- content: map-get($icons, $icon-name)
- font-family: $font-icons-code
\ No newline at end of file
+@mixin stretched-link($pseudo-element: after)
+ &::#{$pseudo-element}
+ position: absolute
+ top: 0
+ right: 0
+ bottom: 0
+ left: 0
+ z-index: 2
+ content: ""
diff --git a/assets/sass/_theme/blocks/chapter.sass b/assets/sass/_theme/blocks/chapter.sass
index 39ed2130..99e3d1c1 100644
--- a/assets/sass/_theme/blocks/chapter.sass
+++ b/assets/sass/_theme/blocks/chapter.sass
@@ -1,30 +1,28 @@
-// .block-chapter
-// blockquote
-// @extend .blockquote
-// p:last-child
-// margin-bottom: 0
-// .notes
-// @extend .small
-// margin-top: $grid-gutter-width
-// picture
-// display: block
-// margin-top: $grid-gutter-width
-// img
-// @extend .img-fluid
-// figcaption
-// @extend .small
-// margin-top: .5rem
+.block-chapter
+ blockquote
+ @extend .blockquote
+ p:last-child
+ margin-bottom: 0
+ .notes
+ @extend .small
+ margin-top: $spacing1
+ picture
+ display: block
+ margin-top: $spacing1
+ figcaption
+ @extend .small
+ margin-top: 0.5rem
-
-// @include media-breakpoint-up(md)
-// @include in-page-without-aside
-// .block-content
-// @include make-row()
-// > *
-// @include make-col-ready()
-// @include make-col(8)
-// &--with-image
-// .block-content
-// align-items: center
-// > *
-// @include make-col(6)
+ @include media-breakpoint-up(md)
+ @include in-page-without-aside
+ .block-content
+ > *
+ width: col(8)
+ // @include make-col-ready()
+ // @include make-col(8)
+ &--with-image
+ .block-content
+ align-items: center
+ > *
+ width: col(6)
+ // @include make-col(6)
diff --git a/assets/sass/_theme/blocks/pages.sass b/assets/sass/_theme/blocks/pages.sass
index b4e714e9..9075ed75 100644
--- a/assets/sass/_theme/blocks/pages.sass
+++ b/assets/sass/_theme/blocks/pages.sass
@@ -1,80 +1,82 @@
-// .block-pages
-// .main-page
-// @include media-breakpoint-up(lg)
-// > div:first-child
-// padding-right: $grid-gutter-width
-// .title
-// a::before
-// content: none
+.block-pages
+ .pages
+ @include grid(2)
-// &--list
-// .block-content
-// @include media-breakpoint-up(lg)
-// align-items: flex-start
-// display: flex
-// > *
-// flex: 1
-// .pages
-// --bs-gutter-y: 0
-// @include media-breakpoint-up(lg)
-// margin-top: 4.5rem
-// > *
-// margin-top: px2rem(10)
-// width: 100%
+.block-pages
+ .main-page
+ @include media-breakpoint-up(lg)
+ > div:first-child
+ padding-right: $spacing1
+ .title
+ a::before
+ content: none
+ &--list
+ .block-content
+ @include media-breakpoint-up(lg)
+ align-items: flex-start
+ display: flex
+ > *
+ flex: 1
-// .page
-// .title
-// a
-// font-size: px2rem(18)
-// text-decoration-color: transparent
-// @include hover-translate-icon(before, 3)
-// &:hover
-// text-decoration-color: black
-// .page
-// > div
-// padding: 0
+ .pages
+ --bs-gutter-y: 0
+ @include media-breakpoint-up(lg)
+ margin-top: 4.5rem
+ > *
+ margin-top: px2rem(10)
+ width: 100%
+ .page
+ .title
+ @extend .h4
+ a
+ @include hover-translate-icon(before, 3)
+ font-size: px2rem(18)
+ text-decoration-color: transparent
+ &:hover
+ text-decoration-color: black
+ .page
+ > div
+ padding: 0
-
-// &--cards
-// background-color: $block-pages-card-background
-// padding-bottom: $grid-gutter-width
-// padding-top: $grid-gutter-width
-// .pages
-// --bs-gutter-y: #{$grid-gutter-width}
-// > *
-// @extend .col-lg-4
-// .page
-// aspect-ratio: 0.887
-// background-color: $block-pages-card-page-background
-// transition: background .3s, color .3s
-// &,
-// a
-// color: $block-pages-card-page-color
-// a
-// transition: text-decoration-color .3s ease, color .3s
-// .more
-// @include link
-// text-decoration-color: $block-pages-card-page-color
-// > div:first-child
-// display: flex
-// flex-direction: column
-// .title
-// a
-// text-decoration: none
-// + p:not(.more)
-// margin-bottom: 1rem
-// &:hover
-// background-color: $block-pages-card-page-background-hover
-// &,
-// a
-// color: $block-pages-card-page-color-hover
-// .more
-// text-decoration-color: $block-pages-card-page-color-hover
-// > div:first-of-type
-// padding: $card-spacer-y $card-spacer-x
-// .page
-// .title
-// a::before
-// content: none
+ &--cards
+ background-color: $block-pages-card-background
+ padding-bottom: $grid-gutter
+ padding-top: $grid-gutter
+ .pages
+ > *
+ @include grid(4)
+ .page
+ aspect-ratio: 0.887
+ background-color: $block-pages-card-page-background
+ transition: background 0.3s, color 0.3s
+ &,
+ a
+ color: $block-pages-card-page-color
+ a
+ transition: text-decoration-color .3s ease, color .3s
+ .more
+ @include link
+ text-decoration-color: $block-pages-card-page-color
+ > div:first-child
+ display: flex
+ flex-direction: column
+ .title
+ a
+ text-decoration: none
+ + p:not(.more)
+ margin-bottom: 1rem
+ &:hover
+ background-color: $block-pages-card-page-background-hover
+ &,
+ a
+ color: $block-pages-card-page-color-hover
+ .more
+ text-decoration-color: $block-pages-card-page-color-hover
+ > div:first-of-type
+ padding: $spacing1
+ .page
+ .title
+ a::before
+ content: none
\ No newline at end of file
diff --git a/assets/sass/_theme/blocks/posts.sass b/assets/sass/_theme/blocks/posts.sass
index e69de29b..23d78524 100644
--- a/assets/sass/_theme/blocks/posts.sass
+++ b/assets/sass/_theme/blocks/posts.sass
@@ -0,0 +1,3 @@
+.block-posts
+ .posts
+ @include grid(3)
diff --git a/assets/sass/_theme/design-system/breadcrumb.sass b/assets/sass/_theme/design-system/breadcrumb.sass
index 34b3116f..c4ea4cf1 100644
--- a/assets/sass/_theme/design-system/breadcrumb.sass
+++ b/assets/sass/_theme/design-system/breadcrumb.sass
@@ -14,7 +14,8 @@
flex-shrink: 0
white-space: nowrap
&-item + &-item
- &:before
+ padding-left: 0.5rem
+ &::before
color: lighten($breadcrumb-color, 0.5)
content: "/"
padding-right: 0.5rem
diff --git a/assets/sass/_theme/design-system/grid.sass b/assets/sass/_theme/design-system/grid.sass
index e69de29b..f10505eb 100644
--- a/assets/sass/_theme/design-system/grid.sass
+++ b/assets/sass/_theme/design-system/grid.sass
@@ -0,0 +1,22 @@
+.container
+ @include container
+
+.content-blocks
+ position: relative
+ > aside
+ @include container
+ pointer-events: none
+ @include media-breakpoint-up(md)
+ height: 100%
+ left: 50%
+ position: absolute
+ transform: translateX(-50%)
+ width: 100%
+ > div
+ @include sticky
+ > *
+ width: col(4)
+ pointer-events: auto
+ > .blocks
+ .block-content
+ padding-left: col(4)
diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass
index 969c58b4..11a53e4e 100644
--- a/assets/sass/_theme/design-system/header.sass
+++ b/assets/sass/_theme/design-system/header.sass
@@ -3,7 +3,7 @@ header[role="banner"]
background-color: $header-background-color
position: sticky
top: 0
- transition: transform 0.3s
+ transition: transform $header-sticky-transition
z-index: 10
html.is-scrolling-down:not(.is-menu-open) &
&:not(:hover)
@@ -15,7 +15,8 @@ header[role="banner"]
nav[role="navigation"]
.container
display: flex
- padding: $spacing1
+ 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/layout.sass b/assets/sass/_theme/design-system/layout.sass
index dfb92b74..960874a2 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -1,7 +1,28 @@
+*,
+*::before,
+*::after
+ box-sizing: border-box
+
body
color: $body-color
background: $body-background-color
+ @media (prefers-reduced-motion: reduce)
+ *
+ transition-duration: 0s !important
+ &:not(.is-loaded)
+ *
+ transition-duration: 0s !important
+figure
+ margin: 0
img
max-width: 100%
- height: auto
\ No newline at end of file
+ height: auto
+ &::selection
+ background: transparent
+
+.container
+ @include container
+
+ul
+ padding-left: px2rem(15)
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index e7f66dc2..b71c8646 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -21,23 +21,26 @@
.dropdown-menu
display: none
background: $header-background-color
+ padding-bottom: $spacing1
+ padding-top: $spacing1
+ inset: 100% 0 auto 0
+ position: absolute
.nav-level-1
display: flex
- > li > a
- padding: $spacing1
+ > li
+ > a
+ padding: $spacing1
+ &:last-child a
+ padding-right: 0
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)
+ @include media-breakpoint-up(md)
+ @include container
+ @include grid(4)
> li
&,
& > a,
diff --git a/assets/sass/_theme/design-system/reset.sass b/assets/sass/_theme/design-system/reset.sass
new file mode 100644
index 00000000..8370df67
--- /dev/null
+++ b/assets/sass/_theme/design-system/reset.sass
@@ -0,0 +1,45 @@
+// // http://meyerweb.com/eric/tools/css/reset/
+// // v2.0 | 20110126
+// // License: none (public domain)
+
+// html, body, div, span, applet, object, iframe,
+// h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+// a, abbr, acronym, address, big, cite, code,
+// del, dfn, em, img, ins, kbd, q, s, samp,
+// small, strike, strong, sub, sup, tt, var,
+// b, u, i, center,
+// dl, dt, dd, ol, ul, li,
+// fieldset, form, label, legend,
+// table, caption, tbody, tfoot, thead, tr, th, td,
+// article, aside, canvas, details, embed,
+// figure, figcaption, footer, header, hgroup,
+// menu, nav, output, ruby, section, summary,
+// time, mark, audio, video
+// border: 0
+// font: inherit
+// margin: 0
+// padding: 0
+// vertical-align: baseline
+
+// // HTML5 display-role reset for older browsers
+// article, aside, details, figcaption, figure,
+// footer, header, hgroup, menu, nav, section
+// display: block
+
+// body
+// line-height: 1
+
+// ol, ul
+// list-style: none
+
+// blockquote, q
+// quotes: none
+
+// blockquote:before, blockquote:after,
+// q:before, q:after
+// content: ''
+// content: none
+
+// table
+// border-collapse: collapse
+// border-spacing: 0
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index ad7bd10f..4bd74c55 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -1,44 +1,107 @@
%heading
font-family: $heading-font-family
-h1,
-.h1
+h1, .h1
@extend %heading
font-size: $h1-size
-h2,
-.h2
+h2, .h2
@extend %heading
font-size: $h2-size
-h3,
-.h3
+h3, .h3
@extend %heading
font-size: $h3-size
-h4,
-.h4
+h4, .h4
@extend %heading
font-size: $h4-size
-h5,
-.h5
+h5, .h5
@extend %heading
font-size: $h5-size
-h6,
-.h6
+h6, .h6
@extend %heading
font-size: $h6-size
+h1, .h1,
+h2, .h2
+ a
+ text-decoration-thickness: 0
+ &:hover
+ text-decoration-thickness: 1px
+
body
font-family: $body-font-family
+ -moz-osx-font-smoothing: grayscale
+ -webkit-font-smoothing: antialiased
+ font-variant-ligatures: common-ligatures
+ text-rendering: optimizelegibility
+ line-height: $line-height-base
-p
+p, .p
font-size: $body-font-size
-small
+small, .small
font-size: $small-font-size
-a, .link
+blockquote, .blockquote
+ font-style: italic
+ cite
+ font-size: px2rem(18)
+ font-style: normal
+
+a,
+.link
+ @include link
+ overflow-wrap: break-word
+ &[target="_blank"]
+ @include icon("link-blank", "after")
+ &::after
+ font-size: px2rem(10)
+ margin-left: px2rem(5)
+ &[href^="mailto"]
+ &::after
+ content: none
+
+.link-more
@include link
+ @include icon('arrow', before)
+ &::before
+ font-size: px2rem(10)
+ margin-right: px2rem(5)
+
+::selection
+ background: rgba($main-color, .7)
+ color: $main-background-color
+ text-shadow: none
+
+*:focus-visible
+ outline-color: gray
+ outline-offset: 5px
+ outline-style: dashed
+ outline-width: 1px
+
+@media (prefers-reduced-motion: no-preference)
+ *:focus-visible
+ transition: outline-offset .3s ease
+
+
+
+// ICONS
+
+@font-face
+ font-display: block
+ font-family: 'Icon'
+ font-style: normal
+ font-weight: 400
+ src: url('../fonts/icons/icomoon.woff') format("woff")
+
+@each $name in $icons
+ .icon-#{$name}
+ @include icon($name)
+ .btn-#{$name}
+ @include icon($name)
+ &::before
+ margin-right: px2rem(5)
\ No newline at end of file
diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass
index 4128b742..ff6cd0fb 100644
--- a/assets/sass/_theme/hugo-osuny.sass
+++ b/assets/sass/_theme/hugo-osuny.sass
@@ -1,5 +1,6 @@
// @import "normalize.css/normalize.css" // TODO: fix normalize npm issue
@import "_todo/normalize"
+// @import "normalize-scss//normalize"
@import "_todo/bootstrap-breakpoints"
@import "glightbox/dist/css/glightbox"
@@ -9,6 +10,7 @@
@import "configuration"
// Design System
+@import "design-system/reset"
@import "design-system/layout"
@import "design-system/a11y"
@import "design-system/breadcrumb"
diff --git a/assets/sass/_theme/sections/pages.sass b/assets/sass/_theme/sections/pages.sass
index e69de29b..fb047e48 100644
--- a/assets/sass/_theme/sections/pages.sass
+++ b/assets/sass/_theme/sections/pages.sass
@@ -0,0 +1,31 @@
+.page
+ position: relative
+ > div:first-of-type
+ padding-left: 0
+ padding-right: 0
+
+ .media
+ // @extend .card-media
+
+ .title
+ @extend .h4
+ margin-bottom: 0
+ a
+ @include stretched-link()
+ @extend .link-more
+ font-size: px2rem(22)
+ line-height: px2rem(30)
+
+ & + p
+ margin-top: .5rem
+
+ & ~ .more
+ margin-top: auto
+ .more
+ @extend .small
+ text-decoration-line: underline
+ text-decoration-thickness: 1px
+ text-underline-offset: 3px
+
+.pages
+ @include grid(2)
diff --git a/assets/sass/_theme/sections/posts.sass b/assets/sass/_theme/sections/posts.sass
index e69de29b..1cfa1c24 100644
--- a/assets/sass/_theme/sections/posts.sass
+++ b/assets/sass/_theme/sections/posts.sass
@@ -0,0 +1,37 @@
+.post
+ display: flex
+ flex-direction: column
+ .media
+ background: $post-media-background
+ order: -1
+ &::before
+ content: ""
+ display: block
+ padding-top: $post-media-aspect-ratio
+ a
+ @include stretched-link
+
+ .author,
+ .post-categories
+ // @extend .card-text
+ @extend .small
+ &,
+ a
+ // color: $gray-700
+
+.posts
+ @include grid(3)
+.post-categories
+ @extend .small
+ list-style: none
+ margin: 0
+ padding: 0
+ li
+ display: inline-block
+ vertical-align: middle
+ &::after
+ content: ', '
+ margin-left: -3px
+ &:last-child
+ &::after
+ content: none
diff --git a/package.json b/package.json
index 06da1909..649234cd 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,6 @@
"glightbox": "^3.1.0",
"intersection-observer": "^0.12.0",
"js-cookie": "^3.0.1",
- "normalize.css": "^8.0.1"
+ "normalize-scss": "^7.0.1"
}
}
diff --git a/yarn.lock b/yarn.lock
index dbacaa2b..a068dee7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -27,6 +27,11 @@ js-cookie@^3.0.1:
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
+normalize-scss@^7.0.1:
+ version "7.0.1"
+ resolved "https://registry.yarnpkg.com/normalize-scss/-/normalize-scss-7.0.1.tgz#74485e82bb5d0526371136422a09fdb868ffc1a4"
+ integrity sha512-qj16bWnYs+9/ac29IgGjySg4R5qQTp1lXfm7ApFOZNVBYFY8RZ3f8+XQNDDLHeDtI3Ba7Jj4+LuPgz9v/fne2A==
+
normalize.css@^8.0.1:
version "8.0.1"
resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
--
GitLab