diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 000000000..26a9d68c5 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,2 @@ +last 2 versions +ie 11 diff --git a/.tugboat/config.yml b/.tugboat/config.yml index a0b76e7ef..429e05f15 100644 --- a/.tugboat/config.yml +++ b/.tugboat/config.yml @@ -46,10 +46,12 @@ services: - /item-components-global-footer.html - /item-components-hero.html - /item-components-link.html + - /item-components-local-footer.html - /item-components-lockup.html - /item-components-logo.html - /item-components-main-navigation.html - /item-components-masthead.html - /item-components-quote.html + - /item-components-signup-form.html - /item-components-site-search.html - /item-components-skiplinks.html diff --git a/core/dist/assets/fa-brands-400.eot b/core/dist/assets/fa-brands-400.eot new file mode 100644 index 000000000..f6b7c7dc1 Binary files /dev/null and b/core/dist/assets/fa-brands-400.eot differ diff --git a/core/dist/assets/fa-brands-400.svg b/core/dist/assets/fa-brands-400.svg new file mode 100644 index 000000000..cf4d7ceb1 --- /dev/null +++ b/core/dist/assets/fa-brands-400.svg @@ -0,0 +1,3496 @@ + + + + + +Created by FontForge 20190801 at Mon Sep 23 12:53:49 2019 + By Robert Madole +Copyright (c) Font Awesome + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/core/dist/assets/fa-brands-400.ttf b/core/dist/assets/fa-brands-400.ttf new file mode 100644 index 000000000..82e255ac5 Binary files /dev/null and b/core/dist/assets/fa-brands-400.ttf differ diff --git a/core/dist/assets/fa-brands-400.woff b/core/dist/assets/fa-brands-400.woff new file mode 100644 index 000000000..b0021db2e Binary files /dev/null and b/core/dist/assets/fa-brands-400.woff differ diff --git a/core/dist/assets/fa-brands-400.woff2 b/core/dist/assets/fa-brands-400.woff2 new file mode 100644 index 000000000..b53cbbf56 Binary files /dev/null and b/core/dist/assets/fa-brands-400.woff2 differ diff --git a/core/dist/assets/fa-regular-400.eot b/core/dist/assets/fa-regular-400.eot new file mode 100644 index 000000000..e1bcc447d Binary files /dev/null and b/core/dist/assets/fa-regular-400.eot differ diff --git a/core/dist/assets/fa-regular-400.svg b/core/dist/assets/fa-regular-400.svg new file mode 100644 index 000000000..f32e41e30 --- /dev/null +++ b/core/dist/assets/fa-regular-400.svg @@ -0,0 +1,803 @@ + + + + + +Created by FontForge 20190801 at Mon Sep 23 12:53:49 2019 + By Robert Madole +Copyright (c) Font Awesome + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/core/dist/assets/fa-regular-400.ttf b/core/dist/assets/fa-regular-400.ttf new file mode 100644 index 000000000..5267d851b Binary files /dev/null and b/core/dist/assets/fa-regular-400.ttf differ diff --git a/core/dist/assets/fa-regular-400.woff b/core/dist/assets/fa-regular-400.woff new file mode 100644 index 000000000..f513c1c3c Binary files /dev/null and b/core/dist/assets/fa-regular-400.woff differ diff --git a/core/dist/assets/fa-regular-400.woff2 b/core/dist/assets/fa-regular-400.woff2 new file mode 100644 index 000000000..2e72e872c Binary files /dev/null and b/core/dist/assets/fa-regular-400.woff2 differ diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 44be1cb0e..58af103ed 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -315,7 +315,7 @@ button, [type='reset'], [type='image'], .su-button--big, .su-button--big.su-link, .su-button--secondary, -.su-button--secondary.su-link { +.su-button--secondary.su-link, .su-local-footer__header .su-link--internal { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; @@ -330,7 +330,7 @@ button, width: 100%; -webkit-transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; } - .su-cta .su-cta__button a, .su-button a, .su-button.su-link a, button a, [type='button'] a, [type='submit'] a, [type='reset'] a, [type='image'] a, .su-button--big a, .su-button--big.su-link a, .su-button--secondary a, .su-button--secondary.su-link a { + .su-cta .su-cta__button a, .su-button a, .su-button.su-link a, button a, [type='button'] a, [type='submit'] a, [type='reset'] a, [type='image'] a, .su-button--big a, .su-button--big.su-link a, .su-button--secondary a, .su-button--secondary.su-link a, .su-local-footer__header .su-link--internal a { font-weight: 400; text-decoration: none; } @media only screen and (min-width: 576px) { @@ -342,14 +342,14 @@ button, [type='reset'], [type='image'], .su-button--big, .su-button--big.su-link, .su-button--secondary, - .su-button--secondary.su-link { + .su-button--secondary.su-link, .su-local-footer__header .su-link--internal { width: auto; } } .su-cta .su-cta__button:hover, .su-button:hover, button:hover, :hover[type='button'], :hover[type='submit'], :hover[type='reset'], - :hover[type='image'], .su-button--big:hover, .su-button--secondary:hover { + :hover[type='image'], .su-button--big:hover, .su-button--secondary:hover, .su-local-footer__header .su-link--internal:hover { border-bottom: 0; text-decoration: none; } @@ -2556,6 +2556,22 @@ textarea, select { flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px); } } +@font-face { + font-family: 'Font Awesome 5 Free'; + font-style: normal; + font-weight: 400; + font-display: auto; + src: url(../assets/fa-regular-400.eot); + src: url(../assets/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(../assets/fa-regular-400.woff2) format("woff2"), url(../assets/fa-regular-400.woff) format("woff"), url(../assets/fa-regular-400.ttf) format("truetype"), url(../assets/fa-regular-400.svg#fontawesome) format("svg"); } + +@font-face { + font-family: 'Font Awesome 5 Brands'; + font-style: normal; + font-weight: normal; + font-display: auto; + src: url(../assets/fa-brands-400.eot); + src: url(../assets/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(../assets/fa-brands-400.woff2) format("woff2"), url(../assets/fa-brands-400.woff) format("woff"), url(../assets/fa-brands-400.ttf) format("truetype"), url(../assets/fa-brands-400.svg#fontawesome) format("svg"); } + @font-face { font-family: "Source Serif Pro"; src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-extralight-webfont.woff") format("woff"); @@ -3172,6 +3188,13 @@ dfn { .su-small-paragraph { font-size: 1.5rem; } } +.su-fab { + font-family: 'Font Awesome 5 Brands'; } + +.su-far { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; } + .layout-blastila-flex--right > div { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; @@ -4821,21 +4844,6 @@ dfn { -ms-grid-row: 2; -ms-grid-column: 3; grid-area: B; } - @media only screen and (min-width: 576px){ - .layout-cuttoner > div > section > header { - -ms-grid-row: 1; - -ms-grid-column: 1; - -ms-grid-column-span: 2; } - .layout-cuttoner > div > section > footer { - -ms-grid-row: 3; - -ms-grid-column: 1; - -ms-grid-column-span: 2; } - .layout-cuttoner > div > section > :nth-child(2) { - -ms-grid-row: 2; - -ms-grid-column: 1; } - .layout-cuttoner > div > section > :nth-child(3) { - -ms-grid-row: 2; - -ms-grid-column: 2; } } .layout-cuttoner > div > aside { -ms-grid-row: 1; -ms-grid-column: 3; } @@ -8599,6 +8607,615 @@ a { -webkit-transform: translateX(0.2em); transform: translateX(0.2em); } } +.su-local-footer { + background-color: #f4f4f4; } + .su-local-footer a { + font-weight: 400; } + .su-local-footer ul { + margin-top: 0; + margin-bottom: 0; + padding-left: 0; + list-style-type: none; } + .su-local-footer ul > li { + margin-bottom: 0; } + .su-local-footer ul > li { + margin-bottom: 7px; } + .su-local-footer .su-signup-form p { + font-size: 17px; } + +.su-local-footer__header { + position: relative; } + +@media only screen and (max-width: 991px) and (min-width: 0) { + .su-local-footer__header .su-lockup { + margin-bottom: 3.2rem; } } + +@media only screen and (max-width: 991px) and (min-width: 768px) { + .su-local-footer__header .su-lockup { + margin-bottom: 3.6rem; } } + +@media only screen and (max-width: 991px) and (min-width: 1500px) { + .su-local-footer__header .su-lockup { + margin-bottom: 3.8rem; } } + @media only screen and (min-width: 992px) { + .su-local-footer__header .su-lockup { + float: left; } } + .su-local-footer__header .su-link--internal { + padding: 1rem 2rem 1.15rem; + background-color: #b1040e; + color: #ffffff; + border: 1px solid #C6C6C6; + -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); + border-radius: 7px; } + .su-local-footer__header .su-link--internal:hover, .su-local-footer__header .su-link--internal:focus { + background-color: #2e2d29; + color: #ffffff; } + .su-local-footer__header .su-link--internal:focus { + -webkit-box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; + box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } + @media (max-width: 991px) { + .su-local-footer__header .su-link--internal { + width: auto; } } + @media only screen and (max-width: 991px) and (min-width: 0) { + .su-local-footer__header .su-link--internal { + margin-bottom: 2.31rem; } } + @media only screen and (max-width: 991px) and (min-width: 768px) { + .su-local-footer__header .su-link--internal { + margin-bottom: 2.6rem; } } + @media only screen and (max-width: 991px) and (min-width: 1500px) { + .su-local-footer__header .su-link--internal { + margin-bottom: 2.74rem; } } + @media only screen and (min-width: 992px) { + .su-local-footer__header .su-link--internal { + float: right; } } + .su-local-footer__header .su-link--internal::after { + background-color: #ffffff; } + .su-local-footer__header .su-link--internal:hover { + border: 1px solid #C6C6C6; + -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1); } + +.su-local-footer__columns, +.su-local-footer__header { + margin: 0 auto; + clear: both; } + @media only screen and (min-width: 0) { + .su-local-footer__columns, + .su-local-footer__header { + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } + @media only screen and (min-width: 576px) { + .su-local-footer__columns, + .su-local-footer__header { + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } + @media only screen and (min-width: 768px) { + .su-local-footer__columns, + .su-local-footer__header { + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } + @media only screen and (min-width: 992px) { + .su-local-footer__columns, + .su-local-footer__header { + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } + @media only screen and (min-width: 1200px) { + .su-local-footer__columns, + .su-local-footer__header { + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } + @media only screen and (min-width: 1500px) { + .su-local-footer__columns, + .su-local-footer__header { + max-width: 1500px; + width: calc(100% - 200px); } } + @media only screen and (min-width: 0) { + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-right: 20px; } + @supports (grid-column-gap: 20px) { + .su-local-footer__columns, + .su-local-footer__header { + grid-column-gap: 20px; } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-right: 0; + margin-left: 0; } } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-top: 0; + margin-bottom: 20px; } + @supports (grid-row-gap: 20px) { + .su-local-footer__columns, + .su-local-footer__header { + grid-row-gap: 20px; } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 576px) { + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-right: 20px; } + @supports (grid-column-gap: 20px) { + .su-local-footer__columns, + .su-local-footer__header { + grid-column-gap: 20px; } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-right: 0; + margin-left: 0; } } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-top: 0; + margin-bottom: 20px; } + @supports (grid-row-gap: 20px) { + .su-local-footer__columns, + .su-local-footer__header { + grid-row-gap: 20px; } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 768px) { + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-right: 20px; } + @supports (grid-column-gap: 20px) { + .su-local-footer__columns, + .su-local-footer__header { + grid-column-gap: 20px; } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-right: 0; + margin-left: 0; } } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-top: 0; + margin-bottom: 20px; } + @supports (grid-row-gap: 20px) { + .su-local-footer__columns, + .su-local-footer__header { + grid-row-gap: 20px; } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 992px) { + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-right: 36px; } + @supports (grid-column-gap: 20px) { + .su-local-footer__columns, + .su-local-footer__header { + grid-column-gap: 36px; } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-right: 0; + margin-left: 0; } } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-top: 0; + margin-bottom: 36px; } + @supports (grid-row-gap: 20px) { + .su-local-footer__columns, + .su-local-footer__header { + grid-row-gap: 36px; } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1200px) { + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-right: 40px; } + @supports (grid-column-gap: 20px) { + .su-local-footer__columns, + .su-local-footer__header { + grid-column-gap: 40px; } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-right: 0; + margin-left: 0; } } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-top: 0; + margin-bottom: 40px; } + @supports (grid-row-gap: 20px) { + .su-local-footer__columns, + .su-local-footer__header { + grid-row-gap: 40px; } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 1500px) { + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-right: 48px; } + @supports (grid-column-gap: 20px) { + .su-local-footer__columns, + .su-local-footer__header { + grid-column-gap: 48px; } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-right: 0; + margin-left: 0; } } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-top: 0; + margin-bottom: 48px; } + @supports (grid-row-gap: 20px) { + .su-local-footer__columns, + .su-local-footer__header { + grid-row-gap: 48px; } + .su-local-footer__columns > *, + .su-local-footer__header > * { + margin-top: 0; + margin-bottom: 0; } } } + @media only screen and (min-width: 0) { + .su-local-footer__columns, + .su-local-footer__header { + padding-top: 4rem; } } + @media only screen and (min-width: 768px) { + .su-local-footer__columns, + .su-local-footer__header { + padding-top: 4.5rem; } } + @media only screen and (min-width: 1500px) { + .su-local-footer__columns, + .su-local-footer__header { + padding-top: 4.75rem; } } + +.su-local-footer__columns { + -ms-grid-rows: auto; + grid-template-rows: auto; + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; + grid-template-areas: "A B" "C C"; } + @media only screen and (min-width: 0) { + .su-local-footer__columns { + padding-bottom: 4rem; } } + @media only screen and (min-width: 768px) { + .su-local-footer__columns { + padding-bottom: 4.5rem; } } + @media only screen and (min-width: 1500px) { + .su-local-footer__columns { + padding-bottom: 4.75rem; } } + @media only screen and (min-width: 768px) { + .su-local-footer__columns { + display: -ms-grid; + display: grid; } } + @media only screen and (min-width: 992px) { + .su-local-footer__columns { + -ms-grid-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; + grid-template-areas: "A B C" "A B C"; } + .su-local-footer__columns > :nth-child(3) { + -ms-grid-row: 1; + -ms-grid-row-span: 2; + -ms-grid-column: 1; } + .su-local-footer__columns > :nth-child(4) { + -ms-grid-row: 1; + -ms-grid-row-span: 2; + -ms-grid-column: 2; } + .su-local-footer__columns > :nth-child(2) { + -ms-grid-row: 1; + -ms-grid-row-span: 2; + -ms-grid-column: 1; } + .su-local-footer__columns > :nth-child(3) { + -ms-grid-row: 1; + -ms-grid-row-span: 2; + -ms-grid-column: 2; } } + @media only screen and (min-width: 1200px) { + .su-local-footer__columns { + -ms-grid-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-areas: "A B B C"; } + .su-local-footer__columns > :nth-child(3) { + -ms-grid-row: 1; + -ms-grid-row-span: 1; + -ms-grid-column: 1; } + .su-local-footer__columns > :nth-child(4) { + -ms-grid-row: 1; + -ms-grid-row-span: 1; + -ms-grid-column: 2; + -ms-grid-column-span: 2; } + .su-local-footer__columns > :nth-child(2) { + -ms-grid-row: 1; + -ms-grid-row-span: 1; + -ms-grid-column: 1; } + .su-local-footer__columns > :nth-child(3) { + -ms-grid-row: 1; + -ms-grid-row-span: 1; + -ms-grid-column: 2; + -ms-grid-column-span: 2; } } + .su-local-footer__columns .su-local-footer__cell1, + .su-local-footer__columns .su-local-footer__cell2, + .su-local-footer__columns .su-local-footer__cell3 { + vertical-align: top; } + .su-local-footer__columns .su-local-footer__cell1 { + -ms-grid-row: 1; + -ms-grid-column: 1; + grid-area: A; } + .su-local-footer__columns .su-local-footer__cell2 { + -ms-grid-row: 1; + -ms-grid-column: 2; + grid-area: B; } + +@media only screen and (max-width: 991px) and (min-width: 0) { + .su-local-footer__columns .su-local-footer__cell2 { + padding-top: 4rem; } } + +@media only screen and (max-width: 991px) and (min-width: 768px) { + .su-local-footer__columns .su-local-footer__cell2 { + padding-top: 4.5rem; } } + +@media only screen and (max-width: 991px) and (min-width: 1500px) { + .su-local-footer__columns .su-local-footer__cell2 { + padding-top: 4.75rem; } } + +@media only screen and (max-width: 991px) and (min-width: 0) { + .su-local-footer__columns .su-local-footer__cell2 { + padding-bottom: 2.31rem; } } + +@media only screen and (max-width: 991px) and (min-width: 768px) { + .su-local-footer__columns .su-local-footer__cell2 { + padding-bottom: 2.6rem; } } + +@media only screen and (max-width: 991px) and (min-width: 1500px) { + .su-local-footer__columns .su-local-footer__cell2 { + padding-bottom: 2.74rem; } } + @media only screen and (min-width: 768px) and (max-width: 991px) { + .su-local-footer__columns .su-local-footer__cell2 { + -ms-grid-row: 2; + -ms-grid-column: 1; + -ms-grid-column-span: 2; + grid-area: C; } } + .su-local-footer__columns .su-local-footer__cell2 nav { + vertical-align: top; } + @media only screen and (min-width: 768px) and (max-width: 991px) { + .su-local-footer__columns .su-local-footer__cell2 nav { + display: inline-block; + min-width: calc(49% - 10px); + max-width: calc(49% - 10px); } + .su-local-footer__columns .su-local-footer__cell2 nav:last-of-type { + margin-left: 10px; } + .su-local-footer__columns .su-local-footer__cell2 nav:first-of-type { + margin-right: 10px; } } + @media only screen and (min-width: 1200px) { + .su-local-footer__columns .su-local-footer__cell2 nav { + display: inline-block; + min-width: calc(49% - 20px); + max-width: calc(49% - 20px); } + .su-local-footer__columns .su-local-footer__cell2 nav:last-of-type { + margin-left: 20px; } + .su-local-footer__columns .su-local-footer__cell2 nav:first-of-type { + margin-right: 20px; } } + @media only screen and (min-width: 1500px) { + .su-local-footer__columns .su-local-footer__cell2 nav { + min-width: calc(49% - 24px); + max-width: calc(49% - 24px); } + .su-local-footer__columns .su-local-footer__cell2 nav:last-of-type { + margin-left: 24px; } + .su-local-footer__columns .su-local-footer__cell2 nav:first-of-type { + margin-right: 24px; } } + @media only screen and (min-width: 0) { + .su-local-footer__columns .su-local-footer__cell2 nav:first-of-type { + padding-bottom: 2.31rem; } } + @media only screen and (min-width: 768px) { + .su-local-footer__columns .su-local-footer__cell2 nav:first-of-type { + padding-bottom: 2.6rem; } } + @media only screen and (min-width: 1500px) { + .su-local-footer__columns .su-local-footer__cell2 nav:first-of-type { + padding-bottom: 2.74rem; } } + @media only screen and (min-width: 992px) { + .su-local-footer__columns > .su-local-footer__cell2 { + -ms-grid-column-span: 2; } } + .su-local-footer__columns .su-local-footer__cell3 { + -ms-grid-row: 2; + -ms-grid-column: 1; + -ms-grid-column-span: 2; + grid-area: C; } + @media only screen and (min-width: 768px) and (max-width: 991px) { + .su-local-footer__columns .su-local-footer__cell3 { + -ms-grid-row: 1; + -ms-grid-column: 2; + grid-area: B; } + @media only screen and (min-width: 576px){ + .layout-cuttoner > div > section > header { + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-column-span: 2; } + .layout-cuttoner > div > section > footer { + -ms-grid-row: 3; + -ms-grid-column: 1; + -ms-grid-column-span: 2; } + .layout-cuttoner > div > section > :nth-child(2) { + -ms-grid-row: 2; + -ms-grid-column: 1; } + .layout-cuttoner > div > section > :nth-child(3) { + -ms-grid-row: 2; + -ms-grid-column: 2; } + .layout-cuttoner > div > section > .su-local-footer__cell1 { + -ms-grid-row: 2; + -ms-grid-column: 1; } + .layout-cuttoner > div > section > .su-local-footer__cell2 { + -ms-grid-row: 2; + -ms-grid-column: 2; } + .layout-cuttoner > div > section > .su-local-footer__cell3 { + -ms-grid-row: 2; + -ms-grid-column: 2; } } + @media only screen and (min-width: 992px){ + .su-local-footer__columns > .su-local-footer__cell1 { + -ms-grid-row: 1; + -ms-grid-row-span: 2; + -ms-grid-column: 1; } + .su-local-footer__columns > .su-local-footer__cell2 { + -ms-grid-row: 1; + -ms-grid-row-span: 2; + -ms-grid-column: 2; } + .su-local-footer__columns .su-local-footer__cell2 { + -ms-grid-row: 1; + -ms-grid-row-span: 2; + -ms-grid-column: 3; + -ms-grid-column-span: 1; } + .su-local-footer__columns .su-local-footer__cell3 { + -ms-grid-row: 1; + -ms-grid-row-span: 2; + -ms-grid-column: 3; + -ms-grid-column-span: 1; } + .su-local-footer__columns > .su-local-footer__cell3 { + -ms-grid-row: 1; + -ms-grid-row-span: 2; + -ms-grid-column: 2; } } + @media only screen and (min-width: 1200px){ + .su-local-footer__columns > .su-local-footer__cell1 { + -ms-grid-row: 1; + -ms-grid-row-span: 1; + -ms-grid-column: 1; } + .su-local-footer__columns > .su-local-footer__cell2 { + -ms-grid-row: 1; + -ms-grid-row-span: 1; + -ms-grid-column: 2; + -ms-grid-column-span: 2; } + .su-local-footer__columns .su-local-footer__cell2 { + -ms-grid-row: 1; + -ms-grid-row-span: 1; + -ms-grid-column: 4; + -ms-grid-column-span: 1; } + .su-local-footer__columns .su-local-footer__cell3 { + -ms-grid-row: 1; + -ms-grid-row-span: 1; + -ms-grid-column: 4; + -ms-grid-column-span: 1; } + .su-local-footer__columns > .su-local-footer__cell3 { + -ms-grid-row: 1; + -ms-grid-row-span: 1; + -ms-grid-column: 2; + -ms-grid-column-span: 2; } } } + @media only screen and (min-width: 992px) { + .su-local-footer__columns > .su-local-footer__cell3 { + -ms-grid-row: 1; + -ms-grid-column: 3; } } + @media only screen and (min-width: 1200px) { + .su-local-footer__columns > .su-local-footer__cell3 { + -ms-grid-row: 1; + -ms-grid-column: 4; } } + +.su-local-footer__list-heading { + font-size: 18px; + line-height: 140%; } + +.su-local-footer__address, +.su-local-footer__action-links { + font-size: 16px; } + @media only screen and (min-width: 0) { + .su-local-footer__address, + .su-local-footer__action-links { + padding-bottom: 4rem; } } + @media only screen and (min-width: 768px) { + .su-local-footer__address, + .su-local-footer__action-links { + padding-bottom: 4.5rem; } } + @media only screen and (min-width: 1500px) { + .su-local-footer__address, + .su-local-footer__action-links { + padding-bottom: 4.75rem; } } + +.su-local-footer__address { + line-height: 140%; } + +.su-local-footer__action-links a { + text-decoration: none; + font-weight: 600; } + @supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) { + .su-local-footer__action-links a::after { + margin-right: 0.3em; + margin-bottom: -0.18em; + margin-left: 0.4em; + height: 0.8em; + width: 0.8em; + display: inline-block; + content: ''; + -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjc0MTkgNS4wMDc5N0w3LjkzNTQ4IDAuMDczMzUwOEM3Ljc0MTk0IC0wLjA2NzYzODIgNy4zNTQ4NCAwLjAwMjg1NjMyIDcuMTYxMjkgMC4yMTQzNEM2Ljk2Nzc0IDAuNDk2MzE4IDcuMDMyMjYgMC44NDg3OSA3LjIyNTgxIDEuMDYwMjdMMTEuODA2NSA0LjkzNzQ3SDAuNTgwNjQ1QzAuMjU4MDY0IDQuOTM3NDcgMCA1LjIxOTQ1IDAgNS41MDE0M0MwIDUuODUzOSAwLjI1ODA2NCA2LjEzNTg4IDAuNTgwNjQ1IDYuMTM1ODhIMTEuODA2NUw3LjI5MDMyIDkuOTQyNThDNy4wMzIyNiAxMC4xNTQxIDcuMDMyMjYgMTAuNTA2NSA3LjIyNTgxIDEwLjc4ODVDNy4zNTQ4NCAxMC45Mjk1IDcuNDgzODcgMTEgNy42Nzc0MiAxMUM3LjgwNjQ1IDExIDcuOTM1NDggMTAuOTI5NSA4IDEwLjg1OUwxMy44MDY1IDUuOTI0NEMxMy45MzU1IDUuNzgzNDEgMTQgNS41NzE5MiAxNCA1LjQzMDkzQzEzLjkzNTUgNS4yODk5NCAxMy44NzEgNS4xNDg5NiAxMy43NDE5IDUuMDA3OTdaIiBmaWxsPSIjQjEwNDBFIi8+Cjwvc3ZnPgo=) no-repeat 0 0; + mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjc0MTkgNS4wMDc5N0w3LjkzNTQ4IDAuMDczMzUwOEM3Ljc0MTk0IC0wLjA2NzYzODIgNy4zNTQ4NCAwLjAwMjg1NjMyIDcuMTYxMjkgMC4yMTQzNEM2Ljk2Nzc0IDAuNDk2MzE4IDcuMDMyMjYgMC44NDg3OSA3LjIyNTgxIDEuMDYwMjdMMTEuODA2NSA0LjkzNzQ3SDAuNTgwNjQ1QzAuMjU4MDY0IDQuOTM3NDcgMCA1LjIxOTQ1IDAgNS41MDE0M0MwIDUuODUzOSAwLjI1ODA2NCA2LjEzNTg4IDAuNTgwNjQ1IDYuMTM1ODhIMTEuODA2NUw3LjI5MDMyIDkuOTQyNThDNy4wMzIyNiAxMC4xNTQxIDcuMDMyMjYgMTAuNTA2NSA3LjIyNTgxIDEwLjc4ODVDNy4zNTQ4NCAxMC45Mjk1IDcuNDgzODcgMTEgNy42Nzc0MiAxMUM3LjgwNjQ1IDExIDcuOTM1NDggMTAuOTI5NSA4IDEwLjg1OUwxMy44MDY1IDUuOTI0NEMxMy45MzU1IDUuNzgzNDEgMTQgNS41NzE5MiAxNCA1LjQzMDkzQzEzLjkzNTUgNS4yODk5NCAxMy44NzEgNS4xNDg5NiAxMy43NDE5IDUuMDA3OTdaIiBmaWxsPSIjQjEwNDBFIi8+Cjwvc3ZnPgo=) no-repeat 0 0; + -webkit-mask-size: contain; + mask-size: contain; + background-color: #006cb8; + -webkit-transition: -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; + transition: -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; } + .su-local-footer__action-links a:hover::after, .su-local-footer__action-links a:focus::after { + background-color: #2e2d29; + -webkit-transform: translateX(0.2em); + transform: translateX(0.2em); } } + +.su-local-footer__primary-links ul li, +.su-local-footer__secondary-links ul li { + font-size: 16px; } + +.su-local-footer__social-links { + padding: 0; + margin: 0; + list-style-type: none; + overflow: hidden; } + .su-local-footer__social-links > li { + display: block; + float: left; } + .su-local-footer__social-links > li:last-child { + margin-right: 0; } + .su-local-footer__social-links li { + padding-right: 18px; } + .su-local-footer__social-links li:last-child { + padding-right: 0; } + .su-local-footer__social-links i { + font-size: 2.5rem; } + .su-local-footer__social-links i::before { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + display: inline-block; + font-style: normal; + font-variant: normal; + font-weight: normal; + line-height: 1; + color: #2e2d29; + font-family: 'Font Awesome 5 Brands'; + -webkit-transition: color 0.25s ease-out; + transition: color 0.25s ease-out; } + .su-local-footer__social-links a { + text-decoration: none; } + .su-local-footer__social-links a span { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } + .su-local-footer__social-links .su-local-footer__social-facebook i::before { + content: "\f39e"; } + .su-local-footer__social-links .su-local-footer__social-facebook:hover i::before, .su-local-footer__social-links .su-local-footer__social-facebook:focus i::before { + color: #3b579d; } + .su-local-footer__social-links .su-local-footer__social-linkedin i::before { + content: "\f0e1"; } + .su-local-footer__social-links .su-local-footer__social-linkedin:hover i::before, .su-local-footer__social-links .su-local-footer__social-linkedin:focus i::before { + color: #0077b5; } + .su-local-footer__social-links .su-local-footer__social-twitter i::before { + content: "\f099"; } + .su-local-footer__social-links .su-local-footer__social-twitter:hover i::before, .su-local-footer__social-links .su-local-footer__social-twitter:focus i::before { + color: #1da1f2; } + .su-local-footer__social-links .su-local-footer__social-instagram i::before { + content: "\f16d"; } + .su-local-footer__social-links .su-local-footer__social-instagram:hover i::before, .su-local-footer__social-links .su-local-footer__social-instagram:focus i::before { + color: #d73676; } + .su-local-footer__social-links .su-local-footer__social-youtube i::before { + content: "\f167"; } + .su-local-footer__social-links .su-local-footer__social-youtube:hover i::before, .su-local-footer__social-links .su-local-footer__social-youtube:focus i::before { + color: #cd201f; } + @media only screen and (min-width: 768px) { .su-lockup, .su-lockup > a { @@ -10099,6 +10716,11 @@ a { font-size: 1.5em; font-weight: 600; } +@media only screen and (min-width: 0) and (max-width: 575px) { + .su-signup-form .su-submit, + .su-signup-form [type='submit'] { + width: auto; } } + .su-site-search { position: relative; } diff --git a/core/dist/js/assets.json b/core/dist/js/assets.json index 213f944a8..a201f8e6e 100644 --- a/core/dist/js/assets.json +++ b/core/dist/js/assets.json @@ -1,4 +1,14 @@ { + "../assets/fa-brands-400.eot": "../assets/fa-brands-400.eot", + "../assets/fa-brands-400.svg": "../assets/fa-brands-400.svg", + "../assets/fa-brands-400.ttf": "../assets/fa-brands-400.ttf", + "../assets/fa-brands-400.woff": "../assets/fa-brands-400.woff", + "../assets/fa-brands-400.woff2": "../assets/fa-brands-400.woff2", + "../assets/fa-regular-400.eot": "../assets/fa-regular-400.eot", + "../assets/fa-regular-400.svg": "../assets/fa-regular-400.svg", + "../assets/fa-regular-400.ttf": "../assets/fa-regular-400.ttf", + "../assets/fa-regular-400.woff": "../assets/fa-regular-400.woff", + "../assets/fa-regular-400.woff2": "../assets/fa-regular-400.woff2", "decanter-grid.css": "../css/decanter-grid.css", "decanter-grid.css.map": "../css/decanter-grid.css.map", "decanter-grid.js": "decanter-grid.js", diff --git a/core/src/img/arrow-right.svg b/core/src/img/arrow-right.svg new file mode 100644 index 000000000..1856181c1 --- /dev/null +++ b/core/src/img/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/src/img/facebook.svg b/core/src/img/facebook.svg new file mode 100644 index 000000000..4bc13b68c --- /dev/null +++ b/core/src/img/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/src/img/instagram.svg b/core/src/img/instagram.svg new file mode 100644 index 000000000..b5d6d0b10 --- /dev/null +++ b/core/src/img/instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/core/src/img/linkedin.svg b/core/src/img/linkedin.svg new file mode 100644 index 000000000..2074b6b1c --- /dev/null +++ b/core/src/img/linkedin.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/core/src/img/twitter.svg b/core/src/img/twitter.svg new file mode 100644 index 000000000..59968f8c7 --- /dev/null +++ b/core/src/img/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/src/img/youtube.svg b/core/src/img/youtube.svg new file mode 100644 index 000000000..b02b43dce --- /dev/null +++ b/core/src/img/youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/src/scss/components/index.scss b/core/src/scss/components/index.scss index 291428369..90c94736b 100644 --- a/core/src/scss/components/index.scss +++ b/core/src/scss/components/index.scss @@ -16,10 +16,12 @@ 'global-footer/index', 'hero/index', 'link/index', +'local-footer/index', 'lockup/index', 'logo/index', 'main-nav/index', 'masthead/index', 'quote/index', +'signup-form/index', 'site-search/index', 'skiplinks/index'; diff --git a/core/src/scss/components/local-footer/_local-footer.scss b/core/src/scss/components/local-footer/_local-footer.scss new file mode 100644 index 000000000..dbd05ac77 --- /dev/null +++ b/core/src/scss/components/local-footer/_local-footer.scss @@ -0,0 +1,401 @@ +@charset "UTF-8"; + +// +// Local Footer +// +// Local footer element to support (above) the global footer. +// +// Markup: ../../templates/components/local-footer/local-footer.twig +// +// Style guide: Components.Local Footer +// + +// Global styles for the local footer. +// ------------------------------------------------ +.su-local-footer { + background-color: $su-color-fog; + + a { + font-weight: $su-font-regular; + } + + ul { + @include list-unstyled; + + > li { + @include margin(null null 7px null); + } + } + + // Signup form tweaks. + // ------------------------------------------------ + .su-signup-form { + p { + font-size: 17px; + } + } +} + +// Header section for the lockup and weblogin link. +// ------------------------------------------------ +.su-local-footer__header { + position: relative; + + // Lockup placement. + .su-lockup { + @include grid-media-between('xs', 'md') { + @include modular-spacing('margin-bottom', 2); + } + + @include grid-media('lg') { + float: left; + } + } + + // Weblogin button. + .su-link--internal { + @include button-primary; + @include box-shadow('shallow'); + border-radius: 7px; + + @include grid-media-between('xs', 'md') { + @include modular-spacing('margin-bottom', 1); + width: auto; + } + + @include grid-media('lg') { + float: right; + } + + &::after { + background-color: $su-color-white; + } + + &:hover { + @include box-shadow('shallow'); + } + } +} + +// Main container styles and spacing. +// ------------------------------------------------ +.su-local-footer__columns, +.su-local-footer__header { + @include centered-column; + @include responsive-grid-gap; + @include modular-spacing('padding-top', 3); + clear: both; +} + +// The resposive behaviour for all contents using grid-area +// -------------------------------------------------------- +.su-local-footer__columns { + @include modular-spacing('padding-bottom', 3); + grid-template-rows: auto; + grid-template-columns: 1fr 1fr; + grid-template-areas: + "A B" + "C C"; + + @include grid-media('md') { + @include display-grid; + } + + @include grid-media('lg') { + grid-template-columns: 1fr 1fr 1fr; + grid-template-areas: + "A B C" + "A B C"; + } + + @include grid-media('xl') { + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-areas: + "A B B C"; + } + + // Styles for all the cells. + // ------------------------------------------------ + .su-local-footer__cell1, + .su-local-footer__cell2, + .su-local-footer__cell3 { + vertical-align: top; + } + + // Specific to cell1 styles and structure. + // ------------------------------------------------ + .su-local-footer__cell1 { + grid-area: A; + } + + // Specific to cell2 styles and structure. + // ------------------------------------------------ + .su-local-footer__cell2 { + grid-area: B; + + @include grid-media-between('xs', 'md') { + @include modular-spacing('padding-top', 3); + @include modular-spacing('padding-bottom', 1); + } + + @include grid-media-only('md') { + grid-area: C; + } + + // Handle the list of navs with a bit of padding and sizing + // to get faux columns. + nav { + vertical-align: top; + + @include grid-media-only('md') { + display: inline-block; + + $_gap: map-get($su-grid-gutters, 'md') / 2; + min-width: calc(49% - #{$_gap}); + max-width: calc(49% - #{$_gap}); + + &:last-of-type { + @include margin(null null null $_gap); + } + + &:first-of-type { + @include margin(null $_gap null null); + } + } + + @include grid-media('xl') { + display: inline-block; + $_gap: map-get($su-grid-gutters, 'xl') / 2; + min-width: calc(49% - #{$_gap}); + max-width: calc(49% - #{$_gap}); + + &:last-of-type { + @include margin(null null null $_gap); + } + + &:first-of-type { + @include margin(null $_gap null null); + } + } + + @include grid-media('2xl') { + $_gap: map-get($su-grid-gutters, '2xl') / 2; + min-width: calc(49% - #{$_gap}); + max-width: calc(49% - #{$_gap}); + + &:last-of-type { + @include margin(null null null $_gap); + } + + &:first-of-type { + @include margin(null $_gap null null); + } + } + + &:first-of-type { + @include modular-spacing('padding-bottom', 1); + } + } + } + + // IE 11 FIXES FOR GRID + // ------------------------------------------------ + > .su-local-footer__cell2 { + // Fun fix for ie and the autoprefixer. + // It gets confused sometimes. + @include grid-media('lg') { + -ms-grid-column-span: 2; + } + } + + // Specific to cell3 styles and structure. + // ------------------------------------------------ + .su-local-footer__cell3 { + grid-area: C; + + @include grid-media-only('md') { + grid-area: B; + } + } + + // IE 11 FIXES FOR GRID + // ------------------------------------------------ + > .su-local-footer__cell3 { + // Fun fix for ie and the autoprefixer. + // It gets confused sometimes. + @include grid-media("lg") { + -ms-grid-row: 1; + -ms-grid-column: 3; + } + + @include grid-media("xl") { + -ms-grid-row: 1; + -ms-grid-column: 4; + } + } +} + + +// List heading element styles. +// ------------------------------------------------ +.su-local-footer__list-heading { + font-size: 18px; + line-height: 140%; +} + +// Common styles for address and links. +// ------------------------------------------------ +.su-local-footer__address, +.su-local-footer__action-links { + @include modular-spacing('padding-bottom', 3); + font-size: 16px; +} + +// Address tag formatting and styles. +// ------------------------------------------------ +.su-local-footer__address { + line-height: 140%; +} + +// Styling for the action links section. +// ------------------------------------------------ +.su-local-footer__action-links { + a { + @include link-icon(arrow-right, 0.8em, right, -0.18em); + font-weight: $su-font-semi-bold; + } +} + +// Styles for the nav list links. +// ------------------------------------------------ + +.su-local-footer__primary-links, +.su-local-footer__secondary-links { + ul { + li { + font-size: 16px; + } + } +} + +// Styles for the social links. +// ------------------------------------------------ +.su-local-footer__social-links { + @include list-horizontal; + + li { + @include padding(null 18px null null); + + &:last-child { + @include padding(null 0 null null); + } + } + + i { + font-size: 2.5rem; + + // FA is included as a vendor dependency but the class styles are not + // included so we have to use the mixins and font declarations here. + &::before { + @include fa-icon; + color: $su-color-black; + font-family: 'Font Awesome 5 Brands'; + transition: color 0.25s ease-out; + } + } + + a { + text-decoration: none; + + span { + @include sr-only; + } + } + + // Font Awesome icons for specific selectors. + // ------------------------------------------------ + .su-local-footer__social-facebook { + i { + &::before { + content: fa-content($fa-var-facebook-f); + } + } + + &:hover, + &:focus { + i { + &::before { + color: color('Facebook', $su-social-brands); + } + } + } + } + + .su-local-footer__social-linkedin { + i { + &::before { + content: fa-content($fa-var-linkedin-in); + } + } + + &:hover, + &:focus { + i { + &::before { + color: color('LinkedIn', $su-social-brands); + } + } + } + } + + .su-local-footer__social-twitter { + i { + &::before { + content: fa-content($fa-var-twitter); + } + } + + &:hover, + &:focus { + i { + &::before { + color: color('Twitter', $su-social-brands); + } + } + } + } + + .su-local-footer__social-instagram { + i { + &::before { + content: fa-content($fa-var-instagram); + } + } + + &:hover, + &:focus { + i { + &::before { + color: color('Instagram', $su-social-brands); + } + } + } + } + + .su-local-footer__social-youtube { + i { + &::before { + content: fa-content($fa-var-youtube); + } + } + + &:hover, + &:focus { + i { + &::before { + color: color('YouTube', $su-social-brands); + } + } + } + } +} diff --git a/core/src/scss/components/local-footer/index.scss b/core/src/scss/components/local-footer/index.scss new file mode 100644 index 000000000..34b358afe --- /dev/null +++ b/core/src/scss/components/local-footer/index.scss @@ -0,0 +1,8 @@ +@charset "UTF-8"; + +/// +/// ROLL UP +/// + +@import +'local-footer'; diff --git a/core/src/scss/components/signup-form/_signup-form.scss b/core/src/scss/components/signup-form/_signup-form.scss new file mode 100644 index 000000000..76ef9b87f --- /dev/null +++ b/core/src/scss/components/signup-form/_signup-form.scss @@ -0,0 +1,19 @@ +@charset "UTF-8"; + +// +// Signup Form +// +// Default styling for a signup-form. +// +// Markup: ../../templates/components/signup-form/signup-form.twig +// +// Style guide: Components.Signup Form +// +.su-signup-form { + .su-submit, + [type='submit'] { + @include grid-media-only('xs') { + width: auto; + } + } +} diff --git a/core/src/scss/components/signup-form/index.scss b/core/src/scss/components/signup-form/index.scss new file mode 100644 index 000000000..5408d7107 --- /dev/null +++ b/core/src/scss/components/signup-form/index.scss @@ -0,0 +1,8 @@ +@charset "UTF-8"; + +/// +/// ROLL UP +/// + +@import +'signup-form'; diff --git a/core/src/scss/core/fonts/_fontawesome-fonts.scss b/core/src/scss/core/fonts/_fontawesome-fonts.scss new file mode 100644 index 000000000..3ea016141 --- /dev/null +++ b/core/src/scss/core/fonts/_fontawesome-fonts.scss @@ -0,0 +1,27 @@ +@charset "UTF-8"; + +@font-face { + font-family: 'Font Awesome 5 Free'; + font-style: normal; + font-weight: 400; + font-display: $fa-font-display; + src: url('#{$fa-font-path}/fa-regular-400.eot'); + src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'), + url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'), + url('#{$fa-font-path}/fa-regular-400.woff') format('woff'), + url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'), + url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg'); +} + +@font-face { + font-family: 'Font Awesome 5 Brands'; + font-style: normal; + font-weight: normal; + font-display: $fa-font-display; + src: url('#{$fa-font-path}/fa-brands-400.eot'); + src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'), + url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'), + url('#{$fa-font-path}/fa-brands-400.woff') format('woff'), + url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'), + url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg'); +} diff --git a/core/src/scss/core/fonts/_fonts.scss b/core/src/scss/core/fonts/_fonts.scss index fd913e728..9fb88016d 100644 --- a/core/src/scss/core/fonts/_fonts.scss +++ b/core/src/scss/core/fonts/_fonts.scss @@ -1,4 +1,4 @@ -@charset "UTF-8"; +@charset 'UTF-8'; // Fonts // diff --git a/core/src/scss/core/fonts/index.scss b/core/src/scss/core/fonts/index.scss index 012296672..a347c5549 100644 --- a/core/src/scss/core/fonts/index.scss +++ b/core/src/scss/core/fonts/index.scss @@ -5,4 +5,5 @@ /// @import +'fontawesome-fonts', 'fonts'; diff --git a/core/src/scss/decanter-grid.scss b/core/src/scss/decanter-grid.scss index 1698954f6..387fcc15e 100644 --- a/core/src/scss/decanter-grid.scss +++ b/core/src/scss/decanter-grid.scss @@ -23,7 +23,9 @@ $border-box-sizing: false; // 2. Vendors. @import -'bourbon.scss'; +'bourbon.scss', +'@fortawesome/fontawesome-free/scss/variables', +'@fortawesome/fontawesome-free/scss/mixins'; // 3. Utilities. @import diff --git a/core/src/scss/decanter-no-markup.scss b/core/src/scss/decanter-no-markup.scss index 946673ebf..8e148f4ae 100644 --- a/core/src/scss/decanter-no-markup.scss +++ b/core/src/scss/decanter-no-markup.scss @@ -23,8 +23,9 @@ $border-box-sizing: false; // 2. Vendors. @import -'bourbon.scss'; - +'bourbon.scss', +'@fortawesome/fontawesome-free/scss/variables', +'@fortawesome/fontawesome-free/scss/mixins'; // 3. Utilities. @import 'utilities/index'; diff --git a/core/src/scss/decanter.scss b/core/src/scss/decanter.scss index cde383a05..a75e6aa71 100644 --- a/core/src/scss/decanter.scss +++ b/core/src/scss/decanter.scss @@ -20,7 +20,9 @@ // 2. Vendors. @import 'bourbon.scss', -'core/normalize'; +'core/normalize', +'@fortawesome/fontawesome-free/scss/variables', +'@fortawesome/fontawesome-free/scss/mixins'; // 3. Utilities. @import diff --git a/core/src/scss/elements/typography/_typography.scss b/core/src/scss/elements/typography/_typography.scss index 5624b2b87..588591214 100644 --- a/core/src/scss/elements/typography/_typography.scss +++ b/core/src/scss/elements/typography/_typography.scss @@ -142,3 +142,12 @@ dfn { .su-small-paragraph { @include small-paragraph; } + +.su-fab { + font-family: 'Font Awesome 5 Brands'; +} + +.su-far { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} diff --git a/core/src/scss/utilities/mixins/list/_list-horizontal.scss b/core/src/scss/utilities/mixins/list/_list-horizontal.scss new file mode 100644 index 000000000..d315c2dbe --- /dev/null +++ b/core/src/scss/utilities/mixins/list/_list-horizontal.scss @@ -0,0 +1,24 @@ +// +// @list-horizontal +// +// Standard horizontal list. +// +// Credit: http://snippetcentral.com/horizontal-navigation-lists/ +// +// Style guide: Mixins.List.list-horizontal +// +@mixin list-horizontal { + @include padding(0); + @include margin(0); + list-style-type: none; + overflow: hidden; + + > li { + display: block; + float: left; + + &:last-child { + @include margin(null 0 null null); + } + } +} diff --git a/core/src/scss/utilities/mixins/list/index.scss b/core/src/scss/utilities/mixins/list/index.scss index d485460a0..463c7b578 100644 --- a/core/src/scss/utilities/mixins/list/index.scss +++ b/core/src/scss/utilities/mixins/list/index.scss @@ -9,4 +9,5 @@ // @import +'list-horizontal', 'list-unstyled'; diff --git a/core/src/scss/utilities/variables/core/_core-color-maps.scss b/core/src/scss/utilities/variables/core/_core-color-maps.scss index 86e703ac7..4476ba6f9 100644 --- a/core/src/scss/utilities/variables/core/_core-color-maps.scss +++ b/core/src/scss/utilities/variables/core/_core-color-maps.scss @@ -44,3 +44,30 @@ $su-core-colors: ( link--reverse: $su-color-white, link--reverse-hover: $su-color-vivid-red, ) !default; + +// +// Social media brand colors +// +// Color map for common social media brands +// +// Markup: $su-social-brands: ( +// 'Facebook': #3b579d, +// 'Twitter': #1da1f2, +// 'Instagram': #d73676, +// 'LinkedIn': #0077b5, +// 'YouTube': #cd201f, +// 'iTunes U': #a3aaae, +// 'Reddit': #ff5700, +//) !default; +// +// Style guide: Variables.Core.su-social-brands +// +$su-social-brands: ( + 'Facebook': #3b579d, + 'Twitter': #1da1f2, + 'Instagram': #d73676, + 'LinkedIn': #0077b5, + 'YouTube': #cd201f, + 'iTunes U': #a3aaae, + 'Reddit': #ff5700, +) !default; diff --git a/core/src/scss/utilities/variables/pre-vendor/_fontawesome.scss b/core/src/scss/utilities/variables/pre-vendor/_fontawesome.scss new file mode 100644 index 000000000..793864fd0 --- /dev/null +++ b/core/src/scss/utilities/variables/pre-vendor/_fontawesome.scss @@ -0,0 +1,15 @@ +@charset "UTF-8"; + +// +// Fontawesome Overrides +// +// Specific overrides for fontawesome. +// +//
+// $fa-font-path
+//
+// +// Style guide: Variables.Vendor.Font Awesome +// + +$fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; diff --git a/core/src/scss/utilities/variables/pre-vendor/index.scss b/core/src/scss/utilities/variables/pre-vendor/index.scss index 70dce7af7..a95e5ee2c 100644 --- a/core/src/scss/utilities/variables/pre-vendor/index.scss +++ b/core/src/scss/utilities/variables/pre-vendor/index.scss @@ -12,4 +12,5 @@ // vendor dependencies. @import -'bourbon-overrides'; +'bourbon-overrides', +'fontawesome'; diff --git a/core/src/templates/components/global-footer/global-footer.json b/core/src/templates/components/global-footer/global-footer.json index 0db3279e4..0967ef424 100644 --- a/core/src/templates/components/global-footer/global-footer.json +++ b/core/src/templates/components/global-footer/global-footer.json @@ -1,3 +1 @@ -{ - -} +{} diff --git a/core/src/templates/components/local-footer/local-footer.json b/core/src/templates/components/local-footer/local-footer.json new file mode 100644 index 000000000..9d5b44336 --- /dev/null +++ b/core/src/templates/components/local-footer/local-footer.json @@ -0,0 +1,108 @@ +{ + "lockup_title": "Vestibellum", + "address": "Lorem Ipsum Dolar Sit Amet
555 Street Name | Room 555
Stanford, CA 94305
650-555-5555
", + "action_links": [ + { + "href": "#", + "text": "Visit" + }, + { + "href": "#", + "text": "Campus Map" + }, + { + "href": "#", + "text": "Contact Us" + } + ], + "social_links": [ + { + "href": "#", + "text": "Facebook", + "link_attributes": { + "class": "su-local-footer__social-facebook" + } + }, + { + "href": "#", + "text": "LinkedIn", + "link_attributes": { + "class": "su-local-footer__social-linkedin" + } + }, + { + "href": "#", + "text": "Twitter", + "link_attributes": { + "class": "su-local-footer__social-twitter" + } + }, + { + "href": "#", + "text": "Instagram", + "link_attributes": { + "class": "su-local-footer__social-instagram" + } + }, + { + "href": "#", + "text": "Youtube", + "link_attributes": { + "class": "su-local-footer__social-youtube" + } + } + ], + "primary_links_header": "Links to", + "primary_links": [ + { + "href": "#", + "text": "lorem ipsum dolor sit amit" + }, + { + "href": "#", + "text": "Vestibellum ultices nueue" + }, + { + "href": "#", + "text": "Blendius tellus" + }, + { + "href": "#", + "text": "Arnen cowalls" + }, + { + "href": "#", + "text": "Finibus" + } + ], + "secondary_links_header": "Resources for", + "secondary_links": [ + { + "href": "#", + "text": "Finibus" + }, + { + "href": "#", + "text": "lorem ipsum dolor sit amit" + }, + { + "href": "#", + "text": "Vestibellum ultices nueue" + }, + { + "href": "#", + "text": "Blendius tellus" + }, + { + "href": "#", + "text": "Arnen cowalls" + } + ], + "signup_form_content": "

Sign up for our email.

Your source for pellentesque leo accumsan ultrices

", + "signup_form_action": "/", + "signup_form_field_email_id": "su-email", + "signup_form_field_email_name": "su-email", + "signup_form_field_submit_id": "su-submit", + "signup_form_field_submit_name": "su-submit", + "weblogin_url": "/login" +} diff --git a/core/src/templates/components/local-footer/local-footer.twig b/core/src/templates/components/local-footer/local-footer.twig new file mode 100644 index 000000000..38619c32a --- /dev/null +++ b/core/src/templates/components/local-footer/local-footer.twig @@ -0,0 +1,207 @@ +{# +/** + * @file + * Local Footer Component. + * + * Figma source: https://www.figma.com/file/Kmd4utmJFPRMVeCFEEBQhLtx/Stanford-Design-Library?node-id=2384%3A1177 + * + * This local footer template is to support the global footer and provide + * site contextual links. + * + * Available variables: + * - attributes: For additional HTML attributes not already provided. + * - modifier_class: Additional css classes to change look and behaviour. + * - template_path_lockup: The relative file path to the lockup twig template. + * - template_path_link: The relative file path to the link twig template. + * - template_path_macro: The relative file path to the macro twig template. + * - template_path_signup_form: The relative file path to the signup-form template. + * - lockup_options: Options to pass through to the lockup twig template. + * See the lockup template variables for more information. + * - lockup_title: The text to use as line1 in the lockup unless + * lockup_options is overridden. + * - contentcell1: Twig block area so you can override just this section + * when extending. + * - contentcell2: Twig block area so you can override just this section + * when extending. + * - contentcell3: Twig block area so you can override just this section + * when extending. + * - headercontent: Optional open variable for placing arbitrary content + * in the header portion of the template. + * - cell1: Optional open variable for placing arbitrary content + * in cell 1 of the template. + * - cell2: Optional open variable for placing arbitrary content + * in cell 1 of the template. + * - cell3: Optional open variable for placing arbitrary content + * in cell 1 of the template. + * - address: Optional open variable for address content. + * - action_links: Either a structured array of links that get rendered + * by a common macro or arbitrary html markup. The Links + * in this field get padding and arrows applied. + * - social_links: Either a structured array of links that get rendered + * by a common macro or arbitrary html markup. + * - primary_links: Either a structured array of links that get rendered + * by a common macro or arbitrary html markup. + * - secondary_links: Either a structured array of links that get rendered + * by a common macro or arbitrary html markup. + * - signup_form_content: An open variable for placing content above the form. + * - signup_form_action: The url that the form should submit to. + * - signup_form_method: The http method in which the form should use (get|post) + * - signup_form_field_email: The name and id of the email field. + * - signup_form_field_email_placeholder: The placeholder text for the field. + * - signup_form_field_submit: The name and id of the submit button. + * - signup_form_field_submit_value: The value of the submit button. + * - signup_form_fields: Option variable that allows you to put any additional + * markup in to the signup form. This could be content or + * additional fields. + * - weblogin_url: Optional - The url in which a user goes to login with. + * - weblogin_text: The text to display for the weblogin button link. + */ +#} +{%- if template_path_lockup is empty -%} + {%- set template_path_lockup = "@decanter/components/lockup/lockup.twig" -%} +{%- endif %} + +{%- if lockup_options is empty -%} + {%- set lockup_options = { "modifier_class": 'su-lockup--option-a', "line1": lockup_title } -%} +{%- endif -%} + +{%- if template_path_link is empty -%} + {%- set template_path_link = "@decanter/components/link/link.twig" -%} +{%- endif %} + +{%- if template_path_signup_form is empty -%} + {%- set template_path_signup_form = "@decanter/components/signup-form/signup-form.twig" -%} +{%- endif %} + +{%- if template_path_macro is empty -%} + {%- set template_path_macro = "@decanter/utilities/macros/link-list.twig" -%} +{%- endif -%} +{%- import template_path_macro as list_macro -%} + +
+ {# The header is completely optional and won't render if there isn't any content #} + {% if lockup_title is not empty or weblogin_url is not empty or headercontent is not empty %} +
+ {# Lockup template. Set usually to option-a #} + {% include template_path_lockup with lockup_options %} + {# Web login button #} + {% if weblogin_url is not empty %} + {% include template_path_link with { + "modifier_class": "su-link--internal", + "link_href": weblogin_url, + "link_content": weblogin_text|default('Web Login') + } only %} + {% endif %} + {# Optional content area for the header. #} + {{ headercontent }} +
+ {% endif %} + {# + Container for the content cells. These cells have a specific and rigid + responsive behaviour so they are not optional. Empty cells will still + render and create whitespace. + #} +
+ {# Content Cell 1 - For action and social media links. #} +
+ {# Twig block for you to extend with #} + {% block contentcell1 %} + {# + The address is optional so don't put non-address content in it. + Use the `cell1` variable instead. + #} + {% if address|render|striptags|trim is not empty %} +
+ {{ address }} +
+ {% endif %} + {# Stylized links. See local-footer.json for structure for macro. #} + {% if action_links is not empty%} +
    + {% if action_links is iterable %} + {{ list_macro.link_list(action_links) }} + {% else %} + {{ action_links }} + {% endif %} +
+ {% endif %} + {# Stylized links. See local-footer.json for structure for macro. #} + {% if social_links is not empty%} + + {% endif %} + {% endblock %} + {# Use this var if you would like to place your own content in to this cell. #} + {{ cell1 }} +
+ {# Content Cell 2 - For primary and secondary link lists. #} +
+ {# Twig block for you to extend with #} + {% block contentcell2 %} + {# + Primary Links - left or top list. + #} + {% if primary_links is not empty%} + + {% endif %} + {# + Secondary Links - Right or bottom list. + #} + {% if secondary_links is not empty%} + + {% endif %} + {% endblock %} + {# If you want to provide all of our own markup use the cell2 var. #} + {{ cell2 }} +
+ {# + Cell 3 - For the signup form. + #} +
+ {# Twig block for you to extend with #} + {% block contentcell3 %} + {# + The signup form is optional. If it doesn't meet your content needs + use the cell3 variable instead. + #} + {% if signup_form_action is not empty %} + {# The template path is included with the `with` keyword on purpose. + See the template for what variables are expected and how they are named. + #} + {% include template_path_signup_form %} + {% endif %} + {% endblock %} + {# If you want to provide all of our own markup use the cell3 var. #} + {{ cell3 }} +
+
+
diff --git a/core/src/templates/components/quote/quote.twig b/core/src/templates/components/quote/quote.twig index 216e54f5a..4fad40bd6 100644 --- a/core/src/templates/components/quote/quote.twig +++ b/core/src/templates/components/quote/quote.twig @@ -1,10 +1,35 @@ -
+{# +/** + * @file + * Quote Component. + * + * Available variables: + * - attributes: For additional HTML attributes not already provided. + * - modifier_class: Additional CSS classes to change look and behaviour. + * - src: The source image path + * - alt: The alt path + * - name: The name of the source of the quote. + * - bio: The bio text for the quote. + * - text: The body text for the quote. + * - content: An unopinionated open field for all types of content. + */ +#} +
+ {%- if src is not empty -%} {{ alt }} + {%- endif -%}
+ {%- if name is not empty -%}

{{ name }}

+ {%- endif -%} + {%- if bio is not empty -%}

{{ bio }}

+ {%- endif -%} + {%- if text is not empty -%}

"{{ text }}"

+ {%- endif -%} + {{ content }}
diff --git a/core/src/templates/components/signup-form/signup-form.json b/core/src/templates/components/signup-form/signup-form.json new file mode 100644 index 000000000..7e3b8fac9 --- /dev/null +++ b/core/src/templates/components/signup-form/signup-form.json @@ -0,0 +1,8 @@ +{ + "signup_form_content": "

Sign up for our email.

Your source for pellentesque leo accumsan ultrices

", + "signup_form_action": "/", + "signup_form_field_email_id": "su-email", + "signup_form_field_email_name": "su-email", + "signup_form_field_submit_id": "su-submit", + "signup_form_field_submit_name": "su-submit" +} diff --git a/core/src/templates/components/signup-form/signup-form.twig b/core/src/templates/components/signup-form/signup-form.twig new file mode 100644 index 000000000..e785268f5 --- /dev/null +++ b/core/src/templates/components/signup-form/signup-form.twig @@ -0,0 +1,32 @@ +{# +/** + * @file + * Signup Form Component. + * + * Available variables: + * - attributes: For additional HTML attributes not already provided. + * - modifier_class: Additional CSS classes to change look and behaviour. + * - signup_form_content: An open content area for adding in anything. + * - form_attributes: The form element attributes. + * - signup_form_action: The url for the form submission + * - signup_form_method: The action to take. Defaults to post. + * - signup_form_field_email_id: A custom id for the email field. + * - signup_form_field_email_name: A custom name for the email field. + * - signup_form_field_email_aria_label: A custom aria-label for the email field. + * - signup_form_field_email_placeholder: A custom placeholder for the email field. + * - signup_form_fields: An open area for putting in any additional fields required. + * - signup_form_field_submit_id: A custom id for the submit button. + * - signup_form_field_submit_name: A custom name for the submit button. + * - signup_form_field_submit_value: A custom submit value for the submit button. + */ +#} +
+ {# Add any additional markup above the form with this variable. #} + {{ signup_form_content }} +
+ + {# Add any additional fields or markup to this form using this variable. #} + {{ signup_form_fields }} + +
+
diff --git a/core/src/templates/utilities/macros/link-list.twig b/core/src/templates/utilities/macros/link-list.twig new file mode 100644 index 000000000..22d21cd1b --- /dev/null +++ b/core/src/templates/utilities/macros/link-list.twig @@ -0,0 +1,46 @@ +{# +/** + * Macro for creating a simple single level list of links. + */ +#} +{% macro link_list(items) %} + {% spaceless %} + {% for item in items %} + + {# Define the attributes vars fresh on each loop #} + {% set list_attributes = "" %} + {% set link_attributes = "" %} + + {# + The map function is not available in twigjs so we have to do this :( + see: https://github.com/twigjs/twig.js/wiki/Implementation-Notes + #} + {% if item.list_attributes is iterable %} + {% for key, val in item.list_attributes %} + {% if val.twig_markup == true %} + {% set val = val|merge({'twig_markup': null}) %} + {% endif %} + {% set list_attributes = list_attributes ~ key|trim ~ '="' ~ val|join|trim ~ '" ' %} + {% endfor %} + {% endif %} + + {# + The map function is not available in twigjs so we have to do this :( + see: https://github.com/twigjs/twig.js/wiki/Implementation-Notes + #} + {% if item.link_attributes is iterable %} + {% for key, val in item.link_attributes %} + {% if val.twig_markup == true %} + {% set val = val|merge({'twig_markup': null}) %} + {% endif %} + {% set link_attributes = link_attributes ~ key|trim ~ '="' ~ val|join|trim ~ '" ' %} + {% endfor %} + {% endif %} + + {# Actually output something #} +
  • + {{ item.text }} +
    • + {% endfor %} + {% endspaceless %} +{% endmacro %} diff --git a/package-lock.json b/package-lock.json index 9c8a1d962..5291d41c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -726,6 +726,12 @@ "to-fast-properties": "^2.0.0" } }, + "@fortawesome/fontawesome-free": { + "version": "5.11.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.11.2.tgz", + "integrity": "sha512-XiUPoS79r1G7PcpnNtq85TJ7inJWe0v+b5oZJZKb0pGHNIV6+UiNeQWiFGmuQ0aj7GEhnD/v9iqxIsjuRKtEnQ==", + "dev": true + }, "@types/events": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz", @@ -750,9 +756,9 @@ "dev": true }, "@types/node": { - "version": "12.11.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-12.11.2.tgz", - "integrity": "sha512-dsfE4BHJkLQW+reOS6b17xhZ/6FB1rB8eRRvO08nn5o+voxf3i74tuyFWNH6djdfgX7Sm5s6LD8t6mJug4dpDw==", + "version": "12.11.5", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.11.5.tgz", + "integrity": "sha512-LC8ALj/24PhByn39nr5jnTvpE7MujK8y7LQmV74kHYF5iQ0odCPkMH4IZNZw+cobKfSXqaC8GgegcbIsQpffdA==", "dev": true }, "@types/q": { @@ -5089,24 +5095,28 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true }, "aproba": { "version": "1.2.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, "optional": true, "requires": { @@ -5116,12 +5126,14 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true }, "brace-expansion": { "version": "1.1.11", - "bundled": true, + "resolved": false, + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "requires": { "balanced-match": "^1.0.0", @@ -5130,34 +5142,40 @@ }, "chownr": { "version": "1.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==", "dev": true, "optional": true }, "code-point-at": { "version": "1.1.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true }, "concat-map": { "version": "0.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true }, "core-util-is": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true, "optional": true }, "debug": { "version": "2.6.9", - "bundled": true, + "resolved": false, + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "dev": true, "optional": true, "requires": { @@ -5166,25 +5184,29 @@ }, "deep-extend": { "version": "0.6.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "bundled": true, + "resolved": false, + "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true }, "fs-minipass": { "version": "1.2.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", "dev": true, "optional": true, "requires": { @@ -5193,13 +5215,15 @@ }, "fs.realpath": { "version": "1.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "optional": true }, "gauge": { "version": "2.7.4", - "bundled": true, + "resolved": false, + "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "optional": true, "requires": { @@ -5215,7 +5239,8 @@ }, "glob": { "version": "7.1.3", - "bundled": true, + "resolved": false, + "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", "dev": true, "optional": true, "requires": { @@ -5229,13 +5254,15 @@ }, "has-unicode": { "version": "2.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.24", - "bundled": true, + "resolved": false, + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "dev": true, "optional": true, "requires": { @@ -5244,7 +5271,8 @@ }, "ignore-walk": { "version": "3.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "dev": true, "optional": true, "requires": { @@ -5253,7 +5281,8 @@ }, "inflight": { "version": "1.0.6", - "bundled": true, + "resolved": false, + "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "optional": true, "requires": { @@ -5263,18 +5292,21 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, + "resolved": false, + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "dev": true }, "ini": { "version": "1.3.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "requires": { "number-is-nan": "^1.0.0" @@ -5282,13 +5314,15 @@ }, "isarray": { "version": "1.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", - "bundled": true, + "resolved": false, + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "requires": { "brace-expansion": "^1.1.7" @@ -5296,12 +5330,14 @@ }, "minimist": { "version": "0.0.8", - "bundled": true, + "resolved": false, + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "dev": true }, "minipass": { "version": "2.3.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, "requires": { "safe-buffer": "^5.1.2", @@ -5310,7 +5346,8 @@ }, "minizlib": { "version": "1.2.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==", "dev": true, "optional": true, "requires": { @@ -5319,7 +5356,8 @@ }, "mkdirp": { "version": "0.5.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "requires": { "minimist": "0.0.8" @@ -5327,13 +5365,15 @@ }, "ms": { "version": "2.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true, "optional": true }, "needle": { "version": "2.2.4", - "bundled": true, + "resolved": false, + "integrity": "sha512-HyoqEb4wr/rsoaIDfTH2aVL9nWtQqba2/HvMv+++m8u0dz808MaagKILxtfeSN7QU7nvbQ79zk3vYOJp9zsNEA==", "dev": true, "optional": true, "requires": { @@ -5344,7 +5384,8 @@ }, "node-pre-gyp": { "version": "0.10.3", - "bundled": true, + "resolved": false, + "integrity": "sha512-d1xFs+C/IPS8Id0qPTZ4bUT8wWryfR/OzzAFxweG+uLN85oPzyo2Iw6bVlLQ/JOdgNonXLCoRyqDzDWq4iw72A==", "dev": true, "optional": true, "requires": { @@ -5362,7 +5403,8 @@ }, "nopt": { "version": "4.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, "requires": { @@ -5372,13 +5414,15 @@ }, "npm-bundled": { "version": "1.0.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-m/e6jgWu8/v5niCUKQi9qQl8QdeEduFA96xHDDzFGqly0OOjI7c+60KM/2sppfnUU9JJagf+zs+yGhqSOFj71g==", "dev": true, "optional": true }, "npm-packlist": { "version": "1.2.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-7Mni4Z8Xkx0/oegoqlcao/JpPCPEMtUvsmB0q7mgvlMinykJLSRTYuFqoQLYgGY8biuxIeiHO+QNJKbCfljewQ==", "dev": true, "optional": true, "requires": { @@ -5388,7 +5432,8 @@ }, "npmlog": { "version": "4.1.2", - "bundled": true, + "resolved": false, + "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "optional": true, "requires": { @@ -5400,18 +5445,21 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true }, "object-assign": { "version": "4.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "dev": true, "optional": true }, "once": { "version": "1.4.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "requires": { "wrappy": "1" @@ -5419,19 +5467,22 @@ }, "os-homedir": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "optional": true, "requires": { @@ -5441,19 +5492,22 @@ }, "path-is-absolute": { "version": "1.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true, "optional": true }, "process-nextick-args": { "version": "2.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "dev": true, "optional": true }, "rc": { "version": "1.2.8", - "bundled": true, + "resolved": false, + "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "dev": true, "optional": true, "requires": { @@ -5465,7 +5519,8 @@ "dependencies": { "minimist": { "version": "1.2.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true } @@ -5473,7 +5528,8 @@ }, "readable-stream": { "version": "2.3.6", - "bundled": true, + "resolved": false, + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "optional": true, "requires": { @@ -5488,7 +5544,8 @@ }, "rimraf": { "version": "2.6.3", - "bundled": true, + "resolved": false, + "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", "dev": true, "optional": true, "requires": { @@ -5497,42 +5554,49 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, + "resolved": false, + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true }, "safer-buffer": { "version": "2.1.2", - "bundled": true, + "resolved": false, + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, "optional": true }, "sax": { "version": "1.2.4", - "bundled": true, + "resolved": false, + "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true }, "semver": { "version": "5.6.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==", "dev": true, "optional": true }, "set-blocking": { "version": "2.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true, "optional": true }, "string-width": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { "code-point-at": "^1.0.0", @@ -5542,7 +5606,8 @@ }, "string_decoder": { "version": "1.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, "optional": true, "requires": { @@ -5551,7 +5616,8 @@ }, "strip-ansi": { "version": "3.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { "ansi-regex": "^2.0.0" @@ -5559,13 +5625,15 @@ }, "strip-json-comments": { "version": "2.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true, "optional": true }, "tar": { "version": "4.4.8", - "bundled": true, + "resolved": false, + "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==", "dev": true, "optional": true, "requires": { @@ -5580,13 +5648,15 @@ }, "util-deprecate": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true, "optional": true }, "wide-align": { "version": "1.1.3", - "bundled": true, + "resolved": false, + "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, "optional": true, "requires": { @@ -5595,12 +5665,14 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true }, "yallist": { "version": "3.0.3", - "bundled": true, + "resolved": false, + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", "dev": true } } @@ -14777,23 +14849,13 @@ "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", "dev": true - }, - "webpack-log": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz", - "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==", - "dev": true, - "requires": { - "ansi-colors": "^3.0.0", - "uuid": "^3.3.2" - } } } }, "webpack-dev-server": { - "version": "3.8.2", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.8.2.tgz", - "integrity": "sha512-0xxogS7n5jHDQWy0WST0q6Ykp7UGj4YvWh+HVN71JoE7BwPxMZrwgraBvmdEMbDVMBzF0u+mEzn8TQzBm5NYJQ==", + "version": "3.9.0", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.9.0.tgz", + "integrity": "sha512-E6uQ4kRrTX9URN9s/lIbqTAztwEPdvzVrcmHE8EQ9YnuT9J8Es5Wrd8n9BKg1a0oZ5EgEke/EQFgUsp18dSTBw==", "dev": true, "requires": { "ansi-html": "0.0.7", @@ -14814,7 +14876,7 @@ "loglevel": "^1.6.4", "opn": "^5.5.0", "p-retry": "^3.0.1", - "portfinder": "^1.0.24", + "portfinder": "^1.0.25", "schema-utils": "^1.0.0", "selfsigned": "^1.10.7", "semver": "^6.3.0", @@ -15281,16 +15343,6 @@ "has-flag": "^3.0.0" } }, - "webpack-log": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz", - "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==", - "dev": true, - "requires": { - "ansi-colors": "^3.0.0", - "uuid": "^3.3.2" - } - }, "which-module": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", @@ -15338,6 +15390,16 @@ } } }, + "webpack-log": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz", + "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==", + "dev": true, + "requires": { + "ansi-colors": "^3.0.0", + "uuid": "^3.3.2" + } + }, "webpack-manifest-plugin": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-2.0.4.tgz", diff --git a/package.json b/package.json index 71750723e..5124b8101 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "devDependencies": { "@babel/core": "^7.0.0-beta.55", "@babel/preset-env": "^7.0.0-beta.55", + "@fortawesome/fontawesome-free": "^5.11.2", "acorn": "^6.1.1", "autoprefixer": "^9.4.10", "babel-loader": "^8.0.5", @@ -68,7 +69,7 @@ "webpack": "^4.29.6", "webpack-assets-manifest": "^3.1.1", "webpack-cli": "^3.3.0", - "webpack-dev-server": "^3.8.2", + "webpack-dev-server": "^3.9.0", "webpack-manifest-plugin": "^2.0.4" } } diff --git a/webpack.config.js b/webpack.config.js index 9d0517889..671fb4149 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -49,6 +49,12 @@ var config = { compress: true, port: 9000 }, + // Relative output paths for css assets. + resolve: { + alias: { + '@fortawesome': path.resolve(npmPackage + '@fortawesome') + } + }, // Define modules. module: { rules: [ @@ -84,8 +90,7 @@ var config = { sourceMap: true, plugins: () => [ autoprefixer( { - grid: true, - browsers: [ 'last 2 versions', 'ie 11' ] + grid: true } ) ] } @@ -96,7 +101,8 @@ var config = { options: { includePaths: [ path.resolve( __dirname, npmPackage, "bourbon/core" ), - path.resolve( __dirname, srcDir, "scss" ) + path.resolve( __dirname, srcDir, "scss" ), + path.resolve( __dirname, npmPackage ) ], sourceMap: true, lineNumbers: true, @@ -106,6 +112,15 @@ var config = { } ] }, + { + test: /\.(woff2?|ttf|otf|eot)$/, + loader: 'file-loader', + options: { + name: devMode ? "[name].[ext]" : "[hash:7].[ext]", + publicPath: "../assets", + outputPath: "../assets" + } + }, // Apply plugins to image assets. { test: /\.(png|svg|jpg|gif)$/i,