Revision of distanthomes.themes

veryroundbird revised this gist 1 month ago. Go to revision

1 file changed, 87 insertions, 13 deletions

distanthomes.user.css

			@@ -13,27 +13,31 @@
13	13		"rhodes:Rhodes Island": "rhodes",
14	14		"rhodesdark:Rhodes Island Dark": "rhodesdark",
15	15		"rhine:Rhine Lab": "rhine",
16		-	"dahuang:Dahuang": "dahuang",
17		-	"crimson:Crimson Solitaire": "crimson",
18		-	"caerula:Caerula Arbor": "caerula",
19	16		"garden:Garden of Grotesqueries": "garden",
20		-	"sami:Expeditioners' Jǫklumarkar": "sami",
21	17		"furnace:Furnaceside Fables": "furnace",
22		-	"blackflow:Black Flow": "blackflow",
23	18		"avemuji:Ave Mujica": "avemuji",
24	19		"boring:Boring": "boring"
25	20		}
26		-	@var select font "Font" ["Atkinson Hyperlegible", "Alegreya Sans", "Bree Serif", "Cormorant", "Lexend", "Open-Dyslexic", "Space Mono"]
27		-	@var select fancyfont "Fancy Font" ["Alegreya", "Bungee", "Climate Crisis", "Contrail One", "Croissant One", "Freehand", "Lemonada", "Righteous", "Srisakdi", "Unbounded", "Uncial Antiqua"]
	21	+	@var select font "Font" ["Atkinson Hyperlegible", "Alegreya Sans", "Bree Serif", "Cormorant", "Gentium Book Plus", "Lexend", "Open-Dyslexic", "Space Mono"]
	22	+	@var select fancyfont "Fancy Font" ["Alegreya", "Bungee", "Castoro Titling", "Climate Crisis", "Contrail One", "Croissant One", "Freehand", "Lemonada", "Megrim", "Metamorphous", "Righteous", "Rubik Dirt", "Rubik Distressed", "Srisakdi", "Unbounded", "Uncial Antiqua"]
28	23		@var checkbox colorful "More Colors? \n Makes the interface more colorful." 0
29	24		@var checkbox unrounded "Force Unrounded Corners \n Some themes will force unrounded corners regardless." 0
30	25		==/UserStyle== */
31	26
32	27		@-moz-document domain("distanthomes.guide") {
33		-	@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\|open-dyslexic:400,400i,700,700i\|climate-crisis:400\|contrail-one:400\|bungee:400\|uncial-antiqua:400\|bree-serif:400,400i,700,700i\|cormorant:400,400i,700,700i\|gentium-book-plus:400,400i,700,700i);
	28	+	@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\|open-dyslexic:400,400i,700,700i\|climate-crisis:400\|contrail-one:400\|bungee:400\|uncial-antiqua:400\|bree-serif:400,400i,700,700i\|cormorant:400,400i,700,700i\|gentium-book-plus:400,400i,700,700i\|castoro-titling:400\|megrim:400\|metamorphous:400\|rubik-dirt:400\|rubik-distressed:400);
34	29
35	30		@import url('https://fonts.cdnfonts.com/css/open-dyslexic');
36	31
	32	+	/* FORTHCOMING:
	33	+	- Caerula Arbor
	34	+	- Crimson Solitaire
	35	+	- Dahuang
	36	+	- Black Flow
	37	+	- Expeditioners' Jǫklumarkar
	38	+	- ...and more?
	39	+	*/
	40	+
37	41		html {
38	42		container: html;
39	43		}
			@@ -857,9 +861,10 @@
857	861		}
858	862
859	863		@container html style(--siteTheme: furnace) {
	864	+	/* BG Image Credits: https://unsplash.com/@colinwatts, https://unsplash.com/@anniespratt, some diy photobashing */
860	865		* {
861	866		--background: #762D3E;
862		-	--background-gradient: linear-gradient(135deg, #762D3E 0%, #393B3C 50%, #333534 100%);
	867	+	--background-gradient: linear-gradient(135deg, #762D3E 0%, #393B3C 50%, #4367AB 100%);
863	868		--foreground: #E3D7AC;
864	869		--foreground-dark: #F3F2E8;
865	870		--accent: #4367AB;
			@@ -868,10 +873,79 @@
868	873		--card-border: var(--accent);
869	874		--muted: #8A8B8A;
870	875		--autumn-red: #A76251;
871		-	--autumn-orange: #9C3327;
872		-	--autumn-amber: #517BAF;
873		-	--autumn-rust: #762D3E;
874		-	--autumn-gold: #4367AB;
	876	+	--autumn-orange: #3c6164;
	877	+	--autumn-amber: #b19531;
	878	+	--autumn-rust: #517BAF;
	879	+	--autumn-gold: #9C3327;
	880	+	--radius-xl: 0;
	881	+	--radius-2xl: 0;
	882	+	--radius-lg: 0;
	883	+	}
	884	+
	885	+	body:before {
	886	+	content: "";
	887	+	position: fixed;
	888	+	width: 100%;
	889	+	height: 100vh;
	890	+	top: 0;
	891	+	left: 0;
	892	+	background-size: cover;
	893	+	background-image: var(--background-gradient);
	894	+	mix-blend-mode: hard-light;
	895	+	}
	896	+	body:after {
	897	+	content: "";
	898	+	position:fixed;
	899	+	background-image: url(https://img.veryroundbird.house/userstyle-assets/scrungled-gold.webp);
	900	+	width: 100%;
	901	+	height: 100vh;
	902	+	top: 0;
	903	+	left: 0;
	904	+	background-size: cover;
	905	+	}
	906	+
	907	+	main > :first-child {
	908	+	background-color: color-mix(in srgb-linear, var(--card-bg), transparent 15%) !important;
	909	+	border: 1px var(--accent) solid;
	910	+
	911	+	& > :first-child {
	912	+	text-align: center;
	913	+	border-color: var(--foreground);
	914	+
	915	+	h2, h3 {
	916	+	font-style: normal;
	917	+	}
	918	+
	919	+	h2 {
	920	+	font-size: 1.5rem;
	921	+	}
	922	+
	923	+	h3 {
	924	+	font-size: 2rem;
	925	+	}
	926	+	}
	927	+	}
	928	+
	929	+	main {
	930	+	background-image: url(https://img.veryroundbird.house/userstyle-assets/colin-watts-Hjp111tSqKc-unsplash.webp);
	931	+	background-attachment: fixed;
	932	+	padding: calc(var(--spacing) * 2);
	933	+	border: 1px var(--background) solid;
	934	+	}
	935	+
	936	+	.fixed.bottom-4.right-4.z-50.px-4.py-3.rounded-lg {
	937	+	color: var(--foreground) !important;
	938	+
	939	+	button {
	940	+	color: var(--foreground) !important;
	941	+	}
	942	+	}
	943	+
	944	+	.my-8.rounded-lg.overflow-hidden.shadow-2xl {
	945	+	border: none !important;
	946	+	padding: calc(var(--spacing) * 2);
	947	+	background-image: url(https://img.veryroundbird.house/userstyle-assets/colin-watts-Hjp111tSqKc-unsplash.webp);
	948	+	background-size: cover;
875	949		}
876	950		}
877	951

veryroundbird revised this gist 1 month ago. Go to revision

1 file changed, 411 insertions, 30 deletions

distanthomes.user.css

			@@ -110,7 +110,6 @@
110	110		transform: rotate(-25deg);
111	111		left: 50%;
112	112		top: -176px;
113		-	z-index: 1;
114	113		}
115	114
116	115		body:after {
			@@ -125,7 +124,11 @@
125	124		transform: rotate(-25deg);
126	125		right: 50%;
127	126		bottom: -176px;
128		-	z-index: 1;
	127	+	}
	128	+
	129	+	.fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 {
	130	+	background-color: var(--background);
	131	+	background-blend-mode: color-burn;
129	132		}
130	133		}
131	134
			@@ -159,7 +162,6 @@
159	162		transform: rotate(-25deg);
160	163		left: 50%;
161	164		top: -176px;
162		-	z-index: 1;
163	165		}
164	166
165	167		body:after {
			@@ -174,7 +176,11 @@
174	176		transform: rotate(-25deg);
175	177		right: 50%;
176	178		bottom: -176px;
177		-	z-index: 1;
	179	+	}
	180	+
	181	+	.fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 {
	182	+	background-color: var(--background);
	183	+	background-blend-mode: soft-light;
178	184		}
179	185		}
180	186
			@@ -195,6 +201,18 @@
195	201		--autumn-gold: #b4befe;
196	202		--background-gradient: linear-gradient(120deg, color-mix(in srgb-linear, var(--background), var(--autumn-orange) 5%), color-mix(in srgb, var(--background), var(--autumn-gold) 10%));
197	203		}
	204	+
	205	+	body:before {
	206	+	content: "";
	207	+	width: 100%;
	208	+	height: 100vh;
	209	+	position: fixed;
	210	+	top: 0;
	211	+	left: 0;
	212	+	background-image: var(--background-gradient);
	213	+	z-index: 2;
	214	+	mix-blend-mode: overlay;
	215	+	}
