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
author: hellekin <hellekin@cepheide.org> 2020-11-07 22:52:42 +0100
committer: hellekin <hellekin@cepheide.org> 2020-11-07 23:03:38 +0100
commit: ef1572b7333424c731eb4450f154c29eaf9db031 (patch)
tree: 6a222cacc709e0749b9114368197279e8ec79c64
parent: ef458c18010dfed551c20f9502da15d5ee199e25 (diff)
download: dream.public.cat-ef1572b7333424c731eb4450f154c29eaf9db031.tar.gz
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
diff --git a/curvy-r.png b/curvy-r.png
new file mode 100644
index 0000000..144d2e6
--- /dev/null
+++ b/curvy-r.png
diff --git a/filly.png b/filly.png
new file mode 100644
index 0000000..a29b77f
--- /dev/null
+++ b/filly.png
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
author	hellekin <hellekin@cepheide.org>	2020-11-07 22:52:42 +0100
committer	hellekin <hellekin@cepheide.org>	2020-11-07 23:03:38 +0100
commit	ef1572b7333424c731eb4450f154c29eaf9db031 (patch)
tree	6a222cacc709e0749b9114368197279e8ec79c64
parent	ef458c18010dfed551c20f9502da15d5ee199e25 (diff)
download	dream.public.cat-ef1572b7333424c731eb4450f154c29eaf9db031.tar.gz