From 69e3be818e62d868f5430b0ad5afc08d99506b25 Mon Sep 17 00:00:00 2001 From: hellekin Date: Fri, 8 Jan 2021 17:27:08 +0100 Subject: Remove previous files and only keep last version. We're cleaning up and testing deployment... --- index-000.html | 61 ------- index-001.html | 73 -------- index-002.html | 72 -------- index-003.html | 79 --------- index-004.html | 82 --------- index-005.html | 126 -------------- index.html | 127 +++++++++++++- main.css | 494 +++++++++++++++++++++++++++++++++++++++++++++++++++++ main_style-001.css | 52 ------ main_style-003.css | 297 -------------------------------- main_style-004.css | 470 -------------------------------------------------- main_style-005.css | 494 ----------------------------------------------------- main_style.css | 65 ------- 13 files changed, 620 insertions(+), 1872 deletions(-) delete mode 100644 index-000.html delete mode 100644 index-001.html delete mode 100644 index-002.html delete mode 100644 index-003.html delete mode 100644 index-004.html delete mode 100644 index-005.html mode change 120000 => 100644 index.html create mode 100644 main.css delete mode 100644 main_style-001.css delete mode 100644 main_style-003.css delete mode 100644 main_style-004.css delete mode 100644 main_style-005.css delete mode 100644 main_style.css diff --git a/index-000.html b/index-000.html deleted file mode 100644 index c714ba9..0000000 --- a/index-000.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - Digital Replicated Edge Agency Machine - - -
-

DREAM

-

- Internet protocols and applications - to empower citizens to act and find agency together -

-
- -
-
-

For Activists

-

Organize peer to peer away from corporate surveillance.

- -
-

For Developers

-

We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.

- -
-

DREAM Team

-
-
-
- - - - - - - - diff --git a/index-001.html b/index-001.html deleted file mode 100644 index 84abb99..0000000 --- a/index-001.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - Digital Replicated Edge Agency Machine - - - -
-

-

- DREAM: Distributed Replicated Edge Agency Machine -

-

- Internet protocols and applications - to empower citizens to act and find agency together -

-
- -
-
-
-
-

For Activists

-

Organize peer to peer away from corporate surveillance.

- -
-

For Developers

-

We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.

- -
-

Where to find us

-

Contact the team and learn how the project came about

- -
-
-
-
-
- - - - - - - diff --git a/index-002.html b/index-002.html deleted file mode 100644 index b4ff495..0000000 --- a/index-002.html +++ /dev/null @@ -1,72 +0,0 @@ - - - - - - Digital Replicated Edge Agency Machine - - - - -
-

DREAM

-

DREAM: Distributed Replicated Edge Agency Machine

-

- Internet protocols and applications - to empower citizens to act and find agency together -

-
- -
-
-
-

For Activists

-

Organize peer to peer away from corporate surveillance.

- -
-
-

For Developers

-

We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.

- -
-
-

DREAM Team

-

Contact the team and learn how the project came about.

- -
-
-
- - - - - - - - - diff --git a/index-003.html b/index-003.html deleted file mode 100644 index 4331989..0000000 --- a/index-003.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - DREAM enables Group P2P Collaboration - - - - - -
-

DREAM

-

DREAM: Distributed Replicated Edge Agency Machine

-

- Internet protocols and applications - to empower citizens to act and find agency together -

-
- -
-
-
-

For Activists

-

Organize peer to peer away from corporate surveillance.

- -
-
-

For Developers

-

We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.

- -
-
-

DREAM Team

-

Contact the team and learn how the project came about.

- -
-
- -
- - - - - - - - - diff --git a/index-004.html b/index-004.html deleted file mode 100644 index 8900dea..0000000 --- a/index-004.html +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - DREAM enables Group P2P Collaboration - - - - - - - - -
-
-

DREAM

-

DREAM: Distributed Replicated Edge Agency Machine

-
-

- Internet protocols and applications - to empower citizens to act and find agency together -

-
-
-
-
-

For Activists

-

Organize peer to peer away from corporate surveillance.

- -
-
-

For Developers

-

We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.

- -
-
-

DREAM Team

-

Contact the team and learn how the project came about.

- -
-
- -
- - - - - - - - diff --git a/index-005.html b/index-005.html deleted file mode 100644 index 5cbb758..0000000 --- a/index-005.html +++ /dev/null @@ -1,126 +0,0 @@ - - - - - - DREAM enables Group P2P Collaboration - - - - - - - - -
-

DREAM

-

Internet protocols and applications - to empower citizens to act and find agency together

-

- DREAM enables Peer-to-Peer Group Collaboration -

-
-
- -
-
-

For Activists

-

During the year we will propose hands-on collaborative - workshops to inform software development, exploring and refining - patterns of group collaboration. Participants sharing similar - interests can form a group and enhance their collaborative - practices. They can choose to work and organize online or - offline—when they reconnect to the Internet, they may optionally - share their work globally.

- - -
-
-

For Developers

-

We're designing and documenting a peer-to-peer framework that - others can build upon and will provide a set of reusable free - software libraries, components and reference implementations. - DREAM components are designed to work together but may be used - independently: -

    -
  • DROMEDAR provides conflict-free replicated data structures to distribute linked data;
    • -
  • UPSYCLE provides a peer-to-peer networking system for private encrypted group collaboration;
    • -
  • SHRUTHI provides unikernel orchestration and provisioning capabilities.
    • -
- - -

- - -
-
-

DREAM Team

-

DREAM is part of the NGI POINTER funding scheme (NGI POINTER-20) and - received a 200,000 € grant to research and develop DREAM - components over the year 2021. The grant is handled by petites singularités, a non-profit based in Brussels.

-

Contact the team and learn how the project came about.

- -
-
-
- - - - - - - - diff --git a/index.html b/index.html deleted file mode 120000 index 7ce13dd..0000000 --- a/index.html +++ /dev/null @@ -1 +0,0 @@ -index-005.html \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..df9c4fc --- /dev/null +++ b/index.html @@ -0,0 +1,126 @@ + + + + + + DREAM enables Group P2P Collaboration + + + + + + + + +
+

DREAM

+

Internet protocols and applications + to empower citizens to act and find agency together

+

+ DREAM enables Peer-to-Peer Group Collaboration +

+
+
+ +
+
+

For Activists

+

During the year we will propose hands-on collaborative + workshops to inform software development, exploring and refining + patterns of group collaboration. Participants sharing similar + interests can form a group and enhance their collaborative + practices. They can choose to work and organize online or + offline—when they reconnect to the Internet, they may optionally + share their work globally.

+ + +
+
+

For Developers

+

We're designing and documenting a peer-to-peer framework that + others can build upon and will provide a set of reusable free + software libraries, components and reference implementations. + DREAM components are designed to work together but may be used + independently: +

    +
  • DROMEDAR provides conflict-free replicated data structures to distribute linked data;
    • +
  • UPSYCLE provides a peer-to-peer networking system for private encrypted group collaboration;
    • +
  • SHRUTHI provides unikernel orchestration and provisioning capabilities.
    • +
+ + +

+ + +
+
+

DREAM Team

+

DREAM is part of the NGI POINTER funding scheme (NGI POINTER-20) and + received a 200,000 € grant to research and develop DREAM + components over the year 2021. The grant is handled by petites singularités, a non-profit based in Brussels.

+

Contact the team and learn how the project came about.

+ +
+
+
+ + + + + + + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..1ac549e --- /dev/null +++ b/main.css @@ -0,0 +1,494 @@ +@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; + 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; + } +} diff --git a/main_style-001.css b/main_style-001.css deleted file mode 100644 index 38fcc18..0000000 --- a/main_style-001.css +++ /dev/null @@ -1,52 +0,0 @@ -body { - background-color: #6666ff; - color: white; - text-align: center; -} - -body>header>h1 { - padding-top: 15rem; - background: transparent url("https://dream.public.cat/uploads/dream/original/1X/0c90cdab7f4542baa08e4232e2ddb7e8216b419c.png") center/15rem no-repeat; -} - -.button { - background-color: #4CAF50; - border: none; - color: white; - padding: 15px 32px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 1rem; -} - - -.grid-container { - display: grid; - grid-template-columns: 33% 34% 33%; - background-color: #2196F3; - padding: 10px; -} - -.grid-container>section { - background-color: gray; - border: 1px solid black; - padding: 20px; - font-size: 1.5rem; - text-align: center; -} - -.tagline { - font-size: 2.5rem; -} - -aside { - width: 60%; - margin: auto; -} - -section { - background-color: gray; - border: 0.5rem solid #2196F3; - padding: 20px; -} 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 */ - } -} 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; - } -} diff --git a/main_style-005.css b/main_style-005.css deleted file mode 100644 index 1ac549e..0000000 --- a/main_style-005.css +++ /dev/null @@ -1,494 +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; - 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; - 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; - } -} diff --git a/main_style.css b/main_style.css deleted file mode 100644 index 43a37de..0000000 --- a/main_style.css +++ /dev/null @@ -1,65 +0,0 @@ -body { - background-color: #6666ff; - color: white; - text-align: center; -} - -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; -} - -body>header>h2 { - font-size: 2.5rem; - font-weight: normal; -} - -body>header { - padding-bottom: 1.5rem; -} - -.tagline { - font-size: 1.25rem; -} - -main>article { - display: grid; - grid-template-columns: 33% 34% 33%; - background-color: #2196F3; - padding: 10px; -} - -main>article>section { - background-color: gray; - border: 1px solid black; - padding: 20px; - font-size: 1.5rem; - text-align: center; -} - -main nav a { - background-color: #4CAF50; - border: none; - color: white; - padding: 15px 32px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 1rem; -} - -aside { - width: 60%; - margin: auto; -} - -aside>section { - margin: 3rem auto; -} - -section { - background-color: gray; - border: 0.5rem solid #2196F3; - padding: 20px; -} -- cgit v1.2.3