From 5b971342e49bbb073a56bd191cd3ba83be4aa67f Mon Sep 17 00:00:00 2001 From: ator-dev Date: Sat, 30 Nov 2024 20:54:08 +0000 Subject: [PATCH] Add "settings-1" experimental pages - Add "settings-1" experiment, with 2 pages (including their own styles and scripts) - Set input values to ones which might be seen in MMS's settings - Add MMS's other icons (currently unoptimised) --- experiments/settings-1/a/index.html | 352 +++++++++++++ .../a/style/experiment-specific.css | 19 + experiments/settings-1/a/style/main.css | 79 +++ experiments/settings-1/b/experiment.js | 1 + experiments/settings-1/b/index.html | 220 ++++++++ experiments/settings-1/b/script.js | 53 ++ .../b/style/experiment-specific.css | 6 + experiments/settings-1/b/style/extra.css | 97 ++++ experiments/settings-1/b/style/main.css | 486 ++++++++++++++++++ .../settings-1/b/style/variant/docs.css | 20 + .../settings-1/b/style/variant/settings.css | 11 + icons/arrow.svg | 69 +++ icons/close.svg | 74 +++ icons/create.svg | 74 +++ icons/delete.svg | 88 ++++ icons/edit.svg | 88 ++++ icons/mms-off.svg | 83 +++ icons/pin.svg | 70 +++ icons/refresh.svg | 73 +++ icons/reveal.svg | 82 +++ icons/search.svg | 91 ++++ icons/show.svg | 76 +++ 22 files changed, 2212 insertions(+) create mode 100644 experiments/settings-1/a/index.html create mode 100644 experiments/settings-1/a/style/experiment-specific.css create mode 100644 experiments/settings-1/a/style/main.css create mode 100644 experiments/settings-1/b/experiment.js create mode 100644 experiments/settings-1/b/index.html create mode 100644 experiments/settings-1/b/script.js create mode 100644 experiments/settings-1/b/style/experiment-specific.css create mode 100644 experiments/settings-1/b/style/extra.css create mode 100644 experiments/settings-1/b/style/main.css create mode 100644 experiments/settings-1/b/style/variant/docs.css create mode 100644 experiments/settings-1/b/style/variant/settings.css create mode 100644 icons/arrow.svg create mode 100644 icons/close.svg create mode 100644 icons/create.svg create mode 100644 icons/delete.svg create mode 100644 icons/edit.svg create mode 100644 icons/mms-off.svg create mode 100644 icons/pin.svg create mode 100644 icons/refresh.svg create mode 100644 icons/reveal.svg create mode 100644 icons/search.svg create mode 100644 icons/show.svg diff --git a/experiments/settings-1/a/index.html b/experiments/settings-1/a/index.html new file mode 100644 index 0000000..4140c4c --- /dev/null +++ b/experiments/settings-1/a/index.html @@ -0,0 +1,352 @@ + + + + + + + Settings (Mark My Search) + + + + + +
+
+
+
+
Controls to show in the toolbar
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
Toolbar style and icons
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
Keyword highlighting method and style
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
Visibility when highlighting search engine keywords
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
When to collapse the toolbar immediately
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
Options for highlighting search engine keywords
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
Matching options for new terms
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+
+ + diff --git a/experiments/settings-1/a/style/experiment-specific.css b/experiments/settings-1/a/style/experiment-specific.css new file mode 100644 index 0000000..9ee5ade --- /dev/null +++ b/experiments/settings-1/a/style/experiment-specific.css @@ -0,0 +1,19 @@ +:root { + font-family: sans-serif; +} + +body { + display: flex; +} + +.flex-space { + flex: 1; +} + +body > form { + width: 40em; +} + +#save, .preference-row :disabled { + display: none; +} diff --git a/experiments/settings-1/a/style/main.css b/experiments/settings-1/a/style/main.css new file mode 100644 index 0000000..fae6056 --- /dev/null +++ b/experiments/settings-1/a/style/main.css @@ -0,0 +1,79 @@ +body { + padding-inline: 6px; + padding-block: 2px; + margin: 0; + background: #bbb; + user-select: none; +} + +.erroneous { + color: #e11; +} + +.modified { + font-weight: bold; +} + +.tab-button { + border-radius: 0; + display: none; +} + +.container-tab { + display: flex; + flex-flow: column; +} + +.option-section { + padding: 6px; + margin-block: 4px; + border-radius: 6px; + background-color: #eee; + box-shadow: 2px 2px 4px hsla(0, 0%, 0%, 0.4); +} + +.option-label { + color: hsl(0 0% 6%); + margin-bottom: 4px; +} + +.table-preferences { + display: flex; + flex-flow: column; + width: 100%; +} + +.table-preferences .preference-cell { + flex: 1; + display: flex; + align-items: center; +} + +.table-preferences .preference-cell > ::after { + content: ":" +} + +.table-preferences .preference-cell > * { + flex: 1; +} + +.table-preferences input[type=text] { + width: 110px; +} + +.preference-row { + display: flex; + color: hsl(0 0% 21%); +} + +.preference-row:nth-child(odd) { + background-color: hsl(0 0% 87%); +} + +label { + color: hsl(0 0% 28%); +} + +label[for]:hover { + color: hsl(0 0% 18%); +} diff --git a/experiments/settings-1/b/experiment.js b/experiments/settings-1/b/experiment.js new file mode 100644 index 0000000..d052ef9 --- /dev/null +++ b/experiments/settings-1/b/experiment.js @@ -0,0 +1 @@ +document.getElementById("theme-light").click(); diff --git a/experiments/settings-1/b/index.html b/experiments/settings-1/b/index.html new file mode 100644 index 0000000..4211198 --- /dev/null +++ b/experiments/settings-1/b/index.html @@ -0,0 +1,220 @@ + + + + + + + Settings (Mark My Search) + + + + + + + +
+
+ +
+
+
+

