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);
@@ -24,12 +6,12 @@ As well as useful links to learn more */
246 --line : 1px solid;
257 --container : 1280px ;
268}
27- /* ====== Base Elements ======
28- General rules for basic HTML elements in any context */
299body {
3010 background : var (--paper );
3111 color : var (--ink );
3212 font : var (--font );
13+ padding : 140px ;
14+ height : auto;
3315}
3416a {
3517 padding : var (--space );
@@ -41,14 +23,12 @@ svg {
4123 width : 100% ;
4224 object-fit : cover;
4325}
44- /* ====== Site Layout ======
45- Setting the overall rules for page regions
46- https://www.w3.org/WAI/tutorials/page-structure/regions/
47- */
26+
4827main {
4928 max-width : var (--container );
5029 margin : 0 auto calc (var (--space ) * 4 ) auto;
51- padding-bottom : 80px ;
30+ margin-bottom : 6rem ;
31+ padding : bottom 2rem ; ;
5232}
5333header {
5434 text-align : center;
@@ -74,13 +54,7 @@ footer {
7454 justify-content : center;
7555}
7656
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- */
57+
8458main {
8559 display : grid;
8660 grid-template-columns : 1fr 1fr ;
@@ -89,11 +63,6 @@ main {
8963 grid-column : span 2 ;
9064 }
9165}
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- */
9766article {
9867 border : var (--line );
9968 padding-bottom : var (--space );
0 commit comments