Add variant downloads for PrideGUI

Pridecraft-Studios · Oct 18, 2024 · 7261202 · 7261202
1 parent 1ea34b6
commit 7261202
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 8 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -286,3 +286,37 @@ a.logo {
 		justify-content: center;
 	}
 }
+
+.varied {
+	display: flex;
+	flex-flow: row wrap;
+	padding: 0;
+	gap: 1em;
+
+	> li {
+		display: flex;
+		text-align: center;
+		justify-content: center;
+		justify-items: center;
+
+		list-style-type: none;
+		flex-flow: column;
+		flex-grow: 1;
+	}
+
+	@media (max-width: 400px) {
+		flex-flow: column;
+	}
+}
+
+h3 {
+	display: flex inline;
+	align-items: center;
+	justify-content: center;
+	gap: 0.25em;
+}
+
+h3 > svg {
+	width: 2em;
+	height: 2em;
+}
diff --git a/src/branding.scss b/src/branding.scss
@@ -1,5 +1,8 @@
 /* Copyright (c) 2023-2024 Pridecraft Studios & contributors
  * All Rights Reserved */
+
+@use 'sass:color';
+
 @mixin hex($a: null, $b: null, $c: null, $d: null, $e: null, $f: null) {
 	@if $a {
 		--a: #{$a};
@@ -21,6 +24,21 @@
 	}
 }
 
+@mixin quad($a: null, $b: null, $c: null, $d: null) {
+	@if $a {
+		--a: #{$a};
+	}
+	@if $b {
+		--b: #{$b};
+	}
+	@if $c {
+		--c: #{$c};
+	}
+	@if $d {
+		--d: #{$d};
+	}
+}
+
 @mixin tri($a: null, $b: null, $c: null) {
 	@if $a {
 		--a: #{$a};
@@ -33,9 +51,12 @@
 	}
 }
 
+.rosette {
+	visibility: visible;
+}
+
 svg.rainbow,
-svg.gay,
-svg.lesbian {
+svg.gay {
 	// hex
 	--g: var(--a);
 	--h: var(--b);
@@ -45,6 +66,18 @@ svg.lesbian {
 	--l: var(--f);
 }
 
+svg.lesbian {
+	// quad
+	--e: var(--a);
+	--i: var(--a);
+	--f: var(--b);
+	--j: var(--b);
+	--g: var(--c);
+	--k: var(--c);
+	--h: var(--d);
+	--l: var(--d);
+}
+
 svg.trans,
 svg.bi {
 	// tri
@@ -78,3 +111,23 @@ svg.bi {
 svg.gay {
 	@include hex($a: #3e1a78, $b: #5049cb, $c: #7bade3, $d: #99e8c2, $e: #26ceaa, $f: #078d70);
 }
+
+svg.lesbian {
+	@include quad(#d362a4, #a30262, #ff9a56, #d52d00);
+}
+
+svg.pridegui {
+	--a: #3e1a78;
+	--b: #5049cb;
+	--c: #7bade3;
+	--d: #99e8c2;
+	--e: #26ceaa;
+	--f: #078d70;
+
+	--l: #a30262;
+	--k: #d362a4;
+	--j: #{color.change(#d362a4, $lightness: 80%, $chroma: 20%, $space: oklch)};
+	--i: #{color.change(#ff9a56, $lightness: 80%, $chroma: 20%, $space: oklch)};
+	--h: #ff9a56;
+	--g: #d52d00;
+}
diff --git a/src/lib/boilerplate/Rosette.svelte b/src/lib/boilerplate/Rosette.svelte
@@ -7,7 +7,7 @@
 	// GudF helped optimise the logo itself further :3c
 </script>
 
-<svg width="48" height="48" class={type} aria-labelledby={id}>
+<svg width="48" height="48" class="rosette {type}" aria-labelledby={id} hidden>
 	<use href="/logo.svg#a" />
 </svg>
 <span {id}><slot /></span>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -35,7 +35,7 @@
 		<Popup id="projects" label="Projects">
 			<ul>
 				<Link id="pridepack" type="bi no-bg">Pride Pack</Link>
-				<Link id="pridegui" type="gay no-bg">Pride GUI</Link>
+				<Link id="pridegui" type="pridegui no-bg">Pride GUI</Link>
 				<!--Link id="joy">Joy</Link-->
 				<!--Link id="mspride">MSPRIDE</Link-->
 				<Link id="pridebones" type="trans no-bg">Pride Bones</Link>

diff --git a/src/routes/pridegui/+page.svelte.md b/src/routes/pridegui/+page.svelte.md
@@ -7,7 +7,7 @@ import Badges from '$lib/components/Badges.svelte';
 import Picture from '$lib/components/Picture.svelte';
 
 import { Modrinth, GitHubDownloads, GitHubCommits } from '$lib/shields';
-import { Who, Socials, Donate } from '$lib/boilerplate';
+import { Who, Socials, Donate, Rosette } from '$lib/boilerplate';
 </script>
 
 <!-- Clyde had this so I'm adding it too -->
@@ -35,9 +35,35 @@ which has versions of the pack for Beta 1.7.3 all the way through 1.20.1.
 
 ## Where can I download PrideGUI?
 
-<ul class="badges">
-<li><Badge id="modrinth" rel="me" link="https://modrinth.com/resourcepack/pridegui" ext="svg" head="Available on" name="Modrinth"/></li>
-<li><Badge id="github" rel="me" link="https://github.com/Pridecraft-Studios/pridegui" ext="svg" head="Available on" name="GitHub"/></li>
+<ul class="varied">
+<li>
+	<h3><Rosette type="gay no-bg">Dark Mode</Rosette></h3>
+	<ul class="badges">
+	<li><Badge id="modrinth" rel="me" link="https://modrinth.com/resourcepack/pridegui" ext="svg" head="Available on" name="Modrinth"/></li>
+	<li><Badge id="github" rel="me" link="https://git.pridecraft.gay/pridegui" ext="svg" head="Available on" name="GitHub"/></li>
+	</ul>
+</li>
+<li>
+	<h3><Rosette type="gay no-bg">Dark Mode - Legacy</Rosette></h3>
+	<ul class="badges">
+	<li><Badge id="modrinth" rel="me" link="https://modrinth.com/resourcepack/pridegui-legacy" ext="svg" head="Available on" name="Modrinth"/></li>
+	<li><Badge id="github" rel="me" link="https://git.pridecraft.gay/pridegui/branches/all?query=legacy" ext="svg" head="Available on" name="GitHub"/></li>
+	</ul>
+</li>
+<li>
+	<h3><Rosette type="lesbian no-bg">Light Mode</Rosette></h3>
+	<ul class="badges">
+	<li><Badge id="modrinth" rel="me" link="https://modrinth.com/resourcepack/pridegui-light" ext="svg" head="Available on" name="Modrinth"/></li>
+	<li><Badge id="github" rel="me" link="https://git.pridecraft.gay/pridegui/tree/light/main" ext="svg" head="Available on" name="GitHub"/></li>
+	</ul>
+</li>
+<li>
+	<h3><Rosette type="lesbian no-bg">Light Mode - Legacy</Rosette></h3>
+	<ul class="badges">
+	<li><Badge id="modrinth" rel="me" link="https://modrinth.com/resourcepack/pridegui-light-legacy" ext="svg" head="Available on" name="Modrinth"/></li>
+	<li><Badge id="github" rel="me" link="https://git.pridecraft.gay/pridegui/branches/all?query=light%2Flegacy" ext="svg" head="Available on" name="GitHub"/></li>
+	</ul>
+</li>
 </ul>
 
 <small>