aboutsummaryrefslogtreecommitdiff
path: root/main_style-004.css
diff options
context:
space:
mode:
Diffstat (limited to 'main_style-004.css')
-rw-r--r--main_style-004.css470
1 files changed, 0 insertions, 470 deletions
diff --git a/main_style-004.css b/main_style-004.css
deleted file mode 100644
index f1e8648..0000000
--- a/main_style-004.css
+++ /dev/null
@@ -1,470 +0,0 @@
-@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;
- width: 80vw;
- max-width: 96rem;
- margin: 0 auto;
-}
-
-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-size: 1.5rem;
- font-weight: normal;
- height: auto;
-}
-h2>span {
- display: block;
-}
-
-body>header {
- padding-bottom: 1.5rem;
-}
-
-.tagline {
- font-size: 1.5em;
- text-align: left;
- padding-left: 0.8em;
-}
-
-main, article {
- font-size: 1.5rem;
-}
-
-main {
-}
-
-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;
- height: calc(100vh - 2rem);
- display: flex;
- flex-flow: column wrap;
- 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;
-}
-
-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 {
- display: flex;
- flex-flow: row wrap;
- align-items: center;
- 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 {
- 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;
-}
-aside>section {
- margin: 3rem auto;
- flex: 5 0 auto;
-}
-
-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;
-}
-.topics-list section {
- border-radius: 2rem;
- padding: 0.25rem 1rem;
-}
-.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;
- }
-
- .tagline {
- font-size: 1em;
- 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;
- }
-
- .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;
- }
-}
generated by cgit v1.2.3 (git 2.39.1) at 2024-04-19 20:37:00 +0000