@scrippsproduct/entertainment-sites-css 0.0.1

package/dist/css/sweeps.css

@@ -0,0 +1,42 @@
+.sweeps-constrainer {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-attachment: fixed;
+  margin-top: 2.5rem;
+  border-top: 1px solid var(--mono-color-100);
+  width: 100%;
+}
+
+gleam-wrapper {
+  display: block;
+  min-height: 92vh;
+  background: transparent;
+}
+
+.gleam__header {
+  padding: 3rem 2rem 0;
+  width: 40%;
+  margin: 0 auto;
+  text-align: center;
+}
+.gleam__header img {
+  max-width: 100%;
+  display: inline;
+}
+
+.gleam__content {
+  min-height: 12.5rem;
+  height: auto;
+  margin: 1.25rem auto;
+  padding: 2.5rem 0 4rem;
+  text-align: center;
+}
+
+@media screen and (max-width: 37.5rem) {
+  .gleam__header {
+    width: 50%;
+  }
+}
+
+/*# sourceMappingURL=sweeps.css.map */

package/dist/css/sweeps.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sweeps.scss","sweeps.css"],"names":[],"mappings":"AAAA;EACI,sBAAA;EACA,4BAAA;EACA,2BAAA;EACA,4BAAA;EACA,kBAAA;EACA,2CAAA;EACA,WAAA;ACCJ;;ADEA;EACI,cAAA;EACA,gBAAA;EACA,uBAAA;ACCJ;;ADEA;EACI,oBAAA;EACA,UAAA;EACA,cAAA;EACA,kBAAA;ACCJ;ADCI;EACI,eAAA;EACA,eAAA;ACCR;;ADGA;EACI,mBAAA;EACA,YAAA;EACA,oBAAA;EACA,sBAAA;EACA,kBAAA;ACAJ;;ADGA;EACI;IACI,UAAA;ECAN;AACF","file":"sweeps.css"}

package/dist/css/sweeps.min.css

@@ -0,0 +1 @@
+.sweeps-constrainer{background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:fixed;margin-top:2.5rem;border-top:1px solid var(--mono-color-100);width:100%}gleam-wrapper{display:block;min-height:92vh;background:0 0}.gleam__header{padding:3rem 2rem 0;width:40%;margin:0 auto;text-align:center}.gleam__header img{max-width:100%;display:inline}.gleam__content{min-height:12.5rem;height:auto;margin:1.25rem auto;padding:2.5rem 0 4rem;text-align:center}@media screen and (max-width:37.5rem){.gleam__header{width:50%}}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@scrippsproduct/entertainment-sites-css",
+  "version": "0.0.1",
+  "description": "Universal CSS files for entertainment sites",
+  "main": "src/index.scss",
+  "scripts": {
+    "build": "rm -rf ./dist/css && npm run build-sass && npm run build-autoprefix && npm run build-cleancss",
+    "build-sass": "sass --style=expanded src:dist/css",
+    "build-autoprefix": "postcss ./dist/css/*.css --use autoprefixer --map --d ./dist/css/",
+    "build-cleancss": "cleancss --batch --batch-suffix '.min' ./dist/css/*.css"
+  },
+  "author": "Scripps Product",
+  "license": "ISC",
+  "devDependencies": {
+    "autoprefixer": "^10.4.17",
+    "clean-css-cli": "^5.6.3",
+    "postcss-cli": "^11.0.0",
+    "sass": "^1.70.0"
+  }
+}

package/src/_reset.scss

@@ -0,0 +1,59 @@
+// *, *::before, *::after {
+//     box-sizing: border-box;
+// }
+
+// * {
+//     margin: 0;
+// }
+
+html, body {
+    height: 100%;
+}
+
+body {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+}
+
+figure {
+    margin: 0;
+}
+
+input, button, textarea, select {
+    font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+}
+
+ul[role='list'],
+ol[role='list'] {
+    list-style: none;
+}
+
+a:not([class]) {
+    text-decoration-skip-ink: auto;
+}  
+
+#root {
+    isolation: isolate;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
+
+// references https://www.joshwcomeau.com/css/custom-css-reset/ & https://andy-bell.co.uk/a-modern-css-reset/

