From 86b299cae2e9c4ebb280990e55fec89ed8be7bfc Mon Sep 17 00:00:00 2001 From: Sherakama Date: Sun, 10 Mar 2019 15:49:03 -0700 Subject: [PATCH 1/5] Update _alert--info.scss (#330) Link colors on alert boxes. --- core/css/decanter.css | 18 ++++++++++++++++++ core/scss/components/alert/_alert--error.scss | 8 ++++++++ core/scss/components/alert/_alert--info.scss | 8 ++++++++ .../scss/components/alert/_alert--success.scss | 8 ++++++++ .../scss/components/alert/_alert--warning.scss | 8 ++++++++ core/scss/components/alert/_alert.scss | 4 ++++ core/templates/components/alert/alert.json | 2 +- 7 files changed, 55 insertions(+), 1 deletion(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index f61967338..b942662df 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -6487,29 +6487,47 @@ dfn { .su-alert .su-alert__body .su-alert__text { margin-top: 0; margin-bottom: 0; } + .su-alert .su-alert__body a { + text-decoration: underline; } .su-alert--error { background-color: #b1040e; background-image: url("../img/alert-error.png"); background-image: url("../img/alert-error.svg"); color: #ffffff; } + .su-alert--error a { + color: #ffffff; } + .su-alert--error a:hover { + color: #dad7cb; } .su-alert--info { background-color: #00548f; background-image: url("../img/alert-info.png"); background-image: url("../img/alert-info.svg"); color: #ffffff; } + .su-alert--info a { + color: #ffffff; } + .su-alert--info a:hover { + color: #dad7cb; } .su-alert--success { background-color: #175e54; background-image: url("../img/alert-success.png"); background-image: url("../img/alert-success.svg"); color: #ffffff; } + .su-alert--success a { + color: #ffffff; } + .su-alert--success a:hover { + color: #dad7cb; } .su-alert--warning { background-color: #eaab00; background-image: url("../img/alert-warning.png"); background-image: url("../img/alert-warning.svg"); } + .su-alert--warning a { + color: #8c1515; } + .su-alert--warning a:hover { + color: #2e2d29; } .su-brand-bar { width: 100%; diff --git a/core/scss/components/alert/_alert--error.scss b/core/scss/components/alert/_alert--error.scss index d4f6752b0..698ae2cf3 100644 --- a/core/scss/components/alert/_alert--error.scss +++ b/core/scss/components/alert/_alert--error.scss @@ -6,4 +6,12 @@ background-image: url("#{$image-path}/alert-error.png"); background-image: url("#{$image-path}/alert-error.svg"); color: $color-white; + + a { + color: $color-white; + + &:hover { + color: $color-cloud; + } + } } diff --git a/core/scss/components/alert/_alert--info.scss b/core/scss/components/alert/_alert--info.scss index b2016c4e8..efd27bd13 100644 --- a/core/scss/components/alert/_alert--info.scss +++ b/core/scss/components/alert/_alert--info.scss @@ -6,4 +6,12 @@ background-image: url("#{$image-path}/alert-info.png"); background-image: url("#{$image-path}/alert-info.svg"); color: $color-white; + + a { + color: $color-white; + + &:hover { + color: $color-cloud; + } + } } diff --git a/core/scss/components/alert/_alert--success.scss b/core/scss/components/alert/_alert--success.scss index b458691fb..c7bd9dca0 100644 --- a/core/scss/components/alert/_alert--success.scss +++ b/core/scss/components/alert/_alert--success.scss @@ -6,4 +6,12 @@ background-image: url("#{$image-path}/alert-success.png"); background-image: url("#{$image-path}/alert-success.svg"); color: $color-white; + + a { + color: $color-white; + + &:hover { + color: $color-cloud; + } + } } diff --git a/core/scss/components/alert/_alert--warning.scss b/core/scss/components/alert/_alert--warning.scss index 38998a4d0..aeae5f5cf 100644 --- a/core/scss/components/alert/_alert--warning.scss +++ b/core/scss/components/alert/_alert--warning.scss @@ -5,4 +5,12 @@ background-color: map-get($alert-colors, 'warning'); background-image: url("#{$image-path}/alert-warning.png"); background-image: url("#{$image-path}/alert-warning.svg"); + + a { + color: $color-cardinal-red; + + &:hover { + color: $color-black; + } + } } diff --git a/core/scss/components/alert/_alert.scss b/core/scss/components/alert/_alert.scss index 03d79f897..8920ad7a5 100644 --- a/core/scss/components/alert/_alert.scss +++ b/core/scss/components/alert/_alert.scss @@ -53,5 +53,9 @@ .su-alert__text { @include margin(0 null); } + + a { + text-decoration: underline; + } } } diff --git a/core/templates/components/alert/alert.json b/core/templates/components/alert/alert.json index b5b14457f..2b8068f46 100644 --- a/core/templates/components/alert/alert.json +++ b/core/templates/components/alert/alert.json @@ -1,4 +1,4 @@ { "alert_header": "Alert Heading", - "alert_text": "This is the details of the alert message." + "alert_text": "This is the details of the alert message. This is a link within an alert." } From c9688ddd367218f1a7834c951dc049a1039dcd6a Mon Sep 17 00:00:00 2001 From: Sherakama Date: Wed, 13 Mar 2019 14:02:18 -0700 Subject: [PATCH 2/5] 5 Lines Lockup + Variants (#289) * add lockup options for desktop and mobile --- core/css/decanter.css | 943 +++++++++++++++--- .../components/lockup/_lockup--option-a.scss | 62 ++ .../components/lockup/_lockup--option-b.scss | 35 + .../components/lockup/_lockup--option-c.scss | 70 ++ .../components/lockup/_lockup--option-d.scss | 31 + .../components/lockup/_lockup--option-e.scss | 43 + .../components/lockup/_lockup--option-f.scss | 35 + .../components/lockup/_lockup--option-g.scss | 70 ++ .../components/lockup/_lockup--option-h.scss | 53 + .../components/lockup/_lockup--option-i.scss | 54 + .../components/lockup/_lockup--option-j.scss | 68 ++ .../components/lockup/_lockup--option-k.scss | 41 + .../components/lockup/_lockup--option-l.scss | 28 + .../components/lockup/_lockup--option-m.scss | 33 + .../components/lockup/_lockup--option-n.scss | 27 + .../components/lockup/_lockup--option-o.scss | 25 + .../components/lockup/_lockup--option-p.scss | 47 + .../components/lockup/_lockup--option-q.scss | 68 ++ .../components/lockup/_lockup--option-r.scss | 28 + .../components/lockup/_lockup--option-s.scss | 54 + .../components/lockup/_lockup--option-t.scss | 63 ++ .../components/lockup/_lockup--two-lines.scss | 76 -- core/scss/components/lockup/_lockup.scss | 166 +-- core/scss/components/lockup/index.scss | 21 +- core/scss/core/index.scss | 6 - core/templates/components/lockup/lockup.json | 12 +- core/templates/components/lockup/lockup.twig | 96 +- package-lock.json | 130 ++- package.json | 4 +- 29 files changed, 1984 insertions(+), 405 deletions(-) create mode 100644 core/scss/components/lockup/_lockup--option-a.scss create mode 100644 core/scss/components/lockup/_lockup--option-b.scss create mode 100644 core/scss/components/lockup/_lockup--option-c.scss create mode 100644 core/scss/components/lockup/_lockup--option-d.scss create mode 100644 core/scss/components/lockup/_lockup--option-e.scss create mode 100644 core/scss/components/lockup/_lockup--option-f.scss create mode 100644 core/scss/components/lockup/_lockup--option-g.scss create mode 100644 core/scss/components/lockup/_lockup--option-h.scss create mode 100644 core/scss/components/lockup/_lockup--option-i.scss create mode 100644 core/scss/components/lockup/_lockup--option-j.scss create mode 100644 core/scss/components/lockup/_lockup--option-k.scss create mode 100644 core/scss/components/lockup/_lockup--option-l.scss create mode 100644 core/scss/components/lockup/_lockup--option-m.scss create mode 100644 core/scss/components/lockup/_lockup--option-n.scss create mode 100644 core/scss/components/lockup/_lockup--option-o.scss create mode 100644 core/scss/components/lockup/_lockup--option-p.scss create mode 100644 core/scss/components/lockup/_lockup--option-q.scss create mode 100644 core/scss/components/lockup/_lockup--option-r.scss create mode 100644 core/scss/components/lockup/_lockup--option-s.scss create mode 100644 core/scss/components/lockup/_lockup--option-t.scss delete mode 100644 core/scss/components/lockup/_lockup--two-lines.scss diff --git a/core/css/decanter.css b/core/css/decanter.css index b942662df..5b3826f61 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -7438,26 +7438,61 @@ a { .su-logo:hover, .su-logo:active, .su-logo:focus { color: #8c1515; } -.su-lockup { - display: grid; - display: -ms-grid; - -ms-grid-columns: 1fr; - grid-template-columns: 1fr; - -ms-grid-rows: auto auto auto auto; - grid-template-rows: auto auto auto auto; - -webkit-box-align: end; - -ms-flex-align: end; - align-items: end; - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; - text-decoration: none; } +@media only screen and (min-width: 768px) { + .su-lockup, + .su-lockup > a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + max-width: 1500px; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + vertical-align: bottom; } } + +.su-lockup__cell1 { + min-height: 26px; + vertical-align: bottom; + width: auto; } @media only screen and (min-width: 768px) { - .su-lockup { - -ms-grid-columns: auto auto 1fr; - grid-template-columns: auto auto 1fr; - -ms-grid-rows: auto auto; - grid-template-rows: auto auto; } } + .su-lockup__cell1 { + margin-right: -1px; + padding-right: 7px; + padding-bottom: 0; + -ms-flex-item-align: end; + align-self: flex-end; + border-right: solid 1px #2e2d29; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-negative: 1; + flex-shrink: 1; + max-width: 160px; + min-height: 32px; } } + +@media only screen and (min-width: 768px) { + .su-lockup__cell2 { + padding-top: 0; + padding-left: 7px; + -ms-flex-item-align: end; + align-self: flex-end; + border-left: solid 1px #2e2d29; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + vertical-align: bottom; } } .su-lockup__wordmark { display: inline-block; @@ -7478,169 +7513,757 @@ a { font-variant-ligatures: discretionary-ligatures; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 1; - grid-row: 1 / span 1; - -ms-grid-row-span: 1; - display: block; color: #8c1515; font-size: 36px; - line-height: 1; } + line-height: 17px; + vertical-align: bottom; } @media only screen and (min-width: 768px) { .su-lockup__wordmark { font-size: 46px; - height: 33px; - line-height: .96; } } - .su-lockup__wordmark + .su-lockup__pipe { - display: none; } - @media only screen and (min-width: 768px) { - .su-lockup__wordmark + .su-lockup__pipe { - display: block; } } + line-height: 21px; } } -.su-lockup__pipe { - margin-top: 7px; - margin-bottom: 7px; - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 3; - grid-row: 3 / span 1; - -ms-grid-row-span: 1; - display: block; - content: ""; - width: 118px; - height: 1px; - background-color: #2e2d29; } +.su-lockup__wordmark-wrapper { + line-height: 26px; } @media only screen and (min-width: 768px) { - .su-lockup__pipe { - margin: 0 7px; - -ms-grid-column: 2; - grid-column: 2 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 1; - grid-row: 1 / span 1; - -ms-grid-row-span: 1; - display: inline-block; - width: 1px; - height: 100%; } } - -.su-lockup__sitename-line1, -.su-lockup__sitename-line2, -.su-lockup__sitename-line5 { + .su-lockup__wordmark-wrapper { + line-height: 32px; } } + +.su-lockup__line1, +.su-lockup__line2, +.su-lockup__line3, +.su-lockup__line4, +.su-lockup__line5 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - display: block; - -ms-grid-column: 1; - grid-column: 1 / span 1; - -ms-grid-column-span: 1; - color: #2e2d29; } + color: #2e2d29; + display: block; } + +.su-lockup__line1 { + font-size: 2.8rem; } + @media (max-width: 767px) { + .su-lockup__line1 { + font-size: 2.6rem; } } + +.su-lockup__line2 { + font-size: 2.6rem; } + +.su-lockup__line3 { + margin-top: 0.5rem; + font-size: 2.6rem; + font-style: italic; } + @media (max-width: 767px) { + .su-lockup__line3 { + margin: 0; + font-size: 1.9rem; } } -.su-lockup__sitename-line1 { - -ms-grid-row: 4; - grid-row: 4 / span 1; - -ms-grid-row-span: 1; - font-size: 22px; - line-height: .8; } +.su-lockup__line4 { + margin-top: 0.5rem; + font-size: 2.5rem; + font-weight: 600; + letter-spacing: .05rem; + line-height: 1em; + margin-left: -.2rem; + text-transform: uppercase; } + +.su-lockup__line5 { + font-size: 2.7rem; + line-height: 1em; + width: 100%; } @media only screen and (min-width: 768px) { - .su-lockup__sitename-line1 { - -ms-grid-column: 3; - grid-column: 3 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 1; - grid-row: 1 / span 1; - -ms-grid-row-span: 1; - font-size: 30px; } } + .su-lockup__line5 { + margin-top: 8px; + font-size: 3rem; } } -.su-lockup__sitename-line2 { +@media (max-width: 767px) { + .su-lockup--option-a > a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } } + +.su-lockup--option-a .su-lockup__line2, +.su-lockup--option-a .su-lockup__line3, +.su-lockup--option-a .su-lockup__line4 { display: none; } -.su-lockup__sitename-line5 { - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; - font-size: 20px; - line-height: 1.1; } +@media (max-width: 767px) { + .su-lockup--option-a .su-lockup__cell2 { + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; } } + +.su-lockup--option-a .su-lockup__line1 { + line-height: 2.6rem; } + @media (max-width: 767px) { + .su-lockup--option-a .su-lockup__line1 { + margin-left: -2px; } } @media only screen and (min-width: 768px) { - .su-lockup__sitename-line5 { - padding-top: 8px; - -ms-grid-column: 1; - grid-column: 1 / span 3; - -ms-grid-column-span: 3; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; - font-size: 27px; } } + .su-lockup--option-a .su-lockup__line1 { + font-size: 3.2rem; + line-height: 0.7em; } } -.su-lockup__sitename-line1--uppercase, -.su-lockup__sitename-line5--uppercase { - text-transform: uppercase; - font-weight: 700; } +.su-lockup--option-a .su-lockup__line5 { + font-size: 2rem; + font-weight: 600; + text-transform: uppercase; } + @media (max-width: 767px) { + .su-lockup--option-a .su-lockup__line5 { + margin-top: 0.75rem; + margin-left: -2px; + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; } + .su-lockup--option-a .su-lockup__line5::after { + margin-top: 0.75rem; + margin-bottom: 0.5rem; + border-bottom: 1px solid #2e2d29; + content: ''; + display: block; + width: 120px; } } + @media only screen and (min-width: 768px) { + .su-lockup--option-a .su-lockup__line5 { + font-size: 2.1rem; } } -.su-lockup__sitename-line5--uppercase { - font-size: 18px; } +.su-lockup--option-b .su-lockup__line3, +.su-lockup--option-b .su-lockup__line4, +.su-lockup--option-b .su-lockup__line5 { + display: none; } -.su-lockup--two-lines { - -ms-grid-rows: auto auto auto auto auto; - grid-template-rows: auto auto auto auto auto; } +.su-lockup--option-b .su-lockup__line1 { + margin-bottom: 0.2em; } @media only screen and (min-width: 768px) { - .su-lockup--two-lines { - -ms-grid-rows: auto auto auto; - grid-template-rows: auto auto auto; } } + .su-lockup--option-b .su-lockup__line1 { + margin-top: -0.4rem; + font-size: 1.9rem; } } + @media (max-width: 767px) { + .su-lockup--option-b .su-lockup__line1 { + margin-top: 0.5rem; + margin-bottom: 0.2rem; + margin-left: -2px; } } + +.su-lockup--option-b .su-lockup__line2 { + line-height: 0.7em; } + @media (max-width: 767px) { + .su-lockup--option-b .su-lockup__line2 { + margin-left: -2px; + line-height: 2.6rem; } } + +@media (max-width: 767px) { + .su-lockup--option-c > a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } } + +.su-lockup--option-c .su-lockup__line3, +.su-lockup--option-c .su-lockup__line4 { + display: none; } + +@media (max-width: 767px) { + .su-lockup--option-c .su-lockup__cell2 { + margin-left: -2px; + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; } } + +.su-lockup--option-c .su-lockup__line1 { + margin-bottom: 0.2em; } @media only screen and (min-width: 768px) { - .su-lockup--two-lines .su-lockup__wordmark { - -ms-grid-row: 1; - grid-row: 1 / span 2; - -ms-grid-row-span: 2; } } + .su-lockup--option-c .su-lockup__line1 { + margin-top: -0.4rem; + font-size: 1.9rem; } } + @media (max-width: 767px) { + .su-lockup--option-c .su-lockup__line1 { + margin-bottom: 0.2rem; } } + +.su-lockup--option-c .su-lockup__line2 { + line-height: 0.7em; } + @media (max-width: 767px) { + .su-lockup--option-c .su-lockup__line2 { + line-height: 2.6rem; } } + +.su-lockup--option-c .su-lockup__line5 { + font-size: 2rem; + font-weight: 600; + text-transform: uppercase; } + @media (max-width: 767px) { + .su-lockup--option-c .su-lockup__line5 { + margin-top: 0.75rem; + margin-left: -2px; + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; } + .su-lockup--option-c .su-lockup__line5::after { + margin-top: 0.75rem; + margin-bottom: 0.5rem; + border-bottom: 1px solid #2e2d29; + content: ''; + display: block; + width: 120px; } } @media only screen and (min-width: 768px) { - .su-lockup--two-lines .su-lockup__pipe { - -ms-grid-row: 1; - grid-row: 1 / span 2; - -ms-grid-row-span: 2; } } - .su-lockup--two-lines .su-lockup__sitename-line1, - .su-lockup--two-lines .su-lockup__sitename-line2 { - font-size: 22px; } - @media only screen and (min-width: 768px) { - .su-lockup--two-lines .su-lockup__sitename-line1, - .su-lockup--two-lines .su-lockup__sitename-line2 { - font-size: 22px; } } - .su-lockup--two-lines .su-lockup__sitename-line2 { - padding-top: 6px; - display: block; - -ms-grid-row: 5; - grid-row: 5 / span 1; - -ms-grid-row-span: 1; - line-height: .8; } - @media only screen and (min-width: 768px) { - .su-lockup--two-lines .su-lockup__sitename-line2 { - -ms-grid-column: 3; - grid-column: 3 / span 1; - -ms-grid-column-span: 1; - -ms-grid-row: 2; - grid-row: 2 / span 1; - -ms-grid-row-span: 1; } } + .su-lockup--option-c .su-lockup__line5 { + font-size: 2.1rem; } } + +.su-lockup--option-d .su-lockup__line2, +.su-lockup--option-d .su-lockup__line4, +.su-lockup--option-d .su-lockup__line5 { + display: none; } + +@media only screen and (min-width: 576px) { + .su-lockup--option-d .su-lockup__line1 { + margin-top: -0.7rem; } } + +@media (max-width: 767px) { + .su-lockup--option-d .su-lockup__line1 { + margin-top: 0.5rem; + margin-bottom: 0.2rem; + margin-left: -2px; } } + +@media only screen and (min-width: 768px) { + .su-lockup--option-d .su-lockup__line3 { + font-size: 1.8rem; + line-height: .7em; } } + +.su-lockup--option-e .su-lockup__line4, +.su-lockup--option-e .su-lockup__line5 { + display: none; } + +@media only screen and (min-width: 576px) { + .su-lockup--option-e .su-lockup__line1 { + margin-top: -0.7rem; + font-size: 2.6rem; } } + +@media (max-width: 767px) { + .su-lockup--option-e .su-lockup__line1 { + margin-top: 0.5rem; + margin-left: -2px; } } + +.su-lockup--option-e .su-lockup__line2 { + line-height: 2.6rem; } + @media (max-width: 767px) { + .su-lockup--option-e .su-lockup__line2 { + margin-left: -2px; } } + +.su-lockup--option-e .su-lockup__line3 { + margin-top: 0.5rem; + font-style: italic; } @media only screen and (min-width: 768px) { - .su-lockup--two-lines .su-lockup__sitename-line5 { - -ms-grid-row: 3; - grid-row: 3 / span 1; - -ms-grid-row-span: 1; } } - .su-lockup--two-lines .su-lockup__sitename-line1--small, - .su-lockup--two-lines .su-lockup__sitename-line1--supersmall { - -webkit-font-smoothing: auto; - -moz-osx-font-smoothing: auto; } - .su-lockup--two-lines .su-lockup__sitename-line1--small { - font-size: 15px; } - @media only screen and (min-width: 768px) { - .su-lockup--two-lines .su-lockup__sitename-line1--small { - font-size: 16px; - line-height: .5; } } - .su-lockup--two-lines .su-lockup__sitename-line1--supersmall { - font-size: 13px; } - @media only screen and (min-width: 768px) { - .su-lockup--two-lines .su-lockup__sitename-line1--supersmall + .su-lockup__sitename-line2 { - padding-top: 3px; - font-size: 27px; } } + .su-lockup--option-e .su-lockup__line3 { + margin-top: 0.8rem; + font-size: 1.9rem; + line-height: .7em; } } + +.su-lockup--option-f .su-lockup__line3, +.su-lockup--option-f .su-lockup__line4, +.su-lockup--option-f .su-lockup__line5 { + display: none; } + +.su-lockup--option-f .su-lockup__line1 { + margin-top: 0.5rem; + margin-bottom: 2px; } + @media only screen and (min-width: 768px) { + .su-lockup--option-f .su-lockup__line1 { + margin-top: -0.4rem; + font-size: 1.3rem; } } + @media (max-width: 767px) { + .su-lockup--option-f .su-lockup__line1 { + margin-bottom: 0.2rem; + margin-left: -2px; } } + +.su-lockup--option-f .su-lockup__line2 { + margin-left: -2px; + line-height: 0.7em; } + @media (max-width: 767px) { + .su-lockup--option-f .su-lockup__line2 { + line-height: 2.6rem; } } + +@media (max-width: 767px) { + .su-lockup--option-g > a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } } + +.su-lockup--option-g .su-lockup__line3, +.su-lockup--option-g .su-lockup__line4 { + display: none; } + +@media (max-width: 767px) { + .su-lockup--option-g .su-lockup__cell2 { + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; } } + +.su-lockup--option-g .su-lockup__line1 { + margin-top: 0.5rem; + margin-bottom: 2px; } + @media only screen and (min-width: 768px) { + .su-lockup--option-g .su-lockup__line1 { + margin-top: -0.4rem; + margin-bottom: 2px; + font-size: 1.3rem; } } + @media (max-width: 767px) { + .su-lockup--option-g .su-lockup__line1 { + margin-top: 0; + margin-bottom: 0.2rem; + margin-left: -2px; } } + +.su-lockup--option-g .su-lockup__line2 { + margin-left: -2px; + line-height: 0.7em; } + @media (max-width: 767px) { + .su-lockup--option-g .su-lockup__line2 { + line-height: 2.6rem; } } + +.su-lockup--option-g .su-lockup__line5 { + font-size: 2rem; + font-weight: 600; + text-transform: uppercase; } + @media (max-width: 767px) { + .su-lockup--option-g .su-lockup__line5 { + margin-top: 0.75rem; + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; } + .su-lockup--option-g .su-lockup__line5::after { + margin-top: 1rem; + margin-bottom: 0.5rem; + border-bottom: 1px solid #2e2d29; + content: ''; + display: block; + width: 120px; } } + @media only screen and (min-width: 768px) { + .su-lockup--option-g .su-lockup__line5 { + font-size: 2.1rem; } } + +.su-lockup--option-h .su-lockup__line2, +.su-lockup--option-h .su-lockup__line5 { + display: none; } + +@media (max-width: 767px) { + .su-lockup--option-h .su-lockup__cell2, + .su-lockup--option-h .su-lockup__line4 { + margin-left: -2px; } } + +@media (max-width: 767px) { + .su-lockup--option-h .su-lockup__wordmark { + display: block; } } + +.su-lockup--option-h .su-lockup__line4 { + margin-bottom: -3px; + line-height: 0.95em; } + @media (max-width: 767px) { + .su-lockup--option-h .su-lockup__line4 { + margin-bottom: 4px; } + .su-lockup--option-h .su-lockup__line4::after { + margin-top: 0.75rem; + margin-bottom: 0.5rem; + border-bottom: 1px solid #2e2d29; + content: ''; + display: block; + width: 120px; } } + +.su-lockup--option-h .su-lockup__line3 { + margin-top: 0; + margin-bottom: -3px; + font-style: normal; + line-height: 1em; + text-transform: capitalize; } + @media (max-width: 767px) { + .su-lockup--option-h .su-lockup__line3 { + font-size: 2.6rem; } } + +.su-lockup--option-i .su-lockup__line2, +.su-lockup--option-i .su-lockup__line5 { + display: none; } + +@media (max-width: 767px) { + .su-lockup--option-i .su-lockup__cell2, + .su-lockup--option-i .su-lockup__line4 { + margin-left: -2px; } } + +@media (max-width: 767px) { + .su-lockup--option-i .su-lockup__wordmark { + display: block; } } + +.su-lockup--option-i .su-lockup__line4 { + margin-bottom: -3px; + line-height: 0.95em; } + @media (max-width: 767px) { + .su-lockup--option-i .su-lockup__line4::after { + margin-top: 0.75rem; + margin-bottom: 0.5rem; + border-bottom: 1px solid #2e2d29; + content: ''; + display: block; + width: 120px; } } + +.su-lockup--option-i .su-lockup__line3 { + line-height: .7em; + text-transform: capitalize; } + @media only screen and (min-width: 768px) { + .su-lockup--option-i .su-lockup__line3 { + font-size: 1.8rem; } } + @media (max-width: 767px) { + .su-lockup--option-i .su-lockup__line3 { + line-height: 1.15em; } } + +@media (max-width: 767px) { + .su-lockup--option-j > a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } } + +.su-lockup--option-j .su-lockup__line3, +.su-lockup--option-j .su-lockup__line4 { + display: none; } + +@media (max-width: 767px) { + .su-lockup--option-j .su-lockup__cell2 { + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; } } + +@media only screen and (min-width: 768px) { + .su-lockup--option-j .su-lockup__line1 { + margin-top: -0.7rem; } } + +@media (max-width: 767px) { + .su-lockup--option-j .su-lockup__line1 { + margin-left: -2px; } } + +.su-lockup--option-j .su-lockup__line2 { + margin-top: 0.3rem; + line-height: 0.7em; } + @media (max-width: 767px) { + .su-lockup--option-j .su-lockup__line2 { + margin-left: -2px; + line-height: 2.6rem; } } + +.su-lockup--option-j .su-lockup__line5 { + font-size: 2rem; + font-weight: 600; + text-transform: uppercase; } + @media (max-width: 767px) { + .su-lockup--option-j .su-lockup__line5 { + margin-top: 0.75rem; + margin-left: -2px; + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; } + .su-lockup--option-j .su-lockup__line5::after { + margin-top: 0.9rem; + margin-bottom: 0.5rem; + border-bottom: 1px solid #2e2d29; + content: ''; + display: block; + width: 120px; } } + @media only screen and (min-width: 768px) { + .su-lockup--option-j .su-lockup__line5 { + font-size: 2.1rem; } } + +.su-lockup--option-k .su-lockup__line2, +.su-lockup--option-k .su-lockup__line3, +.su-lockup--option-k .su-lockup__line4 { + display: none; } + +.su-lockup--option-k .su-lockup__line1 { + font-size: 3.3rem; + font-weight: 600; + line-height: 0.7em; + text-transform: uppercase; } + @media (max-width: 767px) { + .su-lockup--option-k .su-lockup__line1 { + margin-top: 1.1rem; + margin-left: -2px; + font-size: 2.6rem; + line-height: 2.6rem; } + .su-lockup--option-k .su-lockup__line1::after { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + border-bottom: 1px solid #2e2d29; + content: ''; + display: block; + width: 120px; } } + +@media (max-width: 767px) { + .su-lockup--option-k .su-lockup__line5 { + margin-left: -2px; + font-size: 2.6rem; } } + +.su-lockup--option-l .su-lockup__line2, +.su-lockup--option-l .su-lockup__line3, +.su-lockup--option-l .su-lockup__line4, +.su-lockup--option-l .su-lockup__line5 { + display: none; } + +.su-lockup--option-l .su-lockup__line1 { + font-weight: 600; + text-transform: uppercase; } + @media (max-width: 767px) { + .su-lockup--option-l .su-lockup__line1 { + margin-top: 0.5rem; + margin-left: -2px; } } + @media only screen and (min-width: 768px) { + .su-lockup--option-l .su-lockup__line1 { + font-size: 3.3rem; + line-height: 0.7em; } } + +.su-lockup--option-m .su-lockup__line3, +.su-lockup--option-m .su-lockup__line4, +.su-lockup--option-m .su-lockup__line5 { + display: none; } + +.su-lockup--option-m .su-lockup__line2 { + margin-top: 0.3rem; + line-height: 0.7em; } + @media (max-width: 767px) { + .su-lockup--option-m .su-lockup__line2 { + margin-top: 0; + margin-left: -2px; + line-height: 2.6rem; } } + +@media only screen and (min-width: 768px) { + .su-lockup--option-m .su-lockup__line1 { + margin-top: -0.7rem; } } + +@media (max-width: 767px) { + .su-lockup--option-m .su-lockup__line1 { + margin-top: 4px; + margin-left: -2px; } } + +.su-lockup--option-n .su-lockup__line2, +.su-lockup--option-n .su-lockup__line3, +.su-lockup--option-n .su-lockup__line4, +.su-lockup--option-n .su-lockup__line5 { + display: none; } + +.su-lockup--option-n .su-lockup__line1 { + line-height: 0.7em; } + @media only screen and (min-width: 768px) { + .su-lockup--option-n .su-lockup__line1 { + font-size: 3.2rem; } } + @media (max-width: 767px) { + .su-lockup--option-n .su-lockup__line1 { + margin-top: 0.5rem; + margin-left: -2px; + line-height: 2.6rem; } } + +.su-lockup--option-o .su-lockup__cell2, +.su-lockup--option-o .su-lockup__cell1 { + border: 0; } + +.su-lockup--option-o .su-lockup__line1, +.su-lockup--option-o .su-lockup__line2, +.su-lockup--option-o .su-lockup__line3, +.su-lockup--option-o .su-lockup__line5 { + display: none; } + +@media (max-width: 767px) { + .su-lockup--option-o .su-lockup__line4 { + margin-left: -2px; } } + +.su-lockup--option-p .su-lockup__line2, +.su-lockup--option-p .su-lockup__line3, +.su-lockup--option-p .su-lockup__line5 { + display: none; } + +@media (max-width: 767px) { + .su-lockup--option-p .su-lockup__wordmark { + display: block; } } + +.su-lockup--option-p .su-lockup__line1 { + margin-bottom: -3px; + line-height: 1em; } + +.su-lockup--option-p .su-lockup__line4 { + margin-bottom: -3px; + line-height: 1em; } + @media (max-width: 767px) { + .su-lockup--option-p .su-lockup__line4 { + font-size: 2.5rem; } + .su-lockup--option-p .su-lockup__line4::after { + margin-top: 0.6rem; + margin-bottom: 0.7rem; + border-bottom: 1px solid #2e2d29; + content: ''; + display: block; + width: 120px; } } + +@media (max-width: 767px) { + .su-lockup--option-p .su-lockup__cell2 { + margin-left: -2px; } } + +@media (max-width: 767px) { + .su-lockup--option-q > a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } } + +.su-lockup--option-q .su-lockup__line2, +.su-lockup--option-q .su-lockup__line4 { + display: none; } + +@media (max-width: 767px) { + .su-lockup--option-q .su-lockup__cell2 { + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; } } + +@media only screen and (min-width: 768px) { + .su-lockup--option-q .su-lockup__line1 { + margin-top: -0.7rem; } } + +@media (max-width: 767px) { + .su-lockup--option-q .su-lockup__line1 { + margin-left: -2px; } } + +.su-lockup--option-q .su-lockup__line3 { + font-size: 1.8rem; + line-height: .7em; } + @media (max-width: 767px) { + .su-lockup--option-q .su-lockup__line3 { + line-height: 1.15em; + margin-left: -2px; } } + +.su-lockup--option-q .su-lockup__line5 { + font-size: 2rem; + font-weight: 600; + text-transform: uppercase; } + @media (max-width: 767px) { + .su-lockup--option-q .su-lockup__line5 { + margin-top: 0.75rem; + margin-left: -2px; + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; } + .su-lockup--option-q .su-lockup__line5::after { + margin-top: 0.75rem; + margin-bottom: 0.5rem; + border-bottom: 1px solid #2e2d29; + content: ''; + display: block; + width: 120px; } } + @media only screen and (min-width: 768px) { + .su-lockup--option-q .su-lockup__line5 { + font-size: 2.1rem; } } + +.su-lockup--option-r .su-lockup__cell2, +.su-lockup--option-r .su-lockup__cell1 { + border: 0; } + +.su-lockup--option-r .su-lockup__line1, +.su-lockup--option-r .su-lockup__line2, +.su-lockup--option-r .su-lockup__line3, +.su-lockup--option-r .su-lockup__line4 { + display: none; } + +.su-lockup--option-r .su-lockup__line5 { + font-size: 2.1rem; } + @media (max-width: 767px) { + .su-lockup--option-r .su-lockup__line5 { + margin-top: 0.75rem; + margin-left: -2px; + font-size: 2.6rem; } } + +.su-lockup--option-s .su-lockup__wordmark { + display: block; } + +.su-lockup--option-s .su-lockup__line1, +.su-lockup--option-s .su-lockup__line2 { + font-size: 2.6rem; } + @media (max-width: 767px) { + .su-lockup--option-s .su-lockup__line1, + .su-lockup--option-s .su-lockup__line2 { + margin-left: -2px; + line-height: 2.6rem; } } + +@media (max-width: 767px) { + .su-lockup--option-s .su-lockup__line1 { + margin-bottom: 0.2rem; } } + +.su-lockup--option-s .su-lockup__line3, +.su-lockup--option-s .su-lockup__line5 { + display: none; } + +.su-lockup--option-s .su-lockup__line4::after { + margin-top: 0.75rem; + margin-bottom: 0.5rem; + border-bottom: 1px solid #2e2d29; + content: ''; + display: block; + width: 120px; } + +.su-lockup--option-s .su-lockup__cell1 { + padding: 0; + border: 0; } + +.su-lockup--option-s .su-lockup__cell2 { + padding: 0; + border: 0; + width: 100%; } + +.su-lockup--option-t .su-lockup__wordmark { + display: block; } + +.su-lockup--option-t .su-lockup__line1, +.su-lockup--option-t .su-lockup__line2 { + font-size: 2.6rem; } + @media (max-width: 767px) { + .su-lockup--option-t .su-lockup__line1, + .su-lockup--option-t .su-lockup__line2 { + margin-left: -2px; + line-height: 2.6rem; } } + +@media (max-width: 767px) { + .su-lockup--option-t .su-lockup__line1 { + margin-bottom: 0.2rem; } } + +.su-lockup--option-t .su-lockup__line3 { + margin: 0; + font-size: 2rem; } + @media (max-width: 767px) { + .su-lockup--option-t .su-lockup__line3 { + margin-top: 0.3rem; + margin-left: -2px; + font-size: 1.8rem; } } + +.su-lockup--option-t .su-lockup__line4::after { + margin-top: 0.75rem; + margin-bottom: 0.5rem; + border-bottom: 1px solid #2e2d29; + content: ''; + display: block; + width: 120px; } + +.su-lockup--option-t .su-lockup__line5 { + display: none; } + +.su-lockup--option-t .su-lockup__cell1 { + padding: 0; + border: 0; } + +.su-lockup--option-t .su-lockup__cell2 { + padding: 0; + border: 0; + width: 100%; } .su-main-nav { -webkit-font-smoothing: antialiased; diff --git a/core/scss/components/lockup/_lockup--option-a.scss b/core/scss/components/lockup/_lockup--option-a.scss new file mode 100644 index 000000000..76132bfc2 --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-a.scss @@ -0,0 +1,62 @@ +@charset 'UTF-8'; + +// +// Lockup option A: Multidisciplinary (or long school name) +// +.su-lockup--option-a { + + > a { + @include grid-media-max('sm') { + display: flex; + flex-direction: column; + } + } + + .su-lockup__line2, + .su-lockup__line3, + .su-lockup__line4 { + display: none; + } + + .su-lockup__cell2 { + @include grid-media-max('sm') { + order: 3; + } + } + + .su-lockup__line1 { + line-height: 2.6rem; + + @include grid-media-max('sm') { + @include margin(null null null -2px); + } + + @include grid-media('md') { + font-size: 3.2rem; + line-height: 0.7em; + } + } + + .su-lockup__line5 { + font-size: 2rem; + font-weight: $font-bold; + text-transform: uppercase; + + @include grid-media-max('sm') { + @include margin(.75rem null null -2px); + order: 2; + + &::after { + @include margin(.75rem null .5rem); + border-bottom: 1px solid $color-black; + content: ''; + display: block; + width: 120px; + } + } + + @include grid-media('md') { + font-size: 2.1rem; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-b.scss b/core/scss/components/lockup/_lockup--option-b.scss new file mode 100644 index 000000000..d3352b89a --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-b.scss @@ -0,0 +1,35 @@ +@charset 'UTF-8'; + +// +// Lockup option B: Unit (2 lines, big/small) +// +.su-lockup--option-b { + + .su-lockup__line3, + .su-lockup__line4, + .su-lockup__line5 { + display: none; + } + + .su-lockup__line1 { + @include margin(null null 0.2em); + + @include grid-media('md') { + @include margin(-.4rem null null); + font-size: 1.9rem; + } + + @include grid-media-max('sm') { + @include margin(.5rem null .2rem -2px); + } + } + + .su-lockup__line2 { + line-height: 0.7em; + + @include grid-media-max('sm') { + @include margin(null null null -2px); + line-height: 2.6rem; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-c.scss b/core/scss/components/lockup/_lockup--option-c.scss new file mode 100644 index 000000000..43a93e8af --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-c.scss @@ -0,0 +1,70 @@ +@charset 'UTF-8'; + +// +// Lockup option C: Multidisciplinary + Unit (2 lines, big/small) +// +.su-lockup--option-c { + + > a { + @include grid-media-max('sm') { + display: flex; + flex-direction: column; + } + } + + .su-lockup__line3, + .su-lockup__line4 { + display: none; + } + + .su-lockup__cell2 { + @include grid-media-max('sm') { + @include margin(null null null -2px); + order: 3; + } + } + + .su-lockup__line1 { + @include margin(null null 0.2em null); + + @include grid-media('md') { + @include margin(-.4rem null null); + font-size: 1.9rem; + } + + @include grid-media-max('sm') { + @include margin(null null .2rem null); + } + } + + .su-lockup__line2 { + line-height: 0.7em; + + @include grid-media-max('sm') { + line-height: 2.6rem; + } + } + + .su-lockup__line5 { + font-size: 2rem; + font-weight: $font-bold; + text-transform: uppercase; + + @include grid-media-max('sm') { + @include margin(.75rem null null -2px); + order: 2; + + &::after { + @include margin(.75rem null .5rem); + border-bottom: 1px solid $color-black; + content: ''; + display: block; + width: 120px; + } + } + + @include grid-media('md') { + font-size: 2.1rem; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-d.scss b/core/scss/components/lockup/_lockup--option-d.scss new file mode 100644 index 000000000..055d9cf33 --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-d.scss @@ -0,0 +1,31 @@ +@charset 'UTF-8'; + +// +// Lockup option D: Unit + Level (1 line) +// +.su-lockup--option-d { + + .su-lockup__line2, + .su-lockup__line4, + .su-lockup__line5 { + display: none; + } + + .su-lockup__line1 { + @include grid-media("sm") { + @include margin(-.7rem null null); + } + + @include grid-media-max('sm') { + @include margin(.5rem null .2rem -2px); + } + } + + .su-lockup__line3 { + + @include grid-media('md') { + font-size: 1.8rem; + line-height: .7em; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-e.scss b/core/scss/components/lockup/_lockup--option-e.scss new file mode 100644 index 000000000..f9720335f --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-e.scss @@ -0,0 +1,43 @@ +@charset 'UTF-8'; + +// +// Lockup option E: Unit (2 lines) + Level +// +.su-lockup--option-e { + + .su-lockup__line4, + .su-lockup__line5 { + display: none; + } + + .su-lockup__line1 { + + @include grid-media("sm") { + @include margin(-.7rem null null); + font-size: 2.6rem; + } + + @include grid-media-max('sm') { + @include margin(.5rem null null -2px); + } + } + + .su-lockup__line2 { + line-height: 2.6rem; + + @include grid-media-max('sm') { + @include margin(null null null -2px); + } + } + + .su-lockup__line3 { + @include margin(.5rem null null); + font-style: italic; + + @include grid-media('md') { + @include margin(.8rem null null); + font-size: 1.9rem; + line-height: .7em; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-f.scss b/core/scss/components/lockup/_lockup--option-f.scss new file mode 100644 index 000000000..693a29962 --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-f.scss @@ -0,0 +1,35 @@ +@charset 'UTF-8'; + +// +// Lockup option F: Unit (2 lines, big/super small) +// +.su-lockup--option-f { + + .su-lockup__line3, + .su-lockup__line4, + .su-lockup__line5 { + display: none; + } + + .su-lockup__line1 { + @include margin(.5rem null 2px); + + @include grid-media('md') { + @include margin(-.4rem null null); + font-size: 1.3rem; + } + + @include grid-media-max('sm') { + @include margin(null null .2rem -2px); + } + } + + .su-lockup__line2 { + @include margin(null null null -2px); + line-height: 0.7em; + + @include grid-media-max('sm') { + line-height: 2.6rem; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-g.scss b/core/scss/components/lockup/_lockup--option-g.scss new file mode 100644 index 000000000..a4505b930 --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-g.scss @@ -0,0 +1,70 @@ +@charset 'UTF-8'; + +// +// Lockup option G: Multidisciplinary + Unit (2 lines, big/super small) +// +.su-lockup--option-g { + + > a { + @include grid-media-max('sm') { + display: flex; + flex-direction: column; + } + } + + .su-lockup__line3, + .su-lockup__line4 { + display: none; + } + + .su-lockup__cell2 { + @include grid-media-max('sm') { + order: 3; + } + } + + .su-lockup__line1 { + @include margin(.5rem null 2px); + + @include grid-media('md') { + @include margin(-.4rem null 2px); + font-size: 1.3rem; + } + + @include grid-media-max('sm') { + @include margin(0 null .2rem -2px); + } + } + + .su-lockup__line2 { + @include margin(null null null -2px); + line-height: 0.7em; + + @include grid-media-max('sm') { + line-height: 2.6rem; + } + } + + .su-lockup__line5 { + font-size: 2rem; + font-weight: $font-bold; + text-transform: uppercase; + + @include grid-media-max('sm') { + @include margin(.75rem null null); + order: 2; + + &::after { + @include margin(1rem null .5rem); + border-bottom: 1px solid $color-black; + content: ''; + display: block; + width: 120px; + } + } + + @include grid-media('md') { + font-size: 2.1rem; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-h.scss b/core/scss/components/lockup/_lockup--option-h.scss new file mode 100644 index 000000000..b9ffaab99 --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-h.scss @@ -0,0 +1,53 @@ +@charset 'UTF-8'; + +// +// Lockup option H: School + Unit (2 lines) +// +.su-lockup--option-h { + + .su-lockup__line2, + .su-lockup__line5 { + display: none; + } + + .su-lockup__cell2, + .su-lockup__line4 { + @include grid-media-max('sm') { + @include margin(null null null -2px); + } + } + + .su-lockup__wordmark { + @include grid-media-max('sm') { + display: block; + } + } + + .su-lockup__line4 { + @include margin(null null -3px null); + line-height: 0.95em; + + @include grid-media-max('sm') { + @include margin(null null 4px null); + + &::after { + @include margin(.75rem null .5rem); + border-bottom: 1px solid $color-black; + content: ''; + display: block; + width: 120px; + } + } + } + + .su-lockup__line3 { + @include margin(0 null -3px null); + font-style: normal; + line-height: 1em; + text-transform: capitalize; + + @include grid-media-max('sm') { + font-size: 2.6rem; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-i.scss b/core/scss/components/lockup/_lockup--option-i.scss new file mode 100644 index 000000000..188042917 --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-i.scss @@ -0,0 +1,54 @@ +@charset 'UTF-8'; + +// +// Lockup option I: School + Unit + Level +// +.su-lockup--option-i { + + .su-lockup__line2, + .su-lockup__line5 { + display: none; + } + + .su-lockup__cell2, + .su-lockup__line4 { + @include grid-media-max('sm') { + @include margin(null null null -2px); + } + } + + .su-lockup__wordmark { + @include grid-media-max('sm') { + display: block; + } + } + + .su-lockup__line4 { + @include margin(null null -3px null); + line-height: 0.95em; + + @include grid-media-max('sm') { + + &::after { + @include margin(.75rem null .5rem); + border-bottom: 1px solid $color-black; + content: ''; + display: block; + width: 120px; + } + } + } + + .su-lockup__line3 { + line-height: .7em; + text-transform: capitalize; + + @include grid-media('md') { + font-size: 1.8rem; + } + + @include grid-media-max('sm') { + line-height: 1.15em; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-j.scss b/core/scss/components/lockup/_lockup--option-j.scss new file mode 100644 index 000000000..2f6419acb --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-j.scss @@ -0,0 +1,68 @@ +@charset 'UTF-8'; + +// +// Lockup option J: Multidisciplinary + Unit (2 lines) +// +.su-lockup--option-j { + + > a { + @include grid-media-max('sm') { + display: flex; + flex-direction: column; + } + } + + .su-lockup__line3, + .su-lockup__line4 { + display: none; + } + + .su-lockup__cell2 { + @include grid-media-max('sm') { + order: 3; + } + } + + .su-lockup__line1 { + @include grid-media('md') { + @include margin(-.7rem null null null); + } + + @include grid-media-max('sm') { + @include margin(null null null -2px); + } + } + + .su-lockup__line2 { + @include margin(.3rem null null); + line-height: 0.7em; + + @include grid-media-max('sm') { + @include margin(null null null -2px); + line-height: 2.6rem; + } + } + + .su-lockup__line5 { + font-size: 2rem; + font-weight: $font-bold; + text-transform: uppercase; + + @include grid-media-max('sm') { + @include margin(.75rem null null -2px); + order: 2; + + &::after { + @include margin(.9rem null .5rem); + border-bottom: 1px solid $color-black; + content: ''; + display: block; + width: 120px; + } + } + + @include grid-media('md') { + font-size: 2.1rem; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-k.scss b/core/scss/components/lockup/_lockup--option-k.scss new file mode 100644 index 000000000..6114d14f9 --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-k.scss @@ -0,0 +1,41 @@ +@charset 'UTF-8'; + +// +// Lockup option K: Alt School + Unit (1 line) +// +.su-lockup--option-k { + + .su-lockup__line2, + .su-lockup__line3, + .su-lockup__line4 { + display: none; + } + + .su-lockup__line1 { + font-size: 3.3rem; + font-weight: $font-bold; + line-height: 0.7em; + text-transform: uppercase; + + @include grid-media-max('sm') { + @include margin(1.1rem null null -2px); + font-size: 2.6rem; + line-height: 2.6rem; + + &::after { + @include margin(.5rem null .5rem); + border-bottom: 1px solid $color-black; + content: ''; + display: block; + width: 120px; + } + } + } + + .su-lockup__line5 { + @include grid-media-max('sm') { + @include margin(null null null -2px); + font-size: 2.6rem; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-l.scss b/core/scss/components/lockup/_lockup--option-l.scss new file mode 100644 index 000000000..21268d450 --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-l.scss @@ -0,0 +1,28 @@ +@charset 'UTF-8'; + +// +// Lockup option L: School +// +.su-lockup--option-l { + + .su-lockup__line2, + .su-lockup__line3, + .su-lockup__line4, + .su-lockup__line5 { + display: none; + } + + .su-lockup__line1 { + font-weight: $font-bold; + text-transform: uppercase; + + @include grid-media-max('sm') { + @include margin(.5rem null null -2px); + } + + @include grid-media('md') { + font-size: 3.3rem; + line-height: 0.7em; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-m.scss b/core/scss/components/lockup/_lockup--option-m.scss new file mode 100644 index 000000000..8e3649e5d --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-m.scss @@ -0,0 +1,33 @@ +@charset 'UTF-8'; + +// +// Lockup option M: Unit (2 lines) +// +.su-lockup--option-m { + + .su-lockup__line3, + .su-lockup__line4, + .su-lockup__line5 { + display: none; + } + + .su-lockup__line2 { + @include margin(.3rem null null); + line-height: 0.7em; + + @include grid-media-max('sm') { + @include margin(0 null null -2px); + line-height: 2.6rem; + } + } + + .su-lockup__line1 { + @include grid-media('md') { + @include margin(-.7rem null null); + } + + @include grid-media-max('sm') { + @include margin(4px null null -2px); + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-n.scss b/core/scss/components/lockup/_lockup--option-n.scss new file mode 100644 index 000000000..0923721b0 --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-n.scss @@ -0,0 +1,27 @@ +@charset 'UTF-8'; + +// +// Lockup option N: Unit (1 line) +// +.su-lockup--option-n { + + .su-lockup__line2, + .su-lockup__line3, + .su-lockup__line4, + .su-lockup__line5 { + display: none; + } + + .su-lockup__line1 { + line-height: 0.7em; + + @include grid-media('md') { + font-size: 3.2rem; + } + + @include grid-media-max('sm') { + @include margin(.5rem null null -2px); + line-height: 2.6rem; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-o.scss b/core/scss/components/lockup/_lockup--option-o.scss new file mode 100644 index 000000000..74fe957d9 --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-o.scss @@ -0,0 +1,25 @@ +@charset 'UTF-8'; + +// +// Lockup option O: School (vertical) +// +.su-lockup--option-o { + + .su-lockup__cell2, + .su-lockup__cell1 { + border: 0; + } + + .su-lockup__line1, + .su-lockup__line2, + .su-lockup__line3, + .su-lockup__line5 { + display: none; + } + + .su-lockup__line4 { + @include grid-media-max('sm') { + @include margin(null null null -2px); + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-p.scss b/core/scss/components/lockup/_lockup--option-p.scss new file mode 100644 index 000000000..1ef966a02 --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-p.scss @@ -0,0 +1,47 @@ +@charset 'UTF-8'; + +// +// Lockup option P: School + Unit (1 line) +// +.su-lockup--option-p { + + .su-lockup__line2, + .su-lockup__line3, + .su-lockup__line5 { + display: none; + } + + .su-lockup__wordmark { + @include grid-media-max('sm') { + display: block; + } + } + + .su-lockup__line1 { + @include margin(null null -3px null); + line-height: 1em; + } + + .su-lockup__line4 { + @include margin(null null -3px null); + line-height: 1em; + + @include grid-media-max('sm') { + font-size: 2.5rem; + + &::after { + @include margin(.6rem null .7rem); + border-bottom: 1px solid $color-black; + content: ''; + display: block; + width: 120px; + } + } + } + + .su-lockup__cell2 { + @include grid-media-max('sm') { + @include margin(null null null -2px); + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-q.scss b/core/scss/components/lockup/_lockup--option-q.scss new file mode 100644 index 000000000..2f6d0ef4f --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-q.scss @@ -0,0 +1,68 @@ +@charset 'UTF-8'; + +// +// Lockup option Q: Multidisciplinary + Unit + Level +// +.su-lockup--option-q { + + > a { + @include grid-media-max('sm') { + display: flex; + flex-direction: column; + } + } + + .su-lockup__line2, + .su-lockup__line4 { + display: none; + } + + .su-lockup__cell2 { + @include grid-media-max('sm') { + order: 3; + } + } + + .su-lockup__line1 { + @include grid-media('md') { + @include margin(-.7rem null null); + } + + @include grid-media-max('sm') { + @include margin(null null null -2px); + } + } + + .su-lockup__line3 { + font-size: 1.8rem; + line-height: .7em; + + @include grid-media-max('sm') { + line-height: 1.15em; + @include margin(null null null -2px); + } + } + + .su-lockup__line5 { + font-size: 2rem; + font-weight: $font-bold; + text-transform: uppercase; + + @include grid-media-max('sm') { + @include margin(.75rem null null -2px); + order: 2; + + &::after { + @include margin(.75rem null .5rem); + border-bottom: 1px solid $color-black; + content: ''; + display: block; + width: 120px; + } + } + + @include grid-media('md') { + font-size: 2.1rem; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-r.scss b/core/scss/components/lockup/_lockup--option-r.scss new file mode 100644 index 000000000..c1af8775d --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-r.scss @@ -0,0 +1,28 @@ +@charset 'UTF-8'; + +// +// Lockup option R: Unit (vertical) +// +.su-lockup--option-r { + + .su-lockup__cell2, + .su-lockup__cell1 { + border: 0; + } + + .su-lockup__line1, + .su-lockup__line2, + .su-lockup__line3, + .su-lockup__line4 { + display: none; + } + + .su-lockup__line5 { + font-size: 2.1rem; + + @include grid-media-max('sm') { + @include margin(.75rem null null -2px); + font-size: 2.6rem; + } + } +} diff --git a/core/scss/components/lockup/_lockup--option-s.scss b/core/scss/components/lockup/_lockup--option-s.scss new file mode 100644 index 000000000..841f42654 --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-s.scss @@ -0,0 +1,54 @@ +@charset 'UTF-8'; + +// +// Lockup option S: School + Unit (vertical) +// +.su-lockup--option-s { + + .su-lockup__wordmark { + display: block; + } + + .su-lockup__line1, + .su-lockup__line2 { + font-size: 2.6rem; + + @include grid-media-max('sm') { + @include margin(null null null -2px); + line-height: 2.6rem; + } + } + + .su-lockup__line1 { + @include grid-media-max('sm') { + @include margin(null null .2rem null); + } + } + + .su-lockup__line3, + .su-lockup__line5 { + display: none; + } + + .su-lockup__line4 { + + &::after { + @include margin(.75rem null .5rem); + border-bottom: 1px solid $color-black; + content: ''; + display: block; + width: 120px; + } + } + + .su-lockup__cell1 { + @include padding(0); + border: 0; + } + + .su-lockup__cell2 { + @include padding(0); + border: 0; + width: 100%; + } +} diff --git a/core/scss/components/lockup/_lockup--option-t.scss b/core/scss/components/lockup/_lockup--option-t.scss new file mode 100644 index 000000000..90ff63619 --- /dev/null +++ b/core/scss/components/lockup/_lockup--option-t.scss @@ -0,0 +1,63 @@ +@charset 'UTF-8'; + +// +// Lockup option T: School + Unit + Level (vertical) +// +.su-lockup--option-t { + + .su-lockup__wordmark { + display: block; + } + + .su-lockup__line1, + .su-lockup__line2 { + font-size: 2.6rem; + + @include grid-media-max('sm') { + @include margin(null null null -2px); + line-height: 2.6rem; + } + } + + .su-lockup__line1 { + @include grid-media-max('sm') { + @include margin(null null .2rem null); + } + } + + .su-lockup__line3 { + @include margin(0); + font-size: 2rem; + + @include grid-media-max('sm') { + @include margin(.3rem null null -2px); + font-size: 1.8rem; + } + } + + .su-lockup__line4 { + + &::after { + @include margin(.75rem null .5rem); + border-bottom: 1px solid $color-black; + content: ''; + display: block; + width: 120px; + } + } + + .su-lockup__line5 { + display: none; + } + + .su-lockup__cell1 { + @include padding(0); + border: 0; + } + + .su-lockup__cell2 { + @include padding(0); + border: 0; + width: 100%; + } +} diff --git a/core/scss/components/lockup/_lockup--two-lines.scss b/core/scss/components/lockup/_lockup--two-lines.scss deleted file mode 100644 index 430265542..000000000 --- a/core/scss/components/lockup/_lockup--two-lines.scss +++ /dev/null @@ -1,76 +0,0 @@ -.su-lockup--two-lines { - @include grid-rows(auto auto auto auto auto); - - @include grid-media('md') { - @include grid-rows(auto auto auto); - } - - .su-lockup__wordmark { - - @include grid-media('md') { - @include grid-item-spans(null, null, 1, span 2); - } - } - - .su-lockup__pipe { - - @include grid-media('md') { - @include grid-item-spans(null, null, 1, span 2); - } - } - - .su-lockup__sitename-line1, - .su-lockup__sitename-line2 { - font-size: 22px; - - @include grid-media('md') { - font-size: 22px; - } - } - - .su-lockup__sitename-line2 { - @include padding(6px null null); - display: block; - @include grid-item-spans(null, null, 5, span 1); - line-height: .8; - - @include grid-media('md') { - @include grid-item-spans(3, span 1, 2, span 1); - } - } - - .su-lockup__sitename-line5 { - - @include grid-media('md') { - @include grid-item-spans(null, null, 3, span 1); - } - } - - .su-lockup__sitename-line1--small, - .su-lockup__sitename-line1--supersmall { - -webkit-font-smoothing: auto; - -moz-osx-font-smoothing: auto; - } - - .su-lockup__sitename-line1--small { - font-size: 15px; - - @include grid-media('md') { - font-size: 16px; - line-height: .5; - } - } - - - .su-lockup__sitename-line1--supersmall { - font-size: 13px; - - @include grid-media('md') { - + .su-lockup__sitename-line2 { - @include padding(3px null null); - font-size: 27px; - } - } - } - -} diff --git a/core/scss/components/lockup/_lockup.scss b/core/scss/components/lockup/_lockup.scss index df6328eba..7cc6deaa7 100644 --- a/core/scss/components/lockup/_lockup.scss +++ b/core/scss/components/lockup/_lockup.scss @@ -5,120 +5,140 @@ // // A lockup with the Stanford wordmark logo and department/unit name. It is used in the header of a website and links to the homepage of the department/unit. When building a department lockup, besides the Stanford wordmark, the most obvious element should be the most granular relevant department. // -// **Available variants for the lockup:** -// - .su-lockup--two-lines - Lockup with two lines to the right of the wordmark. +// .su-lockup--option-a - Option A +// .su-lockup--option-b - Option B +// .su-lockup--option-c - Option C +// .su-lockup--option-d - Option D +// .su-lockup--option-e - Option E +// .su-lockup--option-f - Option F +// .su-lockup--option-g - Option G +// .su-lockup--option-h - Option H +// .su-lockup--option-i - Option I +// .su-lockup--option-j - Option J +// .su-lockup--option-k - Option K +// .su-lockup--option-l - Option L +// .su-lockup--option-m - Option M +// .su-lockup--option-n - Option N +// .su-lockup--option-o - Option O +// .su-lockup--option-p - Option P +// .su-lockup--option-q - Option Q +// .su-lockup--option-r - Option R +// .su-lockup--option-s - Option S +// .su-lockup--option-t - Option T // -// **Available variants for the individual site name lines:** -// - .su-lockup__sitename-line1--small - Small font size for line 1 - only when line 2 exists -// - .su-lockup__sitename-line1--supersmall - Supersmall font size for line 1 - only when line 2 exists -// - .su-lockup__sitename-line1--uppercase - Uppercase and bold font for line 1 -// - .su-lockup__sitename-line5--uppercase - Uppercase, bold and smaller font for line 5 // // Markup: ../templates/components/lockup/lockup.twig // // Style guide: Components.Lockup // -.su-lockup { - @include display-grid; - @include grid-columns(1fr, false); - @include grid-rows(auto auto auto auto); - align-items: end; - width: fit-content; - text-decoration: none; +.su-lockup, +.su-lockup > a { + @include grid-media('md') { + @include flex-container; + align-items: stretch; + justify-content: flex-start; + vertical-align: bottom; + } +} + +.su-lockup__cell1 { + min-height: 26px; + vertical-align: bottom; + width: auto; @include grid-media('md') { - @include grid-columns(auto auto 1fr, false); - @include grid-rows(auto auto); + @include margin(null -1px null null); + @include padding(null 7px 0 null); + align-self: flex-end; + border-right: solid 1px $color-black; + display: flex; + flex-shrink: 1; + max-width: 160px; + min-height: 32px; + } +} + +.su-lockup__cell2 { + @include grid-media('md') { + @include padding(0 null null 7px); + align-self: flex-end; + border-left: solid 1px $color-black; + flex-grow: 1; + vertical-align: bottom; } } .su-lockup__wordmark { @include logo; - @include grid-item-spans(1, span 1, 1, span 1); - display: block; color: $color-cardinal-red; font-size: 36px; - line-height: 1; + line-height: 17px; + vertical-align: bottom; @include grid-media('md') { font-size: 46px; - height: 33px; - line-height: .96; - } - - // Hide pipe/horizontal line on smaller devices if there is no line 5 - + .su-lockup__pipe { - display: none; - - @include grid-media('md') { - display: block; - } + line-height: 21px; } } -//Put the pipe in its own CSS grid cell so that its height auto adjusts to the tallest part of the lockup -.su-lockup__pipe { - @include margin(7px null); - @include grid-item-spans(1, span 1, 3, span 1); - display: block; - content: ""; - width: 118px; - height: 1px; - background-color: $color-black; +.su-lockup__wordmark-wrapper { + line-height: 26px; @include grid-media('md') { - @include margin(0 7px); - @include grid-item-spans(2, span 1, 1, span 1); - display: inline-block; - width: 1px; - height: 100%; + line-height: 32px; } - } -.su-lockup__sitename-line1, -.su-lockup__sitename-line2, -.su-lockup__sitename-line5 { +.su-lockup__line1, +.su-lockup__line2, +.su-lockup__line3, +.su-lockup__line4, +.su-lockup__line5 { @include font-smoothing; - display: block; - @include grid-item-spans(1, span 1); color: $color-black; + display: block; } +.su-lockup__line1 { + font-size: 2.8rem; -.su-lockup__sitename-line1 { - @include grid-item-spans(null, null, 4, span 1); - font-size: 22px; - line-height: .8; - - @include grid-media('md') { - @include grid-item-spans(3, span 1, 1, span 1); - font-size: 30px; + @include grid-media-max('sm') { + font-size: 2.6rem; } } -.su-lockup__sitename-line2 { - display: none; +.su-lockup__line2 { + font-size: 2.6rem; } -.su-lockup__sitename-line5 { - @include grid-item-spans(null, null, 2, span 1); - font-size: 20px; - line-height: 1.1; +.su-lockup__line3 { + @include margin(0.5rem null null); + font-size: 2.6rem; + font-style: italic; - @include grid-media('md') { - @include padding(8px null null); - @include grid-item-spans(1, span 3, 2, span 1); - font-size: 27px; + @include grid-media-max('sm') { + @include margin(0); + font-size: 1.9rem; } } -.su-lockup__sitename-line1--uppercase, -.su-lockup__sitename-line5--uppercase { +.su-lockup__line4 { + @include margin(0.5rem null null); + font-size: 2.5rem; + font-weight: $font-bold; + letter-spacing: .05rem; + line-height: 1em; + margin-left: -.2rem; text-transform: uppercase; - font-weight: 700; } -.su-lockup__sitename-line5--uppercase { - font-size: 18px; +.su-lockup__line5 { + font-size: 2.7rem; + line-height: 1em; + width: 100%; + + @include grid-media('md') { + @include margin(8px null null null); + font-size: 3rem; + } } diff --git a/core/scss/components/lockup/index.scss b/core/scss/components/lockup/index.scss index e913c3606..481cb5801 100644 --- a/core/scss/components/lockup/index.scss +++ b/core/scss/components/lockup/index.scss @@ -6,4 +6,23 @@ @import 'lockup', - 'lockup--two-lines'; + 'lockup--option-a', + 'lockup--option-b', + 'lockup--option-c', + 'lockup--option-d', + 'lockup--option-e', + 'lockup--option-f', + 'lockup--option-g', + 'lockup--option-h', + 'lockup--option-i', + 'lockup--option-j', + 'lockup--option-k', + 'lockup--option-l', + 'lockup--option-m', + 'lockup--option-n', + 'lockup--option-o', + 'lockup--option-p', + 'lockup--option-q', + 'lockup--option-r', + 'lockup--option-s', + 'lockup--option-t'; diff --git a/core/scss/core/index.scss b/core/scss/core/index.scss index b25c316a3..ea06b4dad 100644 --- a/core/scss/core/index.scss +++ b/core/scss/core/index.scss @@ -7,12 +7,6 @@ // // Style guide: Core -// Grid -// -// Markup: ../../templates/core/flex-grid/flex-grid.twig -// -// Style guide: Core.Grid - // Helpers // // Helper partials. diff --git a/core/templates/components/lockup/lockup.json b/core/templates/components/lockup/lockup.json index ce1192027..ecf6dad7a 100644 --- a/core/templates/components/lockup/lockup.json +++ b/core/templates/components/lockup/lockup.json @@ -1,8 +1,8 @@ { "link": "https://decanter.stanford.edu", - "line1": "Required First Line", - "line2": "Optional Second Line", - "line5": "Optional Last Line", - "line1_modifier_class": "su-lockup__sitename-line1--small", - "line5_modifier_class": "su-lockup__sitename-line5--uppercase" -} \ No newline at end of file + "line1": "Finance", + "line2": "Program In Thermal Optics", + "line3": "Mechanical Engineering", + "line4": "Engineering", + "line5": "School of Humanities & Sciences" +} diff --git a/core/templates/components/lockup/lockup.twig b/core/templates/components/lockup/lockup.twig index 9bf1d065d..390be6875 100644 --- a/core/templates/components/lockup/lockup.twig +++ b/core/templates/components/lockup/lockup.twig @@ -8,19 +8,27 @@ * Default class for the lockup: * - .su-lockup - Lockup with one line to the right of the wordmark. * - * Available variant for the lockup: - * - .su-lockup--two-lines - Lockup with two lines to the right of the wordmark. - * - * Default classes for the individual site name lines: - * - .su-lockup__sitename-line1 - Regular font style for line 1 - * - .su-lockup__sitename-line2 - Regular font style for line 2 - * - .su-lockup__sitename-line5 - Regular font style for line 5 - * - * Available variants for the individual site name lines: - * - .su-lockup__sitename-line1--small - Small font size for line 1 - only when line 2 exists - * - .su-lockup__sitename-line1--supersmall - Supersmall font size for line 1 - only when line 2 exists - * - .su-lockup__sitename-line1--uppercase - Uppercase and bold font for line 1 - * - .su-lockup__sitename-line5--uppercase - Uppercase, bold and smaller font for line 5 + * Available variants for the lockup: + * - .su-lockup--option-a + * - .su-lockup--option-b + * - .su-lockup--option-c + * - .su-lockup--option-d + * - .su-lockup--option-e + * - .su-lockup--option-f + * - .su-lockup--option-g + * - .su-lockup--option-h + * - .su-lockup--option-i + * - .su-lockup--option-j + * - .su-lockup--option-k + * - .su-lockup--option-l + * - .su-lockup--option-m + * - .su-lockup--option-n + * - .su-lockup--option-o + * - .su-lockup--option-p + * - .su-lockup--option-q + * - .su-lockup--option-r + * - .su-lockup--option-s + * - .su-lockup--option-t * * Available variables: * - attributes: For additional HTML attributes not already provided. @@ -28,32 +36,54 @@ * - link: The URL that the lockup links to. * - line1: Line 1 of the unit/site name text (to the right of the wordmark). * - line2: Line 2 of the unit/site name text (to the right of the wordmark). + * - line3: Line 3 of the unit/site name text (to the right of the wordmark). + * - line4: Line 4 of the unit/site name text (under the wordmark). * - line5: Line 5 of the unit/site name text (at the bottom part of the lockup). - * - line1_modifier_class: Classes for line 1 font variants - * - line5_modifier_class: Classes for line 5 font variants + * - region_attributes: Attributes for each region variable */ #} -{% if line2 is not empty %} - -{% else %} - -{% endif %} - Stanford + + {% if link is not empty %} + + {% endif %} + {#- Cell container #1 -#} +
+ {% block cell1 %} +
+ Stanford + {% if line4 is not empty %} + {{ line4 }} + {% endif %} +
+ {% endblock %} +
- {# Line 5 of Site Name - Optional #} - {% if line5 is not empty %} - {{ line5 }} + {#- Cell container #2 -#} +
+ {% block cell2 %} + {% if line1 is not empty %} + {{ line1 }} {% endif %} - {# Divider line - Hide on mobile if no line 5 #} - - - {# Line 1 of Site Name - Required #} - {{ line1 }} - {% if line2 is not empty %} - {# Line 2 of Site Name - Optional #} - {{ line2 }} + {{ line2 }} + {% endif %} + {% if line3 is not empty %} + {{ line3 }} {% endif %} - \ No newline at end of file + {% endblock %} +
+ + {#- Line 5 of Site Name - Optional -#} + {% if line5 is not empty %} +
+ {%- block cell3 -%} + {{- line5 -}} + {%- endblock -%} +
+ {% endif %} + {% if link is not empty %} + + {% endif %} + diff --git a/package-lock.json b/package-lock.json index e778e15cb..62c0ac4e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1246,6 +1246,15 @@ "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", "dev": true }, + "end-of-stream": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", + "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==", + "dev": true, + "requires": { + "once": "^1.4.0" + } + }, "engine.io": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-3.2.1.tgz", @@ -1568,18 +1577,29 @@ "dev": true }, "execa": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-0.10.0.tgz", - "integrity": "sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", + "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", "dev": true, "requires": { "cross-spawn": "^6.0.0", - "get-stream": "^3.0.0", + "get-stream": "^4.0.0", "is-stream": "^1.1.0", "npm-run-path": "^2.0.0", "p-finally": "^1.0.0", "signal-exit": "^3.0.0", "strip-eof": "^1.0.0" + }, + "dependencies": { + "get-stream": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", + "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", + "dev": true, + "requires": { + "pump": "^3.0.0" + } + } } }, "exit": { @@ -3205,9 +3225,9 @@ } }, "handlebars": { - "version": "4.0.12", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.12.tgz", - "integrity": "sha512-RhmTekP+FZL+XNhwS1Wf+bTTZpdLougwt5pcgA1tuz6Jcx0fpH/7z0qd71RKnZHBCxIRBHfBOnio4gViPemNzA==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.0.tgz", + "integrity": "sha512-l2jRuU1NAWK6AW5qqcTATWQJvNPEwkM7NEKSiv/gqOsoSQbVoWyqVEY5GS+XPQ88zLNmqASRpzfdm8d79hJS+w==", "dev": true, "requires": { "async": "^2.5.0", @@ -3326,9 +3346,9 @@ } }, "highlight.js": { - "version": "9.13.1", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.13.1.tgz", - "integrity": "sha512-Sc28JNQNDzaH6PORtRLMvif9RSn1mYuOoX3omVjnb0+HbpPygU2ALBI0R/wsiqCb4/fcp07Gdo8g+fhtFrQl6A==", + "version": "9.14.2", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.14.2.tgz", + "integrity": "sha512-Nc6YNECYpxyJABGYJAyw7dBAYbXEuIzwzkqoJnwbc1nIpCiN+3ioYf0XrBnLiyyG0JLuJhpPtt2iTSbXiKLoyA==", "dev": true }, "hooker": { @@ -3893,9 +3913,9 @@ "dev": true }, "kss": { - "version": "3.0.0-beta.23", - "resolved": "https://registry.npmjs.org/kss/-/kss-3.0.0-beta.23.tgz", - "integrity": "sha1-eXBt0bXoDkPZUbhVvop5dEJyKwc=", + "version": "3.0.0-beta.25", + "resolved": "https://registry.npmjs.org/kss/-/kss-3.0.0-beta.25.tgz", + "integrity": "sha512-jF8zh0HXUZfcysCyyKsftWyLAXkRh1Qt7ikd6WgmfKVhMRygq0x0YUFzTRB/SB57jSyk1DybbfopmFutY6Qo6Q==", "dev": true, "requires": { "bluebird": "^3.3.3", @@ -3906,7 +3926,7 @@ "markdown-it": "^8.4.1", "nunjucks": "^3.0.1", "resolve": "^1.6.0", - "twig": "^1.10.4", + "twig": "^1.13.0", "twig-drupal-filters": "^2.0.0", "yargs": "^12.0.1" }, @@ -3985,23 +4005,23 @@ } }, "os-locale": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.0.1.tgz", - "integrity": "sha512-7g5e7dmXPtzcP4bgsZ8ixDVqA7oWYuEz4lOSujeWyliPai4gfVDiFIcwBg3aGCPnmSGfzOKTK3ccPn0CKv3DBw==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz", + "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==", "dev": true, "requires": { - "execa": "^0.10.0", + "execa": "^1.0.0", "lcid": "^2.0.0", "mem": "^4.0.0" } }, "resolve": { - "version": "1.8.1", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz", - "integrity": "sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==", + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.0.tgz", + "integrity": "sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==", "dev": true, "requires": { - "path-parse": "^1.0.5" + "path-parse": "^1.0.6" } }, "string-width": { @@ -4023,6 +4043,17 @@ "ansi-regex": "^3.0.0" } }, + "twig": { + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/twig/-/twig-1.13.2.tgz", + "integrity": "sha512-F7o4sDD2DaIj2II8VrbmDXnompOO6ESNQSh97rtJuif00v5FoUWTlkJE1ZlfeFNAwSCU9rexWsB1+3oF8jmU/Q==", + "dev": true, + "requires": { + "locutus": "^2.0.5", + "minimatch": "3.0.x", + "walk": "2.3.x" + } + }, "which-module": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", @@ -4360,14 +4391,14 @@ "dev": true }, "mem": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/mem/-/mem-4.0.0.tgz", - "integrity": "sha512-WQxG/5xYc3tMbYLXoXPm81ET2WDULiU5FxbuIoNbJqLOOI8zehXFdZuiUEgfdrU2mVB1pxBZUGlYORSrpuJreA==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/mem/-/mem-4.1.0.tgz", + "integrity": "sha512-I5u6Q1x7wxO0kdOpYBB28xueHADYps5uty/zg936CiG8NTe5sJL8EjrCuLneuDW3PlMdZBGDIn8BirEVdovZvg==", "dev": true, "requires": { "map-age-cleaner": "^0.1.1", "mimic-fn": "^1.0.0", - "p-is-promise": "^1.1.0" + "p-is-promise": "^2.0.0" } }, "meow": { @@ -4794,15 +4825,14 @@ "dev": true }, "nunjucks": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.1.4.tgz", - "integrity": "sha512-OIbdsl7jAZpw5V6GIa6wJc2AKCC/JSwuVdNKuVpFZ+eB3kYugoGF6OVN/jKNFe52782Uj89n0pT0DiSS1KPbxA==", + "version": "3.1.7", + "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.1.7.tgz", + "integrity": "sha512-MrjI68cobXQnyMK/LeY7BgYZ+7o4xn1UNGOe1y8ACVo4cn/1FXc1S4ySqHbmzFqxq/qtMWrehysTuXdbTvf7JA==", "dev": true, "requires": { "a-sync-waterfall": "^1.0.0", "asap": "^2.0.3", "chokidar": "^2.0.0", - "postinstall-build": "^5.0.1", "yargs": "^3.32.0" }, "dependencies": { @@ -5039,15 +5069,15 @@ "dev": true }, "p-is-promise": { - "version": "1.1.0", - "resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz", - "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.0.0.tgz", + "integrity": "sha512-pzQPhYMCAgLAKPWD2jC3Se9fEfrD9npNos0y150EeqZll7akhEgGhTW/slB6lHku8AvYGiJ+YJ5hfHKePPgFWg==", "dev": true }, "p-limit": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz", - "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.1.0.tgz", + "integrity": "sha512-NhURkNcrVB+8hNfLuysU8enY5xn2KXphsHBaC2YmRNTZRc7RWusw6apSpdEj3jo4CMb6W9nrF6tTnsJsJeyu6g==", "dev": true, "requires": { "p-try": "^2.0.0" @@ -5522,12 +5552,6 @@ "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", "dev": true }, - "postinstall-build": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postinstall-build/-/postinstall-build-5.0.3.tgz", - "integrity": "sha512-vPvPe8TKgp4FLgY3+DfxCE5PIfoXBK2lyLfNCxsRbDsV6vS4oU5RG/IWxrblMn6heagbnMED3MemUQllQ2bQUg==", - "dev": true - }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -5579,6 +5603,16 @@ "integrity": "sha512-AeUmQ0oLN02flVHXWh9sSJF7mcdFq0ppid/JkErufc3hGIV/AMa8Fo9VgDo/cT2jFdOWoFvHp90qqBH54W+gjQ==", "dev": true }, + "pump": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", + "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", + "dev": true, + "requires": { + "end-of-stream": "^1.1.0", + "once": "^1.3.1" + } + }, "punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", @@ -6996,9 +7030,9 @@ }, "dependencies": { "twig": { - "version": "1.12.0", - "resolved": "https://registry.npmjs.org/twig/-/twig-1.12.0.tgz", - "integrity": "sha512-zm5OQXb8bQDGQUPytFgjqMKHhqcz/s6pU6Nwsy+rKPhsoOOVwYeHnziiDGFzeTDiFd28M8EVkEO8we6ikcrGjQ==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/twig/-/twig-1.13.2.tgz", + "integrity": "sha512-F7o4sDD2DaIj2II8VrbmDXnompOO6ESNQSh97rtJuif00v5FoUWTlkJE1ZlfeFNAwSCU9rexWsB1+3oF8jmU/Q==", "dev": true, "requires": { "locutus": "^2.0.5", @@ -7030,9 +7064,9 @@ "dev": true }, "uc.micro": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz", - "integrity": "sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg==", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", + "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==", "dev": true }, "uglify-js": { diff --git a/package.json b/package.json index da3883390..55fafe37c 100644 --- a/package.json +++ b/package.json @@ -31,10 +31,10 @@ "grunt-postcss": "^0.9.0", "grunt-run": "^0.8.0", "grunt-sass": "^3.0.0", - "node-sass": "^4.10.0", "grunt-sass-lint": "^0.2.4", "jquery": "^3.3.1", - "kss": "~3.0.0-beta.23", + "kss": "^3.0.0-beta.25", + "node-sass": "^4.10.0", "postcss-cli": "^5.0.0", "twig": "1.11.1" } From 82b6400c3556c8a70f4cd639ecb1969601f921f6 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Thu, 14 Mar 2019 11:46:19 -0700 Subject: [PATCH 3/5] get rid of ID (#342) --- core/templates/components/brand-bar/brand-bar.twig | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/templates/components/brand-bar/brand-bar.twig b/core/templates/components/brand-bar/brand-bar.twig index a3cea69ab..b5bdacc25 100644 --- a/core/templates/components/brand-bar/brand-bar.twig +++ b/core/templates/components/brand-bar/brand-bar.twig @@ -14,6 +14,6 @@ * - modifier_class: Additional css classes to change look and behaviour. */ #} -
+
-
\ No newline at end of file +
From d47acf4b6fec4a35d3999edd618c620e85397d5b Mon Sep 17 00:00:00 2001 From: Sherakama Date: Fri, 15 Mar 2019 20:06:42 -0700 Subject: [PATCH 4/5] Update main-nav.twig (#331) --- core/templates/components/main-nav/main-nav.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/templates/components/main-nav/main-nav.twig b/core/templates/components/main-nav/main-nav.twig index 1c4d58896..e30d307ba 100644 --- a/core/templates/components/main-nav/main-nav.twig +++ b/core/templates/components/main-nav/main-nav.twig @@ -14,7 +14,7 @@ + */ +#}