diff --git a/_includes/layouts/header.njk b/_includes/layouts/header.njk index 24b5b6b..0e5ff23 100644 --- a/_includes/layouts/header.njk +++ b/_includes/layouts/header.njk @@ -1,4 +1,16 @@ -{% set css %} {% include "base.css" %} {% endset %} +{% set css %} +{% include "styles/base.css" %} +{% include "styles/font.css" %} +{% include "styles/accessibility.css" %} +{% include "styles/navbar.css" %} +{% include "styles/windows.css" %} +{% include "styles/footer.css" %} +{% include "styles/animations.css" %} +{% include "styles/icons.css" %} +{% include "styles/pages/home.css" %} +{% include "styles/pages/notebook.css" %} +{% include "styles/pages/sneexy.css" %} +{% endset %} {{ title or metadata.title }} • synth download! diff --git a/_includes/sample.css b/_includes/sample.css deleted file mode 100644 index 3c7fa17..0000000 --- a/_includes/sample.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - font-family: fantasy; -} \ No newline at end of file diff --git a/_includes/styles/accessibility.css b/_includes/styles/accessibility.css new file mode 100644 index 0000000..fc586c1 --- /dev/null +++ b/_includes/styles/accessibility.css @@ -0,0 +1,92 @@ +/* ╭───────────────────────────────────────────────────────╮ +/ │ _ _ _ _ _ _ │ +/ │ __ _ ___ ___ ___ ___ ___(_) |__ (_) (_) |_ _ _ │ +/ │ / _` |/ __/ __/ _ \/ __/ __| | '_ \| | | | __| | | | │ +/ │ | (_| | (_| (_| __/\__ \__ \ | |_) | | | | |_| |_| | │ +/ │ \__,_|\___\___\___||___/___/_|_.__/|_|_|_|\__|\__, | │ +/ │ |___/ │ +/ ╰───────────────────────────────────────────────────────╯ +/ 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; + } +} \ No newline at end of file diff --git a/_includes/styles/animations.css b/_includes/styles/animations.css new file mode 100644 index 0000000..8fc458f --- /dev/null +++ b/_includes/styles/animations.css @@ -0,0 +1,60 @@ +/* ╭───────────────────────────────────────────────────────╮ +/ │ _ _ _ │ +/ │ __ _ _ __ (_)_ __ ___ __ _| |_(_) ___ _ __ ___ │ +/ │ / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __| │ +/ │ | (_| | | | | | | | | | | (_| | |_| | (_) | | | \__ \ │ +/ │ \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/ │ +/ ╰───────────────────────────────────────────────────────╯ +/ 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% } +} \ No newline at end of file diff --git a/_includes/styles/base.css b/_includes/styles/base.css new file mode 100644 index 0000000..87bfaa5 --- /dev/null +++ b/_includes/styles/base.css @@ -0,0 +1,678 @@ +/* ╭────────────────────────╮ +/ │ _ │ +/ │ | |__ __ _ ___ ___ │ +/ │ | '_ \ / _` / __|/ _ \ │ +/ │ | |_) | (_| \__ \ __/ │ +/ │ |_.__/ \__,_|___/\___| │ +/ ╰────────────────────────╯ +/ base - styling for regular/global html elements as well as the color schemes, and anything else that doesn't fit anywhere else */ + +: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; +} + +/* ╭────────────────────────────────────────╮ +/ │ ____ _ _ │ +/ │ / __ \ _ __ ___ ___ __| (_) __ _ │ +/ │ / / _` | '_ ` _ \ / _ \/ _` | |/ _` | │ +/ │ | | (_| | | | | | | __/ (_| | | (_| | │ +/ │ \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │ +/ │ \____/ │ +/ ╰────────────────────────────────────────╯ +/ @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; + } +} \ No newline at end of file diff --git a/_includes/styles/font.css b/_includes/styles/font.css new file mode 100644 index 0000000..f377bff --- /dev/null +++ b/_includes/styles/font.css @@ -0,0 +1,523 @@ +/* ╭───────────────────────╮ +/ │ __ _ │ +/ │ / _| ___ _ __ | |_ │ +/ │ | |_ / _ \| '_ \| __| │ +/ │ | _| (_) | | | | |_ │ +/ │ |_| \___/|_| |_|\__| │ +/ ╰───────────────────────╯ +/ 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 */ + } +} \ No newline at end of file diff --git a/_includes/styles/footer.css b/_includes/styles/footer.css new file mode 100644 index 0000000..944c2a8 --- /dev/null +++ b/_includes/styles/footer.css @@ -0,0 +1,115 @@ +/* ╭────────────────────────────────╮ +/ │ __ _ │ +/ │ / _| ___ ___ | |_ ___ _ __ │ +/ │ | |_ / _ \ / _ \| __/ _ \ '__| │ +/ │ | _| (_) | (_) | || __/ | │ +/ │ |_| \___/ \___/ \__\___|_| │ +/ ╰────────────────────────────────╯ +/ 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); + } + } + } +} \ No newline at end of file diff --git a/_includes/styles/icons.css b/_includes/styles/icons.css new file mode 100644 index 0000000..66eb763 --- /dev/null +++ b/_includes/styles/icons.css @@ -0,0 +1,702 @@ +/* ╭─────────────────────────╮ +/ │ _ │ +/ │ (_) ___ ___ _ __ ___ │ +/ │ | |/ __/ _ \| '_ \/ __| │ +/ │ | | (_| (_) | | | \__ \ │ +/ │ |_|\___\___/|_| |_|___/ │ +/ ╰─────────────────────────╯ +/ 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/_includes/styles/navbar.css b/_includes/styles/navbar.css new file mode 100644 index 0000000..87c5365 --- /dev/null +++ b/_includes/styles/navbar.css @@ -0,0 +1,262 @@ +/* ╭──────────────────────────────────────╮ +/ │ _ │ +/ │ _ __ __ ___ _| |__ __ _ _ __ │ +/ │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │ +/ │ | | | | (_| |\ 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); +} \ No newline at end of file diff --git a/_includes/styles/pages/home.css b/_includes/styles/pages/home.css new file mode 100644 index 0000000..51b42e4 --- /dev/null +++ b/_includes/styles/pages/home.css @@ -0,0 +1,79 @@ +/* ╭──────────────────────────────╮ +/ │ _ │ +/ │ | |__ ___ _ __ ___ ___ │ +/ │ | '_ \ / _ \| '_ ` _ \ / _ \ │ +/ │ | | | | (_) | | | | | | __/ │ +/ │ |_| |_|\___/|_| |_| |_|\___| │ +/ ╰──────────────────────────────╯ +/ 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%; + } + } +} \ No newline at end of file diff --git a/_includes/styles/pages/notebook.css b/_includes/styles/pages/notebook.css new file mode 100644 index 0000000..179e0d7 --- /dev/null +++ b/_includes/styles/pages/notebook.css @@ -0,0 +1,99 @@ +/* ╭──────────────────────────────────────────────╮ +/ │ _ _ _ │ +/ │ _ __ ___ | |_ ___| |__ ___ ___ | | __ │ +/ │ | '_ \ / _ \| __/ _ \ '_ \ / _ \ / _ \| |/ / │ +/ │ | | | | (_) | || __/ |_) | (_) | (_) | < │ +/ │ |_| |_|\___/ \__\___|_.__/ \___/ \___/|_|\_\ │ +/ ╰──────────────────────────────────────────────╯ +/ 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; + } + } +} \ No newline at end of file diff --git a/_includes/styles/pages/sneexy.css b/_includes/styles/pages/sneexy.css new file mode 100644 index 0000000..6fc3e4f --- /dev/null +++ b/_includes/styles/pages/sneexy.css @@ -0,0 +1,180 @@ +/* ╭─────────────────────────────────────╮ +/ │ /\/| │ +/ │ |/\/___ _ __ ___ _____ ___ _ │ +/ │ / __| '_ \ / _ \/ _ \ \/ / | | | │ +/ │ \__ \ | | | __/ __/> <| |_| | │ +/ │ |___/_| |_|\___|\___/_/\_\\__, | │ +/ │ |___/ │ +/ ╰─────────────────────────────────────╯ +/ ~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; +} \ No newline at end of file diff --git a/_includes/styles/windows.css b/_includes/styles/windows.css new file mode 100644 index 0000000..7757833 --- /dev/null +++ b/_includes/styles/windows.css @@ -0,0 +1,180 @@ +/* ╭────────────────────────────────────────────╮ +/ │ _ _ │ +/ │ __ _(_)_ __ __| | _____ _____ │ +/ │ \ \ /\ / / | '_ \ / _` |/ _ \ \ /\ / / __| │ +/ │ \ 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; +} \ No newline at end of file