diff --git a/.codeclimate.yml b/.codeclimate.yml index ccf38a864..33f227866 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -41,6 +41,8 @@ engines: enabled: false VendorPrefix: enabled: false + UrlFormat: + enabled: false phpcodesniffer: enabled: false phpmd: diff --git a/core/css/decanter.css b/core/css/decanter.css index 2a663749e..41709669b 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -6,6 +6,10 @@ * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ +@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i"); +@import url("https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,600,700"); +@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700"); +@import url("https://fonts.googleapis.com/css?family=Kalam:300,400,700"); html { line-height: 1.15; /* 1 */ @@ -300,141 +304,62 @@ template { display: none; } @font-face { - font-family: "Source Sans Pro"; - src: url("../fonts/sourcesanspro-extralight-webfont.ttf") format("truetype"); + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-extralight-webfont.woff") format("woff"); font-style: normal; font-weight: 200; } @font-face { - font-family: "Source Sans Pro"; - src: url("../fonts/sourcesanspro-extralightitalic-webfont.ttf") format("truetype"); + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-extralightitalic-webfont.woff") format("woff"); font-style: italic; font-weight: 200; } @font-face { - font-family: "Source Sans Pro"; - src: url("../fonts/sourcesanspro-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-light-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-light-webfont.woff") format("woff"), url("../fonts/sourcesanspro-light-webfont.ttf") format("truetype"); + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-light-webfont.woff") format("woff"); font-style: normal; font-weight: 300; } @font-face { - font-family: "Source Sans Pro"; - src: url("../fonts/sourcesanspro-lightitalic-webfont.ttf") format("truetype"); + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-lightitalic-webfont.woff") format("woff"); font-style: italic; font-weight: 300; } @font-face { - font-family: "Source Sans Pro"; - src: url("../fonts/sourcesanspro-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-regular-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-regular-webfont.woff") format("woff"), url("../fonts/sourcesanspro-regular-webfont.ttf") format("truetype"); - font-style: normal; - font-weight: 400; } - -@font-face { - font-family: "Source Sans Pro"; - src: url("../fonts/sourcesanspro-regularitalic-webfont.ttf") format("truetype"); + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-regularitalic-webfont.woff") format("woff"); font-style: italic; font-weight: 400; } @font-face { - font-family: "Source Sans Pro"; - src: url("../fonts/sourcesanspro-semibold-webfont.ttf") format("truetype"); - font-style: normal; - font-weight: 600; } - -@font-face { - font-family: "Source Sans Pro"; - src: url("../fonts/sourcesanspro-semibolditalic-webfont.ttf") format("truetype"); + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-semibolditalic-webfont.woff") format("woff"); font-style: italic; font-weight: 600; } @font-face { - font-family: "Source Sans Pro"; - src: url("../fonts/sourcesanspro-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-bold-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-bold-webfont.woff") format("woff"), url("../fonts/sourcesanspro-bold-webfont.ttf") format("truetype"); - font-style: normal; - font-weight: 700; } - -@font-face { - font-family: "Source Sans Pro"; - src: url("../fonts/sourcesanspro-bolditalic-webfont.ttf") format("truetype"); + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-bolditalic-webfont.woff") format("woff"); font-style: italic; font-weight: 700; } @font-face { - font-family: "Source Sans Pro"; - src: url("../fonts/sourcesanspro-black-webfont.ttf") format("truetype"); + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-black-webfont.woff") format("woff"); font-style: normal; font-weight: 900; } @font-face { - font-family: "Source Sans Pro"; - src: url("../fonts/sourcesanspro-blackitalic-webfont.ttf") format("truetype"); + font-family: "Source Serif Pro"; + src: url("https://www-media.stanford.edu/assets/fonts/sourceserifpro-blackitalic-webfont.woff") format("woff"); font-style: italic; font-weight: 900; } -@font-face { - font-family: "Crimson Text"; - src: url("../fonts/crimsontext-regular-webfont.woff") format("woff"), url("../fonts/crimsontext-regular-webfont.ttf") format("truetype"); - font-style: normal; - font-weight: 400; } - -@font-face { - font-family: "Crimson Text"; - src: url("../fonts/crimsontext-regularitalic-webfont.woff") format("woff"), url("../fonts/crimsontext-regularitalic-webfont.ttf") format("truetype"); - font-style: italic; - font-weight: 400; } - -@font-face { - font-family: "Crimson Text"; - src: url("../fonts/crimsontext-semibold-webfont.woff") format("woff"), url("../fonts/crimsontext-semibold-webfont.ttf") format("truetype"); - font-style: normal; - font-weight: 600; } - -@font-face { - font-family: "Crimson Text"; - src: url("../fonts/crimsontext-semibolditalic-webfont.woff") format("woff"), url("../fonts/crimsontext-semibolditalic-webfont.ttf") format("truetype"); - font-style: italic; - font-weight: 600; } - -@font-face { - font-family: "Crimson Text"; - src: url("../fonts/crimsontext-bold-webfont.woff") format("woff"), url("../fonts/crimsontext-bold-webfont.ttf") format("truetype"); - font-style: normal; - font-weight: 700; } - -@font-face { - font-family: "Crimson Text"; - src: url("../fonts/crimsontext-bolditalic-webfont.woff") format("woff"), url("../fonts/crimsontext-bolditalic-webfont.ttf") format("truetype"); - font-style: italic; - font-weight: 700; } - -@font-face { - font-family: "Roboto Slab"; - src: url("../fonts/robotoslab-thin-webfont.woff") format("woff"), url("../fonts/robotoslab-thin-webfont.ttf") format("truetype"); - font-style: normal; - font-weight: 100; } - -@font-face { - font-family: "Roboto Slab"; - src: url("../fonts/robotoslab-light-webfont.woff") format("woff"), url("../fonts/robotoslab-light-webfont.ttf") format("truetype"); - font-style: normal; - font-weight: 300; } - -@font-face { - font-family: "Roboto Slab"; - src: url("../fonts/robotoslab-regular-webfont.woff") format("woff"), url("../fonts/robotoslab-regular-webfont.ttf") format("truetype"); - font-style: normal; - font-weight: 400; } - -@font-face { - font-family: "Roboto Slab"; - src: url("../fonts/robotoslab-bold-webfont.woff") format("woff"), url("../fonts/robotoslab-bold-webfont.ttf") format("truetype"); - font-style: normal; - font-weight: 700; } - @font-face { font-family: "Stanford"; - src: url("../fonts/stanford.woff") format("woff"), url("../fonts/stanford.ttf") format("truetype"); - font-style: normal; + src: url("https://www-media.stanford.edu/assets/fonts/stanford.woff") format("woff"), url("https://www-media.stanford.edu/assets/fonts/stanford.ttf") format("truetype"); font-weight: 300; } .grid--container { @@ -675,7 +600,7 @@ fieldset { line-height: 1.8rem; margin-right: 0.6em; text-indent: 0.15em; - vertical-align: middle\0; + vertical-align: middle; width: 1.8rem; } [type=radio] + label::before { @@ -871,25 +796,11 @@ html { font-size: 10px; } body { - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-weight: 400; - font-size: 1.6rem; color: #2e2d29; - line-height: 1.5; } - @media only screen and (min-width: 576px) { - body { - font-size: 1.6rem; } } - @media only screen and (min-width: 768px) { - body { - font-size: 1.8rem; } } - @media only screen and (min-width: 1024px) { - body { - font-size: 1.8rem; } } - @media only screen and (min-width: 1500px) { - body { - font-size: 1.9rem; } } + font-size: 2rem; } p { + line-height: 1.4; margin-top: 1em; margin-bottom: 1em; } @@ -900,7 +811,6 @@ h4, h5, h6 { clear: both; - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; line-height: 1.2; margin-top: 1.5em; margin-bottom: 0.5em; } @@ -917,7 +827,7 @@ h6 { h4, .su-serif h5, .su-serif h6 { - font-family: "Crimson Text", "Georgia", "Times", "Times New Roman", serif; } + font-family: "Source Serif Pro", "Georgia", "Times", "Times New Roman", serif; } .su-slab h1, .su-slab h2, .su-slab h3, .su-slab @@ -925,6 +835,13 @@ h6 { h5, .su-slab h6 { font-family: "Roboto Slab", "Georgia", "Times", "Times New Roman", serif; } + .su-handwriting h1, .su-handwriting + h2, .su-handwriting + h3, .su-handwriting + h4, .su-handwriting + h5, .su-handwriting + h6 { + font-family: "Kalam", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } h1 a, h2 a, h3 a, @@ -934,121 +851,31 @@ h6 { text-decoration: none; } h1 { - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-weight: 600; - font-size: 3.90625rem; - color: #2e2d29; - line-height: 1.2564102564; } - @media only screen and (min-width: 576px) { - h1 { - font-size: 3.90625rem; } } - @media only screen and (min-width: 768px) { - h1 { - font-size: 4.39453125rem; } } - @media only screen and (min-width: 1024px) { - h1 { - font-size: 4.39453125rem; } } - @media only screen and (min-width: 1500px) { - h1 { - font-size: 4.638671875rem; } } + font-size: 4.3rem; + font-weight: 600; } h1:first-child { margin-top: 0; } h2 { - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-weight: 600; - font-size: 3.125rem; - color: #2e2d29; - line-height: 1.248; } - @media only screen and (min-width: 576px) { - h2 { - font-size: 3.125rem; } } - @media only screen and (min-width: 768px) { - h2 { - font-size: 3.515625rem; } } - @media only screen and (min-width: 1024px) { - h2 { - font-size: 3.515625rem; } } - @media only screen and (min-width: 1500px) { - h2 { - font-size: 3.7109375rem; } } + font-size: 3.3rem; + font-weight: 600; } h3 { - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-weight: 600; - font-size: 2.5rem; - color: #2e2d29; - line-height: 1.24; } - @media only screen and (min-width: 576px) { - h3 { - font-size: 2.5rem; } } - @media only screen and (min-width: 768px) { - h3 { - font-size: 2.8125rem; } } - @media only screen and (min-width: 1024px) { - h3 { - font-size: 2.8125rem; } } - @media only screen and (min-width: 1500px) { - h3 { - font-size: 2.96875rem; } } + font-size: 2.3rem; + font-weight: 600; } h4 { - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-weight: 600; font-size: 2rem; - color: #2e2d29; - line-height: 1.3; } - @media only screen and (min-width: 576px) { - h4 { - font-size: 2rem; } } - @media only screen and (min-width: 768px) { - h4 { - font-size: 2.25rem; } } - @media only screen and (min-width: 1024px) { - h4 { - font-size: 2.25rem; } } - @media only screen and (min-width: 1500px) { - h4 { - font-size: 2.375rem; } } + font-weight: 600; } h5 { - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-weight: 600; - font-size: 1.6rem; - color: #2e2d29; - line-height: 1.3125; } - @media only screen and (min-width: 576px) { - h5 { - font-size: 1.6rem; } } - @media only screen and (min-width: 768px) { - h5 { - font-size: 1.8rem; } } - @media only screen and (min-width: 1024px) { - h5 { - font-size: 1.8rem; } } - @media only screen and (min-width: 1500px) { - h5 { - font-size: 1.9rem; } } + font-size: 1.8rem; + font-weight: 600; } h6 { - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-weight: 600; - font-size: 1.28rem; - color: #2e2d29; - line-height: 1.3076923077; + font-size: 1.6rem; + font-weight: 400; text-transform: uppercase; } - @media only screen and (min-width: 576px) { - h6 { - font-size: 1.28rem; } } - @media only screen and (min-width: 768px) { - h6 { - font-size: 1.44rem; } } - @media only screen and (min-width: 1024px) { - h6 { - font-size: 1.44rem; } } - @media only screen and (min-width: 1500px) { - h6 { - font-size: 1.52rem; } } cite, var, @@ -1056,108 +883,49 @@ address, dfn { font-style: normal; } -.su-sans p, -.su-sans a, -.su-sans li, -.su-sans span { +.su-sans { font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } -.su-sans a { - border-bottom: none; - font-weight: 600; } +.su-serif { + font-family: "Source Serif Pro", "Georgia", "Times", "Times New Roman", serif; } -.su-serif p, -.su-serif a, -.su-serif li, -.su-serif span { - font-family: "Crimson Text", "Georgia", "Times", "Times New Roman", serif; } - -.su-slab p, -.su-slab a, -.su-slab li, -.su-slab span { +.su-slab { font-family: "Roboto Slab", "Georgia", "Times", "Times New Roman", serif; } +.su-handwriting { + font-family: "Kalam", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } + .su-font-lead { - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-weight: 400; - font-size: 3.125rem; - color: #2e2d29; - line-height: 1.504; + font-size: 2.3rem; + font-weight: 200; + line-height: 1.5; max-width: 85rem; } - @media only screen and (min-width: 576px) { - .su-font-lead { - font-size: 3.125rem; } } - @media only screen and (min-width: 768px) { - .su-font-lead { - font-size: 3.515625rem; } } - @media only screen and (min-width: 1024px) { - .su-font-lead { - font-size: 3.515625rem; } } - @media only screen and (min-width: 1500px) { - .su-font-lead { - font-size: 3.7109375rem; } } .su-font-splash { - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-size: 2.3rem; font-weight: 600; - font-size: 3.90625rem; - color: #2e2d29; - line-height: 1.2564102564; margin-bottom: 0; } @media only screen and (min-width: 576px) { .su-font-splash { - font-size: 3.90625rem; } } + font-size: 4.3rem; + font-weight: 600; } + .su-font-splash:first-child { + margin-top: 0; } } @media only screen and (min-width: 768px) { .su-font-splash { - font-size: 4.39453125rem; } } - @media only screen and (min-width: 1024px) { - .su-font-splash { - font-size: 4.39453125rem; } } - @media only screen and (min-width: 1500px) { - .su-font-splash { - font-size: 4.638671875rem; } } + font-size: 5.5rem; + font-weight: 600; } } .su-caption { - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-weight: 400; - font-size: 1.6rem; - color: #2e2d29; - line-height: 1.3125; - font-style: italic; + color: #4d4f53; + font-size: 1.7rem; margin-top: 0; } - @media only screen and (min-width: 576px) { - .su-caption { - font-size: 1.6rem; } } - @media only screen and (min-width: 768px) { - .su-caption { - font-size: 1.8rem; } } - @media only screen and (min-width: 1024px) { - .su-caption { - font-size: 1.8rem; } } - @media only screen and (min-width: 1500px) { - .su-caption { - font-size: 1.9rem; } } .su-credits { - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-weight: 400; - font-size: 1.6rem; - color: #2e2d29; - line-height: 1.3125; + color: #4d4f53; + font-size: 1.7rem; + font-style: italic; margin-top: 0; } - @media only screen and (min-width: 576px) { - .su-credits { - font-size: 1.6rem; } } - @media only screen and (min-width: 768px) { - .su-credits { - font-size: 1.8rem; } } - @media only screen and (min-width: 1024px) { - .su-credits { - font-size: 1.8rem; } } - @media only screen and (min-width: 1500px) { - .su-credits { - font-size: 1.9rem; } } .centered-container { display: -ms-grid; @@ -1903,7 +1671,6 @@ dfn { .su-alert .su-alert__body .su-alert__heading { margin-top: 0.3rem; } } .su-alert .su-alert__body .su-alert__text { - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; margin-top: 0; margin-bottom: 0; } @@ -2523,6 +2290,85 @@ button, .global-footer .global-footer__copyright { text-align: left; } } +.su-hero { + position: relative; } + @media only screen and (min-width: 768px) { + .su-hero { + display: flex; + flex-direction: column; + justify-content: center; + min-height: 320px; } } + @media only screen and (min-width: 1024px) { + .su-hero { + min-height: 409px; } } + @media only screen and (min-width: 1500px) { + .su-hero { + min-height: 520px; } } + +.su-hero__media { + background: #2e2d29; + height: 100%; + width: 100%; } + @media only screen and (min-width: 768px) { + .su-hero__media { + min-height: 320px; + position: absolute; } } + @media only screen and (min-width: 1024px) { + .su-hero__media { + min-height: 409px; + position: absolute; } } + @media only screen and (min-width: 1500px) { + .su-hero__media { + min-height: 520px; + position: absolute; } } + .su-hero__media img, + .su-hero__media picture { + height: 100%; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: 50% 50%; + object-position: 50% 50%; + width: 100%; } + +.su-hero__card { + background: #ffffff; + position: relative; + z-index: 10; } + @media only screen and (min-width: 768px) { + .su-hero__card { + margin-top: 45px; + margin-bottom: 45px; + left: 45px; + max-width: 400px; } } + @media only screen and (min-width: 1024px) { + .su-hero__card { + max-width: 450px; } } + @media only screen and (min-width: 1500px) { + .su-hero__card { + margin-top: 96px; + margin-bottom: 0; + bottom: 48px; + left: 48px; + max-width: 450px; + top: auto; } } + +.su-hero--youtube { + min-height: 315px; } + @media only screen and (min-width: 768px) { + .su-hero--youtube { + min-height: 640px; } } + @media only screen and (min-width: 1024px) { + .su-hero--youtube { + min-height: 640px; } } + @media only screen and (min-width: 1500px) { + .su-hero--youtube { + min-height: 728px; } } + .su-hero--youtube .su-hero__media iframe { + width: 100%; } + @media only screen and (min-width: 768px) { + .su-hero--youtube .su-hero__media iframe { + height: 100%; } } + .su-link { color: #b1040e; text-decoration: underline; } @@ -2604,7 +2450,7 @@ button, .su-link--more:hover::after { color: #2e2d29; } -.logo { +.su-logo { display: inline-block; font-family: Stanford, 'Source Serif Pro', Georgia, Times, 'Times New Roman', serif; font-style: normal; diff --git a/core/fonts/Stanford.ttf b/core/fonts/Stanford.ttf deleted file mode 100644 index cd15ade2a..000000000 Binary files a/core/fonts/Stanford.ttf and /dev/null differ diff --git a/core/fonts/Stanford.woff b/core/fonts/Stanford.woff deleted file mode 100644 index 8fa1b67b0..000000000 Binary files a/core/fonts/Stanford.woff and /dev/null differ diff --git a/core/fonts/crimsontext-bold-webfont.ttf b/core/fonts/crimsontext-bold-webfont.ttf deleted file mode 100755 index 783197a82..000000000 Binary files a/core/fonts/crimsontext-bold-webfont.ttf and /dev/null differ diff --git a/core/fonts/crimsontext-bold-webfont.woff b/core/fonts/crimsontext-bold-webfont.woff deleted file mode 100755 index a8450b2b5..000000000 Binary files a/core/fonts/crimsontext-bold-webfont.woff and /dev/null differ diff --git a/core/fonts/crimsontext-bolditalic-webfont.ttf b/core/fonts/crimsontext-bolditalic-webfont.ttf deleted file mode 100755 index 4ecef6f45..000000000 Binary files a/core/fonts/crimsontext-bolditalic-webfont.ttf and /dev/null differ diff --git a/core/fonts/crimsontext-bolditalic-webfont.woff b/core/fonts/crimsontext-bolditalic-webfont.woff deleted file mode 100755 index 32bc64e4b..000000000 Binary files a/core/fonts/crimsontext-bolditalic-webfont.woff and /dev/null differ diff --git a/core/fonts/crimsontext-regular-webfont.ttf b/core/fonts/crimsontext-regular-webfont.ttf deleted file mode 100755 index 67acd706b..000000000 Binary files a/core/fonts/crimsontext-regular-webfont.ttf and /dev/null differ diff --git a/core/fonts/crimsontext-regular-webfont.woff b/core/fonts/crimsontext-regular-webfont.woff deleted file mode 100755 index e9fe6e55e..000000000 Binary files a/core/fonts/crimsontext-regular-webfont.woff and /dev/null differ diff --git a/core/fonts/crimsontext-regularitalic-webfont.ttf b/core/fonts/crimsontext-regularitalic-webfont.ttf deleted file mode 100755 index 036b34046..000000000 Binary files a/core/fonts/crimsontext-regularitalic-webfont.ttf and /dev/null differ diff --git a/core/fonts/crimsontext-regularitalic-webfont.woff b/core/fonts/crimsontext-regularitalic-webfont.woff deleted file mode 100755 index 7a259354e..000000000 Binary files a/core/fonts/crimsontext-regularitalic-webfont.woff and /dev/null differ diff --git a/core/fonts/crimsontext-semibold-webfont.ttf b/core/fonts/crimsontext-semibold-webfont.ttf deleted file mode 100755 index 8569ad04f..000000000 Binary files a/core/fonts/crimsontext-semibold-webfont.ttf and /dev/null differ diff --git a/core/fonts/crimsontext-semibold-webfont.woff b/core/fonts/crimsontext-semibold-webfont.woff deleted file mode 100755 index 127acbc4b..000000000 Binary files a/core/fonts/crimsontext-semibold-webfont.woff and /dev/null differ diff --git a/core/fonts/crimsontext-semiboldItalic-webfont.ttf b/core/fonts/crimsontext-semiboldItalic-webfont.ttf deleted file mode 100755 index 5f04d7f49..000000000 Binary files a/core/fonts/crimsontext-semiboldItalic-webfont.ttf and /dev/null differ diff --git a/core/fonts/crimsontext-semiboldItalic-webfont.woff b/core/fonts/crimsontext-semiboldItalic-webfont.woff deleted file mode 100755 index 9a7dc7a31..000000000 Binary files a/core/fonts/crimsontext-semiboldItalic-webfont.woff and /dev/null differ diff --git a/core/fonts/robotoslab-bold-webfont.ttf b/core/fonts/robotoslab-bold-webfont.ttf deleted file mode 100755 index df5d1df27..000000000 Binary files a/core/fonts/robotoslab-bold-webfont.ttf and /dev/null differ diff --git a/core/fonts/robotoslab-bold-webfont.woff b/core/fonts/robotoslab-bold-webfont.woff deleted file mode 100755 index bab4a7ea4..000000000 Binary files a/core/fonts/robotoslab-bold-webfont.woff and /dev/null differ diff --git a/core/fonts/robotoslab-light-webfont.ttf b/core/fonts/robotoslab-light-webfont.ttf deleted file mode 100755 index ccb99cd02..000000000 Binary files a/core/fonts/robotoslab-light-webfont.ttf and /dev/null differ diff --git a/core/fonts/robotoslab-light-webfont.woff b/core/fonts/robotoslab-light-webfont.woff deleted file mode 100755 index 005344dd4..000000000 Binary files a/core/fonts/robotoslab-light-webfont.woff and /dev/null differ diff --git a/core/fonts/robotoslab-regular-webfont.ttf b/core/fonts/robotoslab-regular-webfont.ttf deleted file mode 100755 index eb52a7907..000000000 Binary files a/core/fonts/robotoslab-regular-webfont.ttf and /dev/null differ diff --git a/core/fonts/robotoslab-regular-webfont.woff b/core/fonts/robotoslab-regular-webfont.woff deleted file mode 100755 index afb395d69..000000000 Binary files a/core/fonts/robotoslab-regular-webfont.woff and /dev/null differ diff --git a/core/fonts/robotoslab-thin-webfont.ttf b/core/fonts/robotoslab-thin-webfont.ttf deleted file mode 100755 index fee11da17..000000000 Binary files a/core/fonts/robotoslab-thin-webfont.ttf and /dev/null differ diff --git a/core/fonts/robotoslab-thin-webfont.woff b/core/fonts/robotoslab-thin-webfont.woff deleted file mode 100755 index 54d5ce420..000000000 Binary files a/core/fonts/robotoslab-thin-webfont.woff and /dev/null differ diff --git a/core/fonts/sourcesanspro-black-webfont.ttf b/core/fonts/sourcesanspro-black-webfont.ttf deleted file mode 100755 index 7ea02609e..000000000 Binary files a/core/fonts/sourcesanspro-black-webfont.ttf and /dev/null differ diff --git a/core/fonts/sourcesanspro-blackitalic-webfont.ttf b/core/fonts/sourcesanspro-blackitalic-webfont.ttf deleted file mode 100755 index e1a74827c..000000000 Binary files a/core/fonts/sourcesanspro-blackitalic-webfont.ttf and /dev/null differ diff --git a/core/fonts/sourcesanspro-bold-webfont.eot b/core/fonts/sourcesanspro-bold-webfont.eot deleted file mode 100644 index f031b206e..000000000 Binary files a/core/fonts/sourcesanspro-bold-webfont.eot and /dev/null differ diff --git a/core/fonts/sourcesanspro-bold-webfont.ttf b/core/fonts/sourcesanspro-bold-webfont.ttf deleted file mode 100644 index 02ae55e6e..000000000 Binary files a/core/fonts/sourcesanspro-bold-webfont.ttf and /dev/null differ diff --git a/core/fonts/sourcesanspro-bold-webfont.woff b/core/fonts/sourcesanspro-bold-webfont.woff deleted file mode 100644 index 1985bc0f1..000000000 Binary files a/core/fonts/sourcesanspro-bold-webfont.woff and /dev/null differ diff --git a/core/fonts/sourcesanspro-bold-webfont.woff2 b/core/fonts/sourcesanspro-bold-webfont.woff2 deleted file mode 100644 index 59cbda519..000000000 Binary files a/core/fonts/sourcesanspro-bold-webfont.woff2 and /dev/null differ diff --git a/core/fonts/sourcesanspro-bolditalic-webfont.ttf b/core/fonts/sourcesanspro-bolditalic-webfont.ttf deleted file mode 100755 index 5c00b64fa..000000000 Binary files a/core/fonts/sourcesanspro-bolditalic-webfont.ttf and /dev/null differ diff --git a/core/fonts/sourcesanspro-extralight-webfont.ttf b/core/fonts/sourcesanspro-extralight-webfont.ttf deleted file mode 100755 index f1da6b2be..000000000 Binary files a/core/fonts/sourcesanspro-extralight-webfont.ttf and /dev/null differ diff --git a/core/fonts/sourcesanspro-extralightitalic-webfont.ttf b/core/fonts/sourcesanspro-extralightitalic-webfont.ttf deleted file mode 100755 index 15f7344cc..000000000 Binary files a/core/fonts/sourcesanspro-extralightitalic-webfont.ttf and /dev/null differ diff --git a/core/fonts/sourcesanspro-light-webfont.eot b/core/fonts/sourcesanspro-light-webfont.eot deleted file mode 100644 index 55d1c876c..000000000 Binary files a/core/fonts/sourcesanspro-light-webfont.eot and /dev/null differ diff --git a/core/fonts/sourcesanspro-light-webfont.ttf b/core/fonts/sourcesanspro-light-webfont.ttf deleted file mode 100644 index a4c674a00..000000000 Binary files a/core/fonts/sourcesanspro-light-webfont.ttf and /dev/null differ diff --git a/core/fonts/sourcesanspro-light-webfont.woff b/core/fonts/sourcesanspro-light-webfont.woff deleted file mode 100644 index eb2fd5ae6..000000000 Binary files a/core/fonts/sourcesanspro-light-webfont.woff and /dev/null differ diff --git a/core/fonts/sourcesanspro-light-webfont.woff2 b/core/fonts/sourcesanspro-light-webfont.woff2 deleted file mode 100644 index 091b8079a..000000000 Binary files a/core/fonts/sourcesanspro-light-webfont.woff2 and /dev/null differ diff --git a/core/fonts/sourcesanspro-lightitalic-webfont.ttf b/core/fonts/sourcesanspro-lightitalic-webfont.ttf deleted file mode 100755 index b78f1b0f0..000000000 Binary files a/core/fonts/sourcesanspro-lightitalic-webfont.ttf and /dev/null differ diff --git a/core/fonts/sourcesanspro-regular-webfont.eot b/core/fonts/sourcesanspro-regular-webfont.eot deleted file mode 100644 index cddebbca5..000000000 Binary files a/core/fonts/sourcesanspro-regular-webfont.eot and /dev/null differ diff --git a/core/fonts/sourcesanspro-regular-webfont.ttf b/core/fonts/sourcesanspro-regular-webfont.ttf deleted file mode 100644 index ac42fa1c2..000000000 Binary files a/core/fonts/sourcesanspro-regular-webfont.ttf and /dev/null differ diff --git a/core/fonts/sourcesanspro-regular-webfont.woff b/core/fonts/sourcesanspro-regular-webfont.woff deleted file mode 100644 index e057c48e8..000000000 Binary files a/core/fonts/sourcesanspro-regular-webfont.woff and /dev/null differ diff --git a/core/fonts/sourcesanspro-regular-webfont.woff2 b/core/fonts/sourcesanspro-regular-webfont.woff2 deleted file mode 100644 index 43ec601dc..000000000 Binary files a/core/fonts/sourcesanspro-regular-webfont.woff2 and /dev/null differ diff --git a/core/fonts/sourcesanspro-regularitalic-webfont.eot b/core/fonts/sourcesanspro-regularitalic-webfont.eot deleted file mode 100644 index e01ae4de0..000000000 Binary files a/core/fonts/sourcesanspro-regularitalic-webfont.eot and /dev/null differ diff --git a/core/fonts/sourcesanspro-regularitalic-webfont.ttf b/core/fonts/sourcesanspro-regularitalic-webfont.ttf deleted file mode 100644 index b513caef9..000000000 Binary files a/core/fonts/sourcesanspro-regularitalic-webfont.ttf and /dev/null differ diff --git a/core/fonts/sourcesanspro-regularitalic-webfont.woff b/core/fonts/sourcesanspro-regularitalic-webfont.woff deleted file mode 100644 index a512221dd..000000000 Binary files a/core/fonts/sourcesanspro-regularitalic-webfont.woff and /dev/null differ diff --git a/core/fonts/sourcesanspro-regularitalic-webfont.woff2 b/core/fonts/sourcesanspro-regularitalic-webfont.woff2 deleted file mode 100644 index c1a6d9f1e..000000000 Binary files a/core/fonts/sourcesanspro-regularitalic-webfont.woff2 and /dev/null differ diff --git a/core/fonts/sourcesanspro-semibold-webfont.ttf b/core/fonts/sourcesanspro-semibold-webfont.ttf deleted file mode 100755 index ac3e0d19a..000000000 Binary files a/core/fonts/sourcesanspro-semibold-webfont.ttf and /dev/null differ diff --git a/core/fonts/sourcesanspro-semibolditalic-webfont.ttf b/core/fonts/sourcesanspro-semibolditalic-webfont.ttf deleted file mode 100755 index b0737bb31..000000000 Binary files a/core/fonts/sourcesanspro-semibolditalic-webfont.ttf and /dev/null differ diff --git a/core/img/arrow-down-hover.png b/core/img/arrow-down-hover.png deleted file mode 100644 index e2b317484..000000000 Binary files a/core/img/arrow-down-hover.png and /dev/null differ diff --git a/core/img/arrow-down-hover.svg b/core/img/arrow-down-hover.svg deleted file mode 100644 index 4a264e17f..000000000 --- a/core/img/arrow-down-hover.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - diff --git a/core/img/circle.png b/core/img/circle.png deleted file mode 100644 index c9e6bffc4..000000000 Binary files a/core/img/circle.png and /dev/null differ diff --git a/core/img/close.png b/core/img/close.png deleted file mode 100644 index 8388fd5f9..000000000 Binary files a/core/img/close.png and /dev/null differ diff --git a/core/img/close.svg b/core/img/close.svg deleted file mode 100644 index d9f59132f..000000000 --- a/core/img/close.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/img/minus.png b/core/img/minus.png deleted file mode 100644 index 04b5f27bf..000000000 Binary files a/core/img/minus.png and /dev/null differ diff --git a/core/img/minus.svg b/core/img/minus.svg deleted file mode 100644 index 43c91c3ee..000000000 --- a/core/img/minus.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - diff --git a/core/img/plus.png b/core/img/plus.png deleted file mode 100644 index 2909d94f0..000000000 Binary files a/core/img/plus.png and /dev/null differ diff --git a/core/img/plus.svg b/core/img/plus.svg deleted file mode 100644 index d893087ca..000000000 --- a/core/img/plus.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - diff --git a/core/scss/components/hero/_hero--youtube.scss b/core/scss/components/hero/_hero--youtube.scss new file mode 100644 index 000000000..21441ffe5 --- /dev/null +++ b/core/scss/components/hero/_hero--youtube.scss @@ -0,0 +1,39 @@ +@charset "UTF-8"; + +// Local variable not for changing. +$_su-hero-height: ( + 'xs': 315px, + 'sm': 315px, + 'md': 640px, + 'lg': 640px, + 'xl': 728px +); + +.su-hero--youtube { + + @media #{$breakpoint-md} { + min-height: map-get($_su-hero-height, 'md'); + } + + @media #{$breakpoint-lg} { + min-height: map-get($_su-hero-height, 'lg'); + } + + @media #{$breakpoint-xl} { + min-height: map-get($_su-hero-height, 'xl'); + } + + min-height: map-get($_su-hero-height, 'xs'); + + .su-hero__media { + iframe { + + @media #{$breakpoint-md} { + height: 100%; + } + + width: 100%; + } + } + +} diff --git a/core/scss/components/hero/_hero.scss b/core/scss/components/hero/_hero.scss new file mode 100644 index 000000000..c52aac337 --- /dev/null +++ b/core/scss/components/hero/_hero.scss @@ -0,0 +1,100 @@ +@charset "UTF-8"; + +// Local variable not for changing. +$_su-hero-height: ( + 'xs': 208px, + 'sm': 208px, + 'md': 320px, + 'lg': 409px, + 'xl': 520px +); + +// +// Hero +// +// A hero block that can be either an image or a video with some overlay text. +// +// Experimental: The youtube player has not been finished. +// +// .su-hero--youtube - A youtube video in the background. +// +// Markup: ../templates/components/hero/hero.twig +// +// Style guide: Components.Hero +// +.su-hero { + position: relative; + + @media #{$breakpoint-md} { + display: flex; + flex-direction: column; + justify-content: center; + min-height: map-get($_su-hero-height, 'md'); + } + + @media #{$breakpoint-lg} { + min-height: map-get($_su-hero-height, 'lg'); + } + + @media #{$breakpoint-xl} { + min-height: map-get($_su-hero-height, 'xl'); + } +} + +// The media element. +// Big tall wide and in a little bid of a shade. +.su-hero__media { + background: $color-black; + height: 100%; + width: 100%; + + @media #{$breakpoint-md} { + min-height: map-get($_su-hero-height, 'md'); + position: absolute; + } + + @media #{$breakpoint-lg} { + min-height: map-get($_su-hero-height, 'lg'); + position: absolute; + } + + @media #{$breakpoint-xl} { + min-height: map-get($_su-hero-height, 'xl'); + position: absolute; + } + + img, + picture { + height: 100%; + object-fit: cover; + object-position: 50% 50%; + width: 100%; + } + +} + +// The content +.su-hero__card { + background: $color-white; + position: relative; + z-index: 10; + + @media #{$breakpoint-md} { + @include margin(45px null); + left: 45px; + max-width: 400px; + } + + @media #{$breakpoint-lg} { + max-width: 450px; + } + + @media #{$breakpoint-xl} { + @include margin(96px null 0 null); + bottom: 48px; + left: 48px; + max-width: 450px; + top: auto; + } + +} diff --git a/core/scss/components/hero/index.scss b/core/scss/components/hero/index.scss new file mode 100644 index 000000000..2d98f0fcf --- /dev/null +++ b/core/scss/components/hero/index.scss @@ -0,0 +1,7 @@ +@charset "UTF-8"; + +// Roll up file. + +@import + 'hero', + 'hero--youtube'; diff --git a/core/scss/components/index.scss b/core/scss/components/index.scss index 2ebc2bbad..2da1c38d0 100644 --- a/core/scss/components/index.scss +++ b/core/scss/components/index.scss @@ -13,6 +13,7 @@ 'card/index', 'cta/index', 'global-footer/index', + 'hero/index', 'link/index', 'logo/index', 'quote/index', diff --git a/core/scss/components/logo/_logo.scss b/core/scss/components/logo/_logo.scss index d9e3e2fc3..162fd15f9 100644 --- a/core/scss/components/logo/_logo.scss +++ b/core/scss/components/logo/_logo.scss @@ -10,6 +10,6 @@ // // Style guide: Components.Logo // -.logo { +.su-logo { @include logo; } diff --git a/core/scss/core/fonts/_base.scss b/core/scss/core/fonts/_base.scss deleted file mode 100644 index 78d11c769..000000000 --- a/core/scss/core/fonts/_base.scss +++ /dev/null @@ -1,216 +0,0 @@ -@charset "UTF-8"; - -// -// Fonts -// - -// Source Sans Pro. -@include font-face( - 'Source Sans Pro', - '#{$font-path}/sourcesanspro-extralight-webfont', - ('ttf') -) { - font-style: normal; - font-weight: 200; -}; - -@include font-face( - 'Source Sans Pro', - '#{$font-path}/sourcesanspro-extralightitalic-webfont', - ('ttf') -) { - font-style: italic; - font-weight: 200; -}; - -@include font-face( - 'Source Sans Pro', - '#{$font-path}/sourcesanspro-light-webfont', - ('eot', 'woff2', 'woff', 'ttf') -) { - font-style: normal; - font-weight: 300; -}; - -@include font-face( - 'Source Sans Pro', - '#{$font-path}/sourcesanspro-lightitalic-webfont', - ('ttf') -) { - font-style: italic; - font-weight: 300; -}; - -@include font-face( - 'Source Sans Pro', - '#{$font-path}/sourcesanspro-regular-webfont', - ('eot', 'woff2', 'woff', 'ttf') -) { - font-style: normal; - font-weight: 400; -}; - -@include font-face( - 'Source Sans Pro', - '#{$font-path}/sourcesanspro-regularitalic-webfont', - ('ttf') -) { - font-style: italic; - font-weight: 400; -}; - -@include font-face( - 'Source Sans Pro', - '#{$font-path}/sourcesanspro-semibold-webfont', - ('ttf') -) { - font-style: normal; - font-weight: 600; -}; - -@include font-face( - 'Source Sans Pro', - '#{$font-path}/sourcesanspro-semibolditalic-webfont', - ('ttf') -) { - font-style: italic; - font-weight: 600; -}; - -@include font-face( - 'Source Sans Pro', - '#{$font-path}/sourcesanspro-bold-webfont', - ('eot', 'woff2', 'woff', 'ttf') -) { - font-style: normal; - font-weight: 700; -}; - -@include font-face( - 'Source Sans Pro', - '#{$font-path}/sourcesanspro-bolditalic-webfont', - ('ttf') -) { - font-style: italic; - font-weight: 700; -}; - -@include font-face( - 'Source Sans Pro', - '#{$font-path}/sourcesanspro-black-webfont', - ('ttf') -) { - font-style: normal; - font-weight: 900; -}; - -@include font-face( - 'Source Sans Pro', - '#{$font-path}/sourcesanspro-blackitalic-webfont', - ('ttf') -) { - font-style: italic; - font-weight: 900; -}; - -// Crimson Text. -@include font-face( - 'Crimson Text', - '#{$font-path}/crimsontext-regular-webfont', - ('woff', 'ttf') -) { - font-style: normal; - font-weight: 400; -}; - -@include font-face( - 'Crimson Text', - '#{$font-path}/crimsontext-regularitalic-webfont', - ('woff', 'ttf') -) { - font-style: italic; - font-weight: 400; -}; - -@include font-face( - 'Crimson Text', - '#{$font-path}/crimsontext-semibold-webfont', - ('woff', 'ttf') -) { - font-style: normal; - font-weight: 600; -}; - -@include font-face( - 'Crimson Text', - '#{$font-path}/crimsontext-semibolditalic-webfont', - ('woff', 'ttf') -) { - font-style: italic; - font-weight: 600; -}; - -@include font-face( - 'Crimson Text', - '#{$font-path}/crimsontext-bold-webfont', - ('woff', 'ttf') -) { - font-style: normal; - font-weight: 700; -}; - -@include font-face( - 'Crimson Text', - '#{$font-path}/crimsontext-bolditalic-webfont', - ('woff', 'ttf') -) { - font-style: italic; - font-weight: 700; -}; - -// Roboto Slab. -@include font-face( - 'Roboto Slab', - '#{$font-path}/robotoslab-thin-webfont', - ('woff', 'ttf') -) { - font-style: normal; - font-weight: 100; -}; - -@include font-face( - 'Roboto Slab', - '#{$font-path}/robotoslab-light-webfont', - ('woff', 'ttf') -) { - font-style: normal; - font-weight: 300; -}; - -@include font-face( - 'Roboto Slab', - '#{$font-path}/robotoslab-regular-webfont', - ('woff', 'ttf') -) { - font-style: normal; - font-weight: 400; -}; - -@include font-face( - 'Roboto Slab', - '#{$font-path}/robotoslab-bold-webfont', - ('woff', 'ttf') -) { - font-style: normal; - font-weight: 700; -}; - -// Stanford. -@include font-face( - 'Stanford', - '#{$font-path}/stanford', - ('woff', 'ttf') -) { - font-style: normal; - font-weight: 300; -}; diff --git a/core/scss/core/fonts/_fonts.scss b/core/scss/core/fonts/_fonts.scss new file mode 100644 index 000000000..f1d96a5f8 --- /dev/null +++ b/core/scss/core/fonts/_fonts.scss @@ -0,0 +1,110 @@ +@charset "UTF-8"; + +// +// Fonts +// + +// Sans font: Source Sans Pro. +@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i'); + +// Serif font: Source Serif Pro. +@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,600,700'); + +// Slab font: Roboto Slab. +@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700'); + +// Script font: Kalam. +@import url('https://fonts.googleapis.com/css?family=Kalam:300,400,700'); + +// Some of the Source Serif Pro fonts are not yet available on Google, so we +// are hosting and loading from our AWS bucket. +@include font-face( + "Source Serif Pro", + "https://www-media.stanford.edu/assets/fonts/sourceserifpro-extralight-webfont", + ("woff") +) { + font-style: normal; + font-weight: 200; +} + +@include font-face( + "Source Serif Pro", + "https://www-media.stanford.edu/assets/fonts/sourceserifpro-extralightitalic-webfont", + ("woff") +) { + font-style: italic; + font-weight: 200; +} + +@include font-face( + "Source Serif Pro", + "https://www-media.stanford.edu/assets/fonts/sourceserifpro-light-webfont", + ("woff") +) { + font-style: normal; + font-weight: 300; +} + +@include font-face( + "Source Serif Pro", + "https://www-media.stanford.edu/assets/fonts/sourceserifpro-lightitalic-webfont", + ("woff") +) { + font-style: italic; + font-weight: 300; +} + +@include font-face( + "Source Serif Pro", + "https://www-media.stanford.edu/assets/fonts/sourceserifpro-regularitalic-webfont", + ("woff") +) { + font-style: italic; + font-weight: 400; +} + +@include font-face( + "Source Serif Pro", + "https://www-media.stanford.edu/assets/fonts/sourceserifpro-semibolditalic-webfont", + ("woff") +) { + font-style: italic; + font-weight: 600; +} + +@include font-face( + "Source Serif Pro", + "https://www-media.stanford.edu/assets/fonts/sourceserifpro-bolditalic-webfont", + ("woff") +) { + font-style: italic; + font-weight: 700; +} + +@include font-face( + "Source Serif Pro", + "https://www-media.stanford.edu/assets/fonts/sourceserifpro-black-webfont", + ("woff") +) { + font-style: normal; + font-weight: 900; +} + +@include font-face( + "Source Serif Pro", + "https://www-media.stanford.edu/assets/fonts/sourceserifpro-blackitalic-webfont", + ("woff") +) { + font-style: italic; + font-weight: 900; +} + +// Ligature font: Stanford. +// The Stanford font is being hosted and loaded from our AWS bucket. +@include font-face( + "Stanford", + "https://www-media.stanford.edu/assets/fonts/stanford", + ("woff", "ttf") +) { + font-weight: 300; +} diff --git a/core/scss/core/fonts/index.scss b/core/scss/core/fonts/index.scss index 9f74c650c..eccbe32ca 100644 --- a/core/scss/core/fonts/index.scss +++ b/core/scss/core/fonts/index.scss @@ -5,4 +5,4 @@ /// @import - 'base'; + 'fonts'; diff --git a/core/scss/elements/input/_input.scss b/core/scss/elements/input/_input.scss index 0360c769e..a6fd08ffe 100644 --- a/core/scss/elements/input/_input.scss +++ b/core/scss/elements/input/_input.scss @@ -103,7 +103,7 @@ fieldset { line-height: 1.8rem; margin-right: 0.6em; text-indent: 0.15em; - vertical-align: middle\0; + vertical-align: middle; // Target IE 11 and below to vertically center inputs. width: 1.8rem; diff --git a/core/scss/elements/typography/_typography.scss b/core/scss/elements/typography/_typography.scss index 99a276d41..0c7c0896d 100644 --- a/core/scss/elements/typography/_typography.scss +++ b/core/scss/elements/typography/_typography.scss @@ -138,6 +138,10 @@ dfn { @include slab; } +.su-handwriting { + @include handwriting; +} + .su-font-lead { @include font-lead; } diff --git a/core/scss/utilities/mixins/alert/_alert.scss b/core/scss/utilities/mixins/alert/_alert.scss index 08fd1186c..1f1790ca6 100644 --- a/core/scss/utilities/mixins/alert/_alert.scss +++ b/core/scss/utilities/mixins/alert/_alert.scss @@ -63,7 +63,6 @@ } .su-alert__text { - font-family: $font-sans; @include margin(0 null); } } diff --git a/core/scss/utilities/mixins/typography/_handwriting.scss b/core/scss/utilities/mixins/typography/_handwriting.scss new file mode 100644 index 000000000..c9eb91db1 --- /dev/null +++ b/core/scss/utilities/mixins/typography/_handwriting.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; + +// +// @script +// +// Script font styling. +// +// Style guide: Mixins.Typography.script +// +@mixin handwriting { + font-family: $font-handwriting; +} diff --git a/core/scss/utilities/mixins/typography/_headings.scss b/core/scss/utilities/mixins/typography/_headings.scss index af1d7705c..31e2c0f71 100644 --- a/core/scss/utilities/mixins/typography/_headings.scss +++ b/core/scss/utilities/mixins/typography/_headings.scss @@ -9,7 +9,6 @@ // @mixin headings { clear: both; - font-family: $font-sans; line-height: $heading-line-height; @include margin(1.5em null 0.5em); @@ -26,6 +25,10 @@ font-family: $font-slab; } + .su-handwriting & { + font-family: $font-handwriting; + } + a { text-decoration: none; } diff --git a/core/scss/utilities/mixins/typography/_sans.scss b/core/scss/utilities/mixins/typography/_sans.scss index df24773d4..3f446ed95 100644 --- a/core/scss/utilities/mixins/typography/_sans.scss +++ b/core/scss/utilities/mixins/typography/_sans.scss @@ -8,15 +8,5 @@ // Style guide: Mixins.Typography.sans // @mixin sans { - p, - a, - li, - span { - font-family: $font-sans; - } - - a { - border-bottom: none; - font-weight: $font-bold; - } + font-family: $font-sans; } diff --git a/core/scss/utilities/mixins/typography/_serif.scss b/core/scss/utilities/mixins/typography/_serif.scss index b465e93ee..1407c63e6 100644 --- a/core/scss/utilities/mixins/typography/_serif.scss +++ b/core/scss/utilities/mixins/typography/_serif.scss @@ -8,10 +8,5 @@ // Style guide: Mixins.Typography.serif // @mixin serif { - p, - a, - li, - span { - font-family: $font-serif; - } + font-family: $font-serif; } diff --git a/core/scss/utilities/mixins/typography/_slab.scss b/core/scss/utilities/mixins/typography/_slab.scss index 0bc5bd382..191ca370c 100644 --- a/core/scss/utilities/mixins/typography/_slab.scss +++ b/core/scss/utilities/mixins/typography/_slab.scss @@ -8,10 +8,5 @@ // Style guide: Mixins.Typography.slab // @mixin slab { - p, - a, - li, - span { - font-family: $font-slab; - } + font-family: $font-slab; } diff --git a/core/scss/utilities/mixins/typography/index.scss b/core/scss/utilities/mixins/typography/index.scss index 2c3e9a1e2..431161360 100644 --- a/core/scss/utilities/mixins/typography/index.scss +++ b/core/scss/utilities/mixins/typography/index.scss @@ -16,6 +16,7 @@ 'font-splash', 'headings', 'sans', + 'handwriting', 'serif', 'slab', 'type-style'; diff --git a/core/scss/utilities/variables/core/_file-paths.scss b/core/scss/utilities/variables/core/_file-paths.scss index 11c2634dc..f1d6034fd 100644 --- a/core/scss/utilities/variables/core/_file-paths.scss +++ b/core/scss/utilities/variables/core/_file-paths.scss @@ -6,17 +6,6 @@ // Style guide: Variables.Core.Paths // -// -// $font-path -// -// Relative path to fonts directory on compile. -// -// Markup: $font-path: '../fonts' !default; -// -// Styleguide: Variables.Core.Paths.font -// -$font-path: '../fonts' !default; - // // $image-path // diff --git a/core/scss/utilities/variables/core/_typography.scss b/core/scss/utilities/variables/core/_typography.scss index a7f5886ea..fedcd2c7c 100644 --- a/core/scss/utilities/variables/core/_typography.scss +++ b/core/scss/utilities/variables/core/_typography.scss @@ -167,7 +167,7 @@ $lead-line-height: 1.5 !default; // // font-sans Font family. // -// Markup: $font-sans: 'Source Sans Pro', $helvetica !default; +// Markup: $font-sans: 'Source Sans Pro', $font-stack-helvetica !default; // // Style guide: Variables.Core.Typography.font-sans // @@ -178,23 +178,33 @@ $font-sans: 'Source Sans Pro', $font-stack-helvetica !default; // // font-serif Font family. // -// Markup: $font-serif: 'Crimson Text', $georgia !default; +// Markup: $font-serif: 'Source Serif Pro', $font-stack-georgia !default; // // Style guide: Variables.Core.Typography.font-serif // -$font-serif: 'Crimson Text', $font-stack-georgia !default; +$font-serif: 'Source Serif Pro', $font-stack-georgia !default; // // $font-slab // // font-slab Font family. // -// Markup: $font-slab: 'Roboto Slab', $georgia !default; +// Markup: $font-slab: 'Roboto Slab', $font-stack-georgia !default; // // Style guide: Variables.Core.Typography.font-slab // $font-slab: 'Roboto Slab', $font-stack-georgia !default; +// +// $font-handwriting +// +// font-script Font family. +// +// Markup: $font-handwriting: 'Kalam', $font-stack-helvetica !default; +// +// Style guide: Variables.Core.Typography.font-script +// +$font-handwriting: 'Kalam', $font-stack-helvetica !default; // // $font-x-light diff --git a/core/templates/components/hero/hero.json b/core/templates/components/hero/hero.json new file mode 100644 index 000000000..8f989135e --- /dev/null +++ b/core/templates/components/hero/hero.json @@ -0,0 +1,14 @@ +{ + "attributes": "", + "modifier_class": "", + "hero_image": "Example Hero Image", + "hero_media": "", + "hero_super_headline": "This is a super headline", + "hero_headline": "Headline goes here", + "hero_body": "

Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

", + "hero_cta_link": "https://stanford.edu", + "hero_cta_attributes": "", + "hero_cta_label": "CTA Link Label", + "hero_button_link": "https://stanford.edu", + "hero_button_label": "Button Label" +} diff --git a/core/templates/components/hero/hero.twig b/core/templates/components/hero/hero.twig new file mode 100644 index 000000000..c294feab0 --- /dev/null +++ b/core/templates/components/hero/hero.twig @@ -0,0 +1,54 @@ +{# +/** + * @file + * Hero Component + * + * A big graphic for use as a focal point or a large video. + * + * Available variables: + * - attributes: For additional HTML attributes not already provided. + * - modifier_class: Additional css classes to change look and behaviour. + * - hero_media: iframe or HTML5 video players + * - hero_image: A full HTML entity for an image. Can be img or picture. + * - hero_super_headline: Text heading + * - hero_headline: Text heading + * - hero_body: An open variable for anything. Generally this would be for + * WYSIWYG editor contents. + * - hero_cta_link: The href value for the cta field link + * - hero_cta_attributes: Any html attributes on the cta link that need to be + * added. For example: _target. + * - hero_cta_label: The clickable text for the CTA link + * - hero_button_link: The href property of the button component. + * - hero_button_label: The text label of the button component. + */ +#} + + + {# Hero Image or Video #} +
+ {% if 'su-hero--youtube' in modifier_class %} + {# Support for: iframe #} + {{ hero_media }} + {% else %} + {# Support for: img or picture #} + {{ hero_image}} + {% endif %} +
+ + {# We reuse the card component here. #} + {% include "@decanter/components/card/card.twig" with + { + "modifier_class": "su-hero__card", + "card_super_headline": hero_super_headline, + "card_headline": hero_headline, + "card_body": hero_body, + "card_cta_link": hero_cta_link, + "card_cta_attributes": hero_cta_attributes, + "card_cta_label": hero_cta_label, + "card_button_link": hero_button_link, + "card_button_label": hero_button_label, + } + only + %} + + diff --git a/core/templates/components/logo/logo.twig b/core/templates/components/logo/logo.twig index becbb9354..d332aca93 100644 --- a/core/templates/components/logo/logo.twig +++ b/core/templates/components/logo/logo.twig @@ -1,3 +1,3 @@ -