Create sticky sidebar class

This commit is contained in:
Helen Chong 2024-04-18 11:44:35 +08:00
parent 3c06120309
commit 32069b9a6a
3 changed files with 8 additions and 15 deletions

View File

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

View File

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

View File

@ -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 {