Overhaul main container layout
This commit is contained in:
parent
079bd8f6e5
commit
834b7b6227
|
@ -132,19 +132,15 @@ body {
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
color: var(--clr-main-heading);
|
color: var(--clr-main-heading);
|
||||||
}
|
font-size: 2.2rem;
|
||||||
|
border-bottom: 0.18rem solid var(--clr-title-border);
|
||||||
h1 {
|
|
||||||
margin-bottom: 1.2rem;
|
margin-bottom: 1.2rem;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2, h3, h4, h5, h6 {
|
h2, h3, h4, h5, h6 {
|
||||||
color: var(--clr-sub-heading);
|
color: var(--clr-sub-heading);
|
||||||
}
|
margin-top: 2em;
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
border-bottom: 0.18rem solid var(--clr-title-border);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
|
@ -253,43 +249,42 @@ dd {
|
||||||
|
|
||||||
/* MAIN CONTENT */
|
/* MAIN CONTENT */
|
||||||
main,
|
main,
|
||||||
.content-container,
|
.main__header {
|
||||||
.divided-article {
|
|
||||||
gap: 0.8rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.8rem;
|
||||||
|
grid-template-areas:
|
||||||
|
'mheadr'
|
||||||
|
'leftsb'
|
||||||
|
'articl'
|
||||||
|
'rightb';
|
||||||
}
|
}
|
||||||
|
|
||||||
article:not(.divided-article),
|
.main__header {
|
||||||
.content-section,
|
|
||||||
.qna-section {
|
|
||||||
background-color: var(--clr-content-bg);
|
background-color: var(--clr-content-bg);
|
||||||
padding: 1.35rem;
|
padding: 1em;
|
||||||
|
grid-area: mheadr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-section {
|
article {
|
||||||
padding: 1.25rem 0;
|
grid-area: articl;
|
||||||
|
background-color: var(--clr-content-bg);
|
||||||
|
padding: 1.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article__info {
|
.article__info {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: grid;
|
display: grid;
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.article__info p {
|
.article__info p {
|
||||||
padding: 0.1em 0;
|
padding: 0.1em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
article, .content-container {
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar--sticky {
|
.sidebar--sticky {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 5rem;
|
top: 5rem;
|
||||||
|
@ -303,11 +298,11 @@ article, .content-container {
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-sidebar {
|
.left-sidebar {
|
||||||
order: 1;
|
grid-area: leftsb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-sidebar {
|
.right-sidebar {
|
||||||
order: 3;
|
grid-area: rightb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-sidebar:empty,
|
.left-sidebar:empty,
|
||||||
|
@ -325,27 +320,10 @@ article, .content-container {
|
||||||
/* 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; */
|
||||||
display: flex;
|
grid-template-areas:
|
||||||
flex-direction: row;
|
'mheadr mheadr mheadr mheadr'
|
||||||
justify-content: center;
|
'leftsb articl articl rightb';
|
||||||
}
|
|
||||||
|
|
||||||
aside {
|
|
||||||
width: 12rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
article, .content-container {
|
|
||||||
flex: 1;
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-sidebar {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-sidebar {
|
|
||||||
order: 3;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue