Skip to content

Commit 0181f34

Browse files
mudgemudge
authored
Merge pull request #4059 from raspberrypi/design-tweaks
Only respect system colour schemes and add spacing to header
2 parents ecd49eb + 4853d9e commit 0181f34

File tree

5 files changed

+47
-146
lines changed

5 files changed

+47
-146
lines changed

‎jekyll-assets/_includes/theme.html

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎jekyll-assets/_layouts/boxes.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,12 @@
44
{% include head.html %}
55
</head>
66
<body onload="makeToc()">
7-
<script type="text/javascript">initTheme()</script>
87
{% include header.html %}
98

109
<div class="toptitle">
1110
<h1><a href="/documentation/"><b>Raspberry Pi</b> Documentation</a></h1>
12-
<div id="search-theme-toggle-container">
11+
<div id="search-container">
1312
<div id="docsearch"></div>
14-
{% include theme.html %}
1513
</div>
1614
{% include tabs.html %}
1715
</div>

‎jekyll-assets/_layouts/docs.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
{% include head.html %}
55
</head>
66
<body onload="makeToc()">
7-
<script type="text/javascript">initTheme()</script>
87
<input type="checkbox" id="mobile-toggle" />
98
{% include header.html %}
109
<div id="docs-content">
@@ -20,7 +19,6 @@ <h1 id="docs-header-title">
2019
<label class="mobile-menu-toggle" for="mobile-toggle">
2120
<div class="mobile-menu-toggle-inner"></div>
2221
</label>
23-
{% include theme.html %}
2422
</div>
2523
<div id="docsearch">
2624
</div>

‎jekyll-assets/css/style.css

Lines changed: 46 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,4 @@
11
:root {
2-
--bg: #000000;
3-
--near-bg: #111;
4-
--top-title-colour: #343434;
5-
--red-tint: #d75a64;
6-
--brand-colour: #cd2355;
7-
--code-bg-colour: #121212;
8-
--code-bg-colour-transparent: rgba(18, 18, 18, 0.9);
9-
--tab-bg-colour: #252535;
10-
--toc-hover-colour: #353545;
11-
--subtle: #707070;
12-
--less-subtle: #333;
13-
--home: #cd2355;
14-
--rp2040-context-tag: #50C878;
15-
--accent: #d75a64;
16-
--docsearch-primary-color: var(--accent);
17-
--docsearch-logo-color: var(--red-tint);
18-
--copy-button-bg: #707070;
19-
--copy-button-text: #CCC;
20-
--textcolor: white;
21-
--subtle-text: #CCC;
22-
--theme-toggle-label: url("data:image/svg+xml;utf8,<svg width=\'30px\' height=\'30px\' viewBox=\'0 0 16 16\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M7 3V0H9V3H7Z\' fill=\'%23FFF\'/><path d=\'M9 13V16H7V13H9Z\' fill=\'%23FFF\'/><path d=\'M11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8Z\' fill=\'%23FFF\'/><path d=\'M0 9H3V7H0V9Z\' fill=\'%23FFF\'/><path d=\'M16 7H13V9H16V7Z\' fill=\'%23FFF\'/><path d=\'M3.75735 5.17157L1.63603 3.05025L3.05025 1.63603L5.17157 3.75735L3.75735 5.17157Z\' fill=\'%23FFF\'/><path d=\'M12.2426 10.8284L14.364 12.9497L12.9497 14.364L10.8284 12.2426L12.2426 10.8284Z\' fill=\'%23FFF\'/><path d=\'M3.05025 14.364L5.17157 12.2426L3.75735 10.8284L1.63603 12.9498L3.05025 14.364Z\' fill=\'%23FFF\'/><path d=\'M12.9497 1.63604L10.8284 3.75736L12.2426 5.17158L14.364 3.05026L12.9497 1.63604Z\' fill=\'%23FFF\'/></svg>");
23-
--mobile-menu-label: url("data:image/svg+xml,%3Csvg width='30px' height='40px' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='%23FFF' d='M20 5V2H0v3h20zm0 6V8H0v3h20zm0 6v-3H0v3h20z'/%3E%3C/g%3E%3C/svg%3E");
24-
25-
/* header and footer styling */
26-
--rptl-header-background-color: var(--bg);
27-
--rptl-header-border-bottom-color: var(--code-bg-colour);
28-
--rptl-header-text-color: var(--textcolor);
29-
--rptl-header-burger-stroke-color: var(--textcolor);
30-
--rptl-header-subnav-background-color: var(--near-bg);
31-
--rptl-header-logo-text-fill: var(--textcolor);
32-
--rptl-header-logo-leaf-fill: var(--bg);
33-
--rptl-header-logo-berry-fill: var(--bg);
34-
--rptl-cookiebanner-background-color: var(--code-bg-colour);
35-
--rptl-cookiebanner-text-color: var(--textcolor);
36-
--rptl-footer-background-color: #13131B;
37-
--rptl-footer-text-color: var(--subtle-text);
38-
39-
color: var(--textcolor);
40-
}
41-
.light {
422
--bg: #fff;
433
--near-bg: #f6f6f6;
444
--red-tint: #d75a64;
@@ -59,7 +19,6 @@
5919
--copy-button-text: #444;
6020
--textcolor: black;
6121
--subtle-text: #444;
62-
--theme-toggle-label: url("data:image/svg+xml;utf8,<svg width=\'30px\' height=\'30px\' viewBox=\'0 0 24 24\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z\' stroke=\'%23000\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/></svg>");
6322
--mobile-menu-label: url("data:image/svg+xml,%3Csvg width='30px' height='40px' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='var(--textcolor)' d='M20 5V2H0v3h20zm0 6V8H0v3h20zm0 6v-3H0v3h20z'/%3E%3C/g%3E%3C/svg%3E");
6423

6524
/* header and footer styling */
@@ -77,7 +36,48 @@
7736
--rptl-footer-text-color: var(--less-subtle);
7837

7938
color: var(--textcolor);
39+
}
8040

