commit c0d3a9d7ea93112f25c88de0ddaa0c3e736fdd03 Author: MeowcaTheoRange Date: Wed Jan 3 01:55:27 2024 -0600 Initial commit diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..967eed7 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 3001 +} diff --git a/assets/fonts/Lexend Deca/Variable.ttf b/assets/fonts/Lexend Deca/Variable.ttf new file mode 100644 index 0000000..e895baf Binary files /dev/null and b/assets/fonts/Lexend Deca/Variable.ttf differ diff --git a/assets/fonts/OpenDyslexic/Bold.otf b/assets/fonts/OpenDyslexic/Bold.otf new file mode 100644 index 0000000..7d074cb Binary files /dev/null and b/assets/fonts/OpenDyslexic/Bold.otf differ diff --git a/assets/fonts/OpenDyslexic/BoldItalic.otf b/assets/fonts/OpenDyslexic/BoldItalic.otf new file mode 100644 index 0000000..41aee2d Binary files /dev/null and b/assets/fonts/OpenDyslexic/BoldItalic.otf differ diff --git a/assets/fonts/OpenDyslexic/Italic.otf b/assets/fonts/OpenDyslexic/Italic.otf new file mode 100644 index 0000000..2b15f8f Binary files /dev/null and b/assets/fonts/OpenDyslexic/Italic.otf differ diff --git a/assets/fonts/OpenDyslexic/Regular.otf b/assets/fonts/OpenDyslexic/Regular.otf new file mode 100644 index 0000000..ebef13c Binary files /dev/null and b/assets/fonts/OpenDyslexic/Regular.otf differ diff --git a/assets/fonts/Renogare/Regular.otf b/assets/fonts/Renogare/Regular.otf new file mode 100644 index 0000000..3e11402 Binary files /dev/null and b/assets/fonts/Renogare/Regular.otf differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..dc63c9f --- /dev/null +++ b/index.html @@ -0,0 +1,223 @@ + + + + + Spectrum + + + + + + + +
+
+

Spectrum

+

Like spectrum.avris.it, but a little more detailed.

+
+
+
+
+

Name

+

What's your name? This will be used throughout the form.

+ +
+
+

Gender

+

Identity

+ + +

+

Expression

+
+ + +
+

+
+
+

Sexual orientation

+ + +

+
+
+

Romantic orientation

+ + +

+
+
+

Relationship attitude

+

Commitment

+ +

Openness

+ +

+
+
+

Share it!

+

Here's a shareable link:

+

+ ... +

+
+
+

Create your own spectrum

+

Click here to create your own!