+ Summoning +

+
+ + +
+

Web search demo

+
+
+

+ Toolbar +

+
+
+

+ Controls +

+

+ What controls should appear in the toolbar? +

+
+
+ + + + + + + + + + +
+

Toolbar w/ current controls

+
+
+
+

+ Keyword controls +

+

+ What controls should appear next to a keyword in the toolbar? +

+
+
+ + + + +
+

Keyword w/ current controls

+
+
+
+

+ Style +

+

+ How should the toolbar look? +

+
+
+ + + + + + + + +
+

Toolbar w/ current controls

+
+
+
+

+ Highlighting +

+
+
+

+ Style +

+

+ How should the highlighting look? +

+
+
+ + +
+

Toolbar w/ keywords w/ highlight colours

+
+
+
+

+ Algorithm (advanced) +

+

+ How should highlighting be computed? +

+
+
+ + +
+
+
+
+
+
+ + + + diff --git a/experiments/settings-1/b/script.js b/experiments/settings-1/b/script.js new file mode 100644 index 0000000..1957919 --- /dev/null +++ b/experiments/settings-1/b/script.js @@ -0,0 +1,53 @@ +"use strict"; + +if (new URL(location.href).searchParams.get("frame") !== null) { + document.body.classList.add("frame"); +} + +document.addEventListener("DOMContentLoaded", () => { + const theme = localStorage.getItem("theme"); + if (theme !== null) { + const checkbox = document.getElementById("theme-" + theme); + if (checkbox) { + checkbox.checked = true; + } else { + console.warn("The stored theme '" + theme + "' is not available on this page. Selecting automatic theme."); + } + } + for (const checkbox of document.querySelectorAll("input[name='theme']")) { + checkbox.addEventListener("change", () => { + if (checkbox.checked) { + if (checkbox.id === "theme") { + localStorage.removeItem("theme"); + } else { + localStorage.setItem("theme", checkbox.id.slice(checkbox.id.indexOf("-") + 1)); + } + } + }); + } +}); + +const activateCurrentTab = (currentUrl) => { + const id = currentUrl.hash.slice(1); + for (const activeTab of document.querySelectorAll(".tab-list .active")) { + activeTab.classList.remove("active"); + } + if (id.length === 0) { + return; + } + const heading = document.getElementById(id)?.closest(".section")?.querySelector("h2"); + if (!heading) { + return; + } + const tab = document.querySelector(`.tab-list a[href="#${heading.id}"]`); + if (!tab) { + return; + } + tab.classList.add("active"); +}; + +addEventListener("hashchange", () => { + activateCurrentTab(location); +}); + +activateCurrentTab(location); diff --git a/experiments/settings-1/b/style/experiment-specific.css b/experiments/settings-1/b/style/experiment-specific.css new file mode 100644 index 0000000..d3c4d0c --- /dev/null +++ b/experiments/settings-1/b/style/experiment-specific.css @@ -0,0 +1,6 @@ +#header .controls, +.image-placeholder, +.sidebar-filled .tab-list li a[href="#section--website-exclusions"], +.sidebar-filled .tab-list li a[href="#section--keyword-lists"] { + display: none; +} diff --git a/experiments/settings-1/b/style/extra.css b/experiments/settings-1/b/style/extra.css new file mode 100644 index 0000000..a44cdc2 --- /dev/null +++ b/experiments/settings-1/b/style/extra.css @@ -0,0 +1,97 @@ +.container-panel { + flex: 1 1 auto; + border-top: 2px ridge hsl(300 50% 30%); + border-top-left-radius: inherit; + overflow-y: auto; + outline: none; + background: hsl(300 16% 30%); +} +@supports (overflow-y: overlay) { + .container-panel { + overflow-y: overlay; + }; +} +.container-panel > .panel { + display: none; + flex-direction: column; + gap: 1px; + border-radius: inherit; + background: hsl(0 0% 100% / 0.26); + box-shadow: 0 0 10px; +} +.container-panel > .panel, .brand { + margin-inline: max(0px, calc((100vw - 700px)/2)); +} +/**/ + +.panel .interaction + { display: flex; flex-direction: column; padding-inline: 8px; padding-block: 4px; } +.panel .list + { display: flex; margin: 0; border: 0; } +.panel .list.column + { flex-direction: column; } +.panel .list.row + { flex-direction: row; gap: 8px; } +.panel .list.row > * + { flex: 1; } +.panel .interaction.option + { flex-direction: row; padding-block: 0; user-select: none; } +.panel .interaction > *, .panel .organizer > *, .panel .term + { margin-block: 2px; border-radius: 2px; padding-block: 4px; } +.panel .interaction input[type="text"], +.panel .interaction textarea, +.panel .interaction .submitter + { border: none; background: hsl(300 60% 16%); color: hsl(0 0% 90%); font-family: inherit; } +.panel .interaction input[type="checkbox"] + { align-self: center; } +.panel .interaction:is(.action, .link, .organizer) > * + { padding-block: 0; } +.panel .interaction .label, .alert + { color: hsl(300 0% 72%); } +.panel .interaction.option label.label[for]:hover + { color: hsl(300 0% 66%); } +.panel .interaction .submitter + { padding-block: 3px; } +.panel .interaction .submitter:disabled + { pointer-events: none; color: hsl(0 0% 60%); } +.panel .interaction .alert, +.panel .interaction .submitter + { padding-inline: 2px; } +.panel .interaction .submitter:hover + { background: hsl(300 60% 20%); } +.panel .interaction .submitter:active + { background: hsl(300 60% 14%); } +.panel .interaction .note + { font-size: 14px; color: hsl(300 6% 54%); white-space: break-spaces; } +.panel .interaction.option .label + { flex: 1; } +.panel .interaction.link a + { color: hsl(200 100% 80%); } +.panel .interaction.link a:visited + { color: hsl(260 100% 80%); } +.panel .interaction.link a:active + { color: hsl(0 100% 60%); } +/**/ + +.panel .section > .title, .panel .section > .title-row > .title + { margin: 4px; } +.panel.panel-term_lists .section > .container + { padding: 4px; } +.panel.panel-term_lists .container-terms .term + { display: flex; background: hsl(300 30% 15%); } +.panel.panel-term_lists .container-terms .term .phrase-input + { width: 120px; background: none; } +.panel.panel-term_lists .container-terms .term .phrase-input:not(:focus, :hover, :placeholder-shown) + { background-image: linear-gradient(90deg, hsl(0 0% 90%) 85%, transparent); + -webkit-background-clip: text; -webkit-text-fill-color: transparent; } +.panel.panel-term_lists .container-terms .term .matching + { flex: 1; height: auto; overflow-y: auto; } +@supports (overflow-y: overlay) + { .panel.panel-term_lists .container-terms .term .matching { overflow-y: overlay; }; } +.panel.panel-term_lists .container-terms .term .matching .type + { display: flex; } +.panel.panel-term_lists .container-terms .term .matching .type .label + { flex: 1; align-self: center; font-size: 12px; } +.panel.panel-term_lists .container-urls .url-input + { border: none; background: none; color: hsl(0 0% 90%); } +/**/ diff --git a/experiments/settings-1/b/style/main.css b/experiments/settings-1/b/style/main.css new file mode 100644 index 0000000..16b3a6a --- /dev/null +++ b/experiments/settings-1/b/style/main.css @@ -0,0 +1,486 @@ +:root { + --bg-D: #1c1b22 /* Background color of Firefox's add-on manager. */; + --color-D: hsl(0 0% 78%); + --color-dim-D: hsl(0, 0%, 66%); + --color-logo-title-D: hsl(0, 0%, 82%); + --color-h1-D: hsl(0, 0%, 82%); + --color-h2-D: hsl(0, 0%, 82%); + --color-h3-D: hsl(0, 0%, 82%); + --bg-header-D: hsl(300, 100%, 10%); + --border-header-D: hsl(300 40% 40%); + --color-info-D: hsl(0 0% 50%); + --color-info-hover-D: hsl(300 100% 34%); + --outline-info-details-D: hsl(0 0% 60%); + --color-info-details-D: hsl(0 0% 0%); + --border-bubble-D: hsl(0 0% 64%); + --bg-keyboard: var(--bg); + --color-keyboard: var(--color-dim); + --border-keyboard: var(--color-dim); + --bg-nav-button: var(--bg); + --border-nav-button: var(--border-header); + --bg-selected: hsl(300 50% 70%); + --color-selected: hsl(0 0% 0%); +} + +:root, :root:has(#theme-light:checked) { + color-scheme: light; + --bg: hsl(0 0% 100%); + --color: hsl(0 0% 0%); + --color-dim: hsl(0 0% 30%); + --color-logo-title: hsl(0 0% 20%); + --color-h1: hsl(0 0% 20%); + --color-h2: hsl(0 0% 20%); + --color-h3: hsl(0, 0%, 32%); + --bg-header: hsl(300 100% 98%); + --border-header: hsl(300 100% 88%); + --color-info: hsl(0 0% 50%); + --color-info-hover: hsl(300 100% 34%); + --outline-info-details: hsl(0 0% 60%); + --color-info-details: hsl(0 0% 0%); + --border-bubble: hsl(0 0% 64%); +} + +:root:has(#theme-dark:checked) { + color-scheme: dark; + --bg: var(--bg-D); + --color: var(--color-D); + --color-dim: var(--color-dim-D); + --color-logo-title: var(--color-logo-title-D); + --color-h1: var(--color-h1-D); + --color-h2: var(--color-h2-D); + --color-h3: var(--color-h3-D); + --bg-header: var(--bg-header-D); + --border-header: var(--border-header-D); + --color-info: var(--color-info-D); + --color-info-hover: var(--color-info-hover-D); + --outline-info-details: var(--outline-info-details-D); + --color-info-details: var(--color-info-details-D); + --border-bubble: var(--border-bubble-D); +} + +@media (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + --bg: var(--bg-D); + --color: var(--color-D); + --color-dim: var(--color-dim-D); + --color-logo-title: var(--color-logo-title-D); + --color-h1: var(--color-h1-D); + --color-h2: var(--color-h2-D); + --color-h3: var(--color-h3-D); + --bg-header: var(--bg-header-D); + --border-header: var(--border-header-D); + --color-info: var(--color-info-D); + --color-info-hover: var(--color-info-hover-D); + --outline-info-details: var(--outline-info-details-D); + --color-info-details: var(--color-info-details-D); + --border-bubble: var(--border-bubble-D); + } +} + +:root { + font-size: 16px; + font-family: "Arial", sans-serif; + background: var(--bg); + color: var(--color); +} + +body { + display: flex; + flex-direction: column; + min-height: 100vh; + margin: 0; +} + +#header { + & { + display: flex; + overflow-y: visible /* Ensure that dropdowns can drop below the header. */; + background: var(--bg-header); + border-bottom: 1px solid var(--border-header); + position: sticky; + top: 0; + z-index: 1; + } + + & > * { + margin-inline: 10px; + } + + & .brand { + display: flex; + } + + & .controls { + flex: 1; + } + + & nav { + display: flex; + position: relative; + gap: 20px; + align-items: center; + } + + & nav a { + display: block; + padding: 12px; + background: var(--bg-nav-button); + border: 2px solid var(--border-nav-button); + border-radius: calc(infinity * 1px); + } + + & nav a[href^="#"] { + padding: 8px; + border-width: 1px; + border-radius: 0; + } + + & nav a.hidden { + position: absolute; + } + + & nav a.hidden:not(:focus) { + opacity: 0; + pointer-events: none; + } + + & nav div { + position: relative; + } + + & .menu:focus-within fieldset, & .menu fieldset:active, & .menu fieldset:hover { + display: flex; + } + + & .menu fieldset { + display: none; + flex-direction: column; + gap: 2px; + position: absolute; + width: 100%; + top: calc(100% - 2px); + left: 0; + box-sizing: border-box; + margin: 0; + padding: 0; + border: 2px solid var(--border-nav-button); + border-top: none; + background: var(--bg); + } + + & .menu fieldset legend { + display: none; + } + + & .menu fieldset input { + position: absolute; + opacity: 0; + } + + & .menu fieldset label { + display: block; + margin: 1px; + padding: 2px; + } + + & .menu fieldset input:checked + label { + background: var(--bg-selected); + color: var(--color-selected); + } + + & .menu fieldset input:focus + label { + outline: 2px solid var(--bg-selected); + outline-offset: 1px; + } + + & .logo-icon { + width: 38px; + margin-right: 10px; + padding-bottom: 10px; + } +} + +.logo-title { + margin-block: 0.4em; + white-space: nowrap; + font-size: 2em; + font-weight: normal; + text-decoration: none; + color: var(--color); +} + +/* Alternate stacked header layout for narrow screens */ +@media (max-width: 700px) { + #header { + & { + flex-direction: column; + } + + & nav { + padding-block: 4px; + gap: 10px; + } + + & nav a { + padding: 8px; + } + + & .logo-icon { + padding-bottom: 0; + } + + & .logo-title { + margin-block-start: 0.5em; + margin-block-end: 0.2em; + font-size: 1.5em; + } + } +} + +#main-container { + flex: 1; + display: flex; +} + +#main-container > .sidebar { + & { + flex: 1; + } + + &:first-child .sidebar-content { + padding-left: 20px; + } + + &:last-child .sidebar-content { + padding-right: 20px; + } +} + +.sidebar-filled { + display: flex; + flex-direction: column; + align-items: flex-end; + border-right: 1px solid var(--border-header); + background: var(--bg-header); +} + +.sidebar-filled > .sidebar-content { + flex: 1; +} + +.sidebar-filled .tab-list { + & { + padding: 0; + } + + & li { + display: block; + } + + & li a { + display: block; + position: relative; + right: -1px; + width: 100%; + margin-block: 6px; + padding-block: 8px; + padding-inline: 0.5em; + box-sizing: border-box; + white-space: nowrap; + border: 1px solid var(--border-header); + border-right-color: transparent; + } + + & li a.active { + border-right-color: var(--bg); + background: var(--bg); + } +} + +#main { + width: 1200px; + padding-inline: 20px; + font-size: 1.2em; +} + +.frame #main { + font-size: inherit; +} + +h1 { + color: var(--color-h1); +} + +h2 { + color: var(--color-h2); +} + +h3 { + color: var(--color-h3); +} + +input.info { + & { + display: inline-block; + position: relative; + margin-inline: 0.3em; + width: 1.2em; + height: 1.2em; + border: none; + border-radius: 1em; + text-align: center; + font-weight: bold; + background: none; + color: var(--color-info); + appearance: none /* Remove checkbox appearance for custom styling - may only work in newest browsers */; + } + + &:not(:focus-visible) { + outline: 1px solid; + } + + &:hover { + color: var(--color-info-hover); + } + + &::before { + content: "?"; + } + + &:checked::after { + content: ""; + position: absolute; + border-bottom: 0.8em solid var(--outline-info-details); + border-left: 0.8em solid transparent; + border-right: 0.8em solid transparent; + top: 1.2em; + left: -0.2em; + } +} + +.info.details { + display: none; +} + +input.info:checked + .info.details { + display: block; + float: right; + box-sizing: border-box; + width: 100%; + padding: 0.8em; + margin-block: 0.5em; + background: Canvas; + outline: 1px solid var(--outline-info-details); + color: var(--color-info-details); +} + +kbd { + padding-inline: 3px; + padding-block: 1px; + border: 1px solid var(--border-keyboard); + border-radius: 6px; + background: var(--bg-keyboard); + box-shadow: 0 2px 0 0 var(--border-keyboard); + color: var(--color-keyboard); +} + +p.hotkey { + font-size: 2em; +} + +p.hotkey kbd { + padding: 0.2em; +} + +.toolbar-button { + display: inline-block; + vertical-align: bottom; + height: 1em; + padding: 0.1em; + margin-inline: 0.1em; + border-radius: 0.2em; + background: hsl(0 0% 90% / 0.8); + box-shadow: 1px 1px 1px; + color: black; +} + +.toolbar-button img { + height: 1em; + aspect-ratio: 1; +} + +mark { + background: hsl(300 100% 60% / 0.4); + box-shadow: 0 0 0 1px hsl(300 100% 20% / 0.35); + color: inherit; +} + +.setting-list { + & { + display: grid; + grid-template-columns: min-content auto; + margin-block: 1em; + row-gap: 0.4em; + padding-inline-start: 40px; + column-gap: 14px; + } + + & input[type="checkbox"] { + height: 0.8em; + aspect-ratio: 1; + font-size: inherit; + } + + & input[type="number"], + & input[type="text"] { + width: 8em; + padding-block: 0; + font-size: 0.9em; + vertical-align: bottom; + } + + & input[type="number"] { + width: 4em; + } + + & [data-unit] { + white-space: nowrap; + } + + & [data-unit]::after { + content: attr(data-unit); + font-size: 0.9em; + color: var(--color-dim); + } +} + +@media (max-width: 1000px) { + .setting-list { + padding-inline-start: 20px; + } +} + +@media (max-width: 700px) { + .setting-list { + padding-inline-start: 10px; + column-gap: 10px; + } +} + +p.setting { + display: flex; + align-items: center; + font-size: 1.2em; +} + +.image-placeholder { + font-style: italic; + color: grey; +} +.image-placeholder::before { + content: "["; +} +.image-placeholder::after { + content: "]"; +} diff --git a/experiments/settings-1/b/style/variant/docs.css b/experiments/settings-1/b/style/variant/docs.css new file mode 100644 index 0000000..bd5a9c4 --- /dev/null +++ b/experiments/settings-1/b/style/variant/docs.css @@ -0,0 +1,20 @@ +#main h1 { + margin-top: 1.4em; + margin-bottom: 1.4em; + font-size: 2.4em; + font-weight: normal; +} + +#main h2 { + margin-top: 1.4em; + margin-bottom: 1.4em; + font-size: 2em; + font-weight: normal; +} + +#main h3 { + margin-top: 2.2em; + margin-bottom: 1.4em; + font-size: 1.2em; + font-weight: normal; +} diff --git a/experiments/settings-1/b/style/variant/settings.css b/experiments/settings-1/b/style/variant/settings.css new file mode 100644 index 0000000..ced510b --- /dev/null +++ b/experiments/settings-1/b/style/variant/settings.css @@ -0,0 +1,11 @@ +.section:not(:has(:target)) { + display: none; +} + +h3 { + font-weight: normal; +} + +hgroup p { + display: none; +} diff --git a/icons/arrow.svg b/icons/arrow.svg new file mode 100644 index 0000000..d475958 --- /dev/null +++ b/icons/arrow.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + diff --git a/icons/close.svg b/icons/close.svg new file mode 100644 index 0000000..9f03db8 --- /dev/null +++ b/icons/close.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/icons/create.svg b/icons/create.svg new file mode 100644 index 0000000..1a038ae --- /dev/null +++ b/icons/create.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/icons/delete.svg b/icons/delete.svg new file mode 100644 index 0000000..3b1575f --- /dev/null +++ b/icons/delete.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/icons/edit.svg b/icons/edit.svg new file mode 100644 index 0000000..f2f52d6 --- /dev/null +++ b/icons/edit.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/icons/mms-off.svg b/icons/mms-off.svg new file mode 100644 index 0000000..828801f --- /dev/null +++ b/icons/mms-off.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + diff --git a/icons/pin.svg b/icons/pin.svg new file mode 100644 index 0000000..00cb8c3 --- /dev/null +++ b/icons/pin.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + diff --git a/icons/refresh.svg b/icons/refresh.svg new file mode 100644 index 0000000..c6ec203 --- /dev/null +++ b/icons/refresh.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/icons/reveal.svg b/icons/reveal.svg new file mode 100644 index 0000000..1763839 --- /dev/null +++ b/icons/reveal.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/icons/search.svg b/icons/search.svg new file mode 100644 index 0000000..c1eda0c --- /dev/null +++ b/icons/search.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/icons/show.svg b/icons/show.svg new file mode 100644 index 0000000..b498b8d --- /dev/null +++ b/icons/show.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + +