Skip to content

Commit 5454930

Browse files
committed
Reader mode styling
1 parent 7b782f7 commit 5454930

File tree

2 files changed

+38
-4
lines changed

2 files changed

+38
-4
lines changed

css/tidyverse.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121

2222
/* Sidebar */
2323

24-
#quarto-sidebar {
24+
#quarto-sidebar,
25+
#quarto-content .sidebar-navigation {
2526

2627
color: #333;
2728
background-color: #fafafa;
@@ -39,6 +40,7 @@
3940
code {
4041
font-size: inherit;
4142
color: inherit;
43+
background-color: transparent;
4244
}
4345

4446
.chapter-number {
@@ -62,7 +64,8 @@
6264

6365
/* Margin sidebar (Toc) */
6466

65-
#quarto-margin-sidebar {
67+
#quarto-margin-sidebar,
68+
#quarto-content .margin-sidebar {
6669
code {
6770
font-size: inherit;
6871
color: inherit;

css/tidyverse_dark.scss

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,19 @@ $sidebar-color: #ccd1e2;
55
$sidebar-active-link-color: #c1ff42;
66
$body-link-color: #c1ff42;
77
$body-color-dark: #333;
8+
$body-bg: #1c1f2b;
89
$pre-bg: #2d3143;
910
$pre-color: #9dbed8;
11+
$toggle-border: #5d6173;
12+
$toggle-title-bg: #0c0f1b;
1013

1114
:root {
1215
--bs-body-bg: #1c1f2b;
1316
--bs-body-color: #cad2dd;
1417
}
1518

16-
#quarto-sidebar {
19+
#quarto-sidebar,
20+
#quarto-content .sidebar-navigation {
1721
background-color: $sidebar-bg;
1822
color: $sidebar-color;
1923
border: none !important;
@@ -35,6 +39,7 @@ $pre-color: #9dbed8;
3539
.sidebar-item-section>.sidebar-item-container:first-child a.active,
3640
.sidebar-item-section>.sidebar-item-container:first-child a:hover {
3741
color: #cad2dd;
42+
background-color: transparent;
3843
}
3944

4045
#quarto-search {
@@ -52,7 +57,8 @@ $pre-color: #9dbed8;
5257

5358
}
5459

55-
#quarto-margin-sidebar {
60+
#quarto-margin-sidebar,
61+
#quarto-content .margin-sidebar {
5662

5763
a.active,
5864
a:hover {
@@ -70,6 +76,31 @@ $pre-color: #9dbed8;
7076

7177
}
7278

79+
#quarto-content {
80+
.margin-sidebar.quarto-sidebar-toggle-contents {
81+
background-color: $sidebar-bg;
82+
color: $sidebar-color;
83+
}
84+
85+
.quarto-sidebar-toggle {
86+
background-color: $pre-color;
87+
border-color: $toggle-border;
88+
}
89+
90+
.quarto-sidebar-toggle-title {
91+
background-color: $toggle-title-bg;
92+
color: $sidebar-color;
93+
}
94+
95+
.quarto-sidebar-toggle.expanded .quarto-sidebar-toggle-title {
96+
border-bottom-color: $toggle-border;
97+
}
98+
99+
.quarto-sidebar-toggle+#quarto-sidebar {
100+
background-color: $body-bg;
101+
}
102+
}
103+
73104
#quarto-document-content {
74105
#title-block-header .quarto-title-meta-contents a {
75106
color: var(--bs-body-color);

0 commit comments

Comments
 (0)