site: alternate footer design (#8774)

Author: benmccann

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

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