From 68570424a2e2f61cccb245aa5252b7221e36ca8f Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 21 Jun 2023 11:49:14 -0700
Subject: [PATCH] site: alternate footer design (#8774)

---
 sites/svelte.dev/src/routes/+layout.svelte    |  2 +-
 sites/svelte.dev/src/routes/+page.svelte      | 92 ++++++++++++++-----
 .../_components/Supporters/index.svelte       |  2 +-
 .../src/routes/_components/Try.svelte         |  5 -
 4 files changed, 73 insertions(+), 28 deletions(-)

diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte
index 352f2223eaeb..415a7e19c1ac 100644
--- a/sites/svelte.dev/src/routes/+layout.svelte
+++ b/sites/svelte.dev/src/routes/+layout.svelte
@@ -2,7 +2,7 @@
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
 	import { Icon, Shell } from '@sveltejs/site-kit/components';
-	import { Nav, Separator } from '@sveltejs/site-kit/nav';
+	import { Nav } from '@sveltejs/site-kit/nav';
 	import { Search, SearchBox } from '@sveltejs/site-kit/search';
 	import '@sveltejs/site-kit/styles/index.css';
 
diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte
index e4389a7f4a20..90f90180bcec 100644
--- a/sites/svelte.dev/src/routes/+page.svelte
+++ b/sites/svelte.dev/src/routes/+page.svelte
@@ -57,39 +57,89 @@
 
 <Supporters />
 
-{#if $theme.current === 'light'}
-	<Image lazy src={CollectiveLight} alt="The Svelte logo in a ball pit" />
-{:else}
-	<Image lazy src={CollectiveDark} alt="The Svelte logo in a ball pit" />
-{/if}
-
-<footer>
-	<a href="/tutorial">Tutorial</a>
-	<a href="/docs">Docs</a>
-	<a href="/examples">Examples</a>
-	<a href="/blog">Blog</a>
-	<a href="https://opencollective.com/svelte">Open Collective</a>
-</footer>
+<section>
+	<footer>
+		<div class="logo">
+		</div>
+		<div class="links">
+			<h4>resources</h4>
+			<a href="/docs">documentation</a>
+			<a href="/tutorial">tutorial</a>
+			<a href="/examples">examples</a>
+			<a href="/blog">blog</a>
+		</div>
+		<div class="links">
+			<h4>connect</h4>
+			<a href="https://github.com/sveltejs/svelte">github</a>
+			<a href="https://opencollective.com/svelte">open collective</a>
+			<a href="/chat">discord</a>
+			<a href="https://twitter.com/sveltejs">twitter</a>
+		</div>
+		<div class="copyright">© 2023 <a href="https://github.com/sveltejs/svelte/graphs/contributors">Svelte contributors</a></div>
+		<div class="open-source">Svelte is <a href="https://github.com/sveltejs/svelte">free and open source software</a> released under the MIT license</div>
+	</footer>
+</section>
 
 <style>
 	h2 {
 		line-height: 1.05;
 	}
 
+	p {
+		font-size: var(--sk-text-m);
+	}
+
+	section {
+		background: var(--sk-back-4);
+		padding: 10rem 0;
+	}
+
 	footer {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		padding: 4rem;
+		max-width: 120rem;
+		padding: 0 var(--sk-page-padding-side);
+		margin: 0 auto;
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		grid-template-rows: 1fr;
+		grid-row-gap: 6rem;
+	}
+
+	footer .logo {
+		display: none;
+		background: url('@sveltejs/site-kit/branding/svelte-logo.svg');
+		background-repeat: no-repeat;
+		background-size: 8rem;
+		filter: grayscale(100%) opacity(84%);
 	}
 
-	footer a {
+	footer h4 {
+		font-size: var(--sk-text-m);
+		padding-bottom: 1rem;
+	}
+
+	.links a {
 		color: var(--sk-text-2);
-		padding: 0.5rem 1rem;
+		font-size: var(--sk-text-s);
 		display: block;
+		line-height: 1.8;
 	}
 
-	p {
-		font-size: var(--sk-text-m);
+	.open-source {
+		display: none;
+		grid-column: span 2;
+	}
+
+	@media (min-width: 500px) {
+		footer {
+			grid-template-columns: repeat(3, 1fr);
+		}
+
+		footer .logo {
+			display: block;
+		}
+
+		.open-source {
+			display: block;
+		}
 	}
 </style>
diff --git a/sites/svelte.dev/src/routes/_components/Supporters/index.svelte b/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
index a4138dd15d5b..32d51d3e7bb0 100644
--- a/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
+++ b/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
@@ -6,7 +6,7 @@
 
 <Section --background="var(--sk-back-2">
 	<p class="intro">
-		Svelte is free and open source software, made possible by the work of hundreds of supporters.
+		Svelte is made possible by the work of hundreds of supporters.
 	</p>
 
 	<div class="layout">
diff --git a/sites/svelte.dev/src/routes/_components/Try.svelte b/sites/svelte.dev/src/routes/_components/Try.svelte
index d75ec4c905b3..4efdc7df91c0 100644
--- a/sites/svelte.dev/src/routes/_components/Try.svelte
+++ b/sites/svelte.dev/src/routes/_components/Try.svelte
@@ -70,11 +70,6 @@
 		font-size: var(--sk-text-xl);
 	}
 
-	a {
-		color: inherit;
-		text-decoration: underline;
-	}
-
 	@media (min-width: 900px) {
 		.grid {
 			grid-template-columns: repeat(var(--columns), 1fr);