41+
@media (prefers-color-scheme: dark) {
42+
:root {
43+
--bg: #000000;
44+
--near-bg: #111;
45+
--top-title-colour: #343434;
46+
--red-tint: #d75a64;
47+
--brand-colour: #cd2355;
48+
--code-bg-colour: #121212;
49+
--code-bg-colour-transparent: rgba(18, 18, 18, 0.9);
50+
--tab-bg-colour: #252535;
51+
--toc-hover-colour: #353545;
52+
--subtle: #707070;
53+
--less-subtle: #333;
54+
--home: #cd2355;
55+
--rp2040-context-tag: #50C878;
56+
--accent: #d75a64;
57+
--docsearch-primary-color: var(--accent);
58+
--docsearch-logo-color: var(--red-tint);
59+
--copy-button-bg: #707070;
60+
--copy-button-text: #CCC;
61+
--textcolor: white;
62+
--subtle-text: #CCC;
63+
--mobile-menu-label: url("data:image/svg+xml,%3Csvg width='30px' height='40px' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='%23FFF' d='M20 5V2H0v3h20zm0 6V8H0v3h20zm0 6v-3H0v3h20z'/%3E%3C/g%3E%3C/svg%3E");
64+
65+
/* header and footer styling */
66+
--rptl-header-background-color: var(--bg);
67+
--rptl-header-border-bottom-color: var(--code-bg-colour);
68+
--rptl-header-text-color: var(--textcolor);
69+
--rptl-header-burger-stroke-color: var(--textcolor);
70+
--rptl-header-subnav-background-color: var(--near-bg);
71+
--rptl-header-logo-text-fill: var(--textcolor);
72+
--rptl-header-logo-leaf-fill: var(--bg);
73+
--rptl-header-logo-berry-fill: var(--bg);
74+
--rptl-cookiebanner-background-color: var(--code-bg-colour);
75+
--rptl-cookiebanner-text-color: var(--textcolor);
76+
--rptl-footer-background-color: #13131B;
77+
--rptl-footer-text-color: var(--subtle-text);
78+
79+
color: var(--textcolor);
80+
}
8181
}
8282

8383
body {
@@ -134,13 +134,12 @@ code {
134134

135135
.toptitle h1 {
136136
font-size: 2.5em;
137-
font-weight: lighter;
138-
letter-spacing: 1px;
137+
font-weight: 300;
139138
color: var(--bg);
140139
position: relative;
141140
margin-top: 0px;
142141
text-align: center;
143-
padding-top: 10px;
142+
padding-top: 40px;
144143
margin-left: 10px;
145144
flex-grow: 1;
146145
}
@@ -213,17 +212,12 @@ div.subtitle p {
213212
justify-content: center;
214213
}
215214

216-
/* boxes page, constrain search bar/theme toggle line to a reasonable size */
217-
body > .toptitle > #search-theme-toggle-container {
215+
#search-container {
218216
width: 50%;
219-
margin: auto;
217+
margin: 20px auto 0;
220218
max-width: 900px;
221219
}
222220

223-
body > .toptitle > #search-theme-toggle-container > #theme-toggle-container {
224-
flex-grow: 0;
225-
}
226-
227221
#docs-container {
228222
position: relative;
229223
flex-grow: 1;
@@ -285,53 +279,10 @@ pre {
285279
align-content: center;
286280
}
287281

288-
#theme-toggle {
289-
border-radius: 3px;
290-
padding: 5px;
291-
}
292-
293-
#theme-toggle:hover {
294-
background-color: var(--toc-hover-colour);
295-
text-decoration: none;
296-
}
297-
298-
#search-theme-toggle-container {
299-
display: flex;
300-
flex-direction: row;
301-
gap: 20px;
302-
align-items: center;
303-
justify-content: center;
304-
}
305-
306-
#theme-toggle-container {
307-
align-self: center;
308-
align-items: start;
309-
display: block;
310-
}
311-
312282
#docsearch {
313283
flex-grow: 1;
314284
}
315285

316-
#search-theme-toggle-container #theme-toggle-container::after {
317-
height: 100%;
318-
}
319-
320-
#theme-toggle-header {
321-
font-family: monospace;
322-
}
323-
324-
#theme-toggle-header {
325-
content: var(--theme-toggle-label);
326-
}
327-
328-
#theme-toggle span {
329-
display: none;
330-
}
331-
#theme-toggle {
332-
content: var(--theme-toggle-label);
333-
}
334-
335286
.toc-toggle-container {
336287
display: flex;
337288
align-items: center;
@@ -1503,12 +1454,6 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
15031454
padding-right: 5px;
15041455
}
15051456

1506-
#theme-toggle-container {
1507-
display: block;
1508-
padding-left: 5px;
1509-
padding-right: 5px;
1510-
}
1511-
15121457
.toc {
15131458
height: auto;
15141459
}
@@ -1719,6 +1664,7 @@ div#tab-menu {
17191664
width: 100%;
17201665
height: 80px;
17211666
margin-bottom: -28px;
1667+
margin-top: 20px;
17221668
}
17231669

17241670
ul#tab-container {

‎jekyll-assets/scripts/theme.js

Lines changed: 0 additions & 38 deletions
This file was deleted.

0 commit comments

Comments
 (0)