From 40c0c306722b2077b972583dbaf153b9de752389 Mon Sep 17 00:00:00 2001 From: Lucas Bigot Date: Wed, 27 Mar 2024 18:05:06 -0400 Subject: [PATCH 01/13] Add default wysiwyg file --- assets/styles/components/_wysiwyg.scss | 363 +++++++++++++++++++++++++ assets/styles/main.scss | 1 + 2 files changed, 364 insertions(+) create mode 100644 assets/styles/components/_wysiwyg.scss diff --git a/assets/styles/components/_wysiwyg.scss b/assets/styles/components/_wysiwyg.scss new file mode 100644 index 0000000..46eec5a --- /dev/null +++ b/assets/styles/components/_wysiwyg.scss @@ -0,0 +1,363 @@ +// ========================================================================== +// Components / Wysiwyg +// ========================================================================== + +.c-wysiwyg { + // ========================================================================== + // Margins + // ========================================================================== + &-first-element, + >:first-child { + margin-top: 0 !important; + padding-top: 0 !important; + } + + &-last-element, + >:last-child { + margin-bottom: 0 !important; + padding-bottom: 0 !important; + } + + // ========================================================================== + // Default + // ========================================================================== + // @include text; + // @include body-large; + + // ========================================================================== + // Paragraph + // ========================================================================== + p, + iframe, + img, + table { + margin-bottom: rem(30px); + & + p, + & + ul, + & + ol { + margin-top: 1em; + margin-bottom: rem(30px); + } + + & + h1, + & + h2, + & + h3, + & + h4, + & + h5, + & + h6 { + margin-top: rem(60px); + } + } + + ul, ol, p { + line-height: 1.5; + } + + + // ========================================================================== + // Headings + // ========================================================================== + b, strong { + + } + + h1,h2,h3,h4,h5,h6 { + // @include heading; + font-weight: normal; + } + + h1 { + // @include heading-h3; + margin-top: size-clamp('lg'); + margin-bottom: rem(40px); + + & + p, + & + ul, + & + ol, + & + table, + & + figure { + margin-top: rem(40px); + } + + & + h1, + & + h2, + & + h3, + & + h4, + & + h5, + & + h6 { + margin-top: size-clamp('md'); + } + } + + h2 { + // @include heading-h3; + margin-top: size-clamp('lg'); + margin-bottom: size-clamp('md'); + + & + p, + & + ul, + & + ol, + & + table, + & + figure { + margin-top: size-clamp('md'); + } + + & + h1, + & + h2, + & + h3, + & + h4, + & + h5, + & + h6 { + margin-top: size-clamp('md'); + } + } + + h3 { + // @include heading-h4; + margin-top: size-clamp('lg'); + margin-bottom: size-clamp('md'); + + & + p, + & + ul, + & + ol, + & + table, + & + figure { + margin-top: size-clamp('md'); + } + + & + h1, + & + h2, + & + h3, + & + h4, + & + h5, + & + h6 { + margin-top: size-clamp('md'); + } + } + + h4, + h5, + h6 { + margin-top: size-clamp('lg'); + margin-bottom: size-clamp('sm'); + + & + p, + & + ul, + & + ol, + & + table, + & + figure { + margin-top: size-clamp('sm'); + } + + & + h1, + & + h2, + & + h3, + & + h4, + & + h5, + & + h6 { + margin-top: size-clamp('sm'); + } + } + + h4 { + // @include heading-h5; + } + + h5 { + // @include heading-h6; + } + + h6 { + // @include heading-h6; + } + + + // ========================================================================== + // Lists + // ========================================================================== + ul, + ol { + position: relative; + margin: size-clamp('md') 0; + + >li { + padding-left: rem(30px); + } + } + + ul { + & > li { + position: relative; + + & + li { + margin-top: 0; + } + + &::before { + content: ""; + position: absolute; + left: 0; + top: 9px; + width: 8px; + height: 8px; + background-color: currentColor; + border-radius: 100%; + } + } + } + + ol { + counter-reset: counter; + + & > li { + counter-increment: counter; + position: relative; + + + & + li { + margin-top: 0; + } + + &::before { + position: absolute; + left: 0; + content: counter(counter); + } + } + } + + // ========================================================================== + // Link + // ========================================================================== + a { + display: inline; + text-decoration: underline; + text-decoration-thickness: 1px; + color: currentColor; + word-wrap: break-word; + + &:hover { + text-decoration-thickness: 2px; + } + } + + // ========================================================================== + // Image + // ========================================================================== + img { + width: 100%; + margin: size-clamp('lg') 0; + } + + // ========================================================================== + // iFrame + // ========================================================================== + iframe { + width: 100%; + height: auto; + aspect-ratio: 16 / 9; + margin: size-clamp('lg') 0; + } + + // ========================================================================== + // Table + // ========================================================================== + table { + width: 100%; + margin: size-clamp('lg') 0; + + & + p, + & + ul, + & + ol { + margin-top: 1em; + } + + & + h1, + & + h2, + & + h3, + & + h4, + & + h5, + & + h6 { + margin-top: 1em; + } + } + + thead { + + } + + th { + vertical-align: top; + text-align: left; + padding: 20px 10px; + border-bottom: solid 1px currentColor; + } + + tr { + } + + td { + border-bottom: solid 1px currentColor; + padding: 10px; + vertical-align: top; + } + + caption { + padding: 10px; + caption-side: bottom; + font-style: italic; + } + + // ========================================================================== + // Blockquote + // ========================================================================== + blockquote { + // @include heading; + // @include heading-h3; + padding: 0; + color: currentColor; + line-height: 1; + padding: 0; + padding-top: rem(80px); + margin-left: 0; + margin-top: size-clamp('lg'); + margin-bottom: size-clamp('lg'); + position: relative; + + &::before { + content:'“'; + position: absolute; + top: 0; + left: 0; + width: 100%; + color: currentColor; + font-weight: $font-weight-normal; + + @media (min-width: $from-md) { + font-size: rem(140px); + } + + @media (max-width: $to-md) { + font-size: rem(90px); + } + } + + * { + line-height: 1; + } + + & + p { + padding-top: 0; + } + + & + h1, + & + h2, + & + h3, + & + h4, + & + h5, + & + h6, + & + blockquote { + margin-top: 0; + } + } +} diff --git a/assets/styles/main.scss b/assets/styles/main.scss index 121c0e4..7b1f979 100644 --- a/assets/styles/main.scss +++ b/assets/styles/main.scss @@ -56,6 +56,7 @@ @import "components/heading"; @import "components/button"; @import "components/form"; +@import "components/wysiwyg"; // Utilities // ========================================================================== From 08df2d9ac431ec24222b87a60337155626cd5ff4 Mon Sep 17 00:00:00 2001 From: Lucas Bigot Date: Wed, 27 Mar 2024 20:34:16 -0400 Subject: [PATCH 02/13] Remove blockquote line-height property --- assets/styles/components/_wysiwyg.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/assets/styles/components/_wysiwyg.scss b/assets/styles/components/_wysiwyg.scss index 46eec5a..1796c2b 100644 --- a/assets/styles/components/_wysiwyg.scss +++ b/assets/styles/components/_wysiwyg.scss @@ -316,7 +316,6 @@ // @include heading-h3; padding: 0; color: currentColor; - line-height: 1; padding: 0; padding-top: rem(80px); margin-left: 0; @@ -342,10 +341,6 @@ } } - * { - line-height: 1; - } - & + p { padding-top: 0; } From 7395a431fe23c38211875f38fff108284c0ea7ff Mon Sep 17 00:00:00 2001 From: Lucas Bigot Date: Wed, 27 Mar 2024 20:36:56 -0400 Subject: [PATCH 03/13] Remove display and color properties on `` tag --- assets/styles/components/_wysiwyg.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/assets/styles/components/_wysiwyg.scss b/assets/styles/components/_wysiwyg.scss index 1796c2b..053d1b5 100644 --- a/assets/styles/components/_wysiwyg.scss +++ b/assets/styles/components/_wysiwyg.scss @@ -230,10 +230,8 @@ // Link // ========================================================================== a { - display: inline; text-decoration: underline; text-decoration-thickness: 1px; - color: currentColor; word-wrap: break-word; &:hover { From c9eab8bf49e698284edeb214cd2934a106d9a66b Mon Sep 17 00:00:00 2001 From: Lucas Bigot Date: Wed, 27 Mar 2024 20:37:43 -0400 Subject: [PATCH 04/13] Remove specific line-height for ul, ol and p --- assets/styles/components/_wysiwyg.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/assets/styles/components/_wysiwyg.scss b/assets/styles/components/_wysiwyg.scss index 053d1b5..bc08662 100644 --- a/assets/styles/components/_wysiwyg.scss +++ b/assets/styles/components/_wysiwyg.scss @@ -49,11 +49,6 @@ } } - ul, ol, p { - line-height: 1.5; - } - - // ========================================================================== // Headings // ========================================================================== From 7c056ed809821abcb0cfa04a429b7984db7f1561 Mon Sep 17 00:00:00 2001 From: Lucas Bigot Date: Wed, 27 Mar 2024 20:38:33 -0400 Subject: [PATCH 05/13] Reset caption above table --- assets/styles/components/_wysiwyg.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/styles/components/_wysiwyg.scss b/assets/styles/components/_wysiwyg.scss index bc08662..84c51d1 100644 --- a/assets/styles/components/_wysiwyg.scss +++ b/assets/styles/components/_wysiwyg.scss @@ -297,7 +297,6 @@ caption { padding: 10px; - caption-side: bottom; font-style: italic; } From c00c2d346f2d71608499fbd25374a086beca943f Mon Sep 17 00:00:00 2001 From: Lucas Bigot Date: Wed, 27 Mar 2024 20:43:15 -0400 Subject: [PATCH 06/13] Remove iframe default aspect-ratio --- assets/styles/components/_wysiwyg.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/styles/components/_wysiwyg.scss b/assets/styles/components/_wysiwyg.scss index 84c51d1..eb34310 100644 --- a/assets/styles/components/_wysiwyg.scss +++ b/assets/styles/components/_wysiwyg.scss @@ -248,7 +248,6 @@ iframe { width: 100%; height: auto; - aspect-ratio: 16 / 9; margin: size-clamp('lg') 0; } From a6016cfe577155b6acf5529b95c9041ad9354159 Mon Sep 17 00:00:00 2001 From: Lucas Bigot Date: Wed, 27 Mar 2024 20:55:22 -0400 Subject: [PATCH 07/13] Remove irrevelant blockquote default style --- assets/styles/components/_wysiwyg.scss | 27 +++++++------------------- 1 file changed, 7 insertions(+), 20 deletions(-) diff --git a/assets/styles/components/_wysiwyg.scss b/assets/styles/components/_wysiwyg.scss index eb34310..f29d54f 100644 --- a/assets/styles/components/_wysiwyg.scss +++ b/assets/styles/components/_wysiwyg.scss @@ -305,30 +305,17 @@ blockquote { // @include heading; // @include heading-h3; + quotes: "“" "”" "’" "’"; padding: 0; - color: currentColor; - padding: 0; - padding-top: rem(80px); - margin-left: 0; - margin-top: size-clamp('lg'); - margin-bottom: size-clamp('lg'); - position: relative; + margin: size-clamp('md') 0; - &::before { - content:'“'; - position: absolute; - top: 0; - left: 0; - width: 100%; - color: currentColor; - font-weight: $font-weight-normal; - - @media (min-width: $from-md) { - font-size: rem(140px); + p { + &::before { + content: open-quote; } - @media (max-width: $to-md) { - font-size: rem(90px); + &::after { + content: close-quote; } } From 67dd991e97bf274b0b94b42695f2117c477ed29f Mon Sep 17 00:00:00 2001 From: Lucas Bigot Date: Wed, 27 Mar 2024 21:04:45 -0400 Subject: [PATCH 08/13] Reset default browser styles for ul and ol --- assets/styles/components/_wysiwyg.scss | 52 +++----------------------- 1 file changed, 5 insertions(+), 47 deletions(-) diff --git a/assets/styles/components/_wysiwyg.scss b/assets/styles/components/_wysiwyg.scss index f29d54f..84b0138 100644 --- a/assets/styles/components/_wysiwyg.scss +++ b/assets/styles/components/_wysiwyg.scss @@ -166,58 +166,16 @@ // @include heading-h6; } - // ========================================================================== // Lists // ========================================================================== ul, ol { - position: relative; - margin: size-clamp('md') 0; - - >li { - padding-left: rem(30px); - } - } - - ul { - & > li { - position: relative; - - & + li { - margin-top: 0; - } - - &::before { - content: ""; - position: absolute; - left: 0; - top: 9px; - width: 8px; - height: 8px; - background-color: currentColor; - border-radius: 100%; - } - } - } - - ol { - counter-reset: counter; - - & > li { - counter-increment: counter; - position: relative; - - - & + li { - margin-top: 0; - } - - &::before { - position: absolute; - left: 0; - content: counter(counter); - } + & + p, + & + ul, + & + ol, + & + blockquote { + margin-top: size-clamp('sm'); } } From 2c498c88a0b63fc7c7785322d472510d9c9b79ae Mon Sep 17 00:00:00 2001 From: Lucas Bigot Date: Wed, 27 Mar 2024 21:15:16 -0400 Subject: [PATCH 09/13] Remove style properties for th, td Remove empty style for thead and tr --- assets/styles/components/_wysiwyg.scss | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/assets/styles/components/_wysiwyg.scss b/assets/styles/components/_wysiwyg.scss index 84b0138..c78099f 100644 --- a/assets/styles/components/_wysiwyg.scss +++ b/assets/styles/components/_wysiwyg.scss @@ -232,26 +232,6 @@ } } - thead { - - } - - th { - vertical-align: top; - text-align: left; - padding: 20px 10px; - border-bottom: solid 1px currentColor; - } - - tr { - } - - td { - border-bottom: solid 1px currentColor; - padding: 10px; - vertical-align: top; - } - caption { padding: 10px; font-style: italic; From fae0c2a6dc367d3353229dc1eb78d689b1d67931 Mon Sep 17 00:00:00 2001 From: Lucas Bigot Date: Thu, 28 Mar 2024 10:32:53 -0400 Subject: [PATCH 10/13] Set generic spacing rule + Move link color settings into wysiwyg file --- assets/styles/components/_wysiwyg.scss | 172 +++------------------ assets/styles/elements/_document.scss | 8 - assets/styles/settings/_config.colors.scss | 4 +- 3 files changed, 21 insertions(+), 163 deletions(-) diff --git a/assets/styles/components/_wysiwyg.scss b/assets/styles/components/_wysiwyg.scss index c78099f..fa7b25c 100644 --- a/assets/styles/components/_wysiwyg.scss +++ b/assets/styles/components/_wysiwyg.scss @@ -3,9 +3,14 @@ // ========================================================================== .c-wysiwyg { + // ========================================================================== // Margins // ========================================================================== + & > * + * { + margin-bottom: size-clamp('md'); + } + &-first-element, >:first-child { margin-top: 0 !important; @@ -24,134 +29,25 @@ // @include text; // @include body-large; - // ========================================================================== - // Paragraph - // ========================================================================== - p, - iframe, - img, - table { - margin-bottom: rem(30px); - & + p, - & + ul, - & + ol { - margin-top: 1em; - margin-bottom: rem(30px); - } - - & + h1, - & + h2, - & + h3, - & + h4, - & + h5, - & + h6 { - margin-top: rem(60px); - } - } - // ========================================================================== // Headings // ========================================================================== - b, strong { - - } - h1,h2,h3,h4,h5,h6 { // @include heading; - font-weight: normal; + margin-top: 1.5em; + margin-bottom: 1em; } h1 { // @include heading-h3; - margin-top: size-clamp('lg'); - margin-bottom: rem(40px); - - & + p, - & + ul, - & + ol, - & + table, - & + figure { - margin-top: rem(40px); - } - - & + h1, - & + h2, - & + h3, - & + h4, - & + h5, - & + h6 { - margin-top: size-clamp('md'); - } } h2 { // @include heading-h3; - margin-top: size-clamp('lg'); - margin-bottom: size-clamp('md'); - - & + p, - & + ul, - & + ol, - & + table, - & + figure { - margin-top: size-clamp('md'); - } - - & + h1, - & + h2, - & + h3, - & + h4, - & + h5, - & + h6 { - margin-top: size-clamp('md'); - } } h3 { // @include heading-h4; - margin-top: size-clamp('lg'); - margin-bottom: size-clamp('md'); - - & + p, - & + ul, - & + ol, - & + table, - & + figure { - margin-top: size-clamp('md'); - } - - & + h1, - & + h2, - & + h3, - & + h4, - & + h5, - & + h6 { - margin-top: size-clamp('md'); - } - } - - h4, - h5, - h6 { - margin-top: size-clamp('lg'); - margin-bottom: size-clamp('sm'); - - & + p, - & + ul, - & + ol, - & + table, - & + figure { - margin-top: size-clamp('sm'); - } - - & + h1, - & + h2, - & + h3, - & + h4, - & + h5, - & + h6 { - margin-top: size-clamp('sm'); - } } h4 { @@ -171,24 +67,22 @@ // ========================================================================== ul, ol { - & + p, - & + ul, - & + ol, - & + blockquote { - margin-top: size-clamp('sm'); - } } // ========================================================================== // Link // ========================================================================== a { - text-decoration: underline; - text-decoration-thickness: 1px; - word-wrap: break-word; + color: $color-link; - &:hover { - text-decoration-thickness: 2px; + &:focus-visible { + color: $color-link-focus; + } + + @media (hover: hover) { + &:hover { + color: $color-link-hover; + } } } @@ -197,7 +91,6 @@ // ========================================================================== img { width: 100%; - margin: size-clamp('lg') 0; } // ========================================================================== @@ -206,7 +99,6 @@ iframe { width: 100%; height: auto; - margin: size-clamp('lg') 0; } // ========================================================================== @@ -214,27 +106,12 @@ // ========================================================================== table { width: 100%; - margin: size-clamp('lg') 0; - - & + p, - & + ul, - & + ol { - margin-top: 1em; - } - - & + h1, - & + h2, - & + h3, - & + h4, - & + h5, - & + h6 { - margin-top: 1em; - } } caption { - padding: 10px; - font-style: italic; + // @include text; + // @include body-small; + margin: 1em 0; } // ========================================================================== @@ -245,7 +122,6 @@ // @include heading-h3; quotes: "“" "”" "’" "’"; padding: 0; - margin: size-clamp('md') 0; p { &::before { @@ -260,15 +136,5 @@ & + p { padding-top: 0; } - - & + h1, - & + h2, - & + h3, - & + h4, - & + h5, - & + h6, - & + blockquote { - margin-top: 0; - } } } diff --git a/assets/styles/elements/_document.scss b/assets/styles/elements/_document.scss index eaff5ea..f695103 100644 --- a/assets/styles/elements/_document.scss +++ b/assets/styles/elements/_document.scss @@ -53,11 +53,3 @@ body { color: $color-selection-text; text-shadow: none; } - -a { - color: $color-link; - - @include u-hocus { - color: $color-link-hover; - } -} diff --git a/assets/styles/settings/_config.colors.scss b/assets/styles/settings/_config.colors.scss index 747abdb..f0d1073 100644 --- a/assets/styles/settings/_config.colors.scss +++ b/assets/styles/settings/_config.colors.scss @@ -49,8 +49,8 @@ $color-link-focus: color(primary); $color-link-hover: darken(color(primary), 10%); // Selection -$color-selection-text: color(darkest); -$color-selection-background: color(lightest); +$color-selection-text: color(lightest); +$color-selection-background: color(darkest); // Socials $color-facebook: #3B5998; From ebbb20d0e3d6d4795dfaf53aece54cce7e041380 Mon Sep 17 00:00:00 2001 From: Lucas Bigot Date: Thu, 28 Mar 2024 10:51:31 -0400 Subject: [PATCH 11/13] Set iframe full width if no width & height specific html attributes --- assets/styles/components/_wysiwyg.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/assets/styles/components/_wysiwyg.scss b/assets/styles/components/_wysiwyg.scss index fa7b25c..9755ec6 100644 --- a/assets/styles/components/_wysiwyg.scss +++ b/assets/styles/components/_wysiwyg.scss @@ -97,8 +97,13 @@ // iFrame // ========================================================================== iframe { - width: 100%; - height: auto; + &:not([width]) { + width: 100%; + } + + &:not([height]) { + height: auto; + } } // ========================================================================== From 92ba51bef1464412ec8b82e9218413aee3ef3f60 Mon Sep 17 00:00:00 2001 From: Lucas Bigot Date: Thu, 28 Mar 2024 11:00:07 -0400 Subject: [PATCH 12/13] Reset custom list markers --- assets/styles/components/_wysiwyg.scss | 36 ++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/assets/styles/components/_wysiwyg.scss b/assets/styles/components/_wysiwyg.scss index 9755ec6..b6310b3 100644 --- a/assets/styles/components/_wysiwyg.scss +++ b/assets/styles/components/_wysiwyg.scss @@ -67,6 +67,42 @@ // ========================================================================== ul, ol { + list-style: none; + padding-left: 0; + + > li { + position: relative; + padding-left: 1.5em; + } + } + + ul { + > li { + &::before { + content: ""; + position: absolute; + left: 0; + top: calc(50% - 3px); + width: 6px; + height: 6px; + background-color: currentColor; + border-radius: 50%; + } + } + } + + ol { + counter-reset: counter; + + > li { + counter-increment: counter; + + &::before { + content: counter(counter); + position: absolute; + left: 0; + } + } } // ========================================================================== From e8701712b64a878be9253f71f292681b67f4e93c Mon Sep 17 00:00:00 2001 From: Lucas Bigot Date: Thu, 28 Mar 2024 11:17:17 -0400 Subject: [PATCH 13/13] Horizontally align iframe --- assets/styles/components/_wysiwyg.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/styles/components/_wysiwyg.scss b/assets/styles/components/_wysiwyg.scss index b6310b3..e7c9a61 100644 --- a/assets/styles/components/_wysiwyg.scss +++ b/assets/styles/components/_wysiwyg.scss @@ -133,6 +133,10 @@ // iFrame // ========================================================================== iframe { + display: block; + margin-left: auto; + margin-right: auto; + &:not([width]) { width: 100%; }