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 ====== */
191: root {
202 --paper : oklch (7 0 0 );
213 --ink : color-mix (in oklab, var (--color ) 5% , black);
3618 border : var (--line );
3719 max-width : fit-content;
3820}
21+ a : hover {
22+ border-color : var (--ink );
23+ background : blue;
24+ color : whitesmoke;
25+ }
26+
3927img ,
4028svg {
4129 width : 100% ;
@@ -48,10 +36,12 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
4836main {
4937 max-width : var (--container );
5038 margin : 0 auto calc (var (--space ) * 4 ) auto;
39+ padding-bottom : 80px ;
5140}
5241footer {
5342 position : fixed;
5443 bottom : 0 ;
44+ width : 100% ;
5545 text-align : center;
5646}
5747/* ====== Articles Grid Layout ====
@@ -61,6 +51,11 @@ Play with the options that come up.
6151https://developer.chrome.com/docs/devtools/css/grid
6252https://gridbyexample.com/learn/
6353*/
54+ header {
55+ text-align : center;
56+ margin-bottom : var (--space );
57+ }
58+
6459main {
6560 display : grid;
6661 grid-template-columns : 1fr 1fr ;
0 commit comments