+
+ + + + diff --git a/scripts/index.js b/scripts/index.js new file mode 100644 index 0000000..1e55759 --- /dev/null +++ b/scripts/index.js @@ -0,0 +1,292 @@ +const nameElement = document.getElementById("spec-name"); + +const sliders = [ + [ + "spec-gen-idt", + "spec-gen-idt-amt", + ["gen-idt", (x) => x.value], + (x) => x.value >= 1, + ], // Gender identity + [ + "spec-gen-exp", + "spec-gen-exp-ovr", + ["gen-exp", (x) => (x.checked ? 1 : 0)], + (x) => x.checked, + ], // Gender expression + [ + "spec-sex-ori", + "spec-sex-ori-amt", + ["sex-ori", (x) => x.value], + (x) => x.value >= 1, + ], // Sexual orientation + [ + "spec-rom-ori", + "spec-rom-ori-amt", + ["rom-ori", (x) => x.value], + (x) => x.value >= 1, + ], // Romantic orientation + [ + "spec-rel-att", + "spec-rel-att-amt", + ["rel-att", (x) => x.value], + (x) => x.value >= 1, + ], // Relationship attitude +]; + +const descs = { + "gen-idt": { + descElement: document.getElementById("spec-gen-idt-dsc"), + components: { + amount: [ + (val, sub) => + `${sub} does not feel any connection with identifying as any gender.`, + (val, sub) => + `${sub} closely identifies ${val}, but they are somewhat disconnected from it.`, + (val, sub) => + `${sub} closely identifies ${val}, but they don't really care.`, + (val, sub) => + `${sub} identifies ${val}, and they are somewhat connected to it.`, + (val, sub) => + `${sub} identifies ${val}, and they are very connected to it.`, + ], + value: [ + `as male`, + `as mostly male`, + `as somewhat male`, + `more androgynously than male`, + `androgynously`, + `more androgynously than female`, + `as somewhat female`, + `as mostly female`, + `as female`, + ], + }, + }, + "gen-exp": { + descElement: document.getElementById("spec-gen-exp-dsc"), + components: { + amount: [ + (val, sub) => `${sub} isn't too occupied with expressing themselves.`, + (val, sub) => `${sub} expresses themselves ${val}.`, + ], + value: [ + `as super masculine`, + `as very masculine`, + `as masculine`, + `as somewhat masculine`, + `more androgynously than masculine`, + `androgynously`, + `more androgynously than feminine`, + `as somewhat feminine`, + `as feminine`, + `as very feminine`, + `as super feminine`, + ], + }, + }, + "sex-ori": { + descElement: document.getElementById("spec-sex-ori-dsc"), + components: { + amount: [ + (val, sub) => `${sub} does not feel any sexual attraction.`, + (val, sub) => `${sub} feels some sexual attraction, ${val}.`, + (val, sub) => `${sub} feels sexual attraction, ${val}.`, + (val, sub) => `${sub} feels more sexual attraction than usual, ${val}.`, + (val, sub) => `${sub} feels extreme sexual attraction, ${val}.`, + ], + value: [ + `to another gender`, + `more to another gender than their own`, + `to any gender`, + `more towards their own gender than another`, + `towards their own gender`, + ], + }, + }, + "rom-ori": { + descElement: document.getElementById("spec-rom-ori-dsc"), + components: { + amount: [ + (val, sub) => `${sub} does not feel any romantic attraction.`, + (val, sub) => `${sub} feels some romantic attraction, ${val}.`, + (val, sub) => `${sub} feels romantic attraction, ${val}.`, + (val, sub) => + `${sub} feels more romantic attraction than usual, ${val}.`, + (val, sub) => `${sub} feels extreme romantic attraction, ${val}.`, + ], + value: [ + `to another gender`, + `more to another gender than their own`, + `to any gender`, + `more towards their own gender than another`, + `towards their own gender`, + ], + }, + }, + "rel-att": { + descElement: document.getElementById("spec-rel-att-dsc"), + components: { + amount: [ + (val, sub) => `${sub} would be uncomfortable in any relationship.`, + (val, sub) => + `${sub} is somewhat uncomfortable with relationships, but they would ${val}.`, + (val, sub) => `${sub} would ${val}.`, + (val, sub) => + `${sub} would ${val}. They would also be more active in it than usual.`, + (val, sub) => + `${sub} would ${val}. They would also be dedicated to it.`, + ], + value: [ + `prefer a monogamous relationship`, + `prefer a monogamous relationship. However, they can be polyamorous if desired`, + `be open to any kind of relationship`, + `prefer a polyamorous relationship. However, they can be monogamous if desired`, + `prefer a polyamorous relationship`, + ], + }, + }, +}; + +function triggerSliders(generate) { + sliders.forEach(([slider, override, description, func]) => { + console.log(slider, override); + var overrideElement = document.getElementById(override); + var sliderElement = document.getElementById(slider); + + if (generate) { + // Disable on override condition + overrideElement.addEventListener("input", (e) => { + sliderElement.disabled = !func(e.target); + }); + + // Update description on attribute change + overrideElement.addEventListener("input", (e) => { + updateDescription( + description[0], + sliderElement.value, + description[1](overrideElement) + ); + createShareableURL(); + }); + sliderElement.addEventListener("input", (e) => { + updateDescription( + description[0], + sliderElement.value, + description[1](overrideElement) + ); + createShareableURL(); + }); + + // Update description on name change + nameElement.addEventListener("input", () => { + updateDescription( + description[0], + sliderElement.value, + description[1](overrideElement) + ); + createShareableURL(); + }); + } + + sliderElement.disabled = !func(overrideElement); + + updateDescription( + description[0], + sliderElement.value, + description[1](overrideElement) + ); + createShareableURL(); + }); +} + +function updateDescription(id, val, amt) { + var descObject = descs[id]; + descObject.descElement.innerHTML = descObject.components.amount[amt]( + descObject.components.value[val], + nameElement.value || "[Subject Name Here]" + ); +} + +var enc_s_gia = document.getElementById("spec-gen-idt-amt"); +var enc_s_gi = document.getElementById("spec-gen-idt"); +var enc_s_geo = document.getElementById("spec-gen-exp-ovr"); +var enc_s_ge = document.getElementById("spec-gen-exp"); +var enc_s_soa = document.getElementById("spec-sex-ori-amt"); +var enc_s_so = document.getElementById("spec-sex-ori"); +var enc_s_roa = document.getElementById("spec-rom-ori-amt"); +var enc_s_ro = document.getElementById("spec-rom-ori"); +var enc_s_raa = document.getElementById("spec-rel-att-amt"); +var enc_s_ra = document.getElementById("spec-rel-att"); +function encode() { + // out string len is 3 + 4 + 1 + 4 + 3 + 3 + 3 + 3 + 3 + 3 = 30 + // 000 0000 0 0000 000 000 000 000 000 000 + const parse = (s, n) => Math.abs(s).toString(2).padStart(n, "0"); + var string = + parse(enc_s_gia.value, 3) + + parse(enc_s_gi.value, 4) + + parse(enc_s_geo.checked, 1) + + parse(enc_s_ge.value, 4) + + parse(enc_s_soa.value, 3) + + parse(enc_s_so.value, 3) + + parse(enc_s_roa.value, 3) + + parse(enc_s_ro.value, 3) + + parse(enc_s_raa.value, 3) + + parse(enc_s_ra.value, 3); + var parsed_string = parseInt(string, 2).toString(16); + console.log(string, parsed_string); + return parsed_string; +} + +// test pattern (on): 100100011010100100100100100100 246a4924 +// test pattern (off): 001000010000001000001000001000 8408208 + +function decode(string) { + var parsed_string = parseInt(string, 16).toString(2).padStart(30, "0"); + + enc_s_gia.value = parseInt(parsed_string.substring(0, 3), 2); + enc_s_gi.value = parseInt(parsed_string.substring(3, 7), 2); + enc_s_geo.checked = parseInt(parsed_string.substring(7, 8), 2); + enc_s_ge.value = parseInt(parsed_string.substring(8, 12), 2); + enc_s_soa.value = parseInt(parsed_string.substring(12, 15), 2); + enc_s_so.value = parseInt(parsed_string.substring(15, 18), 2); + enc_s_roa.value = parseInt(parsed_string.substring(18, 21), 2); + enc_s_ro.value = parseInt(parsed_string.substring(21, 24), 2); + enc_s_raa.value = parseInt(parsed_string.substring(24, 27), 2); + enc_s_ra.value = parseInt(parsed_string.substring(27, 30), 2); + + triggerSliders(false); +} + +const s_share_link = document.getElementById("spec-share-link"); + +function createShareableURL() { + const url = new URL(window.location.href); + const code = encode(); + + url.search = new URLSearchParams({ + s: code, + n: nameElement.value || "[Subject Name Here]", + }).toString(); + + s_share_link.innerHTML = url.toString(); + s_share_link.href = url.toString(); +} + +function parseURL() { + const urlParams = new URLSearchParams(window.location.search); + if (urlParams.get("s") == null) { + document.addEventListener("DOMContentLoaded", () => triggerSliders(true)); + return; + } + nameElement.value = urlParams.get("n") || ""; + decode(urlParams.get("s")); + sliders.forEach(([slider, override]) => { + document.body.classList.add("readOnly"); + nameElement.classList.add("ro"); + nameElement.disabled = true; + document.getElementById(slider).classList.add("ro"); + document.getElementById(slider).disabled = true; + document.getElementById(override).classList.add("ro"); + document.getElementById(override).disabled = true; + }); +} diff --git a/styles/normal.css b/styles/normal.css new file mode 100755 index 0000000..3270339 --- /dev/null +++ b/styles/normal.css @@ -0,0 +1,527 @@ +/* + * THE KARKAT PUBLIC LICENSE + * Version 1, November 2023 + * + * Copyright (C) 2023 MeowcaTheoRange + * + * EVERYONE IS FREE TO MODIFY, USE, AND DISTRIBUTE + * THE INCLUDED PROGRAM CODE AS LONG AS THE KARKAT + * PUBLIC LICENSE'S CONTENTS PERSIST WITHIN. + * + * BY DOING SO, YOU AGREE TO BE BOUND BY THIS + * LICENSE'S TERMS AND CONDITIONS: + * + * 0. YOU AGREE NOT TO BE A WUSS ABOUT IT. + * 1. YOU AGREE THAT THIS SHITTY PROGRAM COMES + * WITH NO WARRANTY. + * 2. YOU FROND PROMISE THAT YOU WON'T SUE IF + * YOUR COMPUTER EXPLODES BECAUSE OF THIS + * PROGRAM. + * 3. YOU AGREE THAT KARKAT IS THE BEST HACKER ON + * ALTERNIA. + * + * WRITE YOUR PROGRAM NAME HERE: + * Normalize (normal.css) + * WRITE THE NAME(S) OF THE PROGRAM CODE AUTHOR(S) + * HERE: + * MeowcaTheoRange + * + * GREAT, NOW FUCK OFF. + */ + +/* Import the true normalize.css library for consistency across browsers */ +@import url("https://necolas.github.io/normalize.css/8.0.1/normalize.css"); + +/* Document form */ + +:root { + /* The defining em-size of the document, in rem. */ + --base-scale: 1rem; + /* The width of the document, in em. */ + --document-width: 50em; + + /* The basic color of the page, used for all values below. You can use this for a quick, single-color theme. */ + --base-color: 0, 0%; + + /* The font used in the document. */ + --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; + /* The weight of the font used in the document. */ + --font-weight: normal; + + /* The font used for headers in the document. */ + --header-font-family: var(--font-family); + /* The weight of the font used for headers in the document. */ + --header-font-weight: bold; + + /* The underlay color of the document. */ + --underlay-color: hsl(var(--base-color), 10%); + /* The page color. */ + --background-color: hsl(var(--base-color), 15%); + /* The foreground color of the page. */ + --color: hsl(var(--base-color), 85%); + /* The accent color of the page. */ + --accent-color: hsl(var(--base-color), 30%); + /* The background-adjacent accent color of the page. */ + --accent-color-bg: hsl(var(--base-color), 75%); + /* The foreground accent color of the page. */ + --accent-color-fg: hsl(var(--base-color), 95%); + + /* The width of the borders used on certain elements. */ + --border-width: calc(1em / 16); + /* The style of the borders used on certain elements. */ + --border-style: solid; + /* The color of the borders used on certain elements. */ + --border-color: var(--color); + /* The radius of the borders used on certain elements. */ + --border-radius: 0; +} + +@media (prefers-color-scheme: light) { + :root { + /* The underlay color of the document. */ + --underlay-color: hsl(var(--base-color), 90%); + /* The page color. */ + --background-color: hsl(var(--base-color), 80%); + /* The foreground color of the page. */ + --color: hsl(var(--base-color), 15%); + /* The accent color of the page. */ + --accent-color: hsl(var(--base-color), 70%); + /* The background-adjacent accent color of the page. */ + --accent-color-bg: hsl(var(--base-color), 25%); + /* The foreground accent color of the page. */ + --accent-color-fg: hsl(var(--base-color), 5%); + /* The color of the borders used on certain elements. */ + --border-color: var(--color); + } +} + +html.base { + /* --base-color: 0, 0% !important; */ + + /* --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol" !important; + --font-weight: normal !important; + + --header-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol" !important; + --header-font-weight: bold !important; */ + + --underlay-color: #fff !important; + --background-color: transparent !important; + --color: #000 !important; + --accent-color: #c0c0c0 !important; + --accent-color-bg: #000 !important; + --accent-color-fg: #000 !important; + + --border-width: calc(1em / 16) !important; + --border-style: solid !important; + --border-color: var(--color) !important; + --border-radius: 0 !important; +} + +@media (prefers-color-scheme: dark) { + html.base { + --underlay-color: #000 !important; + --background-color: transparent !important; + --color: #fff !important; + --accent-color: #404040 !important; + --accent-color-bg: #fff !important; + --accent-color-fg: #fff !important; + + --border-color: var(--color); + } +} + +@media (forced-colors: active) { + :root { + /* --base-color: 0, 0% !important; */ + + /* --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol" !important; + --font-weight: normal !important; + + --header-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol" !important; + --header-font-weight: bold !important; */ + + --underlay-color: #fff !important; + --background-color: transparent !important; + --color: #000 !important; + --accent-color: #c0c0c0 !important; + --accent-color-bg: #000 !important; + --accent-color-fg: #000 !important; + + --border-width: calc(1em / 16) !important; + --border-style: solid !important; + --border-color: var(--color) !important; + --border-radius: 0 !important; + } +} + +/* Size and type normalize */ + +html { + font-size: var(--base-scale); + line-height: 1em; + background-color: var(--underlay-color); + color: var(--color); +} + +body { + width: 100vw; + background-color: var(--background-color); + max-width: var(--document-width); + min-height: 100vh; + margin: auto; + padding-inline: 2em; + padding-block: 1em; +} + +main { + margin-block: 1em; +} + +h1 { + font-family: var(--header-font-family); + font-weight: var(--header-font-weight); + font-size: 2em; + line-height: 1.5em; + margin: 0; + margin-block: 0.125em; +} + +h2 { + font-family: var(--header-font-family); + font-weight: var(--header-font-weight); + font-size: 1.5em; + line-height: 1.25em; + margin: 0; + margin-block: 0.5em; +} + +h3 { + font-family: var(--header-font-family); + font-weight: var(--header-font-weight); + font-size: 1.1em; + line-height: 1.25em; + margin: 0; + margin-block: 0.5em; +} + +h4 { + font-family: var(--header-font-family); + font-weight: var(--header-font-weight); + font-size: 1em; + line-height: 1.25em; + margin: 0; + margin-block: 0.5em; +} + +p { + font-size: 1em; + line-height: 1.5em; + margin-inline: 0; + margin-block: 0.5em; +} + +img { + max-width: 100%; +} + +ul, +ol { + padding: 0; + padding-inline-start: 1em; + margin: 0; + margin-block: 0.5em; +} + +li { + margin-inline: 0; + line-height: 1.5em; + margin-block: 0.5em; +} + +small { + font-size: 0.75em; +} + +big { + font-size: 1.5em; +} + +code { + font-size: 1em; + line-height: 1.25em; + font-family: monospace; +} + +pre { + display: inline-block; + width: 100%; + overflow-x: auto; + font-size: 1em; + line-height: 1.25em; + padding: 0.5em; + margin-block: 0.5em; + box-sizing: border-box; +} + +hr { + border: none; + border-top: var(--border-width) var(--border-style) var(--border-color); + background-color: transparent; + margin-inline: 0; + margin-block: 0.25em; +} + +blockquote { + margin-inline: 1em; + margin-block: 0.5em; +} + +/* Pseudo normalize */ + +::selection { + color: var(--background-color); + background-color: var(--color); +} + +/* Form normalize */ + +html { + font-family: var(--font-family); + font-weight: var(--font-weight); +} + +* { + box-sizing: border-box; +} + +*:focus { + outline: 2px solid var(--accent-color-bg); +} + +fieldset { + border: var(--border-width) var(--border-style) var(--border-color); + border-radius: var(--border-radius); + padding-inline: 0.5em; + padding-block: 0.25em; + margin-inline: 0; + margin-block: 0.5em; + font-size: 1em; + background-color: var(--background-color); + color: var(--color); +} + +legend { + padding-inline: var(--border-width); +} + +summary { + font-size: 1em; + line-height: 1.5em; + margin-inline: 0; + margin-block: 0.5em; +} + +iframe { + border: var(--border-width) var(--border-style) var(--border-color); + border-radius: var(--border-radius); + width: 100%; + aspect-ratio: 16/9; +} + +/* Interactive normalize */ + +a { + color: var(--accent-color-bg); + text-decoration: underline; +} + +a:hover, +a:focus { + opacity: 0.8; +} + +a:active { + opacity: 0.5; +} + +input, +select, +textarea { + font-family: inherit; + border: var(--border-width) var(--border-style) var(--border-color); + border-radius: var(--border-radius); + padding-inline: 0.5em; + padding-block: 0.25em; + margin-inline: 0; + margin-block: 0.25em; + font-size: 1em; + vertical-align: middle; + background-color: var(--background-color); + color: var(--color); +} + +input:disabled { + opacity: 0.5; +} + +button, +input[type="button"], +input[type="submit"], +input[type="reset"] { + border: var(--border-width) var(--border-style) var(--border-color); + border-radius: var(--border-radius); + padding-inline: 0.5em; + padding-block: 0.25em; + margin-inline: 0; + margin-block: 0.25em; + font-size: 1em; + line-height: 1.25em; + font-family: inherit; + background-color: var(--accent-color); + color: var(--accent-color-fg); +} + +button[data-outlined], +input[type="button"][data-outlined], +input[type="submit"][data-outlined], +input[type="reset"][data-outlined] { + border: var(--border-width) var(--border-style) var(--border-color); + border-radius: var(--border-radius); + background-color: var(--background-color); + color: var(--accent-color); +} + +button:hover, +input[type="button"]:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +button:focus, +input[type="button"]:focus, +input[type="submit"]:focus, +input[type="reset"]:focus { + opacity: 0.8; +} +button:active, +input[type="button"]:active, +input[type="submit"]:active, +input[type="reset"]:active { + opacity: 0.5; +} +button:disabled, +input[type="button"]:disabled, +input[type="submit"]:disabled, +input[type="reset"]:disabled { + opacity: 0.5; +} + +/* -- Checkbox styling */ + +label.checkbox { + display: inline-block; + position: relative; + margin-inline: 0; + margin-block: 0.25em; + vertical-align: middle; +} + +label.checkbox input[type="checkbox"] { + /* visibility: hidden; */ + opacity: 0; + width: 0; + height: 0; + position: absolute; + top: 0; + left: 0; +} + +label.checkbox input[type="checkbox"] + span.checkbox { + display: inline-block; + width: 1em; + height: 1em; + line-height: 1em; + padding-inline: 0.25em; + padding-block: 0.25em; + box-sizing: content-box; + border: var(--border-width) var(--border-style) var(--border-color); + border-radius: var(--border-radius); + color: transparent; + text-align: center; + user-select: none; + vertical-align: middle; +} + +label.checkbox input[type="checkbox"]:focus + span.checkbox { + outline: 2px solid var(--accent-color-bg); +} + +label.checkbox input[type="checkbox"]:checked + span.checkbox { + background-color: var(--accent-color); + border: var(--border-width) var(--border-style) var(--border-color); + border-radius: var(--border-radius); + color: var(--accent-color-fg); +} + +/* -- Range styling */ + +input[type="range"] { + -webkit-appearance: none; + appearance: none; + + box-sizing: content-box; + position: relative; + display: inline-block; + width: 10em; + height: 1em; + line-height: 1em; + border: var(--border-width) var(--border-style) var(--border-color); + border-radius: var(--border-radius); + padding-inline: 0; + padding-block: 0.25em; + margin-inline: 0; + margin-block: 0.25em; +} + +input[type="range"]:focus { + outline: none; +} + +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + + border: var(--border-width) var(--border-style) var(--border-color); + border-radius: var(--border-radius); + + background-color: var(--accent-color); + height: 1.5em; + box-sizing: content-box; + width: 1em; +} + +input[type="range"]:focus::-webkit-slider-thumb { + outline: 2px solid var(--accent-color-bg); +} + +input[type="range"]::-moz-range-thumb { + border: var(--border-width) var(--border-style) var(--border-color); + border-radius: var(--border-radius); + + background-color: var(--accent-color); + height: 1.5em; + box-sizing: content-box; + width: 1em; +} + +input[type="range"]:focus::-moz-range-thumb { + outline: 2px solid var(--accent-color-bg); +} diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..032a79a --- /dev/null +++ b/styles/style.css @@ -0,0 +1,7 @@ +@font-face { + font-family: "Lexend Deca"; + src: url("/assets/fonts/Lexend Deca/Variable.ttf"); +} +:root { + --font-family: "Lexend Deca"; +}