Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Overhaul main container layout

This commit is contained in:
Helen Chong 2024-04-14 18:06:46 +08:00
parent 079bd8f6e5
commit 834b7b6227
1 changed files with 25 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/assets/css/main.css
View File

@ -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;
} }
} }