From ef458c18010dfed551c20f9502da15d5ee199e25 Mon Sep 17 00:00:00 2001
From: hellekin <hellekin@cepheide.org>
Date: Tue, 29 Sep 2020 16:28:56 +0200
Subject: Adapt CSS to new HTML with reproduced design

Note: I forgot to warn against inline CSS. It's (become) bad practice and may
lead to design inconsistency on secure sites that explicitly forbid inline CSS
(to avoid some classes of attacks where attackers inject CSS rules). It also
breaks separation of semantic content and visual design.

I.e., the site should look good without style at all (try "View > Page Style >
no style" on your browser).

Here come the CSS changes:

1. Replace `padding-top` with `line-height`: it gives a similar result, but the
original text appears in the middle of the logo...
2. Which brings to `color: transparent` to remove the text without removing it
for text-based browsers (including screen readers)
3. Apply `.tagline` style to `body>header>h2` to keep consistency with the proposed design
4. Apply inline CSS to the `.tagline` class (now uniquely used by the tagline).
5. Remove the `div.padding` and use a `padding-bottom` on the header instead
6. Apply `div.grid-container` to `main>article` instead
7. Apply `.grid-container>section` to `main>article>section` instead
8. Apply `.button` to `main nav a` instead
9. Remove `div[name=padding]` and apply margin to `aside>section`

Here we match the proposed design almost to the pixel.
---
 main_style.css | 41 +++++++++++++++++++++++++++--------------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/main_style.css b/main_style.css
index 38fcc18..43a37de 100644
--- a/main_style.css
+++ b/main_style.css
@@ -5,30 +5,32 @@ body {
 }
 
 body>header>h1 {
-    padding-top: 15rem;
     background: transparent url("https://dream.public.cat/uploads/dream/original/1X/0c90cdab7f4542baa08e4232e2ddb7e8216b419c.png") center/15rem no-repeat;
+    line-height: 15rem;
+    color: transparent;
 }
 
-.button {
-    background-color: #4CAF50;
-    border: none;
-    color: white;
-    padding: 15px 32px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 1rem;
+body>header>h2 {
+    font-size: 2.5rem;
+    font-weight: normal;
+}
+
+body>header {
+    padding-bottom: 1.5rem;
 }
 
+.tagline {
+    font-size: 1.25rem;
+}
 
-.grid-container {
+main>article {
     display: grid;
     grid-template-columns: 33% 34% 33%;
     background-color: #2196F3;
     padding: 10px;
 }
 
-.grid-container>section {
+main>article>section {
     background-color: gray;
     border: 1px solid black;
     padding: 20px;
@@ -36,8 +38,15 @@ body>header>h1 {
     text-align: center;
 }
 
-.tagline {
-    font-size: 2.5rem;
+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 {
@@ -45,6 +54,10 @@ aside {
     margin: auto;
 }
 
+aside>section {
+    margin: 3rem auto;
+}
+
 section {
     background-color: gray;
     border: 0.5rem solid #2196F3;
-- 
cgit v1.2.3