package/src/base.scss

@@ -0,0 +1,374 @@
+@import 'Reset';
+
+:root {
+    /* theme colors */
+    --theme-color-100: hsl(44, 98%, 52%);
+    --theme-color-200: hsl(33, 100%, 50%);
+    --theme-color-300: hsl(33, 100%, 50%);
+    --theme-color-400: hsl(24, 81%, 55%);
+    --theme-color-500: hsl(24, 92%, 48%);
+    /* monotones */
+    --mono-color-100: #fff;
+    --mono-color-200: #0000002B;
+    --mono-color-400: #666;
+    --mono-color-500: #777;
+    /* form colors */
+    --form-valid-color: hsl(150, 55%, 38%);
+    --form-invalid-color: hsl(0, 51%, 50%);
+    /* gradients */
+    --on-now-gradient: linear-gradient(to bottom, var(--theme-color-100) 0%, var(--theme-color-300) 100%); //linear-gradient(to bottom, var(--form-valid-color) 0%, hsl(150, 54%, 27%) 100%);
+    --body-radial-gradient: radial-gradient(ellipse at top left, var(--theme-color-200) 0%, var(--theme-color-100) 90%);
+    --footer-gradient: linear-gradient(180deg,hsl(29.65deg 100% 50% / 64%),transparent); //linear-gradient(180deg, #D54804 0%, #EB660A 50%);
+    --menu-gradient: linear-gradient(90deg, hsl(39, 100%, 41%) 0%, hsl(30, 82%, 58%) 50%, hsl(28, 82%, 55%) 90%);
+    /* other */
+    --cta-button-color: var(--theme-color-200);
+}
+
+
+html {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 17px;
+    scrollbar-gutter: stable;
+}
+// 3000px
+@media screen and (max-width: 187.5rem) {
+    html {
+        font-size: 16px;
+    }
+}
+// 980px
+@media screen and (max-width: 61.25rem) {
+    html {
+        font-size: 14px;
+    }
+}
+
+body {
+    margin: 0;
+    background-image: url(https://ewscripps-brightspot-lower.s3.amazonaws.com/24/3f/b693fd3a4f709740eae431187e55/backgroundimage-bw.png),
+    var(--body-radial-gradient);
+    background-blend-mode: soft-light;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+    color: var(--mono-color-400);
+    font-weight: 600;
+    text-wrap: balance;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    &--extra-bold {
+        font-weight: 700;
+    }
+}
+
+.h1:first-child {
+    margin-top: 0;
+}
+
+.h1 {font-size: 2rem;}
+.h2 {font-size: 1.802rem;}
+.h3 {font-size: 1.602rem;}
+.h4 {font-size: 1.424rem;}
+.h5 {font-size: 1.266rem;}
+.h6 {font-size: 1.125rem;}
+
+p {
+    font-family: 'Open Sans', sans-serif;
+}
+
+a {
+    color: var(--theme-color-200);
+    transition: color 0.25s ease-in-out;
+    font-weight: 600;
+    text-underline-offset: 0.15rem;
+
+    &:not([class]):hover {
+        color: var(--theme-color-100);
+    }
+}
+
+site-wrapper {
+    min-height: 100vh;
+    min-height: 100dvh;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+
+    animation-name: pageFadeIn;
+    animation-duration: 350ms;
+    animation-delay: 150ms;
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+    opacity: 0;
+}
+
+@keyframes pageFadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+.main-content {
+    //background-color: #fff;
+}
+
+.page-section {
+    background-color: #fff;
+}
+
+.page-section--gradient-bkgd {
+    background-image: var(--footer-gradient);
+    min-height: 200px;
+}
+
+// .page-section--gradient-bkgd {
+//     background-image: unset;
+//     background-color: transparent;
+// }
+
+.page-section--extra-margin {
+    margin-top: 1.5rem;
+}
+
+content-constrainer {
+    display: block;
+    width: min(calc(100% - 13.125rem), 125rem);
+    margin: auto;
+    border-bottom: 1px solid var(--theme-color-500);
+    padding-bottom: 2.5rem;
+    padding-top: 2rem;
+}
+
+hr { 
+    width: min(calc(100% - 13.125rem), 125rem);
+    margin: auto;
+    border: none;
+    border-bottom: 1px solid var(--theme-color-500);
+}
+
+error-handler {
+    display: block;
+    background-color: var(--mono-color-100);
+    padding-block: 4rem;
+    padding-inline: 2rem;
+    outline: 1px solid var(--theme-color-200);
+}
+
+// 1280px
+@media screen and (max-width: 80rem) {
+    content-constrainer,
+    hr {
+        width: calc(100% - 5.625rem);
+    }
+}
+// 600px
+@media screen and (max-width: 37.5rem) {
+    content-constrainer,
+    hr {
+        width: calc(100% - 3.8rem);
+    }
+}
+// 400px
+@media screen and (max-width: 25rem) {
+    content-constrainer,
+    hr {
+        width: calc(100% - 1.5rem);
+    }
+}
+
+.content-constrainer--no-padding {
+    padding-bottom: 0;
+    padding-top: 0;
+}
+
+.content-constrainer--no-border {
+    border: none;
+}
+
+.content-constrainer--lead-container {
+    border-bottom: none;
+    padding-top: 1.5rem;
+    padding-block-start: 1.5rem;
+}
+
+@media screen and (max-width: 60rem) {
+    .content-constrainer--lead-container {
+        padding-top: 0.5rem;
+        padding-block-start: 0.5rem;
+    }
+}
+
+.content-constrainer--margin-bottom {
+    margin-block-end: 2rem;
+}
+
+.main-content > .content-constrainer--no-padding:first-child {
+    padding-top: 0;
+    margin-top: 2rem;
+}
+
+.main-content {
+    margin-top: 0;
+
+    &.info-page {
+        margin-top: 1.5rem;
+    }
+}
+
+.main-content.info-page > content-constrainer:first-child {
+    padding-top: 3rem;
+}
+
+.page-content-header {
+    font-size: 2.875rem;
+    font-size: clamp(1.8rem, 4vw + 1rem, 2.875rem);
+    font-weight: 600;
+    color: var(--mono-color-100);
+    text-transform: uppercase;
+    text-align: center;
+    border-top: 1px solid var(--mono-color-100); 
+    padding-top: 2.5rem;
+    margin-top: 0.5rem;
+}
+// 500px
+@media screen and (max-width: 31.15rem) {
+    .page-content-header {
+        font-size: 2.3rem;
+        font-size: clamp(1.8rem, 4vw + 1rem, 2.875rem);
+    }
+}
+// 400px
+@media screen and (max-width: 25rem) {
+    .page-content-header {
+        font-size: 2rem;
+        font-size: clamp(1.8rem, 4vw + 1rem, 2.875rem);
+    }
+}
+
+.page-content-subheader {
+    color: var(--mono-color-100);
+    font-size: 1.125rem;
+    text-align: center;
+    margin: 0 auto 2rem;
+
+    @media screen and (max-width: 43.75rem) {
+        max-width: 40ch;
+    }
+}
+
+.info-page {
+    background-color: transparent;
+}
+
+.info-page > content-constrainer {
+    max-width: 64rem;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+    background-color: #fff;
+}
+
+@media screen and (max-width: 37.5rem) {
+    .info-page > content-constrainer {
+        width: 100%;
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+        box-sizing: border-box;
+    }
+}
+
+header > content-constrainer,
+footer > content-constrainer { 
+    border: none; 
+}
+
+.modal__close-btn {
+    background: transparent;
+    border: none;
+    color: var(--mono-color-100);
+    left: -1rem;
+    top: -3.5rem;
+    transform: rotate(0);
+    transition: transform 0.325s ease-in-out;
+    
+    &:hover,
+    &:focus {
+        transform: rotate(180deg);
+    }
+
+    &:focus {
+        outline-width: 1px;
+        outline-color: var(--theme-color-300);
+        outline-style: dashed;
+        border-radius: 40%;  
+    }
+}
+
+#modal-container > dialog { overflow: visible; }
+
+dialog.modal {
+    will-change: transform, opacity;
+    &::backdrop {
+        background-color: rgba(0,0,0,0.8);
+    }
+}
+
+.image-card__cta {
+    transition: scale 0.225s ease-out;
+    display: inline-block;
+    
+    &:hover,
+    &:focus {
+        scale: 1.1;
+    }
+}
+
+.inline-anchor {
+    color: var(--theme-color-400);
+    font-weight: 600;
+}
+
+/* Better screen reader only (https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034) */
+.sr-only {
+	border: 0 !important;
+	clip: rect(1px, 1px, 1px, 1px) !important;
+	-webkit-clip-path: inset(50%) !important;
+		clip-path: inset(50%) !important;
+	height: 1px !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	padding: 0 !important;
+	position: absolute !important;
+	width: 1px !important;
+	white-space: nowrap !important;
+}
+
+.sr-only-focusable:focus,
+.sr-only-focusable:active {
+	clip: auto !important;
+	-webkit-clip-path: none !important;
+	clip-path: none !important;
+	height: auto !important;
+	margin: auto !important;
+	overflow: visible !important;
+	width: auto !important;
+	white-space: normal !important;
+}
+
+/** 
+ * added to remove the error panel that the current 
+ * version of the react-dev-tools chorme extension
+ * keeps throwing: Uncaught TypeError: hook.sub is not a function 
+ * 
+ * (3/21/2023)
+ */
+#webpack-dev-server-client-overlay {
+    display: none !important;
+}

