Skip to content

Only respect system colour schemes and add spacing to header #4059

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 31, 2025
Merged

Only respect system colour schemes and add spacing to header #4059

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38689e5
Only respect system colour scheme preferences
mudge Mar 27, 2025
4853d9e
Add spacing around top-level header
mudge Mar 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions jekyll-assets/_includes/theme.html
View file
Open in desktop

This file was deleted.

4 changes: 1 addition & 3 deletions jekyll-assets/_layouts/boxes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,12 @@
{% include head.html %}
</head>
<body onload="makeToc()">
<script type="text/javascript">initTheme()</script>
{% include header.html %}

<div class="toptitle">
<h1><a href="/documentation/"><b>Raspberry Pi</b> Documentation</a></h1>
<div id="search-theme-toggle-container">
<div id="search-container">
<div id="docsearch"></div>
{% include theme.html %}
</div>
{% include tabs.html %}
</div>
Expand Down
2 changes: 0 additions & 2 deletions jekyll-assets/_layouts/docs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
{% include head.html %}
</head>
<body onload="makeToc()">
<script type="text/javascript">initTheme()</script>
<input type="checkbox" id="mobile-toggle" />
{% include header.html %}
<div id="docs-content">
Expand All @@ -20,7 +19,6 @@ <h1 id="docs-header-title">
<label class="mobile-menu-toggle" for="mobile-toggle">
<div class="mobile-menu-toggle-inner"></div>
</label>
{% include theme.html %}
</div>
<div id="docsearch">
</div>
Expand Down
146 changes: 46 additions & 100 deletions jekyll-assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,4 @@
:root {
--bg: #000000;
--near-bg: #111;
--top-title-colour: #343434;
--red-tint: #d75a64;
--brand-colour: #cd2355;
--code-bg-colour: #121212;
--code-bg-colour-transparent: rgba(18, 18, 18, 0.9);
--tab-bg-colour: #252535;
--toc-hover-colour: #353545;
--subtle: #707070;
--less-subtle: #333;
--home: #cd2355;
--rp2040-context-tag: #50C878;
--accent: #d75a64;
--docsearch-primary-color: var(--accent);
--docsearch-logo-color: var(--red-tint);
--copy-button-bg: #707070;
--copy-button-text: #CCC;
--textcolor: white;
--subtle-text: #CCC;
--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>");
--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");

/* header and footer styling */
--rptl-header-background-color: var(--bg);
--rptl-header-border-bottom-color: var(--code-bg-colour);
--rptl-header-text-color: var(--textcolor);
--rptl-header-burger-stroke-color: var(--textcolor);
--rptl-header-subnav-background-color: var(--near-bg);
--rptl-header-logo-text-fill: var(--textcolor);
--rptl-header-logo-leaf-fill: var(--bg);
--rptl-header-logo-berry-fill: var(--bg);
--rptl-cookiebanner-background-color: var(--code-bg-colour);
--rptl-cookiebanner-text-color: var(--textcolor);
--rptl-footer-background-color: #13131B;
--rptl-footer-text-color: var(--subtle-text);

color: var(--textcolor);
}
.light {
--bg: #fff;
--near-bg: #f6f6f6;
--red-tint: #d75a64;
Expand All @@ -59,7 +19,6 @@
--copy-button-text: #444;
--textcolor: black;
--subtle-text: #444;
--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>");
--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");

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

color: var(--textcolor);
}

@media (prefers-color-scheme: dark) {
:root {
--bg: #000000;
--near-bg: #111;
--top-title-colour: #343434;
--red-tint: #d75a64;
--brand-colour: #cd2355;
--code-bg-colour: #121212;
--code-bg-colour-transparent: rgba(18, 18, 18, 0.9);
--tab-bg-colour: #252535;
--toc-hover-colour: #353545;
--subtle: #707070;
--less-subtle: #333;
--home: #cd2355;
--rp2040-context-tag: #50C878;
--accent: #d75a64;
--docsearch-primary-color: var(--accent);
--docsearch-logo-color: var(--red-tint);
--copy-button-bg: #707070;
--copy-button-text: #CCC;
--textcolor: white;
--subtle-text: #CCC;
--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");

/* header and footer styling */
--rptl-header-background-color: var(--bg);
--rptl-header-border-bottom-color: var(--code-bg-colour);
--rptl-header-text-color: var(--textcolor);
--rptl-header-burger-stroke-color: var(--textcolor);
--rptl-header-subnav-background-color: var(--near-bg);
--rptl-header-logo-text-fill: var(--textcolor);
--rptl-header-logo-leaf-fill: var(--bg);
--rptl-header-logo-berry-fill: var(--bg);
--rptl-cookiebanner-background-color: var(--code-bg-colour);
--rptl-cookiebanner-text-color: var(--textcolor);
--rptl-footer-background-color: #13131B;
--rptl-footer-text-color: var(--subtle-text);

color: var(--textcolor);
}
}

body {
Expand Down Expand Up @@ -134,13 +134,12 @@ code {

.toptitle h1 {
font-size: 2.5em;
font-weight: lighter;
letter-spacing: 1px;
font-weight: 300;
color: var(--bg);
position: relative;
margin-top: 0px;
text-align: center;
padding-top: 10px;
padding-top: 40px;
margin-left: 10px;
flex-grow: 1;
}
Expand Down Expand Up @@ -213,17 +212,12 @@ div.subtitle p {
justify-content: center;
}

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

body > .toptitle > #search-theme-toggle-container > #theme-toggle-container {
flex-grow: 0;
}

#docs-container {
position: relative;
flex-grow: 1;
Expand Down Expand Up @@ -285,53 +279,10 @@ pre {
align-content: center;
}

#theme-toggle {
border-radius: 3px;
padding: 5px;
}

#theme-toggle:hover {
background-color: var(--toc-hover-colour);
text-decoration: none;
}

#search-theme-toggle-container {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
}

#theme-toggle-container {
align-self: center;
align-items: start;
display: block;
}

#docsearch {
flex-grow: 1;
}

#search-theme-toggle-container #theme-toggle-container::after {
height: 100%;
}

#theme-toggle-header {
font-family: monospace;
}

#theme-toggle-header {
content: var(--theme-toggle-label);
}

#theme-toggle span {
display: none;
}
#theme-toggle {
content: var(--theme-toggle-label);
}

.toc-toggle-container {
display: flex;
align-items: center;
Expand Down Expand Up @@ -1503,12 +1454,6 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
padding-right: 5px;
}

#theme-toggle-container {
display: block;
padding-left: 5px;
padding-right: 5px;
}

.toc {
height: auto;
}
Expand Down Expand Up @@ -1719,6 +1664,7 @@ div#tab-menu {
width: 100%;
height: 80px;
margin-bottom: -28px;
margin-top: 20px;
}

ul#tab-container {
Expand Down
38 changes: 0 additions & 38 deletions jekyll-assets/scripts/theme.js
View file
Open in desktop

This file was deleted.

Loading