diff --git a/jekyll-assets/_includes/theme.html b/jekyll-assets/_includes/theme.html deleted file mode 100644 index 7f5f4add2..000000000 --- a/jekyll-assets/_includes/theme.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
\ No newline at end of file diff --git a/jekyll-assets/_layouts/boxes.html b/jekyll-assets/_layouts/boxes.html index e82849b15..1dbdc9d81 100644 --- a/jekyll-assets/_layouts/boxes.html +++ b/jekyll-assets/_layouts/boxes.html @@ -4,14 +4,12 @@ {% include head.html %} - {% include header.html %}

Raspberry Pi Documentation

-
+
- {% include theme.html %}
{% include tabs.html %}
diff --git a/jekyll-assets/_layouts/docs.html b/jekyll-assets/_layouts/docs.html index 64d3237b0..7ea9e79af 100644 --- a/jekyll-assets/_layouts/docs.html +++ b/jekyll-assets/_layouts/docs.html @@ -4,7 +4,6 @@ {% include head.html %} - {% include header.html %}
@@ -20,7 +19,6 @@

- {% include theme.html %}

diff --git a/jekyll-assets/css/style.css b/jekyll-assets/css/style.css index 96c618977..ee355de6e 100644 --- a/jekyll-assets/css/style.css +++ b/jekyll-assets/css/style.css @@ -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,"); - --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; @@ -59,7 +19,6 @@ --copy-button-text: #444; --textcolor: black; --subtle-text: #444; - --theme-toggle-label: url("data:image/svg+xml;utf8,"); --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 */ @@ -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 { @@ -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; } @@ -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; @@ -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; @@ -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; } @@ -1719,6 +1664,7 @@ div#tab-menu { width: 100%; height: 80px; margin-bottom: -28px; + margin-top: 20px; } ul#tab-container { diff --git a/jekyll-assets/scripts/theme.js b/jekyll-assets/scripts/theme.js deleted file mode 100644 index 42f110893..000000000 --- a/jekyll-assets/scripts/theme.js +++ /dev/null @@ -1,38 +0,0 @@ -// toggles the site theme between dark and light -function toggleTheme() { - var cookiePermission = document.cookie.indexOf("cookiebanner_accepted=1"); - - // fetch the theme from local storage (if it exists) - var theme = localStorage.getItem('theme'); - // if the theme has never been set, or is light, set the theme to the dark symbol in local storage to change it - if (localStorage.getItem('theme') !== null && theme == '🌝' ) { - if (cookiePermission != -1) { - localStorage.setItem('theme', '🌚'); - } - } else { - if (cookiePermission != -1) { - // otherwise, the theme is currently set to dark, so set the theme to the light symbol in local storage to change it - localStorage.setItem('theme', '🌝'); - } - } - // finally, toggle the light option off or on the body to change the display of the theme - document.body.classList.toggle('light'); -} - -// initialises the site theme display -// of key interest here: from the user's perspective, the site defaults to the light theme... -// ...unless your browser uses prefers-color-scheme to ask for a dark theme -// from the site's perspective, we default to a dark theme, but toggle it to a light theme on load if the user doesn't ask for dark. -// why do this? To prevent an annoying light 'flash' for dark theme users. light theme users don't really notice or care if there's a dark anti-flash. -function initTheme() { - // fetch the theme from local storage (if it exists) - var theme = localStorage.getItem('theme'); - // if the theme has been set to light (null check to short circuit if not set) - if(theme !== null && theme === '🌝' - // if we can use matchMedia and the browser supports the dark color scheme - || (window.matchMedia && !window.matchMedia('(prefers-color-scheme: dark)').matches) - && theme !== '🌚') { - // toggles the theme from the default dark mode to the light version (which actually _shows_ by default to many users) - document.body.classList.toggle('light'); - } -} \ No newline at end of file