Set padding of main container child elements
This commit is contained in:
parent
490249a9bf
commit
7cb4ea6baa
|
@ -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 */
|
||||||
|
|
Loading…
Reference in New Issue