From 29d10fe942f1a69b1b7c72a698b0acc6ecf95618 Mon Sep 17 00:00:00 2001 From: Enrica Garcia Date: Mon, 19 Jun 2023 11:39:08 +0200 Subject: [PATCH 1/6] fix: issue#934 --- src/css/base/_all.scss | 2 +- src/css/base/_html.scss | 2 +- src/css/components/_c-a11y-summary.scss | 2 +- src/css/components/_c-banner.scss | 4 +- src/css/components/_c-checklist.scss | 2 +- src/css/components/_c-dos-donts.scss | 2 +- src/css/components/_c-footer.scss | 6 +-- src/css/components/_c-form.scss | 4 +- src/css/components/_c-homepage-card.scss | 4 +- src/css/components/_c-linkroll.scss | 2 +- src/css/components/_c-person.scss | 6 +-- src/css/components/_c-post-collection.scss | 6 +-- src/css/components/_c-post.scss | 2 +- src/css/components/_c-preface.scss | 2 +- src/css/components/_c-primary-nav.scss | 6 +-- .../components/_c-recommended-reading.scss | 2 +- src/css/components/_c-simple.scss | 2 +- src/css/components/_c-theme-switcher.scss | 2 +- src/css/components/_c-wcag-explanation.scss | 4 +- src/css/components/content/_cms.scss | 4 +- src/css/components/content/_lists.scss | 4 +- src/css/components/content/_spacing.scss | 4 +- src/css/layout/_l-footer.scss | 10 ++-- src/css/layout/_l-generic-title.scss | 4 +- src/css/layout/_l-hero.scss | 4 +- src/css/layout/_l-post.scss | 2 +- src/css/layout/_l-primary-nav.scss | 4 +- src/css/layout/_l-toc.scss | 2 +- src/css/logic/_mixins.hide.scss | 2 +- src/css/logic/_mixins.lede.scss | 2 +- src/css/utilities/_spacing.scss | 4 +- src/css/utilities/_variables.scss | 53 +++++++++++++++++++ src/css/vendor/_v-toc.scss | 4 +- 33 files changed, 109 insertions(+), 56 deletions(-) create mode 100644 src/css/utilities/_variables.scss diff --git a/src/css/base/_all.scss b/src/css/base/_all.scss index a9e5a087b..42960f001 100644 --- a/src/css/base/_all.scss +++ b/src/css/base/_all.scss @@ -7,7 +7,7 @@ *::before, *::after { box-sizing: border-box; - margin: 0; + padding: 0; vertical-align: baseline; } diff --git a/src/css/base/_html.scss b/src/css/base/_html.scss index 3368e93c9..9fa19be72 100644 --- a/src/css/base/_html.scss +++ b/src/css/base/_html.scss @@ -11,7 +11,7 @@ html { font-size: $global-type-size; font-weight: $font-weight-regular; line-height: $line-height-loose; - margin: 0; + margin: $m-0; min-height: 100%; padding: 0; text-size-adjust: 100%; diff --git a/src/css/components/_c-a11y-summary.scss b/src/css/components/_c-a11y-summary.scss index c04bc2ec1..a37afbd68 100644 --- a/src/css/components/_c-a11y-summary.scss +++ b/src/css/components/_c-a11y-summary.scss @@ -23,7 +23,7 @@ } .c-a11y-summary__explanation { - margin-top: 0; + margin-top: $mt-0; margin-bottom: 0; text-align: center; diff --git a/src/css/components/_c-banner.scss b/src/css/components/_c-banner.scss index 08c9c237c..3f69c9f55 100644 --- a/src/css/components/_c-banner.scss +++ b/src/css/components/_c-banner.scss @@ -47,7 +47,7 @@ $_banner-triangle-size: 1.49rem; @include var(background-color, featured-card-accent); background-image: none; @include var(color, featured-card-accent-text); - margin-top: 0; + margin-top: $mt-0; &::before { @include var(border-right-color, featured-card-accent-shadow); @@ -56,7 +56,7 @@ $_banner-triangle-size: 1.49rem; &.c-banner--post { background-image: none; - margin-top: 0; + margin-top: $mt-0; } } diff --git a/src/css/components/_c-checklist.scss b/src/css/components/_c-checklist.scss index 1504e24b4..98f3952b1 100644 --- a/src/css/components/_c-checklist.scss +++ b/src/css/components/_c-checklist.scss @@ -234,7 +234,7 @@ margin-left: 1rem; .c-checklist__citation { - margin-top: 0.5rem; + margin-top: $mt-2;; padding-left: map-get($_checklist-inset, small); // Breakpoints diff --git a/src/css/components/_c-dos-donts.scss b/src/css/components/_c-dos-donts.scss index 76d5568e4..c8cd1295f 100644 --- a/src/css/components/_c-dos-donts.scss +++ b/src/css/components/_c-dos-donts.scss @@ -18,7 +18,7 @@ } p:first-of-type { - margin-top: 0.5rem; + margin-top: $mt-2;; } p:nth-child(odd) { diff --git a/src/css/components/_c-footer.scss b/src/css/components/_c-footer.scss index cab4f858d..a216aac11 100644 --- a/src/css/components/_c-footer.scss +++ b/src/css/components/_c-footer.scss @@ -37,12 +37,12 @@ .c-footer__list { @include preserve-list-semantics(); - margin-top: 1rem; + margin-top: $mt-3; margin-left: 0.4rem; // Text-level formatting li { - margin-top: 0.5rem; + margin-top: $mt-2;; } } @@ -70,7 +70,7 @@ // Breakpoints @include mappy-bp(palm-small) { font-size: $font-size-body-medium; - margin-top: 0; + margin-top: $mt-0; } @include mappy-bp(lap-small) { diff --git a/src/css/components/_c-form.scss b/src/css/components/_c-form.scss index 1eee9d3c1..a29f5433b 100644 --- a/src/css/components/_c-form.scss +++ b/src/css/components/_c-form.scss @@ -2,7 +2,7 @@ $_c-input-margin-top: 1.5rem; .c-form { - margin-top: 1rem; + margin-top: $mt-3; } @@ -148,7 +148,7 @@ $_c-input-margin-top: 1.5rem; .c-form__progress-label { @include var(background-color, body-background); font-family: $font-family-secondary; - margin-top: 0; + margin-top: $mt-0; padding-left: 1rem; } diff --git a/src/css/components/_c-homepage-card.scss b/src/css/components/_c-homepage-card.scss index e10aff4ca..b9044b17d 100644 --- a/src/css/components/_c-homepage-card.scss +++ b/src/css/components/_c-homepage-card.scss @@ -64,7 +64,7 @@ .c-homepage-card__description { font-family: $font-family-secondary; - margin-top: 1rem; + margin-top: $mt-3; margin-bottom: 1rem; max-width: 50ch; } @@ -74,7 +74,7 @@ @include var(border-color, secondary-link-accent); @include var(color, secondary-link-text); font-family: $font-family-secondary; - margin-top: 1rem; + margin-top: $mt-3; text-decoration: none; // States diff --git a/src/css/components/_c-linkroll.scss b/src/css/components/_c-linkroll.scss index ff046ebe9..5d20b8098 100644 --- a/src/css/components/_c-linkroll.scss +++ b/src/css/components/_c-linkroll.scss @@ -2,7 +2,7 @@ // // Style guide: Components.linkroll .c-linkroll { - margin-top: 1rem; + margin-top: $mt-3; } diff --git a/src/css/components/_c-person.scss b/src/css/components/_c-person.scss index 228bbec56..586e59479 100644 --- a/src/css/components/_c-person.scss +++ b/src/css/components/_c-person.scss @@ -7,7 +7,7 @@ $_person-distance: ( margin-top: 2rem; &:first-of-type { - margin-top: 0; + margin-top: $mt-0; } } @@ -129,7 +129,7 @@ $_person-distance: ( @include link-states(card-heading-text); display: inline-block; - margin-top: 1rem; + margin-top: $mt-3; } @@ -153,6 +153,6 @@ $_person-distance: ( .c-person__biography { font-family: $font-family-secondary; - margin-top: 1rem; + margin-top: $mt-3; max-width: $global-type-measure; } diff --git a/src/css/components/_c-post-collection.scss b/src/css/components/_c-post-collection.scss index 8e6ed00f6..1d617a734 100644 --- a/src/css/components/_c-post-collection.scss +++ b/src/css/components/_c-post-collection.scss @@ -10,13 +10,13 @@ .c-post-collection__title { border-bottom: $border-thin dotted currentColor; - margin-top: 0; + margin-top: $mt-0;t-0; padding-bottom: 1rem; } .c-post-collection__list { - margin-top: 1rem; + margin-top: $mt-3; list-style-type: none; } @@ -24,7 +24,7 @@ .c-post-collection__item { @include var(color, post-rec-text); position: relative; - margin-top: 0.5rem; + margin-top: $mt-2;; counter-increment: post-collection; font-family: $font-family-secondary; diff --git a/src/css/components/_c-post.scss b/src/css/components/_c-post.scss index 366141395..f7997d17f 100644 --- a/src/css/components/_c-post.scss +++ b/src/css/components/_c-post.scss @@ -98,7 +98,7 @@ $_c-post-vertical-spacing: 4ex; } @include mappy-bp(lap-medium) { - margin-top: 0; + margin-top: $mt-0; margin-left: map-get($global-post-content-inset, small); } } diff --git a/src/css/components/_c-preface.scss b/src/css/components/_c-preface.scss index 403024058..f1e75a22b 100644 --- a/src/css/components/_c-preface.scss +++ b/src/css/components/_c-preface.scss @@ -1,6 +1,6 @@ .c-preface { @include var(color, text-accent); - margin-top: 0.5rem; + margin-top: $mt-2;; margin-bottom: 2rem; margin-left: $_card-inset; max-width: $global-type-measure; diff --git a/src/css/components/_c-primary-nav.scss b/src/css/components/_c-primary-nav.scss index bd231a495..643199b37 100644 --- a/src/css/components/_c-primary-nav.scss +++ b/src/css/components/_c-primary-nav.scss @@ -12,12 +12,12 @@ .c-primary-nav__list-item { - margin-top: 1rem; + margin-top: $mt-3; text-align: center; // Supports @supports #{$supports-flex} { - margin-top: 1rem; + margin-top: $mt-3; margin-left: 0; width: 33%; @@ -33,7 +33,7 @@ } @include mappy-bp(lap-small) { - margin-top: 0; + margin-top: $mt-0;t-0; } } diff --git a/src/css/components/_c-recommended-reading.scss b/src/css/components/_c-recommended-reading.scss index 384bef00f..e30b8323a 100644 --- a/src/css/components/_c-recommended-reading.scss +++ b/src/css/components/_c-recommended-reading.scss @@ -75,7 +75,7 @@ @include var(color, post-rec-text); display: block; font-size: $font-size-body-tiny; - margin-top: 1rem; + margin-top: $mt-3; // Breakpoints @include mappy-bp(palm-small) { diff --git a/src/css/components/_c-simple.scss b/src/css/components/_c-simple.scss index c7453c678..164f49eb9 100644 --- a/src/css/components/_c-simple.scss +++ b/src/css/components/_c-simple.scss @@ -28,7 +28,7 @@ // Supports @supports #{$supports-flex} { - margin-top: 0; + margin-top: $mt-0; // Breakpoints @include mappy-bp(palm-large) { diff --git a/src/css/components/_c-theme-switcher.scss b/src/css/components/_c-theme-switcher.scss index 63dc19e32..836d0c025 100644 --- a/src/css/components/_c-theme-switcher.scss +++ b/src/css/components/_c-theme-switcher.scss @@ -1,6 +1,6 @@ .c-theme-switcher { border: none; - margin: 0; + margin: $m-0; padding: 0; } diff --git a/src/css/components/_c-wcag-explanation.scss b/src/css/components/_c-wcag-explanation.scss index 105595892..68b74bf06 100644 --- a/src/css/components/_c-wcag-explanation.scss +++ b/src/css/components/_c-wcag-explanation.scss @@ -23,7 +23,7 @@ // Breakpoints @include mappy-bp(palm-large) { - margin-top: 0.5rem; + margin-top: $mt-2;; // Supports @supports #{$supports-flex} { @@ -66,6 +66,6 @@ // Breakpoints @include mappy-bp(palm-large) { - margin-top: 0; + margin-top: $mt-0; } } diff --git a/src/css/components/content/_cms.scss b/src/css/components/content/_cms.scss index 9afd54fd1..989303e8f 100644 --- a/src/css/components/content/_cms.scss +++ b/src/css/components/content/_cms.scss @@ -29,12 +29,12 @@ } .footnotes-list { - margin-top: 1rem; + margin-top: $mt-3; } .footnote-item { p { - margin-top: 0; + margin-top: $mt-0; } } diff --git a/src/css/components/content/_lists.scss b/src/css/components/content/_lists.scss index 54b60a0fe..702498041 100644 --- a/src/css/components/content/_lists.scss +++ b/src/css/components/content/_lists.scss @@ -43,7 +43,7 @@ } ol { - margin-top: 0; + margin-top: $mt-0; margin-left: 2rem; margin-bottom: 1rem; } @@ -77,7 +77,7 @@ } ul { - margin-top: 0; + margin-top: $mt-0; margin-left: 2rem; } } diff --git a/src/css/components/content/_spacing.scss b/src/css/components/content/_spacing.scss index d0f8507a4..07454a8b5 100644 --- a/src/css/components/content/_spacing.scss +++ b/src/css/components/content/_spacing.scss @@ -35,7 +35,7 @@ .template-collection & { p:first-of-type { - margin-top: 0; + margin-top: $mt-0; } } @@ -51,7 +51,7 @@ font-size: 1.25rem; font-family: $font-family-secondary; line-height: $line-height-looser; - margin-top: 0; + margin-top: $mt-0; margin-bottom: $_c-post-vertical-spacing * 1.25; @include post-content-flourish(169, 0.75rem); } diff --git a/src/css/layout/_l-footer.scss b/src/css/layout/_l-footer.scss index 6e226f23b..6f52f8fe9 100644 --- a/src/css/layout/_l-footer.scss +++ b/src/css/layout/_l-footer.scss @@ -50,7 +50,7 @@ .l-footer__theme-switcher { - margin-top: 1rem; + margin-top: $mt-3; } @@ -64,7 +64,7 @@ @include mappy-bp(lap-small) { flex-direction: row; justify-content: space-between; - margin-top: 1rem; + margin-top: $mt-3; } } } @@ -76,14 +76,14 @@ @supports #{$supports-flex} { // Breakpoints @include mappy-bp(lap-small) { - margin-top: 0; + margin-top: $mt-0; } } } .l-footer__top { - margin-top: 1rem; + margin-top: $mt-3; // Breakpoints @include mappy-bp(palm-small) { @@ -91,6 +91,6 @@ } @include mappy-bp(lap-small) { - margin-top: 0; + margin-top: $mt-0; } } diff --git a/src/css/layout/_l-generic-title.scss b/src/css/layout/_l-generic-title.scss index f29465473..1c3513b27 100644 --- a/src/css/layout/_l-generic-title.scss +++ b/src/css/layout/_l-generic-title.scss @@ -63,14 +63,14 @@ background-color: #ffc2cc; // Breakpoints @include mappy-bp(palm-large) { - margin-top: 0; + margin-top: $mt-0; margin-bottom: 0; position: unset; transform: none; } @include mappy-bp(lap-small) { - margin: 0; + margin: $m-0; } } } diff --git a/src/css/layout/_l-hero.scss b/src/css/layout/_l-hero.scss index 0ba755217..7f55872d0 100644 --- a/src/css/layout/_l-hero.scss +++ b/src/css/layout/_l-hero.scss @@ -74,14 +74,14 @@ // Breakpoints @include mappy-bp(palm-large) { - margin-top: 0; + margin-top: $mt-0; margin-bottom: 0; position: unset; transform: none; } @include mappy-bp(lap-small) { - margin: 0; + margin: $m-0; } @include mappy-bp(lap-large) { diff --git a/src/css/layout/_l-post.scss b/src/css/layout/_l-post.scss index 4a356dbac..43e1df75e 100644 --- a/src/css/layout/_l-post.scss +++ b/src/css/layout/_l-post.scss @@ -102,7 +102,7 @@ } @include mappy-bp(lap-small) { - margin-top: 0; + margin-top: $mt-0; } } } diff --git a/src/css/layout/_l-primary-nav.scss b/src/css/layout/_l-primary-nav.scss index 4670b395a..f46a8e214 100644 --- a/src/css/layout/_l-primary-nav.scss +++ b/src/css/layout/_l-primary-nav.scss @@ -22,14 +22,14 @@ .l-primary-nav__sections { - margin-top: 1rem; + margin-top: $mt-3; width: 100%; // Supports @supports #{$supports-flex} { display: flex; flex-flow: row wrap; - margin-top: 0; + margin-top: $mt-0; // Breakpoints @include mappy-bp(palm-small) { diff --git a/src/css/layout/_l-toc.scss b/src/css/layout/_l-toc.scss index 7d56f0e7e..775d9150d 100644 --- a/src/css/layout/_l-toc.scss +++ b/src/css/layout/_l-toc.scss @@ -18,7 +18,7 @@ margin-top: 17.5rem; .l-toc { - margin-top: 0; // BUG: .v-toc is getting regenerated on some pages + margin-top: $mt-0; // BUG: .v-toc is getting regenerated on some pages margin-left: 1.5rem; // BUG: .v-toc is getting regenerated on some pages } } diff --git a/src/css/logic/_mixins.hide.scss b/src/css/logic/_mixins.hide.scss index 07a40482d..0345e930f 100644 --- a/src/css/logic/_mixins.hide.scss +++ b/src/css/logic/_mixins.hide.scss @@ -22,7 +22,7 @@ &:focus { clip: auto; height: auto; - margin: 0; + margin: $m-0; overflow: visible; position: static; width: auto; diff --git a/src/css/logic/_mixins.lede.scss b/src/css/logic/_mixins.lede.scss index 9a401217e..9ab1a0735 100644 --- a/src/css/logic/_mixins.lede.scss +++ b/src/css/logic/_mixins.lede.scss @@ -9,5 +9,5 @@ @mixin lede() { font-size: 1.15rem; line-height: $line-height-double; - margin-top: 0; + margin-top: $mt-0; } diff --git a/src/css/utilities/_spacing.scss b/src/css/utilities/_spacing.scss index b927d841b..d0d90fb41 100644 --- a/src/css/utilities/_spacing.scss +++ b/src/css/utilities/_spacing.scss @@ -31,7 +31,7 @@ } .u-spacing-top-shorter { - margin-top: 0.5rem; + margin-top: $mt-2;; } .u-spacing-top-short { @@ -39,7 +39,7 @@ } .u-spacing-top-medium { - margin-top: 1rem; + margin-top: $mt-3; } .u-spacing-top-long { diff --git a/src/css/utilities/_variables.scss b/src/css/utilities/_variables.scss new file mode 100644 index 000000000..460689ea4 --- /dev/null +++ b/src/css/utilities/_variables.scss @@ -0,0 +1,53 @@ +// Variables + +// Declaration of common measurements for margin and padding + +// margin +$m-0: margin: 0; + +// margin-top +$mt-0: margin-top: 0; +$mt-2: margin-top: 0.5rem; +$mt-3: margin-top: 1rem; +$mt-4: margin-top: 1.5rem; +$mt-5: margin-top: 2rem; +$mt-7: margin-top: 3rem; +$mt-8: margin-top: 4rem; +$mt-10: margin-top: 6rem; + +// margin-right +$mr-2: margin-right: 0.5rem; +$mr-3: margin-right: 1rem; +$mr-4: margin-right: 1.5rem; +$mr-5: margin-right: 2rem; +$mr-7: margin-right: 3rem; + +// margin-bottom +$mb-0: margin-bottom: 0; +$mb-2: margin-bottom: 0.5rem; +$mb-3: margin-bottom: 1rem; +$mb-5: margin-bottom: 2rem; +$mb-7: margin-bottom: 3rem; + +// margin-left +$ml-2: margin-left: 0.5rem; +$ml-3: margin-left: 1rem; +$ml-4: margin-left: 1.5rem; +$ml-5: margin-left: 2rem; + +// padding +$p-0: padding: 0; +$p-2: padding: 0.5rem; + +// margin-right +$pr-3: padding-right: 1rem; + +// margin-bottom +$pb-0: padding-bottom: 0; + +// margin-left +$pl-3: padding-left: 1rem; + + + + diff --git a/src/css/vendor/_v-toc.scss b/src/css/vendor/_v-toc.scss index f53ddfbf0..c49a8472c 100644 --- a/src/css/vendor/_v-toc.scss +++ b/src/css/vendor/_v-toc.scss @@ -119,11 +119,11 @@ text-transform: none; &:first-of-type { - margin-top: 1rem; + margin-top: $mt-3; // Supports @supports #{$supports-flex} { - margin-top: 0; + margin-top: $mt-0; } } From 285d7163558bf235c02bc51a291a40e63c6edf24 Mon Sep 17 00:00:00 2001 From: Natalia Date: Mon, 19 Jun 2023 14:08:26 +0200 Subject: [PATCH 2/6] feat: incorporate variables into existing spacing utility classes --- src/css/base/_all.scss | 4 +- src/css/base/_html.scss | 6 +- src/css/base/_resets.scss | 38 +++++-------- src/css/components/_c-a11y-summary.scss | 6 +- src/css/components/_c-banner.scss | 22 ++++--- src/css/components/_c-card-resource.scss | 9 +-- src/css/components/_c-card.scss | 2 +- src/css/components/_c-changelog.scss | 3 +- src/css/components/_c-checklist.scss | 57 +++++++++---------- src/css/components/_c-divider.scss | 4 +- src/css/components/_c-dos-donts.scss | 4 +- src/css/components/_c-featured.scss | 11 ++-- src/css/components/_c-footer.scss | 18 ++---- src/css/components/_c-form.scss | 34 ++++------- src/css/components/_c-homepage-card.scss | 25 ++------ src/css/components/_c-homepage-feature.scss | 4 +- src/css/components/_c-linkroll.scss | 13 +---- src/css/components/_c-logo.scss | 5 +- src/css/components/_c-person.scss | 22 +++---- src/css/components/_c-post-collection.scss | 40 ++++++------- src/css/components/_c-post.scss | 23 +++----- src/css/components/_c-preface.scss | 4 +- src/css/components/_c-primary-nav.scss | 16 +++--- .../components/_c-recommended-reading.scss | 10 +--- src/css/components/_c-simple.scss | 9 +-- src/css/components/_c-sponsors.scss | 8 +-- src/css/components/_c-spotlight.scss | 4 +- src/css/components/_c-theme-switcher.scss | 8 +-- src/css/components/_c-wcag-explanation.scss | 19 +++---- src/css/components/content/_cms.scss | 4 +- .../components/content/_inline-content.scss | 6 +- src/css/components/content/_lists.scss | 23 ++++---- src/css/components/content/_spacing.scss | 4 +- src/css/layout/_l-footer.scss | 22 +++---- src/css/layout/_l-generic-title.scss | 9 ++- src/css/layout/_l-hero.scss | 10 ++-- src/css/layout/_l-post.scss | 28 ++++----- src/css/layout/_l-primary-nav.scss | 5 +- src/css/layout/_l-toc.scss | 22 +++---- src/css/logic/_mixins.headings.scss | 4 +- src/css/logic/_mixins.hide.scss | 4 +- src/css/logic/_mixins.lede.scss | 2 +- src/css/utilities/_spacing.scss | 40 ++++++------- src/css/utilities/_variables.scss | 55 ++++++++++++++++++ src/css/vendor/_v-toc.scss | 17 +++--- 45 files changed, 310 insertions(+), 373 deletions(-) create mode 100644 src/css/utilities/_variables.scss diff --git a/src/css/base/_all.scss b/src/css/base/_all.scss index a9e5a087b..628a969eb 100644 --- a/src/css/base/_all.scss +++ b/src/css/base/_all.scss @@ -7,7 +7,7 @@ *::before, *::after { box-sizing: border-box; - margin: 0; - padding: 0; + margin: $m-0; + padding: $p-0; vertical-align: baseline; } diff --git a/src/css/base/_html.scss b/src/css/base/_html.scss index 3368e93c9..62cdfb1c5 100644 --- a/src/css/base/_html.scss +++ b/src/css/base/_html.scss @@ -11,9 +11,9 @@ html { font-size: $global-type-size; font-weight: $font-weight-regular; line-height: $line-height-loose; - margin: 0; + margin: $m-0; min-height: 100%; - padding: 0; + padding: $p-0; text-size-adjust: 100%; // Typography @@ -39,7 +39,7 @@ html { // Media Queries @media screen and (-webkit-min-device-pixel-ratio: 2), - screen and (min-resolution: 2dppx) { + screen and (min-resolution: 2dppx) { /* stylelint-disable-next-line property-no-unknown */ font-smoothing: subpixel-antialiased; // Only apply to devices that support font smoothing: https://www.zachleat.com/web/font-smooth/ } diff --git a/src/css/base/_resets.scss b/src/css/base/_resets.scss index d54d477b3..7b2cc2fc3 100644 --- a/src/css/base/_resets.scss +++ b/src/css/base/_resets.scss @@ -4,18 +4,15 @@ // // Styleguide Base.resets - a img { border: none; // Removes borders from linked images } - abbr[title], dfn[title] { cursor: help; // Give a help cursor to elements that give extra info on `:hover`. } - b, strong { font-weight: $font-weight-bold; @@ -26,7 +23,6 @@ strong { } } - button, input[type="button"] { border: 0; @@ -34,11 +30,10 @@ input[type="button"] { // Vendor &::-moz-focus-inner { border: 0; - padding: 0; + padding: $p-0; } } - em, cite, i { @@ -52,7 +47,6 @@ i { } } - iframe, object, audio, @@ -61,7 +55,6 @@ canvas { @include responsify(); } - img, figure, picture { @@ -79,7 +72,6 @@ picture { // TODO: Broken images fallback: https://bitsofco.de/styling-broken-images/ } - h1, h2, h3, @@ -94,7 +86,6 @@ ins { text-decoration: none; } - // Selects all content in a read-only input field input:not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea { @@ -103,12 +94,10 @@ textarea { } } - label { cursor: pointer; } - // Prevent zooming on mobile viewports when tapped input[type="text"], input[type="email"], @@ -134,7 +123,6 @@ mark { @include var(color, mark-text); } - sub { text-transform: lowercase; font-size: inherit; @@ -146,7 +134,9 @@ sub { -webkit-font-feature-settings: "subs", "subs"; font-feature-settings: "subs", "subs"; - @supports ((-webkit-font-feature-settings: "subs") or (font-feature-settings: "subs")) { + @supports ( + (-webkit-font-feature-settings: "subs") or (font-feature-settings: "subs") + ) { vertical-align: baseline; } @@ -157,7 +147,6 @@ sub { } } - sup { text-transform: lowercase; font-variant-position: super; @@ -168,7 +157,9 @@ sup { -webkit-font-feature-settings: "sups", "sups"; font-feature-settings: "sups", "sups"; - @supports ((-webkit-font-feature-settings: "sups") or (font-feature-settings: "sups")) { + @supports ( + (-webkit-font-feature-settings: "sups") or (font-feature-settings: "sups") + ) { vertical-align: baseline; } @@ -178,7 +169,6 @@ sup { } } - // Remove default table spacing table { border-collapse: collapse; @@ -222,7 +212,6 @@ table { } tbody { - tr { th { font-weight: $font-weight-regular; @@ -231,13 +220,11 @@ table { } } - textarea { overflow: auto; resize: vertical; } - time { font-variant-numeric: tabular-nums; @@ -260,7 +247,10 @@ time { /* stylelint-disable-next-line property-no-vendor-prefix */ -ms-font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum"; - @supports not ((-webkit-font-feature-settings: "onum" inherit) or (font-feature-settings: "onum" inherit)) { + @supports not ( + (-webkit-font-feature-settings: "onum" inherit) or + (font-feature-settings: "onum" inherit) + ) { /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum"; font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum"; @@ -269,14 +259,16 @@ time { /* stylelint-disable-next-line property-no-vendor-prefix, declaration-block-no-duplicate-properties */ -ms-font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum"; - @supports not ((-webkit-font-feature-settings: "onum" inherit) or (font-feature-settings: "onum" inherit)) { + @supports not ( + (-webkit-font-feature-settings: "onum" inherit) or + (font-feature-settings: "onum" inherit) + ) { /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum"; font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum"; } } - var { font-style: normal; } diff --git a/src/css/components/_c-a11y-summary.scss b/src/css/components/_c-a11y-summary.scss index c04bc2ec1..2f212bb5d 100644 --- a/src/css/components/_c-a11y-summary.scss +++ b/src/css/components/_c-a11y-summary.scss @@ -23,8 +23,8 @@ } .c-a11y-summary__explanation { - margin-top: 0; - margin-bottom: 0; + margin-top: $mt-0; + margin-bottom: $mb-0; text-align: center; // Breakpoints @@ -74,7 +74,7 @@ .c-a11y-summary__mission { font-family: $font-family-secondary; font-size: $font-size-body; - margin-top: 2rem; + margin-top: $mt-4; max-width: 40ch; text-align: center; diff --git a/src/css/components/_c-banner.scss b/src/css/components/_c-banner.scss index 08c9c237c..b286b9eeb 100644 --- a/src/css/components/_c-banner.scss +++ b/src/css/components/_c-banner.scss @@ -1,6 +1,5 @@ $_banner-triangle-size: 1.49rem; - .c-banner { @include var(background-color, card-accent); background-image: url("#{$path-to-img}/resource-banner-inset-lightmode.svg"); @@ -10,7 +9,7 @@ $_banner-triangle-size: 1.49rem; font-family: $font-family-secondary; letter-spacing: $font-tracking-slight; line-height: $line-height-single; - margin-top: 1.5rem; + margin-top: $mt-3; padding: 0.1rem 1rem 0.6rem 0.3rem; // [1] Magic number to position the triangle @@ -26,28 +25,28 @@ $_banner-triangle-size: 1.49rem; right: 0.275rem; // [1] z-index: -1; - // User Queries + // User Queries @media screen and (-ms-high-contrast: active) { display: none; } } - @media (prefers-color-scheme: dark) { - :root:not([data-user-theme="light"]) & { + @media (prefers-color-scheme: dark) { + :root:not([data-user-theme="light"]) & { background-image: url("#{$path-to-img}/resource-banner-inset-darkmode.svg"); - } - } + } + } - [data-user-theme="dark"] & { + [data-user-theme="dark"] & { background-image: url("#{$path-to-img}/resource-banner-inset-darkmode.svg"); - } + } // Contexts &.c-banner--resource { @include var(background-color, featured-card-accent); background-image: none; @include var(color, featured-card-accent-text); - margin-top: 0; + margin-top: $mt-0; &::before { @include var(border-right-color, featured-card-accent-shadow); @@ -56,11 +55,10 @@ $_banner-triangle-size: 1.49rem; &.c-banner--post { background-image: none; - margin-top: 0; + margin-top: $mt-0; } } - .c-banner__icon { fill: currentColor; height: 0.75rem; diff --git a/src/css/components/_c-card-resource.scss b/src/css/components/_c-card-resource.scss index 71b3d468d..519430b4a 100644 --- a/src/css/components/_c-card-resource.scss +++ b/src/css/components/_c-card-resource.scss @@ -7,10 +7,10 @@ .c-card-resource__body { @include var(background-color, card-background); margin-right: 1.25rem; - margin-left: 1.5rem; + margin-left: $ml-3; padding: 1.5rem 2rem; - transition: - $animation-duration-shorter $animation-easing-character background-color, + transition: $animation-duration-shorter $animation-easing-character + background-color, $animation-duration-shorter $animation-easing-character border-color, $animation-duration-shorter $animation-easing-character color; @@ -31,7 +31,6 @@ } } - .c-card-resource__title { @include var(color, card-heading-text); letter-spacing: $font-tracking-tight; @@ -47,13 +46,11 @@ } } - .c-card-resource__meta { @include var(color, card-meta-text); line-height: $line-height-tight; } - .c-card-resource__description { max-width: $global-type-measure; } diff --git a/src/css/components/_c-card.scss b/src/css/components/_c-card.scss index 154cc1ab3..e309b2042 100644 --- a/src/css/components/_c-card.scss +++ b/src/css/components/_c-card.scss @@ -2,6 +2,6 @@ $_card-inset: 1.5rem; $_card-outline: $border-thinner solid; .c-card__wrapper { - margin-bottom: 3rem; + margin-bottom: $mb-6; max-width: $global-type-measure * 1.1; } diff --git a/src/css/components/_c-changelog.scss b/src/css/components/_c-changelog.scss index 7c77de4af..d457a2c1d 100644 --- a/src/css/components/_c-changelog.scss +++ b/src/css/components/_c-changelog.scss @@ -1,11 +1,10 @@ .c-changelog__version { @include var(background-color, tag-background); border-radius: 0.25rem; - margin-right: 0.5rem; + margin-right: $mr-1; padding: 0.25rem 0.5rem; } - .c-changelog__date { @include var(color, text-accent); font-size: $font-size-body-small; diff --git a/src/css/components/_c-checklist.scss b/src/css/components/_c-checklist.scss index 1504e24b4..677a93f1e 100644 --- a/src/css/components/_c-checklist.scss +++ b/src/css/components/_c-checklist.scss @@ -2,28 +2,26 @@ $_checklist-checkbox-size: ( small: 1.25rem, - large: 1.5rem + large: 1.5rem, ); $_checklist-icon-size: ( small: 1rem, - large: 1.5rem + large: 1.5rem, ); $_checklist-inset: ( small: 3rem, - large: 4rem + large: 4rem, ); $_checklist-padding: ( small: 1rem, - large: 1.5rem + large: 1.5rem, ); - .c-checklist__outer-wrapper { - margin-bottom: 3rem; + margin-bottom: $mb-6; max-width: $global-type-measure * 1.1; } - .c-checklist__wrapper { // Supports @supports #{$supports-flex} { @@ -32,13 +30,11 @@ $_checklist-padding: ( } } - .c-card__wrapper .c-checklist__wrapper:first-of-type .c-checklist { border-top: $border-thinnest solid; @include var(border-top-color, checklist-accent); } - .c-checklist { border-bottom: $border-thinnest solid; border-right: $border-thinnest solid; @@ -85,14 +81,16 @@ $_checklist-padding: ( } } - .c-checklist__summary { cursor: pointer; - padding: map-get($_checklist-padding, small) map-get($_checklist-padding, small) map-get($_checklist-padding, small) 1rem; + padding: map-get($_checklist-padding, small) + map-get($_checklist-padding, small) map-get($_checklist-padding, small) 1rem; // Breakpoints @include mappy-bp(palm-medium) { - padding: map-get($_checklist-padding, large) map-get($_checklist-padding, large) map-get($_checklist-padding, large) 1.5rem; + padding: map-get($_checklist-padding, large) + map-get($_checklist-padding, large) map-get($_checklist-padding, large) + 1.5rem; } // States @@ -127,11 +125,11 @@ $_checklist-padding: ( flex-shrink: 0; } - // Breakpoints - @include mappy-bp(palm-medium) { - height: map-get($_checklist-icon-size, large); - width: map-get($_checklist-icon-size, large); - } + // Breakpoints + @include mappy-bp(palm-medium) { + height: map-get($_checklist-icon-size, large); + width: map-get($_checklist-icon-size, large); + } // User Queries @media screen and (prefers-reduced-motion: reduce) { @@ -139,16 +137,14 @@ $_checklist-padding: ( } } - .c-checklist__title { -margin-left: 1rem; + margin-left: $ml-2; // Supports @supports #{$supports-flex} { flex: 1; } } - .c-checklist__checkbox { // Supports @supports #{$supports-flex} { @@ -159,7 +155,7 @@ margin-left: 1rem; input[type="checkbox"] { position: relative; - left: 0.2rem; // HACK: Ensures iOS checkboxes are tucked fully under the generated checkbox + left: 0.2rem; // HACK: Ensures iOS checkboxes are tucked fully under the generated checkbox } // SEE: https://adrianroselli.com/2017/05/under-engineered-custom-radio-buttons-and-checkboxen.html @@ -175,7 +171,10 @@ margin-left: 1rem; float: left; height: map-get($_checklist-checkbox-size, small); margin-right: math.div(map-get($_checklist-checkbox-size, small), 1.5); - margin-left: math.div(map-get($_checklist-checkbox-size, small), -2); // This covers the native checkbox element + margin-left: math.div( + map-get($_checklist-checkbox-size, small), + -2 + ); // This covers the native checkbox element position: relative; width: map-get($_checklist-checkbox-size, small); @@ -183,7 +182,10 @@ margin-left: 1rem; @include mappy-bp(palm-medium) { height: map-get($_checklist-checkbox-size, large); margin-right: math.div(map-get($_checklist-checkbox-size, large), 1.5); - margin-left: math.div(map-get($_checklist-checkbox-size, large), -2); // This covers the native checkbox element + margin-left: math.div( + map-get($_checklist-checkbox-size, large), + -2 + ); // This covers the native checkbox element width: map-get($_checklist-checkbox-size, large); } } @@ -200,8 +202,8 @@ margin-left: 1rem; display: block; height: map-get($_checklist-checkbox-size, small); position: relative; - top: 0.5em; - left: 0.5em; + top: 0.5em; + left: 0.5em; transform: rotate(0deg); width: map-get($_checklist-checkbox-size, small); @@ -232,9 +234,8 @@ margin-left: 1rem; } } - .c-checklist__citation { - margin-top: 0.5rem; + margin-top: $mt-1; padding-left: map-get($_checklist-inset, small); // Breakpoints @@ -243,7 +244,6 @@ margin-left: 1rem; } } - .c-checklist__link { @include link-states(checklist-accent); @@ -259,7 +259,6 @@ margin-left: 1rem; } } - .c-checklist__description { line-height: $line-height-looser; margin-top: 0.75rem; diff --git a/src/css/components/_c-divider.scss b/src/css/components/_c-divider.scss index aeb8458b3..4d25d029e 100644 --- a/src/css/components/_c-divider.scss +++ b/src/css/components/_c-divider.scss @@ -1,6 +1,6 @@ .c-divider { border: $border-thin solid; @include var(border-color, divider-background); - margin-top: 3rem; - margin-bottom: 3rem; + margin-top: $mt-6; + margin-bottom: $mb-6; } diff --git a/src/css/components/_c-dos-donts.scss b/src/css/components/_c-dos-donts.scss index 76d5568e4..ff19231e7 100644 --- a/src/css/components/_c-dos-donts.scss +++ b/src/css/components/_c-dos-donts.scss @@ -1,5 +1,5 @@ .c-dos-donts { - margin-top: 1.5rem; + margin-top: $mt-3; // Text-level formatting p { @@ -18,7 +18,7 @@ } p:first-of-type { - margin-top: 0.5rem; + margin-top: $mt-1; } p:nth-child(odd) { diff --git a/src/css/components/_c-featured.scss b/src/css/components/_c-featured.scss index aab6d5118..86a392b7f 100644 --- a/src/css/components/_c-featured.scss +++ b/src/css/components/_c-featured.scss @@ -9,13 +9,13 @@ .c-featured__body { margin-right: 0; - margin-bottom: 2rem; - margin-left: 1.5rem; + margin-bottom: $mb-4; + margin-left: $ml-3; padding: 1.5rem 2rem; @include var(background-color, featured-card-background); @include var(color, featured-card-text); - transition: - $animation-duration-shorter $animation-easing-character background-color, + transition: $animation-duration-shorter $animation-easing-character + background-color, $animation-duration-shorter $animation-easing-character border-color, $animation-duration-shorter $animation-easing-character color; @@ -28,7 +28,6 @@ } } - .c-featured__title { letter-spacing: $font-tracking-tight; max-width: $global-type-measure; @@ -44,12 +43,10 @@ } } - .c-featured__meta { line-height: $line-height-tight; } - .c-featured__description { max-width: $global-type-measure; } diff --git a/src/css/components/_c-footer.scss b/src/css/components/_c-footer.scss index cab4f858d..eca728a9f 100644 --- a/src/css/components/_c-footer.scss +++ b/src/css/components/_c-footer.scss @@ -2,9 +2,8 @@ font-family: $font-family-secondary; } - .c-footer__subnav { - margin-top: 2rem; + margin-top: $mt-4; // Supports @supports #{$supports-flex} { @@ -19,7 +18,7 @@ @include mappy-bp(lap-small) { width: initial; - margin-right: 2rem; + margin-right: $mr-4; } @include mappy-bp(lap-medium) { @@ -28,25 +27,22 @@ } } - .c-footer__heading { padding-left: 0.5ch; } - .c-footer__list { @include preserve-list-semantics(); - margin-top: 1rem; + margin-top: $mt-2; margin-left: 0.4rem; // Text-level formatting li { - margin-top: 0.5rem; + margin-top: $mt-1; } } - .c-footer__link { @include link-states(footer-link-text); @@ -59,18 +55,17 @@ } } - .c-footer__tagline { @include var(color, footer-tagline-text); font-family: $font-family-primary; font-size: $font-size-heading-small; line-height: $line-height-single; - margin-top: 2rem; + margin-top: $mt-4; // Breakpoints @include mappy-bp(palm-small) { font-size: $font-size-body-medium; - margin-top: 0; + margin-top: $mt-0; } @include mappy-bp(lap-small) { @@ -79,7 +74,6 @@ } } - .c-footer__copyright-link { @include link-states(footer-link-text); diff --git a/src/css/components/_c-form.scss b/src/css/components/_c-form.scss index 1eee9d3c1..f0f1f71c5 100644 --- a/src/css/components/_c-form.scss +++ b/src/css/components/_c-form.scss @@ -1,11 +1,9 @@ $_c-input-margin-top: 1.5rem; - .c-form { - margin-top: 1rem; + margin-top: $mt-2; } - .c-form__label { display: inline-block; font-weight: $font-weight-bold; @@ -13,15 +11,15 @@ $_c-input-margin-top: 1.5rem; padding-bottom: 0.25rem; } - .c-form__input { @include var(background-color, body-background); @include var(color, body-text); border: $border-thinnest solid; @include var(border-color, input-border); line-height: $line-height-single; - padding: 0.5rem; - transition: background-color $animation-duration-shorter $animation-easing-character; + padding: $p-1; + transition: background-color $animation-duration-shorter + $animation-easing-character; width: 100%; &:hover, @@ -45,13 +43,11 @@ $_c-input-margin-top: 1.5rem; } } - .c-form__input--multiline { line-height: $line-height-loose; min-height: 15rem; } - .c-form__button { @include var(background-color, button-background); border: none; @@ -63,7 +59,8 @@ $_c-input-margin-top: 1.5rem; min-width: 20ch; padding: 0.75rem 1.25rem; text-transform: uppercase; - transition: background-color $animation-duration-shorter $animation-easing-character; + transition: background-color $animation-duration-shorter + $animation-easing-character; // States &:hover { @@ -72,8 +69,7 @@ $_c-input-margin-top: 1.5rem; &:focus { @include var(background-color, button-focus-background); - box-shadow: - 0 0 0 em(2) var(--color-body-background), + box-shadow: 0 0 0 em(2) var(--color-body-background), 0 0 0 em(4) var(--color-button-background); outline: $border-thin solid transparent; } @@ -88,7 +84,6 @@ $_c-input-margin-top: 1.5rem; } } - .c-form__vendor { @include link-states(body-text); @@ -98,17 +93,15 @@ $_c-input-margin-top: 1.5rem; } } - .c-form__instructions { position: relative; - bottom: 1rem; + bottom: 1rem; } - .c-form__error-wrapper { border: $border-thin solid; @include var(border-color, error); - padding: 0.5rem; + padding: $p-1; .c-form__error-list { padding: 0 1rem; @@ -120,7 +113,7 @@ $_c-input-margin-top: 1.5rem; } } -.c-form__input[aria-invalid]{ +.c-form__input[aria-invalid] { border: $border-thinner solid; @include var(border-color, error); } @@ -128,7 +121,7 @@ $_c-input-margin-top: 1.5rem; .c-form__progress { @include var(background-color, progress-background); min-height: 2rem; - margin-bottom: 3rem; + margin-bottom: $mb-6; max-width: 68ch; // Supports @@ -139,20 +132,17 @@ $_c-input-margin-top: 1.5rem; } } - .c-form__progress-fill { @include var(background-color, progress-bar); } - .c-form__progress-label { @include var(background-color, body-background); font-family: $font-family-secondary; - margin-top: 0; + margin-top: $mt-0; padding-left: 1rem; } - .c-form__legal { margin-top: 0.25rem !important; } diff --git a/src/css/components/_c-homepage-card.scss b/src/css/components/_c-homepage-card.scss index e10aff4ca..163196330 100644 --- a/src/css/components/_c-homepage-card.scss +++ b/src/css/components/_c-homepage-card.scss @@ -9,12 +9,10 @@ } } - .c-homepage-card--resources { - margin-right: 2rem; + margin-right: $mr-4; } - .c-homepage-card--spotlight { // Breakpoints @include mappy-bp(wrist-large) { @@ -23,7 +21,6 @@ // Supports @supports #{$supports-flex} { - // Breakpoints @include mappy-bp(palm-large) { justify-self: end; @@ -31,7 +28,6 @@ } } - .c-homepage-card__image-link { // States &:focus { @@ -39,33 +35,29 @@ } } - .c-homepage-card__image { cursor: pointer; - margin-top: 3rem; + margin-top: $mt-6; filter: var(--image-filter); } - .c-homepage-card__author { @include var(color, card-heading-text); font-family: $font-family-secondary; letter-spacing: $font-tracking-slight; - margin-top: 1.5rem; + margin-top: $mt-3; } - .c-homepage-card__title { cursor: pointer; @include var(color, heading-text); text-decoration: none; } - .c-homepage-card__description { font-family: $font-family-secondary; - margin-top: 1rem; - margin-bottom: 1rem; + margin-top: $mt-2; + margin-bottom: $mb-2; max-width: 50ch; } @@ -74,7 +66,7 @@ @include var(border-color, secondary-link-accent); @include var(color, secondary-link-text); font-family: $font-family-secondary; - margin-top: 1rem; + margin-top: $mt-2; text-decoration: none; // States @@ -102,7 +94,6 @@ } } - .c-homepage-card__checklist { height: auto; position: relative; @@ -120,13 +111,11 @@ } } - .c-homepage-card__spotlight-avatar { @include avatar-size("large"); position: relative; } - .c-homepage-card__spotlight__info { @include var(background-color, featured-card-background); height: 13rem; @@ -144,12 +133,10 @@ } } - .c-homepage-card__spotlight-name { font-family: $font-family-secondary; } - .c-homepage-card__spotlight-role { @include var(color, featured-card-heading-text); font-family: $font-family-secondary; diff --git a/src/css/components/_c-homepage-feature.scss b/src/css/components/_c-homepage-feature.scss index a25d50e1f..1affdea24 100644 --- a/src/css/components/_c-homepage-feature.scss +++ b/src/css/components/_c-homepage-feature.scss @@ -4,7 +4,7 @@ .c-homepage-feature { // Contexts &:not(:first-of-type) { - margin-top: 6rem; + margin-top: $mt-12; } // Supports @@ -14,7 +14,6 @@ } } - .c-homepage-feature--50-50 { // Supports @supports #{$supports-grid} { @@ -27,7 +26,6 @@ } } - .c-homepage-feature--60-40 { // Supports @supports #{$supports-grid} { diff --git a/src/css/components/_c-linkroll.scss b/src/css/components/_c-linkroll.scss index ff046ebe9..036f77a43 100644 --- a/src/css/components/_c-linkroll.scss +++ b/src/css/components/_c-linkroll.scss @@ -2,17 +2,16 @@ // // Style guide: Components.linkroll .c-linkroll { - margin-top: 1rem; + margin-top: $mt-2; } - .c-linkroll__link { border-left: $border-thicker solid; @include var(border-color, linkroll-gray); padding: 1.25rem 1.75rem; text-decoration: none; - transition: - background-color $animation-duration-shorter $animation-easing-character, + transition: background-color $animation-duration-shorter + $animation-easing-character, color $animation-duration-shorter $animation-easing-character; // States @@ -81,37 +80,31 @@ } } - .c-linkroll__link--featured { border-top: $border-thicker solid transparent; border-left: none; } - .c-linkroll__entry { @include preserve-list-semantics(); @include var(background-color, card-background); margin-top: 1.25rem; } - .c-linkroll__category { @include var(color, card-meta-text); } - .c-linkroll__category--featured { padding-top: 1rem; } - .c-linkroll__title { @include var(color, card-text); line-height: $line-height-tight; text-decoration: none; } - .c-linkroll__featured { border-bottom: $border-thin dotted transparent; @include var(color, card-text); diff --git a/src/css/components/_c-logo.scss b/src/css/components/_c-logo.scss index 9d1f366d9..30e699655 100644 --- a/src/css/components/_c-logo.scss +++ b/src/css/components/_c-logo.scss @@ -46,7 +46,6 @@ } } - .c-logo__lockup { // Supports @supports #{$supports-flex} { @@ -56,7 +55,6 @@ } } - .c-logo__icon { fill: $color-white; transition: transform $animation-duration-shortest $animation-easing-character; // SEE: `.c-logo__link`'s hover/focus states @@ -67,9 +65,8 @@ } } - .c-logo__wordmark { fill: $color-white; margin-top: 0.25rem; - margin-left: 0.5rem; + margin-left: $ml-1; } diff --git a/src/css/components/_c-person.scss b/src/css/components/_c-person.scss index 228bbec56..9709afd4b 100644 --- a/src/css/components/_c-person.scss +++ b/src/css/components/_c-person.scss @@ -1,13 +1,13 @@ $_person-distance: ( small: 6rem, - large: 14rem + large: 14rem, ); .c-person { - margin-top: 2rem; + margin-top: $mt-4; &:first-of-type { - margin-top: 0; + margin-top: $mt-0; } } @@ -50,7 +50,7 @@ $_person-distance: ( @include avatar-size("medium"); left: initial; - margin-left: 1rem; + margin-left: $ml-2; right: initial; } @@ -71,16 +71,16 @@ $_person-distance: ( } } - .c-person__info { border: $border-thinnest solid; @include var(border-color, card-outline); @include var(background-color, card-background); - margin-top: 4rem; + margin-top: $mt-8; min-height: 10rem; padding: 1.5rem; max-width: $global-type-measure; - transition: $animation-duration-shorter $animation-easing-character background-color; + transition: $animation-duration-shorter $animation-easing-character + background-color; // Breakpoints @include mappy-bp(palm-small) { @@ -106,7 +106,6 @@ $_person-distance: ( } } - .c-person__link { @include link-states(card-heading-text); font-family: $font-family-secondary; @@ -124,15 +123,13 @@ $_person-distance: ( } } - .c-person__spotlight-link { @include link-states(card-heading-text); display: inline-block; - margin-top: 1rem; + margin-top: $mt-2; } - .c-person__name { font-family: $font-family-secondary; @@ -150,9 +147,8 @@ $_person-distance: ( } } - .c-person__biography { font-family: $font-family-secondary; - margin-top: 1rem; + margin-top: $mt-2; max-width: $global-type-measure; } diff --git a/src/css/components/_c-post-collection.scss b/src/css/components/_c-post-collection.scss index 8e6ed00f6..b79f47cf2 100644 --- a/src/css/components/_c-post-collection.scss +++ b/src/css/components/_c-post-collection.scss @@ -2,49 +2,45 @@ border-top: $border-thicker solid currentColor; @include var(background-color, post-rec-background); @include var(color, post-rec-accent); - counter-reset: post-collection; - padding: 1rem 2rem; + counter-reset: post-collection; + padding: 1rem 2rem; max-width: 68ex; } - .c-post-collection__title { border-bottom: $border-thin dotted currentColor; - margin-top: 0; + margin-top: $mt-0; padding-bottom: 1rem; } - .c-post-collection__list { - margin-top: 1rem; - list-style-type: none; + margin-top: $mt-2; + list-style-type: none; } - .c-post-collection__item { @include var(color, post-rec-text); - position: relative; - margin-top: 0.5rem; - counter-increment: post-collection; - font-family: $font-family-secondary; - - &::before { - content: "Part " counter(post-collection) ": "; - text-transform: uppercase; - } + position: relative; + margin-top: $mt-1; + counter-increment: post-collection; + font-family: $font-family-secondary; + + &::before { + content: "Part " counter(post-collection) ": "; + text-transform: uppercase; + } } - .c-post-collection__link { @include link-states(post-rec-accent, post-rec-focus-text); // States - &[aria-current] { - text-decoration: none; - color: currentColor; + &[aria-current] { + text-decoration: none; + color: currentColor; &:focus { @include var(color, post-rec-focus-text); } - } + } } diff --git a/src/css/components/_c-post.scss b/src/css/components/_c-post.scss index 366141395..e614ebeea 100644 --- a/src/css/components/_c-post.scss +++ b/src/css/components/_c-post.scss @@ -1,7 +1,6 @@ $_c-post-breathing-room: 6ex; $_c-post-vertical-spacing: 4ex; - // Post // // A post component contains all content and information used for The A11Y @@ -60,7 +59,6 @@ $_c-post-vertical-spacing: 4ex; } } - .c-post__category__link { @include link-states(rte-accent); text-decoration: none; @@ -71,12 +69,12 @@ $_c-post-vertical-spacing: 4ex; } } - .c-post__title { @include var(color, heading-text); font-size: $font-size-heading-small; line-height: $line-height-tight; - margin: 0.75rem map-get($global-post-content-inset, small) 2rem map-get($global-post-content-inset, small); + margin: 0.75rem map-get($global-post-content-inset, small) 2rem + map-get($global-post-content-inset, small); padding-right: 1rem; // Breakpoints @@ -98,13 +96,12 @@ $_c-post-vertical-spacing: 4ex; } @include mappy-bp(lap-medium) { - margin-top: 0; + margin-top: $mt-0; margin-left: map-get($global-post-content-inset, small); } } } - .c-post__metadata { border-top: $border-thinnest solid; border-bottom: $border-thick solid; @@ -139,20 +136,18 @@ $_c-post-vertical-spacing: 4ex; } } - .c-post__metadata--author, .c-post__metadata--published, .c-post__metadata--updated { display: block; } - .c-post__metadata--author { - margin-bottom: 0.5rem; + margin-bottom: $mb-1; // Breakpoints @include mappy-bp(lap-small) { - margin-bottom: 0; + margin-bottom: $mb-0; } // Supports @@ -162,12 +157,11 @@ $_c-post-vertical-spacing: 4ex; // Breakpoints @include mappy-bp(lap-small) { flex-grow: 4; - margin-bottom: 0; + margin-bottom: $mb-0; } } } - .c-post__metadata--published, .c-post__metadata--updated { // Supports @@ -176,18 +170,16 @@ $_c-post-vertical-spacing: 4ex; // Breakpokints @include mappy-bp(lap-small) { - margin-left: 0.5rem; + margin-left: $ml-1; } } } - .c-post__metadata-link { @include link-states(heading-text); text-underline-offset: 0.2em; } - .c-post__list-item { // Supports @supports #{$supports-flex} { @@ -195,7 +187,6 @@ $_c-post-vertical-spacing: 4ex; } } - .c-content { line-height: $line-height-double; diff --git a/src/css/components/_c-preface.scss b/src/css/components/_c-preface.scss index 403024058..74a4a9857 100644 --- a/src/css/components/_c-preface.scss +++ b/src/css/components/_c-preface.scss @@ -1,7 +1,7 @@ .c-preface { @include var(color, text-accent); - margin-top: 0.5rem; - margin-bottom: 2rem; + margin-top: $mt-1; + margin-bottom: $mb-4; margin-left: $_card-inset; max-width: $global-type-measure; } diff --git a/src/css/components/_c-primary-nav.scss b/src/css/components/_c-primary-nav.scss index bd231a495..9a4e98f48 100644 --- a/src/css/components/_c-primary-nav.scss +++ b/src/css/components/_c-primary-nav.scss @@ -5,35 +5,33 @@ @include var(background-color, nav-background); } - .c-primary-nav__list { @include preserve-list-semantics(); } - .c-primary-nav__list-item { - margin-top: 1rem; + margin-top: $mt-2; text-align: center; // Supports @supports #{$supports-flex} { - margin-top: 1rem; + margin-top: $mt-2; margin-left: 0; width: 33%; // Breakpoints @include mappy-bp(palm-small) { - margin-right: 0.5rem; + margin-right: $mr-1; width: initial; flex-grow: 1; } @include mappy-bp(palm-medium) { - margin-right: 1rem; + margin-right: $mr-2; } @include mappy-bp(lap-small) { - margin-top: 0; + margin-top: $mt-0; } } @@ -63,14 +61,14 @@ } } - .c-primary-nav__link { border-bottom: $border-thinner solid transparent; @include var(color, nav-link-text); font-family: $font-family-secondary; padding: 0.25rem 0.5rem; text-decoration: none; - transition: $animation-duration-short $animation-easing-character border-bottom-color; + transition: $animation-duration-short $animation-easing-character + border-bottom-color; // States &:hover { diff --git a/src/css/components/_c-recommended-reading.scss b/src/css/components/_c-recommended-reading.scss index 384bef00f..afd8d8572 100644 --- a/src/css/components/_c-recommended-reading.scss +++ b/src/css/components/_c-recommended-reading.scss @@ -15,7 +15,6 @@ } } - .c-recommended-reading__wrapper { // Supports @supports #{$supports-flex} { @@ -25,7 +24,6 @@ } } - .c-recommended-reading__link { border-top: $border-thicker solid currentColor; @include var(background-color, post-rec-background); @@ -33,8 +31,8 @@ line-height: $line-height-tight; padding: 1rem; text-decoration: none; - transition: - background-color $animation-duration-shorter $animation-easing-character, + transition: background-color $animation-duration-shorter + $animation-easing-character, color $animation-duration-shorter $animation-easing-character; // States @@ -63,19 +61,17 @@ } } - .c-recommended-reading__category { border-bottom: $border-thin dotted currentColor; display: block; padding-bottom: 0.75rem; } - .c-recommended-reading__title { @include var(color, post-rec-text); display: block; font-size: $font-size-body-tiny; - margin-top: 1rem; + margin-top: $mt-2; // Breakpoints @include mappy-bp(palm-small) { diff --git a/src/css/components/_c-simple.scss b/src/css/components/_c-simple.scss index c7453c678..8f345a565 100644 --- a/src/css/components/_c-simple.scss +++ b/src/css/components/_c-simple.scss @@ -12,23 +12,21 @@ object-fit: contain; @include var(color, hero-background-text); } - } - .c-simple__hero { position: relative; border-top: $border-thicker solid; @include var(background-color, hero-content-background); @include var(border-color, hero-content-accent); @include var(color, hero-content-text); - margin-top: 2rem; + margin-top: $mt-4; padding: 1rem 2rem 2rem; z-index: 1; // Supports @supports #{$supports-flex} { - margin-top: 0; + margin-top: $mt-0; // Breakpoints @include mappy-bp(palm-large) { @@ -43,11 +41,10 @@ // Text-level formatting p { font-family: $font-family-secondary; - margin-top: 1.5rem; + margin-top: $mt-3; } } - .c-simple__link { @include link-states(link-text); diff --git a/src/css/components/_c-sponsors.scss b/src/css/components/_c-sponsors.scss index 737cc4599..a12371a82 100644 --- a/src/css/components/_c-sponsors.scss +++ b/src/css/components/_c-sponsors.scss @@ -2,14 +2,13 @@ @include var(background-color, sponsors-background); } - .c-sponsor__link { width: $global-sponsor-width; - margin-bottom: 1rem; + margin-bottom: $mb-2; @include var(color, body-text); &:last-of-type { - margin-bottom: 0; + margin-bottom: $mb-0; } // States @@ -21,12 +20,11 @@ @supports #{$supports-grid} { // Breakpoints @include mappy-bp(palm-medium) { - margin-bottom: 0; + margin-bottom: $mb-0; } } } - .c-sponsor__ad { filter: var(--image-filter); } diff --git a/src/css/components/_c-spotlight.scss b/src/css/components/_c-spotlight.scss index 572e763e5..90d38d2e2 100644 --- a/src/css/components/_c-spotlight.scss +++ b/src/css/components/_c-spotlight.scss @@ -1,4 +1,3 @@ - .c-spotlight__hero-avatar { @include avatar-size("hero"); @@ -7,7 +6,7 @@ // Breakpoints @include mappy-bp(lap-small) { margin-left: auto; - margin-right: 3rem; + margin-right: $mr-6; } } @@ -17,7 +16,6 @@ } } - .c-spotlight__subheading { @include var(color, text-accent); display: block; diff --git a/src/css/components/_c-theme-switcher.scss b/src/css/components/_c-theme-switcher.scss index 63dc19e32..85667dc82 100644 --- a/src/css/components/_c-theme-switcher.scss +++ b/src/css/components/_c-theme-switcher.scss @@ -1,27 +1,23 @@ .c-theme-switcher { border: none; - margin: 0; - padding: 0; + margin: $m-0; + padding: $p-0; } - .c-theme-switcher__wrapper { display: flex; flex-direction: row; } - .c-theme-switcher__title { display: inline; padding-right: 1rem; } - .c-theme-switcher__input { @include var(accent-color, input-accent); } - .c-theme-switcher__label { margin-right: 0.75rem; padding-left: 0.25rem; diff --git a/src/css/components/_c-wcag-explanation.scss b/src/css/components/_c-wcag-explanation.scss index 105595892..28d70937c 100644 --- a/src/css/components/_c-wcag-explanation.scss +++ b/src/css/components/_c-wcag-explanation.scss @@ -1,7 +1,7 @@ .c-wcag-explanation { @include var(background-color, featured-card-background); font-family: $font-family-secondary; - margin-bottom: 1rem; + margin-bottom: $mb-2; padding: 0.5rem 1.5rem 2rem; // Breakpoints @@ -11,19 +11,18 @@ // Text-level formatting p { - margin-top: 1.5rem; + margin-top: $mt-3; max-width: $global-type-measure; } } - .c-wcag-explanation__compliance-level { - margin-top: 2rem; + margin-top: $mt-4; max-width: $global-type-measure; // Breakpoints @include mappy-bp(palm-large) { - margin-top: 0.5rem; + margin-top: $mt-1; // Supports @supports #{$supports-flex} { @@ -33,13 +32,12 @@ // This knocks it back into position. &:last-of-type { position: relative; - right: 1rem; + right: 1rem; } } } } - .c-wcag-explanation__icon { width: 65%; @@ -52,20 +50,19 @@ @include mappy-bp(palm-large) { // Supports @supports #{$supports-flex} { - margin-top: 2rem; - margin-right: 1.5rem; + margin-top: $mt-4; + margin-right: $mr-3; width: rem(320); } } } - .c-wcag-explanation__conformance-level { display: block; font-weight: $font-weight-bold; // Breakpoints @include mappy-bp(palm-large) { - margin-top: 0; + margin-top: $mt-0; } } diff --git a/src/css/components/content/_cms.scss b/src/css/components/content/_cms.scss index 9afd54fd1..7659cfe1e 100644 --- a/src/css/components/content/_cms.scss +++ b/src/css/components/content/_cms.scss @@ -29,12 +29,12 @@ } .footnotes-list { - margin-top: 1rem; + margin-top: $mt-2; } .footnote-item { p { - margin-top: 0; + margin-top: $mt-0; } } diff --git a/src/css/components/content/_inline-content.scss b/src/css/components/content/_inline-content.scss index 3a5b79e9c..7a5c4adf0 100644 --- a/src/css/components/content/_inline-content.scss +++ b/src/css/components/content/_inline-content.scss @@ -20,13 +20,11 @@ } } - kbd { margin-left: 0.25ch; margin-right: 0.25ch; } - // Blockquote // // Style guide: Components.post.blockquote @@ -39,7 +37,7 @@ padding: 1.5rem 1rem; p:first-of-type { - margin-bottom: 0; + margin-bottom: $mb-0; } // Breakpoints @@ -86,7 +84,6 @@ } } - // Preformatted Text // // Style guide: Components.post.pre @@ -117,7 +114,6 @@ margin-top: 4ex; } - // Table // // Style guide: Components.post.table diff --git a/src/css/components/content/_lists.scss b/src/css/components/content/_lists.scss index 54b60a0fe..5b7345738 100644 --- a/src/css/components/content/_lists.scss +++ b/src/css/components/content/_lists.scss @@ -36,20 +36,19 @@ font-size: 3ex; height: 1rem; position: relative; - top: rem(9); - right: 1.75rem; + top: rem(9); + right: 1.75rem; width: 1rem; } } ol { - margin-top: 0; - margin-left: 2rem; - margin-bottom: 1rem; + margin-top: $mt-0; + margin-left: $ml-4; + margin-bottom: $mb-2; } } - // Unordered List // // Style guide: Components.post.ul @@ -71,19 +70,18 @@ font-size: 2ex; height: 1rem; position: relative; - top: rem(20); - right: rem(36); + top: rem(20); + right: rem(36); width: 1rem; } ul { - margin-top: 0; - margin-left: 2rem; + margin-top: $mt-0; + margin-left: $ml-4; } } } - // Definition List // // Style guide: Components.post.dl @@ -92,7 +90,7 @@ dt { font-weight: $font-weight-bold; - margin-top: 1.5rem; + margin-top: $mt-3; margin-left: map-get($global-post-content-inset, small) * -1; } @@ -102,7 +100,6 @@ } } - .c-further-reading__source { display: block; font-family: $font-family-secondary; diff --git a/src/css/components/content/_spacing.scss b/src/css/components/content/_spacing.scss index d0f8507a4..07454a8b5 100644 --- a/src/css/components/content/_spacing.scss +++ b/src/css/components/content/_spacing.scss @@ -35,7 +35,7 @@ .template-collection & { p:first-of-type { - margin-top: 0; + margin-top: $mt-0; } } @@ -51,7 +51,7 @@ font-size: 1.25rem; font-family: $font-family-secondary; line-height: $line-height-looser; - margin-top: 0; + margin-top: $mt-0; margin-bottom: $_c-post-vertical-spacing * 1.25; @include post-content-flourish(169, 0.75rem); } diff --git a/src/css/layout/_l-footer.scss b/src/css/layout/_l-footer.scss index 6e226f23b..822b0407b 100644 --- a/src/css/layout/_l-footer.scss +++ b/src/css/layout/_l-footer.scss @@ -8,13 +8,12 @@ } } - // [1] Adds and removes the tagline from the footer nav lockup by toggling // its presence in the DOM. Nested CSS grids won't zoom properly and cause text // to not break, so we need to use this approach. .l-footer__meta--footer { display: initial; - margin-top: 3rem; + margin-top: $mt-6; // Breakpoints @include mappy-bp(palm-small) { @@ -22,7 +21,7 @@ } @include mappy-bp(lap-small) { - margin-top: 6rem; + margin-top: $mt-12; } @include mappy-bp(lap-small) { @@ -30,7 +29,6 @@ } } - .l-footer__meta--nav { @include hide(remove); // [1] @@ -48,12 +46,10 @@ } } - .l-footer__theme-switcher { - margin-top: 1rem; + margin-top: $mt-2; } - .l-footer__tagline-copyright { // Supports @supports #{$supports-flex} { @@ -64,26 +60,24 @@ @include mappy-bp(lap-small) { flex-direction: row; justify-content: space-between; - margin-top: 1rem; + margin-top: $mt-2; } } } - .l-footer__copyright { - margin-top: 2rem; + margin-top: $mt-4; // Supports @supports #{$supports-flex} { // Breakpoints @include mappy-bp(lap-small) { - margin-top: 0; + margin-top: $mt-0; } } } - .l-footer__top { - margin-top: 1rem; + margin-top: $mt-2; // Breakpoints @include mappy-bp(palm-small) { @@ -91,6 +85,6 @@ } @include mappy-bp(lap-small) { - margin-top: 0; + margin-top: $mt-0; } } diff --git a/src/css/layout/_l-generic-title.scss b/src/css/layout/_l-generic-title.scss index f29465473..a9b867262 100644 --- a/src/css/layout/_l-generic-title.scss +++ b/src/css/layout/_l-generic-title.scss @@ -1,5 +1,5 @@ .l-generic-title { -background-color: #ffc2cc; + background-color: #ffc2cc; // Supports @supports #{$supports-flex} { // Breakpoints @@ -29,12 +29,11 @@ background-color: #ffc2cc; } } - .l-hero__promo { margin-left: map-get($global-bleed, small); margin-right: map-get($global-bleed, small); position: relative; - top: 50%; + top: 50%; transform: perspective(1px) translateY(-60%); // HACK: Keeps`perspective(1px)` keeps content from rendering blurry // Supports @@ -63,8 +62,8 @@ background-color: #ffc2cc; // Breakpoints @include mappy-bp(palm-large) { - margin-top: 0; - margin-bottom: 0; + margin-top: $mt-0; + margin-bottom: $mb-0; position: unset; transform: none; } diff --git a/src/css/layout/_l-hero.scss b/src/css/layout/_l-hero.scss index 0ba755217..bf840074e 100644 --- a/src/css/layout/_l-hero.scss +++ b/src/css/layout/_l-hero.scss @@ -1,7 +1,8 @@ .l-hero { position: relative; height: auto; - padding: map-get($global-bleed, small) 0 (map-get($global-bleed, large) * 1.5) 0; + padding: map-get($global-bleed, small) 0 (map-get($global-bleed, large) * 1.5) + 0; @include mappy-bp(lap-large) { height: 75vh; @@ -39,7 +40,6 @@ } } - .l-hero__promo { margin-left: map-get($global-bleed, small); margin-right: map-get($global-bleed, small); @@ -74,14 +74,14 @@ // Breakpoints @include mappy-bp(palm-large) { - margin-top: 0; - margin-bottom: 0; + margin-top: $mt-0; + margin-bottom: $mb-0; position: unset; transform: none; } @include mappy-bp(lap-small) { - margin: 0; + margin: $m-0; } @include mappy-bp(lap-large) { diff --git a/src/css/layout/_l-post.scss b/src/css/layout/_l-post.scss index 4a356dbac..d4c4597bb 100644 --- a/src/css/layout/_l-post.scss +++ b/src/css/layout/_l-post.scss @@ -1,12 +1,11 @@ .l-post { - margin-top: 2rem; + margin-top: $mt-4; // Breakpoints @include mappy-bp(lap-medium) { - margin-top: 4rem; + margin-top: $mt-8; } - &--collection { .l-post__header, .l-post__body { @@ -20,14 +19,18 @@ } } - .l-post__header { // Breakpoints @include mappy-bp(lap-medium) { // Supports @supports #{$supports-grid} { display: grid; - grid-template-columns: map-get($global-post-columns, category) map-get($global-post-columns, gutter) 2fr 2rem map-get($global-post-columns, toc); + grid-template-columns: + map-get($global-post-columns, category) map-get( + $global-post-columns, + gutter + ) + 2fr 2rem map-get($global-post-columns, toc); grid-template-rows: auto auto; grid-template-areas: "category . title . ." @@ -36,7 +39,6 @@ } } - .l-post__body { margin-top: 6ex; @@ -45,14 +47,18 @@ // Supports @supports #{$supports-grid} { display: grid; - grid-template-columns: map-get($global-post-columns, category) map-get($global-post-columns, gutter) 2fr 2rem map-get($global-post-columns, toc); + grid-template-columns: + map-get($global-post-columns, category) map-get( + $global-post-columns, + gutter + ) + 2fr 2rem map-get($global-post-columns, toc); grid-template-rows: auto auto; grid-template-areas: ". . content . toc"; } } } - .l-post__category { // Supports @supports #{$supports-grid} { @@ -60,7 +66,6 @@ } } - .l-post__title { // Supports @supports #{$supports-grid} { @@ -68,7 +73,6 @@ } } - .l-post__metadata { // Supports @supports #{$supports-grid} { @@ -76,7 +80,6 @@ } } - .l-post__content { @include post-content-inset("small"); @@ -102,12 +105,11 @@ } @include mappy-bp(lap-small) { - margin-top: 0; + margin-top: $mt-0; } } } - .l-post__linkroll { // Supports @supports #{$supports-grid} { diff --git a/src/css/layout/_l-primary-nav.scss b/src/css/layout/_l-primary-nav.scss index 4670b395a..6d4db20f6 100644 --- a/src/css/layout/_l-primary-nav.scss +++ b/src/css/layout/_l-primary-nav.scss @@ -20,16 +20,15 @@ } } - .l-primary-nav__sections { - margin-top: 1rem; + margin-top: $mt-2; width: 100%; // Supports @supports #{$supports-flex} { display: flex; flex-flow: row wrap; - margin-top: 0; + margin-top: $mt-0; // Breakpoints @include mappy-bp(palm-small) { diff --git a/src/css/layout/_l-toc.scss b/src/css/layout/_l-toc.scss index 7d56f0e7e..1b75ffd41 100644 --- a/src/css/layout/_l-toc.scss +++ b/src/css/layout/_l-toc.scss @@ -18,57 +18,57 @@ margin-top: 17.5rem; .l-toc { - margin-top: 0; // BUG: .v-toc is getting regenerated on some pages - margin-left: 1.5rem; // BUG: .v-toc is getting regenerated on some pages + margin-top: $mt-0; // BUG: .v-toc is getting regenerated on some pages + margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages } } } .template-checklist & { .l-toc { - margin-left: 1.5rem; // BUG: .v-toc is getting regenerated on some pages + margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages } } .template-resources & { .l-toc { - margin-left: 1.5rem; // BUG: .v-toc is getting regenerated on some pages + margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages } } .template-about & { .l-toc { - margin-left: 1.5rem; // BUG: .v-toc is getting regenerated on some pages + margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages } } .template-contribute & { .l-toc { - margin-left: 1.5rem; // BUG: .v-toc is getting regenerated on some pages + margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages } } .template-team & { .l-toc { - margin-left: 1.5rem; // BUG: .v-toc is getting regenerated on some pages + margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages } } .template-authors & { .l-toc { - margin-left: 1.5rem; // BUG: .v-toc is getting regenerated on some pages + margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages } } .template-spotlight & { .l-toc { - margin-left: 1.5rem; // BUG: .v-toc is getting regenerated on some pages + margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages } } .template-posts & { .l-toc { - margin-left: 1.5rem; // BUG: .v-toc is getting regenerated on some pages + margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages } } @@ -78,7 +78,7 @@ // Breakpoints @include mappy-bp(palm-medium) { margin-right: map-get($global-post-content-inset, "medium"); - margin-bottom: 2rem; + margin-bottom: $mb-4; margin-left: map-get($global-post-content-inset, "medium") * 0.5; } diff --git a/src/css/logic/_mixins.headings.scss b/src/css/logic/_mixins.headings.scss index 2b5d5d0cd..b62fc37ec 100644 --- a/src/css/logic/_mixins.headings.scss +++ b/src/css/logic/_mixins.headings.scss @@ -4,7 +4,6 @@ // // Styleguide Logic.Mixins.Headings - // heading-largest // // Weight: 4 @@ -16,7 +15,7 @@ @mixin heading-largest() { font-size: 3rem; line-height: $line-height-single; - margin-bottom: 1rem; + margin-bottom: $mb-2; // Breakpoints @include mappy-bp(lap-small) { @@ -24,7 +23,6 @@ } } - // heading-large // // Weight: 5 diff --git a/src/css/logic/_mixins.hide.scss b/src/css/logic/_mixins.hide.scss index 07a40482d..79d6c10ce 100644 --- a/src/css/logic/_mixins.hide.scss +++ b/src/css/logic/_mixins.hide.scss @@ -13,7 +13,7 @@ height: 1px; margin: -1px; overflow: hidden; - padding: 0; + padding: $p-0; position: absolute; white-space: nowrap; width: 1px; @@ -22,7 +22,7 @@ &:focus { clip: auto; height: auto; - margin: 0; + margin: $m-0; overflow: visible; position: static; width: auto; diff --git a/src/css/logic/_mixins.lede.scss b/src/css/logic/_mixins.lede.scss index 9a401217e..9ab1a0735 100644 --- a/src/css/logic/_mixins.lede.scss +++ b/src/css/logic/_mixins.lede.scss @@ -9,5 +9,5 @@ @mixin lede() { font-size: 1.15rem; line-height: $line-height-double; - margin-top: 0; + margin-top: $mt-0; } diff --git a/src/css/utilities/_spacing.scss b/src/css/utilities/_spacing.scss index b927d841b..6f8689c72 100644 --- a/src/css/utilities/_spacing.scss +++ b/src/css/utilities/_spacing.scss @@ -31,7 +31,7 @@ } .u-spacing-top-shorter { - margin-top: 0.5rem; + margin-top: $mt-1; } .u-spacing-top-short { @@ -39,28 +39,27 @@ } .u-spacing-top-medium { - margin-top: 1rem; + margin-top: $mt-2; } .u-spacing-top-long { - margin-top: 1.5rem; + margin-top: $mt-3; } .u-spacing-top-longer { - margin-top: 2rem; + margin-top: $mt-4; } .u-spacing-top-longest { - margin-top: 3rem; + margin-top: $mt-6; } - .u-spacing-right-shortest { margin-right: 0.25rem; } .u-spacing-right-shorter { - margin-right: 0.5rem; + margin-right: $mr-1; } .u-spacing-right-short { @@ -68,28 +67,27 @@ } .u-spacing-right-medium { - margin-right: 1rem; + margin-right: $mr-2; } .u-spacing-right-long { - margin-right: 1.5rem; + margin-right: $mr-3; } .u-spacing-right-longer { - margin-right: 2rem; + margin-right: $mr-4; } .u-spacing-right-longest { - margin-right: 3rem; + margin-right: $mr-6; } - .u-spacing-bottom-shortest { margin-bottom: 0.25rem; } .u-spacing-bottom-shorter { - margin-bottom: 0.5rem; + margin-bottom: $mb-1; } .u-spacing-bottom-short { @@ -97,7 +95,7 @@ } .u-spacing-bottom-medium { - margin-bottom: 1rem; + margin-bottom: $mb-2; } .u-spacing-bottom-long { @@ -105,20 +103,19 @@ } .u-spacing-bottom-longer { - margin-bottom: 2rem; + margin-bottom: $mb-4; } .u-spacing-bottom-longest { - margin-bottom: 3rem; + margin-bottom: $mb-6; } - .u-spacing-left-shortest { margin-left: 0.25rem; } .u-spacing-left-shorter { - margin-left: 0.5rem; + margin-left: $ml-1; } .u-spacing-left-short { @@ -126,18 +123,17 @@ } .u-spacing-left-medium { - margin-left: 1rem; + margin-left: $ml-2; } .u-spacing-left-long { - margin-left: 1.5rem; + margin-left: $ml-3; } .u-spacing-left-longer { - margin-left: 2rem; + margin-left: $ml-4; } .u-spacing-left-longest { margin-left: 3rem; } - diff --git a/src/css/utilities/_variables.scss b/src/css/utilities/_variables.scss new file mode 100644 index 000000000..7b1324761 --- /dev/null +++ b/src/css/utilities/_variables.scss @@ -0,0 +1,55 @@ +// Variables + +// Declaration of common measurements for margin and padding + +//$m-0:0rem +//$m-1:0.5rem +//$m-2:1rem +//$m-3:1.5rem +//$m-4:2rem +//$m-5:2.5rem +//$m-6:3rem +//$m-7:3.5rem +//$m-8:4rem +//$m-9:4.5rem +//$m-10:5rem +//$m-11:5.5rem +//$m-12:6rem + + +// margin +$m-0: margin: 0; + +// margin-top +$mt-0: margin-top: 0; +$mt-1: margin-top: 0.5rem; +$mt-2: margin-top: 1rem; +$mt-3: margin-top: 1.5rem; +$mt-4: margin-top: 2rem; +$mt-6: margin-top: 3rem; +$mt-8: margin-top: 4rem; +$mt-12: margin-top: 6rem; + +// margin-right +$mr-1: margin-right: 0.5rem; +$mr-2: margin-right: 1rem; +$mr-3: margin-right: 1.5rem; +$mr-4: margin-right: 2rem; +$mr-6: margin-right: 3rem; + +// margin-bottom +$mb-0: margin-bottom: 0; +$mb-1: margin-bottom: 0.5rem; +$mb-2: margin-bottom: 1rem; +$mb-4: margin-bottom: 2rem; +$mb-6: margin-bottom: 3rem; + +// margin-left +$ml-1: margin-left: 0.5rem; +$ml-2: margin-left: 1rem; +$ml-3: margin-left: 1.5rem; +$ml-4: margin-left: 2rem; + +// padding +$p-0: padding: 0; +$p-1: padding: 0.5rem; diff --git a/src/css/vendor/_v-toc.scss b/src/css/vendor/_v-toc.scss index f53ddfbf0..ddfd47274 100644 --- a/src/css/vendor/_v-toc.scss +++ b/src/css/vendor/_v-toc.scss @@ -1,7 +1,7 @@ // tableOfContents.js // http://github.com/cferdinandi/table-of-contents .v-toc { - margin-right: 2rem; + margin-right: $mr-4; position: relative; z-index: z(component); @@ -60,11 +60,10 @@ width: 1rem; } - .v-toc__title { display: block; font-weight: 700; - margin-left: 0.5rem; + margin-left: $ml-1; /* stylelint-disable-next-line property-no-unknown */ text-decoration-thickness: $border-thinnest; text-underline-offset: 0.5em; @@ -75,7 +74,6 @@ } } - .v-toc__nav { padding: 0 1rem 1.55rem 0; @@ -90,7 +88,7 @@ padding-top: none; list-style-type: none; - ol { + ol { padding-left: 1rem; } } @@ -104,7 +102,7 @@ // Supports @supports #{$supports-flex} { - margin-bottom: 0; + margin-bottom: $mb-0; } code { @@ -119,11 +117,11 @@ text-transform: none; &:first-of-type { - margin-top: 1rem; + margin-top: $mt-2; // Supports @supports #{$supports-flex} { - margin-top: 0; + margin-top: $mt-0; } } @@ -142,8 +140,7 @@ a[href] { @include var(color, toc-link-text); text-decoration: none; - transition: - $animation-duration-short $animation-easing-character color, + transition: $animation-duration-short $animation-easing-character color, $animation-duration-short $animation-easing-character border; // Supports From 90eb6df7baf55d8aae6aed0a8b424488ab36320d Mon Sep 17 00:00:00 2001 From: Natalia Date: Tue, 20 Jun 2023 08:43:58 +0200 Subject: [PATCH 3/6] feat: import variables into screen sheet --- src/css/screen.scss | 185 +++++++++++++------------------------------- 1 file changed, 54 insertions(+), 131 deletions(-) diff --git a/src/css/screen.scss b/src/css/screen.scss index 98f2444be..90ff2a69f 100755 --- a/src/css/screen.scss +++ b/src/css/screen.scss @@ -1,9 +1,8 @@ @charset "UTF-8"; // Imports -@import "../../node_modules/normalize.css/normalize", -"imports/fonts", -"imports/mappy-breakpoints"; +@import "../../node_modules/normalize.css/normalize", "imports/fonts", + "imports/mappy-breakpoints"; // Brand // @@ -12,9 +11,7 @@ // The visual assets that set the overall tone and aesthetic for the site. // // Styleguide Brand -@import "brand/colors", -"brand/logos", -"brand/typefaces"; +@import "brand/colors", "brand/logos", "brand/typefaces"; // Variables // @@ -25,17 +22,12 @@ // variable is used. // // Styleguide Logic.Variables -@import "logic/variables.paths", -"logic/variables.supports", -"logic/variables.animation-duration", -"logic/variables.animation-easing", -"logic/variables.borders", -"logic/variables.font-families", -"logic/variables.font-sizes", -"logic/variables.font-tracking", -"logic/variables.font-weights", -"logic/variables.line-heights", -"logic/variables.global"; +@import "logic/variables.paths", "logic/variables.supports", + "logic/variables.animation-duration", "logic/variables.animation-easing", + "logic/variables.borders", "logic/variables.font-families", + "logic/variables.font-sizes", "logic/variables.font-tracking", + "logic/variables.font-weights", "logic/variables.line-heights", + "logic/variables.global"; // Maps // @@ -44,8 +36,7 @@ // Maps are collections of related values contained in a variable. // // Styleguide Logic.Maps -@import "logic/maps.breakpoints", -"logic/maps.z-index"; +@import "logic/maps.breakpoints", "logic/maps.z-index"; // Functions // @@ -54,12 +45,8 @@ // Functions allow you to use conditional logic for your CSS values. // // Styleguide Logic.Functions -@import "logic/functions.strip-unit", -"logic/functions.em", -"logic/functions.rem", -"logic/functions.modular-scale", -"logic/functions.z"; - +@import "logic/functions.strip-unit", "logic/functions.em", + "logic/functions.rem", "logic/functions.modular-scale", "logic/functions.z"; // Mixins // @@ -69,22 +56,13 @@ // They also let you use conditional logic to adjust what is declared. // // Styleguide Logic.Mixins -@import "logic/mixins.var", -"logic/mixins.avatar-size", -"logic/mixins.clearfix", -"logic/mixins.color-scheme", -"logic/mixins.content-inset", -"logic/mixins.dark-mode", -"logic/mixins.headings", -"logic/mixins.hide", -"logic/mixins.lede", -"logic/mixins.link-states", -"logic/mixins.post-content-flourish", -"logic/mixins.post-content-inset", -"logic/mixins.preserve-list-semantics", -"logic/mixins.responsify", -"logic/mixins.shift-click", -"logic/mixins.show"; +@import "logic/mixins.var", "logic/mixins.avatar-size", "logic/mixins.clearfix", + "logic/mixins.color-scheme", "logic/mixins.content-inset", + "logic/mixins.dark-mode", "logic/mixins.headings", "logic/mixins.hide", + "logic/mixins.lede", "logic/mixins.link-states", + "logic/mixins.post-content-flourish", "logic/mixins.post-content-inset", + "logic/mixins.preserve-list-semantics", "logic/mixins.responsify", + "logic/mixins.shift-click", "logic/mixins.show"; // Color Schemes // @@ -92,14 +70,10 @@ // // Sets color schemes based on CSS custom properties // -@import "color-schemes/global", -"color-schemes/blue", -"color-schemes/blue-yellow", -"color-schemes/green", -"color-schemes/green-pink", -"color-schemes/pink-blue", -"color-schemes/yellow-blue", -"color-schemes/yellow-pink"; +@import "color-schemes/global", "color-schemes/blue", + "color-schemes/blue-yellow", "color-schemes/green", "color-schemes/green-pink", + "color-schemes/pink-blue", "color-schemes/yellow-blue", + "color-schemes/yellow-pink"; // Base // @@ -109,16 +83,9 @@ // // Styleguide Base /* purgecss start ignore */ -@import "base/all", -"base/html", -"base/body", -"base/global-attributes", -"base/resets", -"base/code", -"base/links", -"base/paragraphs", -"base/lists", -"base/tables"; +@import "base/all", "base/html", "base/body", "base/global-attributes", + "base/resets", "base/code", "base/links", "base/paragraphs", "base/lists", + "base/tables"; /* purgecss end ignore */ // Layout @@ -128,21 +95,11 @@ // Classes that control [the overall arrangement of main site landmarks](https://www.scottohara.me/blog/2018/03/03/landmarks.html). // // Styleguide Layout -@import "layout/l-simple", -"layout/l-content", -"layout/l-footer", -"layout/l-footer-nav", -"layout/l-generic-title", -"layout/l-header", -"layout/l-hero", -"layout/l-lip", -"layout/l-main", -"layout/l-post", -"layout/l-primary-nav", -"layout/l-sponsors", -"layout/l-spotlight", -"layout/l-toc"; - +@import "layout/l-simple", "layout/l-content", "layout/l-footer", + "layout/l-footer-nav", "layout/l-generic-title", "layout/l-header", + "layout/l-hero", "layout/l-lip", "layout/l-main", "layout/l-post", + "layout/l-primary-nav", "layout/l-sponsors", "layout/l-spotlight", + "layout/l-toc"; // Utilities // @@ -151,12 +108,9 @@ // Utility classes are small, single-purpose classes. // // Styleguide Utilities -@import "utilities/font-families", -"utilities/font-sizes", -"utilities/hide", -"utilities/preserve-list-semantics", -"utilities/spacing", -"utilities/text-transform"; +@import "utilities/font-families", "utilities/font-sizes", "utilities/hide", + "utilities/preserve-list-semantics", "utilities/spacing", + "utilities/text-transform", "utilities/variables"; // Components // @@ -166,53 +120,25 @@ // element. // // Styleguide Components -@import "components/c-simple", -"components/c-a11y-summary", -"components/c-avatar", -"components/c-banner", -"components/c-blm-banner", -"components/c-card", -"components/c-card-post", -"components/c-card-resource", -"components/c-changelog", -"components/c-checklist", -"components/c-collection", -"components/c-cta-get-started", -"components/c-divider", -"components/c-dos-donts", -"components/c-featured", -"components/c-footer", -"components/c-form", -"components/c-further-reading", -"components/c-headings", -"components/c-hero", -"components/c-homepage-card", -"components/c-homepage-feature", -"components/c-last-updated", -"components/c-lede", -"components/c-linkroll", -"components/c-lip", -"components/c-logo", -"components/c-person", -"components/c-post", -"components/c-post-collection", -"components/c-preface", -"components/c-primary-nav", -"components/c-recommended-reading", -"components/c-skipnav", -"components/c-sponsors", -"components/c-spotlight", -"components/c-theme-switcher", -"components/c-wcag-explanation", - -"components/content/spacing", -"components/content/headings", -"components/content/links", -"components/content/lists", -"components/content/inline-content", -"components/content/cms", -"components/content/embedded"; - +@import "components/c-simple", "components/c-a11y-summary", + "components/c-avatar", "components/c-banner", "components/c-blm-banner", + "components/c-card", "components/c-card-post", "components/c-card-resource", + "components/c-changelog", "components/c-checklist", "components/c-collection", + "components/c-cta-get-started", "components/c-divider", + "components/c-dos-donts", "components/c-featured", "components/c-footer", + "components/c-form", "components/c-further-reading", "components/c-headings", + "components/c-hero", "components/c-homepage-card", + "components/c-homepage-feature", "components/c-last-updated", + "components/c-lede", "components/c-linkroll", "components/c-lip", + "components/c-logo", "components/c-person", "components/c-post", + "components/c-post-collection", "components/c-preface", + "components/c-primary-nav", "components/c-recommended-reading", + "components/c-skipnav", "components/c-sponsors", "components/c-spotlight", + "components/c-theme-switcher", "components/c-wcag-explanation", + "components/content/spacing", "components/content/headings", + "components/content/links", "components/content/lists", + "components/content/inline-content", "components/content/cms", + "components/content/embedded"; // Vendor // @@ -221,9 +147,7 @@ // Stylesheets that affect vendor and third party-supplied code. // // Styleguide Vendor -@import "vendor/v-prism-a11y-dark", -"vendor/v-toc"; - +@import "vendor/v-prism-a11y-dark", "vendor/v-toc"; // Media // @@ -234,6 +158,5 @@ // Styleguide Media @import "media/print"; - // Shame @import "shame"; From 93bd2233207181c71a747505fc009b1bd8775a95 Mon Sep 17 00:00:00 2001 From: Natalia Date: Tue, 20 Jun 2023 08:57:50 +0200 Subject: [PATCH 4/6] feat: change import order of variables --- src/css/screen.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/css/screen.scss b/src/css/screen.scss index 90ff2a69f..5f29c0187 100755 --- a/src/css/screen.scss +++ b/src/css/screen.scss @@ -29,6 +29,11 @@ "logic/variables.font-weights", "logic/variables.line-heights", "logic/variables.global"; +// Utilities Variables + +// Variables for padding and margin +@import "utilities/variables"; + // Maps // // Weight: 2 @@ -110,7 +115,7 @@ // Styleguide Utilities @import "utilities/font-families", "utilities/font-sizes", "utilities/hide", "utilities/preserve-list-semantics", "utilities/spacing", - "utilities/text-transform", "utilities/variables"; + "utilities/text-transform"; // Components // From 035064d7f94c29c69fb4bba5d58cf71f2eaf9cf0 Mon Sep 17 00:00:00 2001 From: Natalia Date: Tue, 20 Jun 2023 09:28:25 +0200 Subject: [PATCH 5/6] feat: fix declaration of variables for margin and padding --- src/css/components/_c-a11y-summary.scss | 6 +-- src/css/components/_c-banner.scss | 6 +-- src/css/components/_c-card-resource.scss | 2 +- src/css/components/_c-card.scss | 2 +- src/css/components/_c-changelog.scss | 2 +- src/css/components/_c-checklist.scss | 6 +-- src/css/components/_c-collection.scss | 38 +++++++------- src/css/components/_c-divider.scss | 4 +- src/css/components/_c-dos-donts.scss | 4 +- src/css/components/_c-featured.scss | 6 +-- src/css/components/_c-footer.scss | 12 ++--- src/css/components/_c-form.scss | 6 +-- src/css/components/_c-homepage-card.scss | 12 ++--- src/css/components/_c-homepage-feature.scss | 2 +- src/css/components/_c-linkroll.scss | 2 +- src/css/components/_c-logo.scss | 2 +- src/css/components/_c-person.scss | 12 ++--- src/css/components/_c-post-collection.scss | 6 +-- src/css/components/_c-post.scss | 14 +++--- src/css/components/_c-preface.scss | 4 +- src/css/components/_c-primary-nav.scss | 14 +++--- .../components/_c-recommended-reading.scss | 2 +- src/css/components/_c-simple.scss | 6 +-- src/css/components/_c-sponsors.scss | 6 +-- src/css/components/_c-spotlight.scss | 2 +- src/css/components/_c-wcag-explanation.scss | 14 +++--- src/css/components/content/_cms.scss | 4 +- .../components/content/_inline-content.scss | 2 +- src/css/components/content/_lists.scss | 18 +++---- src/css/components/content/_spacing.scss | 4 +- src/css/layout/_l-footer.scss | 16 +++--- src/css/layout/_l-generic-title.scss | 4 +- src/css/layout/_l-hero.scss | 4 +- src/css/layout/_l-main.scss | 9 ++-- src/css/layout/_l-post.scss | 8 +-- src/css/layout/_l-primary-nav.scss | 4 +- src/css/layout/_l-toc.scss | 22 ++++----- src/css/logic/_mixins.headings.scss | 2 +- src/css/logic/_mixins.lede.scss | 2 +- src/css/utilities/_spacing.scss | 36 +++++++------- src/css/utilities/_variables.scss | 49 ++++++------------- src/css/vendor/_v-toc.scss | 10 ++-- 42 files changed, 185 insertions(+), 201 deletions(-) diff --git a/src/css/components/_c-a11y-summary.scss b/src/css/components/_c-a11y-summary.scss index 2f212bb5d..b916e54cb 100644 --- a/src/css/components/_c-a11y-summary.scss +++ b/src/css/components/_c-a11y-summary.scss @@ -23,8 +23,8 @@ } .c-a11y-summary__explanation { - margin-top: $mt-0; - margin-bottom: $mb-0; + margin-top: $m-0; + margin-bottom: $m-0; text-align: center; // Breakpoints @@ -74,7 +74,7 @@ .c-a11y-summary__mission { font-family: $font-family-secondary; font-size: $font-size-body; - margin-top: $mt-4; + margin-top: $m-4; max-width: 40ch; text-align: center; diff --git a/src/css/components/_c-banner.scss b/src/css/components/_c-banner.scss index b286b9eeb..0e1c519d2 100644 --- a/src/css/components/_c-banner.scss +++ b/src/css/components/_c-banner.scss @@ -9,7 +9,7 @@ $_banner-triangle-size: 1.49rem; font-family: $font-family-secondary; letter-spacing: $font-tracking-slight; line-height: $line-height-single; - margin-top: $mt-3; + margin-top: $m-3; padding: 0.1rem 1rem 0.6rem 0.3rem; // [1] Magic number to position the triangle @@ -46,7 +46,7 @@ $_banner-triangle-size: 1.49rem; @include var(background-color, featured-card-accent); background-image: none; @include var(color, featured-card-accent-text); - margin-top: $mt-0; + margin-top: $m-0; &::before { @include var(border-right-color, featured-card-accent-shadow); @@ -55,7 +55,7 @@ $_banner-triangle-size: 1.49rem; &.c-banner--post { background-image: none; - margin-top: $mt-0; + margin-top: $m-0; } } diff --git a/src/css/components/_c-card-resource.scss b/src/css/components/_c-card-resource.scss index 519430b4a..ba0d39f68 100644 --- a/src/css/components/_c-card-resource.scss +++ b/src/css/components/_c-card-resource.scss @@ -7,7 +7,7 @@ .c-card-resource__body { @include var(background-color, card-background); margin-right: 1.25rem; - margin-left: $ml-3; + margin-left: $m-3; padding: 1.5rem 2rem; transition: $animation-duration-shorter $animation-easing-character background-color, diff --git a/src/css/components/_c-card.scss b/src/css/components/_c-card.scss index e309b2042..36304fb2f 100644 --- a/src/css/components/_c-card.scss +++ b/src/css/components/_c-card.scss @@ -2,6 +2,6 @@ $_card-inset: 1.5rem; $_card-outline: $border-thinner solid; .c-card__wrapper { - margin-bottom: $mb-6; + margin-bottom: $m-6; max-width: $global-type-measure * 1.1; } diff --git a/src/css/components/_c-changelog.scss b/src/css/components/_c-changelog.scss index d457a2c1d..b37e143b4 100644 --- a/src/css/components/_c-changelog.scss +++ b/src/css/components/_c-changelog.scss @@ -1,7 +1,7 @@ .c-changelog__version { @include var(background-color, tag-background); border-radius: 0.25rem; - margin-right: $mr-1; + margin-right: $m-1; padding: 0.25rem 0.5rem; } diff --git a/src/css/components/_c-checklist.scss b/src/css/components/_c-checklist.scss index 677a93f1e..5e445ed79 100644 --- a/src/css/components/_c-checklist.scss +++ b/src/css/components/_c-checklist.scss @@ -18,7 +18,7 @@ $_checklist-padding: ( ); .c-checklist__outer-wrapper { - margin-bottom: $mb-6; + margin-bottom: $m-6; max-width: $global-type-measure * 1.1; } @@ -138,7 +138,7 @@ $_checklist-padding: ( } .c-checklist__title { - margin-left: $ml-2; + margin-left: $m-2; // Supports @supports #{$supports-flex} { flex: 1; @@ -235,7 +235,7 @@ $_checklist-padding: ( } .c-checklist__citation { - margin-top: $mt-1; + margin-top: $m-1; padding-left: map-get($_checklist-inset, small); // Breakpoints diff --git a/src/css/components/_c-collection.scss b/src/css/components/_c-collection.scss index 488055e0a..7e7c3dac7 100644 --- a/src/css/components/_c-collection.scss +++ b/src/css/components/_c-collection.scss @@ -1,24 +1,24 @@ .c-collection__list { - @include preserve-list-semantics(); - counter-reset: collection-list; + @include preserve-list-semantics(); + counter-reset: collection-list; - // Breakpoints - @include mappy-bp(palm-medium) { - margin-left: 0; - } + // Breakpoints + @include mappy-bp(palm-medium) { + margin-left: $m-0; + } - li { - position: relative; - counter-increment: collection-list; + li { + position: relative; + counter-increment: collection-list; - &::before { - position: absolute; - content: counter(collection-list) "."; - display: block; - font-family: $font-family-secondary; - font-size: 3ex; - top: 1.25rem; - left: 0; - } - } + &::before { + position: absolute; + content: counter(collection-list) "."; + display: block; + font-family: $font-family-secondary; + font-size: 3ex; + top: 1.25rem; + left: 0; + } + } } diff --git a/src/css/components/_c-divider.scss b/src/css/components/_c-divider.scss index 4d25d029e..32f8bf9fb 100644 --- a/src/css/components/_c-divider.scss +++ b/src/css/components/_c-divider.scss @@ -1,6 +1,6 @@ .c-divider { border: $border-thin solid; @include var(border-color, divider-background); - margin-top: $mt-6; - margin-bottom: $mb-6; + margin-top: $m-6; + margin-bottom: $m-6; } diff --git a/src/css/components/_c-dos-donts.scss b/src/css/components/_c-dos-donts.scss index ff19231e7..526b241e3 100644 --- a/src/css/components/_c-dos-donts.scss +++ b/src/css/components/_c-dos-donts.scss @@ -1,5 +1,5 @@ .c-dos-donts { - margin-top: $mt-3; + margin-top: $m-3; // Text-level formatting p { @@ -18,7 +18,7 @@ } p:first-of-type { - margin-top: $mt-1; + margin-top: $m-1; } p:nth-child(odd) { diff --git a/src/css/components/_c-featured.scss b/src/css/components/_c-featured.scss index 86a392b7f..2b03c022d 100644 --- a/src/css/components/_c-featured.scss +++ b/src/css/components/_c-featured.scss @@ -8,9 +8,9 @@ } .c-featured__body { - margin-right: 0; - margin-bottom: $mb-4; - margin-left: $ml-3; + margin-right: $m-0; + margin-bottom: $m-4; + margin-left: $m-3; padding: 1.5rem 2rem; @include var(background-color, featured-card-background); @include var(color, featured-card-text); diff --git a/src/css/components/_c-footer.scss b/src/css/components/_c-footer.scss index eca728a9f..0ee89dd71 100644 --- a/src/css/components/_c-footer.scss +++ b/src/css/components/_c-footer.scss @@ -3,7 +3,7 @@ } .c-footer__subnav { - margin-top: $mt-4; + margin-top: $m-4; // Supports @supports #{$supports-flex} { @@ -18,7 +18,7 @@ @include mappy-bp(lap-small) { width: initial; - margin-right: $mr-4; + margin-right: $m-4; } @include mappy-bp(lap-medium) { @@ -34,12 +34,12 @@ .c-footer__list { @include preserve-list-semantics(); - margin-top: $mt-2; + margin-top: $m-2; margin-left: 0.4rem; // Text-level formatting li { - margin-top: $mt-1; + margin-top: $m-1; } } @@ -60,12 +60,12 @@ font-family: $font-family-primary; font-size: $font-size-heading-small; line-height: $line-height-single; - margin-top: $mt-4; + margin-top: $m-4; // Breakpoints @include mappy-bp(palm-small) { font-size: $font-size-body-medium; - margin-top: $mt-0; + margin-top: $m-0; } @include mappy-bp(lap-small) { diff --git a/src/css/components/_c-form.scss b/src/css/components/_c-form.scss index f0f1f71c5..560ff2485 100644 --- a/src/css/components/_c-form.scss +++ b/src/css/components/_c-form.scss @@ -1,7 +1,7 @@ $_c-input-margin-top: 1.5rem; .c-form { - margin-top: $mt-2; + margin-top: $m-2; } .c-form__label { @@ -121,7 +121,7 @@ $_c-input-margin-top: 1.5rem; .c-form__progress { @include var(background-color, progress-background); min-height: 2rem; - margin-bottom: $mb-6; + margin-bottom: $m-6; max-width: 68ch; // Supports @@ -139,7 +139,7 @@ $_c-input-margin-top: 1.5rem; .c-form__progress-label { @include var(background-color, body-background); font-family: $font-family-secondary; - margin-top: $mt-0; + margin-top: $m-0; padding-left: 1rem; } diff --git a/src/css/components/_c-homepage-card.scss b/src/css/components/_c-homepage-card.scss index 163196330..0c0f2a663 100644 --- a/src/css/components/_c-homepage-card.scss +++ b/src/css/components/_c-homepage-card.scss @@ -10,7 +10,7 @@ } .c-homepage-card--resources { - margin-right: $mr-4; + margin-right: $m-4; } .c-homepage-card--spotlight { @@ -37,7 +37,7 @@ .c-homepage-card__image { cursor: pointer; - margin-top: $mt-6; + margin-top: $m-6; filter: var(--image-filter); } @@ -45,7 +45,7 @@ @include var(color, card-heading-text); font-family: $font-family-secondary; letter-spacing: $font-tracking-slight; - margin-top: $mt-3; + margin-top: $m-3; } .c-homepage-card__title { @@ -56,8 +56,8 @@ .c-homepage-card__description { font-family: $font-family-secondary; - margin-top: $mt-2; - margin-bottom: $mb-2; + margin-top: $m-2; + margin-bottom: $m-2; max-width: 50ch; } @@ -66,7 +66,7 @@ @include var(border-color, secondary-link-accent); @include var(color, secondary-link-text); font-family: $font-family-secondary; - margin-top: $mt-2; + margin-top: $m-2; text-decoration: none; // States diff --git a/src/css/components/_c-homepage-feature.scss b/src/css/components/_c-homepage-feature.scss index 1affdea24..5ea5adf4b 100644 --- a/src/css/components/_c-homepage-feature.scss +++ b/src/css/components/_c-homepage-feature.scss @@ -4,7 +4,7 @@ .c-homepage-feature { // Contexts &:not(:first-of-type) { - margin-top: $mt-12; + margin-top: $m-12; } // Supports diff --git a/src/css/components/_c-linkroll.scss b/src/css/components/_c-linkroll.scss index 036f77a43..45fb0473d 100644 --- a/src/css/components/_c-linkroll.scss +++ b/src/css/components/_c-linkroll.scss @@ -2,7 +2,7 @@ // // Style guide: Components.linkroll .c-linkroll { - margin-top: $mt-2; + margin-top: $m-2; } .c-linkroll__link { diff --git a/src/css/components/_c-logo.scss b/src/css/components/_c-logo.scss index 30e699655..c39fb4247 100644 --- a/src/css/components/_c-logo.scss +++ b/src/css/components/_c-logo.scss @@ -68,5 +68,5 @@ .c-logo__wordmark { fill: $color-white; margin-top: 0.25rem; - margin-left: $ml-1; + margin-left: $m-1; } diff --git a/src/css/components/_c-person.scss b/src/css/components/_c-person.scss index 9709afd4b..9fd7dbb4d 100644 --- a/src/css/components/_c-person.scss +++ b/src/css/components/_c-person.scss @@ -4,10 +4,10 @@ $_person-distance: ( ); .c-person { - margin-top: $mt-4; + margin-top: $m-4; &:first-of-type { - margin-top: $mt-0; + margin-top: $m-0; } } @@ -50,7 +50,7 @@ $_person-distance: ( @include avatar-size("medium"); left: initial; - margin-left: $ml-2; + margin-left: $m-2; right: initial; } @@ -75,7 +75,7 @@ $_person-distance: ( border: $border-thinnest solid; @include var(border-color, card-outline); @include var(background-color, card-background); - margin-top: $mt-8; + margin-top: $m-8; min-height: 10rem; padding: 1.5rem; max-width: $global-type-measure; @@ -127,7 +127,7 @@ $_person-distance: ( @include link-states(card-heading-text); display: inline-block; - margin-top: $mt-2; + margin-top: $m-2; } .c-person__name { @@ -149,6 +149,6 @@ $_person-distance: ( .c-person__biography { font-family: $font-family-secondary; - margin-top: $mt-2; + margin-top: $m-2; max-width: $global-type-measure; } diff --git a/src/css/components/_c-post-collection.scss b/src/css/components/_c-post-collection.scss index b79f47cf2..66d295046 100644 --- a/src/css/components/_c-post-collection.scss +++ b/src/css/components/_c-post-collection.scss @@ -9,19 +9,19 @@ .c-post-collection__title { border-bottom: $border-thin dotted currentColor; - margin-top: $mt-0; + margin-top: $m-0; padding-bottom: 1rem; } .c-post-collection__list { - margin-top: $mt-2; + margin-top: $m-2; list-style-type: none; } .c-post-collection__item { @include var(color, post-rec-text); position: relative; - margin-top: $mt-1; + margin-top: $m-1; counter-increment: post-collection; font-family: $font-family-secondary; diff --git a/src/css/components/_c-post.scss b/src/css/components/_c-post.scss index e614ebeea..416974645 100644 --- a/src/css/components/_c-post.scss +++ b/src/css/components/_c-post.scss @@ -96,7 +96,7 @@ $_c-post-vertical-spacing: 4ex; } @include mappy-bp(lap-medium) { - margin-top: $mt-0; + margin-top: $m-0; margin-left: map-get($global-post-content-inset, small); } } @@ -143,11 +143,11 @@ $_c-post-vertical-spacing: 4ex; } .c-post__metadata--author { - margin-bottom: $mb-1; + margin-bottom: $m-1; // Breakpoints @include mappy-bp(lap-small) { - margin-bottom: $mb-0; + margin-bottom: $m-0; } // Supports @@ -157,7 +157,7 @@ $_c-post-vertical-spacing: 4ex; // Breakpoints @include mappy-bp(lap-small) { flex-grow: 4; - margin-bottom: $mb-0; + margin-bottom: $m-0; } } } @@ -170,7 +170,7 @@ $_c-post-vertical-spacing: 4ex; // Breakpokints @include mappy-bp(lap-small) { - margin-left: $ml-1; + margin-left: $m-1; } } } @@ -192,14 +192,14 @@ $_c-post-vertical-spacing: 4ex; // Breakpoints @include mappy-bp(lap-small) { - margin-right: 0; + margin-right: $m-0; } // Supports @supports #{$supports-grid} { // Breakpoints @include mappy-bp(lap-small) { - margin-right: 0; + margin-right: $m-0; } } } diff --git a/src/css/components/_c-preface.scss b/src/css/components/_c-preface.scss index 74a4a9857..a80fce99a 100644 --- a/src/css/components/_c-preface.scss +++ b/src/css/components/_c-preface.scss @@ -1,7 +1,7 @@ .c-preface { @include var(color, text-accent); - margin-top: $mt-1; - margin-bottom: $mb-4; + margin-top: $m-1; + margin-bottom: $m-4; margin-left: $_card-inset; max-width: $global-type-measure; } diff --git a/src/css/components/_c-primary-nav.scss b/src/css/components/_c-primary-nav.scss index 9a4e98f48..a175bdfdd 100644 --- a/src/css/components/_c-primary-nav.scss +++ b/src/css/components/_c-primary-nav.scss @@ -10,33 +10,33 @@ } .c-primary-nav__list-item { - margin-top: $mt-2; + margin-top: $m-2; text-align: center; // Supports @supports #{$supports-flex} { - margin-top: $mt-2; - margin-left: 0; + margin-top: $m-2; + margin-left: $m-0; width: 33%; // Breakpoints @include mappy-bp(palm-small) { - margin-right: $mr-1; + margin-right: $m-1; width: initial; flex-grow: 1; } @include mappy-bp(palm-medium) { - margin-right: $mr-2; + margin-right: $m-2; } @include mappy-bp(lap-small) { - margin-top: $mt-0; + margin-top: $m-0; } } &:last-of-type { - margin-right: 0; + margin-right: $m-0; .c-primary-nav__link { @include var(background-color, nav-cta-background); diff --git a/src/css/components/_c-recommended-reading.scss b/src/css/components/_c-recommended-reading.scss index afd8d8572..29a614e77 100644 --- a/src/css/components/_c-recommended-reading.scss +++ b/src/css/components/_c-recommended-reading.scss @@ -71,7 +71,7 @@ @include var(color, post-rec-text); display: block; font-size: $font-size-body-tiny; - margin-top: $mt-2; + margin-top: $m-2; // Breakpoints @include mappy-bp(palm-small) { diff --git a/src/css/components/_c-simple.scss b/src/css/components/_c-simple.scss index 8f345a565..372c7bb2e 100644 --- a/src/css/components/_c-simple.scss +++ b/src/css/components/_c-simple.scss @@ -20,13 +20,13 @@ @include var(background-color, hero-content-background); @include var(border-color, hero-content-accent); @include var(color, hero-content-text); - margin-top: $mt-4; + margin-top: $m-4; padding: 1rem 2rem 2rem; z-index: 1; // Supports @supports #{$supports-flex} { - margin-top: $mt-0; + margin-top: $m-0; // Breakpoints @include mappy-bp(palm-large) { @@ -41,7 +41,7 @@ // Text-level formatting p { font-family: $font-family-secondary; - margin-top: $mt-3; + margin-top: $m-3; } } diff --git a/src/css/components/_c-sponsors.scss b/src/css/components/_c-sponsors.scss index a12371a82..717d74729 100644 --- a/src/css/components/_c-sponsors.scss +++ b/src/css/components/_c-sponsors.scss @@ -4,11 +4,11 @@ .c-sponsor__link { width: $global-sponsor-width; - margin-bottom: $mb-2; + margin-bottom: $m-2; @include var(color, body-text); &:last-of-type { - margin-bottom: $mb-0; + margin-bottom: $m-0; } // States @@ -20,7 +20,7 @@ @supports #{$supports-grid} { // Breakpoints @include mappy-bp(palm-medium) { - margin-bottom: $mb-0; + margin-bottom: $m-0; } } } diff --git a/src/css/components/_c-spotlight.scss b/src/css/components/_c-spotlight.scss index 90d38d2e2..dbaa7a21c 100644 --- a/src/css/components/_c-spotlight.scss +++ b/src/css/components/_c-spotlight.scss @@ -6,7 +6,7 @@ // Breakpoints @include mappy-bp(lap-small) { margin-left: auto; - margin-right: $mr-6; + margin-right: $m-6; } } diff --git a/src/css/components/_c-wcag-explanation.scss b/src/css/components/_c-wcag-explanation.scss index 28d70937c..a66b46348 100644 --- a/src/css/components/_c-wcag-explanation.scss +++ b/src/css/components/_c-wcag-explanation.scss @@ -1,7 +1,7 @@ .c-wcag-explanation { @include var(background-color, featured-card-background); font-family: $font-family-secondary; - margin-bottom: $mb-2; + margin-bottom: $m-2; padding: 0.5rem 1.5rem 2rem; // Breakpoints @@ -11,18 +11,18 @@ // Text-level formatting p { - margin-top: $mt-3; + margin-top: $m-3; max-width: $global-type-measure; } } .c-wcag-explanation__compliance-level { - margin-top: $mt-4; + margin-top: $m-4; max-width: $global-type-measure; // Breakpoints @include mappy-bp(palm-large) { - margin-top: $mt-1; + margin-top: $m-1; // Supports @supports #{$supports-flex} { @@ -50,8 +50,8 @@ @include mappy-bp(palm-large) { // Supports @supports #{$supports-flex} { - margin-top: $mt-4; - margin-right: $mr-3; + margin-top: $m-4; + margin-right: $m-3; width: rem(320); } } @@ -63,6 +63,6 @@ // Breakpoints @include mappy-bp(palm-large) { - margin-top: $mt-0; + margin-top: $m-0; } } diff --git a/src/css/components/content/_cms.scss b/src/css/components/content/_cms.scss index 7659cfe1e..2b8420699 100644 --- a/src/css/components/content/_cms.scss +++ b/src/css/components/content/_cms.scss @@ -29,12 +29,12 @@ } .footnotes-list { - margin-top: $mt-2; + margin-top: $m-2; } .footnote-item { p { - margin-top: $mt-0; + margin-top: $m-0; } } diff --git a/src/css/components/content/_inline-content.scss b/src/css/components/content/_inline-content.scss index 7a5c4adf0..a16476ca8 100644 --- a/src/css/components/content/_inline-content.scss +++ b/src/css/components/content/_inline-content.scss @@ -37,7 +37,7 @@ padding: 1.5rem 1rem; p:first-of-type { - margin-bottom: $mb-0; + margin-bottom: $m-0; } // Breakpoints diff --git a/src/css/components/content/_lists.scss b/src/css/components/content/_lists.scss index 5b7345738..3d28bb190 100644 --- a/src/css/components/content/_lists.scss +++ b/src/css/components/content/_lists.scss @@ -8,7 +8,7 @@ // Breakpoints @include mappy-bp(palm-medium) { - margin-left: 0; + margin-left: $m-0; } } @@ -23,7 +23,7 @@ // Breakpoints @include mappy-bp(palm-medium) { - margin-left: 0; + margin-left: $m-0; } li { @@ -43,9 +43,9 @@ } ol { - margin-top: $mt-0; - margin-left: $ml-4; - margin-bottom: $mb-2; + margin-top: $m-0; + margin-left: $m-4; + margin-bottom: $m-2; } } @@ -60,7 +60,7 @@ // Breakpoints @include mappy-bp(lap-medium) { - margin-left: 0; + margin-left: $m-0; } &::before { @@ -76,8 +76,8 @@ } ul { - margin-top: $mt-0; - margin-left: $ml-4; + margin-top: $m-0; + margin-left: $m-4; } } } @@ -90,7 +90,7 @@ dt { font-weight: $font-weight-bold; - margin-top: $mt-3; + margin-top: $m-3; margin-left: map-get($global-post-content-inset, small) * -1; } diff --git a/src/css/components/content/_spacing.scss b/src/css/components/content/_spacing.scss index 07454a8b5..2b6a29056 100644 --- a/src/css/components/content/_spacing.scss +++ b/src/css/components/content/_spacing.scss @@ -35,7 +35,7 @@ .template-collection & { p:first-of-type { - margin-top: $mt-0; + margin-top: $m-0; } } @@ -51,7 +51,7 @@ font-size: 1.25rem; font-family: $font-family-secondary; line-height: $line-height-looser; - margin-top: $mt-0; + margin-top: $m-0; margin-bottom: $_c-post-vertical-spacing * 1.25; @include post-content-flourish(169, 0.75rem); } diff --git a/src/css/layout/_l-footer.scss b/src/css/layout/_l-footer.scss index 822b0407b..a20600aec 100644 --- a/src/css/layout/_l-footer.scss +++ b/src/css/layout/_l-footer.scss @@ -13,7 +13,7 @@ // to not break, so we need to use this approach. .l-footer__meta--footer { display: initial; - margin-top: $mt-6; + margin-top: $m-6; // Breakpoints @include mappy-bp(palm-small) { @@ -21,7 +21,7 @@ } @include mappy-bp(lap-small) { - margin-top: $mt-12; + margin-top: $m-12; } @include mappy-bp(lap-small) { @@ -47,7 +47,7 @@ } .l-footer__theme-switcher { - margin-top: $mt-2; + margin-top: $m-2; } .l-footer__tagline-copyright { @@ -60,24 +60,24 @@ @include mappy-bp(lap-small) { flex-direction: row; justify-content: space-between; - margin-top: $mt-2; + margin-top: $m-2; } } } .l-footer__copyright { - margin-top: $mt-4; + margin-top: $m-4; // Supports @supports #{$supports-flex} { // Breakpoints @include mappy-bp(lap-small) { - margin-top: $mt-0; + margin-top: $m-0; } } } .l-footer__top { - margin-top: $mt-2; + margin-top: $m-2; // Breakpoints @include mappy-bp(palm-small) { @@ -85,6 +85,6 @@ } @include mappy-bp(lap-small) { - margin-top: $mt-0; + margin-top: $m-0; } } diff --git a/src/css/layout/_l-generic-title.scss b/src/css/layout/_l-generic-title.scss index a9b867262..5a95a5f5f 100644 --- a/src/css/layout/_l-generic-title.scss +++ b/src/css/layout/_l-generic-title.scss @@ -62,8 +62,8 @@ // Breakpoints @include mappy-bp(palm-large) { - margin-top: $mt-0; - margin-bottom: $mb-0; + margin-top: $m-0; + margin-bottom: $m-0; position: unset; transform: none; } diff --git a/src/css/layout/_l-hero.scss b/src/css/layout/_l-hero.scss index bf840074e..605385644 100644 --- a/src/css/layout/_l-hero.scss +++ b/src/css/layout/_l-hero.scss @@ -74,8 +74,8 @@ // Breakpoints @include mappy-bp(palm-large) { - margin-top: $mt-0; - margin-bottom: $mb-0; + margin-top: $m-0; + margin-bottom: $m-0; position: unset; transform: none; } diff --git a/src/css/layout/_l-main.scss b/src/css/layout/_l-main.scss index 953377022..e5335996d 100644 --- a/src/css/layout/_l-main.scss +++ b/src/css/layout/_l-main.scss @@ -24,10 +24,13 @@ // Breakpoints @include mappy-bp(lap-small) { display: grid; - grid-template-columns: map-get($global-bleed, large) $global-grid-columns map-get($global-bleed, large); + grid-template-columns: map-get($global-bleed, large) $global-grid-columns map-get( + $global-bleed, + large + ); grid-template-areas: ". toc content ."; - margin-left: 0; - margin-right: 0; + margin-left: $m-0; + margin-right: $m-0; } } } diff --git a/src/css/layout/_l-post.scss b/src/css/layout/_l-post.scss index d4c4597bb..5d09894e4 100644 --- a/src/css/layout/_l-post.scss +++ b/src/css/layout/_l-post.scss @@ -1,9 +1,9 @@ .l-post { - margin-top: $mt-4; + margin-top: $m-4; // Breakpoints @include mappy-bp(lap-medium) { - margin-top: $mt-8; + margin-top: $m-8; } &--collection { @@ -100,12 +100,12 @@ // Breakpoints @include mappy-bp(lap-medium) { - margin-right: 0; + margin-right: $m-0; margin-left: map-get($global-bleed, small); } @include mappy-bp(lap-small) { - margin-top: $mt-0; + margin-top: $m-0; } } } diff --git a/src/css/layout/_l-primary-nav.scss b/src/css/layout/_l-primary-nav.scss index 6d4db20f6..32cb81405 100644 --- a/src/css/layout/_l-primary-nav.scss +++ b/src/css/layout/_l-primary-nav.scss @@ -21,14 +21,14 @@ } .l-primary-nav__sections { - margin-top: $mt-2; + margin-top: $m-2; width: 100%; // Supports @supports #{$supports-flex} { display: flex; flex-flow: row wrap; - margin-top: $mt-0; + margin-top: $m-0; // Breakpoints @include mappy-bp(palm-small) { diff --git a/src/css/layout/_l-toc.scss b/src/css/layout/_l-toc.scss index 1b75ffd41..d177b153c 100644 --- a/src/css/layout/_l-toc.scss +++ b/src/css/layout/_l-toc.scss @@ -18,57 +18,57 @@ margin-top: 17.5rem; .l-toc { - margin-top: $mt-0; // BUG: .v-toc is getting regenerated on some pages - margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages + margin-top: $m-0; // BUG: .v-toc is getting regenerated on some pages + margin-left: $m-3; // BUG: .v-toc is getting regenerated on some pages } } } .template-checklist & { .l-toc { - margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages + margin-left: $m-3; // BUG: .v-toc is getting regenerated on some pages } } .template-resources & { .l-toc { - margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages + margin-left: $m-3; // BUG: .v-toc is getting regenerated on some pages } } .template-about & { .l-toc { - margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages + margin-left: $m-3; // BUG: .v-toc is getting regenerated on some pages } } .template-contribute & { .l-toc { - margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages + margin-left: $m-3; // BUG: .v-toc is getting regenerated on some pages } } .template-team & { .l-toc { - margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages + margin-left: $m-3; // BUG: .v-toc is getting regenerated on some pages } } .template-authors & { .l-toc { - margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages + margin-left: $m-3; // BUG: .v-toc is getting regenerated on some pages } } .template-spotlight & { .l-toc { - margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages + margin-left: $m-3; // BUG: .v-toc is getting regenerated on some pages } } .template-posts & { .l-toc { - margin-left: $ml-3; // BUG: .v-toc is getting regenerated on some pages + margin-left: $m-3; // BUG: .v-toc is getting regenerated on some pages } } @@ -78,7 +78,7 @@ // Breakpoints @include mappy-bp(palm-medium) { margin-right: map-get($global-post-content-inset, "medium"); - margin-bottom: $mb-4; + margin-bottom: $m-4; margin-left: map-get($global-post-content-inset, "medium") * 0.5; } diff --git a/src/css/logic/_mixins.headings.scss b/src/css/logic/_mixins.headings.scss index b62fc37ec..0223b9c5c 100644 --- a/src/css/logic/_mixins.headings.scss +++ b/src/css/logic/_mixins.headings.scss @@ -15,7 +15,7 @@ @mixin heading-largest() { font-size: 3rem; line-height: $line-height-single; - margin-bottom: $mb-2; + margin-bottom: $m-2; // Breakpoints @include mappy-bp(lap-small) { diff --git a/src/css/logic/_mixins.lede.scss b/src/css/logic/_mixins.lede.scss index 9ab1a0735..5f7946d86 100644 --- a/src/css/logic/_mixins.lede.scss +++ b/src/css/logic/_mixins.lede.scss @@ -9,5 +9,5 @@ @mixin lede() { font-size: 1.15rem; line-height: $line-height-double; - margin-top: $mt-0; + margin-top: $m-0; } diff --git a/src/css/utilities/_spacing.scss b/src/css/utilities/_spacing.scss index 6f8689c72..3f285cd7f 100644 --- a/src/css/utilities/_spacing.scss +++ b/src/css/utilities/_spacing.scss @@ -31,7 +31,7 @@ } .u-spacing-top-shorter { - margin-top: $mt-1; + margin-top: $m-1; } .u-spacing-top-short { @@ -39,19 +39,19 @@ } .u-spacing-top-medium { - margin-top: $mt-2; + margin-top: $m-2; } .u-spacing-top-long { - margin-top: $mt-3; + margin-top: $m-3; } .u-spacing-top-longer { - margin-top: $mt-4; + margin-top: $m-4; } .u-spacing-top-longest { - margin-top: $mt-6; + margin-top: $m-6; } .u-spacing-right-shortest { @@ -59,7 +59,7 @@ } .u-spacing-right-shorter { - margin-right: $mr-1; + margin-right: $m-1; } .u-spacing-right-short { @@ -67,19 +67,19 @@ } .u-spacing-right-medium { - margin-right: $mr-2; + margin-right: $m-2; } .u-spacing-right-long { - margin-right: $mr-3; + margin-right: $m-3; } .u-spacing-right-longer { - margin-right: $mr-4; + margin-right: $m-4; } .u-spacing-right-longest { - margin-right: $mr-6; + margin-right: $m-6; } .u-spacing-bottom-shortest { @@ -87,7 +87,7 @@ } .u-spacing-bottom-shorter { - margin-bottom: $mb-1; + margin-bottom: $m-1; } .u-spacing-bottom-short { @@ -95,7 +95,7 @@ } .u-spacing-bottom-medium { - margin-bottom: $mb-2; + margin-bottom: $m-2; } .u-spacing-bottom-long { @@ -103,11 +103,11 @@ } .u-spacing-bottom-longer { - margin-bottom: $mb-4; + margin-bottom: $m-4; } .u-spacing-bottom-longest { - margin-bottom: $mb-6; + margin-bottom: $m-6; } .u-spacing-left-shortest { @@ -115,7 +115,7 @@ } .u-spacing-left-shorter { - margin-left: $ml-1; + margin-left: $m-1; } .u-spacing-left-short { @@ -123,15 +123,15 @@ } .u-spacing-left-medium { - margin-left: $ml-2; + margin-left: $m-2; } .u-spacing-left-long { - margin-left: $ml-3; + margin-left: $m-3; } .u-spacing-left-longer { - margin-left: $ml-4; + margin-left: $m-4; } .u-spacing-left-longest { diff --git a/src/css/utilities/_variables.scss b/src/css/utilities/_variables.scss index 7b1324761..852994564 100644 --- a/src/css/utilities/_variables.scss +++ b/src/css/utilities/_variables.scss @@ -16,40 +16,21 @@ //$m-11:5.5rem //$m-12:6rem - // margin -$m-0: margin: 0; - -// margin-top -$mt-0: margin-top: 0; -$mt-1: margin-top: 0.5rem; -$mt-2: margin-top: 1rem; -$mt-3: margin-top: 1.5rem; -$mt-4: margin-top: 2rem; -$mt-6: margin-top: 3rem; -$mt-8: margin-top: 4rem; -$mt-12: margin-top: 6rem; - -// margin-right -$mr-1: margin-right: 0.5rem; -$mr-2: margin-right: 1rem; -$mr-3: margin-right: 1.5rem; -$mr-4: margin-right: 2rem; -$mr-6: margin-right: 3rem; - -// margin-bottom -$mb-0: margin-bottom: 0; -$mb-1: margin-bottom: 0.5rem; -$mb-2: margin-bottom: 1rem; -$mb-4: margin-bottom: 2rem; -$mb-6: margin-bottom: 3rem; - -// margin-left -$ml-1: margin-left: 0.5rem; -$ml-2: margin-left: 1rem; -$ml-3: margin-left: 1.5rem; -$ml-4: margin-left: 2rem; +$m-0: 0; +$m-1: 0.5rem; +$m-2: 1rem; +$m-3: 1.5rem; +$m-4: 2rem; +$m-5: 2.5rem; +$m-6: 3rem; +$m-7: 3.5rem; +$m-8: 4rem; +$m-9: 4.5rem; +$m-10: 5rem; +$m-11: 5.5rem; +$m-12: 6rem; // padding -$p-0: padding: 0; -$p-1: padding: 0.5rem; +$p-0: 0; +$p-1: 0.5rem; diff --git a/src/css/vendor/_v-toc.scss b/src/css/vendor/_v-toc.scss index ddfd47274..05afc1533 100644 --- a/src/css/vendor/_v-toc.scss +++ b/src/css/vendor/_v-toc.scss @@ -1,7 +1,7 @@ // tableOfContents.js // http://github.com/cferdinandi/table-of-contents .v-toc { - margin-right: $mr-4; + margin-right: $m-4; position: relative; z-index: z(component); @@ -63,7 +63,7 @@ .v-toc__title { display: block; font-weight: 700; - margin-left: $ml-1; + margin-left: $m-1; /* stylelint-disable-next-line property-no-unknown */ text-decoration-thickness: $border-thinnest; text-underline-offset: 0.5em; @@ -102,7 +102,7 @@ // Supports @supports #{$supports-flex} { - margin-bottom: $mb-0; + margin-bottom: $m-0; } code { @@ -117,11 +117,11 @@ text-transform: none; &:first-of-type { - margin-top: $mt-2; + margin-top: $m-2; // Supports @supports #{$supports-flex} { - margin-top: $mt-0; + margin-top: $m-0; } } From 7c5685b1c8065a16891bdf9f0512ff22c1da8be3 Mon Sep 17 00:00:00 2001 From: Dave Rupert Date: Tue, 20 Jun 2023 12:34:16 -0500 Subject: [PATCH 6/6] fix: fix whitespace linting errors --- src/css/components/_c-card-resource.scss | 2 +- src/css/components/_c-featured.scss | 2 +- src/css/components/_c-form.scss | 3 ++- src/css/components/_c-linkroll.scss | 2 +- src/css/components/_c-recommended-reading.scss | 2 +- src/css/vendor/_v-toc.scss | 4 ++-- 6 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/css/components/_c-card-resource.scss b/src/css/components/_c-card-resource.scss index e523ca65e..d0f2bbe3d 100644 --- a/src/css/components/_c-card-resource.scss +++ b/src/css/components/_c-card-resource.scss @@ -9,7 +9,7 @@ margin-right: 1.25rem; margin-left: $m-3; padding: 1.5rem 2rem; - transition: + transition: $animation-duration-shorter $animation-easing-character background-color, $animation-duration-shorter $animation-easing-character border-color, $animation-duration-shorter $animation-easing-character color; diff --git a/src/css/components/_c-featured.scss b/src/css/components/_c-featured.scss index 120bdc551..5b4debe56 100644 --- a/src/css/components/_c-featured.scss +++ b/src/css/components/_c-featured.scss @@ -14,7 +14,7 @@ padding: 1.5rem 2rem; @include var(background-color, featured-card-background); @include var(color, featured-card-text); - transition: + transition: $animation-duration-shorter $animation-easing-character background-color, $animation-duration-shorter $animation-easing-character border-color, $animation-duration-shorter $animation-easing-character color; diff --git a/src/css/components/_c-form.scss b/src/css/components/_c-form.scss index 9a0f11c2c..ad20ba075 100644 --- a/src/css/components/_c-form.scss +++ b/src/css/components/_c-form.scss @@ -67,9 +67,10 @@ $_c-input-margin-top: 1.5rem; &:focus { @include var(background-color, button-focus-background); - box-shadow: + box-shadow: 0 0 0 em(2) var(--color-body-background), 0 0 0 em(4) var(--color-button-background); + outline: $border-thin solid transparent; } diff --git a/src/css/components/_c-linkroll.scss b/src/css/components/_c-linkroll.scss index 49d14a1c3..115689f97 100644 --- a/src/css/components/_c-linkroll.scss +++ b/src/css/components/_c-linkroll.scss @@ -10,7 +10,7 @@ @include var(border-color, linkroll-gray); padding: 1.25rem 1.75rem; text-decoration: none; - transition: + transition: background-color $animation-duration-shorter $animation-easing-character, color $animation-duration-shorter $animation-easing-character; diff --git a/src/css/components/_c-recommended-reading.scss b/src/css/components/_c-recommended-reading.scss index 56b11a5d0..56dc12756 100644 --- a/src/css/components/_c-recommended-reading.scss +++ b/src/css/components/_c-recommended-reading.scss @@ -31,7 +31,7 @@ line-height: $line-height-tight; padding: 1rem; text-decoration: none; - transition: + transition: background-color $animation-duration-shorter $animation-easing-character, color $animation-duration-shorter $animation-easing-character; diff --git a/src/css/vendor/_v-toc.scss b/src/css/vendor/_v-toc.scss index efa8a1eb2..549922b31 100644 --- a/src/css/vendor/_v-toc.scss +++ b/src/css/vendor/_v-toc.scss @@ -140,8 +140,8 @@ a[href] { @include var(color, toc-link-text); text-decoration: none; - transition: - $animation-duration-short $animation-easing-character color, + transition: + $animation-duration-short $animation-easing-character color, $animation-duration-short $animation-easing-character border; // Supports