Merge pull request #26 from auxolotl/jakehamilton/feat/new-logo

feat: add new auxolotl logo and hero styles
auxolotl · Jun 16, 2024 · 364973d · 364973d
2 parents eb9072d + d23c112
commit 364973d
Show file tree

Hide file tree

Showing 6 changed files with 406 additions and 53 deletions.
diff --git a/public/aux-text.svg b/public/aux-text.svg
diff --git a/public/auxolotl.svg b/public/auxolotl.svg
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -4,35 +4,57 @@ interface Props {}
 import { useTranslations } from "../i18n/utils";
 import type { Params } from "../i18n/utils";
 import { Image } from "astro:assets";
-import aux from "../../public/aux.svg";
+import auxolotl from "../../public/auxolotl.svg";
 
 const { lang } = Astro.params as Params;
 const translation = useTranslations(lang);
 ---
 
 <header
-	class="sticky flex justify-between top-0 bg-[rgb(var(--background))] z-10 max-w-4xl mx-auto p-4 text-lg"
+	class="sticky flex justify-between top-0 bg-[rgb(var(--background-light))] z-10 p-4 text-lg rounded-bl-3xl rounded-br-3xl overflow-hidden"
 >
-	<div class="flex items-center">
-		<a href="https://auxolotl.org" class="flex items-center text-lg gap-4">
-			<Image class="w-12 h-12" src={aux} alt="auxolotl.org logo" />
-			<span>Auxolotl</span>
-		</a>
-	</div>
+	<div class="flex justify-between w-full max-w-4xl mx-auto pr-1">
+		<div class="flex items-center">
+			<a
+				href="https://auxolotl.org"
+				class="flex items-center text-lg gap-2"
+			>
+				<Image
+					class="w-12 h-12"
+					src={auxolotl}
+					alt="auxolotl.org logo"
+				/>
+			</a>
+		</div>
 
-	<nav>
-		<ul class="flex gap-4 items-center h-full">
-			<!--
+		<nav>
+			<ul class="flex gap-4 items-center h-full">
+				<!--
 			<li><a href="https://auxolotl.org/contribute">Contribute</a></li>
 		-->
 
-			<li><a href="https://wiki.auxolotl.org">Wiki</a></li>
-			<li>
-				<a href="https://forum.aux.computer"
-					>{translation("header.community")}</a
-				>
-			</li>
-			<li><a href="https://github.com/auxolotl">GitHub</a></li>
-		</ul>
-	</nav>
+				<li>
+					<a
+						href="https://wiki.auxolotl.org"
+						class="inline-block relative after:absolute after:left-0 after:top-full after:w-full after:h-1 after:rounded after:bg-[rgb(var(--text))] after:origin-center after:transform after:scale-x-0 hover:after:scale-x-100 after:transition-transform delay-75 duration-100"
+						>Wiki</a
+					>
+				</li>
+				<li>
+					<a
+						href="https://forum.aux.computer"
+						class="inline-block relative after:absolute after:left-0 after:top-full after:w-full after:h-1 after:rounded after:bg-[rgb(var(--text))] after:origin-center after:transform after:scale-x-0 hover:after:scale-x-100 after:transition-transform delay-75 duration-100"
+						>{translation("header.community")}</a
+					>
+				</li>
+				<li>
+					<a
+						href="https://github.com/auxolotl"
+						class="inline-block relative after:absolute after:left-0 after:top-full after:w-full after:h-1 after:rounded after:bg-[rgb(var(--text))] after:origin-center after:transform after:scale-x-0 hover:after:scale-x-100 after:transition-transform delay-75 duration-100"
+						>GitHub</a
+					>
+				</li>
+			</ul>
+		</nav>
+	</div>
 </header>
diff --git a/src/components/home/Hero.astro b/src/components/home/Hero.astro
@@ -1,29 +1,33 @@
 ---
 import { useTranslations } from "../../i18n/utils";
 import { Image } from "astro:assets";
-import aux from "../../../public/aux.svg";
+import auxText from "../../../public/aux-text.svg";
 import type { Params } from "../../i18n/utils";
 
 const { lang } = Astro.params as Params;
 const translation = useTranslations(lang);
 ---
 
-<div class="hero">
-	<div class="content">
-		<div class="icon">
-			<Image src={aux} alt="auxolotl.org logo" />
+<div class="w-full bg-[rgb(var(--background))]">
+	<div class="hero rounded-bl-3xl rounded-br-3xl">
+		<div class="content">
+			<div class="icon">
+				<Image src={auxText} alt="aux" />
+			</div>
+			<div class="description">{translation("root.description")}</div>
 		</div>
-		<h1 class="title">auxolotl.org</h1>
-		<div class="description">{translation("root.description")}</div>
 	</div>
 </div>
 
 <style>
 	.hero {
 		display: flex;
 		justify-content: center;
-		max-width: 600px;
+		width: 100%;
 		margin: 0 auto;
+		background: rgb(var(--background-light));
+		padding-top: 1rem;
+		padding-bottom: 1rem;
 	}
 
 	.content {
@@ -38,23 +42,10 @@ const translation = useTranslations(lang);
 		position: relative;
 	}
 
-	.content .icon::before {
-		content: "";
-		display: block;
-		position: absolute;
-		width: 100%;
-		height: 60%;
-		background: rgb(var(--accent));
-		border-radius: 50%;
-		bottom: 0;
-		left: 0;
-		transform: rotateZ(-5deg) skewX(-8deg) skewY(-8deg);
-		z-index: -1;
-	}
-
 	.content .icon img {
-		width: 250px;
-		height: 250px;
+		width: 100%;
+		height: auto;
+		max-width: 450px;
 	}
 
 	.content .title {
@@ -65,6 +56,7 @@ const translation = useTranslations(lang);
 
 	.content .description {
 		text-align: center;
-		font-size: 1rem;
+		font-size: 1.25rem;
+		text-wrap: balance;
 	}
 </style>
diff --git a/src/components/home/Home.astro b/src/components/home/Home.astro
@@ -8,9 +8,13 @@ import Roadmap from "./Roadmap.astro";
 <main class="grid place-items-center">
 	<Hero />
 
-	<div class="prose prose-invert py-16 px-4 max-w-4xl">
-		<Values />
-		<Goals />
-		<Roadmap />
+	<div
+		class="py-16 px-4 flex justify-center w-full bg-[rgb(var(--background))]"
+	>
+		<div class="prose prose-invert max-w-4xl w-full">
+			<Values />
+			<Goals />
+			<Roadmap />
+		</div>
 	</div>
 </main>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -32,17 +32,17 @@ const { lang } = Astro.params as Params;
 </html>
 <style is:global>
 	:root {
-		--accent: 136, 58, 234;
-		--background: 24, 24, 24;
-		--background-light: 34, 34, 38;
+		--accent: 240, 163, 213;
+		--background: 22, 24, 29;
+		--background-light: 27, 28, 33;
 		--text: 255, 255, 255;
 	}
 
 	html {
 		font-size: 16px;
 		font-family: system-ui, sans-serif;
 		color: rgb(var(--text));
-		background: rgb(var(--background));
+		background: rgb(var(--background-light));
 		background-size: 224px;
 	}
 </style>