diff --git a/assets/img/nvrf/Icon_1.png b/assets/img/nvrf/Icon_1.png new file mode 100644 index 000000000..641d6cb31 Binary files /dev/null and b/assets/img/nvrf/Icon_1.png differ diff --git a/assets/img/nvrf/Icon_2.png b/assets/img/nvrf/Icon_2.png new file mode 100644 index 000000000..8e8f3bd86 Binary files /dev/null and b/assets/img/nvrf/Icon_2.png differ diff --git a/assets/img/nvrf/Icon_3.png b/assets/img/nvrf/Icon_3.png new file mode 100644 index 000000000..96db5dbde Binary files /dev/null and b/assets/img/nvrf/Icon_3.png differ diff --git a/assets/img/nvrf/Icon_4.png b/assets/img/nvrf/Icon_4.png new file mode 100644 index 000000000..7b8f60ef3 Binary files /dev/null and b/assets/img/nvrf/Icon_4.png differ diff --git a/assets/img/nvrf/Icon_5.png b/assets/img/nvrf/Icon_5.png new file mode 100644 index 000000000..bcead2d5c Binary files /dev/null and b/assets/img/nvrf/Icon_5.png differ diff --git a/assets/img/nvrf/Icon_6.png b/assets/img/nvrf/Icon_6.png new file mode 100644 index 000000000..775e27a22 Binary files /dev/null and b/assets/img/nvrf/Icon_6.png differ diff --git a/assets/img/nvrf/Icon_7.png b/assets/img/nvrf/Icon_7.png new file mode 100644 index 000000000..af331d761 Binary files /dev/null and b/assets/img/nvrf/Icon_7.png differ diff --git a/assets/img/nvrf/Icon_8.png b/assets/img/nvrf/Icon_8.png new file mode 100644 index 000000000..9e598f753 Binary files /dev/null and b/assets/img/nvrf/Icon_8.png differ diff --git a/assets/img/nvrf/NVRF_animation.png b/assets/img/nvrf/NVRF_animation.png new file mode 100644 index 000000000..72047a930 Binary files /dev/null and b/assets/img/nvrf/NVRF_animation.png differ diff --git a/assets/img/nvrf/NVRF_static.png b/assets/img/nvrf/NVRF_static.png new file mode 100644 index 000000000..fb72fee89 Binary files /dev/null and b/assets/img/nvrf/NVRF_static.png differ diff --git a/assets/styles/component/accordion.scss b/assets/styles/component/accordion.scss index eafa80cfa..59f894126 100644 --- a/assets/styles/component/accordion.scss +++ b/assets/styles/component/accordion.scss @@ -31,7 +31,7 @@ } } - .usa-accordion__button[aria-expanded=true] { + .usa-accordion__button[aria-expanded="true"] { background-color: #fff; color: $deep-blue; } @@ -60,10 +60,10 @@ } .content-heading { - font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif; + font-family: "Merriweather Web", Georgia, Cambria, "Times New Roman", Times, serif; font-weight: normal; } [dir="rtl"] .usa-language-container { padding: 0.5rem 0 0.5rem 1rem; -} \ No newline at end of file +} diff --git a/assets/styles/component/buttons.scss b/assets/styles/component/buttons.scss index bdc474c3c..6e7d91ca3 100644 --- a/assets/styles/component/buttons.scss +++ b/assets/styles/component/buttons.scss @@ -22,7 +22,7 @@ text-decoration: none; } -//"Go back" arrow button and text +// "Go back" arrow button and text .arrow { border: solid $color-blue-dark; border-width: 0 4px 4px 0; @@ -32,13 +32,11 @@ .direction { transform: rotate(135deg); - -webkit-transform: rotate(135deg); margin-right: 5px; } [dir="rtl"] .direction { transform: rotate(315deg); - -webkit-transform: rotate(315deg); margin-left: 5px; } diff --git a/assets/styles/component/hero.scss b/assets/styles/component/hero.scss index 7083cb662..4c6a5b5b1 100644 --- a/assets/styles/component/hero.scss +++ b/assets/styles/component/hero.scss @@ -10,6 +10,7 @@ $arrow-width: 100px; $arrow-height: 30px; $arrow-half-width: math.div($arrow-width, 2); + content: ""; position: absolute; left: calc(50% - #{$arrow-half-width}); @@ -17,7 +18,7 @@ width: 0; height: 0; border-style: solid; - border-width: $arrow-height+1 $arrow-half-width 0 $arrow-half-width; + border-width: $arrow-height + 1 $arrow-half-width 0 $arrow-half-width; border-color: $color-blue transparent transparent transparent; @include at-media('tablet') { @@ -53,7 +54,7 @@ @include at-media('mobile') { #SiteLogo { - padding: 10px 0 10px; + padding: 10px 0; } } diff --git a/assets/styles/component/icon-list.scss b/assets/styles/component/icon-list.scss new file mode 100644 index 000000000..3d36fca66 --- /dev/null +++ b/assets/styles/component/icon-list.scss @@ -0,0 +1,53 @@ +@use 'uswds-utilities' as *; +@use '../variables' as *; +@use '../mixins' as *; + +.icon-list-item { + @include grid-row; + @include grid-gap; + + .usa-prose > h2 + &, + * + & { + margin-top: 3em; + margin-bottom: 3em; + } + + &__icon { + max-width: 136px; + margin-left: auto; + margin-right: auto; + + @include at-media('tablet') { + @include grid-col(3); + + max-width: none; + } + } + + &__text { + @include at-media-max('tablet') { + .icon-list-item__icon + & { + margin-top: 1.8rem; + } + } + + @include at-media('tablet') { + @include grid-col; + + *:first-child { + margin-top: 0; + } + } + + > h3 { + @include u-font-family('sans'); + + font-size: 26px; + } + + .voter-info & * + p, + * + * { + margin-top: 1em; + } + } +} diff --git a/assets/styles/component/language-switcher.scss b/assets/styles/component/language-switcher.scss index 328929989..77154771f 100644 --- a/assets/styles/component/language-switcher.scss +++ b/assets/styles/component/language-switcher.scss @@ -2,6 +2,7 @@ display: flex; justify-content: flex-end; padding: 0.5rem 1rem 0.5rem 0; + .usa-button { a { color: #fff; @@ -22,6 +23,7 @@ columns: 2 auto; } } + .usa-language__submenu-item { padding: 8px; border: unset; diff --git a/assets/styles/global/media.scss b/assets/styles/global/media.scss index 4b253cebe..35a248627 100644 --- a/assets/styles/global/media.scss +++ b/assets/styles/global/media.scss @@ -1,3 +1,7 @@ +@use 'uswds-utilities' as *; +@use '../variables' as *; +@use '../mixins' as *; + svg { max-width: 100%; height: auto; @@ -10,3 +14,15 @@ svg { margin-left: 0.2ex; } } + +figure { + margin: 3rem 0 2rem; + + @include at-media('tablet') { + margin: 0 0 3rem; + + * + & { + margin-top: 6rem; + } + } +} diff --git a/assets/styles/global/typography.scss b/assets/styles/global/typography.scss index a22ba9de6..14a6c5ca9 100644 --- a/assets/styles/global/typography.scss +++ b/assets/styles/global/typography.scss @@ -19,7 +19,7 @@ } .main-heading { - font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif; + font-family: "Merriweather Web", Georgia, Cambria, "Times New Roman", Times, serif; @include at-media-max(tablet-lg) { span[hidden] { diff --git a/assets/styles/main.scss b/assets/styles/main.scss index b1bcab891..ca0145299 100644 --- a/assets/styles/main.scss +++ b/assets/styles/main.scss @@ -5,6 +5,7 @@ $theme-show-notifications: false, @forward "uswds-core"; @forward "uswds-global"; +@forward "uswds-utilities"; // Components ------------ // @@ -29,6 +30,7 @@ $theme-show-notifications: false, @forward 'component/buttons'; @forward 'component/header'; @forward 'component/hero'; +@forward 'component/icon-list'; @forward 'pages/homepage'; @forward 'pages/state-page'; diff --git a/assets/styles/pages/basic-page.scss b/assets/styles/pages/basic-page.scss index 37861e597..69db6d915 100644 --- a/assets/styles/pages/basic-page.scss +++ b/assets/styles/pages/basic-page.scss @@ -5,6 +5,6 @@ .align-center { display: flex; flex-direction: column; - justify-content: flex-end; - height: 70%; + height: 100%; + justify-content: center; } diff --git a/assets/styles/pages/homepage.scss b/assets/styles/pages/homepage.scss index 47501147e..434c3fa89 100644 --- a/assets/styles/pages/homepage.scss +++ b/assets/styles/pages/homepage.scss @@ -50,7 +50,7 @@ .registered { color: $color-blue-dark; - margin: 60px 0 60px; + margin: 60px 0; h2 { font-size: 2em; diff --git a/content/en/nvrf-announcement.md b/content/en/nvrf-announcement.md new file mode 100644 index 000000000..406a94cb9 --- /dev/null +++ b/content/en/nvrf-announcement.md @@ -0,0 +1,75 @@ ++++ +title = "Coming soon to Vote.gov: A simple voter registration tool" +translationKey = "nvrf_ann" ++++ + +{{< div usa-prose >}} + +{{
}} + +Vote.gov is creating a simple tool to help eligible citizens fill out the National Voter Registration Form (NVRF). By answering a few online questions, the user generates a completed form that can be printed and mailed. + +This form will allow users to: + +- Register to vote +- Update registration information +- Register with a political party + +The new form filler tool aims to streamline over 20 pages of instructions that have been hard to follow. Registrants select the state they plan to vote in. Then, the form presents only the instructions and fields the user needs, based on the choices users make. + +## The web-based form improves accessibility and usability. + +{{< iconListItem +title="Improved display and screen reader experience" +icon="Icon_1.png" >}} +Our web-based form uses browser-based accessibility features to improve the screen reader experience. The form also works with web tools that allow a user to change the display such as increasing font size or changing the contrast. and so on. +{{< /iconListItem >}} + +{{< iconListItem +title="Responsive and mobile-friendly design" +icon="Icon_2.png" >}} +PDFs are difficult to use on mobile devices. This tool offers an experience appropriate to the screen size, whether it’s a phone, tablet or desktop. +{{< /iconListItem >}} + +{{< iconListItem +title="Inline help text and data validation to reduce errors" +icon="Icon_3.png" >}} +The form provides state instructions to help people fill in answers. In certain cases, the form checks user entries to reduce errors, processing time, and rejections of submitted forms. +{{< /iconListItem >}} + +{{< iconListItem +title="Multi-lingual support" +icon="Icon_4.png" >}} +The web-based form offers an alternative for users who are more comfortable using a language not supported by their state. The form will be available in all languages offered by Vote.gov. +{{< /iconListItem >}} + +{{
}} + +## The form supports easier processing for state election officials. + +{{< iconListItem +title="No handwritten forms" +icon="Icon_5.png" >}} +The tool produces a completed form (except for the signature), so there will not be any handwritten forms that may be difficult to read. +{{< /iconListItem >}} + +{{< iconListItem +title="Fewer duplicate registrations" +icon="Icon_6.png" >}} +When users begin, they are first prompted to check if they’re already registered. This aims to reduce duplicate registrations. +{{< /iconListItem >}} + +{{< iconListItem +title="Links to state online registration systems" +icon="Icon_7.png" >}} +Where eligible, the system leads users to their state’s online voter registration portals. This may lead to fewer paper forms to process. +{{< /iconListItem >}} + +{{< iconListItem +title="State election office information" +icon="Icon_8.png" >}} +Registrants will be given the correct election office address to mail their completed form. +{{< /iconListItem >}} + +**Note:** Our web-based National Voter Registration Form is currently under development. All images included above illustrate what we hope to incorporate into the final design. The actual form may look different when Vote.gov releases it in the future. +{{< div close >}} diff --git a/content/en/register/al.md b/content/en/register/al.md index 4435d8e19..ad66cc366 100644 --- a/content/en/register/al.md +++ b/content/en/register/al.md @@ -22,4 +22,4 @@ default_ip_deadline = "15 days before Election Day" default_online_deadline = "15 days before Election Day" default_mail_postmarked_deadline = "Must be postmarked 15 days before Election Day" -+++ ++++ \ No newline at end of file diff --git a/layouts/shortcodes/div.html b/layouts/shortcodes/div.html new file mode 100644 index 000000000..8823b9e7e --- /dev/null +++ b/layouts/shortcodes/div.html @@ -0,0 +1,6 @@ +{{ $class := .Get 0 }} +{{ if eq $class "close" }} + +{{ else }} +
+{{ end }} diff --git a/layouts/shortcodes/iconListItem.html b/layouts/shortcodes/iconListItem.html new file mode 100644 index 000000000..19c8202ac --- /dev/null +++ b/layouts/shortcodes/iconListItem.html @@ -0,0 +1,13 @@ +{{ $src := .Get "icon" }} +{{ $alt := .Get "icon-alt" }} +
+ {{ with $src }} +
{{ $alt }}
+ {{ end }} +
+ {{ with .Get "title" }} +

{{ . }}

+ {{ end }} +

{{ .Inner }}

+
+