|
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 | 1 |
|
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 | | -:root { |
20 | | - --paper: oklch(7 0 0); |
21 | | - --ink: color-mix(in oklab, var(--color) 5%, black); |
22 | | - --font: 100%/1.5 system-ui; |
23 | | - --space: clamp(6px, 6px + 2vw, 15px); |
24 | | - --line: 1px solid; |
25 | | - --container: 1280px; |
26 | | -} |
27 | | -/* ====== Base Elements ====== |
28 | | - General rules for basic HTML elements in any context */ |
| 2 | +/* ====== Base Elements ====== */ |
29 | 3 | body { |
30 | | - background: var(--paper); |
31 | | - color: var(--ink); |
32 | | - font: var(--font); |
33 | 4 | margin:0; |
34 | 5 | box-sizing:border-box; |
35 | 6 | line-height: 1.5; |
36 | 7 | } |
37 | | - |
38 | 8 | .container { |
39 | | - width: 70%; |
| 9 | + width: 80%; |
40 | 10 | max-width: 1200px; |
41 | 11 | margin: 0 auto; |
42 | 12 | } |
43 | 13 |
|
44 | | -.article-read-more { |
45 | | - /*padding: var(--space);*/ |
46 | | - padding: .7em 2em; |
47 | | - background: #bde0fe; |
48 | | - /*border: var(--line);*/ |
49 | | - border: 1px solid blue; |
50 | | - max-width: fit-content; |
51 | | - text-decoration:none; |
52 | | - margin: 1rem 0 1.7rem 0; |
53 | | -} |
54 | | -.article-read-more:hover, .article-read-more:focus{ |
55 | | - background: #003049; |
56 | | - color: #fff; |
57 | | -} |
58 | 14 | img, |
59 | 15 | svg { |
60 | 16 | width: 100%; |
61 | | - object-fit: cover; |
62 | 17 | } |
63 | | -/* ====== Site Layout ====== |
64 | | -Setting the overall rules for page regions |
65 | | -https://www.w3.org/WAI/tutorials/page-structure/regions/ |
66 | | -*/ |
67 | | -main { |
68 | | - max-width: var(--container); |
69 | | - margin: 0 auto calc(var(--space) * 4) auto; |
70 | | -} |
71 | | -footer { |
72 | | - /*position: fixed;*/ |
73 | | - /*bottom: 0;*/ |
74 | | - /*text-align: center;*/ |
75 | 18 |
|
76 | | -} |
77 | | -/* ====== Articles Grid Layout ==== |
78 | | -Setting the rules for how articles are placed in the main element. |
79 | | -Inspect this in Devtools and click the "grid" button in the Elements view |
80 | | -Play with the options that come up. |
81 | | -https://developer.chrome.com/docs/devtools/css/grid |
82 | | -https://gridbyexample.com/learn/ |
83 | | -*/ |
84 | | -main { |
85 | | - display: grid; |
86 | | - grid-template-columns: 1fr 1fr; |
87 | | - gap: var(--space); |
88 | | - > *:first-child { |
89 | | - grid-column: span 2; |
90 | | - } |
91 | | -} |
92 | | -/* ====== Article Layout ====== |
93 | | -Setting the rules for how elements are placed in the article. |
94 | | -Now laying out just the INSIDE of the repeated card/article design. |
95 | | -Keeping things orderly and separate is the key to good, simple CSS. |
96 | | -*/ |
97 | | -article { |
98 | | - border: var(--line); |
99 | | - padding-bottom: var(--space); |
100 | | - text-align: left; |
101 | | - display: grid; |
102 | | - grid-template-columns: var(--space) 1fr var(--space); |
103 | | - > * { |
104 | | - grid-column: 2/3; |
105 | | - } |
106 | | - > img { |
107 | | - grid-column: span 3; |
108 | | - } |
109 | | -} |
110 | | -/* ====== Global Resets ====== */ |
111 | | -h1, |
112 | | -p { |
113 | | - margin: 0; |
114 | | -} |
115 | 19 |
|
116 | 20 | /* ====== Typography ====== */ |
117 | 21 | h1 { |
118 | 22 | font-weight: 900; |
119 | 23 | font-size: 46px; |
120 | 24 | color:#c1121f; |
121 | | - margin-bottom:0; |
| 25 | + margin:0; |
122 | 26 | padding:0; |
123 | 27 | } |
124 | 28 | .site-tagline{ |
|
0 commit comments