Adjust main container and article grid layout
This commit is contained in:
parent
7cb4ea6baa
commit
f0971e2971
|
@ -17,15 +17,12 @@ eleventyComputed:
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{% if toc %}
|
<div class="article__wrapper">
|
||||||
{% include "toc.njk" %}
|
{% if toc %}
|
||||||
{% endif %}
|
{% include "toc.njk" %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
</article>
|
</article>
|
||||||
|
</div>
|
||||||
<aside class="right-sidebar">
|
|
||||||
<h3>Title</h3>
|
|
||||||
<p>Right sidebar content</p>
|
|
||||||
</aside>
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue