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