sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

clean up styling, redo navbar, redo settings
All checks were successful
/ build (push) Successful in 6m53s
Details

Browse source
This commit is contained in:
Ruben 2025-10-18 03:45:31 -05:00
commit 9b38e4bf15
Signed by: sneexy
GPG key ID: 8ECFA045E63BC583
15 changed files with 624 additions and 869 deletions
Download patch file Download diff file Expand all files Collapse all files

16
_includes/layouts/base.njk
View file

@ -15,12 +15,20 @@ title: base
{% include "layouts/navbar.njk" %}
<main>
{{ content | safe }}
</main>
<!-- settings windows model -->
{% include "layouts/settings.njk" %}
{% include "layouts/footer.njk" %}
<!-- main content -->
<content-wrapper>
<main>
{{ content | safe }}
</main>
{% include "layouts/footer.njk" %}
</content-wrapper>
<!-- element used for our alt popup -->
<div class="alt-popup" id="alt-popup" aria-hidden="true"></div>
</body>
</html>

5
_includes/layouts/footer.njk
View file

@ -22,7 +22,4 @@
<img src="/assets/dumpysynth.gif" alt="GIF of a synth with a massive butt, shaking it towards the viewer" />
</section>
</div>
</footer>
<!-- element used for our alt popup -->
<div class="alt-popup" id="alt-popup" aria-hidden="true"></div>
</footer>

2
_includes/layouts/header.njk
View file

@ -2,6 +2,7 @@
{% include "styles/accessibility.css" %}
{% include "styles/animations.css" %}
{% include "styles/base.css" %}
{% include "styles/colors.css" %}
{% include "styles/font.css" %}
{% include "styles/footer.css" %}
{% include "styles/icons.css" %}
@ -12,6 +13,7 @@
{% include "styles/pages/services.css" %}
{% include "styles/pages/sneexy.css" %}
{% include "styles/prism-a11y-dark.css" %}
{% include "styles/settings.css" %}
{% include "styles/windows.css" %}
{% endset %}
{% set js %}

20
_includes/layouts/home/intro.njk
View file

@ -1,17 +1,17 @@
<!-- simple site introduction -->
<article id="site" class="window home">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--message-chatbot"></span>
</div>
<titlebar-icon aria-hidden="true">
<icon-tabler message-chatbot></icon-tabler>
</titlebar-icon>
<a href="#site">Welcome!</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<section>
<p>Hey! Welcome to...</p>

147
_includes/layouts/navbar.njk
View file

