From ef1572b7333424c731eb4450f154c29eaf9db031 Mon Sep 17 00:00:00 2001
From: hellekin <hellekin@cepheide.org>
Date: Sat, 7 Nov 2020 22:52:42 +0100
Subject: 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
---
 main_style-001.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 main_style-001.css

(limited to 'main_style-001.css')

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;
+}
-- 
cgit v1.2.3