chore: Sitekit footer (#9072)

* Push

* Bump site-kit
pull/7932/head
Puru Vijay 1 year ago committed by GitHub
parent ea2b5700ca
commit 3173fdde89
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -185,8 +185,8 @@ importers:
specifier: ^1.22.4
version: 1.22.4(svelte@packages+svelte)(vite@4.4.8)
'@sveltejs/site-kit':
specifier: 6.0.0-next.24
version: 6.0.0-next.24(@sveltejs/kit@1.22.4)(svelte@packages+svelte)
specifier: 6.0.0-next.25
version: 6.0.0-next.25(@sveltejs/kit@1.22.4)(svelte@packages+svelte)
'@sveltejs/vite-plugin-svelte':
specifier: ^2.4.3
version: 2.4.3(svelte@packages+svelte)(vite@4.4.8)
@ -2057,8 +2057,8 @@ packages:
svelte-local-storage-store: 0.4.0(svelte@packages+svelte)
dev: false
/@sveltejs/site-kit@6.0.0-next.24(@sveltejs/kit@1.22.4)(svelte@packages+svelte):
resolution: {integrity: sha512-cyibvq5dmqWD9qzR4dIj66h+wzXG1Awfx//zpwkD9R3kPUhejxYFzdlPkuMBH8NXDydB8YXXCW/1T83Mw5J4Hg==}
/@sveltejs/site-kit@6.0.0-next.25(@sveltejs/kit@1.22.4)(svelte@packages+svelte):
resolution: {integrity: sha512-MZen4ZdjHoWVHn5DQdYBYprryhsyTHVT3XxW/hUp8K6dgFBXK5Cg/foHcxwzkepP6Gmabgi9eHC8e3PPGNKaAA==}
peerDependencies:
'@sveltejs/kit': ^1.20.0
svelte: ^4.0.0

@ -30,7 +30,7 @@
"@resvg/resvg-js": "^2.4.1",
"@sveltejs/adapter-vercel": "^3.0.3",
"@sveltejs/kit": "^1.22.4",
"@sveltejs/site-kit": "6.0.0-next.24",
"@sveltejs/site-kit": "6.0.0-next.25",
"@sveltejs/vite-plugin-svelte": "^2.4.3",
"@types/cookie": "^0.5.1",
"@types/node": "^20.4.7",

@ -1,5 +1,5 @@
<script>
import { Blurb, TrySection } from '@sveltejs/site-kit/home';
import { Blurb, Footer, TrySection } from '@sveltejs/site-kit/home';
import Demo from './_components/Demo.svelte';
import Hero from './_components/Hero.svelte';
import Supporters from './_components/Supporters/index.svelte';
@ -52,33 +52,51 @@
<Supporters />
<section>
<footer>
<div class="logo" />
<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>
<Footer
links={{
resources: [
{
title: 'documentation',
href: '/docs'
},
{
title: 'tutorial',
href: '/tutorial'
},
{
title: 'examples',
href: '/examples'
},
{
title: 'blog',
href: '/blog'
}
],
connect: [
{
title: 'github',
href: 'https://github.com/sveltejs/svelte'
},
{
title: 'opencollective',
href: 'https://opencollective.com/svelte'
},
{
title: 'discord',
href: '/chat'
},
{
title: 'twitter',
href: 'https://twitter.com/sveltejs'
}
]
}}
>
<span slot="copyright">
Svelte is <a href="https://github.com/sveltejs/svelte">free and open source software</a> released
under the MIT license
</span>
</Footer>
<style>
h2 {
@ -88,66 +106,4 @@
p {
font-size: var(--sk-text-m);
}
section {
background: var(--sk-back-4);
padding: 10rem 0;
}
footer {
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 h4 {
font-size: var(--sk-text-m);
padding-bottom: 1rem;
}
.links a {
color: var(--sk-text-2);
font-size: var(--sk-text-s);
display: block;
line-height: 1.8;
}
.open-source {
display: none;
grid-column: span 2;
}
.copyright {
grid-column: span 2;
}
@media (min-width: 500px) {
footer {
grid-template-columns: repeat(3, 1fr);
}
footer .logo {
display: block;
}
.copyright {
grid-column: span 1;
}
.open-source {
display: block;
}
}
</style>

Loading…
Cancel
Save