diff --git a/Gemfile b/Gemfile index 708aed3d..7ed3a166 100644 --- a/Gemfile +++ b/Gemfile @@ -1,20 +1,17 @@ -ruby '>= 2.7.4' - source "https://rubygems.org" +ruby '>= 2.7.4' -gem "jekyll", "~> 3.9" - -# See https://github.com/envygeeks/jekyll-assets/issues/622 -gem "sprockets", "~> 3.7" -gem "kramdown-parser-gfm", "~> 1.1.0" +gem "jekyll", "~> 4.0" +gem "execjs", "2.7.0" # https://github.com/rails/execjs/issues/99 +gem "autoprefixer-rails" group :jekyll_plugins do gem "jekyll-feed", "~> 0.15" gem 'jekyll-redirect-from' - gem 'jekyll-paginate-v2', "3.0.0" + gem 'jekyll-paginate-v2', "3.0.0" gem 'jekyll-sitemap' gem 'jekyll-seo-tag' - gem "jekyll-assets", "~> 3.0", group: :jekyll_plugins + gem 'jekyll-assets', git: "https://github.com/envygeeks/jekyll-assets" end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem diff --git a/Gemfile.lock b/Gemfile.lock index dff63143..f60577cd 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,63 +1,74 @@ +GIT + remote: https://github.com/envygeeks/jekyll-assets + revision: 056d2c88719ef3b1f90967a606dd1441581dd832 + specs: + jekyll-assets (4.0.0.alpha) + activesupport (>= 5, < 7) + execjs (~> 2.7) + extras (~> 0.2) + fastimage (~> 2.0, >= 1.8) + jekyll (>= 3.5, < 5.0) + jekyll-sanity (~> 1.2) + liquid-tag-parser (>= 1, < 3) + nokogiri (~> 1.10) + pathutil (~> 0.16) + sassc (>= 1.11, < 3.0) + sprockets (~> 4.0.beta7) + GEM remote: https://rubygems.org/ specs: - activesupport (5.2.6) + activesupport (6.1.4.6) concurrent-ruby (~> 1.0, >= 1.0.2) - i18n (>= 0.7, < 2) - minitest (~> 5.1) - tzinfo (~> 1.1) + i18n (>= 1.6, < 2) + minitest (>= 5.1) + tzinfo (~> 2.0) + zeitwerk (~> 2.3) addressable (2.8.0) public_suffix (>= 2.0.2, < 5.0) + autoprefixer-rails (10.4.2.0) + execjs (~> 2) colorator (1.1.0) - concurrent-ruby (1.1.8) - em-websocket (0.5.2) + concurrent-ruby (1.1.9) + em-websocket (0.5.3) eventmachine (>= 0.12.9) - http_parser.rb (~> 0.6.0) - ethon (0.14.0) + http_parser.rb (~> 0) + ethon (0.15.0) ffi (>= 1.15.0) eventmachine (1.2.7) - execjs (2.8.1) + execjs (2.7.0) extras (0.3.0) forwardable-extended (~> 2.5) - fastimage (2.2.3) - ffi (1.15.0) + fastimage (2.2.6) + ffi (1.15.5) forwardable-extended (2.6.0) - html-proofer (3.19.1) + html-proofer (3.19.3) addressable (~> 2.3) mercenary (~> 0.3) - nokogumbo (~> 2.0) + nokogiri (~> 1.12) parallel (~> 1.3) rainbow (~> 3.0) typhoeus (~> 1.3) yell (~> 2.0) - http_parser.rb (0.6.0) - i18n (0.9.5) + http_parser.rb (0.8.0) + i18n (1.10.0) concurrent-ruby (~> 1.0) - jekyll (3.9.1) + jekyll (4.2.1) addressable (~> 2.4) colorator (~> 1.0) em-websocket (~> 0.5) - i18n (~> 0.7) - jekyll-sass-converter (~> 1.0) + i18n (~> 1.0) + jekyll-sass-converter (~> 2.0) jekyll-watch (~> 2.0) - kramdown (>= 1.17, < 3) + kramdown (~> 2.3) + kramdown-parser-gfm (~> 1.0) liquid (~> 4.0) - mercenary (~> 0.3.3) + mercenary (~> 0.4.0) pathutil (~> 0.9) - rouge (>= 1.7, < 4) + rouge (~> 3.0) safe_yaml (~> 1.0) - jekyll-assets (3.0.12) - activesupport (~> 5.0) - execjs (~> 2.7) - extras (~> 0.2) - fastimage (~> 2.0, >= 1.8) - jekyll (>= 3.5, < 4.0) - jekyll-sanity (~> 1.2) - liquid-tag-parser (~> 1.0) - nokogiri (~> 1.8) - pathutil (~> 0.16) - sprockets (>= 3.3, < 4.1.beta) - jekyll-feed (0.15.1) + terminal-table (~> 2.0) + jekyll-feed (0.16.0) jekyll (>= 3.7, < 5.0) jekyll-paginate-v2 (3.0.0) jekyll (>= 3.0, < 5.0) @@ -66,9 +77,9 @@ GEM jekyll-sanity (1.6.0) jekyll (>= 3.1, < 5.0) pathutil (~> 0.16) - jekyll-sass-converter (1.5.2) - sass (~> 3.4) - jekyll-seo-tag (2.7.1) + jekyll-sass-converter (2.1.0) + sassc (> 2.0.1, < 3.0) + jekyll-seo-tag (2.8.0) jekyll (>= 3.8, < 5.0) jekyll-sitemap (1.4.0) jekyll (>= 3.7, < 5.0) @@ -79,66 +90,64 @@ GEM kramdown-parser-gfm (1.1.0) kramdown (~> 2.0) liquid (4.0.3) - liquid-tag-parser (1.9.0) + liquid-tag-parser (2.0.2) extras (~> 0.3) liquid (>= 3.0, < 5.0) - listen (3.5.1) + listen (3.7.1) rb-fsevent (~> 0.10, >= 0.10.3) rb-inotify (~> 0.9, >= 0.9.10) - mercenary (0.3.6) - mini_portile2 (2.6.1) - minitest (5.14.4) - nokogiri (1.12.5) - mini_portile2 (~> 2.6.1) + mercenary (0.4.0) + mini_portile2 (2.7.1) + minitest (5.15.0) + nokogiri (1.13.1) + mini_portile2 (~> 2.7.0) racc (~> 1.4) - nokogumbo (2.0.5) - nokogiri (~> 1.8, >= 1.8.4) - parallel (1.20.1) + parallel (1.21.0) pathutil (0.16.2) forwardable-extended (~> 2.6) public_suffix (4.0.6) racc (1.6.0) rack (2.2.3) - rainbow (3.0.0) - rb-fsevent (0.11.0) + rainbow (3.1.1) + rb-fsevent (0.11.1) rb-inotify (0.10.1) ffi (~> 1.0) rexml (3.2.5) - rouge (3.26.0) + rouge (3.28.0) safe_yaml (1.0.5) - sass (3.7.4) - sass-listen (~> 4.0.0) - sass-listen (4.0.0) - rb-fsevent (~> 0.9, >= 0.9.4) - rb-inotify (~> 0.9, >= 0.9.7) - sprockets (3.7.2) + sassc (2.4.0) + ffi (~> 1.9) + sprockets (4.0.2) concurrent-ruby (~> 1.0) rack (> 1, < 3) - thread_safe (0.3.6) + terminal-table (2.0.0) + unicode-display_width (~> 1.1, >= 1.1.1) typhoeus (1.4.0) ethon (>= 0.9.0) - tzinfo (1.2.9) - thread_safe (~> 0.1) + tzinfo (2.0.4) + concurrent-ruby (~> 1.0) + unicode-display_width (1.8.0) yell (2.2.2) + zeitwerk (2.5.4) PLATFORMS ruby DEPENDENCIES + autoprefixer-rails + execjs (= 2.7.0) html-proofer (~> 3.18) - jekyll (~> 3.9) - jekyll-assets (~> 3.0) + jekyll (~> 4.0) + jekyll-assets! jekyll-feed (~> 0.15) jekyll-paginate-v2 (= 3.0.0) jekyll-redirect-from jekyll-seo-tag jekyll-sitemap - kramdown-parser-gfm (~> 1.1.0) - sprockets (~> 3.7) tzinfo-data RUBY VERSION ruby 2.7.4p191 BUNDLED WITH - 1.17.2 + 2.1.4 diff --git a/_assets/css/index.scss b/_assets/css/index.scss deleted file mode 100644 index d60a0ebd..00000000 --- a/_assets/css/index.scss +++ /dev/null @@ -1,52 +0,0 @@ -/* - Customize US Web Design System SASS - See all at designsystem.digital.gov/documentation/settings -*/ - -// Example - Override the background image in the hero component using SASS: -// $theme-hero-image: asset_path("whatever-the-default-is.png"); - -@import "uswds"; - -// Example - Override the background image in the hero component using CSS: -//.usa-hero { -// background-image: asset_url("your-image.png") -// background-position: 50%; -// background-size: cover; -//} - -/* - Add your SASS/CSS here -*/ - -// default mode hide banner -.usa-banner__content { - display: hidden; -} - -@media screen and (min-width: 640px) { - .tablet\:width-1\/3 { - width: 33%; - } - .tablet\:float-left { - float: left; - } -} - -@media screen and (min-width: 640px) { - .paginate-link { - display: initial; - } - .paginate-button { - display: none; - } -} - -@media screen and (max-width: 640px) { - .paginate-link { - display: none; - } - .paginate-button { - display: block; - } -} diff --git a/_assets/css/overrides/_add-background-svg.scss b/_assets/css/overrides/_add-background-svg.scss new file mode 100644 index 00000000..db530b7f --- /dev/null +++ b/_assets/css/overrides/_add-background-svg.scss @@ -0,0 +1,7 @@ +// Override USWDS mixin to use jekyll-assets asset_url() + +@mixin add-background-svg($image-name, $image-path: $theme-image-path) { + background-image: asset_url("#{$image-path}/#{$image-name}.svg"), + linear-gradient(transparent, transparent); + background-repeat: no-repeat; +} diff --git a/_assets/css/overrides/_all.scss b/_assets/css/overrides/_all.scss new file mode 100644 index 00000000..545b5795 --- /dev/null +++ b/_assets/css/overrides/_all.scss @@ -0,0 +1,4 @@ +@import "add-background-svg"; +@import "font-face"; +@import "hero"; +@import "icon"; diff --git a/_assets/css/overrides/_font-face.scss b/_assets/css/overrides/_font-face.scss new file mode 100644 index 00000000..ba2b5c8f --- /dev/null +++ b/_assets/css/overrides/_font-face.scss @@ -0,0 +1,13 @@ +// Override USWDS mixin to use jekyll-assets asset_url() + +@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) { + @font-face { + font-family: $display-name; + font-style: unquote($font-style); + font-weight: $font-weight; + font-display: fallback; + src: asset_url("'#{$file-path}.woff2'") format("woff2"), + asset_url("'#{$file-path}.woff'") format("woff"), + asset_url("'#{$file-path}.ttf'") format("truetype"); + } +} diff --git a/_assets/css/overrides/_hero.scss b/_assets/css/overrides/_hero.scss new file mode 100644 index 00000000..1e5c118b --- /dev/null +++ b/_assets/css/overrides/_hero.scss @@ -0,0 +1,5 @@ +// Override USWDS mixin to use jekyll-assets asset_url() + +.usa-hero { + background-image: $theme-hero-image !important; +} diff --git a/_assets/css/overrides/_icon.scss b/_assets/css/overrides/_icon.scss new file mode 100644 index 00000000..2198412c --- /dev/null +++ b/_assets/css/overrides/_icon.scss @@ -0,0 +1,80 @@ +// Override USWDS mixin to use jekyll-assets asset_url() + +@mixin add-color-icon($icon-object, $contrast-bg) { + $filename-base: map-get($icon-object, "name"); + $svg-height: map-get($icon-object, "svg-height"); + $svg-width: map-get($icon-object, "svg-width"); + $aspect: divide($svg-width, $svg-height); + $height: if( + unitless(map-get($icon-object, "height")), + units(map-get($icon-object, "height")), + map-get($icon-object, "height") + ); + $width: $height * $aspect; + $container-height: if( + map-has-key($icon-object, "container-height"), + units(map-get($icon-object, "container-height")), + null + ); + $container-width: if( + map-has-key($icon-object, "container-width"), + units(map-get($icon-object, "container-width")), + null + ); + $color: if( + map-has-key($icon-object, "color"), + map-get($icon-object, "color"), + "ink" + ); + $color-variant: if( + map-has-key($icon-object, "color-variant"), + map-get($icon-object, "color-variant"), + "white" + ); + $color-hover: if( + map-has-key($icon-object, "color-hover"), + map-get($icon-object, "color-hover"), + null + ); + $rotate: if( + map-has-key($icon-object, "rotate"), + map-get($icon-object, "rotate"), + null + ); + $path: if( + map-has-key($icon-object, "path"), + map-get($icon-object, "path"), + $theme-image-path + ); + $ie11-variant: get-color-token-from-bg($contrast-bg, "white", "black"); + $filename-ie11: if( + $ie11-variant == "white", + "usa-icons-bg/#{$filename-base}--white.svg", + "usa-icons/#{$filename-base}.svg" + ); + + $mask-props: asset_url("#{$path}/usa-icons/#{$filename-base}.svg") no-repeat center / + contain; + $image-props: asset_url("#{$path}/#{$filename-ie11}") no-repeat center / contain; + + // Default background shorthand for browsers that don't support mask or supports. + background: $image-props; + display: inline-block; + height: if($container-height, $container-height, $height); + width: if($container-width, $container-width, $width); + @if $rotate { + transform: rotate($rotate); + } + + // Mask supported styles + @supports (mask: url("")) { + background: none; + background-color: if($color == currentColor, $color, color($color)); + mask: $mask-props; + @if $color-hover { + &:hover { + background-color: color($color-hover); + } + } + } +} diff --git a/_assets/css/styles.scss b/_assets/css/styles.scss new file mode 100644 index 00000000..ff04668f --- /dev/null +++ b/_assets/css/styles.scss @@ -0,0 +1,78 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +*/ + +// ------------------------------------- +// Import individual theme settings +@import "theme/uswds-theme-general"; +@import "theme/uswds-theme-typography"; +@import "theme/uswds-theme-spacing"; +@import "theme/uswds-theme-color"; +@import "theme/uswds-theme-utilities"; +@import "theme/uswds-theme-components"; + +// Set correct paths for use with asset pipeline +$theme-font-path: "fonts"; +$theme-image-path: "img"; + +// ------------------------------------- +// Import individual USWDS packages... +@import "scss/packages/required"; +@import "overrides/all"; +@import "scss/packages/global"; + +@import "scss/packages/uswds-components"; +@import "scss/packages/uswds-utilities"; + +/* +---------------------------------------- +USWDS THEME CUSTOM STYLES +---------------------------------------- +!! Copy this file to your project's + sass root. Don't edit the version + in node_modules. +---------------------------------------- +Custom project SASS goes here. + +i.e. +@include u-padding-right('05'); +---------------------------------------- +*/ + +// default mode hide banner +.usa-banner__content { + display: hidden; +} + +@media screen and (min-width: 640px) { + .tablet\:width-1\/3 { + width: 33%; + } + .tablet\:float-left { + float: left; + } +} + +@media screen and (min-width: 640px) { + .paginate-link { + display: initial; + } + .paginate-button { + display: none; + } +} + +@media screen and (max-width: 640px) { + .paginate-link { + display: none; + } + .paginate-button { + display: block; + } +} diff --git a/_assets/css/theme/_uswds-theme-color.scss b/_assets/css/theme/_uswds-theme-color.scss new file mode 100644 index 00000000..ced85912 --- /dev/null +++ b/_assets/css/theme/_uswds-theme-color.scss @@ -0,0 +1,147 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +USWDS 2.13.1 +---------------------------------------- +COLOR SETTINGS +---------------------------------------- +Read more about settings and +USWDS color tokens in the documentation: +https://designsystem.digital.gov/design-tokens/color +---------------------------------------- +*/ + +/* +---------------------------------------- +Theme palette colors +---------------------------------------- +*/ + +// Base colors +$theme-color-base-family: "gray-cool"; +$theme-color-base-lightest: "gray-5"; +$theme-color-base-lighter: "gray-cool-10"; +$theme-color-base-light: "gray-cool-30"; +$theme-color-base: "gray-cool-50"; +$theme-color-base-dark: "gray-cool-60"; +$theme-color-base-darker: "gray-cool-70"; +$theme-color-base-darkest: "gray-90"; +$theme-color-base-ink: "gray-90"; + +// Primary colors +$theme-color-primary-family: "blue"; +$theme-color-primary-lightest: false; +$theme-color-primary-lighter: "blue-10"; +$theme-color-primary-light: "blue-30"; +$theme-color-primary: "blue-60v"; +$theme-color-primary-vivid: "blue-warm-60v"; +$theme-color-primary-dark: "blue-warm-70v"; +$theme-color-primary-darker: "blue-warm-80v"; +$theme-color-primary-darkest: false; + +// Secondary colors +$theme-color-secondary-family: "red"; +$theme-color-secondary-lightest: false; +$theme-color-secondary-lighter: "red-cool-10"; +$theme-color-secondary-light: "red-30"; +$theme-color-secondary: "red-50"; +$theme-color-secondary-vivid: "red-cool-50v"; +$theme-color-secondary-dark: "red-60v"; +$theme-color-secondary-darker: "red-70v"; +$theme-color-secondary-darkest: false; + +// Accent warm colors +$theme-color-accent-warm-family: "orange"; +$theme-color-accent-warm-lightest: false; +$theme-color-accent-warm-lighter: "orange-10"; +$theme-color-accent-warm-light: "orange-20v"; +$theme-color-accent-warm: "orange-30v"; +$theme-color-accent-warm-dark: "orange-50v"; +$theme-color-accent-warm-darker: "orange-60"; +$theme-color-accent-warm-darkest: false; + +// Accent cool colors +$theme-color-accent-cool-family: "blue-cool"; +$theme-color-accent-cool-lightest: false; +$theme-color-accent-cool-lighter: "blue-cool-5v"; +$theme-color-accent-cool-light: "blue-cool-20v"; +$theme-color-accent-cool: "cyan-30v"; +$theme-color-accent-cool-dark: "blue-cool-40v"; +$theme-color-accent-cool-darker: "blue-cool-60v"; +$theme-color-accent-cool-darkest: false; + +/* +---------------------------------------- +State palette colors +---------------------------------------- +*/ + +// Error colors +$theme-color-error-family: "red-warm"; +$theme-color-error-lighter: "red-warm-10"; +$theme-color-error-light: "red-warm-30v"; +$theme-color-error: "red-warm-50v"; +$theme-color-error-dark: "red-60v"; +$theme-color-error-darker: "red-70"; + +// Warning colors +$theme-color-warning-family: "gold"; +$theme-color-warning-lighter: "yellow-5"; +$theme-color-warning-light: "yellow-10v"; +$theme-color-warning: "gold-20v"; +$theme-color-warning-dark: "gold-30v"; +$theme-color-warning-darker: "gold-50v"; + +// Success colors +$theme-color-success-family: "green-cool"; +$theme-color-success-lighter: "green-cool-5"; +$theme-color-success-light: "green-cool-20v"; +$theme-color-success: "green-cool-40v"; +$theme-color-success-dark: "green-cool-50v"; +$theme-color-success-darker: "green-cool-60v"; + +// Info colors +$theme-color-info-family: "cyan"; +$theme-color-info-lighter: "cyan-5"; +$theme-color-info-light: "cyan-20"; +$theme-color-info: "cyan-30v"; +$theme-color-info-dark: "cyan-40v"; +$theme-color-info-darker: "blue-cool-60"; + +// Disabled colors +$theme-color-disabled-family: "gray"; +$theme-color-disabled-light: "gray-10"; +$theme-color-disabled: "gray-20"; +$theme-color-disabled-dark: "gray-30"; + +// Emergency colors +$theme-color-emergency: "red-warm-60v"; +$theme-color-emergency-dark: "red-warm-80"; + +/* +---------------------------------------- +General colors +---------------------------------------- +*/ + +// Body +$theme-body-background-color: "white"; + +// Text +$theme-text-color: "ink"; +$theme-text-reverse-color: "white"; + +// Links +$theme-link-color: "primary"; +$theme-link-visited-color: "violet-70v"; +$theme-link-hover-color: "primary-dark"; +$theme-link-active-color: "primary-darker"; +$theme-link-reverse-color: "base-lighter"; +$theme-link-reverse-hover-color: "base-lightest"; +$theme-link-reverse-active-color: "white"; diff --git a/_assets/css/theme/_uswds-theme-components.scss b/_assets/css/theme/_uswds-theme-components.scss new file mode 100644 index 00000000..bdc42fe4 --- /dev/null +++ b/_assets/css/theme/_uswds-theme-components.scss @@ -0,0 +1,202 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +USWDS 2.13.1 +---------------------------------------- +COMPONENT SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ + +// Accordion +$theme-accordion-border-width: 0.5; +$theme-accordion-border-color: "base-lightest"; +$theme-accordion-font-family: "body"; + +// Alert +$theme-alert-bar-width: 1; +$theme-alert-font-family: "ui"; +$theme-alert-icon-size: 4; +$theme-alert-padding-x: 2.5; +$theme-alert-padding-y: 2; +$theme-alert-text-color: default; +$theme-alert-text-reverse-color: default; +$theme-alert-link-color: default; +$theme-alert-link-reverse-color: default; + +// Banner +$theme-banner-background-color: "base-lightest"; +$theme-banner-font-family: "ui"; +$theme-banner-link-color: default; +$theme-banner-max-width: "desktop"; + +// Breadcrumb +$theme-breadcrumb-background-color: "default"; +$theme-breadcrumb-font-size: "sm"; +$theme-breadcrumb-font-family: "body"; +$theme-breadcrumb-link-color: default; +$theme-breadcrumb-min-width: "mobile-lg"; +$theme-breadcrumb-padding-bottom: 2; +$theme-breadcrumb-padding-top: 2; +$theme-breadcrumb-padding-x: 0; +$theme-breadcrumb-separator-color: "base"; + +// Button +$theme-button-font-family: "ui"; +$theme-button-border-radius: "md"; +$theme-button-small-width: 6; +$theme-button-stroke-width: 2px; + +// Card +$theme-card-border-color: "base-lighter"; +$theme-card-border-radius: "lg"; +$theme-card-border-width: 2px; +$theme-card-gap: 2; +$theme-card-flag-min-width: "tablet"; +$theme-card-flag-image-width: "card-lg"; +$theme-card-font-family: "body"; +$theme-card-header-typeset: "heading", "lg", 2; +$theme-card-margin-bottom: 4; +$theme-card-padding-perimeter: 3; +$theme-card-padding-y: 2; + +// Collection +$theme-collection-font-family: "ui"; +$theme-collection-header-typeset: "ui", "md", 3; + +// Footer +$theme-footer-font-family: "body"; +$theme-footer-max-width: "desktop"; + +// Form and input +$theme-checkbox-border-radius: "sm"; +$theme-form-font-family: "ui"; +$theme-input-background-color: default; +$theme-input-line-height: 3; +$theme-input-max-width: "mobile-lg"; +$theme-input-select-border-width: 2px; +$theme-input-select-size: 2.5; +$theme-input-state-border-width: 0.5; +$theme-input-tile-border-radius: "md"; +$theme-input-tile-border-width: 2px; + +// Header +$theme-header-font-family: "ui"; +$theme-header-logo-text-width: 33%; +$theme-header-max-width: "desktop"; +$theme-header-min-width: "desktop"; + +// Hero +$theme-hero-image: asset_url("img/hero.png"); + +// Icon List +$theme-icon-list-font-family: "body"; +$theme-icon-list-title-font-family: "heading"; + +// Identifier +$theme-identifier-background-color: "base-darkest"; +$theme-identifier-font-family: "ui"; +$theme-identifier-identity-domain-color: "base-light"; +$theme-identifier-max-width: "desktop"; +$theme-identifier-primary-link-color: default; +$theme-identifier-secondary-link-color: "base-light"; + +// Modal +$theme-modal-border-radius: "lg"; +$theme-modal-default-max-width: "mobile-lg"; +$theme-modal-lg-content-max-width: "tablet"; +$theme-modal-lg-max-width: "tablet-lg"; + +// Pagination +$theme-pagination-background-color: "default"; +$theme-pagination-breakpoint: "tablet"; +$theme-pagination-button-border-radius: "md"; +$theme-pagination-button-border-width: 1px; +$theme-pagination-font-family: "ui"; + +// Process List +$theme-process-list-counter-background-color: "white"; +$theme-process-list-counter-border-color: "ink"; +$theme-process-list-counter-border-width: 0.5; +$theme-process-list-counter-font-family: "ui"; +$theme-process-list-counter-font-size: "lg"; +$theme-process-list-counter-gap-color: "white"; +$theme-process-list-counter-gap-width: 0.5; +$theme-process-list-counter-size: 5; +$theme-process-list-counter-text-color: "ink"; +$theme-process-list-connector-color: "primary-lighter"; +$theme-process-list-connector-width: 1; +$theme-process-list-font-family: "ui"; +$theme-process-list-font-size: "sm"; +$theme-process-list-heading-color: "ink"; +$theme-process-list-heading-font-family: "ui"; +$theme-process-list-heading-font-size: "lg"; + +// Navigation +$theme-navigation-font-family: "ui"; +$theme-megamenu-columns: 3; + +// Search +$theme-search-font-family: "ui"; +$theme-search-min-width: 27ch; + +// Sidenav +$theme-sidenav-current-border-width: 0.5; +$theme-sidenav-font-family: "ui"; + +// Site Alert +$theme-site-alert-max-width: "desktop"; + +// Step indicator +$step-indicator-background-color: "white"; +$theme-step-indicator-counter-gap: 0.5; +$theme-step-indicator-counter-border-width: 0.5; +$theme-step-indicator-font-family: "ui"; +$theme-step-indicator-heading-color: "ink"; +$theme-step-indicator-heading-font-family: "ui"; +$theme-step-indicator-heading-font-size: "lg"; +$theme-step-indicator-heading-font-size-small: "md"; +$theme-step-indicator-label-font-size: "sm"; +$theme-step-indicator-min-width: "tablet"; +$theme-step-indicator-segment-color-pending: "base-lighter"; +$theme-step-indicator-segment-color-complete: "primary-darker"; +$theme-step-indicator-segment-color-current: "primary"; +$theme-step-indicator-segment-gap: 2px; +$theme-step-indicator-segment-height: 1; +$theme-step-indicator-text-pending-color: "base-dark"; + +// Summary box +$theme-summary-box-background-color: "info-lighter"; +$theme-summary-box-border-color: "info-light"; +$theme-summary-box-border-width: 1px; +$theme-summary-box-border-radius: "md"; +$theme-summary-box-font-family: "ui"; +$theme-summary-box-link-color: default; +$theme-summary-box-text-color: default; + +// Table +$theme-table-border-color: default; +$theme-table-header-background-color: "base-lighter"; +$theme-table-header-text-color: default; +$theme-table-stripe-background-color: "base-lightest"; +$theme-table-stripe-text-color: default; +$theme-table-text-color: default; +$theme-table-sorted-header-background-color: "accent-cool-light"; +$theme-table-sorted-background-color: "accent-cool-lighter"; +$theme-table-sorted-stripe-background-color: "blue-cool-10v"; +$theme-table-sorted-icon-color: default; +$theme-table-unsorted-icon-color: "base"; + +// Tooltips +$theme-tooltip-background-color: "ink"; +$theme-tooltip-font-color: "base-lightest"; +$theme-tooltip-font-size: "xs"; diff --git a/_assets/css/theme/_uswds-theme-general.scss b/_assets/css/theme/_uswds-theme-general.scss new file mode 100644 index 00000000..e711f161 --- /dev/null +++ b/_assets/css/theme/_uswds-theme-general.scss @@ -0,0 +1,117 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +USWDS 2.13.1 +---------------------------------------- +GENERAL SETTINGS +---------------------------------------- +Read more about settings and +USWDS style tokens in the documentation: +https://designsystem.digital.gov/design-tokens +---------------------------------------- +*/ + +/* +---------------------------------------- +Image path +---------------------------------------- +Relative image file path +---------------------------------------- +*/ + +$theme-image-path: "img"; + +/* +---------------------------------------- +Show compile warnings +---------------------------------------- +Show Sass warnings when functions and +mixins use non-standard tokens. +AND +Show updates and notifications. +---------------------------------------- +*/ + +$theme-show-compile-warnings: true; +$theme-show-notifications: true; + +/* +---------------------------------------- +Namespace +---------------------------------------- +*/ + +$theme-namespace: ( + "grid": ( + namespace: "grid-", + output: true, + ), + "utility": ( + namespace: "u-", + output: false, + ), +); + +/* +---------------------------------------- +Prefix separator +---------------------------------------- +Set the character the separates +responsive and state prefixes from the +main class name. + +The default (":") needs to be preceded +by two backslashes to be properly +escaped. +---------------------------------------- +*/ + +$theme-prefix-separator: "\\:"; + +/* +---------------------------------------- +Layout grid +---------------------------------------- +Should the layout grid classes output +with !important +---------------------------------------- +*/ + +$theme-layout-grid-use-important: false; + +/* +---------------------------------------- +Border box sizing +---------------------------------------- +When set to true, sets the box-sizing +property of all site elements to +`border-box`. +---------------------------------------- +*/ + +$theme-global-border-box-sizing: true; + +/* +---------------------------------------- +Focus styles +---------------------------------------- +*/ + +$theme-focus-color: "blue-40v"; +$theme-focus-offset: 0; +$theme-focus-style: solid; +$theme-focus-width: 0.5; + +/* +---------------------------------------- +Icons +---------------------------------------- +*/ + +$theme-icon-image-size: 2; diff --git a/_assets/css/theme/_uswds-theme-spacing.scss b/_assets/css/theme/_uswds-theme-spacing.scss new file mode 100644 index 00000000..11e980bc --- /dev/null +++ b/_assets/css/theme/_uswds-theme-spacing.scss @@ -0,0 +1,92 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +USWDS 2.13.1 +---------------------------------------- +SPACING SETTINGS +---------------------------------------- +Read more about settings and +USWDS spacing units tokens in the +documentation: +https://designsystem.digital.gov/design-tokens/spacing-units +---------------------------------------- +*/ + +/* +---------------------------------------- +Border radius +---------------------------------------- +2px 2px +0.5 4px +1 8px +1.5 12px +2 16px +2.5 20px +3 24px +4 32px +5 40px +6 48px +7 56px +8 64px +9 72px +---------------------------------------- +*/ + +$theme-border-radius-sm: 2px; +$theme-border-radius-md: 0.5; +$theme-border-radius-lg: 1; + +/* +---------------------------------------- +Column gap +---------------------------------------- +2px 2px +0.5 4px +1 8px +2 16px +3 24px +4 32px +5 40px +6 48px +---------------------------------------- +*/ + +$theme-column-gap-sm: 2px; +$theme-column-gap-md: 2; +$theme-column-gap-lg: 3; + +// These determine the responsive gap sizes set with .grid-gap +$theme-column-gap-mobile: 2; +$theme-column-gap-desktop: 4; + +/* +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +*/ + +$theme-grid-container-max-width: "desktop"; + +/* +---------------------------------------- +Site +---------------------------------------- +*/ + +$theme-site-margins-breakpoint: "desktop"; +$theme-site-margins-width: 4; +$theme-site-margins-mobile-width: 2; diff --git a/_assets/css/theme/_uswds-theme-typography.scss b/_assets/css/theme/_uswds-theme-typography.scss new file mode 100644 index 00000000..5d86aec5 --- /dev/null +++ b/_assets/css/theme/_uswds-theme-typography.scss @@ -0,0 +1,422 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +USWDS 2.13.1 +---------------------------------------- +TYPOGRAPHY SETTINGS +---------------------------------------- +Read more about settings and +USWDS typography tokens in the documentation: +https://designsystem.digital.gov/design-tokens/typesetting/font-family/ +---------------------------------------- +*/ + +/* +---------------------------------------- +Root font size +---------------------------------------- +Setting $theme-respect-user-font-size to +true sets the root font size to 100% and +uses ems for media queries +---------------------------------------- +$theme-root-font-size only applies when +$theme-respect-user-font-size is set to +false. + +This will set the root font size +as a specific px value and use px values +for media queries. + +Accepts true or false +---------------------------------------- +*/ + +$theme-respect-user-font-size: true; + +// $theme-root-font-size only applies when +// $theme-respect-user-font-size is set to +// false. + +// This will set the root font size +// as a specific px value and use px values +// for media queries. + +// Accepts values in px + +$theme-root-font-size: 10px; + +/* +---------------------------------------- +Global styles +---------------------------------------- +Adds basic styling for the following +unclassed elements: + +- paragraph: paragraph text +- link: links +- content: paragraph text, links, + headings, lists, and tables +---------------------------------------- +*/ + +$theme-global-paragraph-styles: false; +$theme-global-link-styles: false; +$theme-global-content-styles: false; + +/* +---------------------------------------- +Font path +---------------------------------------- +Relative font file path +---------------------------------------- +*/ + +$theme-font-path: "fonts"; + +/* +---------------------------------------- +Custom typeface tokens +---------------------------------------- +Add a new custom typeface token if +your project uses a typeface not already +defined by USWDS. +---------------------------------------- +USWDS defines the following tokens +by default: +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +Add as many new tokens as you have +custom typefaces. Reference your new +token(s) in the type-based font settings +using the quoted name of the token. + +For example: + +$theme-font-type-cond: 'example-font-token'; + +display-name: +The display name of your font + +cap-height: +The height of a 500px `N` in Sketch +---------------------------------------- +You should change `example-[style]-token` +names to something more descriptive. +---------------------------------------- +*/ + +$theme-typeface-tokens: ( + example-serif-token: ( + display-name: "Example Serif Display Name", + cap-height: 364px, + ), + example-sans-token: ( + display-name: "Example Sans Display Name", + cap-height: 364px, + ), +); + +/* +---------------------------------------- +Type-based font settings +---------------------------------------- +Set the type-based tokens for your +project from the following tokens, +or from any new font tokens you added in +$theme-typeface-tokens. +---------------------------------------- +'georgia' +'helvetica' +'merriweather' +'open-sans' +'public-sans' +'roboto-mono' +'source-sans-pro' +'system' +'tahoma' +'verdana' +---------------------------------------- +*/ + +// condensed +$theme-font-type-cond: false; + +// icon +$theme-font-type-icon: false; + +// language-specific +$theme-font-type-lang: false; + +// monospace +$theme-font-type-mono: "roboto-mono"; + +// sans-serif +$theme-font-type-sans: "source-sans-pro"; + +// serif +$theme-font-type-serif: "merriweather"; + +/* +---------------------------------------- +Custom font stacks +---------------------------------------- +Add custom font stacks to any of the +type-based fonts. Any USWDS typeface +token already has a default stack. + +Custom stacks don't need to include the +font's display name. It will +automatically appear at the start of +the stack. +---------------------------------------- +Example: +$theme-font-type-sans: 'source-sans-pro'; +$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; + +Output: +font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; +---------------------------------------- +*/ + +$theme-font-cond-custom-stack: false; +$theme-font-icon-custom-stack: false; +$theme-font-lang-custom-stack: false; +$theme-font-mono-custom-stack: false; +$theme-font-sans-custom-stack: false; +$theme-font-serif-custom-stack: false; + +/* +---------------------------------------- +Add any custom font source files +---------------------------------------- +If you want USWDS to generate additional +@font-face declarations, add your font +data below, following the example that +follows. +---------------------------------------- +USWDS automatically generates @font-face +decalarations for the following + +'merriweather' +'public-sans' +'roboto-mono' +'source-sans-pro' + +These typefaces not require custom +source files. +---------------------------------------- +EXAMPLE + +- dir: + Directory relative to $theme-font-path +- This directory should include fonts saved as + .ttf, .woff, and .woff2 + ExampleSerif-Normal.ttf + ExampleSerif-Normal.woff + ExampleSerif-Normal.woff2 + +$theme-font-serif-custom-src: ( + dir: 'custom/example-serif', + roman: ( + 100: false, + 200: false, + 300: 'ExampleSerif-Light', + 400: 'ExampleSerif-Normal', + 500: false, + 600: false, + 700: 'ExampleSerif-Bold', + 800: false, + 900: false, + ), + italic: ( + 100: false, + 200: false, + 300: 'ExampleSerif-LightItalic', + 400: 'ExampleSerif-Italic', + 500: false, + 600: false, + 700: 'ExampleSerif-BoldItalic', + 800: false, + 900: false, + ), +); +---------------------------------------- +*/ + +$theme-font-cond-custom-src: false; +$theme-font-icon-custom-src: false; +$theme-font-lang-custom-src: false; +$theme-font-mono-custom-src: false; +$theme-font-sans-custom-src: false; +$theme-font-serif-custom-src: false; + +/* +---------------------------------------- +Role-based font settings +---------------------------------------- +Set the role-based tokens for your +project from the following font-type +tokens. +---------------------------------------- +'cond' +'icon' +'lang' +'mono' +'sans' +'serif' +---------------------------------------- +*/ + +$theme-font-role-ui: "sans"; +$theme-font-role-heading: "serif"; +$theme-font-role-body: "sans"; +$theme-font-role-code: "mono"; +$theme-font-role-alt: "serif"; + +/* +---------------------------------------- +Type scale +---------------------------------------- +Define your project's type scale using +values from the USWDS system type scale + +1-20 +---------------------------------------- +*/ + +$theme-type-scale-3xs: 2; +$theme-type-scale-2xs: 3; +$theme-type-scale-xs: 4; +$theme-type-scale-sm: 5; +$theme-type-scale-md: 6; +$theme-type-scale-lg: 9; +$theme-type-scale-xl: 12; +$theme-type-scale-2xl: 14; +$theme-type-scale-3xl: 15; + +/* +---------------------------------------- +Font weights +---------------------------------------- +Assign weights 100-900 +Or use `false` for unneeded weights. +---------------------------------------- +*/ + +$theme-font-weight-thin: false; +$theme-font-weight-light: 300; +$theme-font-weight-normal: 400; +$theme-font-weight-medium: false; +$theme-font-weight-semibold: false; +$theme-font-weight-bold: 700; +$theme-font-weight-heavy: false; + +// If USWDS is generating your @font-face rules, +// should we generate all available weights +// regardless of the assignments above? + +$theme-generate-all-weights: false; + +/* +---------------------------------------- +General typography settings +---------------------------------------- +Type scale tokens +---------------------------------------- +micro: 10px +1: 12px +2: 13px +3: 14px +4: 15px +5: 16px +6: 17px +7: 18px +8: 20px +9: 22px +10: 24px +11: 28px +12: 32px +13: 36px +14: 40px +15: 48px +16: 56px +17: 64px +18: 80px +19: 120px +20: 140px +---------------------------------------- +Line height tokens +---------------------------------------- +1: 1 +2: 1.15 +3: 1.35 +4: 1.5 +5: 1.62 +6: 1.75 +---------------------------------------- +Font role tokens +---------------------------------------- +'ui' +'heading' +'body' +'code' +'alt' +---------------------------------------- +Measure (max-width) tokens +---------------------------------------- +1: 44ex +2: 60ex +3: 64ex +4: 68ex +5: 74ex +6: 88ex +none: none +---------------------------------------- +*/ + +// Body settings are the equivalent of setting the element +$theme-body-font-family: "body"; +$theme-body-font-size: "sm"; +$theme-body-line-height: 5; + +// If true, explicitly style the element with the base styles +$theme-style-body-element: false; + +// Headings +$theme-h1-font-size: "2xl"; +$theme-h2-font-size: "xl"; +$theme-h3-font-size: "lg"; +$theme-h4-font-size: "sm"; +$theme-h5-font-size: "xs"; +$theme-h6-font-size: "3xs"; +$theme-heading-line-height: 2; +$theme-small-font-size: "2xs"; +$theme-display-font-size: "3xl"; + +// Text and prose +$theme-text-measure-narrow: 1; +$theme-text-measure: 4; +$theme-text-measure-wide: 6; +$theme-prose-font-family: "body"; + +// Lead text +$theme-lead-font-family: "heading"; +$theme-lead-font-size: "lg"; +$theme-lead-line-height: 6; +$theme-lead-measure: 6; diff --git a/_assets/css/theme/_uswds-theme-utilities.scss b/_assets/css/theme/_uswds-theme-utilities.scss new file mode 100644 index 00000000..c68a4534 --- /dev/null +++ b/_assets/css/theme/_uswds-theme-utilities.scss @@ -0,0 +1,867 @@ +/* +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +* * * * * ============================== +======================================== +======================================== +======================================== +---------------------------------------- +USWDS 2.13.1 +---------------------------------------- +UTILITIES SETTINGS +---------------------------------------- +Read more about settings and +USWDS utilities in the documentation: +https://designsystem.digital.gov/utilities +---------------------------------------- +*/ + +$utilities-use-important: false; +$output-all-utilities: true; + +/* +---------------------------------------- +Utility breakpoints +---------------------------------------- +Which breakpoints does your project +need? Select as `true` any breakpoint +used by utilities or layout grid +---------------------------------------- +*/ + +$theme-utility-breakpoints: ( + // 160px: + "card": false, + // 240px: + "card-lg": false, + // 320px: + "mobile": false, + // 480px: + "mobile-lg": true, + // 640px: + "tablet": true, + // 800px: + "tablet-lg": false, + // 1024px: + "desktop": true, + // 1200px: + "desktop-lg": false, + // 1400px: + "widescreen": false +); + +/* +---------------------------------------- +Global colors +---------------------------------------- +The following palettes will be added to +- background-color +- border-color +- color +- text-decoration-color +---------------------------------------- +*/ + +$global-color-palettes: ("palette-color-default"); + +/* +---------------------------------------- +Settings +---------------------------------------- +*/ + +$add-aspect-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$add-list-reset-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$align-items-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$align-self-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$background-color-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: true, + visited: false, +); + +$border-settings: ( + output: true, + responsive: true, + active: false, + focus: false, + hover: true, + visited: false, +); + +$border-color-settings: ( + output: true, + responsive: true, + active: false, + focus: false, + hover: true, + visited: false, +); + +$border-radius-settings: ( + output: true, + responsive: true, + active: false, + focus: false, + hover: false, + visited: false, +); + +$border-style-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$border-width-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$bottom-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$box-shadow-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: true, + visited: false, +); + +$circle-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$clearfix-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$color-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: true, + visited: false, +); + +$cursor-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$display-settings: ( + output: true, + responsive: true, + active: false, + focus: false, + hover: false, + visited: false, +); + +$flex-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$flex-direction-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$flex-wrap-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$float-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$font-settings: ( + output: true, + responsive: true, + active: false, + focus: false, + hover: false, + visited: false, +); + +$font-family-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$font-feature-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$font-style-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$font-weight-settings: ( + output: true, + responsive: true, + active: false, + focus: false, + hover: false, + visited: false, +); + +$height-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$justify-content-settings: ( + output: true, + responsive: true, + active: false, + focus: false, + hover: false, + visited: false, +); + +$left-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$letter-spacing-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$line-height-settings: ( + output: true, + responsive: true, + active: false, + focus: false, + hover: false, + visited: false, +); + +$margin-settings: ( + output: true, + responsive: true, + active: false, + focus: false, + hover: false, + visited: false, +); + +$max-height-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$max-width-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$measure-settings: ( + output: true, + responsive: true, + active: false, + focus: false, + hover: false, + visited: false, +); + +$min-height-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$min-width-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$opacity-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$order-settings: ( + output: true, + responsive: true, + active: false, + focus: false, + hover: false, + visited: false, +); + +$outline-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$outline-color-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$overflow-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$padding-settings: ( + output: true, + responsive: true, + active: false, + focus: false, + hover: false, + visited: false, +); + +$pin-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$position-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$right-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$square-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$text-align-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$text-decoration-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: true, + visited: false, +); + +$text-decoration-color-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: true, + visited: false, +); + +$text-indent-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$text-transform-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$top-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$vertical-align-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$whitespace-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +$width-settings: ( + output: true, + responsive: true, + active: false, + focus: false, + hover: false, + visited: false, +); + +$z-index-settings: ( + output: true, + responsive: false, + active: false, + focus: false, + hover: false, + visited: false, +); + +/* +---------------------------------------- +Values +---------------------------------------- +*/ + +// .add-aspect + +$add-aspect-palettes: (); +$add-aspect-manual-values: (); + +// .align-items + +$align-items-palettes: ("palette-align-items-default"); +$align-items-manual-values: (); + +// .align-self + +$align-self-palettes: ("palette-align-self-default"); +$align-self-manual-values: (); + +// .background-color + +$background-color-palettes: (); +$background-color-manual-values: (); + +// .border + +$border-palettes: ("palette-border-default"); +$border-manual-values: (); + +// .border-color + +$border-color-palettes: (); +$border-color-manual-values: (); + +// .border-radius + +$border-radius-palettes: ("palette-border-radius-default"); +$border-radius-manual-values: (); + +// .border-style + +$border-style-palettes: ("palette-border-style-default"); +$border-style-manual-values: (); + +// .border-width + +$border-width-palettes: ("palette-border-width-default"); +$border-width-manual-values: (); + +// .bottom + +$bottom-palettes: ("palette-bottom-default"); + +$bottom-manual-values: (); + +// .box-shadow + +$box-shadow-palettes: ("palette-box-shadow-default"); + +$box-shadow-manual-values: (); + +// .circle + +$circle-palettes: ("palette-circle-default"); +$circle-manual-values: (); + +// .color + +$color-palettes: (); +$color-manual-values: (); + +// .cursor + +$cursor-palettes: ("palette-cursor-default"); +$cursor-manual-values: (); + +// .display + +$display-palettes: ("palette-display-default"); +$display-manual-values: (); + +// .flex + +$flex-palettes: ("palette-flex-default"); +$flex-manual-values: (); + +// .flex-direction + +$flex-direction-palettes: ("palette-flex-direction-default"); +$flex-direction-manual-values: (); + +// .flex-wrap + +$flex-wrap-palettes: ("palette-flex-wrap-default"); +$flex-wrap-manual-values: (); + +// .float + +$float-palettes: ("palette-float-default"); +$float-manual-values: (); + +// .font + +$font-palettes: ("palette-font-default"); +$font-manual-values: (); + +// .font-family + +$font-family-palettes: ("palette-font-family-default"); +$font-family-manual-values: (); + +// .font-feature-settings + +$font-feature-palettes: ("palette-font-feature-settings-default"); +$font-feature-manual-values: (); + +// .font-style + +$font-style-palettes: ("palette-font-style-default"); +$font-style-manual-values: (); + +// .font-weight + +$font-weight-palettes: ("palette-font-weight-default"); +$font-weight-manual-values: (); + +// .height + +$height-palettes: ("palette-height-default"); +$height-manual-values: (); + +// .justify-content + +$justify-content-palettes: ("palette-justify-content-default"); +$justify-content-manual-values: (); + +// .left + +$left-palettes: ("palette-left-default"); +$left-manual-values: (); + +// .letter-spacing + +$letter-spacing-palettes: ("palette-letter-spacing-default"); +$letter-spacing-manual-values: (); + +// .line-height + +$line-height-palettes: ("palette-line-height-default"); +$line-height-manual-values: (); + +// .margin + +$margin-palettes: ("palette-margin-default"); +$margin-manual-values: (); +$margin-vertical-palettes: ("palette-margin-vertical-default"); +$margin-vertical-manual-values: (); +$margin-horizontal-palettes: ("palette-margin-horizontal-default"); +$margin-horizontal-manual-values: (); + +// .max-height + +$max-height-palettes: ("palette-max-height-default"); +$max-height-manual-values: (); + +// .max-width + +$max-width-palettes: ("palette-max-width-default"); +$max-width-manual-values: (); + +// .measure + +$measure-palettes: ("palette-measure-default"); +$measure-manual-values: (); + +// .min-height + +$min-height-palettes: ("palette-min-height-default"); +$min-height-manual-values: (); + +// .min-width + +$min-width-palettes: ("palette-min-width-default"); +$min-width-manual-values: (); + +// .opacity + +$opacity-palettes: ("palette-opacity-default"); +$opacity-manual-values: (); + +// .order + +$order-palettes: ("palette-order-default"); +$order-manual-values: (); + +// .outline + +$outline-palettes: ("palette-outline-default"); +$outline-manual-values: (); + +// .outline-color + +$outline-color-palettes: ("palette-outline-color-default"); +$outline-color-manual-values: (); + +// .overflow + +$overflow-palettes: ("palette-overflow-default"); +$overflow-manual-values: (); + +// .padding + +$padding-palettes: ("palette-padding-default"); +$padding-manual-values: (); + +// .position + +$position-palettes: ("palette-position-default"); +$position-manual-values: (); + +// .right + +$right-palettes: ("palette-right-default"); +$right-manual-values: (); + +// .square + +$square-palettes: ("palette-square-default"); +$square-manual-values: (); + +// .text-align + +$text-align-palettes: ("palette-text-align-default"); +$text-align-manual-values: (); + +// .text-decoration + +$text-decoration-palettes: ("palette-text-decoration-default"); +$text-decoration-manual-values: (); + +// .text-decoration-color + +$text-decoration-color-palettes: (); +$text-decoration-color-manual-values: (); + +// .text-indent + +$text-indent-palettes: ("palette-text-indent-default"); +$text-indent-manual-values: (); + +// .text-transform + +$text-transform-palettes: ("palette-text-transform-default"); +$text-transform-manual-values: (); + +// .top + +$top-palettes: ("palette-top-default"); +$top-manual-values: (); + +// .vertical-align + +$vertical-align-palettes: ("palette-vertical-align-default"); +$vertical-align-manual-values: (); + +// .white-space + +$whitespace-palettes: ("palette-white-space-default"); +$whitespace-manual-values: (); + +// .width + +$width-palettes: ("palette-width-default"); +$width-manual-values: (); + +// .z-index + +$z-index-palettes: ("palette-z-index-default"); +$z-index-manual-values: (); diff --git a/_assets/images/hire-us.jpg b/_assets/img/hire-us.jpg similarity index 100% rename from _assets/images/hire-us.jpg rename to _assets/img/hire-us.jpg diff --git a/_assets/js/app.js b/_assets/js/app.js index ca4f1709..c6293afb 100644 --- a/_assets/js/app.js +++ b/_assets/js/app.js @@ -1,2 +1,4 @@ +//= require js/uswds.min.js + // Add your custom javascript here console.log("Hi from Federalist"); diff --git a/_config.yml b/_config.yml index a37c59d9..bcfadd69 100644 --- a/_config.yml +++ b/_config.yml @@ -119,7 +119,7 @@ searchgov: # This renders the results within the page instead of sending to user to search.gov. inline: true - # This allows Search.gov to present relevant type-ahead search suggestions in your website's search box. + # This allows Search.gov to present relevant type-ahead search suggestions in your website's search box. # If you do not want to present search suggestions, set this value to false. suggestions: true @@ -135,14 +135,6 @@ collections: permalink: pretty -markdown: kramdown -plugins: - - jekyll-feed - - jekyll-paginate-v2 - - jekyll-redirect-from - - jekyll-sitemap # See additional instructions for url parameter above. - - jekyll-seo-tag - ############################################################ # Site configuration for the Jekyll 3 Pagination Gem # The values here represent the defaults if nothing is set @@ -199,10 +191,15 @@ exclude: - Gemfile.lock - docker-compose.yml - Dockerfile - + assets: + autoprefixer: + browsers: + - "> 2%" + - "last 2 versions" + - "IE 11" + - "not dead" + compression: true sources: - - node_modules/uswds/dist/img - - node_modules/uswds/dist/js - - node_modules/uswds/dist/scss + - node_modules/uswds/dist - node_modules/netlify-cms/dist diff --git a/_includes/footer.html b/_includes/footer.html index eab62e52..87c08cc7 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -5,7 +5,7 @@
@@ -27,4 +27,4 @@ - \ No newline at end of file + diff --git a/_includes/header.html b/_includes/header.html index 09cb10ff..11db7d32 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,21 +1,35 @@ {% comment %} -This appears at the top of the page letting the user know it's an official government website +This appears at the top of the page letting the user know it's an +official government website {% endcomment %}
Skip to main content
-
+
- {% asset us_flag_small.png class="usa-banner__header-flag" alt="U.S. flag" %} + {% asset img/us_flag_small.png class="usa-banner__header-flag" + alt="U.S. flag" %}
-

