diff options
Diffstat (limited to 'main_style-003.css')
| -rw-r--r-- | main_style-003.css | 297 |
1 files changed, 0 insertions, 297 deletions
diff --git a/main_style-003.css b/main_style-003.css deleted file mode 100644 index aefc7ee..0000000 --- a/main_style-003.css +++ /dev/null @@ -1,297 +0,0 @@ -:root { - /* Fonts */ - --font-text: 'Abel', sans-serif; - --font-title: 'Cormorant Garamond', Garamond, serif; - /* Colors */ - --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); - /* Composite colors */ - --footer-bg-color: rgba(89, 97, 87, 0.8); - -} - -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; -} - -body { - display: flexbox; - background-color: var(--xanadu); - color: var(--public-dark); - line-height: 1.2; - font-size: 1.1em; - font-family: var(--font-text); - 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(--ocean-green); -} -a:active { - color: var(--celadon); -} -a:hover, a:focus { - color: var(--screaming-green); -} -a:visited { - color: var(--dark-sea-green); -} - -h1, h2, h3, h4 { - font-family: var(--font-title); -} - -body>header { - text-align: center; - min-height: 100vh; -} - -body>header>h1 { - background: transparent url("https://dream.public.cat/uploads/dream/original/1X/0c90cdab7f4542baa08e4232e2ddb7e8216b419c.png") center/15rem no-repeat; - line-height: 15rem; - color: transparent; /* Only show the background image */ - font-size: 3em; -} - -body>header>h2 { - font-size: 2.5rem; - font-weight: normal; -} -h2>span { - display: block; -} - -body>header { - padding-bottom: 1.5rem; -} - -.tagline { - font-size: 2.1em; - text-align: left; - padding-left: 0.8em; -} - -main, article { - font-size: 2rem; -} - -main { -} - -main>article { - display: flex; - flex-flow: row wrap; -} -main>article>section { - border: 1rem solid var(--green-blue); - padding: 2rem; - text-align: center; - width: 100vw; - min-height: calc(100vh - 8.5rem); - display: flex; - flex-flow: row wrap; - justify-content: space-around; - align-items: center; -} -main>article>section>h2 { -} -main>article>section>p { - text-align: left; - min-height: 20rem; /* Ensure buttons below are aligned. */ -} -main nav { -} -main nav a { - background-color: var(--vermilion); - border: none; - padding: 1rem 2rem; - text-align: center; - text-decoration: none; - display: inline-block; - position: relative; - bottom: 0; -} -main>aside { - margin: 1rem; -} - -nav>ul { - list-style: none; - margin: 0.1rem; - padding: 0; - display: flex; - flex-start: -} -nav li { - flex-grow: 1; - 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; -} - -aside>header>p { - background-color: var(--public-dark); - color: var(--xanadu); - font-size: 2em; - padding: 0.5em 1em; - padding-bottom: 0; - border-radius: 1em; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - max-width: 10em; - 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(--xanadu); - width: calc(100% + 2em); - height: 1em; - content: ' '; - margin: 0 auto; - max-width: 12em; - padding-top: 1em; -} - -aside>section { - margin: 3rem auto; -} - -body>footer { - margin: 0; - padding: 0; - position: fixed; - left: -1px; - bottom: -1px; - right: -1px; - background-color: var(--misty-rose); - text-align: center; - box-shadow: 0 2px 1px inset var(--ebony); -} -body>footer>p { - font-size: 0.75em; - display: none; -} -body>footer:hover { - height: auto; -} -body>footer:hover p { - display: block; -} - -body>footer a, -body>footer a:link, -body>footer a:visited { - color: var(--public-dark); - text-decoration: none; - font-weight: bold; -} - -/* Display Discourse comments a bit larger */ -.topics-list iframe { - width: 96vw; /* good for a single category */ - height: 55vh; /* with font-size: 1.5em in iframe body */ -} - -/** - * On the desktop, try and make each section a whole screen by itself. - **/ - -@media screen and (min-width: 960px) { - body>header { - height: 100vh; - font-size: 3rem; - display: flex; - flex-flow: column wrap; - } - - .tagline { - font-size: 1em; - text-align: center; - padding-top: 2em; - } - - body > header:hover .tagline { - - } - body > header:hover:before { - position: absolute; - margin: 0 auto; - left: 0; - right: 0; - bottom: 14rem; - content: attr(title); - font-weight: bold; - color: var(--public-clear); - filter: drop-shadow(0.1rem 0.4rem 0.1rem var(--public-medium)); - } - - main > article { - flex-wrap: nowrap; - } - - body>aside { - display: block; - margin-bottom: 25vh; - } - - #pitch { - max-width: 64rem; - } - - body>aside { - display: flex; - flex-flow: row wrap; - padding-bottom: 25vh; - } - - body>aside>header { - flex: 1; - } - body>aside>article { - flex: 2; - } - - .topics-list iframe { - width: 50vw; /* good for a single category */ - } -} |