From faf6b5c6a55e127dda280c9733e0ad3295f5dfcf Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Fri, 1 Aug 2025 09:41:58 +0100 Subject: [PATCH 01/28] Start reset of global spacing with 'base' Sass partials - Remove Normalize - Introduce new global reset of styles - Temporarily comment out vertical spacing styles - Introduce logical properties --- assets-src/styles/core.scss | 7 +- assets-src/styles/sass/30-base/_body.scss | 12 +- .../styles/sass/30-base/_box-sizing.scss | 13 - assets-src/styles/sass/30-base/_buttons.scss | 33 +- .../sass/30-base/_details-and-summary.scss | 67 ++-- assets-src/styles/sass/30-base/_focus.scss | 4 +- assets-src/styles/sass/30-base/_forms.scss | 300 +++++---------- .../styles/sass/30-base/_global-reset.scss | 210 +++++++++++ .../styles/sass/30-base/_hide-and-show.scss | 36 +- .../styles/sass/30-base/_html-elements.scss | 6 - assets-src/styles/sass/30-base/_icons.scss | 55 +-- assets-src/styles/sass/30-base/_images.scss | 41 -- assets-src/styles/sass/30-base/_links.scss | 19 +- assets-src/styles/sass/30-base/_lists.scss | 14 +- .../styles/sass/30-base/_normalize.scss | 349 ------------------ assets-src/styles/sass/30-base/_quotes.scss | 31 +- .../styles/sass/30-base/_skip-link.scss | 14 +- assets-src/styles/sass/30-base/_social.scss | 25 +- assets-src/styles/sass/30-base/_tables.scss | 28 +- .../styles/sass/30-base/_typography.scss | 14 +- .../sass/50-core-components/_avatars.scss | 36 ++ .../sass/50-core-components/_cards.scss | 4 +- .../styles/sass/50-core-components/_hero.scss | 4 +- .../sass/50-core-components/_pagination.scss | 2 - .../sass/50-core-components/_tag-list.scss | 2 - .../sass/60-advanced-components/_cards.scss | 4 +- .../60-advanced-components/_collapsibles.scss | 4 +- .../60-advanced-components/_comments.scss | 4 +- .../styles/sass/80-templates/_post.scss | 4 +- package-lock.json | 11 - package.json | 1 - 31 files changed, 470 insertions(+), 884 deletions(-) delete mode 100644 assets-src/styles/sass/30-base/_box-sizing.scss create mode 100644 assets-src/styles/sass/30-base/_global-reset.scss delete mode 100644 assets-src/styles/sass/30-base/_images.scss delete mode 100644 assets-src/styles/sass/30-base/_normalize.scss create mode 100644 assets-src/styles/sass/50-core-components/_avatars.scss diff --git a/assets-src/styles/core.scss b/assets-src/styles/core.scss index b83fa6d1..83b8aa0f 100755 --- a/assets-src/styles/core.scss +++ b/assets-src/styles/core.scss @@ -32,21 +32,17 @@ /*------------------------------------*\ #Base - - Normalize comes first for the cascade \*------------------------------------*/ -@import "../../node_modules/normalize.css/normalize"; +@import "sass/30-base/global-reset"; @import "sass/30-base/animation"; @import "sass/30-base/quotes"; @import "sass/30-base/body"; -@import "sass/30-base/box-sizing"; @import "sass/30-base/buttons"; @import "sass/30-base/focus"; @import "sass/30-base/forms"; @import "sass/30-base/hide-and-show"; @import "sass/30-base/html-elements"; @import "sass/30-base/icons"; -@import "sass/30-base/images"; @import "sass/30-base/links"; @import "sass/30-base/lists"; @import "sass/30-base/skip-link"; @@ -73,6 +69,7 @@ /*------------------------------------*\ #Core components \*------------------------------------*/ +@import "sass/50-core-components/avatars"; @import "sass/50-core-components/header"; @import "sass/50-core-components/archive-banner"; @import "sass/50-core-components/logo"; diff --git a/assets-src/styles/sass/30-base/_body.scss b/assets-src/styles/sass/30-base/_body.scss index ad7def8f..57750f1d 100644 --- a/assets-src/styles/sass/30-base/_body.scss +++ b/assets-src/styles/sass/30-base/_body.scss @@ -2,21 +2,13 @@ #Body \*------------------------------------*/ - -html { - height: 100%; -} - /** - Typographical styles for fonts are in 40-base/_typography.scss + Typographical styles for fonts are in 30-base/_typography.scss */ body { background-color: $white; color: $off-black; - min-height: 100%; overflow-x: hidden; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; } /** @@ -26,5 +18,5 @@ Styles needed for a sticky footer display: grid; grid-template-columns: 100%; grid-template-rows: 1fr auto; - min-height: 100vh; + min-block-size: 100vh; } \ No newline at end of file diff --git a/assets-src/styles/sass/30-base/_box-sizing.scss b/assets-src/styles/sass/30-base/_box-sizing.scss deleted file mode 100644 index 4665397c..00000000 --- a/assets-src/styles/sass/30-base/_box-sizing.scss +++ /dev/null @@ -1,13 +0,0 @@ -/*------------------------------------*\ - #Box sizing -\*------------------------------------*/ - -*, -*::before, -*::after { - box-sizing: border-box; - font-family: inherit; - margin: 0; - overflow-wrap: break-word; - padding: 0; -} \ No newline at end of file diff --git a/assets-src/styles/sass/30-base/_buttons.scss b/assets-src/styles/sass/30-base/_buttons.scss index 356b1938..64d5c0c3 100755 --- a/assets-src/styles/sass/30-base/_buttons.scss +++ b/assets-src/styles/sass/30-base/_buttons.scss @@ -1,7 +1,9 @@ /*------------------------------------*\ #Buttons - 1. High contrast themes tend to eliminate background-color. + 1. Prevent `.button` going full-width if a child of a flex column. + + 2. High contrast themes tend to eliminate background-color. With no border set, we need to apply a transparent outline to maintain the button shape. The negative outline-offset moves the outline inside the perimeter so it behaves like a border. @@ -9,16 +11,18 @@ button, .button { + align-items: center; + align-self: start; /* 1 */ background-color: $link-color; border: solid 2px $link-color; border-radius: rem(24); color: $white; - display: inline-block; + display: inline-flex; font-size: rem(14); font-weight: $emphasis; - line-height: 1.5; - outline: 2px solid transparent; /* 1 */ - outline-offset: -2px; /* 1 */ + justify-content: center; + outline: 2px solid transparent; /* 2 */ + outline-offset: -2px; /* 2 */ padding: rem(11) rem(24); &:hover { @@ -34,10 +38,6 @@ button, } } -button:not([type="submit"]) { - text-align: start; -} - /** Remove link styling from links styled as buttons. @@ -47,19 +47,9 @@ Remove link styling from links styled as buttons. } -/** -Remove link styling from actual buttons styled as buttons. - */ -button.button, -input[type="submit"].button { - text-decoration: none; -} - - // Full-width buttons -.button--wide { - text-align: center; - width: 100%; +.button--wide.button--wide { + inline-size: 100%; } @@ -102,6 +92,7 @@ input[type="submit"].button { // Disabled buttons .button[disabled], +.button[disabled], .button.js-disabled { background-color: $twiki-gray; border-color: $twiki-gray; diff --git a/assets-src/styles/sass/30-base/_details-and-summary.scss b/assets-src/styles/sass/30-base/_details-and-summary.scss index a586a6c9..d6d5cf94 100644 --- a/assets-src/styles/sass/30-base/_details-and-summary.scss +++ b/assets-src/styles/sass/30-base/_details-and-summary.scss @@ -6,24 +6,23 @@ summary { color: $link-color; cursor: pointer; display: inline-block; - padding-left: rem(25); + padding-block: rem(10); + padding-inline-start: rem(25); position: relative; &::before { - border-color: transparent; - border-left-color: inherit; - border-style: solid; - border-width: 7px 0 7px 12.124px; - bottom: 0; - clip-path: polygon(0% 0%, 100% 50%, 0% 100%); - content: ''; - display: block; - height: 0; - left: 0; - margin: auto; - position: absolute; - top: rem(-1); - width: 0; + block-size: 0; + border-color: transparent; + border-inline-start-color: inherit; + border-style: solid; + border-width: 7px 0 7px 12.124px; + content: ''; + display: block; + inline-size: 0; + inset-block: rem(-1) 0; + inset-inline-start: 0; + margin: auto; + position: absolute; } &::-webkit-details-marker { @@ -36,11 +35,7 @@ summary { span { display: inline-block; - padding-bottom: rem(10); - padding-top: rem(10); - text-decoration: underline; /* 1 */ - text-decoration-skip-ink: auto; // Not supported by Safari - text-underline-offset: 0.25em; // Supported by Safari + text-decoration: underline; } &:focus { @@ -55,28 +50,24 @@ summary { } -details { - margin-bottom: 1rem; - margin-top: 1rem; -} +// details { +// margin-bottom: 1rem; +// margin-top: 1rem; +// } + +// details[open] > summary { +// margin-bottom: 1rem; +// } -details[open] > summary { - margin-bottom: 1rem; +[dir="rtl"] summary::before { + border-width: 7px 12.124px 7px 0; } + details[open] > summary::before { - transform: rotate(90deg); + transform: rotate(90deg); } -[dir="rtl"] { - summary { - padding-left: 0; - padding-right: rem(25); - - &::before { - left: auto; - right: 0; - transform: rotate(180deg); - } - } +[dir="rtl"] details[open] > summary::before { + transform: rotate(-90deg); } \ No newline at end of file diff --git a/assets-src/styles/sass/30-base/_focus.scss b/assets-src/styles/sass/30-base/_focus.scss index 5b61b38e..8b677133 100644 --- a/assets-src/styles/sass/30-base/_focus.scss +++ b/assets-src/styles/sass/30-base/_focus.scss @@ -13,8 +13,8 @@ } /** -Where focus is moved to the target via JavaScript, it is -acceptable not to show a focus outline. +Where focus is programmatically moved to a target element that is not interactive, we +suppress the focus styles. See https://github.com/twbs/bootstrap/issues/29875#issuecomment-582648069 */ main:focus, #main:focus, diff --git a/assets-src/styles/sass/30-base/_forms.scss b/assets-src/styles/sass/30-base/_forms.scss index c102ab8a..af0b342b 100755 --- a/assets-src/styles/sass/30-base/_forms.scss +++ b/assets-src/styles/sass/30-base/_forms.scss @@ -11,7 +11,7 @@ fieldset { // If you want a border etc., apply this to a wrapping container for the fieldset border: 0; margin: 0; - min-width: 0; + min-inline-size: 0; padding: 0.01em 0 0 0; } @@ -23,17 +23,14 @@ End of resets for the fieldset element */ -//.field-group__heading {} +// .field-group + .field-group { +// margin-block-start: 2.5rem; +// } - -.field-group + .field-group { - margin-top: 2.5rem; -} - -form > * + *, -.field-group > * + * { - margin-top: 1.75rem; -} +// form > * + *, +// .field-group > * + * { +// margin-block-start: 1.75rem; +// } /** Group inputs to line up side-by-side @@ -44,16 +41,7 @@ Group inputs to line up side-by-side } .input-group > * + * { - margin-left: rem(30); -} - -[dir="rtl"] { - .input-group > * + * { - - margin-left: 0; - margin-right: rem(30); - - } + margin-inline-start: rem(30); } .field-legend { @@ -62,7 +50,7 @@ Group inputs to line up side-by-side } .field { - max-width: rem($text-measure); + max-inline-size: rem($text-measure); } label, @@ -73,25 +61,25 @@ label, display: block; } -.field-label, -.faux-label { - margin-bottom: 0.25rem; -} +// .field-label, +// .faux-label { +// margin-block-end: 0.25rem; +// } .field-label, .group-legend { font-weight: bold; - + .field-hint { - margin-top: 0.25rem; - } + // + .field-hint { + // margin-block-start: 0.25rem; + // } } .field-hint { @include txt-pluto; color: $storm-gray; - margin-bottom: 0.25rem; - max-width: rem($text-measure); + // margin-block-end: 0.25rem; + max-inline-size: rem($text-measure); } .required { @@ -114,9 +102,9 @@ textarea, -webkit-appearance: none; border: 2px solid; border-radius: 0; + inline-size: 100%; line-height: 1.25; padding: rem(5); - width: 100%; &:focus { box-shadow: inset 0 0 0 2px; @@ -144,11 +132,9 @@ select, &:focus { border-color: currentColor; box-shadow: inset 0 0 0 4px; - margin-left: rem(-5); - margin-right: rem(-5); + margin-inline: rem(-5); outline: 3px solid $focus-color; - padding-left: rem(5); - padding-right: rem(5); + padding-inline: rem(5); } } @@ -169,9 +155,9 @@ select { background-color: transparent; border: 2px solid; border-radius: 0; + inline-size: 100%; line-height: 1.25; padding: rem(5); - width: 100%; &:focus { box-shadow: inset 0 0 0 2px; @@ -213,18 +199,11 @@ Memorable dates (e.g. date of birth) */ .memorable-date { display: inline-block; - margin-top: 0; + margin-block-start: 0; } .memorable-date + .memorable-date { - margin-left: 1rem; -} - -[dir="rtl"] { - .memorable-date + .memorable-date { - margin-left: auto; - margin-right: 1rem; - } + margin-inline-start: 1rem; } @@ -235,8 +214,8 @@ Radio/checkbox inputs .checkbox-item { clear: left; float: left; - margin-top: 0.25rem; - padding-left: rem(34); + margin-block-start: 0.25rem; + padding-inline-start: rem(34); position: relative; &::after { @@ -251,38 +230,27 @@ Radio/checkbox inputs .checkbox-item { clear: right; float: right; - padding-left: 0; - padding-right: rem(34); } } .radio-item input, .checkbox-item input { + block-size: rem(44); cursor: pointer; - height: rem(44); - left: rem(-10); + inline-size: rem(44); + inset-block-start: rem(-2); + inset-inline-start: rem(-10); margin: 0; opacity: 0; position: absolute; - top: rem(-2); - width: rem(44); z-index: 1; } -[dir="rtl"] { - .radio-item input, - .checkbox-item input { - left: auto; - right: rem(-10); - } -} - .radio-item label, .checkbox-item label { cursor: pointer; display: inline-block; - margin-bottom: 0; - margin-top: rem(-2); + margin-block: rem(-2) 0; padding: rem(11) rem(15) rem(10) rem(1); touch-action: manipulation; @@ -294,11 +262,11 @@ Radio/checkbox inputs &::before { background: transparent; + block-size: rem(24); border: 2px solid; - height: rem(24); - left: 0; - top: rem(8); - width: rem(24); + inline-size: rem(24); + inset-block-start: rem(8); + inset-inline-start: 0; } } @@ -306,11 +274,6 @@ Radio/checkbox inputs .radio-item label, .checkbox-item label { padding: rem(11) rem(1) rem(10) rem(15); - - &::before { - left: auto; - right: 0; - } } } @@ -322,47 +285,33 @@ Radio/checkbox inputs &::after { background: currentColor; + block-size: 0; border: 5px solid; - height: 0; - left: rem(7); + inline-size: 0; + inset-block-start: rem(15); + inset-inline-start: rem(7); opacity: 0; - top: rem(15); - width: 0; - } -} - -[dir="rtl"] { - .radio-item label::after { - left: auto; - right: rem(7); } } .checkbox-item label { &::after { background: transparent; + block-size: rem(6.5); border: solid; - border-top-color: transparent; + border-block-start-color: transparent; border-width: 0 0 3px 3px; - height: rem(6.5); - left: rem(6); + inline-size: rem(12); + inset-block-start: rem(15); + inset-inline-start: rem(6); opacity: 0; - top: rem(15); transform: rotate(-45deg); - width: rem(12); - } -} - -[dir="rtl"] { - .checkbox-item label::after { - left: auto; - right: rem(6); } } .checkbox-group--cluster .checkbox-item { clear: none; - margin-right: rem(12); + margin-block-end: rem(12); } // Radio/checkbox input with hover @@ -417,15 +366,15 @@ Segmented options. Can use either radio or checkbox inputs. The purpose is to show all available options outright, rather than hide them behind a &::before { background: transparent; - height: rem(24); - left: rem(10); - top: rem(10); - width: rem(24); + block-size: rem(24); + inline-size: rem(24); + inset-block-start: rem(10); + inset-inline-start: rem(10); } &::after { background: transparent; + block-size: rem(6.5); border: solid; - border-top-color: transparent; + border-block-start-color: transparent; border-width: 0 0 3px 3px; - height: rem(6.5); - left: rem(16); + inline-size: rem(12); + inset-block-start: rem(17); + inset-inline-start: rem(16); opacity: 0; - top: rem(17); transform: rotate(-45deg); - width: rem(12); } } input { cursor: pointer; - height: rem(44); + block-size: rem(44); + inline-size: rem(44); + inset-block-start: 0; + inset-inline-end: 0; margin: 0; opacity: 0; position: absolute; - right: 0; - top: 0; - width: rem(44); z-index: 1; } @@ -479,7 +428,7 @@ show all available options outright, rather than hide them behind a } } -[dir="rtl"] { - .segmented-group { - label::before { - right: rem(10); - left: auto; - } - - label::after { - right: rem(16); - left: auto; - } - - input { - left: 0; - right: auto; - } - - .segmented-label { - padding: rem(10); - padding-right: rem(44); - } - } -} - /** Fixed input widths */ .input-width-30 { - max-width: 59ex; + max-inline-size: 59ex; } .input-width-20 { - max-width: 41ex; + max-inline-size: 41ex; } .input-width-10 { - max-width: 23ex; + max-inline-size: 23ex; } .input-width-5 { - max-width: 10.8ex; + max-inline-size: 10.8ex; } .input-width-4 { - max-width: 9ex; + max-inline-size: 9ex; } .input-width-3 { - max-width: 7.2ex; + max-inline-size: 7.2ex; } .input-width-2 { - max-width: 5.4ex; + max-inline-size: 5.4ex; } /** @@ -573,8 +498,7 @@ Error styles color: $error-color; display: inline-block; font-weight: bold; - padding-bottom: rem(10); - padding-top: rem(10); + padding-block: rem(10); &:hover, &:visited { @@ -587,8 +511,8 @@ Error styles } .field--error { - border-left: solid rem(5) $error-color; - padding-left: rem(15); + border-inline-start: solid rem(5) $error-color; + padding-inline-start: rem(15); input:not([type="file"]), textarea:not(:focus) { @@ -601,26 +525,17 @@ Error styles } } -[dir="rtl"] { - .field--error { - border-left: none; - border-right: solid rem(5) $error-color; - padding-left: 0; - padding-right: rem(15); - } -} - .field-error-msg { color: $error-color; font-weight: bold; - margin-top: rem(15); + margin-block-start: rem(15); } /** Progress bar */ .progress-list { - margin-bottom: rem(30); + margin-block-end: rem(30); @include mq($bp-tab-small) { display: flex; @@ -633,41 +548,28 @@ Progress bar &::after { background-color: $storm-gray; - bottom: rem(-16); + block-size: rem(13); content:''; - height: rem(13); - left: rem(19); + inline-size: rem(3); + inset-block-end: rem(-16); + inset-inline-start: rem(19); position: absolute; - width: rem(3); @include mq($bp-tab-small) { - bottom: auto; - height: rem(3); - left: 50%; - top: rem(32); - width: 100%; + block-size: rem(3); + inline-size: 100%; + inset-block-end: auto; + inset-block-start: rem(32); + inset-inline-start: 50%; z-index: -1; } } + li { - margin-top: rem(20); - - @include mq($bp-tab-small) { - margin-top: 0; - } - } -} - -[dir="rtl"] { - .progress-list li::after { - - left: auto; - right: rem(19); + margin-block-start: rem(20); @include mq($bp-tab-small) { - left: auto; - right: 50%; + margin-block-start: 0; } } } @@ -690,7 +592,7 @@ Progress bar @include mq($bp-tab-small) { flex-direction: column; - padding-top: rem(10); + padding-block-start: rem(10); text-align: center; } @@ -699,7 +601,7 @@ Progress bar padding: rem(10); @include mq($bp-tab-small) { - width: rem(150); + inline-size: rem(150); } } } @@ -707,12 +609,12 @@ Progress bar .progress-step__marker { align-items: center; background-color: $white; + block-size: rem(44); border: solid 3px $storm-gray; border-radius: 50%; display: flex; - height: rem(44); + inline-size: rem(44); justify-content: center; - width: rem(44); @include mq($bp-tab-small) { box-shadow: 0 0 0 rem(10) $white; @@ -733,29 +635,27 @@ Progress bar } &::before { + block-size: rem(38); border-radius: 50%; - height: rem(38); - left: 0; - top: 0; - width: rem(38); + inline-size: rem(38); + inset-block-start: 0; + inset-inline-start: 0; } &::after { + block-size: rem(9); border: solid; - border-top-color: transparent; + border-block-start-color: transparent; border-width: 0 0 3px 3px; - height: rem(9); - left: rem(10); - top: rem(13); + inline-size: rem(18); + inset-block-start: rem(13); + inset-inline-start: rem(10); transform: rotate(-45deg); - width: rem(18); } } .progress-list a { color: $storm-gray; - text-decoration-skip-ink: auto; // Not supported by Safari - text-underline-offset: 0.25em; // Supported by Safari &:visited { color: $link-color--visited; diff --git a/assets-src/styles/sass/30-base/_global-reset.scss b/assets-src/styles/sass/30-base/_global-reset.scss new file mode 100644 index 00000000..134abd9a --- /dev/null +++ b/assets-src/styles/sass/30-base/_global-reset.scss @@ -0,0 +1,210 @@ +/*------------------------------------*\ + #Global CSS reset + + Inspiration: + - https://piccalil.li/blog/a-more-modern-css-reset/ + - https://www.joshwcomeau.com/css/custom-css-reset/ + - https://github.com/jensimmons/cssremedy/blob/master/css/remedy.css +\*------------------------------------*/ + +/** +Wildcard selector means these styles apply everywhere. +1: Use a more intuitive box-sizing model +2: Control hyphenation when used - see https://clagnut.com/blog/2395/ +3: Avoid text overflow + */ +*, +*::before, +*::after { + box-sizing: border-box; /* 1 */ + hyphenate-limit-chars: 6 3 2; /* 2 */ + overflow-wrap: break-word; /* 3 */ +} + + + + + +/** +HTML or :root element. +1: Prevent layout shift if a classic scrollbar is invoked +2: Prevent font size inflation with change of orientation +3: Enable keyword animations + */ +html { + scrollbar-gutter: stable; /* 1 */ + text-size-adjust: none; /* 2 */ +} + +@media (prefers-reduced-motion: no-preference) { + html { + interpolate-size: allow-keywords; /* 3 */ + } +} + + + + + +/** +Set core body defaults. +1: Improve text rendering +2: A minimum line-height of 1.5 is needed for accessibility. +3: Supported by Safari - anything using `text-decoration: underline` will inherit this +4: Not supported by Safari - anything using `text-decoration: underline` will inherit this + */ +body { + -moz-osx-font-smoothing: grayscale; /* 1 */ + -webkit-font-smoothing: antialiased; /* 1 */ + line-height: 1.5; /* 2 */ + margin: 0; + min-block-size: 100vh; + text-decoration-skip: auto; /* 3 */ + text-decoration-skip-ink: auto; /* 4 */ +} + + + + + +/* Inherit our preferred font settings */ +button, +input, +select, +textarea { + font: inherit; + letter-spacing: inherit; + word-spacing: inherit; +} + + + + + +/* Reduce the line-height for specific elements (headings are managed in 30-base/_typography.scss) */ +input, +label, +optgroup, +select, +textarea { + line-height: 1.25; +} + +button { + line-height: 1.15; +} + + + + + +// /* Remove margins in favour of better control by our authored CSS */ +// h1, +// h2, +// h3, +// h4, +// h5, +// h6, +// p, +// blockquote, +// dl, +// dd { +// margin-block: 0; +// } + +figure { + margin-inline: 0; +} + + + + + +/* Improve default styles for horizontal rule */ +hr { + block-size: 0; + border: 0; + border-block-start: 1px solid $twiki-gray; + overflow: visible; +} + + + + + +/** + Improve media defaults. + 1: Block display is usually what we want + 2: Responsive by default + 3: Removes strange space-below in case authors overwrite the display value + */ +audio, +canvas, +embed, +iframe, +img, +object, +svg, +video { + display: block; /* 1 */ + max-inline-size: 100%; /* 2 */ + vertical-align: middle; /* 3 */ +} + + +/* There's no good reason the audio element defaults to 300px */ +audio { + inline-size: 100%; +} + +/* Audio without `[controls]` remains hidden by default */ +audio:not([controls]) { + display: none; +} + + +/* Remove iframe border */ +iframe { + border: 0; +} + + +/* Maintain intrinsic aspect ratios when `max-inline-size` is applied */ +canvas, +img, +svg, +video { + block-size: auto; +} + + +/* Remove the unnecessary wrapping `picture`, while maintaining contents */ +picture { + display: contents; +} + + +/* Source elements have nothing to display, so hide them entirely */ +source { + display: none; +} + + +/* Don't allow SVGs in flex contexts to shrink */ +svg { + flex-shrink: 0; +} + + +video { + aspect-ratio: 16/9; +} + + + + + +/* Anything that has been anchored to should have extra scroll margin */ +:target { + scroll-margin-block: 5ex; +} \ No newline at end of file diff --git a/assets-src/styles/sass/30-base/_hide-and-show.scss b/assets-src/styles/sass/30-base/_hide-and-show.scss index ce1357c7..00e21673 100644 --- a/assets-src/styles/sass/30-base/_hide-and-show.scss +++ b/assets-src/styles/sass/30-base/_hide-and-show.scss @@ -46,15 +46,14 @@ * Sass to avoid it appearing repeatedly in your markup). */ %visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - clip-path: inset(100%); - height: 1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; + block-size: 1px; + border: 0; + clip-path: inset(50%); + inline-size: 1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; } /* @@ -85,14 +84,13 @@ br { * repeatedly in your markup). */ %visible { - border: initial; - clip: auto; - clip-path: none; - height: auto; - margin: initial; - overflow: initial; - padding: initial; - position: static; - white-space: initial; - width: auto; + block-size: auto; + border: initial; + clip-path: none; + inline-size: auto; + margin: initial; + overflow: initial; + padding: initial; + position: static; + white-space: initial; } \ No newline at end of file diff --git a/assets-src/styles/sass/30-base/_html-elements.scss b/assets-src/styles/sass/30-base/_html-elements.scss index e249b585..6cf73c13 100755 --- a/assets-src/styles/sass/30-base/_html-elements.scss +++ b/assets-src/styles/sass/30-base/_html-elements.scss @@ -2,12 +2,6 @@ #HTML elements \*------------------------------------*/ -abbr { - text-decoration-skip-ink: auto; // Not supported by Safari - text-underline-offset: 0.25em; // Supported by Safari -} - - dfn { font-style: normal; font-weight: $emphasis; diff --git a/assets-src/styles/sass/30-base/_icons.scss b/assets-src/styles/sass/30-base/_icons.scss index 57444bad..675fa4a7 100644 --- a/assets-src/styles/sass/30-base/_icons.scss +++ b/assets-src/styles/sass/30-base/_icons.scss @@ -4,25 +4,24 @@ svg { fill: currentColor; - height: auto; } svg:not([class]) { - width: 100%; + inline-size: 100%; } /** SVG icons are sized relative to font size, thanks to the em unit. */ .icon { - height: 1em; - vertical-align: baseline; - width: 1em; + block-size: 1em; + inline-size: 1em; + vertical-align: baseline; } .icon--larger { - height: rem(30); - width: rem(30); + block-size: rem(30); + inline-size: rem(30); } @@ -30,8 +29,6 @@ SVG icons are sized relative to font size, thanks to the em unit. Use the `with-icon` class on the SVG's parent, if there is a need to specify the spacing between text and icon. Pay attention to whether the icon is before the text or after. - -2. Logical property creates appropriate spacing irrespective of text direction */ .with-icon--before, .with-icon--after, @@ -50,48 +47,12 @@ Pay attention to whether the icon is before the text or after. .with-icon--before { .icon { - margin-right: rem(8); // IE fallback for next rule - only works for ltr languages - - @supports (margin-inline-end: 1em) { - margin-right: 0; - margin-inline-end: rem(8); /* 2 */ - } + margin-inline-end: rem(8); } } .with-icon--after { .icon { - margin-left: rem(8); // IE fallback for next rule - only works for ltr languages - - @supports (margin-inline-start: 1em) { - margin-left: 0; - margin-inline-start: rem(8); /* 2 */ - } - } -} - -[dir="rtl"] { - .with-icon--before { - .icon { - margin-left: rem(8); // IE fallback for next rule - only works for ltr languages - margin-right: 0; - - @supports (margin-inline-start: 1em) { - margin-left: 0; - margin-inline-end: rem(8); /* 2 */ - } - } - } - - .with-icon--after { - .icon { - margin-left: 0; - margin-right: rem(8); // IE fallback for next rule - only works for ltr languages - - @supports (margin-inline-start: 1em) { - margin-right: 0; - margin-inline-start: rem(8); /* 2 */ - } - } + margin-inline-start: rem(8); } } diff --git a/assets-src/styles/sass/30-base/_images.scss b/assets-src/styles/sass/30-base/_images.scss deleted file mode 100644 index d8b52049..00000000 --- a/assets-src/styles/sass/30-base/_images.scss +++ /dev/null @@ -1,41 +0,0 @@ -/*------------------------------------*\ - #Images -\*------------------------------------*/ - -img { - height: auto; - max-width: 100%; -} - -.avatar { - background-color: $white; - border: solid 1px $w3c-blue; - border-radius: 50%; - height: rem(100); - overflow: hidden; - width: rem(100); - - img { - height: 100%; - object-fit: cover; - width: 100%; - } -} - -.avatar--med { - height: rem(50); - width: rem(50); - - img { - margin-top: 0; - } -} - -.avatar--small { - height: rem(32); - width: rem(32); - - img { - margin-top: 0; - } -} \ No newline at end of file diff --git a/assets-src/styles/sass/30-base/_links.scss b/assets-src/styles/sass/30-base/_links.scss index dc9414d4..6c95e5e7 100755 --- a/assets-src/styles/sass/30-base/_links.scss +++ b/assets-src/styles/sass/30-base/_links.scss @@ -1,16 +1,8 @@ /*------------------------------------*\ #Links -\*------------------------------------*/ - -/** -Default global link styles that do not interfere with component link styles -- see https://alexcarpenter.me/screencasts/2019/02/global-link-styles/ -1. Don't rely on colour alone for styling links - see -https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F73 - -2. Remove the outline on focused links when they are also active/hovered. - */ + 1. Remove the outline on focused links when they are also active/hovered. +\*------------------------------------*/ a:not([class]), a.with-icon--before, @@ -19,9 +11,6 @@ a.with-icon--after { color: $link-color; cursor: pointer; padding-inline: rem(2); - text-decoration: underline; /* 1 */ - text-decoration-skip-ink: auto; // Not supported by Safari - text-underline-offset: 0.25em; // Supported by Safari svg { fill: currentColor; @@ -33,7 +22,7 @@ a.with-icon--after { &:hover { color: $link-color--hover; - outline-width: 0; /* 2 */ + outline-width: 0; /* 1 */ } &:focus { @@ -45,7 +34,7 @@ a.with-icon--after { &:active { color: $black; - outline-width: 0; /* 2 */ + outline-width: 0; /* 1 */ } } diff --git a/assets-src/styles/sass/30-base/_lists.scss b/assets-src/styles/sass/30-base/_lists.scss index 8ebc029a..86b90653 100755 --- a/assets-src/styles/sass/30-base/_lists.scss +++ b/assets-src/styles/sass/30-base/_lists.scss @@ -4,15 +4,15 @@ ul, ol { - margin-block-end: 1em; - margin-block-start: 1em; + // margin-block-end: 1em; + // margin-block-start: 1em; padding-inline-start: 2.4em; - > * + *, - li ul, - li ol { - margin-block-start: 0.75em; - } + // > * + *, + // li ul, + // li ol { + // margin-block-start: 0.75em; + // } } ol.counter { diff --git a/assets-src/styles/sass/30-base/_normalize.scss b/assets-src/styles/sass/30-base/_normalize.scss deleted file mode 100644 index 192eb9ce..00000000 --- a/assets-src/styles/sass/30-base/_normalize.scss +++ /dev/null @@ -1,349 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} diff --git a/assets-src/styles/sass/30-base/_quotes.scss b/assets-src/styles/sass/30-base/_quotes.scss index 357b5c72..a176c2d7 100644 --- a/assets-src/styles/sass/30-base/_quotes.scss +++ b/assets-src/styles/sass/30-base/_quotes.scss @@ -3,27 +3,31 @@ \*------------------------------------*/ blockquote { - margin-inline-end: rem(25); - margin-inline-start: rem(25); + // margin-inline-end: rem(25); + // margin-inline-start: rem(25); padding: rem(10); position: relative; &::before { background-color: $twiki-gray; + block-size: 100%; content: ''; - height: 100%; - left: rem(-3); + inline-size: rem(3); + inset-block-start: 0; + inset-inline-start: rem(-3); position: absolute; - top: 0; - width: rem(3); } - > * + * { - margin-top: 1rem; - } + // > * + * { + // margin-top: 1rem; + // } > *:first-child { - margin-top: 0; + margin-block-start: 0; + } + + > *:last-child { + margin-block-end: 0; } cite { @@ -32,11 +36,4 @@ blockquote { font-style: normal; font-weight: bold; } -} - -[dir="rtl"] { - blockquote::before { - left: auto; - right: rem(-3); - } } \ No newline at end of file diff --git a/assets-src/styles/sass/30-base/_skip-link.scss b/assets-src/styles/sass/30-base/_skip-link.scss index c4f09f80..36c4c345 100644 --- a/assets-src/styles/sass/30-base/_skip-link.scss +++ b/assets-src/styles/sass/30-base/_skip-link.scss @@ -8,25 +8,17 @@ border: solid 3px $black; color: $black; padding: em(10) em(15); + position: absolute; text-decoration: none; &:active, &:focus { - left: 0; - position: absolute; - top: 0; + inset-block-start: 0; + inset-inline-start: 0; z-index: 999; span { box-shadow: 0 -1px 0 0 inset; } } -} - -[dir="rtl"] { - .skip-link &:active, - .skip-link &:focus { - left: auto; - right: 0; - } } \ No newline at end of file diff --git a/assets-src/styles/sass/30-base/_social.scss b/assets-src/styles/sass/30-base/_social.scss index 1d4e94c7..989051c8 100644 --- a/assets-src/styles/sass/30-base/_social.scss +++ b/assets-src/styles/sass/30-base/_social.scss @@ -2,13 +2,10 @@ #Social links \*------------------------------------*/ -//ul.social-links {} - - .social-links__item { - height: rem(48); + block-size: rem(48); padding: rem(14); - width: rem(48); + inline-size: rem(48); .icon { height: rem(20); @@ -18,20 +15,4 @@ &:hover .icon { color: $link-color--hover; } -} - -//.social-links__item.with-icon { -// align-items: center; -// color: $link-color; -// -// .icon { -// background-color: transparent; -// height: 1em; -// padding: 0; -// width: 1em; -// } -// -// &:hover { -// text-decoration: none; -// } -//} \ No newline at end of file +} \ No newline at end of file diff --git a/assets-src/styles/sass/30-base/_tables.scss b/assets-src/styles/sass/30-base/_tables.scss index fa3d37e4..71f63477 100755 --- a/assets-src/styles/sass/30-base/_tables.scss +++ b/assets-src/styles/sass/30-base/_tables.scss @@ -1,14 +1,12 @@ /*------------------------------------*\ #Tables - - 1. Logical property allows text-direction to change with 'dir' \*------------------------------------*/ table { border: 1px solid $border-color; border-collapse: collapse; - margin-bottom: 1rem; - margin-top: 1rem; + // margin-bottom: 1rem; + // margin-top: 1rem; width: 100%; } @@ -20,17 +18,7 @@ th, td, table caption { padding: 0.75rem; - text-align: left; // Fallback for next rule for ltr languages - text-align: start; /* 1 */ -} - -[dir="rtl"] { - th, - td, - table caption { - text-align: right; // Fallback for next rule - text-align: start; /* 1 */ - } + text-align: start; } td, th { @@ -52,9 +40,9 @@ https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html @media screen { .table-wrap { border: 1px solid $border-color; - margin-bottom: 1rem; - margin-top: 1rem; - max-width: 100% !important; + // margin-bottom: 1rem; + // margin-top: 1rem; + max-inline-size: 100% !important; &[role][aria-labelledby][tabindex] { overflow: auto; @@ -62,8 +50,8 @@ https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html table { border: 0; - margin-bottom: 0; - margin-top: 0; + // margin-bottom: 0; + // margin-top: 0; } &:focus { diff --git a/assets-src/styles/sass/30-base/_typography.scss b/assets-src/styles/sass/30-base/_typography.scss index bf944ee0..7237ce8a 100644 --- a/assets-src/styles/sass/30-base/_typography.scss +++ b/assets-src/styles/sass/30-base/_typography.scss @@ -11,19 +11,19 @@ body { } -p { - margin: 1rem 0; -} +// p { +// margin: 1rem 0; +// } h1, h2, h3, h4, h5, h6 { font-weight: $emphasis; - margin: 0 0 1rem; + // margin: 0 0 1rem; } -h1 { - margin-bottom: 1em; -} +// h1 { +// margin-bottom: 1em; +// } h1, .txt-venus { diff --git a/assets-src/styles/sass/50-core-components/_avatars.scss b/assets-src/styles/sass/50-core-components/_avatars.scss new file mode 100644 index 00000000..fc870954 --- /dev/null +++ b/assets-src/styles/sass/50-core-components/_avatars.scss @@ -0,0 +1,36 @@ +/*------------------------------------*\ + #Avatars +\*------------------------------------*/ + +.avatar { + background-color: $white; + block-size: rem(100); + border: solid 1px $w3c-blue; + border-radius: 50%; + inline-size: rem(100); + overflow: hidden; + + img { + block-size: 100%; + inline-size: 100%; + object-fit: cover; + } +} + +.avatar--med { + block-size: rem(50); + inline-size: rem(50); + + img { + margin-block-start: 0; + } +} + +.avatar--small { + block-size: rem(32); + inline-size: rem(32); + + img { + margin-block-start: 0; + } +} \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_cards.scss b/assets-src/styles/sass/50-core-components/_cards.scss index 3a957789..14bf67a0 100644 --- a/assets-src/styles/sass/50-core-components/_cards.scss +++ b/assets-src/styles/sass/50-core-components/_cards.scss @@ -78,9 +78,7 @@ text-decoration: none; &:hover { - text-decoration: underline; /* 1 */ - text-decoration-skip-ink: auto; // Not supported by Safari - text-underline-offset: 0.25em; // Supported by Safari + text-decoration: underline; } &:focus { diff --git a/assets-src/styles/sass/50-core-components/_hero.scss b/assets-src/styles/sass/50-core-components/_hero.scss index 21dd9a24..0a9439bc 100644 --- a/assets-src/styles/sass/50-core-components/_hero.scss +++ b/assets-src/styles/sass/50-core-components/_hero.scss @@ -96,9 +96,7 @@ .button--ghost { padding-left: rem(3); padding-right: rem(3); - text-decoration: underline; /* 1 */ - text-decoration-skip-ink: auto; // Not supported by Safari - text-underline-offset: 0.25em; // Supported by Safari + text-decoration: underline; &:hover { box-shadow: 0 0 4px 2px rgba(84,84,84,0.25); diff --git a/assets-src/styles/sass/50-core-components/_pagination.scss b/assets-src/styles/sass/50-core-components/_pagination.scss index f0640e14..4a0f6cba 100644 --- a/assets-src/styles/sass/50-core-components/_pagination.scss +++ b/assets-src/styles/sass/50-core-components/_pagination.scss @@ -47,8 +47,6 @@ a[href]:hover { text-decoration: underline; - text-decoration-skip-ink: auto; // Not supported by Safari - text-underline-offset: 0.25em; // Supported by Safari } a[href][aria-current] { diff --git a/assets-src/styles/sass/50-core-components/_tag-list.scss b/assets-src/styles/sass/50-core-components/_tag-list.scss index 5a8bb0c4..6162b7f8 100644 --- a/assets-src/styles/sass/50-core-components/_tag-list.scss +++ b/assets-src/styles/sass/50-core-components/_tag-list.scss @@ -29,6 +29,4 @@ a.tag { position: relative; text-decoration: underline; z-index: 10; - text-decoration-skip-ink: auto; // Not supported by Safari - text-underline-offset: 0.25em; // Supported by Safari } \ No newline at end of file diff --git a/assets-src/styles/sass/60-advanced-components/_cards.scss b/assets-src/styles/sass/60-advanced-components/_cards.scss index f55f7b30..341ba9b0 100644 --- a/assets-src/styles/sass/60-advanced-components/_cards.scss +++ b/assets-src/styles/sass/60-advanced-components/_cards.scss @@ -6,9 +6,7 @@ cursor: pointer; &:hover .card__link { - text-decoration: underline; /* 1 */ - text-decoration-skip-ink: auto; // Not supported by Safari - text-underline-offset: 0.25em; // Supported by Safari + text-decoration: underline; } } diff --git a/assets-src/styles/sass/60-advanced-components/_collapsibles.scss b/assets-src/styles/sass/60-advanced-components/_collapsibles.scss index f61fce13..07acd050 100644 --- a/assets-src/styles/sass/60-advanced-components/_collapsibles.scss +++ b/assets-src/styles/sass/60-advanced-components/_collapsibles.scss @@ -41,9 +41,7 @@ } &:hover { - text-decoration: underline; /* 1 */ - text-decoration-skip-ink: auto; // Not supported by Safari - text-underline-offset: 0.25em; // Supported by Safari + text-decoration: underline; } &:focus { diff --git a/assets-src/styles/sass/60-advanced-components/_comments.scss b/assets-src/styles/sass/60-advanced-components/_comments.scss index 325c188e..c7604292 100644 --- a/assets-src/styles/sass/60-advanced-components/_comments.scss +++ b/assets-src/styles/sass/60-advanced-components/_comments.scss @@ -5,9 +5,7 @@ .button[data-replylink], #js-cancel-reply { @include txt-pluto; - text-decoration: underline; /* 1 */ - text-decoration-skip-ink: auto; // Not supported by Safari - text-underline-offset: 0.25em; // Supported by Safari + text-decoration: underline; &:hover { box-shadow: 0 0 4px 2px rgba(84,84,84,0.25); diff --git a/assets-src/styles/sass/80-templates/_post.scss b/assets-src/styles/sass/80-templates/_post.scss index 6f56c2b7..2c5469d7 100644 --- a/assets-src/styles/sass/80-templates/_post.scss +++ b/assets-src/styles/sass/80-templates/_post.scss @@ -128,9 +128,7 @@ display: inline-block; padding-bottom: rem(11); padding-top: rem(11); - text-decoration: underline; /* 1 */ - text-decoration-skip-ink: auto; // Not supported by Safari - text-underline-offset: 0.25em; // Supported by Safari + text-decoration: underline; &:visited { color: $storm-gray; diff --git a/package-lock.json b/package-lock.json index 3fd401a6..ee20f394 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,6 @@ "imagemin-cli": "^6.0.0", "js-yaml": "^3.13.1", "lodash.template": "^4.5.0", - "normalize.css": "^8.0.1", "npm-run-all": "^4.1.5", "postcss": "^8.4.1", "postcss-cli": "^9.1.0", @@ -6135,11 +6134,6 @@ "node": ">=4" } }, - "node_modules/normalize.css": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", - "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" - }, "node_modules/npm-conf": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz", @@ -13245,11 +13239,6 @@ } } }, - "normalize.css": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", - "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" - }, "npm-conf": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz", diff --git a/package.json b/package.json index 9d695a4b..ea4098ee 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,6 @@ "imagemin-cli": "^6.0.0", "js-yaml": "^3.13.1", "lodash.template": "^4.5.0", - "normalize.css": "^8.0.1", "npm-run-all": "^4.1.5", "postcss": "^8.4.1", "postcss-cli": "^9.1.0", From 1f49b302c850afe6cc871bb3ad1b431c66f8c07e Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Mon, 4 Aug 2025 14:24:26 +0100 Subject: [PATCH 02/28] Logical properties for layout Sass partials --- assets-src/styles/sass/40-layouts/_center.scss | 8 +++----- assets-src/styles/sass/40-layouts/_cover.scss | 12 +++++------- assets-src/styles/sass/40-layouts/_frame.scss | 18 ++++++++---------- .../styles/sass/40-layouts/_sidebar.scss | 4 ++-- .../styles/sass/40-layouts/_switcher.scss | 6 +++--- 5 files changed, 21 insertions(+), 27 deletions(-) diff --git a/assets-src/styles/sass/40-layouts/_center.scss b/assets-src/styles/sass/40-layouts/_center.scss index 7017e4d0..efa6f0fe 100644 --- a/assets-src/styles/sass/40-layouts/_center.scss +++ b/assets-src/styles/sass/40-layouts/_center.scss @@ -14,9 +14,7 @@ to our global box-sizing rule. */ .l-center.l-center { box-sizing: content-box /* 1 */; - margin-left: auto; - margin-right: auto; - max-width: rem($max-width); - padding-left: 5vw; - padding-right: 5vw; + margin-inline: auto; + max-inline-size: rem($max-width); + padding-inline: 5vw; } \ No newline at end of file diff --git a/assets-src/styles/sass/40-layouts/_cover.scss b/assets-src/styles/sass/40-layouts/_cover.scss index b7561a20..2833a944 100644 --- a/assets-src/styles/sass/40-layouts/_cover.scss +++ b/assets-src/styles/sass/40-layouts/_cover.scss @@ -15,20 +15,18 @@ .l-cover { display: flex; flex-direction: column; - min-height: 30vh; + min-block-size: 30vh; padding: 1rem; } .l-cover > * { - margin-top: 1rem; - margin-bottom: 1rem; + margin-block: 1rem; } .l-cover > .principal { - margin-top: auto; - margin-bottom: auto; + margin-block: auto; } @@ -37,9 +35,9 @@ These styles space out an optional header/footer area without disturbing the vertically centered element. */ .l-cover > :first-child:not(.principal) { - margin-top: 0; + margin-block-start: 0; } .l-cover > :last-child:not(.principal) { - margin-bottom: 0; + margin-block-end: 0; } \ No newline at end of file diff --git a/assets-src/styles/sass/40-layouts/_frame.scss b/assets-src/styles/sass/40-layouts/_frame.scss index 57d6e7f0..ca4328e6 100644 --- a/assets-src/styles/sass/40-layouts/_frame.scss +++ b/assets-src/styles/sass/40-layouts/_frame.scss @@ -20,21 +20,19 @@ .l-frame > * { align-items: center; - bottom: 0; + inset-block: 0; + inset-inline: 0; display: flex; justify-content: center; - left: 0; position: absolute; - right: 0; - top: 0; } .l-frame > iframe, .l-frame > img, .l-frame > video { - height: 100%; - width: 100%; + block-size: 100%; + inline-size: 100%; } .l-frame > img, @@ -45,17 +43,17 @@ /* Common aspect ratios */ .l-frame--16-9 { - padding-bottom: 56.25%; + padding-block-end: 56.25%; } .l-frame--3-2 { - padding-bottom: 66.67%; + padding-block-end: 66.67%; } .l-frame--4-3 { - padding-bottom: 75%; + padding-block-end: 75%; } .l-frame--square { - padding-bottom: 100%; + padding-block-end: 100%; } \ No newline at end of file diff --git a/assets-src/styles/sass/40-layouts/_sidebar.scss b/assets-src/styles/sass/40-layouts/_sidebar.scss index d330e81d..4eb6d0ec 100644 --- a/assets-src/styles/sass/40-layouts/_sidebar.scss +++ b/assets-src/styles/sass/40-layouts/_sidebar.scss @@ -65,12 +65,12 @@ a viewport media query. .l-sidebar .not-sidebar { flex-basis: 0; flex-grow: 999; - min-width: calc(55% - 1.5rem); + min-inline-size: calc(55% - 1.5rem); } .l-sidebar--expanded { - width: 100%; + inline-size: 100%; } .l-sidebar .sidebar--compact { diff --git a/assets-src/styles/sass/40-layouts/_switcher.scss b/assets-src/styles/sass/40-layouts/_switcher.scss index 32e3a791..560bafb9 100644 --- a/assets-src/styles/sass/40-layouts/_switcher.scss +++ b/assets-src/styles/sass/40-layouts/_switcher.scss @@ -38,7 +38,7 @@ value that's either bigger than the max-width or smaller than the min-width, so that either of these properties is applied instead. */ .l-switcher > * > * { - max-width: 100%; /* 1 */ - min-width: 50%; /* 2 */ - width: calc(690px * 690 - 100% * 690); /* 3 */ + inline-size: calc(690px * 690 - 100% * 690); /* 3 */ + max-inline-size: 100%; /* 1 */ + min-inline-size: 50%; /* 2 */ } \ No newline at end of file From 06a0df0a8848b2800dbb7756ffc0e703241f22f5 Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Mon, 4 Aug 2025 15:21:14 +0100 Subject: [PATCH 03/28] Reset of global spacing for 'core-component' Sass partials --- .../sass/50-core-components/_activity.scss | 3 +- .../50-core-components/_archive-banner.scss | 47 +++++-------- .../sass/50-core-components/_breadcrumbs.scss | 18 +---- .../sass/50-core-components/_cards.scss | 47 +++++-------- .../50-core-components/_collapsibles.scss | 16 ++--- .../sass/50-core-components/_columns.scss | 18 ++--- .../sass/50-core-components/_comments.scss | 70 +++++++------------ .../sass/50-core-components/_evangelists.scss | 32 ++++----- .../_family-series-list.scss | 6 +- .../sass/50-core-components/_fifty-fifty.scss | 24 +++---- .../sass/50-core-components/_footer.scss | 17 +++-- .../sass/50-core-components/_group-list.scss | 5 +- .../sass/50-core-components/_header.scss | 9 +-- .../styles/sass/50-core-components/_hero.scss | 55 +++++++-------- .../sass/50-core-components/_images.scss | 5 +- .../styles/sass/50-core-components/_logo.scss | 29 ++++---- .../styles/sass/50-core-components/_main.scss | 28 ++++---- .../50-core-components/_maturity-levels.scss | 2 +- .../50-core-components/_members-grid.scss | 16 ++--- .../sass/50-core-components/_meta-info.scss | 14 ++-- .../sass/50-core-components/_navigation.scss | 58 ++++++++------- .../sass/50-core-components/_notes.scss | 4 +- .../sass/50-core-components/_pagination.scss | 24 +++---- .../sass/50-core-components/_pre-footer.scss | 12 ++-- .../sass/50-core-components/_quotes.scss | 13 +--- .../styles/sass/50-core-components/_rss.scss | 5 +- .../sass/50-core-components/_search.scss | 6 +- .../sass/50-core-components/_slide.scss | 57 +++++++-------- .../sass/50-core-components/_slider.scss | 11 ++- .../styles/sass/50-core-components/_text.scss | 16 ++--- .../styles/sass/50-core-components/_toc.scss | 14 ++-- .../50-core-components/_translations.scss | 32 ++++----- .../sass/50-core-components/_video.scss | 11 +-- .../_you-may-also-like.scss | 15 ++-- 34 files changed, 322 insertions(+), 417 deletions(-) diff --git a/assets-src/styles/sass/50-core-components/_activity.scss b/assets-src/styles/sass/50-core-components/_activity.scss index 26b65cbb..f6bbe66b 100644 --- a/assets-src/styles/sass/50-core-components/_activity.scss +++ b/assets-src/styles/sass/50-core-components/_activity.scss @@ -4,8 +4,7 @@ .component--activity { background-color: $mist-gray; - padding-bottom: rem(50); - padding-top: rem(50); + padding-block: rem(50); } .component--activity .component--columns--images { diff --git a/assets-src/styles/sass/50-core-components/_archive-banner.scss b/assets-src/styles/sass/50-core-components/_archive-banner.scss index 0e2ff9eb..88327d18 100644 --- a/assets-src/styles/sass/50-core-components/_archive-banner.scss +++ b/assets-src/styles/sass/50-core-components/_archive-banner.scss @@ -5,18 +5,15 @@ @media screen { #archive-banner { background-color: #f9dc4a; - padding-bottom: 1.25rem; - padding-top: 1.25rem; + padding-block: 1.25rem; } #archive-banner .centered { box-sizing: content-box; - margin-left: auto; - margin-right: auto; - max-width: 70rem; + margin-inline: auto; + max-winline-size: 70rem; overflow: hidden; - padding-left: 5vw; - padding-right: 5vw; + padding-inline: 5vw; } #archive-banner .centered > * { @@ -33,15 +30,15 @@ #archive-banner .archive-banner__message { flex-basis: 0; flex-grow: 999; - min-width: calc(80% - 1.5rem); + min-inline-size: calc(80% - 1.5rem); } #archive-banner .archive-banner__message > * + * { - margin-top: 1rem; + margin-block-start: 1rem; } #archive-banner .archive-banner__message > * { - max-width: 41.25rem; + max-inline-size: 41.25rem; } #archive-banner .archive-banner__message h2 { @@ -56,7 +53,7 @@ } #archive-banner .archive-banner__message h3 + * { - margin-top: 0; + margin-block-start: 0; } #archive-banner a { @@ -83,16 +80,16 @@ #archive-banner .archive-banner__logo > span { display: block; - height: 2.75rem; + block-size: 2.75rem; position: relative; - width: 4.125rem; + inline-size: 4.125rem; } } @media screen and (min-width: 64em) { #archive-banner .archive-banner__logo > span { - height: 3.25rem; - width: 4.875rem; + block-size: 3.25rem; + inline-size: 4.875rem; } } @@ -116,27 +113,17 @@ } .archive-banner__message { - min-height: 40pt; - padding-left: 62pt; + min-block-size: 40pt; + padding-inline-start: 62pt; } .archive-banner__message > * + * { - margin-top: 8pt; - } - - [dir="rtl"] .archive-banner__message { - padding-left: 0; - padding-right: 60pt; + margin-block-start: 8pt; } .archive-banner__logo { - left: 8pt; + inset-block-start: 8pt; + inset-inline-start: 8pt; position: absolute; - top: 8pt; - } - - [dir="rtl"] .archive-banner__logo { - left: auto; - right: 8pt; } } \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_breadcrumbs.scss b/assets-src/styles/sass/50-core-components/_breadcrumbs.scss index 2c2c3e41..aeccde73 100644 --- a/assets-src/styles/sass/50-core-components/_breadcrumbs.scss +++ b/assets-src/styles/sass/50-core-components/_breadcrumbs.scss @@ -4,8 +4,7 @@ \*------------------------------------*/ #breadcrumb { - padding-bottom: rem(15); - padding-top: rem(10); + padding-block: rem(10) rem(15); .l-cluster > * { margin: 0 rem(-11); @@ -13,25 +12,17 @@ .l-cluster.l-cluster > * > * { margin: 0 0 0 rem(11); - padding-right: 1em; + padding-inline-end: 1em; position: relative; } } -[dir="rtl"] { - #breadcrumb .l-cluster.l-cluster > * > * { - margin: 0 rem(11) 0 0; - padding-left: 1em; - padding-right: 0; - } -} .breadcrumbs a { @include txt-pluto; color: $off-black; display: block; - padding-bottom: rem(11); - padding-top: rem(11); + padding-block: rem(11); &:visited, &:hover, @@ -69,9 +60,6 @@ Separator chevron - see https://codepen.io/jonneal/pen/kptBs } } -// .breadcrumbs li:not(:last-child) { -// &::after {} -// } [dir="rtl"] { .breadcrumbs li:not(:last-child) { diff --git a/assets-src/styles/sass/50-core-components/_cards.scss b/assets-src/styles/sass/50-core-components/_cards.scss index 14bf67a0..095ee341 100644 --- a/assets-src/styles/sass/50-core-components/_cards.scss +++ b/assets-src/styles/sass/50-core-components/_cards.scss @@ -4,22 +4,15 @@ .card { background-color: $white; + block-size: 100%; border-radius: rem(4); display: flex; flex-direction: column; - height: 100%; overflow: hidden; } .card--event { - border-left: solid rem(6); -} - -[dir="rtl"] { - .card--event { - border-left: 0; - border-right: solid rem(6); - } + border-inline-start: solid rem(6); } .card--event, @@ -50,18 +43,17 @@ .card__text { flex-grow: 1; order: 1; - padding-top: 1rem; + // padding-block-start: 1rem; } .card--group .card__text { - max-width: rem($text-measure); + max-inline-size: rem($text-measure); } .card__text > a:not([class]) { align-self: flex-start; - margin-top: rem(6); - padding-bottom: rem(10); - padding-top: rem(10); + // margin-block-start: rem(6); + padding-block: rem(10); } .card__heading { @@ -90,42 +82,41 @@ } .card--user.l-sidebar { - padding-bottom: rem(30); - padding-top: rem(40); + padding-block: rem(40) rem(30); .sidebar { flex-basis: auto; order: -1; img { - width: rem(100); + inline-size: rem(100); } } .not-sidebar { - min-width: calc(70% - 1.5rem); + min-inline-size: calc(70% - 1.5rem); } .not-sidebar > div { - max-width: rem($text-measure); + max-inkine-size: rem($text-measure); - > * + * { - margin-top: rem(20); - } + // > * + * { + // margin-block-start: rem(20); + // } } .l-cluster > * { align-items: center; } - .l-cluster > *, - .l-cluster.l-cluster > * > * { - margin-bottom: 0; - margin-top: 0; - } + // .l-cluster > *, + // .l-cluster.l-cluster > * > * { + // margin-block: 0; + // } .l-cluster a { display: inline-block; - padding: rem(12) 0; + padding-block: rem(12); + padding-inline: 0; } } \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_collapsibles.scss b/assets-src/styles/sass/50-core-components/_collapsibles.scss index 6ce45d6c..e95742f3 100644 --- a/assets-src/styles/sass/50-core-components/_collapsibles.scss +++ b/assets-src/styles/sass/50-core-components/_collapsibles.scss @@ -10,15 +10,15 @@ padding: rem(25); } - > div + div { - margin-top: 1rem; - } + // > div + div { + // margin-top: 1rem; + // } } -[data-heading="collapsibles"] span { - @include stack(1rem); -} +// [data-heading="collapsibles"] span { +// @include stack(1rem); +// } [data-heading="collapsibles"] h3 { @include txt-saturn; @@ -28,12 +28,12 @@ @include txt-pluto; display: block; font-weight: normal; - margin-top: 1rem; + // margin-block-start: 1rem; } [data-heading="collapsibles"] + * { // Restrict line-length for readability > * { - max-width: rem($text-measure); + max-inline-size: rem($text-measure); } } \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_columns.scss b/assets-src/styles/sass/50-core-components/_columns.scss index aae918df..7ba0acab 100644 --- a/assets-src/styles/sass/50-core-components/_columns.scss +++ b/assets-src/styles/sass/50-core-components/_columns.scss @@ -13,20 +13,20 @@ margin: -1.5%; } - li + li { - margin-top: rem(20); - - @include mq($bp-tab-small) { - margin-top: 0; - } - } + // li + li { + // margin-block-start: rem(20); + // + // @include mq($bp-tab-small) { + // margin-block-start: 0; + // } + // } } .component--columns--images { > ul > li { @include mq($bp-tab-small) { flex: 1 0 33%; - max-width: 50%; + max-inline-size: 50%; padding: 1.5%; } } @@ -44,7 +44,7 @@ > ul > li { @include mq($bp-tab-small) { flex: 1 0 50%; - max-width: 50%; + max-inline-size: 50%; padding: 1.5%; } diff --git a/assets-src/styles/sass/50-core-components/_comments.scss b/assets-src/styles/sass/50-core-components/_comments.scss index 1b2b7519..3723694c 100644 --- a/assets-src/styles/sass/50-core-components/_comments.scss +++ b/assets-src/styles/sass/50-core-components/_comments.scss @@ -4,8 +4,7 @@ .comments { background-color: $mist-gray; - padding-bottom: rem(50); - padding-top: rem(50); + padding-block: rem(50); h2 { @include txt-mars; @@ -14,16 +13,16 @@ } .comment-list { - margin-top: rem(30); + // margin-block-start: rem(30); > li { - border-bottom: solid 1px $border-color; - padding-bottom: rem(50); + border-block-end: solid 1px $border-color; + padding-block-end: rem(50); } - > li + li { - margin-top: rem(20); - } + // > li + li { + // margin-block-start: rem(20); + // } } @@ -40,57 +39,43 @@ order: -1; img { - width: rem(50); + inline-size: rem(50); } } .not-sidebar { - min-width: calc(80% - 1.5rem); + min-inline-size: calc(80% - 1.5rem); } } .reply-list.reply-list { - margin-left: rem(70); - margin-top: rem(30); - padding-left: rem(30); + // margin-block-start: rem(30); + margin-inline-start: rem(70); + padding-inline-start: rem(30); position: relative; &::before { background-color: $w3c-blue; + block-size: 100%; border-radius: rem(3); content: ''; - height: 100%; - left: 0; + inline-size: rem(3); + inset-block-start: 0; + inset-inline-start: 0; position: absolute; - top: 0; - width: rem(3); } > li { - border-top: solid 1px $border-color; - } - - > li + li { - margin-top: rem(20); + border-block-start: solid 1px $border-color; } -} -[dir="rtl"] { - .reply-list.reply-list { - margin-left: 0; - margin-right: rem(70); - padding-left: 0; - padding-right: rem(30); - - &::before { - left: auto; - right: 0; - } - } + // > li + li { + // margin-block-start: rem(20); + // } } .reply-list .comment { - padding-top: rem(20); + padding-block-start: rem(20); } .comment__author { @@ -100,18 +85,17 @@ } .comment__body { - max-width: rem($text-measure); + max-inline-size: rem($text-measure); } [data-replylink] { @include txt-pluto; align-self: flex-start; - padding-bottom: rem(11); - padding-top: rem(11); + padding-block: rem(11); } #respond { - margin-top: 1rem; + // margin-block-start: 1rem; > div:first-of-type { align-items: center; @@ -121,11 +105,11 @@ } .comment-form-wrap { - margin-top: rem(30); + // margin-block-start: rem(30); } #comment-form { - max-width: rem($text-measure); + max-inline-size: rem($text-measure); .l-switcher { overflow: visible; @@ -137,7 +121,7 @@ } .l-switcher > * > * { + inline-size: calc(660px * 660 - 100% * 660); padding: rem(10); - width: calc(660px * 660 - 100% * 660); } } \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_evangelists.scss b/assets-src/styles/sass/50-core-components/_evangelists.scss index dc6c5019..2eeac445 100644 --- a/assets-src/styles/sass/50-core-components/_evangelists.scss +++ b/assets-src/styles/sass/50-core-components/_evangelists.scss @@ -9,14 +9,14 @@ justify-content: space-between; } - > * + * { - margin-top: 1rem; - - @include mq($bp-tab-large) { - margin-top: 0; - } - - } + // > * + * { + // margin-block-start: 1rem; + // + // @include mq($bp-tab-large) { + // margin-block-start: 0; + // } + // + // } } .component--evangelists__text { @@ -25,7 +25,7 @@ } h2 ~ * { - max-width: rem($text-measure); + max-inline-size: rem($text-measure); } } @@ -34,15 +34,14 @@ border-radius: rem(6); color: $white; overflow: hidden; - padding-top: rem(24); + padding-block-start: rem(24); @include mq($bp-tab-large) { flex-basis: 45%; } h3 { - padding-left: rem(24); - padding-right: rem(24); + padding-inline: rem(24); } .l-box { @@ -50,12 +49,11 @@ } li + li { - border-top: solid 1px #649bc5; + border-block-start: solid 1px #649bc5; } p { - margin-bottom: 0; - margin-top: 0; + margin-block: 0; } .sidebar { @@ -63,8 +61,8 @@ } .not-sidebar { - @include stack(0.75em); - min-width: calc(65% - 1.5rem); + // @include stack(0.75em); + min-inline-size: calc(65% - 1.5rem); } a { diff --git a/assets-src/styles/sass/50-core-components/_family-series-list.scss b/assets-src/styles/sass/50-core-components/_family-series-list.scss index ff587433..b4858d92 100644 --- a/assets-src/styles/sass/50-core-components/_family-series-list.scss +++ b/assets-src/styles/sass/50-core-components/_family-series-list.scss @@ -6,6 +6,6 @@ padding-block-start: rem(28); } -.family-grouping h2 + * { - margin-block-start: 1rem; -} \ No newline at end of file +// .family-grouping h2 + * { +// margin-block-start: 1rem; +// } \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_fifty-fifty.scss b/assets-src/styles/sass/50-core-components/_fifty-fifty.scss index 5c5bdd02..5f7a410d 100644 --- a/assets-src/styles/sass/50-core-components/_fifty-fifty.scss +++ b/assets-src/styles/sass/50-core-components/_fifty-fifty.scss @@ -10,13 +10,13 @@ justify-content: space-between; } - > * + * { - margin-top: 1rem; - - @include mq($bp-tab-small) { - margin-top: 0; - } - } + // > * + * { + // margin-block-start: 1rem; + // + // @include mq($bp-tab-small) { + // margin-block-start: 0; + // } + // } } .component--fifty-fifty__text { @@ -30,8 +30,8 @@ } .component--fifty-fifty__text .l-box { - @include stack(1rem); - margin-top: rem(30); + // @include stack(1rem); + margin-block-start: rem(30); a { align-self: flex-start; @@ -52,15 +52,15 @@ } .component--fifty-fifty .image .l-frame { - padding-bottom: 66.67%; + padding-block-end: 66.67%; @include mq($bp-tab-small) { - padding-bottom: 100%; + padding-block-end: 100%; } } .component--fifty-fifty .illustration .l-frame { - padding-bottom: 75%; + padding-block-end: 75%; } .component--fifty-fifty.reversed { diff --git a/assets-src/styles/sass/50-core-components/_footer.scss b/assets-src/styles/sass/50-core-components/_footer.scss index 8eb2ea23..ad751da5 100644 --- a/assets-src/styles/sass/50-core-components/_footer.scss +++ b/assets-src/styles/sass/50-core-components/_footer.scss @@ -3,10 +3,10 @@ \*------------------------------------*/ .global-footer { - border-top: solid 1px $border-color; + border-block-start: solid 1px $border-color; grid-row-start: 2; // Needed for sticky footer grid-row-end: 3; // Needed for sticky footer - padding: rem(20) 0 rem(25); + padding-block: rem(20) rem(25); .l-center { @include stack(1rem); @@ -17,9 +17,9 @@ @include txt-eris; } - .copyright { - margin-bottom: 0; - } + // .copyright { + // margin-block-end: 0; + // } a { color: $off-black; @@ -55,16 +55,15 @@ a:not([class]) { display: block; - padding-bottom: rem(12); - padding-top: rem(12); + padding-block: rem(12); } .with-icon--larger { padding: rem(12); img { - height: rem(20); - width: rem(20); + block-size: rem(20); + inline-size: rem(20); } &:focus { diff --git a/assets-src/styles/sass/50-core-components/_group-list.scss b/assets-src/styles/sass/50-core-components/_group-list.scss index ef832661..be2015e3 100644 --- a/assets-src/styles/sass/50-core-components/_group-list.scss +++ b/assets-src/styles/sass/50-core-components/_group-list.scss @@ -4,10 +4,9 @@ .component--group-list { background-color: $mist-gray; - padding-bottom: rem(50); - padding-top: rem(50); + padding-block: rem(50); } .component--group-list__intro { - max-width: rem($text-measure); + max-inline-size: rem($text-measure); } diff --git a/assets-src/styles/sass/50-core-components/_header.scss b/assets-src/styles/sass/50-core-components/_header.scss index 8e652bbb..655615ea 100644 --- a/assets-src/styles/sass/50-core-components/_header.scss +++ b/assets-src/styles/sass/50-core-components/_header.scss @@ -15,8 +15,7 @@ .global-header .banner { background-color: $light-blue; - padding-bottom: rem(10); - padding-top: rem(10); + padding-block: rem(10); } .global-header .banner__inner { @@ -25,8 +24,7 @@ p { @include txt-eris; - margin-bottom: 0; - margin-top: 0; + // margin-block: 0; } a { @@ -54,8 +52,7 @@ @include txt-eris; color: $off-black; display: block; - padding-bottom: rem(12); - padding-top: rem(12); + padding-block: rem(12); } } diff --git a/assets-src/styles/sass/50-core-components/_hero.scss b/assets-src/styles/sass/50-core-components/_hero.scss index 0a9439bc..ed987512 100644 --- a/assets-src/styles/sass/50-core-components/_hero.scss +++ b/assets-src/styles/sass/50-core-components/_hero.scss @@ -19,40 +19,38 @@ } .l-sidebar .not-sidebar { - min-width: 50%; - padding-bottom: rem(30); + min-inline-size: 50%; + padding-block-end: rem(30); } .l-sidebar .not-sidebar > * { @include mq($max-width) { - max-width: rem(504); + max-inline-size: rem(504); } } - .lead { - margin-bottom: rem(18); - margin-top: 0; - } + // .lead { + // margin-block-end: rem(18); + // margin-block-start: 0; + // } img { - margin-left: auto; - margin-right: auto; - //max-width: rem(500); + margin-inline: auto; @include mq($bp-tab-small) { - max-width: rem(500); + max-inline-size: rem(500); } } } -.hero h1 { - margin-bottom: 1rem; -} +// .hero h1 { +// margin-block-end: 1rem; +// } -.hero + * { - margin-top: rem(50); -} +// .hero + * { +// margin-block-start: rem(50); +// } .hero .button { align-self: flex-start; @@ -60,12 +58,12 @@ .hero--listing { background-color: $white; - margin-bottom: rem(20); - padding-bottom: rem(40); + // margin-block-end: rem(20); + padding-block-end: rem(40); - + * { - margin-top: 0; - } + // + * { + // margin-block-start: 0; + // } } .hero--listing .filters.l-switcher { @@ -73,9 +71,9 @@ overflow: visible; > * > * { - min-width: 33.333%; + inline-size: calc(920px * 920 - 100% * 920); + min-inline-size: 33.333%; padding: rem(10); - width: calc(920px * 920 - 100% * 920); } } @@ -89,13 +87,12 @@ } } - .field { - margin-top: 0; - } + // .field { + // margin-block-start: 0; + // } .button--ghost { - padding-left: rem(3); - padding-right: rem(3); + padding-inline: rem(3); text-decoration: underline; &:hover { diff --git a/assets-src/styles/sass/50-core-components/_images.scss b/assets-src/styles/sass/50-core-components/_images.scss index a6a70436..f8c434b4 100644 --- a/assets-src/styles/sass/50-core-components/_images.scss +++ b/assets-src/styles/sass/50-core-components/_images.scss @@ -8,15 +8,14 @@ margin-block-start: 1em; > * { - max-width: rem(540); + max-inline-size: rem(540); } > a { align-self: flex-start; display: inline-block; margin: 0; - padding-bottom: rem(10); - padding-top: rem(10); + padding-block: rem(10); } } } \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_logo.scss b/assets-src/styles/sass/50-core-components/_logo.scss index 0808cbcd..3b8f00ec 100755 --- a/assets-src/styles/sass/50-core-components/_logo.scss +++ b/assets-src/styles/sass/50-core-components/_logo.scss @@ -4,33 +4,32 @@ .logo { display: block; - height: rem(44); + block-size: rem(44); + inline-size: rem(66); position: relative; - width: rem(66); @include mq($bp-tab-large) { - height: rem(52); - width: rem(78); + block-size: rem(52); + inline-size: rem(78); } } .logo--member { height: rem(84); - padding-left: rem(20); - padding-right: rem(20); + inline-size: rem(150); + padding-inline: rem(20); position: relative; - width: rem(150); > img { - bottom: 0; - height: auto; - left: 0; + inset-block-end: 0; + iinset-block-start: 0; + block-size: auto; + inline-size: auto; + inset-inline-end: 0; + inset-inline-start: 0; margin: auto 0; - max-height: 100%; - max-width: calc(100% - 40px); + max-block-size: 100%; + max-inline-size: calc(100% - 40px); position: absolute; - right: 0; - top: 0; - width: auto; } } \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_main.scss b/assets-src/styles/sass/50-core-components/_main.scss index 8cbfd5ab..5b627939 100644 --- a/assets-src/styles/sass/50-core-components/_main.scss +++ b/assets-src/styles/sass/50-core-components/_main.scss @@ -11,20 +11,20 @@ to our global box-sizing rule. main, #main { box-sizing: content-box /* 1 */; - margin-left: auto; - margin-right: auto; - max-width: rem($max-width); - padding: rem(24) 5vw rem(100); + margin-inline: auto; + max-inline-size: rem($max-width); + padding-block: rem(24) rem(100); + padding-inline: 5vw; } -#main .component + .component { - margin-top: rem(80); +// #main .component + .component { +// margin-block-start: rem(80); +// +// @include mq($bp-tab-small) { +// margin-block-start: rem(100); +// } +// } - @include mq($bp-tab-small) { - margin-top: rem(100); - } -} - -#main .component.u-full-width + .component.u-full-width { - margin-top: 0; -} \ No newline at end of file +// #main .component.u-full-width + .component.u-full-width { +// margin-block-start: 0; +// } \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_maturity-levels.scss b/assets-src/styles/sass/50-core-components/_maturity-levels.scss index e474d559..0909228f 100644 --- a/assets-src/styles/sass/50-core-components/_maturity-levels.scss +++ b/assets-src/styles/sass/50-core-components/_maturity-levels.scss @@ -6,7 +6,7 @@ background-color: rgba(#cecdcd, 0.5); border-radius: rem(4); display: inline-block; - margin-bottom: rem(5); + // margin-block-end: rem(5); padding: rem(2.5) rem(5); } diff --git a/assets-src/styles/sass/50-core-components/_members-grid.scss b/assets-src/styles/sass/50-core-components/_members-grid.scss index 3801609f..2caef521 100644 --- a/assets-src/styles/sass/50-core-components/_members-grid.scss +++ b/assets-src/styles/sass/50-core-components/_members-grid.scss @@ -4,21 +4,20 @@ .component--members { background-color: $mist-gray; - padding-bottom: rem(25); - padding-top: rem(25); + padding-block: rem(25); } .component--members .l-center { > h2, > p { - max-width: rem($text-measure); + max-inline-size: rem($text-measure); } } .component--members__grid { display: flex; flex-wrap: wrap; - margin-bottom: 1rem; + // margin-block-end: 1rem; @supports (display: grid) { display: grid; @@ -33,9 +32,8 @@ background-color: $white; display: flex; justify-content: center; - margin-bottom: rem(20); - margin-left: rem(10); - margin-right: rem(10); + margin-block-end: rem(20); + margin-inline: rem(10); flex: 1 1 rem(170); position: relative; @@ -52,7 +50,7 @@ } .component--members__grid .l-box { - max-width: rem(170); + max-inline-size: rem(170); } .component--members__grid + a { @@ -61,7 +59,7 @@ .component--members__cta > * { align-items: center; - margin-top: 1em; + margin-block-start: 1em; } .component--members__cta > * > *:not(a) { diff --git a/assets-src/styles/sass/50-core-components/_meta-info.scss b/assets-src/styles/sass/50-core-components/_meta-info.scss index d7095f91..79290667 100644 --- a/assets-src/styles/sass/50-core-components/_meta-info.scss +++ b/assets-src/styles/sass/50-core-components/_meta-info.scss @@ -3,17 +3,15 @@ \*------------------------------------*/ .meta { - border-bottom: solid 1px $border-color; - border-top: solid 1px $border-color; - margin-bottom: rem(50); + border-block: solid 1px $border-color; + // margin-block-end: rem(50); padding: rem(24) 0; - dl { - margin-bottom: 0; - } + // dl { + // margin-block-end: 0; + // } } .meta .with-link { - padding-bottom: rem(10); - padding-top: rem(10); + padding-block: rem(10); } \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_navigation.scss b/assets-src/styles/sass/50-core-components/_navigation.scss index d138a9f8..f45d33cd 100644 --- a/assets-src/styles/sass/50-core-components/_navigation.scss +++ b/assets-src/styles/sass/50-core-components/_navigation.scss @@ -7,14 +7,13 @@ } #global-nav { - border-bottom: solid 1px $border-color; + border-block-end: solid 1px $border-color; display: block; - padding-bottom: rem(18); - padding-top: rem(18); + padding-block: rem(18); @include mq($max-width) { - padding-bottom: 0; - padding-top: rem(20); + padding-block-end: 0; + padding-block-start: rem(20); } } @@ -35,13 +34,13 @@ display: flex; flex-basis: 100%; flex-wrap: wrap; - padding-bottom: rem(45); - width: 100%; + inline-size: 100%; + padding-block-end: rem(45); @include mq($max-width) { flex-basis: auto; flex-wrap: nowrap; - padding-bottom: 0; + padding-block-end: 0; } } @@ -62,7 +61,7 @@ li.top-nav-item + li.top-nav-item { flex-basis: 100%; @include mq($max-width) { - border-bottom: none; + border-block-end: none; flex-basis: auto; } } @@ -109,18 +108,18 @@ li.top-nav-item + li.top-nav-item { @include mq($max-width) { margin-inline-end: rem(25); - padding-bottom: rem(5); + padding-block-end: rem(5); position: relative; &::before { background-color: $w3c-blue; - bottom: 0; - content:''; - display: none; - height: rem(3); - left: 0; + block-size: rem(3); + content:''; + display: none; + inline-size: 100%; + inset-block-end: 0; + inset-inline-start: 0; position: absolute; - width: 100%; } &:hover::before { @@ -133,18 +132,18 @@ li.top-nav-item + li.top-nav-item { align-items: center; color: $off-black; display: flex; - min-height: rem(44); + min-block-size: rem(44); text-decoration: none !important; @include mq($max-width) { + block-size: 100%; display: inline-flex; justify-content: center; - height: 100%; - min-width: rem(44); + min-inline-sizeh: rem(44); } &::before { - bottom: 0 !important; + inset-block-end: 0 !important; } &:visited, @@ -162,16 +161,16 @@ li.top-nav-item + li.top-nav-item { margin-inline-start: rem(10); @include mq($max-width) { + block-size: 1px; border: 0; clip: rect(0 0 0 0); clip-path: inset(100%); - height: 1px; + inline-size: 1px; margin-inline-start: 0; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; - width: 1px; } } } @@ -182,15 +181,14 @@ li.top-nav-item + li.top-nav-item { @include mq($max-width) { flex-basis: auto; - padding-bottom: rem(10); - padding-top: rem(10); + padding-block: rem(10); } } .global-nav__inner .top-nav-item > *:first-child { @include mq($max-width) { + block-size: 100%; font-size: 1rem; - height: 100%; line-height: rem(27); padding: rem(10) rem(5) rem(7) !important; position: relative; @@ -198,13 +196,13 @@ li.top-nav-item + li.top-nav-item { &::before { background-color: $w3c-blue; - bottom: rem(-2); + block-size: rem(3); content:''; display: none; - height: rem(3); - left: 0; + inline-size: 100%; + inset-block-end: rem(-2); + inset-inline-start: 0; position: absolute; - width: 100%; } &:hover::before { @@ -230,8 +228,8 @@ li.top-nav-item + li.top-nav-item { #archive-nav ul, #category-nav ul { background-color: $white; + block-size: rem(180); border: solid 1px $border-color; - height: rem(180); overflow: auto; a { diff --git a/assets-src/styles/sass/50-core-components/_notes.scss b/assets-src/styles/sass/50-core-components/_notes.scss index 7aa842f5..bbfc1657 100644 --- a/assets-src/styles/sass/50-core-components/_notes.scss +++ b/assets-src/styles/sass/50-core-components/_notes.scss @@ -4,8 +4,8 @@ .note { border-width: 5px; - margin-bottom: rem(30); - max-width: rem(752); // Matches max width of main content region on two-column templates + // margin-block-end: rem(30); + max-inline-size: rem(752); // Matches max width of main content region on two-column templates } .note--error { diff --git a/assets-src/styles/sass/50-core-components/_pagination.scss b/assets-src/styles/sass/50-core-components/_pagination.scss index 4a0f6cba..0b2f6aca 100644 --- a/assets-src/styles/sass/50-core-components/_pagination.scss +++ b/assets-src/styles/sass/50-core-components/_pagination.scss @@ -2,23 +2,21 @@ #Pagination \*------------------------------------*/ -.pagination { - margin-top: rem(40); -} +// .pagination { +// margin-block-start: rem(40); +// } -.l-cluster.pagination > * { - margin-bottom: 0; - margin-top: 0; -} +// .l-cluster.pagination > * { +// margin-block: 0; +// } -.l-cluster.pagination > * > * { - margin-bottom: 0; - margin-top: 0; -} +// .l-cluster.pagination > * > * { +// margin-block: 0; +// } .pagination + * { - border-top: solid 1px $border-color; - margin-top: rem(33); + border-block-start: solid 1px $border-color; + // margin-block-start: rem(33); } .pagination__list { diff --git a/assets-src/styles/sass/50-core-components/_pre-footer.scss b/assets-src/styles/sass/50-core-components/_pre-footer.scss index f9b183c0..b1d79863 100644 --- a/assets-src/styles/sass/50-core-components/_pre-footer.scss +++ b/assets-src/styles/sass/50-core-components/_pre-footer.scss @@ -7,15 +7,15 @@ } .pre-footer.l-switcher > * > * { - margin-top: rem(40); - min-width: 33.333%; + inline-size: calc(920px * 920 - 100% * 920); + margin-block-start: rem(40); + min-inline-size: 33.333%; padding: rem(20); - width: calc(920px * 920 - 100% * 920); } -.pre-footer h2 + * { - margin-top: 1em; -} +// .pre-footer h2 + * { +// margin-block-start: 1em; +// } .pre-footer a { display: block; diff --git a/assets-src/styles/sass/50-core-components/_quotes.scss b/assets-src/styles/sass/50-core-components/_quotes.scss index 295a5a37..088d4db5 100644 --- a/assets-src/styles/sass/50-core-components/_quotes.scss +++ b/assets-src/styles/sass/50-core-components/_quotes.scss @@ -14,18 +14,11 @@ &::before { background-color: $w3c-blue; border-radius: rem(5); - left: rem(-10); - width: rem(10); + inline-size: rem(10); + inset-inline-start: rem(-10); } > * { - max-width: rem(630); - } -} - -[dir="rtl"] { - .component--quote::before { - left: auto; - right: rem(-10); + max-inline-size: rem(630); } } \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_rss.scss b/assets-src/styles/sass/50-core-components/_rss.scss index c4ab1110..8e200f64 100644 --- a/assets-src/styles/sass/50-core-components/_rss.scss +++ b/assets-src/styles/sass/50-core-components/_rss.scss @@ -3,10 +3,9 @@ \*------------------------------------*/ .rss { - margin-top: rem(40); + // margin-block-start: rem(40); a { - padding-bottom: rem(10); - padding-top: rem(10); + padding-block: rem(10); } } \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_search.scss b/assets-src/styles/sass/50-core-components/_search.scss index 6335a5b1..7c4afba7 100644 --- a/assets-src/styles/sass/50-core-components/_search.scss +++ b/assets-src/styles/sass/50-core-components/_search.scss @@ -3,7 +3,7 @@ \*------------------------------------*/ input[type=search] { - max-width: none; + max-inline-size: none; position: relative; z-index: 1; } @@ -25,11 +25,11 @@ input[type=search] { } .l-sidebar.search form .not-sidebar { - min-width: 70%; + min-inline-size: 70%; } .l-sidebar.search input[type="search"] { - max-width: none; + max-inline-size: none; } @supports (padding-inline-start: 1em) { diff --git a/assets-src/styles/sass/50-core-components/_slide.scss b/assets-src/styles/sass/50-core-components/_slide.scss index a83e7f7c..46c714e2 100644 --- a/assets-src/styles/sass/50-core-components/_slide.scss +++ b/assets-src/styles/sass/50-core-components/_slide.scss @@ -9,13 +9,13 @@ justify-content: space-between; } - > * + * { - margin-top: 1rem; - - @include mq($bp-tab-large) { - margin-top: 0; - } - } + // > * + * { + // margin-block-start: 1rem; + // + // @include mq($bp-tab-large) { + // margin-block-start: 0; + // } + // } } .slide__quote, @@ -31,7 +31,7 @@ font-weight: bold; line-height: calc(32 / 20); margin-inline-start: rem(35); - padding-top: rem(15); + padding-block-start: rem(15); position: relative; @include mq($bp-tab-small) { @@ -41,17 +41,17 @@ &::before { background-color: $w3c-blue; + block-size: 100%; border-radius: rem(5); content: ''; - height: 100%; - left: rem(-33); + inline-size: rem(4); + inset-block-start: 0; + inset-inline-start: rem(-33); position: absolute; - top: 0; - width: rem(4); } > * { - max-width: rem($text-measure); + max-inline-size: rem($text-measure); } } @@ -59,11 +59,6 @@ [dir="rtl"] { .slide__quote { background-position-x: 100%; - - &::before { - left: auto; - right: rem(-33); - } } } @@ -78,38 +73,38 @@ &.l-sidebar .not-sidebar { align-items: flex-start; - min-width: calc(70% - 1.5rem); + min-inline-size: calc(70% - 1.5rem); p:first-child { font-weight: bold; } - p:first-child + p { - margin-top: 0; - } + // p:first-child + p { + // margin-block-start: 0; + // } } } .slide__logo { background-color: $white; - height: rem(120); + block-size: rem(120); + inline-size: rem(180); padding: rem(24); position: relative; - width: rem(180); > img { - bottom: 0; - left: 0; + inset-block-end: 0; + inset-block-start: 0; + inset-inline-end: 0; + inset-inline-start: 0; margin: auto; - max-width: 100%; + max-inline-size: 100%; position: absolute; - right: 0; - top: 0; @supports (object-fit: contain) { - height: 100%; - max-width: none; + block-size: 100%; + max-inline-size: none; object-fit: contain; position: static; } diff --git a/assets-src/styles/sass/50-core-components/_slider.scss b/assets-src/styles/sass/50-core-components/_slider.scss index 380fd0c2..21b7dcc2 100644 --- a/assets-src/styles/sass/50-core-components/_slider.scss +++ b/assets-src/styles/sass/50-core-components/_slider.scss @@ -4,16 +4,15 @@ .component--slider { background-color: $mist-gray; - padding-bottom: rem(50); - padding-top: rem(50); + padding-block: rem(50); h2 { font-size: 1rem; font-weight: normal; - margin-bottom: rem(24); + // margin-block-end: rem(24); } - ul > li + li { - margin-top: 2rem; - } + // ul > li + li { + // margin-block-start: 2rem; + // } } \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_text.scss b/assets-src/styles/sass/50-core-components/_text.scss index 8817190f..df60cce2 100644 --- a/assets-src/styles/sass/50-core-components/_text.scss +++ b/assets-src/styles/sass/50-core-components/_text.scss @@ -3,13 +3,13 @@ \*------------------------------------*/ .component--text > * { - max-width: rem($text-measure); + max-inline-size: rem($text-measure); - + h2, - + h3, - + h4, - + h5, - + h6 { - margin-top: 2em; - } + // + h2, + // + h3, + // + h4, + // + h5, + // + h6 { + // margin-block-start: 2em; + // } } \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_toc.scss b/assets-src/styles/sass/50-core-components/_toc.scss index 9be5eb22..160e68d8 100644 --- a/assets-src/styles/sass/50-core-components/_toc.scss +++ b/assets-src/styles/sass/50-core-components/_toc.scss @@ -2,13 +2,13 @@ #Table of contents (TOC) \*------------------------------------*/ -.toc + * { - margin-block-start: rem(30); - - @include mq($max-width) { - margin-block-start: rem(80); - } -} +// .toc + * { +// margin-block-start: rem(30); +// +// @include mq($max-width) { +// margin-block-start: rem(80); +// } +// } .toc h2 { font-size: 1rem; diff --git a/assets-src/styles/sass/50-core-components/_translations.scss b/assets-src/styles/sass/50-core-components/_translations.scss index f1381993..db06d240 100644 --- a/assets-src/styles/sass/50-core-components/_translations.scss +++ b/assets-src/styles/sass/50-core-components/_translations.scss @@ -9,13 +9,11 @@ .translations .l-sidebar > * { align-items: center; - margin-bottom: 0; - margin-top: 0; + // margin-block: 0; } .translations .l-sidebar > * > * { - margin-bottom: 0; - margin-top: 0; + // margin-block: 0; } .translations .l-sidebar .sidebar { @@ -23,7 +21,7 @@ } .translations .l-sidebar .not-sidebar { - min-width: 70%; + min-inline-size: 70%; } .translations.l-cluster { @@ -36,9 +34,9 @@ } } -.translations + * { - margin-top: rem(30); -} +// .translations + * { +// margin-block-start: rem(30); +// } /* * For the TR card, the language subheading is h5 for Family view and h3 for Search results view @@ -49,31 +47,29 @@ .translations .sidebar span { font-size: 1rem; font-weight: normal; - padding-bottom: rem(10); - padding-top: rem(10); + padding-block: rem(10); } .translations a { display: block; - padding-bottom: rem(10); - padding-top: rem(10); + padding-block: rem(10); } .landing .translations, .ecosystem .translations { padding: 0; - margin-top: 0; + // margin-block-start: 0; .sidebar span { padding-inline-end: 1em; } .l-sidebar .not-sidebar { - min-width: 70%; - padding-bottom: 0; + min-inline-size: 70%; + padding-block-end: 0; } - + * { - margin-top: 2em; - } + // + * { + // margin-block-start: 2em; + // } } diff --git a/assets-src/styles/sass/50-core-components/_video.scss b/assets-src/styles/sass/50-core-components/_video.scss index 77538ac0..0dad3037 100644 --- a/assets-src/styles/sass/50-core-components/_video.scss +++ b/assets-src/styles/sass/50-core-components/_video.scss @@ -3,22 +3,17 @@ \*------------------------------------*/ .component--video { - iframe { - border: 0; - } - figcaption { @include txt-pluto; > * { - max-width: rem(540); + max-inline-size: rem(540); } > a { display: inline-block; - margin: 0; - padding-bottom: rem(10); - padding-top: rem(10); + // margin: 0; + padding-block: rem(10); } } } \ No newline at end of file diff --git a/assets-src/styles/sass/50-core-components/_you-may-also-like.scss b/assets-src/styles/sass/50-core-components/_you-may-also-like.scss index 5fe27cf2..87f0cfc2 100644 --- a/assets-src/styles/sass/50-core-components/_you-may-also-like.scss +++ b/assets-src/styles/sass/50-core-components/_you-may-also-like.scss @@ -5,8 +5,7 @@ .crosslinks { background-color: $w3c-blue; color: $white; - padding-bottom: rem(50); - padding-top: rem(50); + padding-block: rem(50); } .crosslinks .component--columns__intro h2 { @@ -36,16 +35,16 @@ > li { @include mq(700) { flex: 1 0 50%; - max-width: 50%; + max-inline-size: 50%; padding: 1.5%; } } - li + li { - @include mq(700) { - margin-top: 0; - } - } + // li + li { + // @include mq(700) { + // margin-block-start: 0; + // } + // } } .crosslinks .component--columns--images { From f8ecdd52eaa4ff00bb938f39eefb58fec848cdc5 Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Mon, 4 Aug 2025 15:59:11 +0100 Subject: [PATCH 04/28] Reset of global spacing for 'advanced-component' Sass partials --- .../sass/60-advanced-components/_cards.scss | 10 +- .../60-advanced-components/_collapsibles.scss | 6 +- .../sass/60-advanced-components/_header.scss | 48 +++----- .../60-advanced-components/_multiselect.scss | 40 +++---- .../60-advanced-components/_navigation.scss | 108 +++++++----------- .../sass/60-advanced-components/_slider.scss | 9 +- .../sass/60-advanced-components/_tr-meta.scss | 4 +- 7 files changed, 94 insertions(+), 131 deletions(-) diff --git a/assets-src/styles/sass/60-advanced-components/_cards.scss b/assets-src/styles/sass/60-advanced-components/_cards.scss index 341ba9b0..46af72c6 100644 --- a/assets-src/styles/sass/60-advanced-components/_cards.scss +++ b/assets-src/styles/sass/60-advanced-components/_cards.scss @@ -15,12 +15,12 @@ Minimum spacing between the penultimate and last child elements. Matches the measure used for the stack mixin on `.card__text` */ - > :nth-last-child(2) { - margin-bottom: 1rem; - } + // > :nth-last-child(2) { + // margin-block-end: 1rem; + // } > :last-child { - margin-bottom: 0; - margin-top: auto; + margin-block-end: 0; + margin-block-start: auto; } } \ No newline at end of file diff --git a/assets-src/styles/sass/60-advanced-components/_collapsibles.scss b/assets-src/styles/sass/60-advanced-components/_collapsibles.scss index 07acd050..7b7f2204 100644 --- a/assets-src/styles/sass/60-advanced-components/_collapsibles.scss +++ b/assets-src/styles/sass/60-advanced-components/_collapsibles.scss @@ -12,19 +12,19 @@ flex-wrap: wrap; font-size: rem(18); font-weight: bold; + inline-size: 100%; line-height: calc(27 / 18); justify-content: space-between; - margin-top: 0; + // margin-block-start: 0; padding: rem(3); - width: 100%; > span { font-size: rem(15); font-weight: normal; + inline-size: 100%; line-height: calc(22.5 / 15); color: #333; order: 2; - width: 100%; } // Decorative chevron diff --git a/assets-src/styles/sass/60-advanced-components/_header.scss b/assets-src/styles/sass/60-advanced-components/_header.scss index c546e8e7..ce676cff 100755 --- a/assets-src/styles/sass/60-advanced-components/_header.scss +++ b/assets-src/styles/sass/60-advanced-components/_header.scss @@ -4,31 +4,31 @@ [data-trigger="account-menu"] { border-radius: 0; - margin-left: auto; + margin-inline-start: auto; padding: rem(7); position: relative; &::before { background-color: $w3c-blue; + block-size: rem(3); bottom: rem(-2); content:''; display: none; - height: rem(3); - left: 0; + inline-size: 100%; + inset-inline-start: 0; position: absolute; - width: 100%; } &.js-has-msg::after { background-color: $red; + block-size: 15px; border: solid 3px $white; border-radius: 50%; content: ''; - height: 15px; + inline-size: 15px; + inset-block-start: 3px; + inset-inline-end: 3px; position: absolute; - right: 3px; - top: 3px; - width: 15px; } @include mq($max-width) { @@ -82,40 +82,27 @@ } } -[dir="rtl"] { - [data-trigger="account-menu"] { - margin-left: 0; - margin-right: auto; - - &.js-has-msg::after { - left: 3px; - right: auto; - } - } -} - .account-menu { background-color: $white; border: solid 1px $border-color; box-shadow: 0 8px 16px 0 rgba(55,70,95,0.07); + inline-size: rem(250); + inset-block-start: 100%; + max-inline-size: calc(100% - 10vw); position: absolute; - right: 5vw; - top: 100%; - max-width: calc(100% - 10vw); - min-width: rem(250); + right: 5vw; z-index: 10; } [dir="rtl"] { .account-menu { left: 5vw; - right: auto; + right: auto; } } .account-menu ul { - padding-bottom: rem(10); - padding-top: rem(10); + padding-block: rem(10); li { padding: rem(10) rem(20); @@ -127,15 +114,14 @@ } .account-menu li:nth-child(3) { - padding-top: 0; + padding-block-start: 0; } .account-menu li:last-of-type { - padding-bottom: 0; + padding-block-end: 0; } .account-menu a { display: block; - padding-bottom: rem(10); - padding-top: rem(10); + padding-block: rem(10); } \ No newline at end of file diff --git a/assets-src/styles/sass/60-advanced-components/_multiselect.scss b/assets-src/styles/sass/60-advanced-components/_multiselect.scss index 9fcb014e..e7b43fb3 100644 --- a/assets-src/styles/sass/60-advanced-components/_multiselect.scss +++ b/assets-src/styles/sass/60-advanced-components/_multiselect.scss @@ -10,12 +10,12 @@ .combo-menu { background-color: #f5f5f5; display: none; - left: 0; - max-height: rem(300); + inline-size: 100%; + inset-block-start: 100%; + inset-inline-start: 0; + max-block-size: rem(300); overflow-y: scroll; position: absolute; - top: 100%; - width: 100%; z-index: 100; } @@ -38,33 +38,33 @@ } .combo-option.option-selected { - padding-right: rem(30); + padding-inline-end: rem(30); position: relative; } .combo-option.option-selected::after { - border-bottom: 2px solid $black; - border-right: 2px solid $black; + block-size: rem(16); + border-block-end: 2px solid $black; + border-inline-end: 2px solid $black; content: ''; - height: rem(16); + inline-size: rem(8); + inset-block-start: 50%; + inset-inline-end: rem(15); position: absolute; - right: rem(15); - top: 50%; transform: translate(0, -50%) rotate(45deg); - width: rem(8); } .selected-options { list-style-type: none; margin: 0; - max-width: rem(400); + max-inloine-size: rem(400); padding: 0; } .selected-options { li { display: inline-block; - margin-bottom: rem(5); + margin-block-end: rem(5); } } @@ -75,8 +75,8 @@ color: #fff; font-size: 0.75em; font-weight: bold; - margin-bottom: rem(6); - margin-right: rem(6); + margin-block-end: rem(6); + margin-inline-end: rem(6); padding: 0.25em 1.75em 0.25em 0.25em; position: relative; } @@ -89,13 +89,13 @@ .remove-option::before, .remove-option::after { - border-right: 2px solid #fff; + border-inline-end: 2px solid #fff; content: ""; - height: 1em; - right: 0.75em; + block-size: 1em; + inline-size: 0; + inset-block-start: 50%; + inset-inline-end: 0.75em; position: absolute; - top: 50%; - width: 0; } .remove-option::before { diff --git a/assets-src/styles/sass/60-advanced-components/_navigation.scss b/assets-src/styles/sass/60-advanced-components/_navigation.scss index d00d66d0..bb8b0003 100644 --- a/assets-src/styles/sass/60-advanced-components/_navigation.scss +++ b/assets-src/styles/sass/60-advanced-components/_navigation.scss @@ -11,10 +11,9 @@ } .global-nav__inner > ul { - border-bottom: none; + border-block-end: none; box-shadow: none; - padding-left: 0; - padding-right: 0; + padding-inline: 0; position: static; } } @@ -55,25 +54,11 @@ } [data-trigger='mobile-nav'] { - margin-left: auto; -} - -[dir='rtl'] { - [data-trigger='mobile-nav'] { - margin-left: 0; - margin-right: auto; - } + margin-inline-start: auto; } [data-trigger='account-menu'] ~ [data-trigger='mobile-nav'] { - margin-left: rem(10); -} - -[dir='rtl'] { - [data-trigger='account-menu'] ~ [data-trigger='mobile-nav'] { - margin-left: 0; - margin-right: rem(10); - } + margin-inline-start: rem(10); } #global-nav { @@ -82,27 +67,25 @@ } .global-nav__inner > ul { - border-bottom: solid 1px $border-color; + border-block-end: solid 1px $border-color; box-shadow: 0 8px 16px -5px rgba(55,70,95,0.07); display: flex; flex-basis: 100%; flex-wrap: wrap; - left: 0; - padding-bottom: rem(45); - padding-left: 5vw; - padding-right: 5vw; + inline-size: 100%; + inset-block-start: 100%; + inset-inline-start: 0; + padding-block-end: rem(45); + padding-inline: 5vw; position: absolute; - top: 100%; - width: 100%; @include mq($max-width) { border: none; box-shadow: none; flex-basis: auto; flex-wrap: nowrap; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; + padding-block-end: 0; + padding-inline: 0; position: static; } } @@ -124,11 +107,11 @@ color: $off-black; display: flex; font-size: 1rem; + inline-size: 100%; line-height: inherit; outline: solid 1px transparent; outline-offset: -1px; padding: rem(12) 0; - width: 100%; @include mq($max-width) { display: inline-flex; @@ -178,24 +161,24 @@ .global-nav__inner .nav__submenu { background-color: $white; - border-bottom: solid 1px $border-color; + border-block-end: solid 1px $border-color; box-shadow: 0 8px 16px -5px rgba(55,70,95,0.07); display: block; - left: 0; - min-height: calc(100% + 1px); - padding-bottom: rem(45); + inline-size: 100vw; + inset-block-start: 0; + inset-inline-start: 0; + min-block-size: calc(100% + 1px); + padding-block-end: rem(45); position: absolute; - top: 0; - width: 100vw; z-index: 5; @include mq($max-width) { - border-bottom: solid 1px $border-color; - border-top: solid 1px $border-color; - left: 50%; - min-height: auto; + border-block-end: solid 1px $border-color; + border-block-start: solid 1px $border-color; + inset-block-start: 100%; + inset-inline-start: 50%; + min-block-size: auto; padding: rem(50) rem(20); - top: 100%; transform: translateX(-50%); } } @@ -209,22 +192,21 @@ .global-nav__inner .nav__submenu__intro { @include mq($max-width) { - width: 30%; + inline-size: 30%; } > h2 { @include txt-jupiter; color: $off-black; font-weight: $emphasis; - margin-top: rem(25); - padding-bottom: rem(6); - padding-top: rem(6); + margin-block-start: rem(25); + padding-block: rem(6); @include mq($max-width) { font-size: rem(34); line-height: calc(43 / 34); - margin-bottom: rem(25); - margin-top: 0; + margin-block-end: rem(25); + margin-block-start: 0; } } } @@ -243,15 +225,15 @@ > a { color: $link-color; display: inline-block; - margin-bottom: 1rem; - margin-top: 0; - padding-bottom: rem(9); - padding-top: 0; + margin-block-end: 1rem; + margin-block-start: 0; + padding-block-end: rem(9); + padding-block-start: 0; @include mq($max-width) { - margin-bottom: 0; - margin-top: 1rem; - padding-top: rem(9); + margin-block-end: 0; + margin-block-start: 1rem; + padding-block-start: rem(9); } &:hover { @@ -267,7 +249,7 @@ .global-nav__inner [data-button='mobile-back'] { @include txt-jupiter; align-items: center; - border-bottom: solid 1px $border-color; + border-block-start: solid 1px $border-color; border-radius: 0; display: flex; padding: rem(12) 5vw; @@ -306,15 +288,12 @@ } .global-nav__inner .nav__submenu li { - border-bottom: solid 1px $border-color; - padding-bottom: rem(3); - padding-top: rem(3); + border-block-end: solid 1px $border-color; + padding-block: rem(3); @include mq($max-width) { - border-bottom: 0; - padding-bottom: 0; - padding-top: 0; - + border-block-end: 0; + padding-block: 0; } } @@ -323,15 +302,14 @@ display: block; font-size: rem(19); line-height: calc(27 / 18); - padding-bottom: rem(8); - padding-top: rem(8); + padding-block: rem(8); text-decoration: none; @include mq($max-width) { align-items: flex-start; display: inline-flex; + inline-size: auto; padding-inline: rem(2); - width: auto; // Decorative chevron &::before { diff --git a/assets-src/styles/sass/60-advanced-components/_slider.scss b/assets-src/styles/sass/60-advanced-components/_slider.scss index cfb49559..1dd0c8d5 100644 --- a/assets-src/styles/sass/60-advanced-components/_slider.scss +++ b/assets-src/styles/sass/60-advanced-components/_slider.scss @@ -17,8 +17,7 @@ .js-slider > ul { display: flex; - padding-bottom: rem(10); - padding-top: rem(10); + padding-block: rem(10); position: relative; > li { @@ -33,9 +32,9 @@ visibility: hidden; } - > li + li { - margin-top: 0; - } + // > li + li { + // margin-block-start: 0; + // } } } diff --git a/assets-src/styles/sass/60-advanced-components/_tr-meta.scss b/assets-src/styles/sass/60-advanced-components/_tr-meta.scss index a7e02075..abb5b262 100644 --- a/assets-src/styles/sass/60-advanced-components/_tr-meta.scss +++ b/assets-src/styles/sass/60-advanced-components/_tr-meta.scss @@ -3,12 +3,12 @@ \*------------------------------------*/ .tr-list { - padding-top: 0; + padding-block-start: 0; } // if you put links in this list, you'll need to use .tag-list (links needs more space around them for a11y) .tr-meta.tr-meta { - margin-top: 0.5rem; + margin-block-start: 0.5rem; } .tr-meta li { From 230b9ee48eb2e34aaf02fa29c88246f73a17a988 Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Mon, 4 Aug 2025 16:07:04 +0100 Subject: [PATCH 05/28] Use logical properties for accessible autocomplete styles --- .../_accessible-autocomplete.scss | 48 +++++++------------ 1 file changed, 17 insertions(+), 31 deletions(-) diff --git a/assets-src/styles/sass/70-third-party-plugins/_accessible-autocomplete.scss b/assets-src/styles/sass/70-third-party-plugins/_accessible-autocomplete.scss index 5f5f4528..6dbe06ce 100644 --- a/assets-src/styles/sass/70-third-party-plugins/_accessible-autocomplete.scss +++ b/assets-src/styles/sass/70-third-party-plugins/_accessible-autocomplete.scss @@ -13,7 +13,7 @@ appearance: none; border: 2px solid; border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */ - margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */ + margin-block-end: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */ width: 100%; } @@ -39,46 +39,32 @@ } .autocomplete__input--show-all-values { - padding: 5px 34px 5px 5px; /* Space for arrow. Other padding should match .autocomplete__input--default. */ + padding: 5px; + padding-inline-end: 34px; /* Space for arrow. Other padding should match .autocomplete__input--default. */ cursor: pointer; } -[dir="rtl"] { - .autocomplete__input--show-all-values { - padding-left: 34px; - padding-right: 5px; - } -} - .autocomplete__dropdown-arrow-down { + block-size: 24px; display: inline-block; + inline-size: 24px; position: absolute; - right: 8px; - width: 24px; - height: 24px; - top: 12px; + inset-block-start: 12px; + inset-inline-end: 8px; pointer-events: none; // To account for removal of negative z-index - //z-index: -1; -} - -[dir="rtl"] { - .autocomplete__dropdown-arrow-down { - right: auto; - left: 8px; - } } .autocomplete__menu { background-color: #fff; border: 2px solid; - border-top: 0; + border-block-start: 0; color: $off-black; + inline-size: 100%; + inline-size: calc(100% - 4px); margin: 0; - max-height: 342px; + max-block-size: 342px; overflow-x: hidden; padding: 0; - width: 100%; - width: calc(100% - 4px); } .autocomplete__menu--visible { @@ -90,10 +76,10 @@ } .autocomplete__menu--overlay { - box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px; - left: 0; + box-shadow: rgba(0, 0, 0, 0.256863) 0 2px 6px; + inset-block-start: 100%; + inset-inline-start: 0; position: absolute; - top: 100%; z-index: 100; } @@ -102,7 +88,7 @@ } .autocomplete__option { - border-bottom: solid $twiki-gray; + border-block-end: solid $twiki-gray; border-width: 1px 0; cursor: pointer; display: block; @@ -114,11 +100,11 @@ } .autocomplete__option:first-of-type { - border-top-width: 0; + border-block-start-width: 0; } .autocomplete__option:last-of-type { - border-bottom-width: 0; + border-block-end-width: 0; } .autocomplete__option--odd { From d103d4a427a241ddb0d288adf0d9fdd10493c343 Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Mon, 4 Aug 2025 16:26:14 +0100 Subject: [PATCH 06/28] Reset of global spacing for 'template' Sass partials --- .../sass/50-core-components/_cards.scss | 2 +- .../styles/sass/80-templates/_default.scss | 22 ++-- .../styles/sass/80-templates/_event.scss | 35 +++--- .../styles/sass/80-templates/_home.scss | 9 +- .../styles/sass/80-templates/_landing.scss | 9 +- .../styles/sass/80-templates/_listing.scss | 89 ++++++++------- .../styles/sass/80-templates/_post.scss | 103 ++++++++---------- .../styles/sass/80-templates/_profile.scss | 16 ++- .../sass/80-templates/_technical-reports.scss | 4 +- 9 files changed, 129 insertions(+), 160 deletions(-) diff --git a/assets-src/styles/sass/50-core-components/_cards.scss b/assets-src/styles/sass/50-core-components/_cards.scss index 095ee341..8b1acede 100644 --- a/assets-src/styles/sass/50-core-components/_cards.scss +++ b/assets-src/styles/sass/50-core-components/_cards.scss @@ -98,7 +98,7 @@ } .not-sidebar > div { - max-inkine-size: rem($text-measure); + max-inline-size: rem($text-measure); // > * + * { // margin-block-start: rem(20); diff --git a/assets-src/styles/sass/80-templates/_default.scss b/assets-src/styles/sass/80-templates/_default.scss index e920cf8f..e9b7f455 100644 --- a/assets-src/styles/sass/80-templates/_default.scss +++ b/assets-src/styles/sass/80-templates/_default.scss @@ -3,12 +3,12 @@ \*------------------------------------*/ .default .content { - max-width: rem(752); + max-inline-size: rem(752); } @supports(grid-column-gap: 8%) { .default .content { - max-width: none; + max-inline-size: none; @include mq($bp-tab-large) { display: grid; @@ -32,9 +32,9 @@ } .default .related { - border-top: solid 10px $w3c-blue; - margin-top: rem(40); - padding-top: rem(20); + border-block-start: solid 10px $w3c-blue; + // margin-block-start: rem(40); + padding-block-start: rem(20); } .related [aria-current] { @@ -44,22 +44,20 @@ @supports(grid-column-gap: 8%) { .default .related { - @include mq($bp-tab-large) { - margin-top: 0; - } + // @include mq($bp-tab-large) { + // margin-block-start: 0; + // } } } .default .related__inner { @include mq($bp-tab-large) { border-inline-start: solid 1px $border-color; - padding-left: rem(20); - padding-right: rem(20); + padding-inline: rem(20); } } .default .related__inner ul a { display: inline-block; - padding-bottom: rem(10); - padding-top: rem(10); + padding-block: rem(10); } \ No newline at end of file diff --git a/assets-src/styles/sass/80-templates/_event.scss b/assets-src/styles/sass/80-templates/_event.scss index 4cc112cb..9bc652bb 100644 --- a/assets-src/styles/sass/80-templates/_event.scss +++ b/assets-src/styles/sass/80-templates/_event.scss @@ -3,24 +3,24 @@ \*------------------------------------*/ .event .content { - max-width: rem(752); + max-inline-size: rem(752); } .event .intro { display: flex; flex-direction: column; - margin-bottom: rem(20); + margin-block-end: rem(20); margin-inline-start: rem(30); position: relative; &::before { + block-size: 100%; border-radius: rem(5); content: ''; - height: 100%; - left: rem(-28); + inline-size: rem(5); + inset-block-start: 0; + inset-inline-start: rem(-28); position: absolute; - top: 0; - width: rem(5); } &.conference::before { @@ -39,25 +39,18 @@ background-color: $red; } - h1 { - margin-bottom: 0; - } + // h1 { + // margin-block-end: 0; + // } h1 + * { @include txt-mars; - margin-bottom: rem(10); + // margin-block-end: rem(10); order: -1; } } -[dir="rtl"] { - .event .intro::before { - left: auto; - right: rem(-28); - } -} - -.event .lead, -.event .calendar-link { - margin-bottom: rem(20); -} \ No newline at end of file +// .event .lead, +// .event .calendar-link { +// margin-block-end: rem(20); +// } \ No newline at end of file diff --git a/assets-src/styles/sass/80-templates/_home.scss b/assets-src/styles/sass/80-templates/_home.scss index e56d6c11..236ced28 100644 --- a/assets-src/styles/sass/80-templates/_home.scss +++ b/assets-src/styles/sass/80-templates/_home.scss @@ -8,11 +8,10 @@ } .component--members { - padding-bottom: rem(40); - padding-top: rem(40); + padding-block: rem(40); } - .component--members__grid { - margin-top: rem(40); - } + // .component--members__grid { + // margin-block-start: rem(40); + // } } \ No newline at end of file diff --git a/assets-src/styles/sass/80-templates/_landing.scss b/assets-src/styles/sass/80-templates/_landing.scss index 4844ee14..6bef57a3 100644 --- a/assets-src/styles/sass/80-templates/_landing.scss +++ b/assets-src/styles/sass/80-templates/_landing.scss @@ -10,19 +10,18 @@ main, #main { - padding-top: 0; + padding-block-start: 0; } .component--text, .component--image, .component--video, .component--quote { - margin-left: auto; - margin-right: auto; - max-width: rem(711); + margin-inline: auto; + max-inline-size: rem(711); } .component--quote { - max-width: rem(691); + max-inline-size: rem(691); } } \ No newline at end of file diff --git a/assets-src/styles/sass/80-templates/_listing.scss b/assets-src/styles/sass/80-templates/_listing.scss index 0054b6a7..da6e0884 100644 --- a/assets-src/styles/sass/80-templates/_listing.scss +++ b/assets-src/styles/sass/80-templates/_listing.scss @@ -13,14 +13,14 @@ main, #main { - padding-top: 0; + padding-block-start: 0; } } .people-list, .post-list { > * + * { - border-top: solid 1px $border-color; + border-block-start: solid 1px $border-color; } } @@ -38,12 +38,12 @@ .post-list { > * { - padding-bottom: rem(30); - padding-top: rem(40); + padding-block-end: rem(30); + padding-block-start: rem(40); } > li:last-child { - border-bottom: solid 1px $border-color; + border-block-end: solid 1px $border-color; } .l-sidebar .sidebar { @@ -51,24 +51,24 @@ } .l-sidebar .not-sidebar { - min-width: calc(70% - 1.5rem); + min-inline-size: calc(70% - 1.5rem); } .l-sidebar .not-sidebar > div { - max-width: rem($text-measure); + max-inline-size: rem($text-measure); - @include mq($bp-tab-large) { - margin-bottom: rem(40); - } + // @include mq($bp-tab-large) { + // margin-block-end: rem(40); + // } - > * + * { - margin-top: rem(20); - } + // > * + * { + // margin-block-start: rem(20); + // } } .l-sidebar .sidebar .l-frame { - height: rem(146); - width: rem(200); + block-size: rem(146); + inline-size: rem(200); img { border-radius: rem(4); @@ -88,8 +88,8 @@ color: $black; .icon { - height: 0.8em; - width: 0.8em; + block-size: 0.8em; + inline-size: 0.8em; } } } @@ -98,11 +98,11 @@ .member-list, .group-list, .tr-stats-list { - margin-top: rem(40); + // margin-block-start: rem(40); - > * + * { - margin-top: 1rem; - } + // > * + * { + // margin-block-start: 1rem; + // } .card { padding: 1rem; @@ -113,17 +113,17 @@ } .card.l-sidebar .not-sidebar { - min-width: calc(70% - 1.5rem); + min-inline-size: calc(70% - 1.5rem); } - .card__text { - padding-top: 0; - } + // .card__text { + // padding-block-start: 0; + // } } .event-list { .card .l-cluster { - margin-top: 1rem; + // margin-block-start: 1rem; } .card .l-cluster > * { @@ -136,17 +136,17 @@ } .card.l-sidebar .l-sidebar .not-sidebar { - min-width: calc(55% - 1.5rem); + min-inline-size: calc(55% - 1.5rem); } .card__image { align-self: flex-start; - height: rem(100); - width: rem(100); + block-size: rem(100); + inline-size: rem(100); @include mq($bp-tab-large) { - height: rem(200); - width: rem(200); + block-size: rem(200); + inline-size: rem(200); } } @@ -158,17 +158,17 @@ @include txt-pluto; display: flex; flex-wrap: nowrap; - max-width: rem(300); + max-inline-size: rem(300); } .date-location img { + inline-size: rem(18); margin-inline-end: rem(12); - width: rem(18); } .date-location .date-orig { display: inline-block; - padding-bottom: rem(10); + padding-block-end: rem(10); } .date-location > div:last-child { @@ -179,26 +179,25 @@ .member-list { .card__text > * { - max-width: rem($text-measure); + max-inline-size: rem($text-measure); } .logo--member { - margin-left: auto; - margin-right: auto; + margin-inline: auto; } } .js .member-list { [data-component="card"] .card__text > :last-child { - margin-bottom: rem(40); - margin-top: 0; + margin-block-end: rem(40); + margin-block-start: 0; } } -.group-list { - margin-top: 0; -} +// .group-list { +// margin-block-start: 0; +// } -.archive-links h2 + * { - margin-top: 0.8em; -} \ No newline at end of file +// .archive-links h2 + * { +// margin-block-start: 0.8em; +// } \ No newline at end of file diff --git a/assets-src/styles/sass/80-templates/_post.scss b/assets-src/styles/sass/80-templates/_post.scss index 2c5469d7..b2770e51 100644 --- a/assets-src/styles/sass/80-templates/_post.scss +++ b/assets-src/styles/sass/80-templates/_post.scss @@ -4,12 +4,12 @@ .post .content, .post .rss { - max-width: rem(752); + max-inline-size: rem(752); } @supports(grid-column-gap: 8%) { .post .content { - max-width: none; + max-inline-size: none; @include mq($bp-tab-large) { display: grid; @@ -32,17 +32,17 @@ } } -.post .related { - margin-top: rem(40); -} +// .post .related { +// margin-block-start: rem(40); +// } -@supports(grid-column-gap: 8%) { - .post .content .related { - @include mq($bp-tab-large) { - margin-top: 0; - } - } -} +// @supports(grid-column-gap: 8%) { +// .post .content .related { +// @include mq($bp-tab-large) { +// margin-block-start: 0; +// } +// } +// } .post .related__inner { background-color: $mist-gray; @@ -67,30 +67,30 @@ } } -.post .related__inner > div, -.post .related__inner h3 + * { - margin-top: rem(18); -} +// .post .related__inner > div, +// .post .related__inner h3 + * { +// margin-block-start: rem(18); +// } .post .related__inner > div + div { - border-top: solid 1px $border-color; - margin-top: rem(24); - padding-top: rem(15); + border-block-start: solid 1px $border-color; + // margin-block-start: rem(24); + padding-block-start: rem(15); } .post .related__inner li { @include txt-pluto; - + li { - margin-top: rem(22); - } + // + li { + // margin-block-start: rem(22); + // } } .post { .sub-head { @include txt-pluto; - margin-bottom: rem(30); - margin-top: rem(-20); + margin-block-end: rem(30); + margin-block-start: rem(-20); } .meta { @@ -100,25 +100,25 @@ .meta dl { dd:first-of-type { @include mq($bp-tab-small) { - padding-right: rem(150); + padding-inline-end: rem(150); } } - dd, dt { - margin: 0; - padding-bottom: rem(8); - padding-top: rem(5); - } + // dd, dt { + // margin: 0; + // padding-block-end: rem(8); + // padding-block-start: rem(5); + // } - dt:first-of-type, - dd:first-of-type { - padding-top: rem(8); - } + // dt:first-of-type, + // dd:first-of-type { + // padding-block-start: rem(8); + // } dt { float: left; font-weight: normal; - margin-right: 1em; + margin-inline-end: 1em; } } @@ -126,8 +126,7 @@ .skip-to-comment-form { color: $storm-gray; display: inline-block; - padding-bottom: rem(11); - padding-top: rem(11); + padding-block: rem(11); text-decoration: underline; &:visited { @@ -145,45 +144,29 @@ .skip-to-comments { @include mq($bp-tab-small) { position: absolute; - right: 0; - top: rem(19); + inset-block-start: rem(19); + inset-inline-end: 0; } } .rss { - border-top: solid 1px $border-color; - padding-top:rem(40); + border-block-start: solid 1px $border-color; + padding-block-start: rem(40); } } [dir="rtl"] { .post .meta dl { - dd:first-of-type { - @include mq($bp-tab-small) { - padding-left: rem(150); - padding-right: 0; - } - } - dt { float: right; - margin-left: 1em; - margin-right: 0; - } - } - - .post .skip-to-comments { - @include mq($bp-tab-small) { - left: 0; - right: auto; } } } .post__notes { - border-top: solid 1px $border-color; - margin-top: rem(60); - padding-top: rem(20); + border-block-start: solid 1px $border-color; + margin-block-start: rem(60); + padding-block-start: rem(20); h3 { @extend .txt-saturn; diff --git a/assets-src/styles/sass/80-templates/_profile.scss b/assets-src/styles/sass/80-templates/_profile.scss index 9a6d3196..caca8b90 100644 --- a/assets-src/styles/sass/80-templates/_profile.scss +++ b/assets-src/styles/sass/80-templates/_profile.scss @@ -3,12 +3,12 @@ \*------------------------------------*/ .profile .content { - max-width: rem(752); + max-inline-size: rem(752); } @supports(grid-column-gap: 8%) { .profile .content { - max-width: none; + max-inline-size: none; @include mq($bp-tab-large) { display: grid; @@ -41,13 +41,12 @@ } .profile .profile-nav__inner { - margin-bottom: rem(33); + margin-block-end: rem(33); @include mq($bp-tab-large) { border-inline-start: solid 1px $border-color; - margin-bottom: 0; - padding-left: rem(20); - padding-right: rem(20); + margin-block-end: 0; + padding-inline: rem(20); } [aria-current] { @@ -61,14 +60,13 @@ } &[aria-expanded="false"] { - margin-bottom: rem(33); + margin-block-end: rem(33); } } #profile-nav a { display: inline-block; - padding-bottom: rem(10); - padding-top: rem(10); + padding-block: rem(10); &[aria-current] { color: $off-black; diff --git a/assets-src/styles/sass/80-templates/_technical-reports.scss b/assets-src/styles/sass/80-templates/_technical-reports.scss index 16916a0c..a579e3b5 100644 --- a/assets-src/styles/sass/80-templates/_technical-reports.scss +++ b/assets-src/styles/sass/80-templates/_technical-reports.scss @@ -18,7 +18,7 @@ } .field { - max-width: none; + max-inline-size: none; } .field-hint { @@ -47,7 +47,7 @@ padding-block-start: rem(20); > * { - max-width: rem(820); + max-inline-size: rem(820); } } From 5085b56d8290ab2a78669f2b81faa330cd0250a1 Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Mon, 4 Aug 2025 16:37:09 +0100 Subject: [PATCH 07/28] Use logical properties for utilities styles --- .../styles/sass/90-utilities/_alignments.scss | 24 +++++++------------ .../styles/sass/90-utilities/_layout.scss | 13 ++++------ .../styles/sass/90-utilities/_margins.scss | 2 +- 3 files changed, 14 insertions(+), 25 deletions(-) diff --git a/assets-src/styles/sass/90-utilities/_alignments.scss b/assets-src/styles/sass/90-utilities/_alignments.scss index 91342cff..2e504b49 100755 --- a/assets-src/styles/sass/90-utilities/_alignments.scss +++ b/assets-src/styles/sass/90-utilities/_alignments.scss @@ -1,17 +1,13 @@ /*------------------------------------*\ #Alignment utilities - - 1. Logical property allows text-direction to change with `ltr` \*------------------------------------*/ .u-float-left { - float: left; // IE fallback for next rule - only works for ltr languages - float: inline-start; /* 1 */ + float: left; } .u-float-right { - float: right; // IE fallback for next rule - only works for ltr languages - float: inline-end; /* 1 */ + float: right; } .u-text-center { @@ -19,13 +15,11 @@ } .u-text-left { - text-align: left; // IE fallback for next rule - only works for ltr languages - text-align: start; /* 1 */ + text-align: start; } .u-text-right { - text-align: right; // IE fallback for next rule - only works for ltr languages - text-align: end; /* 1 */ + text-align: end; } .u-text-vertical-lr { @@ -38,13 +32,13 @@ .u-block-left { float: left; - margin-bottom: 1em; + margin-block-end: 1em; margin-right: 1em; } .u-block-right { float: right; - margin-bottom: 1em; + margin-block-end: 1em; margin-left: 1em; } @@ -56,8 +50,7 @@ as defined in /10-settings/breakpoints */ .u-text-left-from-lap { @include mq($bp-lap) { - text-align: left; // IE fallback for next rule - only works for ltr languages - text-align: start; /* 1 */ + text-align: start; } } @@ -71,7 +64,6 @@ as defined in /10-settings/breakpoints .u-text-right-from-lap { @include mq($bp-lap) { - text-align: right; // IE fallback for next rule - only works for ltr languages - text-align: end; /* 1 */ + text-align: end; } } \ No newline at end of file diff --git a/assets-src/styles/sass/90-utilities/_layout.scss b/assets-src/styles/sass/90-utilities/_layout.scss index 1b599006..389696c0 100644 --- a/assets-src/styles/sass/90-utilities/_layout.scss +++ b/assets-src/styles/sass/90-utilities/_layout.scss @@ -7,12 +7,10 @@ The parent must be exactly centered in the browser in order for this to work - see https://css-tricks.com/full-width-containers-limited-width-parents/ */ .u-full-width { - left: 50%; - margin-left: -50vw; - margin-right: -50vw; - position: relative; - right: 50%; - width: 100vw; + inline-size: 100vw; + inset-inline: 50%; + margin-inline: -50vw; + position: relative; } @@ -21,7 +19,6 @@ to work - see https://css-tricks.com/full-width-containers-limited-width-parents To horizontally center a block-level item */ .u-center { - margin-left: auto; - margin-right: auto; + margin-inline: auto; position: relative; } \ No newline at end of file diff --git a/assets-src/styles/sass/90-utilities/_margins.scss b/assets-src/styles/sass/90-utilities/_margins.scss index 0e036b89..a92e2f67 100644 --- a/assets-src/styles/sass/90-utilities/_margins.scss +++ b/assets-src/styles/sass/90-utilities/_margins.scss @@ -9,5 +9,5 @@ } .u-no-margin-top.u-no-margin-top { - margin-top: 0; + margin-block-start: 0; } \ No newline at end of file From b67c6de60eb3d5ec09b8371d56e2095fd8fbf08d Mon Sep 17 00:00:00 2001 From: Nicola Saunders Date: Mon, 11 Aug 2025 16:00:18 +0100 Subject: [PATCH 08/28] Comment out remaining stack includes While we look to reset/revise vertical spacing --- assets-src/styles/sass/30-base/_forms.scss | 2 +- assets-src/styles/sass/50-core-components/_footer.scss | 2 +- assets-src/styles/sass/80-templates/_technical-reports.scss | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/assets-src/styles/sass/30-base/_forms.scss b/assets-src/styles/sass/30-base/_forms.scss index af0b342b..fd769998 100755 --- a/assets-src/styles/sass/30-base/_forms.scss +++ b/assets-src/styles/sass/30-base/_forms.scss @@ -425,7 +425,7 @@ show all available options outright, rather than hide them behind a