Skip to content

Commit

Permalink
site: alternate footer design (#8774)
Browse files Browse the repository at this point in the history
  • Loading branch information
benmccann authored Jun 21, 2023
1 parent b8918fa commit 6857042
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 28 deletions.
2 changes: 1 addition & 1 deletion sites/svelte.dev/src/routes/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
92 changes: 71 additions & 21 deletions sites/svelte.dev/src/routes/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 0 additions & 5 deletions sites/svelte.dev/src/routes/_components/Try.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

1 comment on commit 6857042

@wilsonyip2
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a newbie/passer-by to svelte.dev, the tutorial links in header and footer are different and linked to different places.
Header: https://learn.svelte.dev/
Footer: https://svelte.dev/tutorial

Is the footer one old one?

Please sign in to comment.