@ -1,109 +1,44 @@
<!-- top navbar -->
<header class="navbar">
<a class="nav-base nav-left nav-baselink nav-desktop" aria-label="Synth.download Homepage" href="/home"><img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" /></a>
<div class="nav-base nav-left nav-baselink nav-mobile-menu">
<input type="checkbox" id="nav-mobile-menu-dropdown" value="" name="nav-mobile-menu-dropdown">
<label aria-label="Menu" for="nav-mobile-menu-dropdown" data-toggle="nav-mobile-menu">
<img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" />
</label>
<ul>
<li class="nav-home">
<a href="/home"><span class="icon tabler--home"></span> <span class="text">Home</span></a>
</li>
<li class="nav-services">
<a href="/services"><span class="icon tabler--server-cog"></span> <span class="text">Services</span></a>
</li>
<li class="nav-webmaster">
<a href="/admins"><span class="icon tabler--user"></span> <span class="text">Admins</span></a>
</li>
<li class="nav-donate">
<a href="/donate"><span class="icon tabler--currency-dollar"></span> <span class="text">Donate</span></a>
</li>
</ul>
</div>
<a class="nav-base nav-left nav-links nav-home" href="/home"><span class="icon tabler--home"></span> <span class="text">Home</span></a>
<a class="nav-base nav-left nav-links nav-services" href="/services"><span class="icon tabler--server-cog"></span> <span class="text">Services</span></a>
<a class="nav-base nav-left nav-links nav-webmaster" href="/admins"><span class="icon tabler--user"></span> <span class="text">Admins</span></a>
<a class="nav-base nav-left nav-links nav-donate" href="/donate"><span class="icon tabler--currency-dollar"></span> <span class="text">Donate</span></a>
<div class="nav-base nav-right nav-settings" aria-roledescription="Settings Menu">
<input type="checkbox" id="nav-settings-menu" value="" name="nav-settings-menu">
<label aria-label="Settings" for="nav-settings-menu" data-toggle="nav-settings">
<span class="icon tabler--settings">
</label>
<ul>
<li>
<h2>Settings</h2>
</li>
<li>
<hr class="solid">
<p class="caption section" style="font-size: smaller; opacity: .9;">Theme</p>
<p class="caption" style="color: var(--red);">Only works with JavaScript.</p>
<settings-group aria-label="Theme picker" role="radiogroup">
<label for="theme-auto"><input type="radio" id="theme-auto" name="theme-setting" value="auto" checked>Auto</label>
<label for="theme-light"><input type="radio" id="theme-light" name="theme-setting" value="light">Light</label>
<label for="theme-dark"><input type="radio" id="theme-dark" name="theme-setting" value="dark">Dark</label>
</settings-group>
</li>
<li>
<hr class="solid">
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
<span>
<input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
<label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
</span>
<span>
<input type="radio" id="font-ahn" name="font-setting" value="ahn" />
<label for="font-ahn" style="font-family: 'Atkinson Hyperlegible Next', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Atkinson Hyperlegible Next</label><br>
</span>
<span>
<input type="radio" id="font-inter" name="font-setting" value="inter" />
<label for="font-inter" style="font-family: 'Inter', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Inter</label><br>
</span>
<p class="caption" style="padding: .2rem 0px;">Support not guaranteed, but provided as options anyways:</p>
<span>
<input type="radio" id="font-sans-serif" name="font-setting" value="sans-serif" />
<label for="font-sans-serif" style="font-family: sans-serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, serif !important;">Sans Serif</label><br>
</span>
<span>
<input type="radio" id="font-serif" name="font-setting" value="serif" />
<label for="font-serif" style="font-family: serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Serif</label><br>
</span>
<span>
<input type="radio" id="font-monospace" name="font-setting" value="monospace" />
<label for="font-monospace" style="font-family: monospace, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Monospace</label><br>
</span>
</li>
<li>
<hr class="solid">
<span>
<input type="checkbox" id="uncapitalization" name="uncapitalization" />
<label for="uncapitalization">Disable forced uncapitalization</label><br>
</span>
<span>
<input type="checkbox" id="disable-bg" name="disable-bg" />
<label for="disable-bg">Disable background gradient</label><br>
</span>
<span>
<input type="checkbox" id="disable-animations" name="disable-animations" />
<label for="disable-animations">Disable animations</label><br>
</span>
<span>
<input type="checkbox" id="disable-alttext" name="disable-alttext" />
<label for="disable-alttext">Disable alt-text popup</label>
</span>
</li>
<li>
<hr class="solid">
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
<p class="caption" style="padding: .6rem 0px;">These settings are done entirely with CSS (except the Theme settings), and will be saved into your browser if you have JavaScript enabled. Otherwise, <span style="color: var(--red);">your settings will not be saved.</span></p>
</li>
</ul>
</div>
<p aria-hidden="true" class="nav-base nav-right nav-systray">
<span class="icon tabler--bell"></span>
<span class="icon tabler--volume"></span>
<span class="icon tabler--wifi"></span>
<span class="icon tabler--battery-filled"></span>
</p>
<navbar-left>
<a class="nav-base nav-baselink nav-desktop" aria-label="Synth.download Homepage" href="/home"><img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" /></a>
<div class="nav-mobile-menu">
<input type="checkbox" id="nav-mobile-menu-dropdown" value="" name="nav-mobile-menu-dropdown">
<label class="nav-base nav-baselink" aria-label="Menu" for="nav-mobile-menu-dropdown" data-toggle="nav-mobile-menu">
<img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" />
</label>
<ul>
<li class="nav-home">
<a href="/home"><icon-tabler home></icon-tabler> <span class="text">Home</span></a>
</li>
<li class="nav-services">
<a href="/services"><icon-tabler server-cog></icon-tabler> <span class="text">Services</span></a>
</li>
<li class="nav-webmaster">
<a href="/admins"><icon-tabler user></icon-tabler> <span class="text">Admins</span></a>
</li>
<li class="nav-donate">
<a href="/donate"><icon-tabler currency-dollar></icon-tabler> <span class="text">Donate</span></a>
</li>
</ul>
</div>
<a class="nav-base nav-links nav-home" href="/home"><icon-tabler home></icon-tabler> <span>Home</span></a>
<a class="nav-base nav-links nav-services" href="/services"><icon-tabler server-cog></icon-tabler> <span>Services</span></a>
<a class="nav-base nav-links nav-webmaster" href="/admins"><icon-tabler user></icon-tabler> <span>Admins</span></a>
<a class="nav-base nav-links nav-donate" href="/donate"><icon-tabler currency-dollar></icon-tabler> <span>Donate</span></a>
</navbar-left>
<navbar-right>
<div class="nav-settings">
<input type="checkbox" id="nav-settings-menu" value="" name="nav-settings-menu">
<label class="nav-base nav-baselink" aria-label="Settings" for="nav-settings-menu" data-toggle="nav-settings" aria-roledescription="Settings Menu">
<icon-tabler settings></icon-tabler>
</label>
</div>
<div aria-hidden="true" class="nav-base nav-systray">
<icon-tabler bell></icon-tabler>
<icon-tabler volume></icon-tabler>
<icon-tabler wifi></icon-tabler>
<icon-tabler battery-filled></icon-tabler>
</div>
</navbar-right>
</header>

34
_includes/layouts/settings.njk Normal file
View file

@ -0,0 +1,34 @@
<settings-area>
<settings-model>
<h2 style="margin-bottom: 0;">Settings</h2>
<p class="caption" style="color: var(--red); margin-top: .4rem;">Settings are saved with JavaScript enabled.</p>
<hr class="solid">
<div class="container">
<settings-section theme>
<h3>Theme</h3>
<radio-button-group aria-label="Theme picker" role="radiogroup">
<label for="theme-auto"><input type="radio" id="theme-auto" name="theme-setting" value="auto" checked>Auto</label>
<label for="theme-light"><input type="radio" id="theme-light" name="theme-setting" value="light">Light</label>
<label for="theme-dark"><input type="radio" id="theme-dark" name="theme-setting" value="dark">Dark</label>
</radio-button-group>
</settings-section>
<settings-section font>
<h3>Font</h3>
<radio-button-group aria-label="Font selector" role="radiogroup">
<label for="font-monospace" style="font-family: monospace !important;"><input type="radio" id="font-monospace" name="font-setting" value="monospace" checked>Monospace</label>
<label for="font-sserif" style="font-family: sans-serif !important;"><input type="radio" id="font-sserif" name="font-setting" value="sserif">Sans Serif</label>
<label for="font-serif" style="font-family: serif !important;"><input type="radio" id="font-serif" name="font-setting" value="serif">Serif</label>
</radio-button-group>
</settings-section>
<settings-section appearance>
<h3>Appearance</h3>
<checkbox-button-group aria-label="Appearance options" role="group">
<label for="uncapitalization" aria-label="Normalizes text capitalization when enabled."><input type="checkbox" id="uncapitalization" name="uncapitalization">Disable forced uncapitalization</label>
<label for="disable-bg" aria-label="Removes the scrolling site background."><input type="checkbox" id="disable-bg" name="disable-bg">Disable background</label>
<label for="disable-animations" aria-label="Disables all CSS animations site-wide."><input type="checkbox" id="disable-animations" name="disable-animations">Disable animations</label>
<label for="disable-alttext" aria-label="Disables the (this!) custom hoverover pop-up that displays alt text on media and options."><input type="checkbox" id="disable-alttext" name="disable-alttext">Disable alt-text popup</label>
</checkbox-button-group>
</settings-section>
</div>
</settings-model>
</settings-area>

