veryroundbird / distanthomes.themes

/* ==UserStyle== @name distanthomes.guide @namespace github.com/openstyles/stylus @version 1.0.0 @description A new userstyle @author Me @var select siteTheme "Site Theme" { "default:Default*": "default", "moon:Rose Pine Moon": "moon", "dawn:Rose Pine Dawn": "dawn", "mocha:Catppuccin Mocha": "mocha", "latte:Catppuccin Latte": "latte", "rhodes:Rhodes Island": "rhodes", "rhine:Rhine Lab": "rhine", "dahuang:Dahuang": "dahuang", "garden:Garden of Grotesqueries": "garden", "avemuji:Ave Mujica": "avemuji" } @var select font "Font" ["Atkinson Hyperlegible", "Alegreya Sans", "Lexend", "Space Mono"] @var select fancyfont "Fancy Font" ["Alegreya", "Croissant One", "Freehand", "Lemonada", "Righteous", "Srisakdi", "Unbounded"] @var select colorful "More Colors?" { "yes:Yes": "yes", "no:No": "no" } ==/UserStyle== */ @-moz-document domain("distanthomes.guide") { @import url(https://fonts.bunny.net/css?family=alegreya-sans:400,400i,700,700i|atkinson-hyperlegible:400,400i,700,700i|cascadia-code:400,400i,700,700i|lexend:400,700|space-mono:400,400i,700,700i|alegreya:400|croissant-one:400|freehand:400|lemonada:400|righteous:400|srisakdi:400|unbounded:400); html { container: html; } @container html style(--colorful: yes) { h2 { color: var(--autumn-red) !important; } h3 { font-style: italic; color: var(--autumn-orange) !important; } .my-8:has(.bg-cover) { border: 3px var(--autumn-amber) solid !important; } .my-3.animate-fadeIn.relative { padding-left: calc(var(--spacing) * 4); padding-right: calc(var(--spacing) * 4); &:nth-child(2n+2) { padding: calc(var(--spacing) * 4); border-radius: var(--radius-xl); background-color: color-mix(in srgb-linear, var(--background), transparent 40%); } } .rounded-full.overflow-hidden { border-color: var(--autumn-orange) !important; } [class*="max-w-[95vw]"] { position: fixed !important; } } @container html style(--siteTheme: dawn) { * { --background: #faf4ed; --background-gradient: linear-gradient(135deg, #faf4ed 0%, #f2e9e1 50%, #fffaf3 100%); --foreground: #797593; --foreground-dark: #464261; --accent: #b4637a; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: color-mix(in srgb-linear, #fffaf3, transparent 40%); --card-border: #cecacd; --muted: #9893a5; --autumn-red: #286983; --autumn-orange: #56949f; --autumn-amber: #907aa9; --autumn-rust: #b4637a; --autumn-gold: #ea9d34; } body:before { content: ""; display: block; width: 576px; height: 240px; border-radius: 100%; background-image: linear-gradient(to right, color-mix(in srgb-linear, var(--autumn-gold), transparent 50%) 30%, color-mix(in srgb-linear, var(--autumn-rust), transparent 30%) 70%, var(--autumn-amber) 100%); filter: blur(64px); position: fixed; transform: rotate(-25deg); left: 50%; top: -176px; z-index: 1; } } @container html style(--siteTheme: moon) { * { --background: #232136; --background-gradient: linear-gradient(135deg, #232136 0%, #393552 50%, #2a273f 100%); --foreground: #908caa; --foreground-dark: #e0def4; --accent: #eb6f92; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: color-mix(in srgb-linear, #2a273f, transparent 40%); --card-border: #56526e; --muted: #6e6a86; --autumn-red: #3e8fb0; --autumn-orange: #9ccfd8; --autumn-amber: #c4a7e7; --autumn-rust: #eb6f92; --autumn-gold: #f6c177; } body:before { content: ""; display: block; width: 576px; height: 240px; border-radius: 100%; background-image: linear-gradient(to right, color-mix(in srgb-linear, var(--autumn-gold), transparent 50%) 30%, color-mix(in srgb-linear, var(--autumn-rust), transparent 30%) 70%, var(--autumn-amber) 100%); filter: blur(64px); position: fixed; transform: rotate(-25deg); left: 50%; top: -176px; z-index: 1; } } @container html style(--siteTheme: mocha) { * { --background: #1e1e2e; --background-gradient: linear-gradient(135deg, #1e1e2e 0%, #181825 50%, #11111b 100%); --foreground: #cdd6f4; --foreground-dark: #bac2de; --accent: #89dceb; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: #313244; --card-border: #b4befe; --muted: #a6adc8; --autumn-red: #f38ba8; --autumn-orange: #fab387; --autumn-amber: #f9e2af; --autumn-rust: #a6e3a1; --autumn-gold: #b4befe; } } @container html style(--siteTheme: latte) { * { --background: #eff1f5; --background-gradient: linear-gradient(135deg, #eff1f5 0%, #e6e9ef 50%, #dce0e8 100%); --foreground: #4c4f69; --foreground-dark: #5c5f77; --accent: #209fb5; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: #ccd0da; --card-border: #7287fd; --muted: #6c6f85; --autumn-red: #d20f39; --autumn-orange: #fe640b; --autumn-amber: #df8e1d; --autumn-rust: #40a02b; --autumn-gold: #7287fd; } } @container html style(--siteTheme: rhodes) { * { --background: #404040; --background-gradient: linear-gradient(135deg, #404040 0%, #404040 50%, #404040 100%); --foreground: #FFFFFF; --foreground-dark: #DDDDDD; --accent: #18d1ff; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: #555555; --card-border: var(--accent); --muted: #CCCCCC; --autumn-red: #ffa700; --autumn-orange: #ffe800; --autumn-amber: #a6a6a6; --autumn-rust: #fff; --autumn-gold: #f00; } } @container html style(--siteTheme: rhine) { * { --radius-2xl: 0 !important; --radius-xl: 0 !important; --radius-lg: 0 !important; --background: #D7C7A5; --background-gradient: linear-gradient(135deg, #D7C7A5 0%, #D7C7A5 50%, #D7C7A5 100%); --foreground: #D7824E; --foreground-dark: #111111; --accent: #E8B359; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: #E3DACA; --card-border: var(--accent); --muted: #333333; --autumn-red: #E8B359; --autumn-orange: #963A37; --autumn-amber: #94BFAF; --autumn-rust: #F7EFE0; --autumn-gold: #f00; } main:first-child { &:before, &:after { content: ""; width: 100%; left: 0; height: 2px; position: absolute; background-image: linear-gradient(to right, var(--autumn-red), var(--autumn-red) 33.2%, var(--autumn-orange) 33.3%, var(--autumn-orange) 66.5%, var(--autumn-amber) 66.6%, var(--autumn-amber)); } &:before { top: 0px; } &:after { bottom: 0px; } } } :root { --font-rubik: var(--font); --font-rye: var(--fancyfont); } body { font-family: var(--font), ui-sans-serif, system-ui, sans-serif; } main:first-child { backdrop-filter: blur(20px); } }