|
1 | | -/* Here are some starter styles |
2 | | -You can edit these or replace them entirely |
3 | | -It's showing you a common way to organise CSS |
4 | | -And includes solutions to common problems |
5 | | -As well as useful links to learn more */ |
6 | | - |
7 | | -/* ====== Design Palette ====== |
8 | | - This is our "design palette". |
9 | | - It sets out the colours, fonts, styles etc to be used in this design |
10 | | - At work, a designer will give these to you based on the corporate brand, but while you are learning |
11 | | - You can design it yourself if you like |
12 | | - Inspect the starter design with Devtools |
13 | | - Click on the colour swatches to see what is happening |
14 | | - I've put some useful CSS you won't have learned yet |
15 | | - For you to explore and play with if you are interested |
16 | | - https://web.dev/articles/min-max-clamp |
17 | | - https://scrimba.com/learn-css-variables-c026 |
18 | | -====== Design Palette ====== */ |
19 | 1 | :root { |
20 | 2 | --paper: oklch(7 0 0); |
21 | 3 | --ink: color-mix(in oklab, var(--color) 5%, black); |
@@ -52,7 +34,11 @@ main { |
52 | 34 | footer { |
53 | 35 | position: fixed; |
54 | 36 | bottom: 0; |
55 | | - text-align: center; |
| 37 | + left: 0; |
| 38 | + width: 100%; |
| 39 | + background: white; |
| 40 | + border-top: 1px solid black; |
| 41 | + z-index: 9999; |
56 | 42 | } |
57 | 43 | /* ====== Articles Grid Layout ==== |
58 | 44 | Setting the rules for how articles are placed in the main element. |
@@ -80,10 +66,17 @@ article { |
80 | 66 | text-align: left; |
81 | 67 | display: grid; |
82 | 68 | grid-template-columns: var(--space) 1fr var(--space); |
83 | | - > * { |
84 | | - grid-column: 2/3; |
85 | | - } |
86 | | - > img { |
87 | | - grid-column: span 3; |
88 | | - } |
| 69 | +} |
| 70 | + |
| 71 | +article > * { |
| 72 | + grid-column: 2 / 3; |
| 73 | +} |
| 74 | + |
| 75 | +article > img { |
| 76 | + grid-column: span 3; |
| 77 | +} |
| 78 | + |
| 79 | +article h2, |
| 80 | +article p { |
| 81 | + margin: 0; |
89 | 82 | } |
0 commit comments