diff --git a/_includes/base.css b/_includes/base.css deleted file mode 100644 index 5392426..0000000 --- a/_includes/base.css +++ /dev/null @@ -1,3079 +0,0 @@ -/* ╭──────────────────────────────────────╮ -/ │ _ _ │ -/ │ ___| |_ _ _| | ___ ___ ___ ___ │ -/ │ / __| __| | | | |/ _ \ / __/ __/ __| │ -/ │ \__ \ |_| |_| | | __/| (__\__ \__ \ │ -/ │ |___/\__|\__, |_|\___(_)___|___/___/ │ -/ │ |___/ │ -/ ╰──────────────────────────────────────╯ -/ style.css - synth.download styling featuring these fancy ass thingies because why the hell not */ - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭───────────────────────────────────────────────────────╮ -/ │ _ _ _ _ _ _ │ -/ │ __ _ ___ ___ ___ ___ ___(_) |__ (_) (_) |_ _ _ │ -/ │ / _` |/ __/ __/ _ \/ __/ __| | '_ \| | | | __| | | | │ -/ │ | (_| | (_| (_| __/\__ \__ \ | |_) | | | | |_| |_| | │ -/ │ \__,_|\___\___\___||___/___/_|_.__/|_|_|_|\__|\__, | │ -/ │ |___/ │ -/ ╰───────────────────────────────────────────────────────╯ -/ accessibility - choosable accessibility settings */ - -/* - font settings - */ - -/* jetbrains mono */ -:root:has(#font-jbm:checked) { - --font-family: 'JetBrains Mono', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif; - - .navbar .nav-base.nav-right.nav-systray span { - margin: 0px -.1rem; - } -} - -/* atkinson hyperlegible next */ -:root:has(#font-ahn:checked) { - --font-family: 'Atkinson Hyperlegible Next', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif; -} - -/* inter */ -:root:has(#font-inter:checked) { - --font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif; -} - -/* (browser) sans serif */ -:root:has(#font-sans-serif:checked) { - --font-family: sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui; -} - -/* (browser) serif */ -:root:has(#font-serif:checked) { - --font-family: serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif; -} - -/* (browser) monospace */ -:root:has(#font-monospace:checked) { - --font-family: monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif; -} - -/* - misc - */ - -/* disable forced uncapitalization */ -:root:has(#uncapitalization:checked) { - body { - text-transform: none !important; - } -} - -/* disable background gradient */ -:root:has(#disable-bg:checked) { - body { - background: var(--background) !important; - } -} - -/* disable window animations */ -:root:has(#disable-animations:checked) { - .window { - animation: unset !important; - transition: unset !important; - } - - .window:hover { - transition: unset !important; - animation: unset !important; - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important; - } - - .navbar { - transition: unset !important; - } - - .navbar:hover { - transition: unset !important; - animation: unset !important; - background-color: color-mix(in srgb, var(--accent) 30%, transparent) !important; - } -} - -/* disable custom alt text popup */ -:root:has(#disable-alttext:checked) { - .alt-popup { - display: none !important; - } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭───────────────────────╮ -/ │ __ _ │ -/ │ / _| ___ _ __ | |_ │ -/ │ | |_ / _ \| '_ \| __| │ -/ │ | _| (_) | | | | |_ │ -/ │ |_| \___/|_| |_|\__| │ -/ ╰───────────────────────╯ -/ font - font configuration, stuff, whatever */ - -/* - JetBrains Mono - */ - -@font-face { - font-family: "JetBrains Mono"; - src: local("JetBrains Mono"), - url("/assets/fonts/JetBrainsMono/JetBrainsMono-Regular.woff2") - format("woff"), - local("JetBrainsMono Nerd Font"); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: "JetBrains Mono"; - src: local("JetBrains Mono"), - url("/assets/fonts/JetBrainsMono/JetBrainsMono-Bold.woff2") - format("woff"), - local("JetBrainsMono Nerd Font"); - font-weight: bold; - font-style: bold; -} - -@font-face { - font-family: "JetBrains Mono"; - src: local("JetBrains Mono"), - url("/assets/fonts/JetBrainsMono/JetBrainsMono-Italic.woff2") - format("woff"), - local("JetBrainsMono Nerd Font"); - font-weight: normal; - font-style: italic; -} - -@font-face { - font-family: "JetBrains Mono"; - src: local("JetBrains Mono"), - url("/assets/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.woff2") - format("woff"), - local("JetBrainsMono Nerd Font"); - font-weight: bold; - font-style: italic; -} - -/* font config, Atkinson Hyperlegible Next */ - -@font-face { - font-family: "Atkinson Hyperlegible Next"; - src: local("Atkinson Hyperlegible Next"), - url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Regular.woff2") - format("woff"), - local("JetBrainsMono Nerd Font"); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: "Atkinson Hyperlegible Next"; - src: local("Atkinson Hyperlegible Next"), - url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Bold.woff2") - format("woff"), - local("Atkinson Hyperlegible"); - font-weight: bold; - font-style: bold; -} - -@font-face { - font-family: "Atkinson Hyperlegible Next"; - src: local("Atkinson Hyperlegible Next"), - url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Italic.woff2") - format("woff"), - local("Atkinson Hyperlegible"); - font-weight: normal; - font-style: italic; -} - -@font-face { - font-family: "Atkinson Hyperlegible Next"; - src: local("Atkinson Hyperlegible Next"), - url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-BoldItalic.woff2") - format("woff"), - local("Atkinson Hyperlegible"); - font-weight: bold; - font-style: italic; -} - -/* font config, Inter - original css by Inter, modified by Sneexy */ - -/* Variable fonts usage: -:root { font-family: "Inter", sans-serif; } -@supports (font-variation-settings: normal) { - :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; } -} */ -@font-face { - font-family: InterVariable; - font-style: normal; - font-weight: 100 900; - font-display: swap; - src: url("InterVariable.woff2") format("woff2"); -} -@font-face { - font-family: InterVariable; - font-style: italic; - font-weight: 100 900; - font-display: swap; - src: url("InterVariable-Italic.woff2") format("woff2"); -} - -/* static fonts */ -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 100; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-Thin.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 100; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-ThinItalic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 200; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-ExtraLight.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 200; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-ExtraLightItalic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-Light.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 300; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-LightItalic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-Regular.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 400; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-Italic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-Medium.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 500; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-MediumItalic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-SemiBold.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 600; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-Bold.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 700; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-BoldItalic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-ExtraBold.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 800; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-ExtraBoldItalic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 900; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-Black.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 900; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-BlackItalic.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 100; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-Thin.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 100; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-ThinItalic.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 200; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-ExtraLight.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 200; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-ExtraLightItalic.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-Light.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 300; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-LightItalic.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-Regular.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 400; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-Italic.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-Medium.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 500; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-MediumItalic.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-SemiBold.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 600; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-SemiBoldItalic.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-Bold.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 700; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-BoldItalic.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-ExtraBold.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 800; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-ExtraBoldItalic.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 900; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-Black.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 900; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-BlackItalic.woff2") - format("woff2"); -} - -@font-feature-values InterVariable { - @character-variant { - cv01: 1; - cv02: 2; - cv03: 3; - cv04: 4; - cv05: 5; - cv06: 6; - cv07: 7; - cv08: 8; - cv09: 9; - cv10: 10; - cv11: 11; - cv12: 12; - cv13: 13; - alt-1: 1; /* Alternate one */ - alt-3: 9; /* Flat-top three */ - open-4: 2; /* Open four */ - open-6: 3; /* Open six */ - open-9: 4; /* Open nine */ - lc-l-with-tail: 5; /* Lower-case L with tail */ - simplified-u: 6; /* Simplified u */ - alt-double-s: 7; /* Alternate German double s */ - uc-i-with-serif: 8; /* Upper-case i with serif */ - uc-g-with-spur: 10; /* Capital G with spur */ - single-story-a: 11; /* Single-story a */ - compact-lc-f: 12; /* Compact f */ - compact-lc-t: 13; /* Compact t */ - } - @styleset { - ss01: 1; - ss02: 2; - ss03: 3; - ss04: 4; - ss05: 5; - ss06: 6; - ss07: 7; - ss08: 8; - open-digits: 1; /* Open digits */ - disambiguation: 2; /* Disambiguation (with zero) */ - disambiguation-except-zero: 4; /* Disambiguation (no zero) */ - round-quotes-and-commas: 3; /* Round quotes & commas */ - square-punctuation: 7; /* Square punctuation */ - square-quotes: 8; /* Square quotes */ - circled-characters: 5; /* Circled characters */ - squared-characters: 6; /* Squared characters */ - } -} -@font-feature-values Inter { - @character-variant { - cv01: 1; - cv02: 2; - cv03: 3; - cv04: 4; - cv05: 5; - cv06: 6; - cv07: 7; - cv08: 8; - cv09: 9; - cv10: 10; - cv11: 11; - cv12: 12; - cv13: 13; - alt-1: 1; /* Alternate one */ - alt-3: 9; /* Flat-top three */ - open-4: 2; /* Open four */ - open-6: 3; /* Open six */ - open-9: 4; /* Open nine */ - lc-l-with-tail: 5; /* Lower-case L with tail */ - simplified-u: 6; /* Simplified u */ - alt-double-s: 7; /* Alternate German double s */ - uc-i-with-serif: 8; /* Upper-case i with serif */ - uc-g-with-spur: 10; /* Capital G with spur */ - single-story-a: 11; /* Single-story a */ - compact-lc-f: 12; /* Compact f */ - compact-lc-t: 13; /* Compact t */ - } - @styleset { - ss01: 1; - ss02: 2; - ss03: 3; - ss04: 4; - ss05: 5; - ss06: 6; - ss07: 7; - ss08: 8; - open-digits: 1; /* Open digits */ - disambiguation: 2; /* Disambiguation (with zero) */ - disambiguation-except-zero: 4; /* Disambiguation (no zero) */ - round-quotes-and-commas: 3; /* Round quotes & commas */ - square-punctuation: 7; /* Square punctuation */ - square-quotes: 8; /* Square quotes */ - circled-characters: 5; /* Circled characters */ - squared-characters: 6; /* Squared characters */ - } -} -@font-feature-values InterDisplay { - @character-variant { - cv01: 1; - cv02: 2; - cv03: 3; - cv04: 4; - cv05: 5; - cv06: 6; - cv07: 7; - cv08: 8; - cv09: 9; - cv10: 10; - cv11: 11; - cv12: 12; - cv13: 13; - alt-1: 1; /* Alternate one */ - alt-3: 9; /* Flat-top three */ - open-4: 2; /* Open four */ - open-6: 3; /* Open six */ - open-9: 4; /* Open nine */ - lc-l-with-tail: 5; /* Lower-case L with tail */ - simplified-u: 6; /* Simplified u */ - alt-double-s: 7; /* Alternate German double s */ - uc-i-with-serif: 8; /* Upper-case i with serif */ - uc-g-with-spur: 10; /* Capital G with spur */ - single-story-a: 11; /* Single-story a */ - compact-lc-f: 12; /* Compact f */ - compact-lc-t: 13; /* Compact t */ - } - @styleset { - ss01: 1; - ss02: 2; - ss03: 3; - ss04: 4; - ss05: 5; - ss06: 6; - ss07: 7; - ss08: 8; - open-digits: 1; /* Open digits */ - disambiguation: 2; /* Disambiguation (with zero) */ - disambiguation-except-zero: 4; /* Disambiguation (no zero) */ - round-quotes-and-commas: 3; /* Round quotes & commas */ - square-punctuation: 7; /* Square punctuation */ - square-quotes: 8; /* Square quotes */ - circled-characters: 5; /* Circled characters */ - squared-characters: 6; /* Squared characters */ - } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭─────────────────────────────────╮ -/ │ _ _ _ │ -/ │ ___| |_ _ _| (_)_ __ __ _ │ -/ │ / __| __| | | | | | '_ \ / _` | │ -/ │ \__ \ |_| |_| | | | | | | (_| | │ -/ │ |___/\__|\__, |_|_|_| |_|\__, | │ -/ │ |___/ |___/ │ -/ ╰─────────────────────────────────╯ -/ styling - regular styling for regular/global html elements as well as the color schemes */ - -:root { - --pagefind-ui-font: var(--font-family); - --pagefind-ui-primary: var(--foreground); - --pagefind-ui-text: var(--foreground); - --pagefind-ui-background: var(--background); - --pagefind-ui-border: var(--accent); - --pagefind-ui-tag: var(--background); - --site-border: .1rem solid var(--border); -} - -/* -custom color scheme, based off of both Ayu Light & Dark and Catppuccin Latte & Mocha. -it's basically a mix and mash of the both of them together, and slightly modified. -it doesn't have a name, call it "synth.download color scheme official real" -*/ - -:root { - /* base colors */ - --background: #fafafa; - --foreground: #3d454d; - --selection: #f0eee4; - --comment: #abb0b6; - --accent: #fd9e1a; - - /* original ayu colors */ - --orange: #ff9940; - --green: #86b300; - --blue: #4cbf99; - --purple: #a37acc; - --red: #ec3838; - - /* extended catppuccin based colors */ - --flamingo: #ff7d7d; - --rosewater: #eca69a; - --pink: #ff8adb; - --mauve: #ba8aff; - --maroon: #e06c75; - --peach: #ffac6b; - --yellow: #e5c07b; - --teal: #2bbac5; - --sky: #3eacce; - --sapphire: #4db5d0; - --lavender: #7881ce; - - /* ui accent colors */ - --ui-orange: #fa8d3e; - --ui-green: #91b362; - --ui-blue: #6994bf; - --ui-purple: #7e57c2; - --ui-teal: #56c2c0; - --ui-lavender: #9d8cdb; - - /* misc. */ - --border: #e4e4e4; - --shadow: rgba(0, 0, 0, 0.1); - --hover: rgba(0, 0, 0, 0.05); - --active: rgba(0, 0, 0, 0.1); - --focus: #86b300; -} - -@media (prefers-color-scheme: dark) { - :root { - /* base colors */ - --background: #0a0e14; - --foreground: #d8d6d2; - --selection: #253340; - --comment: #5c6773; - --accent: #e6b450; - - /* original ayu colors */ - --orange: #ffb454; - --green: #aad94c; - --blue: #59c2ff; - --purple: #d2a6ff; - --red: #f0646b; - - /* extended catppuccin based colors */ - --flamingo: #f2cdcd; - --rosewater: #f5e0dc; - --pink: #ffc9e3; - --mauve: #cba6f7; - --maroon: #eba0ac; - --peach: #ffcca8; - --yellow: #f9e2af; - --teal: #8ddedc; - --sky: #89dceb; - --sapphire: #74c7ec; - --lavender: #b4befe; - - /* ui accent colors */ - --ui-orange: #e6b450; - --ui-green: #aad94c; - --ui-blue: #39bae6; - --ui-purple: #a37acc; - --ui-teal: #7adbd3; - --ui-lavender: #ada0f3; - - /* misc. */ - --border: #1a1f29; - --shadow: rgba(0, 0, 0, 0.4); - --hover: rgba(255, 255, 255, 0.05); - --active: rgba(255, 255, 255, 0.1); - --focus: #ffb454; - } -} - -/* theme classes for manual theme selection */ -html[data-theme="light"] { - /* base colors */ - --background: #fafafa; - --foreground: #3d454d; - --selection: #f0eee4; - --comment: #abb0b6; - --accent: #ffaa33; - - /* original ayu colors */ - --orange: #ff9940; - --green: #86b300; - --blue: #4cbf99; - --purple: #a37acc; - --red: #ec3838; - - /* extended catppuccin based colors */ - --flamingo: #ff7d7d; - --rosewater: #eca69a; - --pink: #ff8adb; - --mauve: #ba8aff; - --maroon: #e06c75; - --peach: #ffac6b; - --yellow: #e5c07b; - --teal: #2bbac5; - --sky: #3eacce; - --sapphire: #4db5d0; - --lavender: #7881ce; - - /* ui accent colors */ - --ui-orange: #fa8d3e; - --ui-green: #91b362; - --ui-blue: #6994bf; - --ui-purple: #7e57c2; - --ui-teal: #56c2c0; - --ui-lavender: #9d8cdb; - - /* misc. */ - --border: #e4e4e4; - --shadow: rgba(0, 0, 0, 0.1); - --hover: rgba(0, 0, 0, 0.05); - --active: rgba(0, 0, 0, 0.1); - --focus: #86b300; -} - -html[data-theme="dark"] { - /* base colors */ - --background: #0a0e14; - --foreground: #d8d6d2; - --selection: #253340; - --comment: #5c6773; - --accent: #e6b450; - - /* original ayu colors */ - --orange: #ffb454; - --green: #aad94c; - --blue: #59c2ff; - --purple: #d2a6ff; - --red: #f0646b; - - /* extended catppuccin based colors */ - --flamingo: #f2cdcd; - --rosewater: #f5e0dc; - --pink: #ffc9e3; - --mauve: #cba6f7; - --maroon: #eba0ac; - --peach: #ffcca8; - --yellow: #f9e2af; - --teal: #8ddedc; - --sky: #89dceb; - --sapphire: #74c7ec; - --lavender: #b4befe; - - /* ui accent colors */ - --ui-orange: #e6b450; - --ui-green: #aad94c; - --ui-blue: #39bae6; - --ui-purple: #a37acc; - --ui-teal: #7adbd3; - --ui-lavender: #ada0f3; - - /* misc. */ - --border: #1a1f29; - --shadow: rgba(0, 0, 0, 0.4); - --hover: rgba(255, 255, 255, 0.05); - --active: rgba(255, 255, 255, 0.1); - --focus: #ffb454; -} - -/* ---------------------------------- -- background wallpaper, global font - ----------------------------------- */ - -html { - background: var(--background) linear-gradient(var(--background) 50%, color-mix(in srgb, var(--accent) 25%, var(--background)) 50%); - background-attachment: fixed; -} - -body { - background: linear-gradient(var(--background), color-mix(in srgb, var(--accent) 25%, var(--background))); - min-height: calc(100vh - 4rem); - font-family: var(--font-family); - font-size: 1.125rem; - text-transform: lowercase; - margin: unset !important; - /* idk why it does that */ -} - -/* text formatting and config stuff */ - -/* headings */ -h1, -h1 a { - color: var(--foreground); - font-size: 2rem; - text-decoration: none; -} - -/* apparently having more than one h1 is against web standards -but i prefer how it looks so i just use the same styling again */ -h2, -h2 a { - color: var(--foreground); - font-size: 2rem; - text-decoration: none; -} - -h3, -h3 a { - font-size: 2rem; -} - -/* text */ -p, -li, -button { - font-size: 1.125rem; - - [class^="tabler--"] { - transform: scale(1.13); - } -} - -/* links should look good i think */ -a { - font-size: 1.125rem; - color: var(--accent); - transition: 0.2s; -} - -a:hover { - transition: 0.2s; - text-shadow: 0em 0em 0.25em var(--accent); -} - -/* smol text */ -small, -small a { - font-size: 0.875rem; -} - -/* lists need some styling */ -li { - margin-left: -1em; - padding-bottom: 18px; -} - -/* gay ass text */ -.rainbow { - animation: 2s linear infinite rainbow; - -webkit-animation: 2s linear infinite rainbow; - -moz-animation: 2s linear infinite rainbow; -} - -/* heading 1 is also clickable */ -h1 a:hover { - text-decoration: underline; -} - -/* the tabler icons svgs styling */ -.tabler-icon, -.icon .icon-tabler { - width: 1.3rem; - height: 1.3rem; - padding-bottom: .2rem; - vertical-align: middle !important; - color: var(--foreground) !important; -} - -/* code (enforced monospace) */ -.code { - font-family: 'JetBrains Mono', monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif !important; -} - -/* caption styled text */ -.caption { - font-size: small; - opacity: .8; - - .section { - font-size: smaller; - opacity: .9; - } -} - - /* Dashed border */ -hr.dashed { - border-top: .1rem dashed var(--border); -} - -/* Dotted border */ -hr.dotted { - border-top: .1rem dotted var(--border); -} - -/* Solid border */ -hr.solid { - border-top: .1rem solid var(--border); -} - -/* Rounded border */ -hr.rounded { - border-top: .2rem solid var(--border); - border-radius: 5px; -} - -/* audio */ -audio { - border-radius: 3rem; -} - -/* summary styling */ -summary { - display: flex; -} - -/* --------------- -- alt text popup - ---------------- */ - -.alt-popup { - position: fixed; - text-transform: none !important; - background-color: color-mix(in srgb, var(--background) 85%, transparent); - backdrop-filter: blur(.5rem); - color: var(--foreground); - padding: .5rem; - border: solid .01rem var(--accent); - border-radius: .5rem; - font-size: 1rem; - max-width: 30rem; - z-index: 1000; - pointer-events: none; - opacity: 0; - transition: opacity 0.4s; -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭──────────────────────────────────────╮ -/ │ _ │ -/ │ _ __ __ ___ _| |__ __ _ _ __ │ -/ │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │ -/ │ | | | | (_| |\ V /| |_) | (_| | | │ -/ │ |_| |_|\__,_| \_/ |_.__/ \__,_|_| │ -/ ╰──────────────────────────────────────╯ -/ navbar - styling the navigation bar / panel that sits on the top of the page at all times */ - -.navbar { - display: flex; - flex-direction: row; - max-height: 1.8em !important; - max-width: 100%; - min-height: 1.8em !important; - min-width: 100%; - position: fixed; - top: 0 !important; - padding: .4rem 0 .4rem 0; - z-index: 100; - - align-content: center; - color: var(--foreground); - vertical-align: middle; - - transition: .2s background-color; - - .nav-base { - padding: 0px .2em !important; - max-width: fit-content; - align-content: center; - outline: .13rem solid var(--border); - border-radius: 1rem; - height: 1.9rem; - } - - .nav-left { - margin-left: .6rem !important; - padding: 0px .5rem .1rem !important; - text-decoration: unset !important; - } - - .nav-baselink { - background-color: var(--accent); - color: var(--background); - margin-left: .4rem !important; - outline-color: color-mix(in srgb, var(--accent) 60%, transparent); - padding: .13rem; - - .synth-icon { - height: 2rem; - margin-right: 1rem; - pointer-events: none; - transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.1rem); - transition: all .2s ease-out; - width: 2rem; - } - } - - .nav-baselink:hover { - .synth-icon { - transition: all .2s ease-out; - transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg); - } - } - - .nav-desktop { - overflow: hidden; - } - - .nav-mobile-menu { - display: none; - } - - .nav-links { - background-color: var(--background); - color: var(--foreground); - overflow: clip; - position: relative; - text-shadow: none; - transition: all .3s; - - .text { - opacity: 0; - position: absolute; - transition: all .3s; - pointer-events: none; - white-space: nowrap; - } - - [class^="tabler--"] { - transform: scale(1.1); - transition: all .3s; - } - } - - .nav-links:hover { - padding-right: 9rem !important; - padding-bottom: 7rem !important; - transition: all .3s; - - .text { - opacity: 1; - transform: scale(1.5) translateX(-.4rem); - transition: all .3s; - } - - [class^="tabler--"] { - transform: scale(5) translateY(.9rem) translateX(.4rem) rotate(10deg); - transition: all .3s; - } - } - - .nav-home:hover { - background-color: color-mix(in srgb, var(--accent) 20%, var(--background)); - color: var(--foreground); - outline-color: color-mix(in srgb, var(--accent) 60%, transparent); - } - - .nav-notebook:hover { - background-color: color-mix(in srgb, var(--purple) 20%, var(--background)); - color: var(--foreground); - outline-color: color-mix(in srgb, var(--purple) 60%, transparent); - - .text { - transform: scale(1.5) translateX(0rem); - } - } - - .nav-webmaster:hover { - background-color: color-mix(in srgb, var(--green) 20%, var(--background)); - color: var(--foreground); - outline-color: color-mix(in srgb, var(--green) 60%, transparent); - - .text { - transform: scale(1.1) translateX(-.8rem); - } - } - - .nav-donate:hover { - background-color: color-mix(in srgb, var(--pink) 20%, var(--background)); - color: var(--foreground); - outline-color: color-mix(in srgb, var(--pink) 60%, transparent); - - .text { - transform: scale(1.5) translateX(-.2rem); - } - } - - .nav-right { - padding: 0px .5rem .1rem !important; - margin-right: .6rem !important; - } - - .nav-settings { - background-color: var(--accent); - color: var(--background); - cursor: pointer; - margin-left: auto !important; - outline-color: color-mix(in srgb, var(--accent) 60%, transparent); - padding: unset !important; /* unset the padding for the button itself so the button can take the padding to make the entire button clickable */ - - input[type="checkbox"] { - left: -100vw; - position: absolute; - } - - label { - cursor: pointer; - overflow: hidden !important; - padding: .3rem .5rem !important; - position: relative; - - [class^="tabler--"] { - padding: 0 .5rem !important; - pointer-events: none; - transform: translateY(.1rem) scale(1.5); - transition: all 1.3s; - } - } - - label:hover { - [class^="tabler--"] { - transform: translateY(.1rem) scale(1.5) rotate(360deg); - transition: all 1.3s; - } - } - - ul { - background-color: var(--background); - border-radius: 1rem; - border: var(--accent) solid .15rem; - cursor: initial !important; /* reset the cursor otherwise it uses the pointer cursor */ - margin-top: 1.2rem !important; - max-height: 27rem; - max-width: 17rem; - min-height: 27rem; - min-width: 17rem; - overflow: scroll; - position: absolute; - right: .4rem; - visibility: hidden; - - /* inital "hidden" state, used for providing animation when activated */ - opacity: 0; - scale: .5; - transform-origin: top right; - transition: opacity .3s, scale .3s, visibility .3s; - - li { - border-radius: 1rem; - color: var(--foreground); - list-style-type: none; - margin-left: -2rem; - padding: .4rem; - - span { - padding: .1rem 0px .1rem 0px !important; - } - - h2 { - margin: 0 !important; - } - } - } - - input[type="checkbox"]:checked ~ ul { - /* makes the menu visibile when activated and makes it appear from the top right */ - opacity: 1; - scale: 1; - transition: opacity .3s, scale .3s, visibility .3s; - visibility: visible; - } - } - - .nav-systray { - background-color: var(--background); - color: var(--foreground); - padding: 0px .1rem; - min-width: 6.45rem; - margin-right: .4rem !important; - } - - a, - p { - margin: unset !important; - } - - small { - opacity: .7; - } - - svg { - color: var(--foreground) !important; - } -} - -.navbar:hover { - transition: .2s all; - background-color: color-mix(in srgb, var(--accent) 40%, transparent); - border-bottom: solid .2rem var(--accent); -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭────────────────────────────────────────────╮ -/ │ _ _ │ -/ │ __ _(_)_ __ __| | _____ _____ │ -/ │ \ \ /\ / / | '_ \ / _` |/ _ \ \ /\ / / __| │ -/ │ \ V V /| | | | | (_| | (_) \ V V /\__ \ │ -/ │ \_/\_/ |_|_| |_|\__,_|\___/ \_/\_/ |___/ │ -/ ╰────────────────────────────────────────────╯ -/ windows - related styling for the windows on pages */ - -.window { - summary { - display: inline-flex; - min-width: 100%; - background-color: color-mix(in srgb, var(--accent) 20%, var(--background)); - opacity: .8; - text-align: center; - vertical-align: middle; - overflow: clip; - transition: .2s opacity; - - div:first-child { - background: color-mix(in srgb, var(--accent) 40%, transparent); - padding: .4rem .4rem .2rem 1rem; - border-right: .2rem solid var(--accent); - border-bottom: .2rem solid var(--accent); - border-bottom-right-radius: 1rem; - margin-bottom: -.2rem; - - span { - background-color: var(--foreground); - } - } - - a { - padding: .3rem 0rem .3rem .5rem; - text-decoration: none; - color: var(--foreground); - } - - a:hover { - text-decoration: underline; - } - - [class^="tabler--"] { - transform: scale(1.1); - } - - div:nth-child(3) { - margin-left: auto !important; - padding: .2rem .5rem .2rem 0rem; - - span { - text-align: center; - vertical-align: middle; - background-color: var(--foreground); - } - - /* maximize button (which does nothing) */ - span:nth-child(2) { - opacity: .6; - cursor: not-allowed; - } - } - - /* close button */ - div:nth-child(4) { - background: color-mix(in srgb, var(--accent) 40%, transparent); - padding: .4rem .5rem .2rem .6rem; - border-left: .2rem solid var(--accent); - border-bottom: .2rem solid var(--accent); - border-bottom-left-radius: 1rem; - margin-bottom: -.2rem; - color: var(--foreground); - - transition: background .2s; - transition: background-color .2s; - } - - /* close button (animated on hover) */ - div:nth-child(4):hover { - background: var(--red); - - transition: background .2s; - - span { - background-color: var(--background); - transition: background-color .2s; - } - } - } - - main, - section, - article { - padding: .8rem; - } - - background-color: var(--background); - color: var(--foreground); - - border: var(--accent) solid .15rem; - border-radius: .6rem; - - max-width: 60em; - overflow: clip; - - margin-left: auto; - margin-right: auto; - margin-bottom: 2em; - - transition: .2s box-shadow; - animation-fill-mode: backwards; - - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; -} - -/* window styling when hovered */ -.window:hover { - summary { - opacity: 1; - transition: .2s opacity; - } -} - -/* window styling when open (default state) */ -.window[open] { - summary { - opacity: 1; - border-bottom: .1rem solid var(--accent); - - transition: .2s opacity; - } - - border-radius: 2rem .6rem 2rem .6rem; -} - -.window:hover { - box-shadow: var(--accent) 0px 0px 0px .3rem; - - transition: .2s box-shadow; -} - -/* window when its the first one on the page */ -.window:nth-child(2) { - margin-top: 5rem; - - animation: .3s ease-out .2s 1 window-appear; - animation-fill-mode: backwards; -} - -/* rest of the windows if they exist, to finish the rest of the animations */ -.window:nth-child(3) { - animation: .3s ease-out .4s 1 window-appear; - animation-fill-mode: backwards; -} - -.window:nth-child(4) { - animation: .3s ease-out .6s 1 window-appear; - animation-fill-mode: backwards; -} - -.window:nth-child(5) { - animation: .3s ease-out .8s 1 window-appear; - animation-fill-mode: backwards; -} - -.window:nth-child(6) { - animation: .3s ease-out 1s 1 window-appear; - animation-fill-mode: backwards; -} - -.window:nth-child(7) { - animation: .3s ease-out 1.2s 1 window-appear; - animation-fill-mode: backwards; -} - -.window:nth-child(8) { - animation: .3s ease-out 1.4s 1 window-appear; - animation-fill-mode: backwards; -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭────────────────────────────────╮ -/ │ __ _ │ -/ │ / _| ___ ___ | |_ ___ _ __ │ -/ │ | |_ / _ \ / _ \| __/ _ \ '__| │ -/ │ | _| (_) | (_) | || __/ | │ -/ │ |_| \___/ \___/ \__\___|_| │ -/ ╰────────────────────────────────╯ -/ footer - related styling for the footer window on all pages */ - -footer { - max-width: 30em; - margin-left: auto; - margin-right: auto; - - details>summary>a { - padding: .3rem 0rem .3rem 1rem !important; - } - - main, - section, - article { - padding: 1rem !important; - } - - .fediring { - a { - display: inline-grid; - font-size: 1.5rem; - color: var(--green); - margin-bottom: .5em; - vertical-align: bottom; - } - - [href="https://fediring.net"] { - color: var(--foreground); - background: color-mix(in srgb, var(--purple) 25%, transparent); - padding: 0px 10px 0px 10px; - border-radius: 5px; - } - - [href="https://keithhacks.cyou/furryring.php"] { - color: var(--foreground); - background: color-mix(in srgb, var(--sapphire) 25%, transparent); - padding: 0px 10px 0px 10px; - border-radius: 5px; - } - - [href="https://stellophiliac.github.io/roboring"] { - color: var(--foreground); - background: color-mix(in srgb, var(--comment) 25%, transparent); - padding: 0px 10px 0px 10px; - border-radius: 5px; - } - - [href*="prev"] { - background: color-mix(in srgb, var(--orange) 25%, transparent); - padding: 5px 6px; - border-radius: 5px; - - span { - background-color: var(--orange) !important; - } - } - - [href*="next"] { - background: color-mix(in srgb, var(--green) 25%, transparent); - padding: 5px 6px; - border-radius: 5px; - - span { - background-color: var(--green) !important; - } - } - } - - p, - a { - text-align: center; - font-size: 0.938rem; - margin: .2em 0px .2em; - text-decoration: none; - } - - img { - padding-top: 18px; - max-width: 30%; - display: flex; - margin-left: auto; - margin-right: auto; - transition: 1s animation; - } - - img:hover { - animation: spin 5s infinite linear; - } - - .inner-footer { - text-align: center; - padding-top: 14px; - padding-bottom: 14px; - - a { - width: 3rem; - height: 3rem; - display: inline-block; - vertical-align: middle; - align-content: center; - border-radius: .5rem; - - span { - transform: scale(1.58); - } - } - } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭───────────────────────────────────────────────────────╮ -/ │ _ _ _ │ -/ │ __ _ _ __ (_)_ __ ___ __ _| |_(_) ___ _ __ ___ │ -/ │ / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __| │ -/ │ | (_| | | | | | | | | | | (_| | |_| | (_) | | | \__ \ │ -/ │ \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/ │ -/ ╰───────────────────────────────────────────────────────╯ -/ animations - reusable css animations */ - -@keyframes window-appear { - 0% { - opacity: 0; - transform: scale(0.5, 0.5); - } - - 100% { - opacity: 1; - transform: scale(1, 1); - } -} - -@keyframes rainbow { - 0% { - filter: hue-rotate(0deg) contrast(150%) saturate(150%); - } - - 100% { - filter: hue-rotate(360deg) contrast(150%) saturate(150%); - } -} - -@keyframes bg-gradient { - 0% { - background-position: 0% 27% - } - - 50% { - background-position: 100% 74% - } - - 100% { - background-position: 0% 27% - } -} - -@keyframes opacity-blink { - 0% { opacity: 0% } - 5% { opacity: 100% } - 45% { opacity: 100% } - 50% { opacity: 0% } - 100% { opacity: 0% } -} - -@keyframes opacity-blink-reverse { - 0% { opacity: 100% } - 5% { opacity: 0% } - 45% { opacity: 0% } - 50% { opacity: 100% } - 100% { opacity: 100% } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭────────────────────────────────────────╮ -/ │ ____ _ _ │ -/ │ / __ \ _ __ ___ ___ __| (_) __ _ │ -/ │ / / _` | '_ ` _ \ / _ \/ _` | |/ _` | │ -/ │ | | (_| | | | | | | __/ (_| | | (_| | │ -/ │ \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │ -/ │ \____/ │ -/ ╰────────────────────────────────────────╯ -/ @media / at-media - styling depending on browser configuration / settings -/ other sorts of "Theming Jank" also goes in here for the sake of uniforming everything */ - -/* disable certain animations if user has animations disabled on their system */ - -@media (prefers-reduced-motion: reduce) { - body { - background: var(--background) !important; - animation: unset !important; - -moz-animation: unset !important; - -webkit-animation: unset !important; - } - - /* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */ - * { - transition: none !important; - animation: unset !important; - -moz-animation: unset !important; - -webkit-animation: unset !important; - } - - /* fedi icon on /me should keep its animation (temp, find a better solution later) */ - .fedi-icon { - animation: opacity-blink 4s infinite !important; - } - .fedi-icon-2 { - animation: opacity-blink-reverse 4s infinite !important; - } -} - -/* different styling for elements in dark mode - must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */ - -@media (prefers-color-scheme: dark) { - html:not([data-theme="light"]) { - .navbar { - .nav-home:hover { - background-color: var(--accent); - color: var(--background); - } - .nav-notebook:hover { - background-color: var(--purple); - color: var(--background); - } - .nav-webmaster:hover { - background-color: var(--green); - color: var(--background); - } - .nav-donate:hover { - background-color: var(--pink); - color: var(--background); - } - } - } -} - -html[data-theme="dark"] { - .navbar { - .nav-home:hover { - background-color: var(--accent); - color: var(--background); - } - .nav-notebook:hover { - background-color: var(--purple); - color: var(--background); - } - .nav-webmaster:hover { - background-color: var(--green); - color: var(--background); - } - .nav-donate:hover { - background-color: var(--pink); - color: var(--background); - } - } -} - -/* modify widths and spacing depending on the size of the display */ - -@media screen and (max-width: 1083px) { - .navbar { - .nav-desktop { - display: none !important; - } - - .nav-mobile-menu { - display: inline-block; - max-width: 3rem; - min-width: 3rem; - position: relative; - - input[type="checkbox"] { - left: -100vw; - position: absolute; - } - - label { - border-radius: 1rem; - cursor: pointer; - display: inline-block; - left: -.5rem; - margin-right: .1rem; - max-height: 2rem; - max-width: 3rem; - min-height: 2rem; - min-width: 3rem; - overflow: hidden !important; - padding-right: 1rem; - position: relative; - - .synth-icon { - transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.1rem); - } - } - - label:hover { - .synth-icon { - transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.2rem) rotate(10deg); - } - } - - ul { - background-color: var(--background); - border-radius: 1rem; - border: var(--accent) solid .15rem; - height: max-content; - left: 0; - margin-top: .4rem !important; - position: absolute; - visibility: hidden; - width: max-content; - - /* inital "hidden" state, used for providing animation when activated */ - opacity: 0; - scale: .5; - transform-origin: top left; - transition: opacity .3s, scale .3s, visibility .3s; - - li { - border-radius: 1rem; - list-style-type: none; - margin: .5rem .5rem .5rem -1.9rem; - overflow: clip; - padding: .7rem; - transition: .2s all; - - a { - color: var(--foreground); - text-decoration: none; - text-shadow: unset; - } - - [class^="tabler--"] { - padding-right: .3em; - transition: .2s all; - } - } - - li:hover { - transition: .2s all; - - [class^="tabler--"] { - transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg); - transition: .2s all; - } - } - - .nav-home:hover { - background-color: color-mix(in srgb, var(--accent) 20%, transparent); - a { - color: var(--foreground); - } - } - .nav-notebook:hover { - background-color: color-mix(in srgb, var(--purple) 20%, transparent); - a { - color: var(--foreground); - } - } - .nav-webmaster:hover { - background-color: color-mix(in srgb, var(--green) 20%, transparent); - a { - color: var(--foreground); - } - } - .nav-donate:hover { - background-color: color-mix(in srgb, var(--pink) 20%, transparent); - a { - color: var(--foreground); - } - } - } - - input[type="checkbox"]:checked ~ ul { - /* makes the menu visibile when activated and makes it appear from the top right */ - opacity: 1; - scale: 1; - transition: opacity .3s, scale .3s, visibility .3s; - visibility: visible; - } - } - - .nav-links { - display: none !important; - } - - .nav-settings { - span { - padding: 0 .4rem !important; - } - } - } - - .window:not(#footer) { - summary { - div:first-child { - padding: .3rem .4rem .3rem .4rem; - } - - div:nth-child(3) { - display: none !important; - } - - div:nth-child(4) { - margin-left: auto !important; - } - } - - animation: unset !important; - - main, - section, - article { - padding: .5rem; - } - - border-top: var(--accent) solid .15rem; - border-bottom: var(--accent) solid .15rem; - border-left: unset !important; - border-right: unset !important; - border-radius: unset !important; - - margin-bottom: .8em; - } - - /* window when its the first one on the page */ - .window:nth-child(2) { - margin-top: 4rem; - } - - @media (prefers-color-scheme: dark) { - html:not([data-theme="light"]) { - .navbar .nav-mobile-menu ul { - .nav-home:hover a { - color: var(--accent); - } - .nav-notebook:hover a { - color: var(--purple); - } - .nav-webmaster:hover a { - color: var(--green); - } - .nav-donate:hover a { - color: var(--pink); - } - } - } - } - - html[data-theme="dark"] { - .navbar .nav-mobile-menu ul { - .nav-home:hover a { - color: var(--accent); - } - .nav-notebook:hover a { - color: var(--purple); - } - .nav-webmaster:hover a { - color: var(--green); - } - .nav-donate:hover a { - color: var(--pink); - } - } - } -} - -@media screen and (max-width: 540px) { - details#footer.window { - border-top: var(--accent) solid .15rem; - border-bottom: var(--accent) solid .15rem; - border-left: unset !important; - border-right: unset !important; - border-radius: unset !important; - - margin-bottom: .8em; - } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭────────────────────────────────────────────╮ -/ │ __ _ _ │ -/ │ _ __ __ _ __ _ ___ / _(_)_ __ __| | │ -/ │ | '_ \ / _` |/ _` |/ _ \ |_| | '_ \ / _` | │ -/ │ | |_) | (_| | (_| | __/ _| | | | | (_| | │ -/ │ | .__/ \__,_|\__, |\___|_| |_|_| |_|\__,_| │ -/ │ |_| |___/ │ -/ ╰────────────────────────────────────────────╯ -/ pagefind - pagefind search widget styling */ - -/* #search { - padding: .2rem; -} */ - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭──────────────────────────────╮ -/ │ _ │ -/ │ | |__ ___ _ __ ___ ___ │ -/ │ | '_ \ / _ \| '_ ` _ \ / _ \ │ -/ │ | | | | (_) | | | | | | __/ │ -/ │ |_| |_|\___/|_| |_| |_|\___| │ -/ ╰──────────────────────────────╯ -/ home - specific styling for the main synth.download home page (index.md) */ - -#site.window.home { - - main, - section { - a:nth-child(2) { - cursor: default; - } - - #logo { - width: 40rem; - height: auto; - line-break: strict; - margin-bottom: 0.5rem; - text-align: center; - cursor: default; - } - - h1 { - margin-top: -1rem; - margin-bottom: 1px; - } - - p { - margin-top: 3px; - } - - ul { - text-align: left; - - li a { - text-decoration: none !important; - } - - li a:hover { - text-decoration: underline !important; - } - } - - text-align: center; - } -} - -/* - buttons section - */ - -#buttons.window.home section { - text-align: center; - font-size: 0px; - - img { - margin-right: 5px; - image-rendering: auto; - image-rendering: crisp-edges; - image-rendering: pixelated; - transition: transform 0.2s; - } - - img:hover { - transform: scale(2); - } -} - -@media screen and (max-width: 59em) { - - #site.window.home>main, - #site.window.home>section { - #logo { - max-width: 100%; - } - } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭─────────────────────────────────────╮ -/ │ /\/| │ -/ │ |/\/___ _ __ ___ _____ ___ _ │ -/ │ / __| '_ \ / _ \/ _ \ \/ / | | | │ -/ │ \__ \ | | | __/ __/> <| |_| | │ -/ │ |___/_| |_|\___|\___/_/\_\\__, | │ -/ │ |___/ │ -/ ╰─────────────────────────────────────╯ -/ ~sneexy - breeeep! my page! slooosh~ */ - -/* my page has goop in html to set goopy colors */ -html[page-is="goopy"] { - --accent: #00d131 !important; - - #sneexy > section { - #logo { - width: 40rem; - height: auto; - } - - h1 #pfp { - width: auto; - height: 6rem; - - vertical-align: middle; - transition: transform .2s; - } - - h1 #pfp:hover { - transform: scale(2); - } - - .selfinfo { - display: grid; - padding-top: 5px; - grid-template-areas: - "pronouns names"; - div { - text-align: left; - border-radius: 1em; - padding: .7em 1em; - ul { - padding-left: 1em; - } - li { - padding-bottom: 6px !important; - list-style: none; - } - } - div:first-child { - background-color: color-mix(in srgb, var(--yellow) 15%, transparent); - border: var(--site-border); - } - div:last-child { - background-color: color-mix(in srgb, var(--sapphire) 15%, transparent); - border: var(--site-border); - margin-left: 1.5em; - } - } - - h1 { - margin-bottom: 1px; - } - - p { - margin-top: 3px; - } - - text-align: center; - } - - /* socials and links sections */ - .socials-contacts-list { - a { - width: 3rem; - height: 3rem; - display: inline-block; - vertical-align: middle; - align-content: center; - text-align: center; - border-radius: .5rem; - - span { - transform: scale(1.58) translateY(.07rem); - } - } - - .fedi-icon { - anchor-name: --fedi-icon; - animation: opacity-blink 4s infinite; - } - - .fedi-icon-2 { - position-anchor: --fedi-icon; - position: absolute; - margin-left: -3.681rem; - z-index: 2; - animation: opacity-blink-reverse 4s infinite; - } - } - - /* sharkey iframe embed */ - #links > section > iframe { - display: flex; - margin-top: 1rem; - margin-bottom: .3crem; - margin-left: auto; - margin-right: auto; - - border: var(--accent) solid .15rem !important; - border-radius: .6rem; - transition: .2s box-shadow; - } - - #links > section > iframe:hover { - box-shadow: var(--accent) 0px 0px 0px .3rem; - transition: .2s box-shadow; - } -} - -html[data-theme="light"][page-is="goopy"] { - --accent: #00d131 !important; - - .nav-baselink, .nav-accessibility { - background-color: var(--accent) !important; - color: var(--foreground) !important; - } -} - -html[data-theme="dark"][page-is="goopy"] { - --accent: #65ff88 !important; -} - -/* goop coloring for theme issues stuff */ -@media (prefers-color-scheme: light) { - html[page-is="goopy"] { - .nav-baselink, .nav-accessibility { - background-color: var(--accent) !important; - color: var(--foreground) !important; - } - } -} - -@media (prefers-color-scheme: dark) { - html[page-is="goopy"] { - --accent: #65ff88 !important; - } -} - -@media screen and (max-width: 59em) { - html[page-is="goopy"] { - #sneexy > section { - #logo { - max-width: 100%; - } - - .selfinfo { - grid-template-areas: - "pronouns" - "names"; - div { - text-align: center; - margin-left: auto; - margin-right: auto; - ul { - text-align: left !important; - } - } - div:first-child { - margin-bottom: 1em; - } - div:last-child { - margin-left: auto !important; - } - } - } - - .socials-contacts-list { - text-align: center; - a { - margin-top: .5rem; - margin-bottom: .5rem; - } - } - } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭──────────────────────────────────────────────╮ -/ │ _ _ _ │ -/ │ _ __ ___ | |_ ___| |__ ___ ___ | | __ │ -/ │ | '_ \ / _ \| __/ _ \ '_ \ / _ \ / _ \| |/ / │ -/ │ | | | | (_) | || __/ |_) | (_) | (_) | < │ -/ │ |_| |_|\___/ \__\___|_.__/ \___/ \___/|_|\_\ │ -/ ╰──────────────────────────────────────────────╯ -/ notebook - specific styling for the notebook page where blogish things live */ - -details.notebook.article-category { - overflow: clip; - border-radius: .8rem .4rem .8rem .4rem; - background-color: color-mix(in srgb, var(--accent) 15%, transparent); - padding-bottom: .01rem; - /* weird bug ??? without this there is no space underneath so */ - - summary { - span { - padding-right: .6rem; - } - - padding: .5rem; - background: linear-gradient(color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent) 30%, transparent)); - border-bottom: unset !important; - cursor: pointer; - } - - .article-card { - padding: 1rem; - margin: 1.4rem; - border-radius: 1rem; - border: .1rem solid var(--border); - background-color: var(--background); - - h2 { - margin-top: 0rem !important; - } - - .tags-holder { - margin-top: -.7rem !important; - - a { - margin-top: -1rem !important; - transition: all .2s; - opacity: .9; - padding: .3rem; - border: solid .1rem var(--accent); - border-radius: .4rem; - font-size: .8rem; - } - - a:hover { - opacity: 1; - text-shadow: none; - } - } - - .read { - transition: all .2s; - text-decoration: none; - } - - .read:hover { - transition: all .2s; - text-decoration: underline; - } - } -} - -@media screen and (max-width: 59em) { - details.notebook { - .article-card { - padding: .5rem; - margin: .6rem; - } - } -} - -/* ------------------------------------ -- addition to above (the post pages ) - ------------------------------------- */ - -#information.window { - .post-info { - p { - margin: 0rem !important; - } - - span { - color: var(--ui-green); - opacity: .8; - } - - p:first-child, - p:last-child { - opacity: .5; - } - } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭─────────────────────────╮ -/ │ _ │ -/ │ (_) ___ ___ _ __ ___ │ -/ │ | |/ __/ _ \| '_ \/ __| │ -/ │ | | (_| (_) | | | \__ \ │ -/ │ |_|\___\___/|_| |_|___/ │ -/ ╰─────────────────────────╯ -/ icons - tabler icons done through css, generate via https://icon-sets.iconify.design/tabler */ - -/* ti-accessible */ -.tabler--accessible { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='m10 16.5l2-3l2 3m-2-3v-2l3-1m-6 0l3 1'/%3E%3Ccircle cx='12' cy='7.5' r='.5' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-settings */ -.tabler--settings { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-grid-dots */ -.tabler--grid-dots { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-home */ -.tabler--home { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-user */ -.tabler--user { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-article */ -.tabler--article { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm4 2h10M7 12h10M7 16h10'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-notebook */ -.tabler--notebook { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1m3 0v18m4-14h2m-2 4h2'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-link */ -.tabler--link { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 15l6-6m-4-3l.463-.536a5 5 0 0 1 7.071 7.072L18 13m-5 5l-.397.534a5.07 5.07 0 0 1-7.127 0a4.97 4.97 0 0 1 0-7.071L6 11'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-bell */ -.tabler--bell { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-volume */ -.tabler--volume { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-wifi */ -.tabler--wifi { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 18h.01m-2.838-2.828a4 4 0 0 1 5.656 0m-8.485-2.829a8 8 0 0 1 11.314 0'/%3E%3Cpath d='M3.515 9.515c4.686-4.687 12.284-4.687 17 0'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-battery-filled */ -.tabler--battery-filled { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 6a3 3 0 0 1 2.995 2.824L20 9v.086l.052.019a1.5 1.5 0 0 1 .941 1.25L21 10.5v3a1.5 1.5 0 0 1-.948 1.395l-.052.018V15a3 3 0 0 1-2.824 2.995L17 18H6a3 3 0 0 1-2.995-2.824L3 15V9a3 3 0 0 1 2.824-2.995L6 6z'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-arrow-right */ -.tabler--arrow-right { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-6 6l6-6m-6-6l6 6'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-arrow-left */ -.tabler--arrow-left { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14M5 12l6 6m-6-6l6-6'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-palette */ -.tabler--palette { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 21a9 9 0 0 1 0-18c4.97 0 9 3.582 9 8c0 1.06-.474 2.078-1.318 2.828S17.693 15 16.5 15H14a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21'/%3E%3Cpath d='M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m4-3a1 1 0 1 0 2 0a1 1 0 1 0-2 0m4 3a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-brand-tabler */ -.tabler--brand-tabler { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m8 9l3 3l-3 3m5 0h3'/%3E%3Cpath d='M3 7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-text-size */ -.tabler--text-size { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7V5h13v2m-6-2v14m2 0H8m7-6v-1h6v1m-3-1v7m-1 0h2'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-letter-case */ -.tabler--letter-case { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-minimize */ -.tabler--minimize { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19v-2a2 2 0 0 1 2-2h2M15 5v2a2 2 0 0 0 2 2h2M5 15h2a2 2 0 0 1 2 2v2M5 9h2a2 2 0 0 0 2-2V5'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-maximize */ -.tabler--maximize { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8V6a2 2 0 0 1 2-2h2M4 16v2a2 2 0 0 0 2 2h2m8-16h2a2 2 0 0 1 2 2v2m-4 12h2a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; - } -/* ti-x */ -.tabler--x { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} - -/* ============== */ - -/* ti-corner-down-right */ -.tabler--corner-down-right { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 6v6a3 3 0 0 0 3 3h10l-4-4m0 8l4-4'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-message-chatbot */ -.tabler--message-chatbot { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zM9.5 9h.01m4.99 0h.01'/%3E%3Cpath d='M9.5 13a3.5 3.5 0 0 0 5 0'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-link */ -.tabler--link { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 15l6-6m-4-3l.463-.536a5 5 0 0 1 7.071 7.072L18 13m-5 5l-.397.534a5.07 5.07 0 0 1-7.127 0a4.97 4.97 0 0 1 0-7.071L6 11'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-info-circle */ -.tabler--info-circle { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-3h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-mood-empty */ -.tabler--mood-empty { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m6-2h.01M15 10h.01M9 15h6'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-user-heart */ -.tabler--user-heart { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h.5m7.5 7l3.35-3.284a2.143 2.143 0 0 0 .005-3.071a2.24 2.24 0 0 0-3.129-.006l-.224.22l-.223-.22a2.24 2.24 0 0 0-3.128-.006a2.143 2.143 0 0 0-.006 3.071z'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-heart */ -.tabler--heart { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-thumb-up */ -.tabler--thumb-up { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 11v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1za4 4 0 0 0 4-4V6a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-thumb-down */ -.tabler--thumb-down { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 13V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1za4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2-2l-1-5a2 3 0 0 0-2-2h-7a3 3 0 0 0-3 3'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-universe */ -.tabler--universe { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M7.027 11.477a5 5 0 1 0 5.496-4.45a4.95 4.95 0 0 0-3.088.681'/%3E%3Cpath d='M5.636 5.636a9 9 0 1 0 3.555-2.188'/%3E%3Cpath d='M17 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-6 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-3 4a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-brand-mastodon */ -.tabler--brand-mastodon { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M18.648 15.254C16.832 17.017 12 16.88 12 16.88a18.3 18.3 0 0 1-3.288-.256q1.69 2.977 8.982 2.475c-1.945 2.013-13.598 5.257-13.668-7.636L4 10.309c0-3.036.023-4.115 1.352-5.633C7.023 2.766 12 3.01 12 3.01s4.977-.243 6.648 1.667C19.977 6.195 20 7.274 20 10.31s-.456 4.074-1.352 4.944'/%3E%3Cpath d='M12 11.204V8.278C12 7.02 11.105 6 10 6S8 7.02 8 8.278V13m4-4.722C12 7.02 12.895 6 14 6s2 1.02 2 2.278V13'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-mail */ -.tabler--mail { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='m3 7l9 6l9-6'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-brand-metabrainz */ -.tabler--brand-metabrainz { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7v10l7 4V3zm18 0v10l-7 4V3z'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-brand-lastfm */ -.tabler--brand-lastfm { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 8c-.83-1-1.388-1-2-1s-2 .271-2 2s1.384 2.233 3 3s2.125 1.812 2 3s-1 2-3 2s-3-1-3.5-2s-1.585-4.78-2.497-6a5 5 0 1 0-1 7'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-brand-git */ -.tabler--brand-git { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-4-4a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 8a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1-1V9m3 2l-2-2m-2-2L9.1 5.1'/%3E%3Cpath d='m13.446 2.6l7.955 7.954a2.045 2.045 0 0 1 0 2.892l-7.955 7.955a2.045 2.045 0 0 1-2.892 0l-7.955-7.955a2.045 2.045 0 0 1 0-2.892l7.955-7.955a2.045 2.045 0 0 1 2.892 0z'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-brand-github */ -.tabler--brand-github { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-building-bank */ -.tabler--building-bank { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 21h18M3 10h18M5 6l7-3l7 3M4 10v11m16-11v11M8 14v3m4-3v3m4-3v3'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-article */ -.tabler--article { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm4 2h10M7 12h10M7 16h10'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-rss */ -.tabler--rss { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 4a16 16 0 0 1 16 16M4 11a9 9 0 0 1 9 9'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-robot-face */ -.tabler--robot-face { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 5h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2'/%3E%3Cpath d='M9 16q1.5 1 3 1c1.5 0 2-.333 3-1M9 7L8 3m7 4l1-4m-7 9v-1m6 1v-1'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-note */ -.tabler--notes { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2zm4 2h6m-6 4h6m-6 4h4'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-mood-look-up */ -.tabler--mood-look-up { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m6-4h.01M15 8h.01M11 12h2'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-mood-sad-dizzy */ -.tabler--mood-sad-dizzy { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='M14.5 16.05a3.5 3.5 0 0 0-5 0M8 9l2 2m0-2l-2 2m6-2l2 2m0-2l-2 2'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-arrow-autofit-height */ -.tabler--arrow-autofit-height { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6m6 10v7m0-18v7m-3 8l3 3l3-3M15 6l3-3l3 3'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-currency-dollar */ -.tabler--currency-dollar { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16.7 8A3 3 0 0 0 14 6h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1-2.7-2M12 3v3m0 12v3'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} \ No newline at end of file diff --git a/eleventy.config.js b/eleventy.config.js index 01919b7..5208624 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -4,7 +4,6 @@ import { transform } from "lightningcss"; export default function(eleventyConfig) { eleventyConfig.addPassthroughCopy("assets/"); - eleventyConfig.addPassthroughCopy("styles/"); eleventyConfig.addPassthroughCopy("scripts/"); eleventyConfig.addFilter("cssmin", function (code) { diff --git a/styles/base.css b/styles/base.css deleted file mode 100644 index d0f1f28..0000000 --- a/styles/base.css +++ /dev/null @@ -1,3073 +0,0 @@ -/* ╭──────────────────────────────────────╮ -/ │ _ _ │ -/ │ ___| |_ _ _| | ___ ___ ___ ___ │ -/ │ / __| __| | | | |/ _ \ / __/ __/ __| │ -/ │ \__ \ |_| |_| | | __/| (__\__ \__ \ │ -/ │ |___/\__|\__, |_|\___(_)___|___/___/ │ -/ │ |___/ │ -/ ╰──────────────────────────────────────╯ -/ style.css - synth.download styling featuring these fancy ass thingies because why the hell not */ - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭───────────────────────────────────────────────────────╮ -/ │ _ _ _ _ _ _ │ -/ │ __ _ ___ ___ ___ ___ ___(_) |__ (_) (_) |_ _ _ │ -/ │ / _` |/ __/ __/ _ \/ __/ __| | '_ \| | | | __| | | | │ -/ │ | (_| | (_| (_| __/\__ \__ \ | |_) | | | | |_| |_| | │ -/ │ \__,_|\___\___\___||___/___/_|_.__/|_|_|_|\__|\__, | │ -/ │ |___/ │ -/ ╰───────────────────────────────────────────────────────╯ -/ accessibility - choosable accessibility settings */ - -/* - font settings - */ - -/* jetbrains mono */ -:root:has(#font-jbm:checked) { - --font-family: 'JetBrains Mono', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif; - - .navbar .nav-base.nav-right.nav-systray span { - margin: 0px -.1rem; - } -} - -/* atkinson hyperlegible next */ -:root:has(#font-ahn:checked) { - --font-family: 'Atkinson Hyperlegible Next', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif; -} - -/* inter */ -:root:has(#font-inter:checked) { - --font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif; -} - -/* (browser) sans serif */ -:root:has(#font-sans-serif:checked) { - --font-family: sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui; -} - -/* (browser) serif */ -:root:has(#font-serif:checked) { - --font-family: serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif; -} - -/* (browser) monospace */ -:root:has(#font-monospace:checked) { - --font-family: monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif; -} - -/* - misc - */ - -/* disable forced uncapitalization */ -:root:has(#uncapitalization:checked) { - body { - text-transform: none !important; - } -} - -/* disable background gradient */ -:root:has(#disable-bg:checked) { - body { - background: var(--background) !important; - } -} - -/* disable window animations */ -:root:has(#disable-animations:checked) { - .window { - animation: unset !important; - transition: unset !important; - } - - .window:hover { - transition: unset !important; - animation: unset !important; - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important; - } - - .navbar { - transition: unset !important; - } - - .navbar:hover { - transition: unset !important; - animation: unset !important; - background-color: color-mix(in srgb, var(--accent) 30%, transparent) !important; - } -} - -/* disable custom alt text popup */ -:root:has(#disable-alttext:checked) { - .alt-popup { - display: none !important; - } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭───────────────────────╮ -/ │ __ _ │ -/ │ / _| ___ _ __ | |_ │ -/ │ | |_ / _ \| '_ \| __| │ -/ │ | _| (_) | | | | |_ │ -/ │ |_| \___/|_| |_|\__| │ -/ ╰───────────────────────╯ -/ font - font configuration, stuff, whatever */ - -/* - JetBrains Mono - */ - -@font-face { - font-family: "JetBrains Mono"; - src: local("JetBrains Mono"), - url("/assets/fonts/JetBrainsMono/JetBrainsMono-Regular.woff2") - format("woff"), - local("JetBrainsMono Nerd Font"); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: "JetBrains Mono"; - src: local("JetBrains Mono"), - url("/assets/fonts/JetBrainsMono/JetBrainsMono-Bold.woff2") - format("woff"), - local("JetBrainsMono Nerd Font"); - font-weight: bold; - font-style: bold; -} - -@font-face { - font-family: "JetBrains Mono"; - src: local("JetBrains Mono"), - url("/assets/fonts/JetBrainsMono/JetBrainsMono-Italic.woff2") - format("woff"), - local("JetBrainsMono Nerd Font"); - font-weight: normal; - font-style: italic; -} - -@font-face { - font-family: "JetBrains Mono"; - src: local("JetBrains Mono"), - url("/assets/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.woff2") - format("woff"), - local("JetBrainsMono Nerd Font"); - font-weight: bold; - font-style: italic; -} - -/* font config, Atkinson Hyperlegible Next */ - -@font-face { - font-family: "Atkinson Hyperlegible Next"; - src: local("Atkinson Hyperlegible Next"), - url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Regular.woff2") - format("woff"), - local("JetBrainsMono Nerd Font"); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: "Atkinson Hyperlegible Next"; - src: local("Atkinson Hyperlegible Next"), - url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Bold.woff2") - format("woff"), - local("Atkinson Hyperlegible"); - font-weight: bold; - font-style: bold; -} - -@font-face { - font-family: "Atkinson Hyperlegible Next"; - src: local("Atkinson Hyperlegible Next"), - url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Italic.woff2") - format("woff"), - local("Atkinson Hyperlegible"); - font-weight: normal; - font-style: italic; -} - -@font-face { - font-family: "Atkinson Hyperlegible Next"; - src: local("Atkinson Hyperlegible Next"), - url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-BoldItalic.woff2") - format("woff"), - local("Atkinson Hyperlegible"); - font-weight: bold; - font-style: italic; -} - -/* font config, Inter - original css by Inter, modified by Sneexy */ - -/* Variable fonts usage: -:root { font-family: "Inter", sans-serif; } -@supports (font-variation-settings: normal) { - :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; } -} */ -@font-face { - font-family: InterVariable; - font-style: normal; - font-weight: 100 900; - font-display: swap; - src: url("InterVariable.woff2") format("woff2"); -} -@font-face { - font-family: InterVariable; - font-style: italic; - font-weight: 100 900; - font-display: swap; - src: url("InterVariable-Italic.woff2") format("woff2"); -} - -/* static fonts */ -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 100; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-Thin.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 100; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-ThinItalic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 200; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-ExtraLight.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 200; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-ExtraLightItalic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-Light.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 300; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-LightItalic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-Regular.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 400; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-Italic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-Medium.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 500; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-MediumItalic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-SemiBold.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 600; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-Bold.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 700; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-BoldItalic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-ExtraBold.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 800; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-ExtraBoldItalic.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: normal; - font-weight: 900; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-Black.woff2") format("woff2"); -} -@font-face { - font-family: "Inter"; - font-style: italic; - font-weight: 900; - font-display: swap; - src: url("/assets/fonts/Inter/Inter-BlackItalic.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 100; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-Thin.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 100; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-ThinItalic.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 200; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-ExtraLight.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 200; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-ExtraLightItalic.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-Light.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 300; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-LightItalic.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-Regular.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 400; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-Italic.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-Medium.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 500; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-MediumItalic.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-SemiBold.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 600; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-SemiBoldItalic.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-Bold.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 700; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-BoldItalic.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-ExtraBold.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 800; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-ExtraBoldItalic.woff2") - format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: normal; - font-weight: 900; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-Black.woff2") format("woff2"); -} -@font-face { - font-family: "InterDisplay"; - font-style: italic; - font-weight: 900; - font-display: swap; - src: url("/assets/fonts/Inter/InterDisplay-BlackItalic.woff2") - format("woff2"); -} - -@font-feature-values InterVariable { - @character-variant { - cv01: 1; - cv02: 2; - cv03: 3; - cv04: 4; - cv05: 5; - cv06: 6; - cv07: 7; - cv08: 8; - cv09: 9; - cv10: 10; - cv11: 11; - cv12: 12; - cv13: 13; - alt-1: 1; /* Alternate one */ - alt-3: 9; /* Flat-top three */ - open-4: 2; /* Open four */ - open-6: 3; /* Open six */ - open-9: 4; /* Open nine */ - lc-l-with-tail: 5; /* Lower-case L with tail */ - simplified-u: 6; /* Simplified u */ - alt-double-s: 7; /* Alternate German double s */ - uc-i-with-serif: 8; /* Upper-case i with serif */ - uc-g-with-spur: 10; /* Capital G with spur */ - single-story-a: 11; /* Single-story a */ - compact-lc-f: 12; /* Compact f */ - compact-lc-t: 13; /* Compact t */ - } - @styleset { - ss01: 1; - ss02: 2; - ss03: 3; - ss04: 4; - ss05: 5; - ss06: 6; - ss07: 7; - ss08: 8; - open-digits: 1; /* Open digits */ - disambiguation: 2; /* Disambiguation (with zero) */ - disambiguation-except-zero: 4; /* Disambiguation (no zero) */ - round-quotes-and-commas: 3; /* Round quotes & commas */ - square-punctuation: 7; /* Square punctuation */ - square-quotes: 8; /* Square quotes */ - circled-characters: 5; /* Circled characters */ - squared-characters: 6; /* Squared characters */ - } -} -@font-feature-values Inter { - @character-variant { - cv01: 1; - cv02: 2; - cv03: 3; - cv04: 4; - cv05: 5; - cv06: 6; - cv07: 7; - cv08: 8; - cv09: 9; - cv10: 10; - cv11: 11; - cv12: 12; - cv13: 13; - alt-1: 1; /* Alternate one */ - alt-3: 9; /* Flat-top three */ - open-4: 2; /* Open four */ - open-6: 3; /* Open six */ - open-9: 4; /* Open nine */ - lc-l-with-tail: 5; /* Lower-case L with tail */ - simplified-u: 6; /* Simplified u */ - alt-double-s: 7; /* Alternate German double s */ - uc-i-with-serif: 8; /* Upper-case i with serif */ - uc-g-with-spur: 10; /* Capital G with spur */ - single-story-a: 11; /* Single-story a */ - compact-lc-f: 12; /* Compact f */ - compact-lc-t: 13; /* Compact t */ - } - @styleset { - ss01: 1; - ss02: 2; - ss03: 3; - ss04: 4; - ss05: 5; - ss06: 6; - ss07: 7; - ss08: 8; - open-digits: 1; /* Open digits */ - disambiguation: 2; /* Disambiguation (with zero) */ - disambiguation-except-zero: 4; /* Disambiguation (no zero) */ - round-quotes-and-commas: 3; /* Round quotes & commas */ - square-punctuation: 7; /* Square punctuation */ - square-quotes: 8; /* Square quotes */ - circled-characters: 5; /* Circled characters */ - squared-characters: 6; /* Squared characters */ - } -} -@font-feature-values InterDisplay { - @character-variant { - cv01: 1; - cv02: 2; - cv03: 3; - cv04: 4; - cv05: 5; - cv06: 6; - cv07: 7; - cv08: 8; - cv09: 9; - cv10: 10; - cv11: 11; - cv12: 12; - cv13: 13; - alt-1: 1; /* Alternate one */ - alt-3: 9; /* Flat-top three */ - open-4: 2; /* Open four */ - open-6: 3; /* Open six */ - open-9: 4; /* Open nine */ - lc-l-with-tail: 5; /* Lower-case L with tail */ - simplified-u: 6; /* Simplified u */ - alt-double-s: 7; /* Alternate German double s */ - uc-i-with-serif: 8; /* Upper-case i with serif */ - uc-g-with-spur: 10; /* Capital G with spur */ - single-story-a: 11; /* Single-story a */ - compact-lc-f: 12; /* Compact f */ - compact-lc-t: 13; /* Compact t */ - } - @styleset { - ss01: 1; - ss02: 2; - ss03: 3; - ss04: 4; - ss05: 5; - ss06: 6; - ss07: 7; - ss08: 8; - open-digits: 1; /* Open digits */ - disambiguation: 2; /* Disambiguation (with zero) */ - disambiguation-except-zero: 4; /* Disambiguation (no zero) */ - round-quotes-and-commas: 3; /* Round quotes & commas */ - square-punctuation: 7; /* Square punctuation */ - square-quotes: 8; /* Square quotes */ - circled-characters: 5; /* Circled characters */ - squared-characters: 6; /* Squared characters */ - } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭─────────────────────────────────╮ -/ │ _ _ _ │ -/ │ ___| |_ _ _| (_)_ __ __ _ │ -/ │ / __| __| | | | | | '_ \ / _` | │ -/ │ \__ \ |_| |_| | | | | | | (_| | │ -/ │ |___/\__|\__, |_|_|_| |_|\__, | │ -/ │ |___/ |___/ │ -/ ╰─────────────────────────────────╯ -/ styling - regular styling for regular/global html elements as well as the color schemes */ - -:root { - --pagefind-ui-font: var(--font-family); - --pagefind-ui-primary: var(--foreground); - --pagefind-ui-text: var(--foreground); - --pagefind-ui-background: var(--background); - --pagefind-ui-border: var(--accent); - --pagefind-ui-tag: var(--background); - --site-border: .1rem solid var(--border); -} - -/* -custom color scheme, based off of both Ayu Light & Dark and Catppuccin Latte & Mocha. -it's basically a mix and mash of the both of them together, and slightly modified. -it doesn't have a name, call it "synth.download color scheme official real" -*/ - -:root { - /* base colors */ - --background: #fafafa; - --foreground: #3d454d; - --selection: #f0eee4; - --comment: #abb0b6; - --accent: #fd9e1a; - - /* original ayu colors */ - --orange: #ff9940; - --green: #86b300; - --blue: #4cbf99; - --purple: #a37acc; - --red: #ec3838; - - /* extended catppuccin based colors */ - --flamingo: #ff7d7d; - --rosewater: #eca69a; - --pink: #ff8adb; - --mauve: #ba8aff; - --maroon: #e06c75; - --peach: #ffac6b; - --yellow: #e5c07b; - --teal: #2bbac5; - --sky: #3eacce; - --sapphire: #4db5d0; - --lavender: #7881ce; - - /* ui accent colors */ - --ui-orange: #fa8d3e; - --ui-green: #91b362; - --ui-blue: #6994bf; - --ui-purple: #7e57c2; - --ui-teal: #56c2c0; - --ui-lavender: #9d8cdb; - - /* misc. */ - --border: #e4e4e4; - --shadow: rgba(0, 0, 0, 0.1); - --hover: rgba(0, 0, 0, 0.05); - --active: rgba(0, 0, 0, 0.1); - --focus: #86b300; -} - -@media (prefers-color-scheme: dark) { - :root { - /* base colors */ - --background: #0a0e14; - --foreground: #d8d6d2; - --selection: #253340; - --comment: #5c6773; - --accent: #e6b450; - - /* original ayu colors */ - --orange: #ffb454; - --green: #aad94c; - --blue: #59c2ff; - --purple: #d2a6ff; - --red: #f0646b; - - /* extended catppuccin based colors */ - --flamingo: #f2cdcd; - --rosewater: #f5e0dc; - --pink: #ffc9e3; - --mauve: #cba6f7; - --maroon: #eba0ac; - --peach: #ffcca8; - --yellow: #f9e2af; - --teal: #8ddedc; - --sky: #89dceb; - --sapphire: #74c7ec; - --lavender: #b4befe; - - /* ui accent colors */ - --ui-orange: #e6b450; - --ui-green: #aad94c; - --ui-blue: #39bae6; - --ui-purple: #a37acc; - --ui-teal: #7adbd3; - --ui-lavender: #ada0f3; - - /* misc. */ - --border: #1a1f29; - --shadow: rgba(0, 0, 0, 0.4); - --hover: rgba(255, 255, 255, 0.05); - --active: rgba(255, 255, 255, 0.1); - --focus: #ffb454; - } -} - -/* theme classes for manual theme selection */ -html[data-theme="light"] { - /* base colors */ - --background: #fafafa; - --foreground: #3d454d; - --selection: #f0eee4; - --comment: #abb0b6; - --accent: #ffaa33; - - /* original ayu colors */ - --orange: #ff9940; - --green: #86b300; - --blue: #4cbf99; - --purple: #a37acc; - --red: #ec3838; - - /* extended catppuccin based colors */ - --flamingo: #ff7d7d; - --rosewater: #eca69a; - --pink: #ff8adb; - --mauve: #ba8aff; - --maroon: #e06c75; - --peach: #ffac6b; - --yellow: #e5c07b; - --teal: #2bbac5; - --sky: #3eacce; - --sapphire: #4db5d0; - --lavender: #7881ce; - - /* ui accent colors */ - --ui-orange: #fa8d3e; - --ui-green: #91b362; - --ui-blue: #6994bf; - --ui-purple: #7e57c2; - --ui-teal: #56c2c0; - --ui-lavender: #9d8cdb; - - /* misc. */ - --border: #e4e4e4; - --shadow: rgba(0, 0, 0, 0.1); - --hover: rgba(0, 0, 0, 0.05); - --active: rgba(0, 0, 0, 0.1); - --focus: #86b300; -} - -html[data-theme="dark"] { - /* base colors */ - --background: #0a0e14; - --foreground: #d8d6d2; - --selection: #253340; - --comment: #5c6773; - --accent: #e6b450; - - /* original ayu colors */ - --orange: #ffb454; - --green: #aad94c; - --blue: #59c2ff; - --purple: #d2a6ff; - --red: #f0646b; - - /* extended catppuccin based colors */ - --flamingo: #f2cdcd; - --rosewater: #f5e0dc; - --pink: #ffc9e3; - --mauve: #cba6f7; - --maroon: #eba0ac; - --peach: #ffcca8; - --yellow: #f9e2af; - --teal: #8ddedc; - --sky: #89dceb; - --sapphire: #74c7ec; - --lavender: #b4befe; - - /* ui accent colors */ - --ui-orange: #e6b450; - --ui-green: #aad94c; - --ui-blue: #39bae6; - --ui-purple: #a37acc; - --ui-teal: #7adbd3; - --ui-lavender: #ada0f3; - - /* misc. */ - --border: #1a1f29; - --shadow: rgba(0, 0, 0, 0.4); - --hover: rgba(255, 255, 255, 0.05); - --active: rgba(255, 255, 255, 0.1); - --focus: #ffb454; -} - -/* ---------------------------------- -- background wallpaper, global font - ----------------------------------- */ - -html { - background: var(--background) linear-gradient(var(--background) 50%, color-mix(in srgb, var(--accent) 25%, var(--background)) 50%); - background-attachment: fixed; -} - -body { - background: linear-gradient(var(--background), color-mix(in srgb, var(--accent) 25%, var(--background))); - min-height: calc(100vh - 4rem); - font-family: var(--font-family); - font-size: 1.125rem; - text-transform: lowercase; - margin: unset !important; - /* idk why it does that */ -} - -/* text formatting and config stuff */ - -/* headings */ -h1, -h1 a { - color: var(--foreground); - font-size: 2rem; - text-decoration: none; -} - -/* apparently having more than one h1 is against web standards -but i prefer how it looks so i just use the same styling again */ -h2, -h2 a { - color: var(--foreground); - font-size: 2rem; - text-decoration: none; -} - -h3, -h3 a { - font-size: 2rem; -} - -/* text */ -p, -li, -button { - font-size: 1.125rem; - - [class^="tabler--"] { - transform: scale(1.13); - } -} - -/* links should look good i think */ -a { - font-size: 1.125rem; - color: var(--accent); - transition: 0.2s; -} - -a:hover { - transition: 0.2s; - text-shadow: 0em 0em 0.25em var(--accent); -} - -/* smol text */ -small, -small a { - font-size: 0.875rem; -} - -/* lists need some styling */ -li { - margin-left: -1em; - padding-bottom: 18px; -} - -/* gay ass text */ -.rainbow { - animation: 2s linear infinite rainbow; - -webkit-animation: 2s linear infinite rainbow; - -moz-animation: 2s linear infinite rainbow; -} - -/* heading 1 is also clickable */ -h1 a:hover { - text-decoration: underline; -} - -/* the tabler icons svgs styling */ -.tabler-icon, -.icon .icon-tabler { - width: 1.3rem; - height: 1.3rem; - padding-bottom: .2rem; - vertical-align: middle !important; - color: var(--foreground) !important; -} - -/* code (enforced monospace) */ -.code { - font-family: 'JetBrains Mono', monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif !important; -} - -/* caption styled text */ -.caption { - font-size: small; - opacity: .8; - - .section { - font-size: smaller; - opacity: .9; - } -} - - /* Dashed border */ -hr.dashed { - border-top: .1rem dashed var(--border); -} - -/* Dotted border */ -hr.dotted { - border-top: .1rem dotted var(--border); -} - -/* Solid border */ -hr.solid { - border-top: .1rem solid var(--border); -} - -/* Rounded border */ -hr.rounded { - border-top: .2rem solid var(--border); - border-radius: 5px; -} - -/* audio */ -audio { - border-radius: 3rem; -} - -/* summary styling */ -summary { - display: flex; -} - -/* --------------- -- alt text popup - ---------------- */ - -.alt-popup { - position: fixed; - text-transform: none !important; - background-color: color-mix(in srgb, var(--background) 85%, transparent); - backdrop-filter: blur(.5rem); - color: var(--foreground); - padding: .5rem; - border: solid .01rem var(--accent); - border-radius: .5rem; - font-size: 1rem; - max-width: 30rem; - z-index: 1000; - pointer-events: none; - opacity: 0; - transition: opacity 0.4s; -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭──────────────────────────────────────╮ -/ │ _ │ -/ │ _ __ __ ___ _| |__ __ _ _ __ │ -/ │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │ -/ │ | | | | (_| |\ V /| |_) | (_| | | │ -/ │ |_| |_|\__,_| \_/ |_.__/ \__,_|_| │ -/ ╰──────────────────────────────────────╯ -/ navbar - styling the navigation bar / panel that sits on the top of the page at all times */ - -.navbar { - display: flex; - flex-direction: row; - max-height: 1.8em !important; - max-width: 100%; - min-height: 1.8em !important; - min-width: 100%; - position: fixed; - top: 0 !important; - padding: .4rem 0 .4rem 0; - z-index: 100; - - align-content: center; - color: var(--foreground); - vertical-align: middle; - - transition: .2s background-color; - - .nav-base { - padding: 0px .2em !important; - max-width: fit-content; - align-content: center; - outline: .13rem solid var(--border); - border-radius: 1rem; - height: 1.9rem; - } - - .nav-left { - margin-left: .6rem !important; - padding: 0px .5rem .1rem !important; - text-decoration: unset !important; - } - - .nav-baselink { - background-color: var(--accent); - color: var(--background); - margin-left: .4rem !important; - outline-color: color-mix(in srgb, var(--accent) 60%, transparent); - padding: .13rem; - - .synth-icon { - height: 2rem; - margin-right: 1rem; - pointer-events: none; - transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.1rem); - transition: all .2s ease-out; - width: 2rem; - } - } - - .nav-baselink:hover { - .synth-icon { - transition: all .2s ease-out; - transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg); - } - } - - .nav-desktop { - overflow: hidden; - } - - .nav-mobile-menu { - display: none; - } - - .nav-links { - background-color: var(--background); - color: var(--foreground); - overflow: clip; - position: relative; - text-shadow: none; - transition: all .3s; - - .text { - opacity: 0; - position: absolute; - transition: all .3s; - pointer-events: none; - white-space: nowrap; - } - - [class^="tabler--"] { - transform: scale(1.1); - transition: all .3s; - } - } - - .nav-links:hover { - padding-right: 9rem !important; - padding-bottom: 7rem !important; - transition: all .3s; - - .text { - opacity: 1; - transform: scale(1.5) translateX(-.4rem); - transition: all .3s; - } - - [class^="tabler--"] { - transform: scale(5) translateY(.9rem) translateX(.4rem) rotate(10deg); - transition: all .3s; - } - } - - .nav-home:hover { - background-color: color-mix(in srgb, var(--accent) 20%, var(--background)); - color: var(--foreground); - outline-color: color-mix(in srgb, var(--accent) 60%, transparent); - } - - .nav-notebook:hover { - background-color: color-mix(in srgb, var(--purple) 20%, var(--background)); - color: var(--foreground); - outline-color: color-mix(in srgb, var(--purple) 60%, transparent); - - .text { - transform: scale(1.5) translateX(0rem); - } - } - - .nav-webmaster:hover { - background-color: color-mix(in srgb, var(--green) 20%, var(--background)); - color: var(--foreground); - outline-color: color-mix(in srgb, var(--green) 60%, transparent); - - .text { - transform: scale(1.1) translateX(-.8rem); - } - } - - .nav-donate:hover { - background-color: color-mix(in srgb, var(--pink) 20%, var(--background)); - color: var(--foreground); - outline-color: color-mix(in srgb, var(--pink) 60%, transparent); - - .text { - transform: scale(1.5) translateX(-.2rem); - } - } - - .nav-right { - padding: 0px .5rem .1rem !important; - margin-right: .6rem !important; - } - - .nav-settings { - background-color: var(--accent); - color: var(--background); - cursor: pointer; - margin-left: auto !important; - outline-color: color-mix(in srgb, var(--accent) 60%, transparent); - padding: unset !important; /* unset the padding for the button itself so the button can take the padding to make the entire button clickable */ - - input[type="checkbox"] { - left: -100vw; - position: absolute; - } - - label { - cursor: pointer; - overflow: hidden !important; - padding: .3rem .5rem !important; - position: relative; - - [class^="tabler--"] { - padding: 0 .5rem !important; - pointer-events: none; - transform: translateY(.1rem) scale(1.5); - transition: all 1.3s; - } - } - - label:hover { - [class^="tabler--"] { - transform: translateY(.1rem) scale(1.5) rotate(360deg); - transition: all 1.3s; - } - } - - ul { - background-color: var(--background); - border-radius: 1rem; - border: var(--accent) solid .15rem; - cursor: initial !important; /* reset the cursor otherwise it uses the pointer cursor */ - margin-top: 1.2rem !important; - max-height: 27rem; - max-width: 17rem; - min-height: 27rem; - min-width: 17rem; - overflow: scroll; - position: absolute; - right: .4rem; - visibility: hidden; - - /* inital "hidden" state, used for providing animation when activated */ - opacity: 0; - scale: .5; - transform-origin: top right; - transition: opacity .3s, scale .3s, visibility .3s; - - li { - border-radius: 1rem; - color: var(--foreground); - list-style-type: none; - margin-left: -2rem; - padding: .4rem; - - span { - padding: .1rem 0px .1rem 0px !important; - } - - h2 { - margin: 0 !important; - } - } - } - - input[type="checkbox"]:checked ~ ul { - /* makes the menu visibile when activated and makes it appear from the top right */ - opacity: 1; - scale: 1; - transition: opacity .3s, scale .3s, visibility .3s; - visibility: visible; - } - } - - .nav-systray { - background-color: var(--background); - color: var(--foreground); - padding: 0px .1rem; - min-width: 6.45rem; - margin-right: .4rem !important; - } - - a, - p { - margin: unset !important; - } - - small { - opacity: .7; - } - - svg { - color: var(--foreground) !important; - } -} - -.navbar:hover { - transition: .2s all; - background-color: color-mix(in srgb, var(--accent) 40%, transparent); - border-bottom: solid .2rem var(--accent); -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭────────────────────────────────────────────╮ -/ │ _ _ │ -/ │ __ _(_)_ __ __| | _____ _____ │ -/ │ \ \ /\ / / | '_ \ / _` |/ _ \ \ /\ / / __| │ -/ │ \ V V /| | | | | (_| | (_) \ V V /\__ \ │ -/ │ \_/\_/ |_|_| |_|\__,_|\___/ \_/\_/ |___/ │ -/ ╰────────────────────────────────────────────╯ -/ windows - related styling for the windows on pages */ - -.window { - summary { - display: inline-flex; - min-width: 100%; - background-color: color-mix(in srgb, var(--accent) 20%, var(--background)); - opacity: .8; - text-align: center; - vertical-align: middle; - overflow: clip; - transition: .2s opacity; - - div:first-child { - background: color-mix(in srgb, var(--accent) 40%, transparent); - padding: .4rem .4rem .2rem 1rem; - border-right: .2rem solid var(--accent); - border-bottom: .2rem solid var(--accent); - border-bottom-right-radius: 1rem; - margin-bottom: -.2rem; - - span { - background-color: var(--foreground); - } - } - - a { - padding: .3rem 0rem .3rem .5rem; - text-decoration: none; - color: var(--foreground); - } - - a:hover { - text-decoration: underline; - } - - [class^="tabler--"] { - transform: scale(1.1); - } - - div:nth-child(3) { - margin-left: auto !important; - padding: .2rem .5rem .2rem 0rem; - - span { - text-align: center; - vertical-align: middle; - background-color: var(--foreground); - } - - /* maximize button (which does nothing) */ - span:nth-child(2) { - opacity: .6; - cursor: not-allowed; - } - } - - /* close button */ - div:nth-child(4) { - background: color-mix(in srgb, var(--accent) 40%, transparent); - padding: .4rem .5rem .2rem .6rem; - border-left: .2rem solid var(--accent); - border-bottom: .2rem solid var(--accent); - border-bottom-left-radius: 1rem; - margin-bottom: -.2rem; - color: var(--foreground); - - transition: background .2s; - transition: background-color .2s; - } - - /* close button (animated on hover) */ - div:nth-child(4):hover { - background: var(--red); - - transition: background .2s; - - span { - background-color: var(--background); - transition: background-color .2s; - } - } - } - - main, - section, - article { - padding: .8rem; - } - - background-color: var(--background); - color: var(--foreground); - - border: var(--accent) solid .15rem; - border-radius: .6rem; - - max-width: 60em; - overflow: clip; - - margin-left: auto; - margin-right: auto; - margin-bottom: 2em; - - transition: .2s box-shadow; - animation-fill-mode: backwards; - - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; -} - -/* window styling when hovered */ -.window:hover { - summary { - opacity: 1; - transition: .2s opacity; - } -} - -/* window styling when open (default state) */ -.window[open] { - summary { - opacity: 1; - border-bottom: .1rem solid var(--accent); - - transition: .2s opacity; - } - - border-radius: 2rem .6rem 2rem .6rem; -} - -.window:hover { - box-shadow: var(--accent) 0px 0px 0px .3rem; - - transition: .2s box-shadow; -} - -/* window when its the first one on the page */ -.window:nth-child(2) { - margin-top: 5rem; - - animation: .3s ease-out .2s 1 window-appear; - animation-fill-mode: backwards; -} - -/* rest of the windows if they exist, to finish the rest of the animations */ -.window:nth-child(3) { - animation: .3s ease-out .4s 1 window-appear; - animation-fill-mode: backwards; -} - -.window:nth-child(4) { - animation: .3s ease-out .6s 1 window-appear; - animation-fill-mode: backwards; -} - -.window:nth-child(5) { - animation: .3s ease-out .8s 1 window-appear; - animation-fill-mode: backwards; -} - -.window:nth-child(6) { - animation: .3s ease-out 1s 1 window-appear; - animation-fill-mode: backwards; -} - -.window:nth-child(7) { - animation: .3s ease-out 1.2s 1 window-appear; - animation-fill-mode: backwards; -} - -.window:nth-child(8) { - animation: .3s ease-out 1.4s 1 window-appear; - animation-fill-mode: backwards; -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭────────────────────────────────╮ -/ │ __ _ │ -/ │ / _| ___ ___ | |_ ___ _ __ │ -/ │ | |_ / _ \ / _ \| __/ _ \ '__| │ -/ │ | _| (_) | (_) | || __/ | │ -/ │ |_| \___/ \___/ \__\___|_| │ -/ ╰────────────────────────────────╯ -/ footer - related styling for the footer window on all pages */ - -footer { - max-width: 30em; - margin-left: auto; - margin-right: auto; - - details>summary>a { - padding: .3rem 0rem .3rem 1rem !important; - } - - main, - section, - article { - padding: 1rem !important; - } - - .fediring { - a { - display: inline-grid; - font-size: 1.5rem; - color: var(--green); - margin-bottom: .5em; - vertical-align: bottom; - } - - [href="https://fediring.net"] { - color: var(--foreground); - background: color-mix(in srgb, var(--purple) 25%, transparent); - padding: 0px 10px 0px 10px; - border-radius: 5px; - } - - [href="https://keithhacks.cyou/furryring.php"] { - color: var(--foreground); - background: color-mix(in srgb, var(--sapphire) 25%, transparent); - padding: 0px 10px 0px 10px; - border-radius: 5px; - } - - [href="https://stellophiliac.github.io/roboring"] { - color: var(--foreground); - background: color-mix(in srgb, var(--comment) 25%, transparent); - padding: 0px 10px 0px 10px; - border-radius: 5px; - } - - [href*="prev"] { - background: color-mix(in srgb, var(--orange) 25%, transparent); - padding: 5px 6px; - border-radius: 5px; - - span { - background-color: var(--orange) !important; - } - } - - [href*="next"] { - background: color-mix(in srgb, var(--green) 25%, transparent); - padding: 5px 6px; - border-radius: 5px; - - span { - background-color: var(--green) !important; - } - } - } - - p, - a { - text-align: center; - font-size: 0.938rem; - margin: .2em 0px .2em; - text-decoration: none; - } - - img { - padding-top: 18px; - max-width: 30%; - display: flex; - margin-left: auto; - margin-right: auto; - transition: 1s animation; - } - - img:hover { - animation: spin 5s infinite linear; - } - - .inner-footer { - text-align: center; - padding-top: 14px; - padding-bottom: 14px; - - a { - width: 3rem; - height: 3rem; - display: inline-block; - vertical-align: middle; - align-content: center; - border-radius: .5rem; - - span { - transform: scale(1.58); - } - } - } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭───────────────────────────────────────────────────────╮ -/ │ _ _ _ │ -/ │ __ _ _ __ (_)_ __ ___ __ _| |_(_) ___ _ __ ___ │ -/ │ / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __| │ -/ │ | (_| | | | | | | | | | | (_| | |_| | (_) | | | \__ \ │ -/ │ \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/ │ -/ ╰───────────────────────────────────────────────────────╯ -/ animations - reusable css animations */ - -@keyframes window-appear { - 0% { - opacity: 0; - transform: scale(0.5, 0.5); - } - - 100% { - opacity: 1; - transform: scale(1, 1); - } -} - -@keyframes rainbow { - 0% { - filter: hue-rotate(0deg) contrast(150%) saturate(150%); - } - - 100% { - filter: hue-rotate(360deg) contrast(150%) saturate(150%); - } -} - -@keyframes bg-gradient { - 0% { - background-position: 0% 27% - } - - 50% { - background-position: 100% 74% - } - - 100% { - background-position: 0% 27% - } -} - -@keyframes opacity-blink { - 0% { opacity: 0% } - 5% { opacity: 100% } - 45% { opacity: 100% } - 50% { opacity: 0% } - 100% { opacity: 0% } -} - -@keyframes opacity-blink-reverse { - 0% { opacity: 100% } - 5% { opacity: 0% } - 45% { opacity: 0% } - 50% { opacity: 100% } - 100% { opacity: 100% } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭────────────────────────────────────────╮ -/ │ ____ _ _ │ -/ │ / __ \ _ __ ___ ___ __| (_) __ _ │ -/ │ / / _` | '_ ` _ \ / _ \/ _` | |/ _` | │ -/ │ | | (_| | | | | | | __/ (_| | | (_| | │ -/ │ \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │ -/ │ \____/ │ -/ ╰────────────────────────────────────────╯ -/ @media / at-media - styling depending on browser configuration / settings -/ other sorts of "Theming Jank" also goes in here for the sake of uniforming everything */ - -/* disable certain animations if user has animations disabled on their system */ - -@media (prefers-reduced-motion: reduce) { - body { - background: var(--background) !important; - animation: unset !important; - -moz-animation: unset !important; - -webkit-animation: unset !important; - } - - /* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */ - * { - transition: none !important; - animation: unset !important; - -moz-animation: unset !important; - -webkit-animation: unset !important; - } - - /* fedi icon on /me should keep its animation (temp, find a better solution later) */ - .fedi-icon { - animation: opacity-blink 4s infinite !important; - } - .fedi-icon-2 { - animation: opacity-blink-reverse 4s infinite !important; - } -} - -/* different styling for elements in dark mode - must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */ - -html:not([data-theme="light"]) { - @media (prefers-color-scheme: dark) { - .navbar { - .nav-home:hover { - background-color: var(--accent); - color: var(--background); - } - .nav-notebook:hover { - background-color: var(--purple); - color: var(--background); - } - .nav-webmaster:hover { - background-color: var(--green); - color: var(--background); - } - .nav-donate:hover { - background-color: var(--pink); - color: var(--background); - } - } - } -} - -html[data-theme="dark"] { - .navbar { - .nav-home:hover { - background-color: var(--accent); - color: var(--background); - } - .nav-notebook:hover { - background-color: var(--purple); - color: var(--background); - } - .nav-webmaster:hover { - background-color: var(--green); - color: var(--background); - } - .nav-donate:hover { - background-color: var(--pink); - color: var(--background); - } - } -} - -/* modify widths and spacing depending on the size of the display */ - -@media screen and (max-width: 1083px) { - .navbar { - .nav-desktop { - display: none !important; - } - - .nav-mobile-menu { - display: inline-block; - max-width: 3rem; - min-width: 3rem; - position: relative; - - input[type="checkbox"] { - left: -100vw; - position: absolute; - } - - label { - border-radius: 1rem; - cursor: pointer; - display: inline-block; - left: -.5rem; - margin-right: .1rem; - max-height: 2rem; - max-width: 3rem; - min-height: 2rem; - min-width: 3rem; - overflow: hidden !important; - padding-right: 1rem; - position: relative; - - .synth-icon { - transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.1rem); - } - } - - label:hover { - .synth-icon { - transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.2rem) rotate(10deg); - } - } - - ul { - background-color: var(--background); - border-radius: 1rem; - border: var(--accent) solid .15rem; - height: max-content; - left: 0; - margin-top: .4rem !important; - position: absolute; - visibility: hidden; - width: max-content; - - /* inital "hidden" state, used for providing animation when activated */ - opacity: 0; - scale: .5; - transform-origin: top left; - transition: opacity .3s, scale .3s, visibility .3s; - - li { - border-radius: 1rem; - list-style-type: none; - margin: .5rem .5rem .5rem -1.9rem; - overflow: clip; - padding: .7rem; - transition: .2s all; - - a { - color: var(--foreground); - text-decoration: none; - text-shadow: unset; - } - - [class^="tabler--"] { - padding-right: .3em; - transition: .2s all; - } - } - - li:hover { - transition: .2s all; - - [class^="tabler--"] { - transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg); - transition: .2s all; - } - } - - .nav-home:hover { - background-color: color-mix(in srgb, var(--accent) 20%, transparent); - a { - color: var(--foreground); - } - } - .nav-notebook:hover { - background-color: color-mix(in srgb, var(--purple) 20%, transparent); - a { - color: var(--foreground); - } - } - .nav-webmaster:hover { - background-color: color-mix(in srgb, var(--green) 20%, transparent); - a { - color: var(--foreground); - } - } - .nav-donate:hover { - background-color: color-mix(in srgb, var(--pink) 20%, transparent); - a { - color: var(--foreground); - } - } - } - - input[type="checkbox"]:checked ~ ul { - /* makes the menu visibile when activated and makes it appear from the top right */ - opacity: 1; - scale: 1; - transition: opacity .3s, scale .3s, visibility .3s; - visibility: visible; - } - } - - .nav-links { - display: none !important; - } - - .nav-settings { - span { - padding: 0 .4rem !important; - } - } - } - - .window:not(#footer) { - summary { - div:first-child { - padding: .3rem .4rem .3rem .4rem; - } - - div:nth-child(3) { - display: none !important; - } - - div:nth-child(4) { - margin-left: auto !important; - } - } - - animation: unset !important; - - main, - section, - article { - padding: .5rem; - } - - border-top: var(--accent) solid .15rem; - border-bottom: var(--accent) solid .15rem; - border-left: unset !important; - border-right: unset !important; - border-radius: unset !important; - - margin-bottom: .8em; - } - - /* window when its the first one on the page */ - .window:nth-child(2) { - margin-top: 4rem; - } - - @media (prefers-color-scheme: dark) { - html:not([data-theme="light"]) { - .navbar .nav-mobile-menu ul { - .nav-home:hover a { - color: var(--accent); - } - .nav-notebook:hover a { - color: var(--purple); - } - .nav-webmaster:hover a { - color: var(--green); - } - .nav-donate:hover a { - color: var(--pink); - } - } - } - } - - html[data-theme="dark"] { - .navbar .nav-mobile-menu ul { - .nav-home:hover a { - color: var(--accent); - } - .nav-notebook:hover a { - color: var(--purple); - } - .nav-webmaster:hover a { - color: var(--green); - } - .nav-donate:hover a { - color: var(--pink); - } - } - } -} - -@media screen and (max-width: 540px) { - details#footer.window { - border-top: var(--accent) solid .15rem; - border-bottom: var(--accent) solid .15rem; - border-left: unset !important; - border-right: unset !important; - border-radius: unset !important; - - margin-bottom: .8em; - } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭────────────────────────────────────────────╮ -/ │ __ _ _ │ -/ │ _ __ __ _ __ _ ___ / _(_)_ __ __| | │ -/ │ | '_ \ / _` |/ _` |/ _ \ |_| | '_ \ / _` | │ -/ │ | |_) | (_| | (_| | __/ _| | | | | (_| | │ -/ │ | .__/ \__,_|\__, |\___|_| |_|_| |_|\__,_| │ -/ │ |_| |___/ │ -/ ╰────────────────────────────────────────────╯ -/ pagefind - pagefind search widget styling */ - -/* #search { - padding: .2rem; -} */ - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭──────────────────────────────╮ -/ │ _ │ -/ │ | |__ ___ _ __ ___ ___ │ -/ │ | '_ \ / _ \| '_ ` _ \ / _ \ │ -/ │ | | | | (_) | | | | | | __/ │ -/ │ |_| |_|\___/|_| |_| |_|\___| │ -/ ╰──────────────────────────────╯ -/ home - specific styling for the main synth.download home page (index.md) */ - -#site.window.home { - - main, - section { - a:nth-child(2) { - cursor: default; - } - - #logo { - width: 40rem; - height: auto; - line-break: strict; - margin-bottom: 0.5rem; - text-align: center; - cursor: default; - } - - h1 { - margin-top: -1rem; - margin-bottom: 1px; - } - - p { - margin-top: 3px; - } - - ul { - text-align: left; - - li a { - text-decoration: none !important; - } - - li a:hover { - text-decoration: underline !important; - } - } - - text-align: center; - } -} - -/* - buttons section - */ - -#buttons.window.home section { - text-align: center; - font-size: 0px; - - img { - margin-right: 5px; - image-rendering: auto; - image-rendering: crisp-edges; - image-rendering: pixelated; - transition: transform 0.2s; - } - - img:hover { - transform: scale(2); - } -} - -@media screen and (max-width: 59em) { - - #site.window.home>main, - #site.window.home>section { - #logo { - max-width: 100%; - } - } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭─────────────────────────────────────╮ -/ │ /\/| │ -/ │ |/\/___ _ __ ___ _____ ___ _ │ -/ │ / __| '_ \ / _ \/ _ \ \/ / | | | │ -/ │ \__ \ | | | __/ __/> <| |_| | │ -/ │ |___/_| |_|\___|\___/_/\_\\__, | │ -/ │ |___/ │ -/ ╰─────────────────────────────────────╯ -/ ~sneexy - breeeep! my page! slooosh~ */ - -/* my page has goop in html to set goopy colors */ -html[page-is="goopy"] { - --accent: #00d131 !important; - - #sneexy > section { - #logo { - width: 40rem; - height: auto; - } - - h1 #pfp { - width: auto; - height: 6rem; - - vertical-align: middle; - transition: transform .2s; - } - - h1 #pfp:hover { - transform: scale(2); - } - - .selfinfo { - display: grid; - padding-top: 5px; - grid-template-areas: - "pronouns names"; - div { - text-align: left; - border-radius: 1em; - padding: .7em 1em; - ul { - padding-left: 1em; - } - li { - padding-bottom: 6px !important; - list-style: none; - } - } - div:first-child { - background-color: color-mix(in srgb, var(--yellow) 15%, transparent); - border: var(--site-border); - } - div:last-child { - background-color: color-mix(in srgb, var(--sapphire) 15%, transparent); - border: var(--site-border); - margin-left: 1.5em; - } - } - - h1 { - margin-bottom: 1px; - } - - p { - margin-top: 3px; - } - - text-align: center; - } - - /* socials and links sections */ - .socials-contacts-list { - a { - width: 3rem; - height: 3rem; - display: inline-block; - vertical-align: middle; - align-content: center; - text-align: center; - border-radius: .5rem; - - span { - transform: scale(1.58) translateY(.07rem); - } - } - - .fedi-icon { - anchor-name: --fedi-icon; - animation: opacity-blink 4s infinite; - } - - .fedi-icon-2 { - position-anchor: --fedi-icon; - position: absolute; - margin-left: -3.681rem; - z-index: 2; - animation: opacity-blink-reverse 4s infinite; - } - } - - /* sharkey iframe embed */ - #links > section > iframe { - display: flex; - margin-top: 1rem; - margin-bottom: .3crem; - margin-left: auto; - margin-right: auto; - - border: var(--accent) solid .15rem !important; - border-radius: .6rem; - transition: .2s box-shadow; - } - - #links > section > iframe:hover { - box-shadow: var(--accent) 0px 0px 0px .3rem; - transition: .2s box-shadow; - } - - /* goop coloring for theme issues stuff */ - @media (prefers-color-scheme: light) { - .nav-baselink, .nav-accessibility { - background-color: var(--accent) !important; - color: var(--foreground) !important; - } - } - - @media (prefers-color-scheme: dark) { - --accent: #65ff88 !important; - } - - @media screen and (max-width: 59em) { - #sneexy > section { - #logo { - max-width: 100%; - } - - .selfinfo { - grid-template-areas: - "pronouns" - "names"; - div { - text-align: center; - margin-left: auto; - margin-right: auto; - ul { - text-align: left !important; - } - } - div:first-child { - margin-bottom: 1em; - } - div:last-child { - margin-left: auto !important; - } - } - } - - .socials-contacts-list { - text-align: center; - a { - margin-top: .5rem; - margin-bottom: .5rem; - } - } - } -} - -html[data-theme="light"][page-is="goopy"] { - --accent: #00d131 !important; - - .nav-baselink, .nav-accessibility { - background-color: var(--accent) !important; - color: var(--foreground) !important; - } -} - -html[data-theme="dark"][page-is="goopy"] { - --accent: #65ff88 !important; -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭──────────────────────────────────────────────╮ -/ │ _ _ _ │ -/ │ _ __ ___ | |_ ___| |__ ___ ___ | | __ │ -/ │ | '_ \ / _ \| __/ _ \ '_ \ / _ \ / _ \| |/ / │ -/ │ | | | | (_) | || __/ |_) | (_) | (_) | < │ -/ │ |_| |_|\___/ \__\___|_.__/ \___/ \___/|_|\_\ │ -/ ╰──────────────────────────────────────────────╯ -/ notebook - specific styling for the notebook page where blogish things live */ - -details.notebook.article-category { - overflow: clip; - border-radius: .8rem .4rem .8rem .4rem; - background-color: color-mix(in srgb, var(--accent) 15%, transparent); - padding-bottom: .01rem; - /* weird bug ??? without this there is no space underneath so */ - - summary { - span { - padding-right: .6rem; - } - - padding: .5rem; - background: linear-gradient(color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent) 30%, transparent)); - border-bottom: unset !important; - cursor: pointer; - } - - .article-card { - padding: 1rem; - margin: 1.4rem; - border-radius: 1rem; - border: .1rem solid var(--border); - background-color: var(--background); - - h2 { - margin-top: 0rem !important; - } - - .tags-holder { - margin-top: -.7rem !important; - - a { - margin-top: -1rem !important; - transition: all .2s; - opacity: .9; - padding: .3rem; - border: solid .1rem var(--accent); - border-radius: .4rem; - font-size: .8rem; - } - - a:hover { - opacity: 1; - text-shadow: none; - } - } - - .read { - transition: all .2s; - text-decoration: none; - } - - .read:hover { - transition: all .2s; - text-decoration: underline; - } - } -} - -@media screen and (max-width: 59em) { - details.notebook { - .article-card { - padding: .5rem; - margin: .6rem; - } - } -} - -/* ------------------------------------ -- addition to above (the post pages ) - ------------------------------------- */ - -#information.window { - .post-info { - p { - margin: 0rem !important; - } - - span { - color: var(--ui-green); - opacity: .8; - } - - p:first-child, - p:last-child { - opacity: .5; - } - } -} - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* -------------------------------------------------------------------- -======================================================================= --------------------------------------------------------------------- */ - -/* ╭─────────────────────────╮ -/ │ _ │ -/ │ (_) ___ ___ _ __ ___ │ -/ │ | |/ __/ _ \| '_ \/ __| │ -/ │ | | (_| (_) | | | \__ \ │ -/ │ |_|\___\___/|_| |_|___/ │ -/ ╰─────────────────────────╯ -/ icons - tabler icons done through css, generate via https://icon-sets.iconify.design/tabler */ - -/* ti-accessible */ -.tabler--accessible { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='m10 16.5l2-3l2 3m-2-3v-2l3-1m-6 0l3 1'/%3E%3Ccircle cx='12' cy='7.5' r='.5' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-settings */ -.tabler--settings { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-grid-dots */ -.tabler--grid-dots { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-home */ -.tabler--home { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-user */ -.tabler--user { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-article */ -.tabler--article { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm4 2h10M7 12h10M7 16h10'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-notebook */ -.tabler--notebook { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1m3 0v18m4-14h2m-2 4h2'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-link */ -.tabler--link { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 15l6-6m-4-3l.463-.536a5 5 0 0 1 7.071 7.072L18 13m-5 5l-.397.534a5.07 5.07 0 0 1-7.127 0a4.97 4.97 0 0 1 0-7.071L6 11'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-bell */ -.tabler--bell { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-volume */ -.tabler--volume { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-wifi */ -.tabler--wifi { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 18h.01m-2.838-2.828a4 4 0 0 1 5.656 0m-8.485-2.829a8 8 0 0 1 11.314 0'/%3E%3Cpath d='M3.515 9.515c4.686-4.687 12.284-4.687 17 0'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-battery-filled */ -.tabler--battery-filled { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 6a3 3 0 0 1 2.995 2.824L20 9v.086l.052.019a1.5 1.5 0 0 1 .941 1.25L21 10.5v3a1.5 1.5 0 0 1-.948 1.395l-.052.018V15a3 3 0 0 1-2.824 2.995L17 18H6a3 3 0 0 1-2.995-2.824L3 15V9a3 3 0 0 1 2.824-2.995L6 6z'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-arrow-right */ -.tabler--arrow-right { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-6 6l6-6m-6-6l6 6'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-arrow-left */ -.tabler--arrow-left { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14M5 12l6 6m-6-6l6-6'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-palette */ -.tabler--palette { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 21a9 9 0 0 1 0-18c4.97 0 9 3.582 9 8c0 1.06-.474 2.078-1.318 2.828S17.693 15 16.5 15H14a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21'/%3E%3Cpath d='M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m4-3a1 1 0 1 0 2 0a1 1 0 1 0-2 0m4 3a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-brand-tabler */ -.tabler--brand-tabler { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m8 9l3 3l-3 3m5 0h3'/%3E%3Cpath d='M3 7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-text-size */ -.tabler--text-size { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7V5h13v2m-6-2v14m2 0H8m7-6v-1h6v1m-3-1v7m-1 0h2'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-letter-case */ -.tabler--letter-case { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-minimize */ -.tabler--minimize { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19v-2a2 2 0 0 1 2-2h2M15 5v2a2 2 0 0 0 2 2h2M5 15h2a2 2 0 0 1 2 2v2M5 9h2a2 2 0 0 0 2-2V5'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-maximize */ -.tabler--maximize { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8V6a2 2 0 0 1 2-2h2M4 16v2a2 2 0 0 0 2 2h2m8-16h2a2 2 0 0 1 2 2v2m-4 12h2a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; - } -/* ti-x */ -.tabler--x { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} - -/* ============== */ - -/* ti-corner-down-right */ -.tabler--corner-down-right { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 6v6a3 3 0 0 0 3 3h10l-4-4m0 8l4-4'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-message-chatbot */ -.tabler--message-chatbot { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zM9.5 9h.01m4.99 0h.01'/%3E%3Cpath d='M9.5 13a3.5 3.5 0 0 0 5 0'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-link */ -.tabler--link { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 15l6-6m-4-3l.463-.536a5 5 0 0 1 7.071 7.072L18 13m-5 5l-.397.534a5.07 5.07 0 0 1-7.127 0a4.97 4.97 0 0 1 0-7.071L6 11'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-info-circle */ -.tabler--info-circle { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-3h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-mood-empty */ -.tabler--mood-empty { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m6-2h.01M15 10h.01M9 15h6'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-user-heart */ -.tabler--user-heart { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h.5m7.5 7l3.35-3.284a2.143 2.143 0 0 0 .005-3.071a2.24 2.24 0 0 0-3.129-.006l-.224.22l-.223-.22a2.24 2.24 0 0 0-3.128-.006a2.143 2.143 0 0 0-.006 3.071z'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-heart */ -.tabler--heart { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-thumb-up */ -.tabler--thumb-up { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 11v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1za4 4 0 0 0 4-4V6a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-thumb-down */ -.tabler--thumb-down { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 13V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1za4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2-2l-1-5a2 3 0 0 0-2-2h-7a3 3 0 0 0-3 3'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-universe */ -.tabler--universe { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M7.027 11.477a5 5 0 1 0 5.496-4.45a4.95 4.95 0 0 0-3.088.681'/%3E%3Cpath d='M5.636 5.636a9 9 0 1 0 3.555-2.188'/%3E%3Cpath d='M17 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-6 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-3 4a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-brand-mastodon */ -.tabler--brand-mastodon { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M18.648 15.254C16.832 17.017 12 16.88 12 16.88a18.3 18.3 0 0 1-3.288-.256q1.69 2.977 8.982 2.475c-1.945 2.013-13.598 5.257-13.668-7.636L4 10.309c0-3.036.023-4.115 1.352-5.633C7.023 2.766 12 3.01 12 3.01s4.977-.243 6.648 1.667C19.977 6.195 20 7.274 20 10.31s-.456 4.074-1.352 4.944'/%3E%3Cpath d='M12 11.204V8.278C12 7.02 11.105 6 10 6S8 7.02 8 8.278V13m4-4.722C12 7.02 12.895 6 14 6s2 1.02 2 2.278V13'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-mail */ -.tabler--mail { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='m3 7l9 6l9-6'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-brand-metabrainz */ -.tabler--brand-metabrainz { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7v10l7 4V3zm18 0v10l-7 4V3z'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-brand-lastfm */ -.tabler--brand-lastfm { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 8c-.83-1-1.388-1-2-1s-2 .271-2 2s1.384 2.233 3 3s2.125 1.812 2 3s-1 2-3 2s-3-1-3.5-2s-1.585-4.78-2.497-6a5 5 0 1 0-1 7'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-brand-git */ -.tabler--brand-git { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-4-4a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 8a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1-1V9m3 2l-2-2m-2-2L9.1 5.1'/%3E%3Cpath d='m13.446 2.6l7.955 7.954a2.045 2.045 0 0 1 0 2.892l-7.955 7.955a2.045 2.045 0 0 1-2.892 0l-7.955-7.955a2.045 2.045 0 0 1 0-2.892l7.955-7.955a2.045 2.045 0 0 1 2.892 0z'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-brand-github */ -.tabler--brand-github { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-building-bank */ -.tabler--building-bank { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 21h18M3 10h18M5 6l7-3l7 3M4 10v11m16-11v11M8 14v3m4-3v3m4-3v3'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-article */ -.tabler--article { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm4 2h10M7 12h10M7 16h10'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-rss */ -.tabler--rss { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 4a16 16 0 0 1 16 16M4 11a9 9 0 0 1 9 9'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-robot-face */ -.tabler--robot-face { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 5h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2'/%3E%3Cpath d='M9 16q1.5 1 3 1c1.5 0 2-.333 3-1M9 7L8 3m7 4l1-4m-7 9v-1m6 1v-1'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-note */ -.tabler--notes { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2zm4 2h6m-6 4h6m-6 4h4'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-mood-look-up */ -.tabler--mood-look-up { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m6-4h.01M15 8h.01M11 12h2'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-mood-sad-dizzy */ -.tabler--mood-sad-dizzy { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='M14.5 16.05a3.5 3.5 0 0 0-5 0M8 9l2 2m0-2l-2 2m6-2l2 2m0-2l-2 2'/%3E%3C/g%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-arrow-autofit-height */ -.tabler--arrow-autofit-height { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6m6 10v7m0-18v7m-3 8l3 3l3-3M15 6l3-3l3 3'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} -/* ti-currency-dollar */ -.tabler--currency-dollar { - display: inline-block; - width: 1.3rem; - height: 1.3rem; - vertical-align: top; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16.7 8A3 3 0 0 0 14 6h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1-2.7-2M12 3v3m0 12v3'/%3E%3C/svg%3E"); - background-color: currentColor; - -webkit-mask-image: var(--svg); - mask-image: var(--svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} \ No newline at end of file diff --git a/styles/error.css b/styles/error.css deleted file mode 100644 index c607ccf..0000000 --- a/styles/error.css +++ /dev/null @@ -1,153 +0,0 @@ -/* error window */ - -.window.error { - margin-top: 10rem !important; - text-align: center !important; - max-width: 30rem !important; - - h1 { - font-size: 10rem; - margin-top: unset !important; - margin-bottom: unset !important; - } -} - -footer { - text-align: center !important; - max-width: 15rem; -} - -@media screen and (max-width: 480px) { - .window:not(#footer) { - summary { - div:first-child { - padding: .3rem .4rem .3rem .4rem; - } - - div:nth-child(3) { - display: none !important; - } - - div:nth-child(4) { - margin-left: auto !important; - } - } - - animation: unset !important; - - section, article { - padding: .5rem; - } - - border-top: var(--accent) solid .15rem; - border-bottom: var(--accent) solid .15rem; - border-left: unset !important; - border-right: unset !important; - border-radius: unset !important; - - margin-bottom: .8em; - } - - /* window when its the first one on the page */ - .window.error { - margin-top: 5rem !important; - } -} - -@media screen and (max-width: 1083px) { - .navbar { - min-height: 1.8em !important; - max-height: 1.8em !important; - flex-wrap: wrap; - - .nav-base { - padding: .27em .2em !important; - } - .nav-left { - height: 1.9rem; - left: -.4rem; - } - .nav-left::before { - margin-left: -10rem !important; - } - .nav-baselink { - display: none !important; - } - .nav-baselink-mobile { - display: block !important; - position: absolute; - max-width: 40em; - width: max-content; - z-index: 9999; - padding: unset !important; - - a { - display: inline-flex; - align-items: center; - color: var(--foreground); - padding: .6em .7em; - text-decoration: none; - } - - a:hover { - color: var(--accent); - text-decoration: underline; - } - - ul { - background-color: var(--background); - border-bottom-right-radius: 1rem; - border-right: var(--accent) solid .15rem; - border-bottom: var(--accent) solid .15rem; - max-width: 10em; - width: auto; - margin-top: unset !important; - - li { - list-style-type: none; - margin-left: -2em; - padding-bottom: unset !important; - span { - padding-right: .4em; - } - } - } - } - .nav-baselink-mobile::before { - display: none; - } - .nav-baselink-mobile summary { - display: block !important; - margin-top: 0px !important; - background-color: var(--accent); - text-decoration: unset !important; - color: var(--background); - padding: .3em; - border-bottom-right-radius: 1rem; - width: 5.7em; - - i:not(:first-child) { - margin-left: -.5em; - margin-right: -.9em; - opacity: .6; - } - } - .nav-links { - display: none !important; - } - - .nav-right { - height: 1.4rem; - } - .nav-accessibility { - right: 7.6rem; - min-width: 1.6rem; - span { - transform: scale(1.3) translateY(-.05rem) translateX(.2rem); - } - } - .nav-systray { - padding: .27em .5em !important; - } - } -} \ No newline at end of file