File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 99 --line : 1px solid;
1010 --container : 1280px ;
1111}
12- /* ====== Base Elements ======
13- General rules for basic HTML elements in any context */
1412body {
1513 background : var (--paper );
1614 color : var (--ink );
2624 width : 100% ;
2725 object-fit : cover;
2826}
29- /* ====== Site Layout ======
30- Setting the overall rules for page regions
31- https://www.w3.org/WAI/tutorials/page-structure/regions/
32- */
33- main {
34- max-width : var (--container );
35- margin : 0 auto calc (var (--space ) * 4 ) auto;
36- }
37- footer {
38- text-align : center;
39- }
40- /* ====== Articles Grid Layout ====
41- Setting the rules for how articles are placed in the main element.
42- Inspect this in Devtools and click the "grid" button in the Elements view
43- Play with the options that come up.
44- https://developer.chrome.com/docs/devtools/css/grid
45- https://gridbyexample.com/learn/
46- */
47- main {
48- display : grid;
49- grid-template-columns : 1fr 1fr ;
50- gap : var (--space );
51- > * : first-child {
52- grid-column : span 2 ;
53- }
54- }
55- /* ====== Article Layout ======
56- Setting the rules for how elements are placed in the article.
57- Now laying out just the INSIDE of the repeated card/article design.
58- Keeping things orderly and separate is the key to good, simple CSS.
59- */
6027article {
6128 border : var (--line );
6229 padding-bottom : var (--space );
You can’t perform that action at this time.
0 commit comments