@import 'normalize.css'; :root { /* Fonts */ --font-text: 'Source Code Pro', monospace; --font-title: 'Cormorant Garamond', Garamond, serif; /* Colors */ --midnight-green: #003844; --skobelof: #006C67; --amaranth-pink: #f194b4; --orange-soda: #f06543; --english-violet: #473748; --light-gray: #cbd2ce; --maroon-x11: #A53860; --flame: #EB5E28; --neon-blue: #6874E8; --arctic-lime: #D2FF28; --oxford-blue: #00002B; --army-green: #444420; --lemon-curry: #DDAA00; --opera-mauve: #B38CB4; --salmon-pink: #EF959D; --nadeshiko-pink: #EDADC7; --misty-rose: #FAE3E3; --vermilion: #D84727; --celadon: #8DDC4A; --dark-sea-green: #78C091; --ocean-green: #5FBB97; --screaming-green: #87FF65; --xanadu: #808F85; --ebony: #596157; /* rgba(89, 97, 87, 1); */ --opal: #A7CECB; --opal2: #9DC7C8; --maximum-blue: #5EB1BF; --metallic-seaweed: #388697; --green-blue: #2364AA; --fluorescent-blue: #54F2F2; /* PUBLIC logo colors */ /* --public-dark: var(--oxford-blue); --public-medium: var(--army-green); --public-clear: var(--lemon-curry); */ --bg-color: var(--light-gray); --bg-read-color: var(--light-gray); --fg-read-color: var(--english-violet); --public-dark: var(--fg-read-color); --public-medium: var(--maroon-x11); --public-clear: var(--flame); /* --public-dark: var(--midnight-green); --public-medium: var(--skobelof); --public-clear: var(--amaranth-pink); */ /* Composite colors */ --footer-bg-color: rgba(89, 97, 87, 0.8); --dream-logo-url: url("https://dream.public.cat/uploads/dream/original/1X/0c90cdab7f4542baa08e4232e2ddb7e8216b419c.png"); --dream-logo-size: 15rem; } *, *::before, *::after { box-sizing: border-box; } html { border-style: border-box; /* https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages */ font-size: 1rem; margin: 0; padding: 0; } body { min-height: 100vh; background-color: var(--bg-color); color: var(--public-dark); line-height: 1.2; font-family: var(--font-text); font-size: 1em; margin: 0 auto; padding: env(safe-area-inset-top, 2rem) env(safe-area-inset-right, 2rem) env(safe-area-inset-bottom, 0.5vh) env(safe-area-inset-left, 2rem); } :link { color: var(--opal2); } a:active { color: var(--light-gray); } a:hover, a:focus { color: var(--screaming-green); } a:visited { color: var(--celadon); } h1, h2, h3, h4 { font-family: var(--font-title); } body>header { text-align: center; min-height: 100vh; height: 100%; width: 80vw; max-width: 96rem; margin: 0 auto; display: flex; flex-flow: column; } body>header h1 { background: transparent var(--dream-logo-url) 50% 50%/var(--dream-logo-size) no-repeat; line-height: var(--dream-logo-size); color: transparent; /* Only show the background image */ font-size: 2em; position: sticky; height: var(--dream-logo-size); width: var(--dream-logo-size); line-height: var(--dream-logo-size); margin: calc(var(--dream-logo-size) / 6) auto 0 auto; } body>header h2 { font-weight: normal; height: auto; color: var(--public-clear); flex: 1; } h2>span { display: block; } .tagline { font-size: 1em; text-align: left; padding-left: 0.8rem; flex: 1; } main, article { } main { max-width: 96rem; margin: 0 auto; } main>article { display: flex; align-items: stretch; flex-flow: column wrap; } main>article>section { border: 1rem solid var(--neon-blue); border-radius: 5rem; box-shadow: -1px 2px 4px inset black; padding: 2rem; text-align: center; flex: 1; display: flex; flex-flow: column; max-width: 100vw; position: relative; margin-bottom: 3rem; flex: 1 1 auto; background-color: rgba(0, 0, 0, 0.1); } main>article>section:hover { background-color: var(--bg-read-color); color: var(--fg-read-color); } main>article>section>h2 { flex: 1 1 auto; } main>article>section>p { text-align: left; /* min-height: 20rem; *//* Ensure buttons below are aligned. */ flex: 1 1 auto; } main>aside>section { background-color: rgba(0, 0, 0, 0.1); border: 1rem solid var(--neon-blue); border-radius: 5rem; box-shadow: -1px 2px 4px inset black; padding: 2rem; } main>aside>section:hover { background-color: rgba(255, 255, 255, 0.4); } main nav { flex: 0; width: calc(100% + 4rem); margin: 2rem -2rem -2rem -2rem; padding: 0; } main nav a { /* background-color: var(--vermilion); */ background-color: var(--orange-soda); color: var(--arctic-lime); font-weight: bold; letter-spacing: 2pt; border: none; padding: 1rem 2rem; text-align: center; text-decoration: none; display: inline-block; position: relative; bottom: 0; left: 0; right: 0; width: 100%; box-shadow: 0 -1px 3px black; border-bottom-left-radius: 5rem; border-bottom-right-radius: 5rem; } main nav a:hover { box-shadow: 0 0 1px black; } main nav a:link, main nav a:visited { color: var(--dark-ocean-green); } #pitch nav a { bottom: -1.5rem; } #pitch nav a span { display:none; } #pitch nav a:hover span { position: absolute; top: calc(-40vh + 2rem); margin: 0 auto; left: 0; right: 0; bottom: 0; padding: 0; font-size: 3rem; height: auto; line-height: 40vh; width: calc(100%); border-radius: 4rem; background: url(https://images.unsplash.com/photo-1604542031658-5799ca5d7936?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHw%3D&auto=format%2Ccompress&fit=crop&w=1000&h=1000) 50% 50%/cover no-repeat; background-opacity: 0.4; color: black; opacity: 0.85; display: block; } section>ul { text-align: left; } section>ul li { padding-bottom: 1rem; } nav>ul { list-style: none; margin: 0.1rem; padding: 0; } nav li { padding: 0 1rem; text-align: center; } nav li a { display: block; position: relative; padding: 0.5rem; height: 100%; width: 100%; } #pitch nav { text-align: center; } body>aside { position: relative; display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: space-around; padding-bottom: calc(2 * var(--dream-logo-size)); background: var(--dream-logo-url) 50% calc(100% - var(--dream-logo-size) / 2)/var(--dream-logo-size) no-repeat; } body>aside>header { position: sticky; bottom: 10rem; flex: 1 1 auto; } aside>header>p { position: sticky; background-color: black; /* check out curvy-*.png background color! */ color: var(--bg-color); font-size: 1.5em; padding: 0.5em 1em; padding-bottom: 0; border-radius: 1em; border-bottom-left-radius: 0; border-bottom-right-radius: 0; max-width: 17em; margin: 0 auto; } aside>header p:after { position: relative; bottom: 0; left: -1em; display: block; background: url(curvy-l.png) top left/1em no-repeat, url(quoty.png) 3em top/1em no-repeat, url(curvy-r.png) top right/1em no-repeat, url(filly.png) top left/1em repeat-x, var(--bg-color); width: calc(100% + 2em); height: 2em; /* must be twice quoty.png's height */ content: ' '; margin: 0 auto; padding-top: 1em; } body>aside>article { flex: 4 1 auto; display: flex; flex-flow: column; } aside>section { margin: 3rem auto; flex: 1; } body>footer { margin: 0; padding: 0; position: fixed; left: -1px; bottom: -1px; right: -1px; background-color: var(--fg-read-color); text-align: center; box-shadow: 0 2px 1px inset var(--ebony); font-size: 0.7em; display: flex; flex-flow: column-reverse wrap; justify-content: space-around; } body>footer>p { display: none; } body>footer:hover { background-color: var(--arctic-lime); height: auto; } body>footer:hover p { display: block; } body>footer nav { flex: 1 0 auto; } body>footer nav ul { display: flex; flex-flow: row nowrap; justify-content: center; } body>footer a, body>footer a:link, body>footer a:visited { color: var(--arctic-lime); text-decoration: none; font-weight: bold; } body>footer:hover a, body>footer:hover a:link, body>footer:hover a:visited { color: var(--fg-read-color); } /* Display Discourse comments a bit larger */ .topics-list { margin: 0 auto; display: flex; flex: column wrap; justify-content: space-around; max-width: 80vw; } .topics-list>section { border-radius: 2rem; padding: 0.25rem 2rem; min-width: 16vw; flex: 1 0 auto; } .topics-list h2 a:link, .topics-list h2 a:visited { color: var(--english-violet); } .topics-list h2 a:hover { color: var(--oxford-blue); } .topics-list iframe { width: 96vw; /* good for a single category */ height: auto; min-height: 14rem; } /** * On the desktop, try and make each section a whole screen by itself. **/ @media screen and (min-width: 64rem) { body>header { height: 100vh; font-size: 3rem; display: block; } .tagline { font-size: 75%; text-align: center; padding-top: 2em; max-width: 64rem; margin: 0 auto; } body > header:hover .tagline { } body > header:hover:before { position: absolute; margin: 0 auto; left: 0; right: 0; top: 25rem; content: attr(title); font-weight: bold; color: var(--public-clear); } main > article { flex-flow: row nowrap; column-gap: 3rem; justify-content: space-around; } main > article > section { position: relative; height: auto; } main > article > section > p { max-width: calc(100vw / 3); } body>aside { background: none; } #pitch { max-width: 64rem; } body>aside>header { min-width: 20vw; } body>aside>article { flex-flow: row; } .topics-list iframe { /* width: 50vw; *//* good for a single category */ } nav > ul { display: flex; flex: 1 0 auto; flex-flow: row nowrap; justify-content: space-around; } body>footer { font-size: 1em; } }