diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/cgit.css | 76 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| -rw-r--r-- | assets/cgit.js | 98 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
2 files changed, 13 insertions, 161 deletions
diff --git a/assets/cgit.css b/assets/cgit.css index 225af98..66d9bb8 100644 --- a/assets/cgit.css +++ b/assets/cgit.css @@ -2,9 +2,8 @@ * cgit.css: styling for the cgit web interface * * Colours are driven by CSS custom properties via light-dark(), so the - * whole theme follows the reader's system preference and can be flipped - * with the header toggle (which sets data-theme on <html>). All rules - * stay scoped under div#cgit so cgit can be embedded in another page. + * whole theme follows the reader's system preference. All rules stay + * scoped under div#cgit so cgit can be embedded in another page. */ div#cgit { @@ -82,7 +81,7 @@ div#cgit { /* Shared horizontal inset so every region lines up down the page. */ --gutter: 1.25rem; - /* Shared height so the toggle, dropdowns and fields all agree. */ + /* Shared height so the dropdowns and fields all agree. */ --control-h: 2em; --radius: 5px; @@ -101,15 +100,6 @@ div#cgit { background: var(--bg); } -/* Set on <html> by the script before the body parses. */ -html[data-theme="light"] div#cgit { - color-scheme: light; -} - -html[data-theme="dark"] div#cgit { - color-scheme: dark; -} - /* Scoped so an embedding host page is left alone. */ html.cgit-standalone { color-scheme: light dark; @@ -198,10 +188,10 @@ div#cgit button:focus-visible { div#cgit #header { display: grid; - grid-template-columns: auto 1fr auto auto; + grid-template-columns: auto 1fr auto; grid-template-areas: - "logo heading switch theme" - "logo desc owner owner"; + "logo heading switch" + "logo desc owner"; align-items: center; column-gap: 10px; width: 100%; @@ -209,49 +199,6 @@ div#cgit #header { margin-bottom: 0; } -div#cgit #header .theme-toggle { - grid-area: theme; - justify-self: end; - align-self: center; - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--control-h); - height: var(--control-h); - padding: 0; - color: var(--muted); - background-color: var(--surface); - border: solid 1px var(--border); - border-radius: var(--radius); - cursor: pointer; - line-height: 1; -} - -/* The display rule above would defeat the hidden attribute. */ -div#cgit #header .theme-toggle[hidden] { - display: none; -} - -div#cgit #header .theme-toggle:hover { - color: var(--fg); - border-color: var(--border-mid); -} - -div#cgit #header .theme-toggle svg { - width: 1.1em; - height: 1.1em; - fill: none; - stroke: currentColor; - stroke-width: 2; - stroke-linecap: round; - stroke-linejoin: round; -} - -/* Reserved up front so the reveal does not shift the header. */ -html.cgit-js div#cgit #header { - grid-template-columns: auto 1fr auto var(--control-h); -} - /* Reserved so the header holds still while the image loads. */ div#cgit #header .logo { grid-area: logo; @@ -1450,10 +1397,10 @@ div#cgit table.ssdiff td.space { } div#cgit #header { - grid-template-columns: auto 1fr auto; + grid-template-columns: auto 1fr; grid-template-areas: - "logo heading theme" - "desc desc desc"; + "logo heading" + "desc desc"; row-gap: 6px; } @@ -1461,11 +1408,6 @@ div#cgit table.ssdiff td.space { display: none; } - /* Outranks the base reservation, whose fourth column would sit here empty. */ - html.cgit-js div#cgit #header { - grid-template-columns: auto 1fr var(--control-h); - } - div#cgit #header::before { grid-column: 1 / -1; } diff --git a/assets/cgit.js b/assets/cgit.js index 34927d0..636ad33 100644 --- a/assets/cgit.js +++ b/assets/cgit.js @@ -2,11 +2,11 @@ * The client side script that cgit serves with every page. Its main job is * to refresh the relative ages that cgit_print_age renders in * source/ui-shared.c, so the thresholds, suffixes and class names tabulated - * below mirror the constants there and the two have to move together. Three + * below mirror the constants there and the two have to move together. Two * smaller pieces follow, the selects that reload the page when they change, - * the highlight laid over the source line a URL fragment names, and the - * colour theme toggle. Each piece is wrapped in a function of its own so - * that nothing is left behind in the global scope. + * and the highlight laid over the source line a URL fragment names. Each + * piece is wrapped in a function of its own so that nothing is left behind + * in the global scope. */ (function () { @@ -167,93 +167,3 @@ document.addEventListener("DOMContentLoaded", place_bar, false); window.addEventListener("hashchange", place_bar, false); })(); - -/* - * The colour theme toggle, which cycles from auto through light to dark and - * remembers the choice. Auto sets no override at all, leaving the page to - * follow the system preference the way the stylesheet does on its own. - */ - -(function () { - -var STORAGE_KEY = "cgit-theme"; -var ORDER = [ "auto", "light", "dark" ]; -var ICONS = { - auto: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/></svg>', - light: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 1v3M12 20v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M1 12h3M20 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg>', - dark: '<svg viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z"/></svg>' -}; - -/* - * Local storage throws instead of answering when the browser has storage - * switched off for the site, and a colour preference is not worth breaking - * the page over, so both of these swallow the failure and the reader is left - * on the automatic theme. - */ -function saved() { - try { - return localStorage.getItem(STORAGE_KEY); - } catch (e) { - return null; - } -} - -function persist(theme) { - try { - localStorage.setItem(STORAGE_KEY, theme); - } catch (e) { } -} - -function apply(theme, button) { - var html = document.documentElement; - - if (theme === "auto") - html.removeAttribute("data-theme"); - else - html.setAttribute("data-theme", theme); - - // The browser paints the page canvas and the scrollbars from - // color-scheme rather than from the stylesheet, so it has to be told - // the choice as well. - html.style.colorScheme = (theme === "auto") ? "" : theme; - - if (button) { - button.innerHTML = ICONS[theme]; - button.title = "Colour theme: " + theme; - } -} - -var theme = saved(); -if (ORDER.indexOf(theme) < 0) - theme = "auto"; - -// This runs while the file is being parsed rather than on DOMContentLoaded. -// The script is fetched from the head and so runs before the body exists, -// which lands the choice ahead of the first paint and stops the page showing -// the other theme for a moment. The marker goes on the same element for the -// same reason, since div#cgit has not been parsed yet, and cgit-js reserves -// the toggle's column so that revealing the button below does not shift the -// header sideways. -apply(theme, null); -document.documentElement.classList.add("cgit-js"); - -document.addEventListener("DOMContentLoaded", function () { - var root = document.getElementById("cgit"); - if (!root) - return; - var button = root.querySelector(".theme-toggle"); - if (!button) - return; - - apply(theme, button); - // The button is served hidden so that a reader without scripting is - // never shown a control that cannot do anything. - button.hidden = false; - button.addEventListener("click", function () { - theme = ORDER[(ORDER.indexOf(theme) + 1) % ORDER.length]; - persist(theme); - apply(theme, button); - }); -}, false); - -})(); |