198	216		}
199	217
200	218		@container html style(--siteTheme: latte) {
			@@ -214,25 +232,346 @@
214	232		--autumn-gold: #7287fd;
215	233		--background-gradient: linear-gradient(120deg, color-mix(in srgb-linear, var(--background), var(--autumn-orange) 5%), color-mix(in srgb, var(--background), var(--autumn-gold) 10%));
216	234		}
	235	+
	236	+	body:before {
	237	+	content: "";
	238	+	width: 100%;
	239	+	height: 100vh;
	240	+	position: fixed;
	241	+	top: 0;
	242	+	left: 0;
	243	+	background-image: var(--background-gradient);
	244	+	z-index: 2;
	245	+	mix-blend-mode: overlay;
	246	+	}
217	247		}
218	248
219	249		@container html style(--siteTheme: rhodes) {
220	250		* {
221		-	--background: #404040;
	251	+	--background: #18d1ff;
	252	+	--background-gradient: linear-gradient(135deg, #404040 0%, #404040 50%, #404040 100%);
	253	+	--foreground: #333333;
	254	+	--foreground-dark: #111111;
	255	+	--accent: #ffe800;
	256	+	--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
	257	+	--card-bg: #DDDDDD;
	258	+	--card-border: var(--accent);
	259	+	--muted: #666666;
	260	+	--autumn-red: #ffa700;
	261	+	--autumn-orange: #ffe800;
	262	+	--autumn-amber: #a6a6a6;
	263	+	--autumn-rust: #fff;
	264	+	--autumn-gold: #f00;
	265	+	}
	266	+
	267	+	[style="background: var(--background-gradient);"] {
	268	+	background: none !important;
	269	+	}
	270	+
	271	+	body {
	272	+	&:before {
	273	+	content: "";
	274	+	position: fixed;
	275	+	top: 0;
	276	+	left: 0;
	277	+	width: 100%;
	278	+	height: 100%;
	279	+	background-image: url(https://img.veryroundbird.house/userstyle-assets/ri-day.webp) !important;
	280	+	background-size: cover;
	281	+	pointer-events: none;
	282	+	z-index: 1 !important;
	283	+	}
	284	+
	285	+	&:after {
	286	+	content: "";
	287	+	position: fixed;
	288	+	top: 0;
	289	+	left: 0;
	290	+	width: 100%;
	291	+	height: 100%;
	292	+	background-color: var(--background);
	293	+	opacity: .5;
	294	+	mix-blend-mode: soft-light;
	295	+	pointer-events: none;
	296	+	z-index: 3 !important;
	297	+	}
	298	+	}
	299	+
	300	+	main {
	301	+	position: relative;
	302	+	}
	303	+
	304	+	main > :first-child {
	305	+	border: none !important;
	306	+	background-color: var(--card-bg);
	307	+	padding: calc(var(--spacing) * 8);
	308	+
	309	+	&:before {
	310	+	content: "";
	311	+	position: absolute;
	312	+	display: block;
	313	+	width: 90%;
	314	+	height: 8px;
	315	+	top: 0;
	316	+	left: 5%;
	317	+	background-color: var(--autumn-red);
	318	+	}
	319	+
	320	+	> :first-child {
	321	+	position: relative;
	322	+	padding-bottom: calc(var(--spacing) * 8);
	323	+	border-bottom: none !important;
	324	+
	325	+	&:after {
	326	+	content: "";
	327	+	box-sizing: border-box;
	328	+	width: 30px;
	329	+	height: 30px;
	330	+	border: 3px var(--autumn-red) solid;
	331	+	transform-origin: center;
	332	+	transform: translate(-50%, -50%) rotate(-45deg);
	333	+	position: absolute;
	334	+	top: 100%;
	335	+	left: 50%;
	336	+	z-index: 2;
	337	+	}
	338	+
	339	+	h2, h3, p {
	340	+	text-align: center;
	341	+	}
	342	+
	343	+	h2, h3 {
	344	+	text-transform: uppercase;
	345	+	}
	346	+
	347	+	h2 {
	348	+	font-size: 1.2rem;
	349	+	margin-bottom: 0;
	350	+	}
	351	+
	352	+	h3 {
	353	+	font-size: 1.5rem;
	354	+	color: var(--foreground-dark) !important;
	355	+	margin-top: 0;
	356	+	}
	357	+
	358	+	h3, p {
	359	+	font-style: normal;
	360	+	}
	361	+
	362	+	h2, p {
	363	+	color: var(--foreground) !important;
	364	+	}
	365	+
	366	+	p {
	367	+	letter-spacing: 2px;
	368	+	&:before {
	369	+	content: "[ ";
	370	+	}
	371	+
	372	+	&:after {
	373	+	content: " ]";
	374	+	}
	375	+	}
	376	+	}
	377	+	}
	378	+
	379	+	.fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 {
	380	+	z-index: 2;
	381	+	}
	382	+
	383	+	.w-full.p-4.rounded-2xl.transition-all.text-left {
	384	+	border-color: var(--background) !important;
	385	+
	386	+	h3 {
	387	+	color: var(--foreground-dark) !important;
	388	+	}
	389	+	}
	390	+
	391	+	.text-2xl.font-serif.lowercase.transition-all {
	392	+	color: var(--background) !important;
	393	+	}
	394	+
	395	+	.text-xs.px-3.rounded-lg.transition-all.lowercase {
	396	+	border-color: var(--background) !important;
	397	+
	398	+	&[style*="background: var(--accent);"] {
	399	+	background-color: var(--background) !important;
	400	+	}
	401	+	}
	402	+
	403	+	h3.text-xl.font-serif.leading-snug.lowercase {
	404	+	color: var(--foreground-dark) !important;
	405	+	}
	406	+
	407	+	.block.p-6.rounded-2xl.transition-all.shadow-lg {
	408	+	border-color: var(--background) !important;
	409	+	}
	410	+
	411	+	.fixed.bottom-4.right-4.z-50.gap-3 {
	412	+	color: var(--foreground-dark) !important;
	413	+	border-left: 5px var(--background) solid;
	414	+
	415	+	button.text-xl {
	416	+	color: var(--foreground-dark) !important;
	417	+	}
	418	+	}
	419	+	nav.items-center {
	420	+	border-color: var(--background) !important;
	421	+	}
	422	+	nav button.rounded-xl {
	423	+	color: var(--foreground-dark) !important;
	424	+	}
	425	+
	426	+	footer {
	427	+	color: var(--card-bg) !important;
	428	+	}
	429	+	}
	430	+
	431	+	@container html style(--siteTheme: rhodesdark) {
	432	+	* {
	433	+	--background: #1e7f98;
222	434		--background-gradient: linear-gradient(135deg, #404040 0%, #404040 50%, #404040 100%);
223		-	--foreground: #FFFFFF;
224		-	--foreground-dark: #DDDDDD;
225		-	--accent: #18d1ff;
	435	+	--foreground: #DDDDDD;
	436	+	--foreground-dark: #EEEEEE;
	437	+	--accent: #ffe800;
226	438		--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
227		-	--card-bg: #555555;
	439	+	--card-bg: #111111;
228	440		--card-border: var(--accent);
229		-	--muted: #CCCCCC;
	441	+	--muted: #AAAAAA;
230	442		--autumn-red: #ffa700;
231	443		--autumn-orange: #ffe800;
232	444		--autumn-amber: #a6a6a6;
233	445		--autumn-rust: #fff;
234	446		--autumn-gold: #f00;
235	447		}
	448	+
	449	+	[style="background: var(--background-gradient);"] {
	450	+	background: none !important;
	451	+	}
	452	+
	453	+	body {
	454	+	&:before {
	455	+	content: "";
	456	+	position: fixed;
	457	+	top: 0;
	458	+	left: 0;
	459	+	width: 100%;
	460	+	height: 100%;
	461	+	background-image: url(https://img.veryroundbird.house/userstyle-assets/ri-night.webp) !important;
	462	+	background-size: cover;
	463	+	pointer-events: none;
	464	+	z-index: 1 !important;
	465	+	}
	466	+
	467	+	&:after {
	468	+	content: "";
	469	+	position: fixed;
	470	+	top: 0;
	471	+	left: 0;
	472	+	width: 100%;
	473	+	height: 100%;
	474	+	background-color: var(--background);
	475	+	opacity: .5;
	476	+	mix-blend-mode: soft-light;
	477	+	pointer-events: none;
	478	+	z-index: 3 !important;
	479	+	}
	480	+	}
	481	+
	482	+	main > :first-child {
	483	+	border: none !important;
	484	+	background-color: var(--card-bg);
	485	+	padding: calc(var(--spacing) * 8);
	486	+
	487	+	&:before {
	488	+	content: "";
	489	+	position: absolute;
	490	+	display: block;
	491	+	width: 90%;
	492	+	height: 8px;
	493	+	top: 0;
	494	+	left: 5%;
	495	+	background-color: var(--autumn-red);
	496	+	}
	497	+
	498	+	> :first-child {
	499	+	position: relative;
	500	+	padding-bottom: calc(var(--spacing) * 8);
	501	+	border-bottom: none !important;
	502	+
	503	+	&:after {
	504	+	content: "";
	505	+	box-sizing: border-box;
	506	+	width: 30px;
	507	+	height: 30px;
	508	+	border: 3px var(--autumn-red) solid;
	509	+	transform-origin: center;
	510	+	transform: translate(-50%, -50%) rotate(-45deg);
	511	+	position: absolute;
	512	+	top: 100%;
	513	+	left: 50%;
	514	+	z-index: 2;
	515	+	}
	516	+
	517	+	h2, h3, p {
	518	+	text-align: center;
	519	+	}
	520	+
	521	+	h2, h3 {
	522	+	text-transform: uppercase;
	523	+	}
	524	+
	525	+	h2 {
	526	+	font-size: 1.2rem;
	527	+	margin-bottom: 0;
	528	+	}
	529	+
	530	+	h3 {
	531	+	font-size: 1.5rem;
	532	+	color: var(--foreground-dark) !important;
	533	+	margin-top: 0;
	534	+	}
	535	+
	536	+	h3, p {
	537	+	font-style: normal;
	538	+	}
	539	+
	540	+	h2, p {
	541	+	color: var(--foreground) !important;
	542	+	}
	543	+
	544	+	p {
	545	+	letter-spacing: 2px;
	546	+	&:before {
	547	+	content: "[ ";
	548	+	}
	549	+
	550	+	&:after {
	551	+	content: " ]";
	552	+	}
	553	+	}
	554	+	}
	555	+	}
	556	+
	557	+	.fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 {
	558	+	z-index: 2;
	559	+	}
	560	+
	561	+	.fixed.bottom-4.right-4.z-50.gap-3 {
	562	+	color: var(--card-bg) !important;
	563	+	border-left: 5px var(--background) solid;
	564	+
	565	+	button.text-xl {
	566	+	color: var(--card-bg) !important;
	567	+	}
	568	+	}
	569	+	nav.items-center {
	570	+	border-color: var(--background) !important;
	571	+	}
	572	+	nav button.rounded-xl {
	573	+	color: var(--card-bg) !important;
	574	+	}
236	575		}
237	576
238	577		@container html style(--siteTheme: rhine) {
			@@ -256,6 +595,16 @@
256	595		--autumn-gold: #D7C7A5;
257	596		}
258	597
	598	+	body:before {
	599	+	content: "";
	600	+	width: 100%;
	601	+	height: 100vh;
	602	+	position: fixed;
	603	+	top: 0;
	604	+	left: 0;
	605	+	background-image: var(--background-gradient);
	606	+	}
	607	+
259	608		main > :first-child {
260	609		border-left: 0 !important;
261	610		border-right: 0 !important;
			@@ -346,14 +695,15 @@
346	695		background-image: url(https://img.veryroundbird.house/userstyle-assets/kseniya-lapteva-6iUiRv_RX8w-unsplash.webp);
347	696		background-size: cover;
348	697		background-attachment: fixed;
349		-	z-index: 1;
350	698		opacity: .8;
	699	+	pointer-events: none;
351	700		filter: saturate(1.5) contrast(2);
352	701		}
353	702
354	703		&:before {
355		-
356		-	mix-blend-mode: screen;
	704	+	background-color: var(--background);
	705	+	background-blend-mode: screen;
	706	+	mix-blend-mode: soft-light;
357	707		}
358	708
359	709		&:after {
			@@ -375,7 +725,7 @@
375	725		border-width: 0 !important;
376	726		}
377	727
378		-	main > :first-child > :first-child {
	728	+	main > :first-child > :first-child.mb-6.pb-4 {
379	729		background-color: var(--foreground);
380	730		padding: calc(var(--spacing) * 4);
381	731		border-bottom: none !important;
			@@ -445,9 +795,10 @@
445	795		width: 100vw;
446	796		height: 100vh;
447	797		background-size: cover;
448		-	background-image: url(https://img.veryroundbird.house/userstyle-assets/nareeta-martin-S_06N663vig-unsplash.webp);
	798	+	background-image: url(https://img.veryroundbird.house/userstyle-assets/nareeta-martin-S_06N663vig-unsplash.webp), var(--background-gradient);
	799	+	background-blend-mode: multiply;
449	800		mix-blend-mode: multiply;
450		-	opacity: 0.5;
	801	+	opacity: 0.75;
451	802		z-index: 1;
452	803		}
453	804
			@@ -552,9 +903,18 @@
552	903		--autumn-amber: #8A8B8A;
553	904		--autumn-rust: #8f0000;
554	905		--autumn-gold: #968500;
	906	+	--tw-shadow-color: transparent;
	907	+	}
	908	+
	909	+	body:before {
	910	+	content: "";
	911	+	width: 100%;
	912	+	height: 100vh;
	913	+	background-color: var(--background);
	914	+	z-index: 2;
	915	+	position: fixed;
555	916		}
556	917		}
557		-
558	918		:root {
559	919		--font-rubik: var(--font);
560	920		--font-rye: var(--fancyfont);
			@@ -564,22 +924,43 @@
564	924		--font-rubik: var(--font) !important;
565	925		--font-rye: var(--fancyfont) !important;
566	926		font-family: var(--font), ui-sans-serif, system-ui, sans-serif;
	927	+
	928	+	&:before,
	929	+	&:after {
	930	+	z-index: 2;
	931	+	}
567	932		}
568	933
569		-	main > :first-child {
570		-	backdrop-filter: blur(20px);
571		-	}
572		-
573		-	.fixed.top-4.left-4.z-50.w-10.h-10 {
574		-	background-color: var(--card-bg) !important;
575		-	}
576		-
577		-	.fixed.bottom-4.right-4.z-50 {
578		-	background-color: var(--card-border) !important;
579		-	color: var(--background) !important;
580		-
581		-	button {
	934	+	@container html not style(--siteTheme: default) {
	935	+	.flex.flex-wrap.px-2 {
	936	+	justify-content: center;
	937	+	margin-top: calc(var(--spacing) * 8) !important;
	938	+	}
	939	+
	940	+	.fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 {
	941	+	z-index: 1;
	942	+	}
	943	+
	944	+	header, main, footer {
	945	+	z-index: 5;
	946	+	position: relative;
	947	+	}
	948	+
	949	+	main > :first-child {
	950	+	backdrop-filter: blur(20px);
	951	+	}
	952	+
	953	+	.fixed.top-4.left-4.z-50.w-10.h-10 {
	954	+	background-color: var(--card-bg) !important;
	955	+	}
	956	+
	957	+	.fixed.bottom-4.right-4.z-50 {
	958	+	background-color: var(--card-border) !important;
582	959		color: var(--background) !important;
	960	+
	961	+	button {
	962	+	color: var(--background) !important;
	963	+	}
583	964		}
584	965		}
585	966		}

veryroundbird revised this gist 1 month ago. Go to revision

1 file changed, 71 insertions, 29 deletions

distanthomes.user.css

			@@ -11,13 +11,19 @@
11	11		"mocha:Catppuccin Mocha": "mocha",
12	12		"latte:Catppuccin Latte": "latte",
13	13		"rhodes:Rhodes Island": "rhodes",
	14	+	"rhodesdark:Rhodes Island Dark": "rhodesdark",
14	15		"rhine:Rhine Lab": "rhine",
15	16		"dahuang:Dahuang": "dahuang",
	17	+	"crimson:Crimson Solitaire": "crimson",
	18	+	"caerula:Caerula Arbor": "caerula",
16	19		"garden:Garden of Grotesqueries": "garden",
	20	+	"sami:Expeditioners' Jǫklumarkar": "sami",
	21	+	"furnace:Furnaceside Fables": "furnace",
	22	+	"blackflow:Black Flow": "blackflow",
17	23		"avemuji:Ave Mujica": "avemuji",
18	24		"boring:Boring": "boring"
19	25		}
20		-	@var select font "Font" ["Atkinson Hyperlegible", "Alegreya Sans", "Bree Serif", "Cormorant", "Lexend", "Open Dyslexic", "Space Mono"]
	26	+	@var select font "Font" ["Atkinson Hyperlegible", "Alegreya Sans", "Bree Serif", "Cormorant", "Lexend", "Open-Dyslexic", "Space Mono"]
21	27		@var select fancyfont "Fancy Font" ["Alegreya", "Bungee", "Climate Crisis", "Contrail One", "Croissant One", "Freehand", "Lemonada", "Righteous", "Srisakdi", "Unbounded", "Uncial Antiqua"]
22	28		@var checkbox colorful "More Colors? \n Makes the interface more colorful." 0
23	29		@var checkbox unrounded "Force Unrounded Corners \n Some themes will force unrounded corners regardless." 0
			@@ -26,33 +32,7 @@
26	32		@-moz-document domain("distanthomes.guide") {
27	33		@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\|open-dyslexic:400,400i,700,700i\|climate-crisis:400\|contrail-one:400\|bungee:400\|uncial-antiqua:400\|bree-serif:400,400i,700,700i\|cormorant:400,400i,700,700i\|gentium-book-plus:400,400i,700,700i);
28	34
29		-	@font-face {
30		-	font-family: "Open Dyslexic";
31		-	src: url(https://img.veryroundbird.house/userstyle-assets/OpenDyslexic-Regular.otf) format('opentype');
32		-	font-weight: normal;
33		-	font-style: normal;
34		-	}
35		-
36		-	@font-face {
37		-	font-family: "Open Dyslexic";
38		-	src: url(https://img.veryroundbird.house/userstyle-assets/OpenDyslexic-Italic.otf) format('opentype');
39		-	font-weight: normal;
40		-	font-style: italic;
41		-	}
42		-
43		-	@font-face {
44		-	font-family: "Open Dyslexic";
45		-	src: url(https://img.veryroundbird.house/userstyle-assets/OpenDyslexic-Bold.otf) format('opentype');
46		-	font-weight: bold;
47		-	font-style: normal;
48		-	}
49		-
50		-	@font-face {
51		-	font-family: "Open Dyslexic";
52		-	src: url(https://img.veryroundbird.house/userstyle-assets/OpenDyslexic-BoldItalic.otf) format('opentype');
53		-	font-weight: bold;
54		-	font-style: italic;
55		-	}
	35	+	@import url('https://fonts.cdnfonts.com/css/open-dyslexic');
56	36
57	37		html {
58	38		container: html;
			@@ -316,6 +296,14 @@
316	296
317	297		}
318	298
	299	+	.flex.flex-col.gap-2.items-center.mb-6 {
	300	+	padding: calc(var(--spacing) * 4) 0;
	301	+
	302	+	h2 {
	303	+	color: var(--card-bg) !important;
	304	+	}
	305	+	}
	306	+
319	307		@container html style(--colorful: 1) {
320	308		.my-3.animate-fadeIn.relative:nth-child(2n+2) {
321	309		.font-bold,
			@@ -417,6 +405,7 @@
417	405		}
418	406
419	407		@container html style(--siteTheme: avemuji) {
	408	+	/* Background Image Credit: https://unsplash.com/@splashabout */
420	409		* {
421	410		--one: #c12a54;
422	411		--two: #a12347;
			@@ -428,8 +417,12 @@
428	417		--eight: #f3a033;
429	418		--nine: #5c1c2d;
430	419
	420	+	--radius-2xl: 0 !important;
	421	+	--radius-xl: 0 !important;
	422	+	--radius-lg: 0 !important;
	423	+
431	424		--background: #1d1618;
432		-	--background-gradient: linear-gradient(135deg, var(--background) 0%);
	425	+	--background-gradient: linear-gradient(to bottom, #5c1c2d, var(--background) 50%);
433	426		--foreground: #dce2e1;
434	427		--foreground-dark: #f2f7f6;
435	428		--accent: #c12a54;
			@@ -444,6 +437,20 @@
444	437		--autumn-gold: #968500;
445	438		}
446	439
	440	+	body:before {
	441	+	content:"";
	442	+	position: fixed;
	443	+	top: 0;
	444	+	left: 0;
	445	+	width: 100vw;
	446	+	height: 100vh;
	447	+	background-size: cover;
	448	+	background-image: url(https://img.veryroundbird.house/userstyle-assets/nareeta-martin-S_06N663vig-unsplash.webp);
	449	+	mix-blend-mode: multiply;
	450	+	opacity: 0.5;
	451	+	z-index: 1;
	452	+	}
	453	+
447	454		main > :first-child {
448	455		> :first-child {
449	456		border-color: var(--autumn-orange) !important;
			@@ -494,6 +501,41 @@
494	501		}
495	502		}
496	503
	504	+	@container html style(--siteTheme: crimson) {
	505	+
	506	+	}
	507	+
	508	+	@container html style(--siteTheme: furnace) {
	509	+	* {
	510	+	--background: #762D3E;
	511	+	--background-gradient: linear-gradient(135deg, #762D3E 0%, #393B3C 50%, #333534 100%);
	512	+	--foreground: #E3D7AC;
	513	+	--foreground-dark: #F3F2E8;
	514	+	--accent: #4367AB;
	515	+	--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
	516	+	--card-bg: #333534;
	517	+	--card-border: var(--accent);
	518	+	--muted: #8A8B8A;
	519	+	--autumn-red: #A76251;
	520	+	--autumn-orange: #9C3327;
	521	+	--autumn-amber: #517BAF;
	522	+	--autumn-rust: #762D3E;
	523	+	--autumn-gold: #4367AB;
	524	+	}
	525	+	}
	526	+
	527	+	@container html style(--siteTheme: caerula) {
	528	+
	529	+	}
	530	+
	531	+	@container html style(--siteTheme: sami) {
	532	+
	533	+	}
	534	+
	535	+	@container html style(--siteTheme: blackflow) {
	536	+
	537	+	}
	538	+
497	539		@container html style(--siteTheme: boring) {
498	540		* {
499	541		--background: #FFFFFF;

veryroundbird revised this gist 1 month ago. Go to revision

1 file changed, 324 insertions, 28 deletions

distanthomes.user.css

			@@ -1,10 +1,10 @@
1	1		/* ==UserStyle==
2		-	@name distanthomes.guide
3		-	@namespace github.com/openstyles/stylus
	2	+	@name distanthomes.themes
	3	+	@namespace git.gay/veryroundbird/distanthomes.themes
4	4		@version 1.0.0
5		-	@description A new userstyle
6		-	@author Me
7		-	@var select siteTheme "Site Theme" {
	5	+	@description Theme set for the Distant Home's Guide Arknights story reader plus some styling tweak options
	6	+	@author Carly Smallbird
	7	+	@var select siteTheme "Site Theme \n Select 'Boring' for a visually-bland work-friendly experience." {
8	8		"default:Default*": "default",
9	9		"moon:Rose Pine Moon": "moon",
10	10		"dawn:Rose Pine Dawn": "dawn",
			@@ -14,24 +14,51 @@
14	14		"rhine:Rhine Lab": "rhine",
15	15		"dahuang:Dahuang": "dahuang",
16	16		"garden:Garden of Grotesqueries": "garden",
17		-	"avemuji:Ave Mujica": "avemuji"
18		-	}
19		-	@var select font "Font" ["Atkinson Hyperlegible", "Alegreya Sans", "Lexend", "Space Mono"]
20		-	@var select fancyfont "Fancy Font" ["Alegreya", "Croissant One", "Freehand", "Lemonada", "Righteous", "Srisakdi", "Unbounded"]
21		-	@var select colorful "More Colors?" {
22		-	"yes:Yes": "yes",
23		-	"no:No": "no"
	17	+	"avemuji:Ave Mujica": "avemuji",
	18	+	"boring:Boring": "boring"
24	19		}
	20	+	@var select font "Font" ["Atkinson Hyperlegible", "Alegreya Sans", "Bree Serif", "Cormorant", "Lexend", "Open Dyslexic", "Space Mono"]
	21	+	@var select fancyfont "Fancy Font" ["Alegreya", "Bungee", "Climate Crisis", "Contrail One", "Croissant One", "Freehand", "Lemonada", "Righteous", "Srisakdi", "Unbounded", "Uncial Antiqua"]
	22	+	@var checkbox colorful "More Colors? \n Makes the interface more colorful." 0
	23	+	@var checkbox unrounded "Force Unrounded Corners \n Some themes will force unrounded corners regardless." 0
25	24		==/UserStyle== */
26	25
27	26		@-moz-document domain("distanthomes.guide") {
28		-	@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);
	27	+	@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\|open-dyslexic:400,400i,700,700i\|climate-crisis:400\|contrail-one:400\|bungee:400\|uncial-antiqua:400\|bree-serif:400,400i,700,700i\|cormorant:400,400i,700,700i\|gentium-book-plus:400,400i,700,700i);
	28	+
	29	+	@font-face {
	30	+	font-family: "Open Dyslexic";
	31	+	src: url(https://img.veryroundbird.house/userstyle-assets/OpenDyslexic-Regular.otf) format('opentype');
	32	+	font-weight: normal;
	33	+	font-style: normal;
	34	+	}
	35	+
	36	+	@font-face {
	37	+	font-family: "Open Dyslexic";
	38	+	src: url(https://img.veryroundbird.house/userstyle-assets/OpenDyslexic-Italic.otf) format('opentype');
	39	+	font-weight: normal;
	40	+	font-style: italic;
	41	+	}
	42	+
	43	+	@font-face {
	44	+	font-family: "Open Dyslexic";
	45	+	src: url(https://img.veryroundbird.house/userstyle-assets/OpenDyslexic-Bold.otf) format('opentype');
	46	+	font-weight: bold;
	47	+	font-style: normal;
	48	+	}
	49	+
	50	+	@font-face {
	51	+	font-family: "Open Dyslexic";
	52	+	src: url(https://img.veryroundbird.house/userstyle-assets/OpenDyslexic-BoldItalic.otf) format('opentype');
	53	+	font-weight: bold;
	54	+	font-style: italic;
	55	+	}
29	56
30	57		html {
31	58		container: html;
32	59		}
33	60
34		-	@container html style(--colorful: yes) {
	61	+	@container html style(--colorful: 1) {
35	62		h2 {
36	63		color: var(--autumn-red) !important;
37	64		}
			@@ -65,6 +92,14 @@
65	92		}
66	93		}
67	94
	95	+	@container html style(--unrounded: 1) {
	96	+	* {
	97	+	--radius-2xl: 0;
	98	+	--radius-xl: 0;
	99	+	--radius-lg: 0;
	100	+	}
	101	+	}
	102	+
68	103		@container html style(--siteTheme: dawn) {
69	104		* {
70	105		--background: #faf4ed;
			@@ -97,6 +132,21 @@
97	132		top: -176px;
98	133		z-index: 1;
99	134		}
	135	+
	136	+	body:after {
	137	+	content: "";
	138	+	display: block;
	139	+	width: 1030px;
	140	+	height: 640px;
	141	+	border-radius: 100%;
	142	+	background-image: linear-gradient(to left, 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%);
	143	+	filter: blur(64px);
	144	+	position: fixed;
	145	+	transform: rotate(-25deg);
	146	+	right: 50%;
	147	+	bottom: -176px;
	148	+	z-index: 1;
	149	+	}
100	150		}
101	151
102	152		@container html style(--siteTheme: moon) {
			@@ -131,43 +181,58 @@
131	181		top: -176px;
132	182		z-index: 1;
133	183		}
	184	+
	185	+	body:after {
	186	+	content: "";
	187	+	display: block;
	188	+	width: 1030px;
	189	+	height: 640px;
	190	+	border-radius: 100%;
	191	+	background-image: linear-gradient(to left, 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%);
	192	+	filter: blur(64px);
	193	+	position: fixed;
	194	+	transform: rotate(-25deg);
	195	+	right: 50%;
	196	+	bottom: -176px;
	197	+	z-index: 1;
	198	+	}
134	199		}
135	200
136	201		@container html style(--siteTheme: mocha) {
137	202		* {
138	203		--background: #1e1e2e;
139		-	--background-gradient: linear-gradient(135deg, #1e1e2e 0%, #181825 50%, #11111b 100%);
140	204		--foreground: #cdd6f4;
141	205		--foreground-dark: #bac2de;
142	206		--accent: #89dceb;
143	207		--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
144		-	--card-bg: #313244;
145		-	--card-border: #b4befe;
	208	+	--card-bg: color-mix(in srgb-linear, #313244, transparent 50%);
	209	+	--card-border: #f2cdcd;
146	210		--muted: #a6adc8;
147	211		--autumn-red: #f38ba8;
148	212		--autumn-orange: #fab387;
149	213		--autumn-amber: #f9e2af;
150	214		--autumn-rust: #a6e3a1;
151	215		--autumn-gold: #b4befe;
	216	+	--background-gradient: linear-gradient(120deg, color-mix(in srgb-linear, var(--background), var(--autumn-orange) 5%), color-mix(in srgb, var(--background), var(--autumn-gold) 10%));
152	217		}
153	218		}
154	219
155	220		@container html style(--siteTheme: latte) {
156	221		* {
157	222		--background: #eff1f5;
158		-	--background-gradient: linear-gradient(135deg, #eff1f5 0%, #e6e9ef 50%, #dce0e8 100%);
159	223		--foreground: #4c4f69;
160	224		--foreground-dark: #5c5f77;
161	225		--accent: #209fb5;
162	226		--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
163		-	--card-bg: #ccd0da;
164		-	--card-border: #7287fd;
	227	+	--card-bg: color-mix(in srgb-linear, #ccd0da, transparent 50%);
	228	+	--card-border: #dc8a78;
165	229		--muted: #6c6f85;
166	230		--autumn-red: #d20f39;
167	231		--autumn-orange: #fe640b;
168	232		--autumn-amber: #df8e1d;
169	233		--autumn-rust: #40a02b;
170	234		--autumn-gold: #7287fd;
	235	+	--background-gradient: linear-gradient(120deg, color-mix(in srgb-linear, var(--background), var(--autumn-orange) 5%), color-mix(in srgb, var(--background), var(--autumn-gold) 10%));
171	236		}
172	237		}
173	238
			@@ -195,8 +260,8 @@
195	260		--radius-2xl: 0 !important;
196	261		--radius-xl: 0 !important;
197	262		--radius-lg: 0 !important;
198		-	--background: #D7C7A5;
199		-	--background-gradient: linear-gradient(135deg, #D7C7A5 0%, #D7C7A5 50%, #D7C7A5 100%);
	263	+	--background: #111111;
	264	+	--background-gradient: repeating-linear-gradient(to bottom, #111111aa 0 2px, #D7C7A511 3px 4px, #111111aa 5px);
200	265		--foreground: #D7824E;
201	266		--foreground-dark: #111111;
202	267		--accent: #E8B359;
			@@ -208,40 +273,271 @@
208	273		--autumn-orange: #963A37;
209	274		--autumn-amber: #94BFAF;
210	275		--autumn-rust: #F7EFE0;
211		-	--autumn-gold: #f00;
	276	+	--autumn-gold: #D7C7A5;
212	277		}
213	278
214		-	main:first-child {
	279	+	main > :first-child {
	280	+	border-left: 0 !important;
	281	+	border-right: 0 !important;
	282	+
215	283		&:before,
216	284		&:after {
217	285		content: "";
218	286		width: 100%;
219	287		left: 0;
220		-	height: 2px;
	288	+	height: 5px;
221	289		position: absolute;
222	290		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));
223	291		}
224	292
225	293		&:before {
226		-	top: 0px;
	294	+	top: -2px;
	295	+	}
	296	+
	297	+	&:after {
	298	+	bottom: 2px;
	299	+	}
	300	+
	301	+	h2 {
	302	+	color: var(--foreground-dark) !important;
	303	+	text-transform: uppercase;
	304	+	text-align: center;
	305	+	}
	306	+
	307	+	h3 {
	308	+	text-transform: uppercase;
	309	+	text-align: center;
	310	+	font-style: normal;
	311	+	}
	312	+
	313	+	.text-xs.mt-2.italic.opacity-70.lowercase {
	314	+	text-align: center;
	315	+	}
	316	+
	317	+	}
	318	+
	319	+	@container html style(--colorful: 1) {
	320	+	.my-3.animate-fadeIn.relative:nth-child(2n+2) {
	321	+	.font-bold,
	322	+	.leading-relaxed {
	323	+	color: var(--autumn-rust) !important;
	324	+	}
	325	+	}
	326	+
	327	+	}
	328	+	}
	329	+
	330	+	@container html style(--siteTheme: garden) {
	331	+	/* background image credit: https://unsplash.com/@ksushlapush */
	332	+	* {
	333	+	--background: #E96995;
	334	+	--background-gradient: linear-gradient(135deg, #E96995 0%, #E96995 50%, #E96995 100%);
	335	+	--foreground: #555555;
	336	+	--foreground-dark: #333233;
	337	+	--accent: #5adeff;
	338	+	--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
	339	+	--card-bg: #FEFEFE;
	340	+	--card-border: var(--accent);
	341	+	--muted: #8A8B8A;
	342	+	--autumn-red: #B47890;
	343	+	--autumn-orange: #4FA0B4;
	344	+	--autumn-amber: #8A8B8A;
	345	+	--autumn-rust: #a6a6a6;
	346	+	--autumn-gold: #f00;
	347	+	}
	348	+
	349	+	body {
	350	+	&:before,
	351	+	&:after {
	352	+	content: "";
	353	+	width: 100vw;
	354	+	height: 100vh;
	355	+	top: 0;
	356	+	left: 0;
	357	+	position: fixed;
	358	+	background-image: url(https://img.veryroundbird.house/userstyle-assets/kseniya-lapteva-6iUiRv_RX8w-unsplash.webp);
	359	+	background-size: cover;
	360	+	background-attachment: fixed;
	361	+	z-index: 1;
	362	+	opacity: .8;
	363	+	filter: saturate(1.5) contrast(2);
	364	+	}
	365	+
	366	+	&:before {
	367	+
	368	+	mix-blend-mode: screen;
227	369		}
228	370
229	371		&:after {
230		-	bottom: 0px;
	372	+	background-color: var(--accent);
	373	+	background-blend-mode: screen;
	374	+	transform: rotate(180deg) scaleX(-1);
	375	+	mix-blend-mode: multiply;
	376	+	}
	377	+	}
	378	+
	379	+	.max-w-3xl h2 {
	380	+	color: var(--card-bg) !important;
	381	+	}
	382	+
	383	+	main > :first-child {
	384	+	background-color: color-mix(in srgb-linear, var(--card-bg), transparent 40%) !important;
	385	+	backdrop-filter: blur(5px);
	386	+	border-radius: 0 !important;
	387	+	border-width: 0 !important;
	388	+	}
	389	+
	390	+	main > :first-child > :first-child {
	391	+	background-color: var(--foreground);
	392	+	padding: calc(var(--spacing) * 4);
	393	+	border-bottom: none !important;
	394	+	margin: calc(var(--spacing) * -4);
	395	+	margin-bottom: calc(var(--spacing) * 4);
	396	+
	397	+	h2, h3, p {
	398	+	color: var(--card-bg) !important;
	399	+	}
	400	+
	401	+	h2, h3 {
	402	+	text-transform: uppercase;
	403	+	}
	404	+
	405	+	h3 {
	406	+	font-style: normal;
	407	+	}
	408	+
	409	+	& > * {
	410	+	color: var(--card-bg);
231	411		}
232	412		}
233	413		}
234	414
	415	+	@container html style(--siteTheme: dahuang) {
	416	+
	417	+	}
	418	+
	419	+	@container html style(--siteTheme: avemuji) {
	420	+	* {
	421	+	--one: #c12a54;
	422	+	--two: #a12347;
	423	+	--three: #80827f;
	424	+	--four: #231e1d;
	425	+	--five: #f2f7f6;
	426	+	--six: #c48193;
	427	+	--seven: #1d1618;
	428	+	--eight: #f3a033;
	429	+	--nine: #5c1c2d;
	430	+
	431	+	--background: #1d1618;
	432	+	--background-gradient: linear-gradient(135deg, var(--background) 0%);
	433	+	--foreground: #dce2e1;
	434	+	--foreground-dark: #f2f7f6;
	435	+	--accent: #c12a54;
	436	+	--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
	437	+	--card-bg: #231e1d;
	438	+	--card-border: #a12347;
	439	+	--muted: #80827f;
	440	+	--autumn-red: #c48193;
	441	+	--autumn-orange: #f3a033;
	442	+	--autumn-amber: #5c1c2d;
	443	+	--autumn-rust: #8f0000;
	444	+	--autumn-gold: #968500;
	445	+	}
	446	+
	447	+	main > :first-child {
	448	+	> :first-child {
	449	+	border-color: var(--autumn-orange) !important;
	450	+
	451	+	> h2, > h3, > p {
	452	+	text-align: center;
	453	+	text-transform: none;
	454	+	}
	455	+
	456	+	> h2 {
	457	+	font-size: 1rem;
	458	+	font-family: var(--font-rubik);
	459	+	}
	460	+
	461	+	> h3 {
	462	+	font-size: 2rem;
	463	+	font-style: normal;
	464	+	}
	465	+	}
	466	+	}
	467	+
	468	+	main > :first-child:before {
	469	+	content: "";
	470	+	width: 50px;
	471	+	height: 50px;
	472	+	position: absolute;
	473	+	top: 0;
	474	+	left: 0;
	475	+	background-image: url(https://img.veryroundbird.house/userstyle-assets/corner.webp);
	476	+	background-size: contain;
	477	+	transform: rotate(90deg);
	478	+	}
	479	+
	480	+	main > :first-child:after {
	481	+	content: "";
	482	+	width: 50px;
	483	+	height: 50px;
	484	+	position: absolute;
	485	+	top: 0;
	486	+	right: 0;
	487	+	background-image: url(https://img.veryroundbird.house/userstyle-assets/corner.webp);
	488	+	background-size: contain;
	489	+	transform: rotate(180deg);
	490	+	}
	491	+
	492	+	.fixed.bottom-4.right-4.z-50 {
	493	+	color: var(--foreground-dark) !important;
	494	+	}
	495	+	}
	496	+
	497	+	@container html style(--siteTheme: boring) {
	498	+	* {
	499	+	--background: #FFFFFF;
	500	+	--background-gradient: linear-gradient(135deg, #FFFFFF 0%);
	501	+	--foreground: #222222;
	502	+	--foreground-dark: #000000;
	503	+	--accent: #1a539a;
	504	+	--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
	505	+	--card-bg: #FFFFFF;
	506	+	--card-border: #DDDDDD;
	507	+	--muted: #666666;
	508	+	--autumn-red: #687e9a;
	509	+	--autumn-orange: #4FA0B4;
	510	+	--autumn-amber: #8A8B8A;
	511	+	--autumn-rust: #8f0000;
	512	+	--autumn-gold: #968500;
	513	+	}
	514	+	}
	515	+
235	516		:root {
236	517		--font-rubik: var(--font);
237	518		--font-rye: var(--fancyfont);
238	519		}
239	520
240	521		body {
	522	+	--font-rubik: var(--font) !important;
	523	+	--font-rye: var(--fancyfont) !important;
241	524		font-family: var(--font), ui-sans-serif, system-ui, sans-serif;
242	525		}
243	526
244		-	main:first-child {
	527	+	main > :first-child {
245	528		backdrop-filter: blur(20px);
246	529		}
	530	+
	531	+	.fixed.top-4.left-4.z-50.w-10.h-10 {
	532	+	background-color: var(--card-bg) !important;
	533	+	}
	534	+
	535	+	.fixed.bottom-4.right-4.z-50 {
	536	+	background-color: var(--card-border) !important;
	537	+	color: var(--background) !important;
	538	+
	539	+	button {
	540	+	color: var(--background) !important;
	541	+	}
	542	+	}
247	543		}

veryroundbird revised this gist 1 month ago. Go to revision

1 file changed, 3 insertions, 1 deletion

distanthomes.user.css

			@@ -17,6 +17,7 @@
17	17		"avemuji:Ave Mujica": "avemuji"
18	18		}
19	19		@var select font "Font" ["Atkinson Hyperlegible", "Alegreya Sans", "Lexend", "Space Mono"]
	20	+	@var select fancyfont "Fancy Font" ["Alegreya", "Croissant One", "Freehand", "Lemonada", "Righteous", "Srisakdi", "Unbounded"]
20	21		@var select colorful "More Colors?" {
21	22		"yes:Yes": "yes",
22	23		"no:No": "no"
			@@ -24,7 +25,7 @@
24	25		==/UserStyle== */
25	26
26	27		@-moz-document domain("distanthomes.guide") {
27		-	@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);
	28	+	@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);
28	29
29	30		html {
30	31		container: html;
			@@ -233,6 +234,7 @@
233	234
234	235		:root {
235	236		--font-rubik: var(--font);
	237	+	--font-rye: var(--fancyfont);
236	238		}
237	239
238	240		body {

veryroundbird revised this gist 1 month ago. Go to revision

1 file changed, 95 insertions, 8 deletions

distanthomes.user.css

			@@ -13,25 +13,66 @@
13	13		"rhodes:Rhodes Island": "rhodes",
14	14		"rhine:Rhine Lab": "rhine",
15	15		"dahuang:Dahuang": "dahuang",
	16	+	"garden:Garden of Grotesqueries": "garden",
16	17		"avemuji:Ave Mujica": "avemuji"
17	18		}
18		-	@var select font "Font" ["Atkinson Hyperlegible", "Lexend", "Space Mono"]
	19	+	@var select font "Font" ["Atkinson Hyperlegible", "Alegreya Sans", "Lexend", "Space Mono"]
	20	+	@var select colorful "More Colors?" {
	21	+	"yes:Yes": "yes",
	22	+	"no:No": "no"
	23	+	}
19	24		==/UserStyle== */
20	25
21	26		@-moz-document domain("distanthomes.guide") {
	27	+	@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);
	28	+
22	29		html {
23	30		container: html;
24	31		}
25	32
	33	+	@container html style(--colorful: yes) {
	34	+	h2 {
	35	+	color: var(--autumn-red) !important;
	36	+	}
	37	+
	38	+	h3 {
	39	+	font-style: italic;
	40	+	color: var(--autumn-orange) !important;
	41	+	}
	42	+
	43	+	.my-8:has(.bg-cover) {
	44	+	border: 3px var(--autumn-amber) solid !important;
	45	+	}
	46	+
	47	+	.my-3.animate-fadeIn.relative {
	48	+	padding-left: calc(var(--spacing) * 4);
	49	+	padding-right: calc(var(--spacing) * 4);
	50	+
	51	+	&:nth-child(2n+2) {
	52	+	padding: calc(var(--spacing) * 4);
	53	+	border-radius: var(--radius-xl);
	54	+	background-color: color-mix(in srgb-linear, var(--background), transparent 40%);
	55	+	}
	56	+	}
	57	+
	58	+	.rounded-full.overflow-hidden {
	59	+	border-color: var(--autumn-orange) !important;
	60	+	}
	61	+
	62	+	[class*="max-w-[95vw]"] {
	63	+	position: fixed !important;
	64	+	}
	65	+	}
	66	+
26	67		@container html style(--siteTheme: dawn) {
27	68		* {
28	69		--background: #faf4ed;
29	70		--background-gradient: linear-gradient(135deg, #faf4ed 0%, #f2e9e1 50%, #fffaf3 100%);
30		-	--foreground: #464261;
31		-	--foreground-dark: #797593;
	71	+	--foreground: #797593;
	72	+	--foreground-dark: #464261;
32	73		--accent: #b4637a;
33	74		--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
34		-	--card-bg: #fffaf3;
	75	+	--card-bg: color-mix(in srgb-linear, #fffaf3, transparent 40%);
35	76		--card-border: #cecacd;
36	77		--muted: #9893a5;
37	78		--autumn-red: #286983;
			@@ -61,11 +102,11 @@
61	102		* {
62	103		--background: #232136;
63	104		--background-gradient: linear-gradient(135deg, #232136 0%, #393552 50%, #2a273f 100%);
64		-	--foreground: #e0def4;
65		-	--foreground-dark: #908caa;
	105	+	--foreground: #908caa;
	106	+	--foreground-dark: #e0def4;
66	107		--accent: #eb6f92;
67	108		--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
68		-	--card-bg: #2a273f;
	109	+	--card-bg: color-mix(in srgb-linear, #2a273f, transparent 40%);
69	110		--card-border: #56526e;
70	111		--muted: #6e6a86;
71	112		--autumn-red: #3e8fb0;
			@@ -149,10 +190,56 @@
149	190		}
150	191
151	192		@container html style(--siteTheme: rhine) {
	193	+	* {
	194	+	--radius-2xl: 0 !important;
	195	+	--radius-xl: 0 !important;
	196	+	--radius-lg: 0 !important;
	197	+	--background: #D7C7A5;
	198	+	--background-gradient: linear-gradient(135deg, #D7C7A5 0%, #D7C7A5 50%, #D7C7A5 100%);
	199	+	--foreground: #D7824E;
	200	+	--foreground-dark: #111111;
	201	+	--accent: #E8B359;
	202	+	--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
	203	+	--card-bg: #E3DACA;
	204	+	--card-border: var(--accent);
	205	+	--muted: #333333;
	206	+	--autumn-red: #E8B359;
	207	+	--autumn-orange: #963A37;
	208	+	--autumn-amber: #94BFAF;
	209	+	--autumn-rust: #F7EFE0;
	210	+	--autumn-gold: #f00;
	211	+	}
152	212
	213	+	main:first-child {
	214	+	&:before,
	215	+	&:after {
	216	+	content: "";
	217	+	width: 100%;
	218	+	left: 0;
	219	+	height: 2px;
	220	+	position: absolute;
	221	+	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));
	222	+	}
	223	+
	224	+	&:before {
	225	+	top: 0px;
	226	+	}
	227	+
	228	+	&:after {
	229	+	bottom: 0px;
	230	+	}
	231	+	}
	232	+	}
	233	+
	234	+	:root {
	235	+	--font-rubik: var(--font);
153	236		}
154	237
155	238		body {
156		-	font-family: var(--font-rubik), ui-sans-serif, system-ui, sans-serif;
	239	+	font-family: var(--font), ui-sans-serif, system-ui, sans-serif;
	240	+	}
	241	+
	242	+	main:first-child {
	243	+	backdrop-filter: blur(20px);
157	244		}
158	245		}

veryroundbird revised this gist 1 month ago. Go to revision

1 file changed, 158 insertions

distanthomes.user.css(file created)

		@@ -0,0 +1,158 @@
1	+	/* ==UserStyle==
2	+	@name distanthomes.guide
3	+	@namespace github.com/openstyles/stylus
4	+	@version 1.0.0
5	+	@description A new userstyle
6	+	@author Me
7	+	@var select siteTheme "Site Theme" {
8	+	"default:Default*": "default",
9	+	"moon:Rose Pine Moon": "moon",
10	+	"dawn:Rose Pine Dawn": "dawn",
11	+	"mocha:Catppuccin Mocha": "mocha",
12	+	"latte:Catppuccin Latte": "latte",
13	+	"rhodes:Rhodes Island": "rhodes",
14	+	"rhine:Rhine Lab": "rhine",
15	+	"dahuang:Dahuang": "dahuang",
16	+	"avemuji:Ave Mujica": "avemuji"
17	+	}
18	+	@var select font "Font" ["Atkinson Hyperlegible", "Lexend", "Space Mono"]
19	+	==/UserStyle== */
20	+
21	+	@-moz-document domain("distanthomes.guide") {
22	+	html {
23	+	container: html;
24	+	}
25	+
26	+	@container html style(--siteTheme: dawn) {
27	+	* {
28	+	--background: #faf4ed;
29	+	--background-gradient: linear-gradient(135deg, #faf4ed 0%, #f2e9e1 50%, #fffaf3 100%);
30	+	--foreground: #464261;
31	+	--foreground-dark: #797593;
32	+	--accent: #b4637a;
33	+	--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
34	+	--card-bg: #fffaf3;
35	+	--card-border: #cecacd;
36	+	--muted: #9893a5;
37	+	--autumn-red: #286983;
38	+	--autumn-orange: #56949f;
39	+	--autumn-amber: #907aa9;
40	+	--autumn-rust: #b4637a;
41	+	--autumn-gold: #ea9d34;
42	+	}
43	+
44	+	body:before {
45	+	content: "";
46	+	display: block;
47	+	width: 576px;
48	+	height: 240px;
49	+	border-radius: 100%;
50	+	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%);
51	+	filter: blur(64px);
52	+	position: fixed;
53	+	transform: rotate(-25deg);
54	+	left: 50%;
55	+	top: -176px;
56	+	z-index: 1;
57	+	}
58	+	}
59	+
60	+	@container html style(--siteTheme: moon) {
61	+	* {
62	+	--background: #232136;
63	+	--background-gradient: linear-gradient(135deg, #232136 0%, #393552 50%, #2a273f 100%);
64	+	--foreground: #e0def4;
65	+	--foreground-dark: #908caa;
66	+	--accent: #eb6f92;
67	+	--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
68	+	--card-bg: #2a273f;
69	+	--card-border: #56526e;
70	+	--muted: #6e6a86;
71	+	--autumn-red: #3e8fb0;
72	+	--autumn-orange: #9ccfd8;
73	+	--autumn-amber: #c4a7e7;
74	+	--autumn-rust: #eb6f92;
75	+	--autumn-gold: #f6c177;
76	+	}
77	+
78	+	body:before {
79	+	content: "";
80	+	display: block;
81	+	width: 576px;
82	+	height: 240px;
83	+	border-radius: 100%;
84	+	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%);
85	+	filter: blur(64px);
86	+	position: fixed;
87	+	transform: rotate(-25deg);
88	+	left: 50%;
89	+	top: -176px;
90	+	z-index: 1;
91	+	}
92	+	}
93	+
94	+	@container html style(--siteTheme: mocha) {
95	+	* {
96	+	--background: #1e1e2e;
97	+	--background-gradient: linear-gradient(135deg, #1e1e2e 0%, #181825 50%, #11111b 100%);
98	+	--foreground: #cdd6f4;
99	+	--foreground-dark: #bac2de;
100	+	--accent: #89dceb;
101	+	--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
102	+	--card-bg: #313244;
103	+	--card-border: #b4befe;
104	+	--muted: #a6adc8;
105	+	--autumn-red: #f38ba8;
106	+	--autumn-orange: #fab387;
107	+	--autumn-amber: #f9e2af;
108	+	--autumn-rust: #a6e3a1;
109	+	--autumn-gold: #b4befe;
110	+	}
111	+	}
112	+
113	+	@container html style(--siteTheme: latte) {
114	+	* {
115	+	--background: #eff1f5;
116	+	--background-gradient: linear-gradient(135deg, #eff1f5 0%, #e6e9ef 50%, #dce0e8 100%);
117	+	--foreground: #4c4f69;
118	+	--foreground-dark: #5c5f77;
119	+	--accent: #209fb5;
120	+	--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
121	+	--card-bg: #ccd0da;
122	+	--card-border: #7287fd;
123	+	--muted: #6c6f85;
124	+	--autumn-red: #d20f39;
125	+	--autumn-orange: #fe640b;
126	+	--autumn-amber: #df8e1d;
127	+	--autumn-rust: #40a02b;
128	+	--autumn-gold: #7287fd;
129	+	}
130	+	}
131	+
132	+	@container html style(--siteTheme: rhodes) {
133	+	* {
134	+	--background: #404040;
135	+	--background-gradient: linear-gradient(135deg, #404040 0%, #404040 50%, #404040 100%);
136	+	--foreground: #FFFFFF;
137	+	--foreground-dark: #DDDDDD;
138	+	--accent: #18d1ff;
139	+	--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
140	+	--card-bg: #555555;
141	+	--card-border: var(--accent);
142	+	--muted: #CCCCCC;
143	+	--autumn-red: #ffa700;
144	+	--autumn-orange: #ffe800;
145	+	--autumn-amber: #a6a6a6;
146	+	--autumn-rust: #fff;
147	+	--autumn-gold: #f00;
148	+	}
149	+	}
150	+
151	+	@container html style(--siteTheme: rhine) {
152	+
153	+	}
154	+
155	+	body {
156	+	font-family: var(--font-rubik), ui-sans-serif, system-ui, sans-serif;
157	+	}
158	+	}

Newer Older