Create sticky sidebar class
This commit is contained in:
parent
3c06120309
commit
32069b9a6a
|
@ -1,5 +1,5 @@
|
||||||
<aside class="left-sidebar">
|
<aside class="left-sidebar">
|
||||||
<details class="toc__wrapper" open>
|
<details class="toc__wrapper sidebar--sticky">
|
||||||
<summary class="toc__heading">
|
<summary class="toc__heading">
|
||||||
Table of Contents
|
Table of Contents
|
||||||
</summary>
|
</summary>
|
||||||
|
@ -8,11 +8,6 @@
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.toc__wrapper {
|
|
||||||
position: sticky;
|
|
||||||
top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc__heading {
|
.toc__heading {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<aside class="right-sidebar">
|
<aside class="right-sidebar">
|
||||||
<nav class="content__nav">
|
<nav class="content__nav sidebar--sticky">
|
||||||
<h2 class="content__nav--title">Content Index</h2>
|
<h2 class="content__nav--title">Content Index</h2>
|
||||||
<ul class="content__nav--links">
|
<ul class="content__nav--links">
|
||||||
{% for archive in collections.archive %}
|
{% for archive in collections.archive %}
|
||||||
|
@ -14,11 +14,6 @@
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.content__nav {
|
|
||||||
position: sticky;
|
|
||||||
top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__nav--title {
|
.content__nav--title {
|
||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
}
|
}
|
||||||
|
|
|
@ -273,9 +273,7 @@ main {
|
||||||
|
|
||||||
.article,
|
.article,
|
||||||
.content:not(.content--divided),
|
.content:not(.content--divided),
|
||||||
.content__section,
|
.content__section {
|
||||||
.left-sidebar,
|
|
||||||
.right-sidebar {
|
|
||||||
background-color: var(--clr-content-bg);
|
background-color: var(--clr-content-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -297,6 +295,11 @@ main {
|
||||||
margin-top: 1.15em;
|
margin-top: 1.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar--sticky {
|
||||||
|
position: sticky;
|
||||||
|
top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* Desktop main content layout */
|
/* Desktop main content layout */
|
||||||
@media only screen and (min-width: 60rem) {
|
@media only screen and (min-width: 60rem) {
|
||||||
.content__wrapper {
|
.content__wrapper {
|
||||||
|
|
Loading…
Reference in New Issue