aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorhellekin <hellekin@cepheide.org>2020-11-07 22:52:42 +0100
committerhellekin <hellekin@cepheide.org>2020-11-07 23:03:38 +0100
commitef1572b7333424c731eb4450f154c29eaf9db031 (patch)
tree6a222cacc709e0749b9114368197279e8ec79c64
parentef458c18010dfed551c20f9502da15d5ee199e25 (diff)
downloaddream.public.cat-ef1572b7333424c731eb4450f154c29eaf9db031.tar.gz
Mobile-first layout
Prepare for next release: index-003.html - Link current version 002 to index.html For 003: - Add color palette to :root - Add forum link - Make mobile-first CSS - Add Desktop CSS - Make minor changes to HTML to - change title to 'DREAM enables Group P2P Collaboration' - add viewport meta tag - add title attribute to first header - add span to first h2 so that we can force display - add Aria role to main - move pitch to main aside - add aside header to advertise forum - move copyright above nav - link footer nav to page navigation instead of site TODO: - Embed fonts using @font-face - Link index-003.html to index.html - Add Aria labels for screen-reading - Verify color contrasts for A11y
-rw-r--r--curvy-l.pngbin0 -> 1474 bytes
-rw-r--r--curvy-r.pngbin0 -> 1227 bytes
-rw-r--r--filly.pngbin0 -> 387 bytes
-rw-r--r--index-000.html61
-rw-r--r--index-001.html73
-rw-r--r--index-002.html72
-rw-r--r--index-003.html79
l---------[-rw-r--r--]index.html73
-rw-r--r--main_style-001.css52
-rw-r--r--main_style-003.css288
-rw-r--r--quoty.pngbin0 -> 1790 bytes
11 files changed, 626 insertions, 72 deletions
diff --git a/curvy-l.png b/curvy-l.png
new file mode 100644
index 0000000..c6e47be
--- /dev/null
+++ b/curvy-l.png
Binary files differ
diff --git a/curvy-r.png b/curvy-r.png
new file mode 100644
index 0000000..144d2e6
--- /dev/null
+++ b/curvy-r.png
Binary files differ
diff --git a/filly.png b/filly.png
new file mode 100644
index 0000000..a29b77f
--- /dev/null
+++ b/filly.png
Binary files differ
diff --git a/index-000.html b/index-000.html
new file mode 100644
index 0000000..c714ba9
--- /dev/null
+++ b/index-000.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Digital Replicated Edge Agency Machine</title>
+</head>
+<body>
+ <header>
+ <h1>DREAM</h1>
+ <p class="tagline">
+ Internet protocols and applications
+ to empower citizens to act and find agency together
+ </p>
+ </header>
+
+ <main>
+ <article>
+ <section id="for-activists"><h2>For Activists</h2>
+ <p>Organize peer to peer away from corporate surveillance.</p>
+ <nav><a href="/pub/for-activists">read more</a></nav>
+ </section>
+ <section id="for-developers"><h2>For Developers</h2>
+ <p>We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.</p>
+ <nav><a href="/pub/for-developers">read more</a></nav>
+ </section>
+ <section id="dream-team"><h2>DREAM Team</h2>
+ </section>
+ </article>
+ </main>
+
+ <aside>
+ <section id="pitch">
+ <h2>Distributed Replicated Edge Agency Machine</h2>
+ <p><abbr title="Public Universal Base: Libre Infrastructure Community">PUBLIC</abbr> DREAM
+ empowers communities anywhere to collaborate in the local creation and maintenance
+ of open knowledge without the need for central coordination. DREAM enables the
+ convergence of distributed <abbr title="Peer-to-Peer">P2P</abbr> networks, linked
+ data models, and social solidary economy best practices.
+ (<a href="/pub/intro">read more</a>)</p>
+ </section>
+ <article class="topics-list">
+ <section id="wp4"><h2><a href="/c/wp4-reporting/6">REPORTING</a></h2>
+ <d-topics-list discourse-url="https://dream.public.cat" per-page="5" category="7" status="open"></d-topics-list>
+ </section>
+ </article>
+ </aside>
+
+ <footer>
+ <nav>
+ <ul>
+ <li><a href="/pub/contact">Contact</a></li>
+ <li><a href="/pub/for-activists">For Activists</a></li>
+ <li><a href="/pub/for-developers">For Developers</a></li>
+ </ul>
+ </nav>
+ <p>Copyright ©2020 PUBLIC — <a href="mailto:dream@public.cat">dream@public.cat</a></p>
+ </footer>
+ <!-- Load latest open topics from Discourse -->
+ <script src="https://dream.public.cat/javascripts/embed-topics.js"></script>
+</body>
+</html>
diff --git a/index-001.html b/index-001.html
new file mode 100644
index 0000000..84abb99
--- /dev/null
+++ b/index-001.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Digital Replicated Edge Agency Machine</title>
+ <link rel="stylesheet" type="text/css" href="main_style-001.css">
+</head>
+<body>
+ <header>
+ <h1></h1>
+ <p class="tagline">
+ DREAM: Distributed Replicated Edge Agency Machine
+ </p>
+ <p class="tagline" style="font-size:1.25rem">
+ Internet protocols and applications
+ to empower citizens to act and find agency together
+ </p>
+ </header>
+
+ <div name="padding" style="height:1.5rem"></div>
+ <main>
+ <article>
+ <div class="grid-container">
+ <section id="for-activists"><h2>For Activists</h2>
+ <p>Organize peer to peer away from corporate surveillance.</p>
+ <nav><a href="/pub/for-activists"><button class="button" id="activists">Read more</button></a></nav>
+ </section>
+ <section id="for-developers"><h2>For Developers</h2>
+ <p>We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.</p>
+ <nav><a href="/pub/for-developers"><button class="button" id="developpers">Read more</button></a></nav>
+ </section>
+ <section id="dream-team"><h2>Where to find us</h2>
+ <p>Contact the team and learn how the project came about</p>
+ <a href="/pub/team"><button class="button" id="team" href="/pub/team">DREAM Team</button></a>
+ </section>
+ </div>
+ </article>
+ </main>
+ <div name="padding" style="height:3rem"></div>
+ <aside>
+ <section id="pitch">
+ <h2>Distributed Replicated Edge Agency Machine</h2>
+ <p><abbr title="Public Universal Base: Libre Infrastructure Community">PUBLIC</abbr> DREAM
+ empowers communities anywhere to collaborate in the local creation and maintenance
+ of open knowledge without the need for central coordination. DREAM enables the
+ convergence of distributed <abbr title="Peer-to-Peer">P2P</abbr> networks, linked
+ data models, and social solidary economy best practices.
+ </p>
+ <p><a href="/pub/intro">Read more</a>
+ </p>
+ </section>
+ <div name="padding" style="height:3rem"></div>
+ <article class="topics-list">
+ <section id="wp4"><h2><a href="/c/wp4-reporting/6">REPORTING</a></h2>
+ <d-topics-list discourse-url="https://dream.public.cat" per-page="5" category="7" status="open"></d-topics-list>
+ </section>
+ </article>
+ </aside>
+
+ <footer>
+ <nav>
+ <ul>
+ <li><a href="/pub/contact">Contact</a></li>
+ <li><a href="/pub/for-activists">For Activists</a></li>
+ <li><a href="/pub/for-developers">For Developers</a></li>
+ </ul>
+ </nav>
+ <p>Copyright ©2020 PUBLIC — <a href="mailto:dream@public.cat">dream@public.cat</a></p>
+ </footer>
+ <!-- Load latest open topics from Discourse -->
+ <script src="https://dream.public.cat/javascripts/embed-topics.js"></script>
+</body>
+</html>
diff --git a/index-002.html b/index-002.html
new file mode 100644
index 0000000..b4ff495
--- /dev/null
+++ b/index-002.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="UTF-8">
+ <title>Digital Replicated Edge Agency Machine</title>
+ <link rel="stylesheet" type="text/css" href="main_style.css">
+</head>
+
+<body>
+ <header>
+ <h1>DREAM</h1>
+ <h2>DREAM: Distributed Replicated Edge Agency Machine</h2>
+ <p class="tagline">
+ Internet protocols and applications
+ to empower citizens to act and find agency together
+ </p>
+ </header>
+
+ <main>
+ <article>
+ <section id="for-activists">
+ <h2>For Activists</h2>
+ <p>Organize peer to peer away from corporate surveillance.</p>
+ <nav><a href="/pub/for-activists">read more</a></nav>
+ </section>
+ <section id="for-developers">
+ <h2>For Developers</h2>
+ <p>We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.</p>
+ <nav><a href="/pub/for-developers">read more</a></nav>
+ </section>
+ <section id="dream-team">
+ <h2>DREAM Team</h2>
+ <p>Contact the team and learn how the project came about.</p>
+ <nav><a href="/pub/dream-team">read more</a></nav>
+ </section>
+ </article>
+ </main>
+
+ <aside>
+ <section id="pitch">
+ <h2>Distributed Replicated Edge Agency Machine</h2>
+ <p><abbr title="Public Universal Base: Libre Infrastructure Community">PUBLIC</abbr> DREAM
+ empowers communities anywhere to collaborate in the local creation and maintenance
+ of open knowledge without the need for central coordination. DREAM enables the
+ convergence of distributed <abbr title="Peer-to-Peer">P2P</abbr> networks, linked
+ data models, and social solidary economy best practices.
+ (<a href="/pub/intro">read more</a>)</p>
+ </section>
+ <article class="topics-list">
+ <section id="wp4">
+ <h2><a href="/c/wp4-reporting/6">REPORTING</a></h2>
+ <d-topics-list discourse-url="https://dream.public.cat" per-page="5" category="7" status="open"></d-topics-list>
+ </section>
+ </article>
+ </aside>
+
+ <footer>
+ <nav>
+ <ul>
+ <li><a href="/pub/contact">Contact</a></li>
+ <li><a href="/pub/for-activists">For Activists</a></li>
+ <li><a href="/pub/for-developers">For Developers</a></li>
+ </ul>
+ </nav>
+ <p>Copyright ©2020 PUBLIC — <a href="mailto:dream@public.cat">dream@public.cat</a></p>
+ </footer>
+ <!-- Load latest open topics from Discourse -->
+ <script src="https://dream.public.cat/javascripts/embed-topics.js"></script>
+</body>
+
+</html>
diff --git a/index-003.html b/index-003.html
new file mode 100644
index 0000000..4331989
--- /dev/null
+++ b/index-003.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="UTF-8">
+ <title>DREAM enables Group P2P Collaboration</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
+ <link rel="stylesheet" type="text/css" href="main_style-003.css">
+</head>
+
+<body>
+ <header title="DREAM enables Group P2P Collaboration">
+ <h1>DREAM</h1>
+ <h2>DREAM: <span>Distributed Replicated Edge Agency Machine</span></h2>
+ <p class="tagline">
+ Internet protocols and applications
+ to empower citizens to act and find agency together
+ </p>
+ </header>
+
+ <main role="main">
+ <article>
+ <section id="for-activists">
+ <h2>For Activists</h2>
+ <p>Organize peer to peer away from corporate surveillance.</p>
+ <nav><a href="/pub/for-activists">read more</a></nav>
+ </section>
+ <section id="for-developers">
+ <h2>For Developers</h2>
+ <p>We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.</p>
+ <nav><a href="/pub/for-developers">read more</a></nav>
+ </section>
+ <section id="dream-team">
+ <h2>DREAM Team</h2>
+ <p>Contact the team and learn how the project came about.</p>
+ <nav><a href="/pub/dream-team">read more</a></nav>
+ </section>
+ </article>
+ <aside>
+ <section id="pitch">
+ <h2>Distributed Replicated Edge Agency Machine</h2>
+ <p><abbr title="Public Universal Base: Libre Infrastructure Community">PUBLIC</abbr> DREAM
+ empowers communities anywhere to collaborate in the local creation and maintenance
+ of open knowledge without the need for central coordination. DREAM enables the
+ convergence of distributed <abbr title="Peer-to-Peer">P2P</abbr> networks, linked
+ data models, and social solidary economy best practices.
+ <nav><a href="/pub/intro">read more</a></nav>
+ </p>
+ </section>
+ </aside>
+ </main>
+
+ <aside>
+ <header>
+ <p>Our public forum is open!<br>See <a href="https://dream.public.cat/categories">what's cooking</a>.</p>
+ </header>
+ <article class="topics-list">
+ <section id="wp4">
+ <h2><a href="/c/wp4-reporting/6">REPORTING</a></h2>
+ <d-topics-list discourse-url="https://dream.public.cat" per-page="5" category="7" status="open"></d-topics-list>
+ </section>
+ </article>
+ </aside>
+
+ <footer>
+ <p><span title="PUBLIC is Petites Singularités and DREAM contributors">Copyright ©2020 PUBLIC</span> — <a href="mailto:dream@public.cat">dream@public.cat</a></p>
+ <nav>
+ <ul>
+ <li><a href="#for-activists">For Activists</a></li>
+ <li><a href="#for-developers">For Developers</a></li>
+ <li><a href="#dream-team">Contact</a></li>
+ </ul>
+ </nav>
+ </footer>
+ <!-- Load latest open topics from Discourse -->
+ <script src="https://dream.public.cat/javascripts/embed-topics.js"></script>
+</body>
+
+</html>
diff --git a/index.html b/index.html
index b4ff495..8a2a610 100644..120000
--- a/index.html
+++ b/index.html
@@ -1,72 +1 @@
-<!DOCTYPE html>
-<html>
-
-<head>
- <meta charset="UTF-8">
- <title>Digital Replicated Edge Agency Machine</title>
- <link rel="stylesheet" type="text/css" href="main_style.css">
-</head>
-
-<body>
- <header>
- <h1>DREAM</h1>
- <h2>DREAM: Distributed Replicated Edge Agency Machine</h2>
- <p class="tagline">
- Internet protocols and applications
- to empower citizens to act and find agency together
- </p>
- </header>
-
- <main>
- <article>
- <section id="for-activists">
- <h2>For Activists</h2>
- <p>Organize peer to peer away from corporate surveillance.</p>
- <nav><a href="/pub/for-activists">read more</a></nav>
- </section>
- <section id="for-developers">
- <h2>For Developers</h2>
- <p>We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.</p>
- <nav><a href="/pub/for-developers">read more</a></nav>
- </section>
- <section id="dream-team">
- <h2>DREAM Team</h2>
- <p>Contact the team and learn how the project came about.</p>
- <nav><a href="/pub/dream-team">read more</a></nav>
- </section>
- </article>
- </main>
-
- <aside>
- <section id="pitch">
- <h2>Distributed Replicated Edge Agency Machine</h2>
- <p><abbr title="Public Universal Base: Libre Infrastructure Community">PUBLIC</abbr> DREAM
- empowers communities anywhere to collaborate in the local creation and maintenance
- of open knowledge without the need for central coordination. DREAM enables the
- convergence of distributed <abbr title="Peer-to-Peer">P2P</abbr> networks, linked
- data models, and social solidary economy best practices.
- (<a href="/pub/intro">read more</a>)</p>
- </section>
- <article class="topics-list">
- <section id="wp4">
- <h2><a href="/c/wp4-reporting/6">REPORTING</a></h2>
- <d-topics-list discourse-url="https://dream.public.cat" per-page="5" category="7" status="open"></d-topics-list>
- </section>
- </article>
- </aside>
-
- <footer>
- <nav>
- <ul>
- <li><a href="/pub/contact">Contact</a></li>
- <li><a href="/pub/for-activists">For Activists</a></li>
- <li><a href="/pub/for-developers">For Developers</a></li>
- </ul>
- </nav>
- <p>Copyright ©2020 PUBLIC — <a href="mailto:dream@public.cat">dream@public.cat</a></p>
- </footer>
- <!-- Load latest open topics from Discourse -->
- <script src="https://dream.public.cat/javascripts/embed-topics.js"></script>
-</body>
-
-</html>
+index-002.html \ No newline at end of file
diff --git a/main_style-001.css b/main_style-001.css
new file mode 100644
index 0000000..38fcc18
--- /dev/null
+++ b/main_style-001.css
@@ -0,0 +1,52 @@
+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
new file mode 100644
index 0000000..2423bd5
--- /dev/null
+++ b/main_style-003.css
@@ -0,0 +1,288 @@
+: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;
+}
+
+/**
+ * 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;
+ }
+
+}
diff --git a/quoty.png b/quoty.png
new file mode 100644
index 0000000..9617b0d
--- /dev/null
+++ b/quoty.png
Binary files differ