Skip to content

Commit d09a568

Browse files
Dark mode styling (#1658)
* dark mode navbar and footer logos * homepage dark mode and spacing nudges * dark mode colors
1 parent ce2f854 commit d09a568

10 files changed

+214
-78
lines changed

_quarto.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ website:
3737
page-footer:
3838
left: |
3939
Proudly supported by
40-
[![](https://posit.co/wp-content/uploads/2024/06/Posit-Logos-2024_horiz-full-color.svg){fig-alt="Posit" width=65px}](https://posit.co)
40+
[![](/images/Posit-Logos-2024_horiz-full-color.svg){fig-alt="Posit" width=65px .light-content}](https://posit.co) [![](/images/Posit-Logos-2024_horiz-full-color-white-text.svg){fig-alt="Posit" width=65px .dark-content}](https://posit.co)
4141
center:
4242
- text: "About"
4343
href: about.qmd

docs/gallery/index.qmd

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ body.quarto-light #hero-banner {
6363
}
6464
6565
body.quarto-dark #hero-banner {
66-
background-color: rgb(60,64,82);
66+
background-color: #17212B;
6767
}
6868
6969
div.carousel {
Lines changed: 30 additions & 0 deletions
Loading
Lines changed: 17 additions & 0 deletions
Loading

images/demo-jupyter-output.png

-489 KB
Loading

index.css

Lines changed: 15 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,9 @@ body.quarto-dark .hero-banner h1 {
140140
}
141141

142142

143-
.hero-banner a {
144-
text-decoration: none;
143+
.hero-banner a:not(.btn) {
144+
text-decoration: underline;
145+
text-underline-offset: 3px;
145146
}
146147

147148
.hero-banner h3 {
@@ -154,20 +155,9 @@ body.quarto-dark .hero-banner h1 {
154155
}
155156

156157
.hero-banner a[role="button"] {
157-
margin-right: 17px;
158-
margin-top: 0.6rem;
159-
margin-bottom: 1.6rem;
160-
}
161-
162-
163-
.hero-banner #btn-guide {
164-
background-color: #959595 !important;
165-
border: none;
158+
margin-bottom: 0;
166159
}
167160

168-
169-
170-
171161
.hero-banner ul {
172162
padding-inline-start: 21px;
173163
font-size: 1.1rem;
@@ -185,20 +175,18 @@ body.quarto-light .alt-background {
185175
}
186176

187177
body.quarto-dark .alt-background {
188-
background-color: rgb(40,44,52);
189-
border-top: 1px solid #3b3f47;
190-
border-bottom: 1px solid #3b3f47;
178+
background-color: #17212B;
179+
border-top: 1px solid #151515;
180+
border-bottom: 1px solid #151515;
191181
}
192182

193183
.hello-quarto {
194184
padding-bottom: 1rem;
195185
}
196186

197-
@media (min-width: 600px) {
187+
@media (min-width: 715px) {
198188
.hello-quarto-banner {
199189
display: inline-flex;
200-
align-content: center;
201-
justify-content: center;
202190
}
203191

204192
.hello-quarto-banner h1 {
@@ -208,16 +196,19 @@ body.quarto-dark .alt-background {
208196

209197
.hello-quarto-banner .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
210198
border: none;
211-
border-bottom: 2px solid #39729E !important;
199+
border-bottom: 2px solid #39729E;
212200
color: #39729E;
213201
background-color: transparent;
214-
215202
}
216203

217204
.hello-quarto-banner .nav-pills button {
218205
width: 125px;
219206
}
220-
207+
@media (max-width: 560px) {
208+
.hello-quarto-banner .nav-pills button {
209+
width: unset;
210+
}
211+
}
221212
.hello-quarto .tab-content {
222213
border: none;
223214
padding: 0;
@@ -233,7 +224,6 @@ body.quarto-dark .hello-quarto .tab-content {
233224

234225
.hello-quarto .tab-content p {
235226
font-size: 1.1em;
236-
margin-bottom: 1.5em;
237227
}
238228

239229
body.quarto-light .hello-quarto div.sourceCode {
@@ -242,16 +232,10 @@ body.quarto-light .hello-quarto div.sourceCode {
242232
}
243233

244234
body.quarto-dark .hello-quarto div.sourceCode {
245-
background-color: rgb(40,44,52);
235+
background-color: #151515;
246236
border: 1px solid #3b3f47;
247237
}
248238

249-
.hello-output {
250-
background-color: white;
251-
border: 1px solid #dee2e6;
252-
max-height: 660px;
253-
}
254-
255239
.features {
256240
padding-bottom: 2em;
257241
}
@@ -292,7 +276,6 @@ body.quarto-dark .feature p:first-of-type {
292276

293277
.get-started {
294278
text-align: center;
295-
padding-bottom: 2rem;
296279
}
297280

298281
.get-started h3 {

index.qmd

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ resources:
1717
::: {.hero-banner}
1818

1919

20-
::: {.content-block}
20+
::: {.content-block .py-4}
2121

2222
::: {.hero-text}
2323
# Welcome to Quarto^[®]{.trademark}^ {.mt-1}
@@ -32,9 +32,13 @@ resources:
3232

3333
### Analyze. Share. Reproduce. You have a story to tell with data---tell it with Quarto.
3434

35-
::: {.hero-buttons}
36-
[Get Started](/docs/get-started/index.qmd){.btn-action-primary .btn-action .btn .btn-success .btn-lg role="button"}
37-
[Guide](/docs/guide/){#btn-guide .btn-action .btn .btn-info .btn-lg role="button"}
35+
::: {.grid .gap-3 .pb-3 .pt-4}
36+
::: {.g-col-12 .g-col-sm-4}
37+
[Get Started](/docs/get-started/index.qmd){.btn-action-primary .btn-action .btn .btn-lg .w-100 role="button"}
38+
:::
39+
::: {.g-col-12 .g-col-sm-4 .mb-2}
40+
[Guide](/docs/guide/){#btn-guide .btn-action .btn-secondary .btn .btn-lg .w-100 role="button"}
41+
:::
3842
:::
3943
:::
4044

@@ -70,11 +74,15 @@ resources:
7074

7175

7276
::: {.hello-quarto .alt-background}
73-
::: {.content-block}
77+
::: {.content-block .mt-2 .pt-4 .pb-2}
7478

7579
::: {.hello-quarto-banner}
76-
# Hello, Quarto
77-
<ul class="nav nav-pills" id="hello-quarto-tab" role="tablist">
80+
::: {.grid .gap-1}
81+
::: {.g-col-lg-4 .g-col-12}
82+
# Hello, Quarto
83+
:::
84+
::: {.g-col-lg-8 .g-col-12}
85+
<ul class="nav nav-pills d-flex flex-wrap" id="hello-quarto-tab" role="tablist">
7886
<li class="nav-item" role="presentation">
7987
<button class="nav-link active" id="python-tab" data-bs-toggle="tab" data-bs-target="#python" type="button" role="tab" aria-controls="python" aria-selected="true">Python</button>
8088
</li>
@@ -89,31 +97,34 @@ resources:
8997
</li>
9098
</ul>
9199
:::
100+
:::
101+
:::
92102

93-
<div class="tab-content" id="hello-quarto-tabcontent">
103+
<div class="tab-content mt-2" id="hello-quarto-tabcontent">
94104

95105
<div class="tab-pane fade show active" id="python" role="tabpanel" aria-labelledby="python-tab">
96-
106+
::: {.grid .gap-3}
107+
::: {.g-col-md-11 .g-col-12 .mb-0}
97108
Combine Jupyter notebooks with flexible options to produce production quality output in a wide variety of formats. Author using traditional notebook UIs or with a plain text markdown representation of notebooks.
98-
99-
::: {.grid}
100-
::: {.g-col-lg-6 .g-col-12 style="max-height: 605px;"}
101-
![](images/demo-jupyter-plain.png){.hello-output fig-alt="Example Jupyter notebook entitled Palmer Penguins with code cells, text, and a scatterplot."}
109+
:::
110+
::: {.g-col-sm-6 .g-col-12}
111+
![](images/demo-jupyter-plain.png){fig-alt="Example Jupyter notebook entitled Palmer Penguins with code cells, text, and a scatterplot."}
102112
:::
103113

104-
::: {.g-col-lg-6 .g-col-12 style="background-color: white; border: 1px solid #dee2e6; height: max-605px;"}
114+
::: {.g-col-sm-6 .g-col-12}
105115
![](images/demo-jupyter-output.png){fig-alt="Output of example Jupyter notebook, Palmer Penguins, in HTML showing title, metadata, text, code, and scatterplot. At the top there is a dropdown option to show or hide the code."}
106116
:::
107117
:::
108118

109119
</div>
110120

111121
<div class="tab-pane fade" id="knitr" role="tabpanel" aria-labelledby="knitr-tab">
112-
122+
::: {.grid}
123+
::: {.g-col-md-11 .g-col-12}
113124
Quarto is a multi-language, next generation version of R Markdown from Posit, with many new features and capabilities. Like R Markdown, Quarto uses [knitr](https://yihui.org/knitr/) to execute R code, and is therefore able to render most existing Rmd files without modification.
114125

115-
::: {.grid}
116-
::: {.g-col-lg-6 .g-col-12}
126+
:::
127+
::: {.g-col-md-6 .g-col-12}
117128
````markdown
118129
---
119130
title: "ggplot2 demo"
@@ -144,20 +155,20 @@ ggplot(airquality, aes(Temp, Ozone)) +
144155

145156
````
146157
:::
147-
148-
::: {.g-col-lg-6 .g-col-12}
158+
::: {.g-col-md-6 .g-col-12}
149159
![](images/hello-knitr.png){.hello-output fig-alt="Example output with title (ggplot2 demo), author (Norah Jones), and date (5/22/2021). Below is a header reading Air Quality followed by body text (Figure 1 further explores the impact of temperature on ozone level.) with a toggleable code field, and figure with caption Figure 1 Temperature and ozone level."}
150160
:::
151161
:::
152162

153163
</div>
154164

155165
<div class="tab-pane fade" id="julia" role="tabpanel" aria-labelledby="julia-tab">
156-
166+
::: {.grid}
167+
::: {.g-col-md-11 .g-col-12}
157168
Combine markdown and Julia code to create dynamic documents that are fully reproducible. Quarto executes Julia code via the [IJulia](https://github.com/JuliaLang/IJulia.jl) Jupyter kernel, enabling you to author in plain text (as shown below) or render existing Jupyter notebooks.
158169

159-
::: {.grid}
160-
::: {.g-col-lg-6 .g-col-12}
170+
:::
171+
::: {.g-col-md-6 .g-col-12}
161172
````markdown
162173
---
163174
title: "Plots Demo"
@@ -192,21 +203,20 @@ plot(sin,
192203
````
193204
:::
194205

195-
::: {.g-col-lg-6 .g-col-12}
206+
::: {.g-col-md-6 .g-col-12}
196207
![](images/hello-julia.png){.hello-output fig-alt="Example Plots Demo output with title, author, date published and main section on Parametric plots which contains text, a toggleable code field, and the output of the plot, with the caption Figure 1 Parametric Plots."}
197208
:::
198209
:::
199210

200211
</div>
201212

202213
<div class="tab-pane fade" id="observable" role="tabpanel" aria-labelledby="observable-tab">
203-
214+
::: {.grid}
215+
::: {.g-col-md-11 .g-col-12}
204216
Quarto includes native support for Observable JS, a set of JavaScript enhancements created by Mike Bostock (the author of D3). Observable JS uses a reactive execution model, and is especially well suited for interactive data exploration and analysis.
205217

206-
207-
208-
::: {.grid}
209-
::: {.g-col-lg-6 .g-col-12}
218+
:::
219+
::: {.g-col-md-6 .g-col-12}
210220
````markdown
211221
---
212222
title: "observable plot"
@@ -240,11 +250,10 @@ Plot.plot({
240250
:::
241251

242252

243-
::: {.g-col-lg-6 .g-col-12}
244-
![](images/hello-observable.png){style="background-color: white; border: 1px solid #dee2e6; height: 625px;" fig-alt="Example output with title, author, and date. Below, the main section reads Seattle Precipitation by Day (2012 to 2016) with a toggleable section to show code and a heatmap of the precipitation by day."}
253+
::: {.g-col-md-6 .g-col-12}
254+
![](images/hello-observable.png){style="" fig-alt="Example output with title, author, and date. Below, the main section reads Seattle Precipitation by Day (2012 to 2016) with a toggleable section to show code and a heatmap of the precipitation by day."}
245255
:::
246256

247-
248257
:::
249258

250259
</div>
@@ -261,7 +270,7 @@ Plot.plot({
261270
:::
262271

263272

264-
::: {.content-block}
273+
::: {.content-block .py-4}
265274
::: {.features}
266275

267276
::: {.feature}
@@ -323,9 +332,10 @@ Publish collections of documents as a blog or full website. Create books and man
323332

324333

325334
::: {.get-started .alt-background}
326-
::: {.content-block}
327-
328-
[Get Started](/docs/get-started/index.qmd){.btn-action-primary .btn-action .btn .btn-success .btn-lg role="button" style="margin-top: 1em;"}
335+
::: {.content-block .py-5 .grid}
336+
::: {.g-start-4 .g-col-6 .g-start-md-5 .g-col-md-3 .pt-1}
337+
[Get Started](/docs/get-started/index.qmd){.btn-action-primary .btn-action .btn .btn-lg .w-100 role="button"}
329338

330339
:::
331340
:::
341+
:::

quarto-dark.png

26.1 KB
Loading

styles.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -233,10 +233,11 @@ iframe.reveal-demo {
233233

234234
.btn-action-primary {
235235
color: white;
236-
background-color: #447099 !important;
236+
background-color: #447099;
237237
}
238238

239239
.btn-action-primary:hover {
240+
background-color: #305775;
240241
color: white;
241242
}
242243

0 commit comments

Comments
 (0)