6
_includes/scripts/close.js
View file

@ -1,7 +1,7 @@
// unnick asked for this, i provide.
// this provides no usefulness and there is no implementation to respawn windows. but i think it's funny and you can just reload anyways since it doesn't take long to load anyways
// this provides no usefulness and there is no implementation to respawn windows. but i think it's funny and you can just reload
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".close-button").forEach(e => {
e.onclick = () => e.parentElement.parentElement.remove();
document.querySelectorAll("close-button").forEach(e => {
e.onclick = () => e.parentElement.parentElement.parentElement.remove();
});
});

18
_includes/scripts/settings.js
View file

@ -9,7 +9,6 @@ document.addEventListener("DOMContentLoaded", function() {
// load saved settings
loadSettings();
applyTheme();
// event listeners on all inputs
fontInputs.forEach(input => {
@ -19,7 +18,6 @@ document.addEventListener("DOMContentLoaded", function() {
themeInputs.forEach(input => {
input.addEventListener('change', function() {
saveSettings();
applyTheme();
});
});
@ -78,20 +76,4 @@ document.addEventListener("DOMContentLoaded", function() {
disableAlttextCheckbox.checked = true;
}
}
// apply the theme based on user preference
function applyTheme() {
const selectedTheme = document.querySelector('input[name="theme-setting"]:checked').value;
// remove any existing theme
document.documentElement.removeAttribute('data-theme');
// apply the selected theme
if (selectedTheme === 'light') {
document.documentElement.setAttribute('data-theme', 'light');
} else if (selectedTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
// if auto, don't set a data-theme attribute, let the media query handle it
}
});

46
_includes/styles/accessibility.css
View file

@ -8,40 +8,30 @@
/ ╰───────────────────────────────────────────────────────╯
/ accessibility - choosable accessibility settings */
/* - font settings - */
:root {
color-scheme: light dark; /* by default, automatically use light mode */
/* 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;
/* theme selector */
&:has(#theme-light:checked) {
color-scheme: light !important;
}
}
/* atkinson hyperlegible next */
:root:has(#font-ahn:checked) {
--font-family: 'Atkinson Hyperlegible Next', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
}
&:has(#theme-dark:checked) {
color-scheme: dark !important;
}
/* inter */
:root:has(#font-inter:checked) {
--font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
}
/* font selector */
&:has(#font-monospace:checked) { /* monospace */
--font-family: monospace, system-ui, -apple-system, sans-serif;
}
/* (browser) sans serif */
:root:has(#font-sans-serif:checked) {
--font-family: sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui;
}
&:has(#font-sserif:checked) { /* sans seris */
--font-family: sans-serif, 'Segoe UI', system-ui, -apple-system;
}
/* (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;
&:has(#font-serif:checked) { /* serif */
--font-family: serif, sans-serif, system-ui, -apple-system;
}
}
/* - misc - */

302
_includes/styles/base.css
View file

@ -7,205 +7,6 @@
/ ╰────────────────────────╯
/ 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: #ffaa33;
--link: #9f5e03;
/* 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: #d29f12;
--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;
--link: var(--accent);
/* 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;
--link: #9f5e03;
/* 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: #d29f12;
--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;
--link: var(--accent);
/* 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 -
---------------------------------- */
@ -219,6 +20,7 @@ html {
body {
font-family: var(--font-family);
font-size: 1.05rem;
line-height: 1.45rem;
text-transform: lowercase;
margin: unset !important;
}
@ -247,6 +49,31 @@ bg-image {
z-index: -10000;
}
content-wrapper {
display: flex;
flex-direction: column;
gap: 2rem;
margin-bottom: 4rem;
margin-left: auto;
margin-right: auto;
margin-top: 5rem;
max-width: 60rem;
transition: opacity .5s, translate .5s;
opacity: 1;
translate: 0 0;
@starting-style {
opacity: 0;
translate: 0 1rem;
}
@media screen and (max-width: 60rem) {
gap: 1.5rem;
margin-bottom: 1rem;
margin-top: 3.4rem;
}
}
/* text formatting and config stuff */
/* headings */
@ -741,9 +568,7 @@ html:has(input[type="checkbox"]#spoil-nsfw-content:checked) {
}
}
/* ---------------
- alt text popup -
--------------- */
/* alt text popup */
.alt-popup {
position: fixed;
@ -762,6 +587,79 @@ html:has(input[type="checkbox"]#spoil-nsfw-content:checked) {
transition: opacity 0.4s;
}
/* widgets */
radio-button-group {
display: flex;
gap: .4rem;
label {
border: .13rem solid var(--border);
border-radius: .4rem;
padding: .2rem;
cursor: pointer;
&:has(input:checked) {
border-color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 30%, var(--background));
}
&:hover, &:focus-visible {
background: var(--hover);
}
}
input {
/* allows screen readers to still access these - see https://lyra.horse/blog/2025/08/you-dont-need-js */
opacity: 0;
position: absolute;
pointer-events: none;
}
}
checkbox-button-group {
display: flex;
flex-flow: column;
gap: .5rem;
label {
border-radius: .4rem;
border: .13rem solid var(--border);
cursor: pointer;
margin-right: .3rem;
padding: .2rem;
width: max-content;
&:has(input:checked) {
border-color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 30%, var(--background));
&::after {
background: var(--green);
border-radius: 10rem;
content: '';
display: inline-flex;
height: 1.5rem;
margin-left: -.2rem;
margin-top: -.9rem;
position: absolute;
width: 1.5rem;
}
}
&:hover, &:focus-visible {
background: var(--hover);
}
}
input {
/* allows screen readers to still access these - see https://lyra.horse/blog/2025/08/you-dont-need-js */
opacity: 0;
position: absolute;
pointer-events: none;
}
}
/* ╭────────────────────────────────────────╮
/ │ ____ _ _ │
/ │ / __ \ _ __ ___ ___ __| (_) __ _ │

98
_includes/styles/colors.css
View file

@ -7,6 +7,36 @@
*/
:root {
--background: light-dark(#fafafa, #121418);
--foreground: light-dark(#575f66, #caccd3);
--accent: light-dark(#f2ae49, #efbd58);
--link: light-dark(hsl(from var(--accent) h s calc(l - 30)), var(--accent))
/* light theme is Ayu Light, dark theme is modified Astrodark */
--black: light-dark(#8A9199, #576176);
--red: light-dark(#F51818, #FAA5AB);
--green: light-dark(#86B300, #A5CD84);
--yellow: light-dark(#F2AE49, #EFBD58);
--blue: light-dark(#399EE6, #8DC3F1);
--purple: light-dark(#A37ACC, #DEAEED);
--cyan: light-dark(#4CBF99, #27FFDF);
--white: light-dark(#FAFAFA, #CACCD3);
--dark-black: light-dark(#575F66, #111317);
--dark-red: light-dark(#F51818, #F8747E);
--dark-green: light-dark(#86B300, #75AD47);
--dark-yellow: light-dark(#F2AE49, #D09214);
--dark-blue: light-dark(#399EE6, #50A4E9);
--dark-purple: light-dark(#A37ACC, #CC83E3);
--dark-cyan: light-dark(#4CBF99, #00B298);
--dark-white: light-dark(#FAFAFA, #ADB0BB);
--border: light-dark(hsl(from var(--foreground) h s calc(l + 45)), hsl(from var(--background) h s calc(l + 15)));
--hover: light-dark(hsl(from var(--background) h s calc(l - 20)), hsl(from var(--background) h s calc(l + 10)));
--shadow: light-dark(rgba(from var(--foreground) r g b / .8), rgba(from var(--background) r g b / .8));
--focused: light-dark(var(--dark-purple), var(--dark-purple))
--pagefind-ui-font: var(--font-family);
--pagefind-ui-primary: var(--foreground);
--pagefind-ui-text: var(--foreground);
@ -14,72 +44,4 @@
--pagefind-ui-border: var(--accent);
--pagefind-ui-tag: var(--background);
--site-border: .1rem solid var(--border);
color-scheme: light dark; /* by default, automatically use light mode */
}
/* Ayu Light */
@media (prefers-color-scheme: light) {
:root {
--background: #fafafa;
--foreground: #575f66;
--accent: #f2ae49;
--link: hsl(from var(--accent) h s calc(l - 30)); /* darken for light */
--black: #8A9199;
--red: #F51818;
--green: #86B300;
--yellow: #F2AE49;
--blue: #399EE6;
--purple: #A37ACC;
--cyan: #4CBF99;
--white: #FAFAFA;
--dark-black: #575F66;
--dark-red: #F51818;
--dark-green: #86B300;
--dark-yellow: #F2AE49;
--dark-blue: #399EE6;
--dark-purple: #A37ACC;
--dark-cyan: #4CBF99;
--dark-white: #FAFAFA;
--border: hsl(from var(--foreground) h s calc(l + 10));
--hover: hsl(from var(--background) h s calc(l - 20));;
--shadow: rgba(from var(--foreground) r g b / .8);
--focused: var(--dark-purple)
}
}
/* Astrodark */
@media (prefers-color-scheme: dark) {
:root {
--background: #1a1d23;
--foreground: #caccd3;
--accent: #efbd58;
--link: var(--accent);
--black: #576176;
--red: #FAA5AB;
--green: #A5CD84;
--yellow: #EFBD58;
--blue: #8DC3F1;
--purple: #DEAEED;
--cyan: #27FFDF;
--white: #CACCD3;
--dark-black: #111317;
--dark-red: #F8747E;
--dark-green: #75AD47;
--dark-yellow: #D09214;
--dark-blue: #50A4E9;
--dark-purple: #CC83E3;
--dark-cyan: #00B298;
--dark-white: #ADB0BB;
--border: hsl(from var(--background) h s calc(l + 40));
--hover: hsl(from var(--background) h s calc(l + 20));;
--shadow: rgba(from var(--background) r g b / .8);
--focused: var(--dark-purple)
}
}

144
_includes/styles/icons.css
View file

@ -7,80 +7,80 @@
/ ╰─────────────────────────╯
/ icons - tabler icons done through css, generate via https://icon-sets.iconify.design/tabler */
.icon {
display: inline-block;
width: 1.3rem;
height: 1.3rem;
vertical-align: top;
background-color: currentColor;
icon-tabler {
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
background-color: currentColor;
display: inline-flex;
height: 1.5rem;
mask-image: var(--svg);
mask-repeat: no-repeat;
mask-size: 100% 100%;
}
vertical-align: bottom;
width: 1.5rem;
.tabler--accessible { --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"); }
.tabler--alert-triangle { --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 9v4m-1.637-9.409L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0zM12 16h.01'/%3E%3C/svg%3E"); }
.tabler--arrow-autofit-height { --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"); }
.tabler--arrow-forward { --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 11l4 4l-4 4m4-4H8a4 4 0 0 1 0-8h1'/%3E%3C/svg%3E"); }
.tabler--arrow-left { --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"); }
.tabler--arrow-right { --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"); }
.tabler--article { --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"); }
.tabler--battery-filled { --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"); }
.tabler--bell { --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"); }
.tabler--brand-git { --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"); }
.tabler--brand-github { --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"); }
.tabler--brand-lastfm { --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"); }
.tabler--brand-mastodon { --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"); }
.tabler--brand-metabrainz { --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"); }
.tabler--brand-tabler { --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"); }
.tabler--building-bank { --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"); }
.tabler--bulb { --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 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7l-.7.7M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0-1 3a2 2 0 0 1-4 0a3.5 3.5 0 0 0-1-3m.7 1h4.6'/%3E%3C/svg%3E"); }
.tabler--chevron-down { --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 9l6 6l6-6'/%3E%3C/svg%3E"); }
.tabler--cloud-network { --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 20h7m4 0h7m-11 0a2 2 0 1 0 4 0a2 2 0 0 0-4 0m2-4v2m-4-1.996H6.657C4.085 16 2 13.993 2 11.517s2.085-4.482 4.657-4.482c.393-1.762 1.794-3.2 3.675-3.773c1.88-.572 3.956-.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486s-1.551 3.487-3.465 3.487H16'/%3E%3C/svg%3E"); }
.tabler--corner-down-right { --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"); }
.tabler--currency-dollar { --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"); }
.tabler--database-share { --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='M4 6c0 1.657 3.582 3 8 3s8-1.343 8-3s-3.582-3-8-3s-8 1.343-8 3'/%3E%3Cpath d='M4 6v6c0 1.657 3.582 3 8 3q.541 0 1.065-.026M20 13V6'/%3E%3Cpath d='M4 12v6c0 1.657 3.582 3 8 3m4 1l5-5m0 4.5V17h-4.5'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--device-gamepad-2 { --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 5h3.5a5 5 0 0 1 0 10H10l-4.015 4.227a2.3 2.3 0 0 1-3.923-2.035l1.634-8.173A5 5 0 0 1 8.6 5z'/%3E%3Cpath d='m14 15l4.07 4.284a2.3 2.3 0 0 0 3.925-2.023l-1.6-8.232M8 9v2m-1-1h2m5 0h2'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--device-mobile { --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 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm5-1h2m-1 13v.01'/%3E%3C/svg%3E"); }
.tabler--external-link { --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 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5'/%3E%3C/svg%3E"); }
.tabler--grid-dots { --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"); }
.tabler--heart { --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"); }
.tabler--help { --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 0m9 5v.01'/%3E%3Cpath d='M12 13.5a1.5 1.5 0 0 1 1-1.5a2.6 2.6 0 1 0-3-4'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--home { --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"); }
.tabler--info-circle { --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"); }
.tabler--letter-case { --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"); }
.tabler--link { --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"); }
.tabler--list-tree { --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 6h11m-8 6h8m-5 6h5M5 6v.01M8 12v.01M11 18v.01'/%3E%3C/svg%3E"); }
.tabler--lock { --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 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3-5V7a4 4 0 1 1 8 0v4'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--login { --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 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M21 12H8l3-3m0 6l-3-3'/%3E%3C/g%3E%3C/svg%3E");}
.tabler--mail { --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"); }
.tabler--maximize { --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"); }
.tabler--message-chatbot { --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"); }
.tabler--minimize { --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"); }
.tabler--mood-empty { --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"); }
.tabler--mood-look-up { --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"); }
.tabler--mood-sad-dizzy { --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"); }
.tabler--mood-smile { --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 0m6-2h.01M15 10h.01'/%3E%3Cpath d='M9.5 15a3.5 3.5 0 0 0 5 0'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--notebook { --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"); }
.tabler--notes { --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"); }
.tabler--palette { --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"); }
.tabler--planet { --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.816 13.58c2.292 2.138 3.546 4 3.092 4.9c-.745 1.46-5.783-.259-11.255-3.838c-5.47-3.579-9.304-7.664-8.56-9.123c.464-.91 2.926-.444 5.803.805'/%3E%3Cpath d='M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--robot-face { --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"); }
.tabler--rosette-discount-check { --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 7.2A2.2 2.2 0 0 1 7.2 5h1a2.2 2.2 0 0 0 1.55-.64l.7-.7a2.2 2.2 0 0 1 3.12 0l.7.7c.412.41.97.64 1.55.64h1a2.2 2.2 0 0 1 2.2 2.2v1c0 .58.23 1.138.64 1.55l.7.7a2.2 2.2 0 0 1 0 3.12l-.7.7a2.2 2.2 0 0 0-.64 1.55v1a2.2 2.2 0 0 1-2.2 2.2h-1a2.2 2.2 0 0 0-1.55.64l-.7.7a2.2 2.2 0 0 1-3.12 0l-.7-.7a2.2 2.2 0 0 0-1.55-.64h-1a2.2 2.2 0 0 1-2.2-2.2v-1a2.2 2.2 0 0 0-.64-1.55l-.7-.7a2.2 2.2 0 0 1 0-3.12l.7-.7A2.2 2.2 0 0 0 5 8.2z'/%3E%3Cpath d='m9 12l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--rss { --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"); }
.tabler--server-cog { --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 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm9 13H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h10.5m-.5 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V16m0 4v1.5m3.032-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75M7 8v.01M7 16v.01'/%3E%3C/svg%3E"); }
.tabler--settings { --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"); }
.tabler--text-size { --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"); }
.tabler--thumb-down { --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"); }
.tabler--thumb-up { --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"); }
.tabler--universe { --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"); }
.tabler--user { --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"); }
.tabler--user-cog { --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-4h2.5m4.501 4a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V17m0 4v1.5m3.031-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75'/%3E%3C/svg%3E"); }
.tabler--user-heart { --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"); }
.tabler--user-plus { --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 0m8 12h6m-3-3v6M6 21v-2a4 4 0 0 1 4-4h4'/%3E%3C/svg%3E"); }
.tabler--volume { --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"); }
.tabler--wifi { --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"); }
.tabler--x { --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"); }
&[accessible] { --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"); }
&[alert-triangle] { --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 9v4m-1.637-9.409L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0zM12 16h.01'/%3E%3C/svg%3E"); }
&[arrow-autofit-height] { --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"); }
&[arrow-forward] { --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 11l4 4l-4 4m4-4H8a4 4 0 0 1 0-8h1'/%3E%3C/svg%3E"); }
&[arrow-left] { --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"); }
&[arrow-right] { --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"); }
&[article] { --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"); }
&[battery-filled] { --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"); }
&[bell] { --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"); }
&[brand-git] { --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"); }
&[brand-github] { --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"); }
&[brand-lastfm] { --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"); }
&[brand-mastodon] { --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"); }
&[brand-metabrainz] { --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"); }
&[brand-tabler] { --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"); }
&[building-bank] { --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"); }
&[bulb] { --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 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7l-.7.7M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0-1 3a2 2 0 0 1-4 0a3.5 3.5 0 0 0-1-3m.7 1h4.6'/%3E%3C/svg%3E"); }
&[chevron-down] { --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 9l6 6l6-6'/%3E%3C/svg%3E"); }
&[cloud-network] { --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 20h7m4 0h7m-11 0a2 2 0 1 0 4 0a2 2 0 0 0-4 0m2-4v2m-4-1.996H6.657C4.085 16 2 13.993 2 11.517s2.085-4.482 4.657-4.482c.393-1.762 1.794-3.2 3.675-3.773c1.88-.572 3.956-.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486s-1.551 3.487-3.465 3.487H16'/%3E%3C/svg%3E"); }
&[corner-down-right] { --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"); }
&[currency-dollar] { --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"); }
&[database-share] { --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='M4 6c0 1.657 3.582 3 8 3s8-1.343 8-3s-3.582-3-8-3s-8 1.343-8 3'/%3E%3Cpath d='M4 6v6c0 1.657 3.582 3 8 3q.541 0 1.065-.026M20 13V6'/%3E%3Cpath d='M4 12v6c0 1.657 3.582 3 8 3m4 1l5-5m0 4.5V17h-4.5'/%3E%3C/g%3E%3C/svg%3E"); }
&[device-gamepad-2] { --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 5h3.5a5 5 0 0 1 0 10H10l-4.015 4.227a2.3 2.3 0 0 1-3.923-2.035l1.634-8.173A5 5 0 0 1 8.6 5z'/%3E%3Cpath d='m14 15l4.07 4.284a2.3 2.3 0 0 0 3.925-2.023l-1.6-8.232M8 9v2m-1-1h2m5 0h2'/%3E%3C/g%3E%3C/svg%3E"); }
&[device-mobile] { --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 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm5-1h2m-1 13v.01'/%3E%3C/svg%3E"); }
&[external-link] { --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 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5'/%3E%3C/svg%3E"); }
&[grid-dots] { --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"); }
&[heart] { --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"); }
&[help] { --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 0m9 5v.01'/%3E%3Cpath d='M12 13.5a1.5 1.5 0 0 1 1-1.5a2.6 2.6 0 1 0-3-4'/%3E%3C/g%3E%3C/svg%3E"); }
&[home] { --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"); }
&[info-circle] { --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"); }
&[letter-case] { --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"); }
&[link] { --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"); }
&[list-tree] { --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 6h11m-8 6h8m-5 6h5M5 6v.01M8 12v.01M11 18v.01'/%3E%3C/svg%3E"); }
&[lock] { --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 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3-5V7a4 4 0 1 1 8 0v4'/%3E%3C/g%3E%3C/svg%3E"); }
&[login] { --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 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M21 12H8l3-3m0 6l-3-3'/%3E%3C/g%3E%3C/svg%3E");}
&[mail] { --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"); }
&[maximize] { --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"); }
&[message-chatbot] { --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"); }
&[minimize] { --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"); }
&[mood-empty] { --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"); }
&[mood-look-up] { --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"); }
&[mood-sad-dizzy] { --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"); }
&[mood-smile] { --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 0m6-2h.01M15 10h.01'/%3E%3Cpath d='M9.5 15a3.5 3.5 0 0 0 5 0'/%3E%3C/g%3E%3C/svg%3E"); }
&[notebook] { --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"); }
&[notes] { --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"); }
&[palette] { --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"); }
&[planet] { --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.816 13.58c2.292 2.138 3.546 4 3.092 4.9c-.745 1.46-5.783-.259-11.255-3.838c-5.47-3.579-9.304-7.664-8.56-9.123c.464-.91 2.926-.444 5.803.805'/%3E%3Cpath d='M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0'/%3E%3C/g%3E%3C/svg%3E"); }
&[robot-face] { --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"); }
&[rosette-discount-check] { --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 7.2A2.2 2.2 0 0 1 7.2 5h1a2.2 2.2 0 0 0 1.55-.64l.7-.7a2.2 2.2 0 0 1 3.12 0l.7.7c.412.41.97.64 1.55.64h1a2.2 2.2 0 0 1 2.2 2.2v1c0 .58.23 1.138.64 1.55l.7.7a2.2 2.2 0 0 1 0 3.12l-.7.7a2.2 2.2 0 0 0-.64 1.55v1a2.2 2.2 0 0 1-2.2 2.2h-1a2.2 2.2 0 0 0-1.55.64l-.7.7a2.2 2.2 0 0 1-3.12 0l-.7-.7a2.2 2.2 0 0 0-1.55-.64h-1a2.2 2.2 0 0 1-2.2-2.2v-1a2.2 2.2 0 0 0-.64-1.55l-.7-.7a2.2 2.2 0 0 1 0-3.12l.7-.7A2.2 2.2 0 0 0 5 8.2z'/%3E%3Cpath d='m9 12l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E"); }
&[rss] { --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"); }
&[server-cog] { --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 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm9 13H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h10.5m-.5 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V16m0 4v1.5m3.032-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75M7 8v.01M7 16v.01'/%3E%3C/svg%3E"); }
&[settings] { --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"); }
&[text-size] { --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"); }
&[thumb-down] { --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"); }
&[thumb-up] { --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"); }
&[universe] { --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"); }
&[user] { --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"); }
&[user-cog] { --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-4h2.5m4.501 4a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V17m0 4v1.5m3.031-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75'/%3E%3C/svg%3E"); }
&[user-heart] { --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"); }
&[user-plus] { --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 0m8 12h6m-3-3v6M6 21v-2a4 4 0 0 1 4-4h4'/%3E%3C/svg%3E"); }
&[volume] { --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"); }
&[wifi] { --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"); }
&[x] { --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"); }
}

457
_includes/styles/navbar.css
View file

@ -8,78 +8,192 @@
/ 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;
display: flex;
flex-direction: row;
inset: 0 !important;
width: 100% !important;
height: 1.8rem;
max-height: 1.8rem !important;
padding: .4rem .6rem .4rem .6rem;
position: fixed;
transition: .2s background-color;
vertical-align: middle;
z-index: 100;
.nav-base {
padding: 0px .2em !important;
align-content: center;
outline: .13rem solid var(--border);
border-radius: 1rem;
height: 1.9rem;
navbar-left {
display: inline-flex;
flex-direction: row;
gap: .5rem;
}
.nav-left {
margin-left: .6rem !important;
padding: 0px .5rem .1rem !important;
navbar-right {
display: inline-flex;
flex-direction: row;
gap: .5rem;
margin-left: auto;
margin-right: .7rem;
}
.nav-base {
align-content: center;
border-radius: 1rem;
display: inline-flex;
flex-direction: row;
height: 1.9rem;
outline: .13rem solid var(--border);
overflow: hidden;
padding: 0px .2em !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;
transition: .2s ease-out;
width: 2rem;
}
}
.nav-baselink:hover, .nav-baselink:focus-visible {
.synth-icon {
transition: all .2s ease-out;
transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg);
&:hover, &:focus-visible {
.synth-icon {
transition: .2s ease-out;
transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg);
}
}
}
.nav-desktop {
overflow: hidden;
}
.nav-mobile-menu {
display: none;
position: relative;
input[type="checkbox"] {
left: -100vw;
position: absolute;
}
label {
cursor: pointer;
}
ul {
background-color: var(--background);
border-radius: 1rem;
border: var(--accent) solid .15rem;
height: max-content;
left: 0;
margin-top: 2.2rem !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;
}
.icon {
padding-right: .3em;
transition: .2s all;
}
}
li:hover {
transition: .2s all;
.icon {
transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg);
transition: .2s all;
}
}
.nav-home:hover,
.nav-home:focus-visible {
background-color: color-mix(in srgb, var(--accent) 20%, transparent);
a {
color: var(--foreground);
}
}
.nav-notebook:hover,
.nav-home:focus-visible {
background-color: color-mix(in srgb, var(--purple) 20%, transparent);
a {
color: var(--foreground);
}
}
.nav-services:hover,
.nav-services:focus-visible {
background-color: color-mix(in srgb, var(--blue) 20%, transparent);
a {
color: var(--foreground);
}
}
.nav-webmaster:hover,
.nav-home:focus-visible {
background-color: color-mix(in srgb, var(--green) 20%, transparent);
a {
color: var(--foreground);
}
}
.nav-donate:hover,
.nav-home:focus-visible {
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 {
align-items: center;
background-color: var(--background);
color: var(--foreground);
overflow: clip;
position: relative;
padding: 0 .4rem !important;
text-shadow: none;
transition: all .3s;
.text {
span {
opacity: 0;
position: absolute;
transition: all .3s;
@ -87,26 +201,27 @@
white-space: nowrap;
}
.icon {
transform: scale(1.1);
icon-tabler {
transition: all .3s;
}
}
.nav-links:hover, .nav-links:focus-visible {
padding-right: 9rem !important;
padding-bottom: 7rem !important;
transition: all .3s;
.nav-links {
&:hover, &:focus-visible {
padding-right: 9rem !important;
padding-bottom: 7rem !important;
transition: .3s;
.text {
opacity: 1;
transform: scale(1.5) translateX(-.4rem);
transition: all .3s;
}
span {
opacity: 1;
transform: scale(1.5) translateX(.7rem) translateY(.1rem);
transition: .3s;
}
.icon {
transform: scale(5) translateY(.9rem) translateX(.4rem) rotate(10deg);
transition: all .3s;
icon-tabler {
transform: scale(5) translateY(.85rem) translateX(.5rem) rotate(10deg);
transition: .3s;
}
}
}
@ -156,47 +271,11 @@
}
}
.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"]#nav-settings-menu {
left: -100vw;
position: absolute;
}
settings-group {
display: flex;
label {
&:has(input:checked) {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 20%, var(--background));
}
border: .1rem solid var(--comment);
border-radius: .4rem;
padding: .2rem;
margin-right: .3rem;
cursor: pointer;
}
input {
/* allows screen readers to still access these - see https://lyra.horse/blog/2025/08/you-dont-need-js */
opacity: 0;
position: absolute;
pointer-events: none;
}
}
input[type="checkbox"]#nav-settings-menu:focus-visible {
left: unset !important;
@ -204,83 +283,42 @@
label[data-toggle="nav-settings"] {
cursor: pointer;
overflow: hidden !important;
padding: .3rem .5rem !important;
position: relative;
align-items: center;
.icon {
padding: 0 .5rem !important;
icon-tabler {
padding: 0 .4rem !important;
pointer-events: none;
transform: translateY(.1rem) scale(1.5);
transition: all 1.3s;
transform: scale(1.3);
transition: 1.3s;
}
}
label[data-toggle="nav-settings"]:hover ,label[data-toggle="nav-settings"]:focus-visible {
.icon {
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;
&:hover, &:focus-visible {
icon-tabler {
transform: scale(1.3) rotate(360deg);
}
}
}
input[type="checkbox"]#nav-settings-menu: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;
&:has(input[type="checkbox"]#nav-settings-menu:checked) {
label[data-toggle="nav-settings"] {
background-color: var(--red);
outline-color: color-mix(in srgb, var(--red) 70%, transparent);
icon-tabler[settings] {
--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");
}
}
}
}
.nav-systray {
align-items: center;
background-color: var(--background);
color: var(--foreground);
padding: 0px .1rem;
min-width: 6.45rem;
display: inline-flex;
flex-direction: row;
gap: .2rem;
margin-right: .4rem !important;
}
a,
p {
margin: unset !important;
padding: 0 .4rem !important;
}
small {
@ -353,133 +391,14 @@ html[data-theme="dark"] {
}
/* modify widths and spacing depending on the size of the display */
@media screen and (max-width: 1083px) {
@media screen and (max-width: 35rem) {
.navbar {
.nav-desktop {
display: none !important;
}
.nav-mobile-menu {
display: inline-block !important;
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;
}
.icon {
padding-right: .3em;
transition: .2s all;
}
}
li:hover {
transition: .2s all;
.icon {
transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg);
transition: .2s all;
}
}
.nav-home:hover, .nav-home:focus-visible {
background-color: color-mix(in srgb, var(--accent) 20%, transparent);
a {
color: var(--foreground);
}
}
.nav-notebook:hover, .nav-home:focus-visible {
background-color: color-mix(in srgb, var(--purple) 20%, transparent);
a {
color: var(--foreground);
}
}
.nav-services:hover, .nav-services:focus-visible {
background-color: color-mix(in srgb, var(--blue) 20%, transparent);
a {
color: var(--foreground);
}
}
.nav-webmaster:hover, .nav-home:focus-visible {
background-color: color-mix(in srgb, var(--green) 20%, transparent);
a {
color: var(--foreground);
}
}
.nav-donate:hover, .nav-home:focus-visible {
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;
}
display: inline-flex !important;
}
.nav-links {

67
_includes/styles/settings.css Normal file
View file

@ -0,0 +1,67 @@
:root:has(input[type="checkbox"]#nav-settings-menu:checked) {
settings-area {
opacity: 1;
transition: opacity .3s, scale .3s, visibility .3s;
visibility: visible;
settings-model {
scale: 1;
}
}
}
settings-area {
/* inital state for animations */
opacity: 0;
transform-origin: center;
transition: opacity .3s, scale .3s, visibility .3s;
visibility: hidden;
align-items: center;
background: linear-gradient(#00000000, #121418);
display: flex;
inset: 0;
justify-content: center;
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
top: 3rem;
z-index: 999;
settings-model {
background: var(--background);
border-radius: .4rem;
outline: .13rem solid var(--border);
padding: .6rem;
position: static;
scale: .5;
transition: .2s;
width: 40rem;
&:hover {
outline-color: var(--accent);
}
.container {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
settings-section {
margin-right: auto;
}
}
}
@media screen and (max-width: 40rem) {
settings-model {
border-radius: 0;
}
}
@media screen and (max-width: 28.8rem) {
settings-model {
margin-top: 5rem;
}
}
}

131
_includes/styles/windows.css
View file

@ -12,13 +12,14 @@
border-radius: 2rem .6rem 2rem .6rem;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
color: var(--foreground);
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
max-width: 60em;
outline: var(--accent) solid .15rem;
overflow: clip;
transition: .2s outline;
transition: .2s;
&:hover {
outline: var(--accent) solid .5rem;
transition: .2s;
}
.header {
background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
@ -29,21 +30,18 @@
text-align: center;
vertical-align: middle;
.titlebar-icon {
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);
titlebar-icon {
background: color-mix(in srgb, var(--accent) 30%, transparent);
border-bottom-right-radius: 1rem;
border-bottom: .2rem solid var(--accent);
border-right: .2rem solid var(--accent);
margin-bottom: -.2rem;
span {
background-color: var(--foreground);
}
padding: .4rem .3rem .4rem 1rem;
}
a {
padding: .3rem 0rem .3rem .5rem;
align-self: center;
padding-left: .5rem;
text-decoration: none;
color: var(--foreground);
}
@ -52,46 +50,28 @@
text-decoration: underline;
}
.icon {
transform: scale(1.1);
}
window-controls {
margin: auto 0 auto auto;
.window-buttons {
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;
icon-tabler[minimize], icon-tabler[maximize] {
cursor: not-allowed;
margin-right: -.2rem;
}
}
.close-button {
background: color-mix(in srgb, var(--accent) 40%, transparent);
close-button {
background: color-mix(in srgb, var(--accent) 30%, transparent);
border-bottom-left-radius: 1rem;
border-bottom: .2rem solid var(--accent);
border-left: .2rem solid var(--accent);
color: var(--foreground);
cursor: pointer;
margin-bottom: -.2rem;
padding: .4rem .5rem .2rem .6rem;
transition: background .2s, background-color .2s;
}
padding: .5rem .3rem .4rem .4rem;
transition: .2s;
/* close button (animated on hover) */
.close-button:hover {
background: var(--red);
transition: background .2s;
span {
background-color: var(--background);
transition: background-color .2s;
&:hover {
background: var(--red);
icon-tabler { background-color: var(--background); }
}
}
}
@ -99,53 +79,34 @@
section, article {
padding: .8rem;
}
}
/* window styling when hovered */
.window:hover {
outline: var(--accent) solid .5rem;
transition: .2s outline;
}
@media screen and (max-width: 60rem) {
&:not(#footer) {
.header {
titlebar-icon {
padding: .3rem .4rem .3rem .4rem;
}
/* window when its the first one on the page */
.window:first-of-type {
margin-top: 5rem;
window-controls {
icon-tabler[minimize], icon-tabler[maximize] {
display: none !important;
}
animation: .3s ease-out .2s 1 window-appear;
animation-fill-mode: backwards;
}
/* modify widths and spacing depending on the size of the display */
@media screen and (max-width: 1083px) {
.window:not(#footer) {
.header {
.titlebar-icon {
padding: .3rem .4rem .3rem .4rem;
close-button {
padding: .4rem .3rem .3rem .4rem;
}
}
}
.window-buttons {
display: none !important;
main, section, article {
padding: .5rem;
}
.close-button {
margin-left: auto !important;
}
border-bottom: var(--accent) solid .15rem;
border-left: unset !important;
border-radius: unset !important;
border-right: unset !important;
border-top: var(--accent) solid .15rem;
}
main, section, article {
padding: .5rem;
}
border-bottom: var(--accent) solid .15rem;
border-left: unset !important;
border-radius: unset !important;
border-right: unset !important;
border-top: var(--accent) solid .15rem;
margin-bottom: .8em;
}
/* window when its the first one on the page */
.window:first-child {
margin-top: 3.4rem !important;
}
}