From 9070f4b2cfd094d01890c0f170fcb2975258a2ee Mon Sep 17 00:00:00 2001 From: walsh9 Date: Wed, 10 Jul 2024 17:28:39 -0400 Subject: [PATCH 01/10] split css into smaller files --- app/styles/_centennial.scss | 759 +----------------- .../centennial/_centennial-archives.scss | 8 + app/styles/centennial/_centennial-base.scss | 30 + .../centennial/_centennial-card-list.scss | 12 + app/styles/centennial/_centennial-card.scss | 200 +++++ .../centennial/_centennial-cta-narrow.scss | 56 ++ .../centennial/_centennial-cta-rectangle.scss | 66 ++ .../centennial/_centennial-explore.scss | 8 + app/styles/centennial/_centennial-header.scss | 59 ++ .../centennial/_centennial-logo-wnyc.scss | 46 ++ .../centennial/_centennial-message.scss | 60 ++ .../_centennial-new-york-stories.scss | 49 ++ .../centennial/_centennial-timeline.scss | 25 + app/styles/centennial/_event-card.scss | 128 +++ 14 files changed, 759 insertions(+), 747 deletions(-) create mode 100644 app/styles/centennial/_centennial-archives.scss create mode 100644 app/styles/centennial/_centennial-base.scss create mode 100644 app/styles/centennial/_centennial-card-list.scss create mode 100644 app/styles/centennial/_centennial-card.scss create mode 100644 app/styles/centennial/_centennial-cta-narrow.scss create mode 100644 app/styles/centennial/_centennial-cta-rectangle.scss create mode 100644 app/styles/centennial/_centennial-explore.scss create mode 100644 app/styles/centennial/_centennial-header.scss create mode 100644 app/styles/centennial/_centennial-logo-wnyc.scss create mode 100644 app/styles/centennial/_centennial-message.scss create mode 100644 app/styles/centennial/_centennial-new-york-stories.scss create mode 100644 app/styles/centennial/_centennial-timeline.scss create mode 100644 app/styles/centennial/_event-card.scss diff --git a/app/styles/_centennial.scss b/app/styles/_centennial.scss index 423b64e98..96bee5274 100644 --- a/app/styles/_centennial.scss +++ b/app/styles/_centennial.scss @@ -1,764 +1,29 @@ -@import url("https://p.typekit.net/p.css?s=1&k=ejx5fro&ht=tk&f=4648.4649.4650.4651.4455.4677.4948.5045&a=53485050&app=typekit&e=css"); -@font-face { - font-family:"ff-tisa-web-pro"; - src:url("https://use.typekit.net/af/8bcf67/00000000000000003b9b0789/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/8bcf67/00000000000000003b9b0789/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/8bcf67/00000000000000003b9b0789/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); - font-display:swap;font-style:normal;font-weight:700; - font-feature-settings: "lnum"; -} +@import 'centennial/centennial-base'; -:root { - --centennial-header-size: 36px; - --centennial-header-font-family: 'Open Sans', sans-serif; - --centennial-header-font-weight: 800; - --centennial-header-line-height: 1.2; - --centennial-module-spacing: 40px; -} +@import 'centennial/centennial-logo-wnyc'; +@import 'centennial/centennial-timeline'; +@import 'centennial/centennial-archives'; +@import 'centennial/centennial-explore'; +@import 'centennial/centennial-message'; +@import 'centennial/centennial-cta-narrow'; +@import 'centennial/centennial-cta-rectangle'; +@import 'centennial/centennial-new-york-stories'; +@import 'centennial/centennial-card-list'; +@import 'centennial/centennial-card'; +@import 'centennial/event-card'; -.centennial-module { - margin-bottom: var(--centennial-module-spacing); -} -.centennial-module h2 { - display: block; - margin: auto; - text-align: center; - font-size: var(--centennial-header-size); - font-family: var(--centennial-header-font-family); - font-weight: var(--centennial-header-font-weight); - line-height: var(--centennial-header-line-height); - text-transform: uppercase; - margin-bottom: 12px; -} -.centennial-header { - margin-bottom: var(--centennial-module-spacing); -} -.centennial-header__hero, .centennial-header__hero img { - display: block; - margin: auto; - min-width: 100%; -} -.centennial-explore h3, .centennial-archives h2 { - text-transform: uppercase; - text-align: center; - font-weight: 800; - font-size: 14px; - margin: 0; - padding: 0; -} -.centennial-header__social { - .nypr-social-icons { - display: inline-block; - width: auto; - padding: 0; - margin: 0; - } - .nypr-social-icons__header { - font-size: 14px; - line-height: 24px; - font-weight: 400; - display: inline-block; - color: black; - vertical-align: top; - padding: 0; - } - .nypr-social-icons__list { - display: inline-block; - list-style: none; - } - .nypr-social-icons__item { - display: inline-block; - margin: 0 0 0 12px; - } - .nypr-social-icons__link { - color: white; - display: inline-block; - width: 24px; - height: 24px; - line-height: 20px; - border-radius: 50%; - background-color: black; - &:hover, - &:focus { - background-color: #d3008c; - border-color: #d3008c; - color: white; - } - } - .nypr-social-icons__icon { - width: 100%; - text-align: center; - } - .nypr-social-icons__icon.fa-x { - display: inline-block; - height: 100%; - background: url(/assets/svg/100/_x_twitter.svg) center / 15px 15px no-repeat; - } -} -.centennial-timeline__wrapper { - display: flex; - align-items: center; - height: 180px; - box-shadow: inset 0px 1px 1px 0px white; - background: - url("/assets/svg/100/1924.svg") left top -1px / 300px no-repeat, - url("/assets/svg/100/2024.svg") right bottom -1px / 300px no-repeat, - linear-gradient(182deg, #DE1E3D 0%, #FF7800 100%); -} -@media screen and (min-width: 1025px) { - .centennial-timeline__wrapper { - height: 250px; - background: - url("/assets/svg/100/1924.svg") left top -1px / 400px no-repeat, - url("/assets/svg/100/2024.svg") right bottom -1px / 400px no-repeat, - linear-gradient(182deg, #DE1E3D 0%, #FF7800 100%); - } -} -.centennial-timeline__wrapper a { - display: inline-block; - margin: auto; -} -.centennial-message h2 { - font-size: 24px; - text-align: left; -} -.centennial-message__wrapper { - display: flex; - flex-direction: column; - justify-content: space-between; -} -h2.centennial-message__header { - display: inline-block; - font-size: 14px; - padding: 8px 10px; - font-weight: 800; - text-align: left; - background-color: #F2C245; -} -.centennial-message__quote { - font-size: 14px; - font-weight: 600; -} -.centennial-message__attribution { - font-size: 14px; -} -@media screen and (min-width: 1025px) { - .centennial-message__wrapper { - flex-direction: row; - column-gap: 32px; - } - h2.centennial-message__header { - font-size: 18px; - } - .centennial-message__quote { - font-size: 18px; - font-weight: 400; - } - .centennial-message__attribution { - font-size: 18px; - } -} -@media screen and (min-width: 1300px) { - h2.centennial-message__header { - font-size: 24px; - } -} -.centennial-message__video { - flex: 1 0 60%; -} -.centennial-message__video-wrapper { - position: relative; - padding-bottom: 56.25%; -} -.centennial-message__video-wrapper iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} -.centennial-ctas { - display: flex; -} -.centennial-cta { - width: 50%; - height: 500px; - // background gradient - background: linear-gradient(90deg, #FFC107 0%, #FF9800 100%); - color: white; -} -.centennial-card-list { - display: flex; - flex-direction: column; - justify-content: space-between; -} -@media screen and (min-width: 800px) { - .centennial-card-list { - flex-direction: row; - column-gap: 16px; - } -} -.centennial-card { - display: flex; - flex-direction: column; - width: 100%; - margin-top: 24px; - .centennial-card__image img { - width: 100%; - height: auto; - aspect-ratio: 27 / 20; - } - .centennial-card__image.centennial-card__image--placeholder { - width: 100%; - height: auto; - aspect-ratio: 27 / 20; - background: #D9D9D9; - } - .centennial-card__image { - display: inline-block; - margin-bottom: 6px; - } - .centennial-card__footer { - display: flex; - justify-content: space-between; - line-height: 36px; - } - .centennial-card__content { - display: flex; - flex-direction: column; - } - .centennial-card__title { - display: inline-block; - font-size: 16px; - font-weight: 700; - line-height: 20px; - margin-bottom: 10px; - color: black; - text-decoration: none; - border: none; - &:hover, &:focus { - color: #d3008c; - text-decoration: none; - border: none; - } - } - .centennial-card__tease { - font-size: 14px; - line-height: 24px; - } - .listen-button { - color: black; - background-color: #D9D9D9; - border-color: #D9D9D9; - polygon { - color: black; - } - &:not([disabled]) { - &:hover, - &:focus { - background-color: #bcbcbc; - border-color: #bcbcbc; - color: black; - fill: black; - } - } - } - .centennial-card__duration { - font-size: 12px; - } - .centennial-toggletip { - position: relative; - display: inline-block; - } - .centennial-toggletip-button { - border: none; - margin: 0px; - padding: 0px; - width: 19px; - height: 19px; - path { - fill: #979797; - } - &:hover path, &:focus path { - fill: #333; - } - } - .centennial-toggletip-tooltip { - z-index: 99; - position: absolute; - padding: 10px; - display: none; - min-width: 170px; - border-radius: 4px; - background-color: rgb(244, 242, 240); - box-shadow: none; - right: 0; - margin-top: .75rem; - padding: .5rem; - } - .centennial-toggletip-tooltip.mod-visible { - display: block; - } - .centennial-toggletip-tooltip ul, .centennial-toggletip-tooltip li { - list-style: none; - margin: 0; - padding: 0; - } - .centennial-toggletip-tooltip .btn { - height: 40px; - font-size: 16px; - width: 100%; - color: black; - background-color: rgb(244, 242, 240); - border-color: rgb(244, 242, 240); - - &:not([disabled]) { - &:hover, - &:focus { - background-color: #fff; - border-color: #fff; - color: black; - } - } - i, svg { - margin-right: 6px; - } - } -} - -@media screen and (min-width: 800px) { - .centennial-card { - max-width: 250px; - .centennial-card__content { - .centennial-card__title { - display: inline-block; - height: 42px; - max-height: 42px; - overflow: hidden; - text-overflow: ellipsis; - } - .centennial-card__tease { - display: inline-block; - height: 98px; - max-height: 98px; - overflow: hidden; - text-overflow: ellipsis; - } - } - .listen-button { - color: white; - background-color: black; - border-color: black; - - polygon { - color: white; - } - &:not([disabled]) { - &:hover, - &:focus { - background-color: #d3008c; - border-color: #d3008c; - color: white; - fill: white; - } - } - } - .centennial-toggletip-button { - border: none; - margin: 0px; - padding: 0px; - width:19px; - height:19px; - path { - fill: black; - } - &:hover path, &:focus path { - fill: #d3008c; - } - } - } - @media screen and (min-width: 840px) { - .centennial-card { - max-width: 270px; - } - } -} -.centennial-toggletip-tooltip { - z-index:99; - display: none; - background: #eee; - border: 1px solid #ccc; - padding: 10px; - border-radius: 8px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - position: absolute; - width: 14m; - font-size:.8em; -} -.centennial-toggletip-tooltip.mod-visible { - display: block; -} -// stories - Tell Us Your New York Stories -.centennial-stories__hero { - display: flex; - flex-direction: row; -} -.centennial-stories__hero-text { - width: 100%; - display: block; - color: white; - background-color: #BB299F; - padding: 42px 22px; -} -@media screen and (min-width: 1270px) { - .centennial-stories__hero-text { - width: 375px; - height: 252px; - } -} -.centennial-stories__hero-image { - display: none; -} -@media screen and (min-width: 1270px) { - .centennial-stories__hero-image { - display: inline-block; - } -} - -.centennial-stories__categories { - display: flex; - flex-direction: column; -} -@media screen and (min-width: 800px) { - .centennial-stories__categories { - flex-direction: row; - justify-content: space-between; - column-gap: 48px; - } -} -.centennial-stories__category { - flex: 1 1 0px; - margin-bottom: 32px; - h3 { - font-size: 24px; - line-height: 30px; - font-weight: 700px; - border-bottom: 1px solid #000; - margin-bottom: 16px; - } -} - -.event-card { - width: 100%; - display: flex; - flex-direction: row; - border-bottom: #000000 1px solid; -} -.event-card__image-wrapper { - flex: 0 0 60px; - margin-right: 22px; - padding: 32px 0px; - position: relative; -} -.event-card__image-wrapper a:focus { - outline: 1px solid blue; -} -.event-card__details { - flex: 1 1 auto; - padding: 32px 0px; -} -.event-card__date { - display: flex; - flex-direction: column; - width: 60px; - height: 60px; - justify-content: center; - background-color: black; - color: white; -} -.event-card__image { - display: none; -} -.event-card__day { - font-size: 26px; - font-weight: 700; - line-height: 1; - text-align: center; -} -.event-card__month { - font-size: 11px; - font-weight: 600; - text-transform: uppercase; - text-align: center; -} - .event-card__title { - font-size: 16px; - font-weight: 700; - line-height: 28.8px -} -.event-card__time { - margin-bottom: 4px; -} -.event-card__tags { - margin-bottom: 4px; -} -.event-card__tag { - display: inline-block; - padding: 4px 8px; - margin-right: 4px; - font-size: 10px; - font-weight: 800; - text-transform: uppercase; -} -.event-card__description { - display: none; - font-size: 14px; -} -.event-card__description { - p:last-child { - margin-bottom: 0; - } -} -.event-card__tag.mod-live-stream { - background-color: #88DA5E; - color: black; -} -.event-card__tag.mod-in-person { - background-color: #3CBEF2; - color: black; -} -.event-card__arrow { - flex: 0 0 30px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - a { - display: block; - height:fit-content; - display: flex; - align-items: center; - height: 100%; - &:hover, &:focus { - cursor: pointer; - text-decoration: none; - border-bottom: transparent; - background-color: #ddd; - } - svg { - margin: 0 auto; - display: block; - } - } -} - -@media screen and (min-width: 1025px) { - .event-card { - max-width: 811px; - margin: 0 auto; - } - .event-card__image-wrapper { - flex: 0 0 250px; - margin-right: 22px; - max-width: 230px; - padding: 32px 0px; - } - .event-card__image { - display: inline-block; - max-width: 230px; - } - .event-card__date { - position: absolute; - top: 32px; - left: 0; - } - .event-card__description { - display: block; - } -} - -// CTA Narrow -.centennial-cta-narrow__wrapper { - width: 100%; - box-sizing: border-box; - padding: 16px 16px; - background: linear-gradient(0deg, #9DED4E -13.97%, #0A69BE 79.14%); - color: white; - display: flex; - flex-direction: column; -} -.centennial-cta-narrow__text { - display: flex; - flex-direction: column; -} -.centennial-cta-narrow__text h3 { - display: inline-block; - font-family: 'ff-tisa-web-pro', serif; - font-size: 18px; - line-height: 1.3; - font-weight: 700; - text-align: center; - margin: 0 0 12px 0; -} -.centennial-cta-narrow__text p { - display: inline-block; - font-size: 16px; - line-height: 1.3; - text-align: center; - margin: 0 0 12px 0; -} -.centennial-cta-narrow__button-wrapper { - display: flex; - justify-content: center; -} -@media screen and (min-width: 800px) { - .centennial-cta-narrow__wrapper { - flex-direction: row; - justify-content: space-between; - } - .centennial-cta-narrow__text h3 { - text-align: left; - font-size: 25px; - } - .centennial-cta-narrow__text p { - text-align: left; - font-weight: 600; - } - .centennial-cta-narrow__button-wrapper { - flex: 0 0 220px; - } - .centennial-cta-narrow__button { - width: 188px; - text-align: center; - display: inline-block; - margin: auto; - } -} - -//centennial cta rectangle -.centennial-cta-rectangle__wrapper { - display: flex; - flex-direction: column; - justify-content: space-between; - background: linear-gradient(0deg, #9DED4E 0%, #0A69BE 100%); - color: white; - padding: 16px 8px 16px 24px; - display: flex; - flex-direction: row; - margin: auto; -} -.centennial-cta-rectangle__contents { - display: inline-flex; - flex-direction: row; - justify-content: space-between; -} -.centennial-cta-rectangle__image { - flex: 1 0 130px; - display: flex; - padding: 0; - align-items: center; - justify-content: center; -} -.centennial-cta-rectangle__image img { - width: 115px; - height: 115px; -} -.centennial-cta-rectangle__header { - font-family: ff-tisa-web-pro, serif; - font-size: 28px; - font-weight: 700; - line-height: 1.2; - margin-bottom: 24px; -} -.centennial-cta-rectangle__text { - font-size: 14px; -} -.centennial-cta-rectangle__button { - width: calc(100% - 24px); - text-align: center; -} -@media screen and (min-width: 800px) { - .centennial-cta-rectangle__wrapper { - max-width: 496px; - margin: auto; - padding: 36px; - } - .centennial-cta-rectangle__header { - font-size: 36px; - } - .centennial-cta-rectangle__image { - flex: 1 0 230px; - } - .centennial-cta-rectangle__image img { - width: 215px; - height: 215px; - } - .centennial-cta-rectangle__text { - font-size: 14px; - } - .centennial-cta-rectangle__button { - width: 100%; - text-align: center; - } -} - -//logo -.centennial-logo-wnyc { - width: 70px; - height: 70px; - padding: 0; - margin-top: -10px; - margin-bottom: -22px; - margin-left: -25px; -} -@media screen and (max-width: 1024px) { - .sitechrome-top { - padding: 10px; - } - .sitechrome-topbody-right { - margin-bottom: 0px; - } -} -.centennial-logo-outer { - fill: #FFFFFF; -} -.centennial-logo-inner > path { - fill: #DE1E3D; -} -@media screen and (min-width: 1025px) { - .centennial-logo-wnyc { - width: 100px; - height: 100px; - margin: 0; - } - .centennial-logo-outer { - fill: #DE1E3D; - } - .centennial-logo-inner > path { - fill: #FFFFFF; - } - .nav--homepage { - .centennial-logo-outer { - fill: #FFFFFF; - } - .centennial-logo-inner > path { - fill: #DE1E3D; - } - } -} -.sitechrome-nav h1 a, .sitechrome-nav h1 a:hover { - padding: 22px 10px 22px 28px -} \ No newline at end of file diff --git a/app/styles/centennial/_centennial-archives.scss b/app/styles/centennial/_centennial-archives.scss new file mode 100644 index 000000000..649ff3985 --- /dev/null +++ b/app/styles/centennial/_centennial-archives.scss @@ -0,0 +1,8 @@ +.centennial-archives h2 { + text-transform: uppercase; + text-align: center; + font-weight: 800; + font-size: 14px; + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/app/styles/centennial/_centennial-base.scss b/app/styles/centennial/_centennial-base.scss new file mode 100644 index 000000000..5a2782b1f --- /dev/null +++ b/app/styles/centennial/_centennial-base.scss @@ -0,0 +1,30 @@ +@import url("https://p.typekit.net/p.css?s=1&k=ejx5fro&ht=tk&f=4648.4649.4650.4651.4455.4677.4948.5045&a=53485050&app=typekit&e=css"); +@font-face { + font-family:"ff-tisa-web-pro"; + src:url("https://use.typekit.net/af/8bcf67/00000000000000003b9b0789/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/8bcf67/00000000000000003b9b0789/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/8bcf67/00000000000000003b9b0789/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); + font-display:swap;font-style:normal;font-weight:700; + font-feature-settings: "lnum"; +} + +:root { + --centennial-header-size: 36px; + --centennial-header-font-family: 'Open Sans', sans-serif; + --centennial-header-font-weight: 800; + --centennial-header-line-height: 1.2; + --centennial-module-spacing: 40px; +} +.centennial-module { + margin-bottom: var(--centennial-module-spacing); +} + +.centennial-module h2 { + display: block; + margin: auto; + text-align: center; + font-size: var(--centennial-header-size); + font-family: var(--centennial-header-font-family); + font-weight: var(--centennial-header-font-weight); + line-height: var(--centennial-header-line-height); + text-transform: uppercase; + margin-bottom: 12px; +} \ No newline at end of file diff --git a/app/styles/centennial/_centennial-card-list.scss b/app/styles/centennial/_centennial-card-list.scss new file mode 100644 index 000000000..3beccf0b5 --- /dev/null +++ b/app/styles/centennial/_centennial-card-list.scss @@ -0,0 +1,12 @@ +.centennial-card-list { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +@media screen and (min-width: 800px) { + .centennial-card-list { + flex-direction: row; + column-gap: 16px; + } +} \ No newline at end of file diff --git a/app/styles/centennial/_centennial-card.scss b/app/styles/centennial/_centennial-card.scss new file mode 100644 index 000000000..384910674 --- /dev/null +++ b/app/styles/centennial/_centennial-card.scss @@ -0,0 +1,200 @@ +.centennial-card { + display: flex; + flex-direction: column; + width: 100%; + margin-top: 24px; + .centennial-card__image img { + width: 100%; + height: auto; + aspect-ratio: 27 / 20; + } + .centennial-card__image.centennial-card__image--placeholder { + width: 100%; + height: auto; + aspect-ratio: 27 / 20; + background: #D9D9D9; + } + .centennial-card__image { + display: inline-block; + margin-bottom: 6px; + } + .centennial-card__footer { + display: flex; + justify-content: space-between; + line-height: 36px; + } + .centennial-card__content { + display: flex; + flex-direction: column; + } + .centennial-card__title { + display: inline-block; + font-size: 16px; + font-weight: 700; + line-height: 20px; + margin-bottom: 10px; + color: black; + text-decoration: none; + border: none; + &:hover, &:focus { + color: #d3008c; + text-decoration: none; + border: none; + } + } + .centennial-card__tease { + font-size: 14px; + line-height: 24px; + } + .listen-button { + color: black; + background-color: #D9D9D9; + border-color: #D9D9D9; + polygon { + color: black; + } + &:not([disabled]) { + &:hover, + &:focus { + background-color: #bcbcbc; + border-color: #bcbcbc; + color: black; + fill: black; + } + } + } + .centennial-card__duration { + font-size: 12px; + } + .centennial-toggletip { + position: relative; + display: inline-block; + } + .centennial-toggletip-button { + border: none; + margin: 0px; + padding: 0px; + width: 19px; + height: 19px; + path { + fill: #979797; + } + &:hover path, &:focus path { + fill: #333; + } + } + .centennial-toggletip-tooltip { + z-index: 99; + position: absolute; + padding: 10px; + display: none; + min-width: 170px; + border-radius: 4px; + background-color: rgb(244, 242, 240); + box-shadow: none; + right: 0; + margin-top: .75rem; + padding: .5rem; + } + .centennial-toggletip-tooltip.mod-visible { + display: block; + } + .centennial-toggletip-tooltip ul, .centennial-toggletip-tooltip li { + list-style: none; + margin: 0; + padding: 0; + } + .centennial-toggletip-tooltip .btn { + height: 40px; + font-size: 16px; + width: 100%; + color: black; + background-color: rgb(244, 242, 240); + border-color: rgb(244, 242, 240); + + &:not([disabled]) { + &:hover, + &:focus { + background-color: #fff; + border-color: #fff; + color: black; + } + } + i, svg { + margin-right: 6px; + } + } +} + +@media screen and (min-width: 800px) { + .centennial-card { + max-width: 250px; + .centennial-card__content { + .centennial-card__title { + display: inline-block; + height: 42px; + max-height: 42px; + overflow: hidden; + text-overflow: ellipsis; + } + .centennial-card__tease { + display: inline-block; + height: 98px; + max-height: 98px; + overflow: hidden; + text-overflow: ellipsis; + } + } + .listen-button { + color: white; + background-color: black; + border-color: black; + + polygon { + color: white; + } + &:not([disabled]) { + &:hover, + &:focus { + background-color: #d3008c; + border-color: #d3008c; + color: white; + fill: white; + } + } + } + .centennial-toggletip-button { + border: none; + margin: 0px; + padding: 0px; + width:19px; + height:19px; + path { + fill: black; + } + &:hover path, &:focus path { + fill: #d3008c; + } + } + } + @media screen and (min-width: 840px) { + .centennial-card { + max-width: 270px; + } + } +} +.centennial-toggletip-tooltip { + z-index:99; + display: none; + background: #eee; + border: 1px solid #ccc; + padding: 10px; + border-radius: 8px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + position: absolute; + width: 14m; + font-size:.8em; +} +.centennial-toggletip-tooltip.mod-visible { + display: block; +} diff --git a/app/styles/centennial/_centennial-cta-narrow.scss b/app/styles/centennial/_centennial-cta-narrow.scss new file mode 100644 index 000000000..8f96b2f4a --- /dev/null +++ b/app/styles/centennial/_centennial-cta-narrow.scss @@ -0,0 +1,56 @@ +.centennial-cta-narrow__wrapper { + width: 100%; + box-sizing: border-box; + padding: 16px 16px; + background: linear-gradient(0deg, #9DED4E -13.97%, #0A69BE 79.14%); + color: white; + display: flex; + flex-direction: column; +} +.centennial-cta-narrow__text { + display: flex; + flex-direction: column; +} +.centennial-cta-narrow__text h3 { + display: inline-block; + font-family: 'ff-tisa-web-pro', serif; + font-size: 18px; + line-height: 1.3; + font-weight: 700; + text-align: center; + margin: 0 0 12px 0; +} +.centennial-cta-narrow__text p { + display: inline-block; + font-size: 16px; + line-height: 1.3; + text-align: center; + margin: 0 0 12px 0; +} +.centennial-cta-narrow__button-wrapper { + display: flex; + justify-content: center; +} +@media screen and (min-width: 800px) { + .centennial-cta-narrow__wrapper { + flex-direction: row; + justify-content: space-between; + } + .centennial-cta-narrow__text h3 { + text-align: left; + font-size: 25px; + } + .centennial-cta-narrow__text p { + text-align: left; + font-weight: 600; + } + .centennial-cta-narrow__button-wrapper { + flex: 0 0 220px; + } + .centennial-cta-narrow__button { + width: 188px; + text-align: center; + display: inline-block; + margin: auto; + } +} diff --git a/app/styles/centennial/_centennial-cta-rectangle.scss b/app/styles/centennial/_centennial-cta-rectangle.scss new file mode 100644 index 000000000..ce0476d66 --- /dev/null +++ b/app/styles/centennial/_centennial-cta-rectangle.scss @@ -0,0 +1,66 @@ +//centennial cta rectangle +.centennial-cta-rectangle__wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + background: linear-gradient(0deg, #9DED4E 0%, #0A69BE 100%); + color: white; + padding: 16px 8px 16px 24px; + display: flex; + flex-direction: row; + margin: auto; +} +.centennial-cta-rectangle__contents { + display: inline-flex; + flex-direction: row; + justify-content: space-between; +} +.centennial-cta-rectangle__image { + flex: 1 0 130px; + display: flex; + padding: 0; + align-items: center; + justify-content: center; +} +.centennial-cta-rectangle__image img { + width: 115px; + height: 115px; +} +.centennial-cta-rectangle__header { + font-family: ff-tisa-web-pro, serif; + font-size: 28px; + font-weight: 700; + line-height: 1.2; + margin-bottom: 24px; +} +.centennial-cta-rectangle__text { + font-size: 14px; +} +.centennial-cta-rectangle__button { + width: calc(100% - 24px); + text-align: center; +} +@media screen and (min-width: 800px) { + .centennial-cta-rectangle__wrapper { + max-width: 496px; + margin: auto; + padding: 36px; + } + .centennial-cta-rectangle__header { + font-size: 36px; + } + .centennial-cta-rectangle__image { + flex: 1 0 230px; + } + .centennial-cta-rectangle__image img { + width: 215px; + height: 215px; + } + .centennial-cta-rectangle__text { + font-size: 14px; + } + .centennial-cta-rectangle__button { + width: 100%; + text-align: center; + } +} \ No newline at end of file diff --git a/app/styles/centennial/_centennial-explore.scss b/app/styles/centennial/_centennial-explore.scss new file mode 100644 index 000000000..cb3070b73 --- /dev/null +++ b/app/styles/centennial/_centennial-explore.scss @@ -0,0 +1,8 @@ +.centennial-explore h3 { + text-transform: uppercase; + text-align: center; + font-weight: 800; + font-size: 14px; + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/app/styles/centennial/_centennial-header.scss b/app/styles/centennial/_centennial-header.scss new file mode 100644 index 000000000..64fc0d4fb --- /dev/null +++ b/app/styles/centennial/_centennial-header.scss @@ -0,0 +1,59 @@ +.centennial-header { + margin-bottom: var(--centennial-module-spacing); +} + +.centennial-header__hero, .centennial-header__hero img { + display: block; + margin: auto; + min-width: 100%; +} + +.centennial-header__social { + .nypr-social-icons { + display: inline-block; + width: auto; + padding: 0; + margin: 0; + } + .nypr-social-icons__header { + font-size: 14px; + line-height: 24px; + font-weight: 400; + display: inline-block; + color: black; + vertical-align: top; + padding: 0; + } + .nypr-social-icons__list { + display: inline-block; + list-style: none; + } + .nypr-social-icons__item { + display: inline-block; + margin: 0 0 0 12px; + } + .nypr-social-icons__link { + color: white; + display: inline-block; + width: 24px; + height: 24px; + line-height: 20px; + border-radius: 50%; + background-color: black; + &:hover, + &:focus { + background-color: #d3008c; + border-color: #d3008c; + color: white; + } + } + .nypr-social-icons__icon { + width: 100%; + text-align: center; + } + .nypr-social-icons__icon.fa-x { + display: inline-block; + height: 100%; + background: url(/assets/svg/100/_x_twitter.svg) center / 15px 15px no-repeat; + } +} \ No newline at end of file diff --git a/app/styles/centennial/_centennial-logo-wnyc.scss b/app/styles/centennial/_centennial-logo-wnyc.scss new file mode 100644 index 000000000..9e19bf4a4 --- /dev/null +++ b/app/styles/centennial/_centennial-logo-wnyc.scss @@ -0,0 +1,46 @@ +.centennial-logo-wnyc { + width: 70px; + height: 70px; + padding: 0; + margin-top: -10px; + margin-bottom: -22px; + margin-left: -25px; +} +@media screen and (max-width: 1024px) { + .sitechrome-top { + padding: 10px; + } + .sitechrome-topbody-right { + margin-bottom: 0px; + } +} +.centennial-logo-outer { + fill: #FFFFFF; +} +.centennial-logo-inner > path { + fill: #DE1E3D; +} +@media screen and (min-width: 1025px) { + .centennial-logo-wnyc { + width: 100px; + height: 100px; + margin: 0; + } + .centennial-logo-outer { + fill: #DE1E3D; + } + .centennial-logo-inner > path { + fill: #FFFFFF; + } + .nav--homepage { + .centennial-logo-outer { + fill: #FFFFFF; + } + .centennial-logo-inner > path { + fill: #DE1E3D; + } + } +} +.sitechrome-nav h1 a, .sitechrome-nav h1 a:hover { + padding: 22px 10px 22px 28px +} \ No newline at end of file diff --git a/app/styles/centennial/_centennial-message.scss b/app/styles/centennial/_centennial-message.scss new file mode 100644 index 000000000..ada86eb51 --- /dev/null +++ b/app/styles/centennial/_centennial-message.scss @@ -0,0 +1,60 @@ +.centennial-message h2 { + font-size: 24px; + text-align: left; +} + +.centennial-message__wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; +} +h2.centennial-message__header { + display: inline-block; + font-size: 14px; + padding: 8px 10px; + font-weight: 800; + text-align: left; + background-color: #F2C245; +} +.centennial-message__quote { + font-size: 14px; + font-weight: 600; +} +.centennial-message__attribution { + font-size: 14px; +} +@media screen and (min-width: 1025px) { + .centennial-message__wrapper { + flex-direction: row; + column-gap: 32px; + } + h2.centennial-message__header { + font-size: 18px; + } + .centennial-message__quote { + font-size: 18px; + font-weight: 400; + } + .centennial-message__attribution { + font-size: 18px; + } +} +@media screen and (min-width: 1300px) { + h2.centennial-message__header { + font-size: 24px; + } +} +.centennial-message__video { + flex: 1 0 60%; +} +.centennial-message__video-wrapper { + position: relative; + padding-bottom: 56.25%; +} +.centennial-message__video-wrapper iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/app/styles/centennial/_centennial-new-york-stories.scss b/app/styles/centennial/_centennial-new-york-stories.scss new file mode 100644 index 000000000..379551124 --- /dev/null +++ b/app/styles/centennial/_centennial-new-york-stories.scss @@ -0,0 +1,49 @@ +// stories - Tell Us Your New York Stories +.centennial-stories__hero { + display: flex; + flex-direction: row; +} +.centennial-stories__hero-text { + width: 100%; + display: block; + color: white; + background-color: #BB299F; + padding: 42px 22px; +} +@media screen and (min-width: 1270px) { + .centennial-stories__hero-text { + width: 375px; + height: 252px; + } +} +.centennial-stories__hero-image { + display: none; +} +@media screen and (min-width: 1270px) { + .centennial-stories__hero-image { + display: inline-block; + } +} + +.centennial-stories__categories { + display: flex; + flex-direction: column; +} +@media screen and (min-width: 800px) { + .centennial-stories__categories { + flex-direction: row; + justify-content: space-between; + column-gap: 48px; + } +} +.centennial-stories__category { + flex: 1 1 0px; + margin-bottom: 32px; + h3 { + font-size: 24px; + line-height: 30px; + font-weight: 700px; + border-bottom: 1px solid #000; + margin-bottom: 16px; + } +} diff --git a/app/styles/centennial/_centennial-timeline.scss b/app/styles/centennial/_centennial-timeline.scss new file mode 100644 index 000000000..a8450f9ee --- /dev/null +++ b/app/styles/centennial/_centennial-timeline.scss @@ -0,0 +1,25 @@ +.centennial-timeline__wrapper { + display: flex; + align-items: center; + height: 180px; + box-shadow: inset 0px 1px 1px 0px white; + background: + url("/assets/svg/100/1924.svg") left top -1px / 300px no-repeat, + url("/assets/svg/100/2024.svg") right bottom -1px / 300px no-repeat, + linear-gradient(182deg, #DE1E3D 0%, #FF7800 100%); +} + +@media screen and (min-width: 1025px) { + .centennial-timeline__wrapper { + height: 250px; + background: + url("/assets/svg/100/1924.svg") left top -1px / 400px no-repeat, + url("/assets/svg/100/2024.svg") right bottom -1px / 400px no-repeat, + linear-gradient(182deg, #DE1E3D 0%, #FF7800 100%); + } +} + +.centennial-timeline__wrapper a { + display: inline-block; + margin: auto; +} diff --git a/app/styles/centennial/_event-card.scss b/app/styles/centennial/_event-card.scss new file mode 100644 index 000000000..c45d00c9c --- /dev/null +++ b/app/styles/centennial/_event-card.scss @@ -0,0 +1,128 @@ +.event-card { + width: 100%; + display: flex; + flex-direction: row; + border-bottom: #000000 1px solid; +} +.event-card__image-wrapper { + flex: 0 0 60px; + margin-right: 22px; + padding: 32px 0px; + position: relative; +} +.event-card__image-wrapper a:focus { + outline: 1px solid blue; +} +.event-card__details { + flex: 1 1 auto; + padding: 32px 0px; +} +.event-card__date { + display: flex; + flex-direction: column; + width: 60px; + height: 60px; + justify-content: center; + background-color: black; + color: white; +} +.event-card__image { + display: none; +} +.event-card__day { + font-size: 26px; + font-weight: 700; + line-height: 1; + text-align: center; +} +.event-card__month { + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + text-align: center; +} + .event-card__title { + font-size: 16px; + font-weight: 700; + line-height: 28.8px +} +.event-card__time { + margin-bottom: 4px; +} +.event-card__tags { + margin-bottom: 4px; +} +.event-card__tag { + display: inline-block; + padding: 4px 8px; + margin-right: 4px; + font-size: 10px; + font-weight: 800; + text-transform: uppercase; +} +.event-card__description { + display: none; + font-size: 14px; +} +.event-card__description { + p:last-child { + margin-bottom: 0; + } +} +.event-card__tag.mod-live-stream { + background-color: #88DA5E; + color: black; +} +.event-card__tag.mod-in-person { + background-color: #3CBEF2; + color: black; +} +.event-card__arrow { + flex: 0 0 30px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + a { + display: block; + height:fit-content; + display: flex; + align-items: center; + height: 100%; + &:hover, &:focus { + cursor: pointer; + text-decoration: none; + border-bottom: transparent; + background-color: #ddd; + } + svg { + margin: 0 auto; + display: block; + } + } +} + +@media screen and (min-width: 1025px) { + .event-card { + max-width: 811px; + margin: 0 auto; + } + .event-card__image-wrapper { + flex: 0 0 250px; + margin-right: 22px; + max-width: 230px; + padding: 32px 0px; + } + .event-card__image { + display: inline-block; + max-width: 230px; + } + .event-card__date { + position: absolute; + top: 32px; + left: 0; + } + .event-card__description { + display: block; + } +} From eaacdd40d3634ea003d1b7b1b03c2f52f8db5863 Mon Sep 17 00:00:00 2001 From: walsh9 Date: Wed, 10 Jul 2024 17:34:35 -0400 Subject: [PATCH 02/10] delete empty components --- .../centennial/centennial-ctas/component.js | 4 --- .../centennial/centennial-ctas/template.hbs | 8 ------ .../centennial/centennial-signup/component.js | 4 --- .../centennial/centennial-signup/template.hbs | 8 ------ .../centennial-sponsors/component.js | 4 --- .../centennial-sponsors/template.hbs | 19 -------------- .../centennial-ctas/component-test.js | 26 ------------------- .../centennial-signup/component-test.js | 26 ------------------- .../centennial-sponsors/component-test.js | 26 ------------------- 9 files changed, 125 deletions(-) delete mode 100644 app/components/centennial/centennial-ctas/component.js delete mode 100644 app/components/centennial/centennial-ctas/template.hbs delete mode 100644 app/components/centennial/centennial-signup/component.js delete mode 100644 app/components/centennial/centennial-signup/template.hbs delete mode 100644 app/components/centennial/centennial-sponsors/component.js delete mode 100644 app/components/centennial/centennial-sponsors/template.hbs delete mode 100644 tests/integration/components/centennial/centennial-ctas/component-test.js delete mode 100644 tests/integration/components/centennial/centennial-signup/component-test.js delete mode 100644 tests/integration/components/centennial/centennial-sponsors/component-test.js diff --git a/app/components/centennial/centennial-ctas/component.js b/app/components/centennial/centennial-ctas/component.js deleted file mode 100644 index bb93d73f3..000000000 --- a/app/components/centennial/centennial-ctas/component.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@ember/component'; - -export default Component.extend({ -}); diff --git a/app/components/centennial/centennial-ctas/template.hbs b/app/components/centennial/centennial-ctas/template.hbs deleted file mode 100644 index eb46cebd1..000000000 --- a/app/components/centennial/centennial-ctas/template.hbs +++ /dev/null @@ -1,8 +0,0 @@ -
-
-

Become a Centennial Member

-
-
-

Download the new WNYC app

-
-
\ No newline at end of file diff --git a/app/components/centennial/centennial-signup/component.js b/app/components/centennial/centennial-signup/component.js deleted file mode 100644 index bb93d73f3..000000000 --- a/app/components/centennial/centennial-signup/component.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@ember/component'; - -export default Component.extend({ -}); diff --git a/app/components/centennial/centennial-signup/template.hbs b/app/components/centennial/centennial-signup/template.hbs deleted file mode 100644 index 4e1ba9b83..000000000 --- a/app/components/centennial/centennial-signup/template.hbs +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/app/components/centennial/centennial-sponsors/component.js b/app/components/centennial/centennial-sponsors/component.js deleted file mode 100644 index bb93d73f3..000000000 --- a/app/components/centennial/centennial-sponsors/component.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from '@ember/component'; - -export default Component.extend({ -}); diff --git a/app/components/centennial/centennial-sponsors/template.hbs b/app/components/centennial/centennial-sponsors/template.hbs deleted file mode 100644 index d4eb7ea3d..000000000 --- a/app/components/centennial/centennial-sponsors/template.hbs +++ /dev/null @@ -1,19 +0,0 @@ -
-
-

A Thank You To Our Sponsors

-
-
-
- Sponsor Logo - Sponsor Name -
-
- Sponsor Logo - Sponsor Name -
-
- Sponsor Logo - Sponsor Name -
-
-
\ No newline at end of file diff --git a/tests/integration/components/centennial/centennial-ctas/component-test.js b/tests/integration/components/centennial/centennial-ctas/component-test.js deleted file mode 100644 index 88f66ebda..000000000 --- a/tests/integration/components/centennial/centennial-ctas/component-test.js +++ /dev/null @@ -1,26 +0,0 @@ -import { module, skip } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | centennial/centennial-ctas', function(hooks) { - setupRenderingTest(hooks); - - skip('it renders', async function(assert) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.set('myAction', function(val) { ... }); - - await render(hbs`{{centennial/centennial-ctas}}`); - - assert.equal(this.element.textContent.trim(), ''); - - // Template block usage: - await render(hbs` - {{#centennial/centennial-ctas}} - template block text - {{/centennial/centennial-ctas}} - `); - - assert.equal(this.element.textContent.trim(), 'template block text'); - }); -}); diff --git a/tests/integration/components/centennial/centennial-signup/component-test.js b/tests/integration/components/centennial/centennial-signup/component-test.js deleted file mode 100644 index 583e24ceb..000000000 --- a/tests/integration/components/centennial/centennial-signup/component-test.js +++ /dev/null @@ -1,26 +0,0 @@ -import { module, skip } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | centennial/centennial-signup', function(hooks) { - setupRenderingTest(hooks); - - skip('it renders', async function(assert) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.set('myAction', function(val) { ... }); - - await render(hbs`{{centennial/centennial-signup}}`); - - assert.equal(this.element.textContent.trim(), ''); - - // Template block usage: - await render(hbs` - {{#centennial/centennial-signup}} - template block text - {{/centennial/centennial-signup}} - `); - - assert.equal(this.element.textContent.trim(), 'template block text'); - }); -}); diff --git a/tests/integration/components/centennial/centennial-sponsors/component-test.js b/tests/integration/components/centennial/centennial-sponsors/component-test.js deleted file mode 100644 index a730434c2..000000000 --- a/tests/integration/components/centennial/centennial-sponsors/component-test.js +++ /dev/null @@ -1,26 +0,0 @@ -import { module, skip } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | centennial/centennial-sponsors', function(hooks) { - setupRenderingTest(hooks); - - skip('it renders', async function(assert) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.set('myAction', function(val) { ... }); - - await render(hbs`{{centennial/centennial-sponsors}}`); - - assert.equal(this.element.textContent.trim(), ''); - - // Template block usage: - await render(hbs` - {{#centennial/centennial-sponsors}} - template block text - {{/centennial/centennial-sponsors}} - `); - - assert.equal(this.element.textContent.trim(), 'template block text'); - }); -}); From 81a90833bfc92137206160a9aa8cb9a4bd28f8ff Mon Sep 17 00:00:00 2001 From: walsh9 Date: Wed, 10 Jul 2024 17:57:57 -0400 Subject: [PATCH 03/10] update message title size --- app/styles/centennial/_centennial-message.scss | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/app/styles/centennial/_centennial-message.scss b/app/styles/centennial/_centennial-message.scss index ada86eb51..cec50cdcc 100644 --- a/app/styles/centennial/_centennial-message.scss +++ b/app/styles/centennial/_centennial-message.scss @@ -1,14 +1,10 @@ -.centennial-message h2 { - font-size: 24px; - text-align: left; -} - .centennial-message__wrapper { display: flex; flex-direction: column; justify-content: space-between; } h2.centennial-message__header { + text-align: left; display: inline-block; font-size: 14px; padding: 8px 10px; @@ -29,7 +25,7 @@ h2.centennial-message__header { column-gap: 32px; } h2.centennial-message__header { - font-size: 18px; + font-size: 20px; } .centennial-message__quote { font-size: 18px; @@ -41,7 +37,7 @@ h2.centennial-message__header { } @media screen and (min-width: 1300px) { h2.centennial-message__header { - font-size: 24px; + font-size: 22px; } } .centennial-message__video { From cf703a5983deda57879a3afcf7d247f9b37f5593 Mon Sep 17 00:00:00 2001 From: walsh9 Date: Wed, 10 Jul 2024 18:00:03 -0400 Subject: [PATCH 04/10] change timeline title --- app/components/centennial/centennial-timeline/template.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/centennial/centennial-timeline/template.hbs b/app/components/centennial/centennial-timeline/template.hbs index 5dc9257d4..b88026e5b 100644 --- a/app/components/centennial/centennial-timeline/template.hbs +++ b/app/components/centennial/centennial-timeline/template.hbs @@ -1,6 +1,6 @@
-

Explore 100 Years of WNYC

+

Explore WNYC’s First Century

From 738258807eb565ba362201e82f74e6058b5762a9 Mon Sep 17 00:00:00 2001 From: walsh9 Date: Wed, 10 Jul 2024 18:01:08 -0400 Subject: [PATCH 05/10] maybe fix playing status for story card buttons --- app/components/centennial/centennial-card/template.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/centennial/centennial-card/template.hbs b/app/components/centennial/centennial-card/template.hbs index 120084a49..dff9b804e 100644 --- a/app/components/centennial/centennial-card/template.hbs +++ b/app/components/centennial/centennial-card/template.hbs @@ -22,7 +22,7 @@ isLive=false type='blue-minion' playContext='centennial' - isCurrentSound=(and (eq story.id currentPlaylistStoryPk) isPlaying) + isCurrentSound=(and (eq item.attributes.slug currentPlaylistStoryPk) isPlaying) data-action=(concat 'Clicked Play/Pause ' 'On Demand: ' 'centennial') data-label=item.attributes.title itemPK=item.attributes.slug From 7135b327813531bbffb1137a251cee4018fe1db8 Mon Sep 17 00:00:00 2001 From: walsh9 Date: Thu, 11 Jul 2024 10:33:41 -0400 Subject: [PATCH 06/10] update test --- .../components/centennial/centennial-timeline/component-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/integration/components/centennial/centennial-timeline/component-test.js b/tests/integration/components/centennial/centennial-timeline/component-test.js index db34a8a2b..c3fdfaf21 100644 --- a/tests/integration/components/centennial/centennial-timeline/component-test.js +++ b/tests/integration/components/centennial/centennial-timeline/component-test.js @@ -12,6 +12,6 @@ module('Integration | Component | centennial/centennial-timeline', function(hook await render(hbs`{{centennial/centennial-timeline}}`); - assert.equal(find('.centennial-timeline h2').textContent.trim(), 'Explore 100 Years of WNYC'); + assert.equal(find('.centennial-timeline h2').textContent.trim(), ' Explore WNYC’s First Century'); }); }); From 48b9085a26c1453e7b8eeb10b22f24af5537b87d Mon Sep 17 00:00:00 2001 From: walsh9 Date: Thu, 11 Jul 2024 11:06:12 -0400 Subject: [PATCH 07/10] cleanup --- .../components/centennial/centennial-timeline/component-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/integration/components/centennial/centennial-timeline/component-test.js b/tests/integration/components/centennial/centennial-timeline/component-test.js index c3fdfaf21..9394c3da2 100644 --- a/tests/integration/components/centennial/centennial-timeline/component-test.js +++ b/tests/integration/components/centennial/centennial-timeline/component-test.js @@ -12,6 +12,6 @@ module('Integration | Component | centennial/centennial-timeline', function(hook await render(hbs`{{centennial/centennial-timeline}}`); - assert.equal(find('.centennial-timeline h2').textContent.trim(), ' Explore WNYC’s First Century'); + assert.equal(find('.centennial-timeline h2').textContent.trim(), 'Explore WNYC’s First Century'); }); }); From 730ac070990d28357b6f6c5f65ffe0df440a170a Mon Sep 17 00:00:00 2001 From: walsh9 Date: Thu, 11 Jul 2024 12:20:44 -0400 Subject: [PATCH 08/10] responsive scaling for video message section title --- app/styles/centennial/_centennial-message.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/app/styles/centennial/_centennial-message.scss b/app/styles/centennial/_centennial-message.scss index cec50cdcc..33c8c7674 100644 --- a/app/styles/centennial/_centennial-message.scss +++ b/app/styles/centennial/_centennial-message.scss @@ -25,7 +25,7 @@ h2.centennial-message__header { column-gap: 32px; } h2.centennial-message__header { - font-size: 20px; + font-size: 16px; } .centennial-message__quote { font-size: 18px; @@ -35,6 +35,16 @@ h2.centennial-message__header { font-size: 18px; } } +@media screen and (min-width: 1120px) { + h2.centennial-message__header { + font-size: 18px; + } +} +@media screen and (min-width: 1200px) { + h2.centennial-message__header { + font-size: 20px; + } +} @media screen and (min-width: 1300px) { h2.centennial-message__header { font-size: 22px; From 4379ab5a22b9694d4366c176e2c2182802d130da Mon Sep 17 00:00:00 2001 From: walsh9 Date: Wed, 17 Jul 2024 12:05:11 -0400 Subject: [PATCH 09/10] include header styles --- app/styles/_centennial.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/styles/_centennial.scss b/app/styles/_centennial.scss index 96bee5274..eb30e1b03 100644 --- a/app/styles/_centennial.scss +++ b/app/styles/_centennial.scss @@ -1,5 +1,6 @@ @import 'centennial/centennial-base'; +@import 'centennial/centennial-header'; @import 'centennial/centennial-logo-wnyc'; @import 'centennial/centennial-timeline'; @import 'centennial/centennial-archives'; From e9a0c6363dd836885cbef5d3f0040184e58d0ee3 Mon Sep 17 00:00:00 2001 From: walsh9 Date: Wed, 17 Jul 2024 12:11:11 -0400 Subject: [PATCH 10/10] x icon fix --- app/components/centennial/centennial-share-button/template.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/centennial/centennial-share-button/template.hbs b/app/components/centennial/centennial-share-button/template.hbs index 42afe48e5..dfd894ed8 100644 --- a/app/components/centennial/centennial-share-button/template.hbs +++ b/app/components/centennial/centennial-share-button/template.hbs @@ -5,7 +5,7 @@ button-label="Share" }}