Set padding of main container child elements

This commit is contained in:
Helen Chong 2024-04-14 22:19:20 +08:00
parent 490249a9bf
commit 7cb4ea6baa
1 changed files with 13 additions and 32 deletions

View File

@ -247,8 +247,7 @@ dd {
} }
/* MAIN CONTENT */ /* MAIN CONTENT */
main, main {
.main__header {
width: 100%; width: 100%;
} }
@ -256,23 +255,14 @@ main {
font-size: 1.2rem; font-size: 1.2rem;
display: grid; display: grid;
gap: 0.8rem; gap: 0.8rem;
grid-template-areas:
'mheadr'
'leftsb'
'articl'
'rightb';
} }
.main__header { .main__header,
article,
.left-sidebar,
.right-sidebar {
background-color: var(--clr-content-bg); background-color: var(--clr-content-bg);
padding: 1em; padding: 1.5rem clamp(1rem, 5%, 3rem);
grid-area: mheadr;
}
article {
grid-area: articl;
background-color: var(--clr-content-bg);
padding: 1.4rem;
} }
.article__info { .article__info {
@ -291,19 +281,10 @@ article {
.left-sidebar, .left-sidebar,
.right-sidebar { .right-sidebar {
padding: 1rem;
font-size: 0.9rem; font-size: 0.9rem;
background-color: var(--clr-content-bg); background-color: var(--clr-content-bg);
} }
.left-sidebar {
grid-area: leftsb;
}
.right-sidebar {
grid-area: rightb;
}
.left-sidebar:empty, .left-sidebar:empty,
.right-sidebar:empty { .right-sidebar:empty {
display: none; display: none;
@ -311,29 +292,29 @@ article {
/* Tablet main content layout */ /* Tablet main content layout */
@media only screen and (min-width: 43.75rem) { @media only screen and (min-width: 43.75rem) {
main { /* main {
width: 43.75rem; width: 43.75rem;
} } */
} }
/* Desktop main content layout */ /* Desktop main content layout */
@media only screen and (min-width: 60rem) { @media only screen and (min-width: 60rem) {
main { /* main {
/* width: 60rem; */ width: 60rem;
grid-template-areas: grid-template-areas:
'mheadr mheadr mheadr mheadr' 'mheadr mheadr mheadr mheadr'
'leftsb articl articl rightb'; 'leftsb articl articl rightb';
} } */
} }
@media only screen and (min-width: 80rem) { @media only screen and (min-width: 80rem) {
main { /* main {
width: 75rem; width: 75rem;
} }
aside { aside {
width: 15rem; width: 15rem;
} } */
} }
/* HEADING WRAPPER AND ANCHOR */ /* HEADING WRAPPER AND ANCHOR */