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

Adjust main container and article grid layout

This commit is contained in:
Helen Chong 2024-04-15 00:13:57 +08:00
parent 7cb4ea6baa
commit f0971e2971
2 changed files with 39 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/_includes/main/article.njk
View File

@ -17,6 +17,7 @@ eleventyComputed:
</div> </div>
</header> </header>
<div class="article__wrapper">
{% if toc %} {% if toc %}
{% include "toc.njk" %} {% include "toc.njk" %}
{% endif %} {% endif %}
@ -24,8 +25,4 @@ eleventyComputed:
<article> <article>
{{ content | safe }} {{ content | safe }}
</article> </article>
</div>
<aside class="right-sidebar">
<h3>Title</h3>
<p>Right sidebar content</p>
</aside>

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

@ -247,11 +247,8 @@ dd {
} }
/* MAIN CONTENT */ /* MAIN CONTENT */
main { main,
width: 100%; .article__wrapper {
}
main {
font-size: 1.2rem; font-size: 1.2rem;
display: grid; display: grid;
gap: 0.8rem; gap: 0.8rem;
@ -282,39 +279,44 @@ article,
.left-sidebar, .left-sidebar,
.right-sidebar { .right-sidebar {
font-size: 0.9rem; font-size: 0.9rem;
background-color: var(--clr-content-bg);
}
.left-sidebar:empty,
.right-sidebar:empty {
display: none;
}
/* Tablet main content layout */
@media only screen and (min-width: 43.75rem) {
/* main {
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 { .article__wrapper {
width: 60rem; grid-template-areas: 'a b c';
grid-template-areas: grid-template-columns: minmax(0,15rem) minmax(0,2.5fr) minmax(0,15rem);
'mheadr mheadr mheadr mheadr' }
'leftsb articl articl rightb';
} */ article {
grid-area: b;
}
.left-sidebar {
grid-area: a;
}
.right-sidebar {
grid-area: c;
}
} }
@media only screen and (min-width: 80rem) { @media only screen and (min-width: 80rem) {
/* main { main {
width: 75rem; max-width: 80rem;
}
} }
aside { /* FOOTER COMPONENT */
width: 15rem; .main-footer {
} */ background: var(--clr-main-footer-bg);
width: 100%;
padding: 0.8rem;
text-align: center;
}
.main-footer p {
padding: 0;
} }
/* HEADING WRAPPER AND ANCHOR */ /* HEADING WRAPPER AND ANCHOR */
@ -668,15 +670,3 @@ article,
#5bcefa 0 100% #5bcefa 0 100%
); );
} }
/* FOOTER COMPONENT */
.main-footer {
background: var(--clr-main-footer-bg);
width: 100%;
padding: 0.5rem;
text-align: center;
}
.main-footer p {
padding: 0;
}