aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorhellekin <hellekin@cepheide.org>2020-09-29 16:28:56 +0200
committerhellekin <hellekin@cepheide.org>2020-09-29 16:28:56 +0200
commitef458c18010dfed551c20f9502da15d5ee199e25 (patch)
tree7747d701f42806877b503e872da69cafc3cde325
parent335e4bd342b0b4e0662b534c7809edb7772621fb (diff)
downloaddream.public.cat-ef458c18010dfed551c20f9502da15d5ee199e25.tar.gz
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.
-rw-r--r--main_style.css41
1 files 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;