An official website of the United States government

- +

+ An official website of the United States government +

+
-
@@ -23,24 +37,28 @@
- {% asset icon-dot-gov.svg class="usa-banner__icon usa-media-block__img" alt="Dot gov" %} + {% asset img/icon-dot-gov.svg class="usa-banner__icon + usa-media-block__img" alt="Dot gov" %}

The .gov means it’s official. -
- Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure - you’re on a federal government site. +
+ Federal government websites often end in .gov or .mil. Before + sharing sensitive information, make sure you’re on a federal + government site.

- {% asset icon-https.svg class="usa-banner__icon usa-media-block__img" alt="Https" %} + {% asset img/icon-https.svg class="usa-banner__icon + usa-media-block__img" alt="Https" %}

The site is secure. -
- The https:// ensures that you are connecting to the official website and that any - information you provide is encrypted and transmitted securely. +
+ The https:// ensures that you are connecting to + the official website and that any information you provide is + encrypted and transmitted securely.

diff --git a/_includes/highlights.html b/_includes/highlights.html index 90d23b4b..d1a2d5ea 100644 --- a/_includes/highlights.html +++ b/_includes/highlights.html @@ -1,46 +1,63 @@ {% comment %} -Use this section to highlight key elements of your site. Some sites will only have two while others may have six to -eight. +Use this section to highlight key elements of your site. Some +sites will only have two while others may have six to eight. {% endcomment %} -
- {% asset circle-124.png class="usa-media-block__img" alt="Alt text" %} + {% asset img/circle-124.png class="usa-media-block__img" alt="Alt text" + %}