package/src/episode-guide.scss

@@ -0,0 +1,101 @@
+episode-guide {
+    display: block;
+    min-height: 20rem;
+}
+
+.episode-guide__header {
+    display: flex;
+
+    > .h2 {
+        margin-block-start: 0;
+        font-size: 2rem;
+        font-weight: 500;
+        margin-block-end: 1rem;
+    }
+}
+
+label[for="season-selector"] {
+    isolation: unset;
+    flex: 1 0 fit-content;
+    margin-bottom: 0;
+    font-size: 1.125rem;
+
+    > div {
+        border-radius: 0;
+        border: 1px solid var(--mono-color-400);   
+        padding: 0;    
+
+        > div {
+            background: #fff;        
+
+            &:first-child {
+                cursor: pointer;
+            }
+        }
+    } 
+}
+
+.custom-select__icon--chevron {
+    transform: translateY(-50%);
+
+    > svg {
+        stroke: #444;
+    }
+}
+
+.season-selector-wrapper {
+    margin-inline-start: auto;
+    margin-block-end: 0.83rem;
+    flex: 0 1 auto;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+
+    > span {
+        display: block;
+        flex: 1 0 fit-content;
+        font-size: 1.125rem;
+    }
+}
+
+.custom-select__choices-wrapper {
+    margin-top: 0.1em;
+}
+
+.custom-select__choices {
+    border-radius: 0;
+    border: 1px solid;
+    border-width: 0 1px 1px;
+}
+
+.custom-select__item--highlighted {
+    //color: #fff;
+    background-color: #efefef;
+}
+
+.custom-select__choices li:hover {
+    // color: #fff;
+    background-color: #efefef;
+}
+
+.custom-select__item--selected {
+    background-color: #e3e3e3;
+    color: currentColor;
+}
+
+@media screen and (max-width: 34.375rem) {
+    .episode-guide__header {
+        display: block;
+    }
+
+    .season-selector-wrapper {
+        justify-content: flex-start;
+
+        > span {
+            flex: 0 1 fit-content;
+        }
+        label[for=season-selector] {
+            flex: 0 0 fit-content;
+        }
+    }
+}