site: alternate footer design (#8774)

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';
 

sites/svelte.dev/src/routes/+page.svelte

@@ -57,39 +57,89 @@
 
 <Supporters />
 
-{#if $theme.current === 'light'}
+<section>
-	<Image lazy src={CollectiveLight} alt="The Svelte logo in a ball pit" />
+	<footer>
-{:else}
+		<div class="logo">
-	<Image lazy src={CollectiveDark} alt="The Svelte logo in a ball pit" />
+		</div>
-{/if}
+		<div class="links">
-
+			<h4>resources</h4>
-<footer>
+			<a href="/docs">documentation</a>
-	<a href="/tutorial">Tutorial</a>
+			<a href="/tutorial">tutorial</a>
-	<a href="/docs">Docs</a>
+			<a href="/examples">examples</a>
-	<a href="/examples">Examples</a>
+			<a href="/blog">blog</a>
-	<a href="/blog">Blog</a>
+		</div>
-	<a href="https://opencollective.com/svelte">Open Collective</a>
+		<div class="links">
-</footer>
+			<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;
+		max-width: 120rem;
-		flex-wrap: wrap;
+		padding: 0 var(--sk-page-padding-side);
-		justify-content: center;
+		margin: 0 auto;
-		padding: 4rem;
+		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 {
+	.open-source {
-		font-size: var(--sk-text-m);
+		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>

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">

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);