From 5ad04a054cf1a39d87210a61601be57becef63ed Mon Sep 17 00:00:00 2001 From: Jason Nakai <106776019+jasnakai@users.noreply.github.com> Date: Fri, 28 Jun 2024 01:09:23 +0000 Subject: [PATCH 1/4] Link Test --- docs/development.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/development.md b/docs/development.md index b605d6a47..ab6d8ee2a 100644 --- a/docs/development.md +++ b/docs/development.md @@ -3,7 +3,7 @@ permalink: false eleventyExcludeFromCollections: true --- -# Development +# Development TEST ## Overview From cae9145f7194398151ac5c312b53f86ad3f84c1a Mon Sep 17 00:00:00 2001 From: Jason Nakai <106776019+jasnakai@users.noreply.github.com> Date: Fri, 28 Jun 2024 05:46:49 +0000 Subject: [PATCH 2/4] Consolidated styles to match the live 18F website. CSS could use a cleanup since the styles for two sites were combined. --- _sass/styles.scss | 26 --- _sass/uswds-theme-settings.scss | 93 -------- .../styles/{ => abstracts}/brand-colors.scss | 0 .../common/styles/abstracts}/variables.scss | 0 .../common/styles/base}/typography.scss | 2 +- .../uswds-theme-settings.scss} | 42 +++- .../common/styles/base}/utilities.scss | 2 +- .../common/styles/components}/button.scss | 2 +- .../components}/card-with-image-guides.scss | 2 +- .../styles/components}/card-with-image.scss | 2 +- .../common/styles/components}/hr.scss | 0 .../common/styles/components}/quotemark.scss | 0 assets/common/styles/custom-styles.scss | 205 ------------------ .../common/styles/layout}/header.scss | 2 +- .../common/styles/layout}/section.scss | 0 .../common/styles/layout}/sidenav.scss | 0 .../common/styles/pages}/blog.scss | 0 .../common/styles/pages}/project-page.scss | 0 assets/common/styles/styles.scss | 19 +- lib/pa11y.js | 2 +- 20 files changed, 61 insertions(+), 338 deletions(-) delete mode 100644 _sass/styles.scss delete mode 100644 _sass/uswds-theme-settings.scss rename assets/common/styles/{ => abstracts}/brand-colors.scss (100%) rename {_sass => assets/common/styles/abstracts}/variables.scss (100%) rename {_sass => assets/common/styles/base}/typography.scss (90%) rename assets/common/styles/{_uswds-theme-settings.scss => base/uswds-theme-settings.scss} (76%) rename {_sass/_components => assets/common/styles/base}/utilities.scss (97%) rename {_sass/_components => assets/common/styles/components}/button.scss (96%) rename {_sass/_components => assets/common/styles/components}/card-with-image-guides.scss (89%) rename {_sass/_components => assets/common/styles/components}/card-with-image.scss (94%) rename {_sass/_components => assets/common/styles/components}/hr.scss (100%) rename {_sass/_components => assets/common/styles/components}/quotemark.scss (100%) delete mode 100644 assets/common/styles/custom-styles.scss rename {_sass/_components => assets/common/styles/layout}/header.scss (99%) rename {_sass/_components => assets/common/styles/layout}/section.scss (100%) rename {_sass/_components => assets/common/styles/layout}/sidenav.scss (100%) rename {_sass/_components => assets/common/styles/pages}/blog.scss (100%) rename {_sass/_components => assets/common/styles/pages}/project-page.scss (100%) diff --git a/_sass/styles.scss b/_sass/styles.scss deleted file mode 100644 index 634f4181d..000000000 --- a/_sass/styles.scss +++ /dev/null @@ -1,26 +0,0 @@ -/*--------------------------------------------------------- -USWDS Settings -----------------------------------------------------------*/ -@forward "uswds-theme-settings"; - -/*--------------------------------------------------------- -USWDS Source -----------------------------------------------------------*/ -@forward "uswds"; - -/*--------------------------------------------------------- -Custom styling -----------------------------------------------------------*/ - -@forward '_components/blog'; -@forward '_components/button'; -@forward '_components/card-with-image'; -@forward '_components/card-with-image-guides'; -@forward '_components/header'; -@forward '_components/hr'; -@forward '_components/project-page'; -@forward '_components/quotemark'; -@forward '_components/section'; -@forward '_components/sidenav'; -@forward '_components/utilities'; -@forward 'typography'; diff --git a/_sass/uswds-theme-settings.scss b/_sass/uswds-theme-settings.scss deleted file mode 100644 index 68f219896..000000000 --- a/_sass/uswds-theme-settings.scss +++ /dev/null @@ -1,93 +0,0 @@ -// 18F Palette Colors -$color-bright-light: #b3efff; -$color-bright: #00cfff; -$color-medium: #046b99; -$color-dark: #1c304a; -$color-medium-hover: #00547a; - -@use 'uswds-core' as * with ( - /*--------------------------------------------------------- - # General Settings - ----------------------------------------------------------*/ - $theme-image-path: '../uswds/img', - - /*--------------------------------------------------------- - # Color Settings - ----------------------------------------------------------*/ - $theme-color-primary-family: 'blue', - $theme-color-primary-lightest: $color-bright-light, - $theme-color-primary-lighter: 'blue-cool-20v', - $theme-color-primary-light: 'blue-cool-40v', - $theme-color-primary: $color-medium, - $theme-color-primary-vivid: 'blue-warm-60v', - $theme-color-primary-dark: 'blue-70v', - $theme-color-primary-darker: $color-dark, - $theme-color-primary-darkest: 'blue-90', - - $theme-color-accent-cool-family: 'cyan', - $theme-color-accent-cool-lightest: 'blue-5', - $theme-color-accent-cool-lighter: 'cyan-10v', - $theme-color-accent-cool-light: 'cyan-20v', - $theme-color-accent-cool: $color-bright, - $theme-color-accent-cool-dark: 'cyan-50v', - $theme-color-accent-cool-darker: 'cyan-70v', - $theme-color-accent-cool-darkest: 'cyan-80v', - - $theme-color-base-ink: 'blue-90', - - $theme-color-error-lighter: 'red-warm-5', - - $theme-link-color: 'primary', - - /*--------------------------------------------------------- - # Typography Settings - ----------------------------------------------------------*/ - $theme-respect-user-font-size: false, - - $theme-root-font-size: 18px, - - $theme-global-paragraph-styles: true, - $theme-global-link-styles: true, - $theme-global-content-styles: true, - - $theme-font-type-sans: "helvetica", - - $theme-font-role-heading: 'sans', - $theme-font-role-alt: 'sans', - - $theme-type-scale-md: 7, - $theme-type-scale-xl: 11, - - $theme-font-weight-medium: 500, - - $theme-body-font-size: 'lg', - $theme-h1-font-size: '3xl', - - /*--------------------------------------------------------- - # Component Settings - ----------------------------------------------------------*/ - $theme-banner-max-width: 'desktop-lg', - $theme-breadcrumb-background-color: 'white', - - $theme-card-border-radius: 'md', - $theme-card-border-width: 0, - $theme-card-gap: 3, - - $theme-header-logo-text-width: 15%, - $theme-header-max-width: 'desktop-lg', - - $theme-identifier-max-width: 'desktop-lg', - - /*--------------------------------------------------------- - # Spacing Settings - ----------------------------------------------------------*/ - $theme-grid-container-max-width: 'desktop-lg', - - /*--------------------------------------------------------- - # Utitilites Settings - ----------------------------------------------------------*/ - $theme-utility-breakpoints: ( - 'tablet-lg': true, - ), - -); diff --git a/assets/common/styles/brand-colors.scss b/assets/common/styles/abstracts/brand-colors.scss similarity index 100% rename from assets/common/styles/brand-colors.scss rename to assets/common/styles/abstracts/brand-colors.scss diff --git a/_sass/variables.scss b/assets/common/styles/abstracts/variables.scss similarity index 100% rename from _sass/variables.scss rename to assets/common/styles/abstracts/variables.scss diff --git a/_sass/typography.scss b/assets/common/styles/base/typography.scss similarity index 90% rename from _sass/typography.scss rename to assets/common/styles/base/typography.scss index 632da848f..ad2dedf65 100644 --- a/_sass/typography.scss +++ b/assets/common/styles/base/typography.scss @@ -2,7 +2,7 @@ @use 'uswds-core' as *; // 18F site components -@use 'variables.scss' as *; +@use '../abstracts/variables.scss' as *; h1 { @include u-text('normal'); diff --git a/assets/common/styles/_uswds-theme-settings.scss b/assets/common/styles/base/uswds-theme-settings.scss similarity index 76% rename from assets/common/styles/_uswds-theme-settings.scss rename to assets/common/styles/base/uswds-theme-settings.scss index 987cf0231..cbce62106 100644 --- a/assets/common/styles/_uswds-theme-settings.scss +++ b/assets/common/styles/base/uswds-theme-settings.scss @@ -1,4 +1,4 @@ -@use 'brand-colors' as *; +@use '../abstracts/brand-colors' as *; @use 'uswds-core' as * with ( /*--------------------------------------------------------- @@ -12,16 +12,32 @@ /*--------------------------------------------------------- # Global Settings ----------------------------------------------------------*/ - $theme-global-link-styles: true, + /*--------------------------------------------------------- # Typography Settings ----------------------------------------------------------*/ - $theme-font-type-sans: 'helvetica', + $theme-respect-user-font-size: false, + + $theme-root-font-size: 18px, + + $theme-global-paragraph-styles: true, + $theme-global-link-styles: true, + $theme-global-content-styles: true, + + $theme-font-type-sans: "helvetica", + $theme-font-role-heading: 'sans', - $theme-body-font-size: 'md', - $theme-font-weight-semibold: 700, + $theme-font-role-alt: 'sans', + + $theme-type-scale-md: 7, + $theme-type-scale-xl: 11, + + $theme-font-weight-medium: 100, + + $theme-body-font-size: 'lg', + $theme-h1-font-size: '3xl', /*--------------------------------------------------------- @@ -63,6 +79,22 @@ /*--------------------------------------------------------- # Component Settings ----------------------------------------------------------*/ + $theme-banner-max-width: 'desktop-lg', + $theme-breadcrumb-background-color: 'white', + + $theme-card-border-radius: 'md', + $theme-card-border-width: 0, + $theme-card-gap: 3, + + + $theme-header-max-width: 'desktop-lg', + + $theme-identifier-max-width: 'desktop-lg', + + /*--------------------------------------------------------- + # Spacing Settings + ----------------------------------------------------------*/ + $theme-grid-container-max-width: 'desktop-lg', /*------------------------------------------------ ## Header width diff --git a/_sass/_components/utilities.scss b/assets/common/styles/base/utilities.scss similarity index 97% rename from _sass/_components/utilities.scss rename to assets/common/styles/base/utilities.scss index 45a7a2397..4424953bb 100644 --- a/_sass/_components/utilities.scss +++ b/assets/common/styles/base/utilities.scss @@ -1,5 +1,5 @@ @use 'uswds-core' as *; -@use "variables.scss" as *; +@use "../abstracts/variables.scss" as *; .border-top-05-primary-dark { border-top: units(0.5) solid color('primary-dark'); diff --git a/_sass/_components/button.scss b/assets/common/styles/components/button.scss similarity index 96% rename from _sass/_components/button.scss rename to assets/common/styles/components/button.scss index 89659f7fa..3ef0d846b 100644 --- a/_sass/_components/button.scss +++ b/assets/common/styles/components/button.scss @@ -1,6 +1,6 @@ // Custom button style @use 'uswds-core' as *; -@use 'variables.scss' as *; +@use '../abstracts/variables.scss' as *; .an18f-button--accent { background-color: color('primary-lightest'); diff --git a/_sass/_components/card-with-image-guides.scss b/assets/common/styles/components/card-with-image-guides.scss similarity index 89% rename from _sass/_components/card-with-image-guides.scss rename to assets/common/styles/components/card-with-image-guides.scss index 32f8d3207..47fc86fde 100644 --- a/_sass/_components/card-with-image-guides.scss +++ b/assets/common/styles/components/card-with-image-guides.scss @@ -1,5 +1,5 @@ @use 'uswds-core' as *; -@use 'variables.scss' as *; +@use '../abstracts/variables.scss' as *; .card-with-image-guides { diff --git a/_sass/_components/card-with-image.scss b/assets/common/styles/components/card-with-image.scss similarity index 94% rename from _sass/_components/card-with-image.scss rename to assets/common/styles/components/card-with-image.scss index 3babc5c04..4d60c95c1 100644 --- a/_sass/_components/card-with-image.scss +++ b/assets/common/styles/components/card-with-image.scss @@ -1,5 +1,5 @@ @use 'uswds-core' as *; -@use 'variables.scss' as *; +@use '../abstracts/variables.scss' as *; .card-with-image { diff --git a/_sass/_components/hr.scss b/assets/common/styles/components/hr.scss similarity index 100% rename from _sass/_components/hr.scss rename to assets/common/styles/components/hr.scss diff --git a/_sass/_components/quotemark.scss b/assets/common/styles/components/quotemark.scss similarity index 100% rename from _sass/_components/quotemark.scss rename to assets/common/styles/components/quotemark.scss diff --git a/assets/common/styles/custom-styles.scss b/assets/common/styles/custom-styles.scss deleted file mode 100644 index 8614e9007..000000000 --- a/assets/common/styles/custom-styles.scss +++ /dev/null @@ -1,205 +0,0 @@ -@use 'uswds-core' as * ; - -$bullet-spacing: 1.25rem; - -// Highlight TODO links to make them visually standout -.todo-link, -a[href*="/TODO/"] { - color: color('blue-80v') !important; - background-color: color('gold-10v') !important; - padding: 0 units(0.5); - - &:after { - content: ' [link TBD]'; - } - - &:visited { - color: color('blue-80v') !important; - } -} -.todo-link.usa-link--external:after, -a[href*="/TODO/"].usa-link--external:after { - background-color: inherit; - background-image: none; - margin-left: 0; - padding-left: units(0.5); - vertical-align: baseline; - -webkit-mask-image: none; -} - -// Set heading colors -h1, h2, h3, h4, h5, h6 { - color: color('primary-darker'); -} - -// Anchor link icon styling -.heading-permalink { - opacity: 0.4; - - &:visited { - color: color('primary'); - } - - &:focus, - &:hover { - opacity: 1; - } - - .usa-icon { - vertical-align: sub; - max-width: units(3); - } -} - -// usa-prose overrides -.usa-prose { - blockquote { - max-width: measure(2); - } - - code { - word-wrap: break-word; - } - - h2 { - margin-top: units(5); - &.page-title { - margin-top: units(0); - &.derisking { - padding-top: units(1); - border-top: 1px solid #1C304A; - } - } - } - - li p { - margin-bottom: 0; - } -} - - -// usa-section overrides -.hero .section__heading--white { - color: color('white'); -} - -// accent button -a.usa-button--accent { - color: color('primary-darker'); - background-color: color('accent-cool'); - - &:visited { - color: color('primary-darker'); - background-color: inherit; - } - - &:focus, - &:hover { - color: color('primary-darker'); - background-color: color('accent-cool-lighter'); - } - - &:active { - background-color: color('accent-cool-lightest'); - } -} - -// Custom utilities -.width-200 { - width: 200px; -} - -// De-risking guide -.first_page > h1 { - @include u-font('sans', '3xl'); -} - -.first_page > h2 { - @include u-font('sans', '2xl'); - border-top: 1px solid color('primary-dark'); - padding-top: units(1.5); -} - -#footnotes { - @include u-font('sans', 'md'); - border-top: 1px solid color('primary-dark'); - padding-top: units(1.5); -} - -.footnotes-list { - @include u-font('sans', 'xs'); - max-width: measure(5); - padding-left: units(2); -} - -figcaption { - font-style: italic; -} - -figcaption details { - font-style: normal; -} - -// Engineering Guide -.heading-md { - @include u-font('sans', 'md'); -} - -h2.heading-md { - margin-top: units(2); -} - -/* checklists and key questions */ -.guide-checklist, -.key-questions { - @include u-font('sans','md'); - color: color('white'); - padding: units(1); -} - -.guide-checklist { - background-color: color('primary'); -} - -.key-questions { - background-color: color('primary-darker'); -} - -.guide-checklist + ul, -.key-questions + ul { - background-color: color('blue-5'); - margin-top:0; - padding-top: units(1); - padding-right: units(2); - padding-bottom: units(1); -} - -.guide-checklist + ul li, -.key-questions + ul li { - margin-bottom: units(1); -} - -.guide-checklist + ul, -.guide-checklist + ul ul, -.guide-checklist--single + ul { - list-style: none; - margin-left: 0; - padding-left: units(1); -} - -.guide-checklist + ul li, -.guide-checklist--single + ul li { - padding-left: $bullet-spacing; - text-indent: (-1 * $bullet-spacing); - - &:before { - content: '\25A1'; - padding-right: units(1); - } -} - -/* interview templates */ - -.example-user-interview-script code { - background: yellow; -} diff --git a/_sass/_components/header.scss b/assets/common/styles/layout/header.scss similarity index 99% rename from _sass/_components/header.scss rename to assets/common/styles/layout/header.scss index 4b72f9aa6..9f205cd18 100644 --- a/_sass/_components/header.scss +++ b/assets/common/styles/layout/header.scss @@ -85,7 +85,7 @@ } & + main, - .usa-navbar, { + .usa-navbar { border: none; } diff --git a/_sass/_components/section.scss b/assets/common/styles/layout/section.scss similarity index 100% rename from _sass/_components/section.scss rename to assets/common/styles/layout/section.scss diff --git a/_sass/_components/sidenav.scss b/assets/common/styles/layout/sidenav.scss similarity index 100% rename from _sass/_components/sidenav.scss rename to assets/common/styles/layout/sidenav.scss diff --git a/_sass/_components/blog.scss b/assets/common/styles/pages/blog.scss similarity index 100% rename from _sass/_components/blog.scss rename to assets/common/styles/pages/blog.scss diff --git a/_sass/_components/project-page.scss b/assets/common/styles/pages/project-page.scss similarity index 100% rename from _sass/_components/project-page.scss rename to assets/common/styles/pages/project-page.scss diff --git a/assets/common/styles/styles.scss b/assets/common/styles/styles.scss index 99cceb40c..9e3bff032 100644 --- a/assets/common/styles/styles.scss +++ b/assets/common/styles/styles.scss @@ -1,7 +1,7 @@ /*--------------------------------------------------------- USWDS Settings ----------------------------------------------------------*/ -@forward "uswds-theme-settings"; +@forward "base/uswds-theme-settings"; /*--------------------------------------------------------- USWDS Source @@ -11,7 +11,22 @@ USWDS Source /*--------------------------------------------------------- Custom styling ----------------------------------------------------------*/ -@forward "custom-styles.scss"; + +@forward 'base/typography'; +@forward 'base/utilities'; + +@forward 'components/button'; +@forward 'components/card-with-image'; +@forward 'components/card-with-image-guides'; +@forward 'components/hr'; +@forward 'components/quotemark'; + +@forward 'layout/header'; +@forward 'layout/section'; +@forward 'layout/sidenav'; + +@forward 'pages/blog'; +@forward 'pages/project-page'; @forward "overrides/code_highlight.scss"; @forward "overrides/extended-header.scss"; diff --git a/lib/pa11y.js b/lib/pa11y.js index 5ec829870..194421783 100644 --- a/lib/pa11y.js +++ b/lib/pa11y.js @@ -40,7 +40,7 @@ function changedFileSet() { } function sitewideFileSet() { - const sitewideFolders = ['assets', '_includes', '_sass'] + const sitewideFolders = ['assets', '_includes'] const sitewideFiles = []; sitewideFolders.forEach((folder) => { sitewideFiles.push(glob.sync(`${folder}/**/*`)) From b8542affb0feb61c2d057dee12fb066593f9914e Mon Sep 17 00:00:00 2001 From: Jason Nakai <106776019+jasnakai@users.noreply.github.com> Date: Fri, 28 Jun 2024 15:57:26 +0000 Subject: [PATCH 3/4] Removed some test text from development.md. --- docs/development.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/development.md b/docs/development.md index ab6d8ee2a..b605d6a47 100644 --- a/docs/development.md +++ b/docs/development.md @@ -3,7 +3,7 @@ permalink: false eleventyExcludeFromCollections: true --- -# Development TEST +# Development ## Overview From e00db168087b9cf72edcbba7f5ef1fe193098098 Mon Sep 17 00:00:00 2001 From: Jason Nakai <106776019+jasnakai@users.noreply.github.com> Date: Tue, 2 Jul 2024 20:40:50 +0000 Subject: [PATCH 4/4] Updated footer to match 18F website. FIxed header weight and padding issues for the updated footer. --- _includes/footer.html | 100 ++++++++++++++++-- _includes/usa_identifier.html | 2 +- .../styles/base/uswds-theme-settings.scss | 2 +- 3 files changed, 91 insertions(+), 13 deletions(-) diff --git a/_includes/footer.html b/_includes/footer.html index 79f1bedae..e819d2b8f 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,15 +1,93 @@ - \ No newline at end of file diff --git a/_includes/usa_identifier.html b/_includes/usa_identifier.html index 0174ebb1b..33bc36c79 100644 --- a/_includes/usa_identifier.html +++ b/_includes/usa_identifier.html @@ -1,4 +1,4 @@ -
+
diff --git a/assets/common/styles/base/uswds-theme-settings.scss b/assets/common/styles/base/uswds-theme-settings.scss index cbce62106..8dadd0352 100644 --- a/assets/common/styles/base/uswds-theme-settings.scss +++ b/assets/common/styles/base/uswds-theme-settings.scss @@ -34,7 +34,7 @@ $theme-type-scale-md: 7, $theme-type-scale-xl: 11, - $theme-font-weight-medium: 100, + $theme-font-weight-medium: 500, $theme-body-font-size: 'lg', $theme-h1-font-size: '3xl',