Graphic headings can vary.

-

Graphic headings can be used a few different ways, depending on what your landing page is for. Highlight - your values, specific program areas, or results.

+

+ Graphic headings can be used a few different ways, depending on what + your landing page is for. Highlight your values, specific program + areas, or results. +

- {% asset circle-124.png class="usa-media-block__img" alt="Alt text" %} + {% asset img/circle-124.png class="usa-media-block__img" alt="Alt text" + %}

Stick to 6 or fewer words.

-

Keep body text to about 30 words. They can be shorter, but try to be somewhat balanced across all four. It - creates a clean appearance with good spacing.

+

+ Keep body text to about 30 words. They can be shorter, but try to be + somewhat balanced across all four. It creates a clean appearance + with good spacing. +

- {% asset circle-124.png class="usa-media-block__img" alt="Alt text" %} + {% asset img/circle-124.png class="usa-media-block__img" alt="Alt text" + %}
-

Never highlight anything without a goal.

-

For anything you want to highlight here, understand what your users know now, and what activity or - impression you want from them after they see it.

+

+ Never highlight anything without a goal. +

+

+ For anything you want to highlight here, understand what your users + know now, and what activity or impression you want from them after + they see it. +

- {% asset circle-124.png class="usa-media-block__img" alt="Alt text" %} + {% asset img/circle-124.png class="usa-media-block__img" alt="Alt text" + %}

Could also have 2 or 6.

-

In addition to your goal, find out your users’ goals. What do they want to know or do that supports your - mission? Use these headings to show those.

+

+ In addition to your goal, find out your users’ goals. What do they + want to know or do that supports your mission? Use these headings to + show those. +

-
\ No newline at end of file +
diff --git a/_includes/menu.html b/_includes/menu.html index b946b39d..ec36f0f5 100644 --- a/_includes/menu.html +++ b/_includes/menu.html @@ -1,6 +1,7 @@ {% comment %} -To modify the menu system, you are welcome to edit this HTML directly or you can look inside _config.yml -where we provide an easy way to manage your navigation system +To modify the menu system, you are welcome to edit this HTML +directly or you can look inside _config.yml where we provide an easy way to +manage your navigation system {% endcomment %}
-