@@ -28,18 +28,16 @@ As well as useful links to learn more */
2828/* ====== Base Elements ======
2929 General rules for basic HTML elements in any context */
3030body {
31- background-color : rgba ( 159 , 210 , 58 , 0.691 );
31+ background : var ( --paper );
3232 color : var (--ink );
3333 font : var (--font );
34- }
35- .header {
36- text-align : center;
37- padding : 2px ;
34+ padding-bottom : 60px ;
3835}
3936a {
4037 padding : var (--space );
4138 border : var (--line );
4239 max-width : fit-content;
40+ border-style : none;
4341}
4442img ,
4543svg {
@@ -50,20 +48,18 @@ svg {
5048Setting the overall rules for page regions
5149https://www.w3.org/WAI/tutorials/page-structure/regions/
5250*/
53-
54-
55- .main {
56- background-color : blanchedalmond;
51+ main {
5752 max-width : var (--container );
5853 margin : 0 auto calc (var (--space ) * 4 ) auto;
54+ display : flex;
5955}
60- . footer {
56+ footer {
6157 position : fixed;
6258 bottom : 0 ;
6359 text-align : center;
64- border-top : 1 px solid # 000 ;
65- background-color : rgba ( 206 , 245 , 107 , 0.663 ) ;
66-
60+ height : 60 px ;
61+ background-color : # f6f4f4 ;
62+ width : 100 % ;
6763}
6864/* ====== Articles Grid Layout ====
6965Setting the rules for how articles are placed in the main element.
@@ -73,7 +69,6 @@ https://developer.chrome.com/docs/devtools/css/grid
7369https://gridbyexample.com/learn/
7470*/
7571main {
76- text-align : center;
7772 display : grid;
7873 grid-template-columns : 1fr 1fr ;
7974 gap : var (--space );
@@ -95,7 +90,11 @@ article {
9590 > * {
9691 grid-column : 2 / 3 ;
9792 }
98- img {
93+ > img {
9994 grid-column : span 3 ;
10095 }
10196}
97+
98+ header {
99+ text-align : center;
100+ }
0 commit comments