fix(site-2): Restyle home page (#8454)
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>pull/8585/head
Puru Vijay
1 year ago
committed by
GitHub
@ -0,0 +1,116 @@
|
||||
<script>
|
||||
import { Section } from '@sveltejs/site-kit/components';
|
||||
import { TryTerminal } from '@sveltejs/site-kit/components';
|
||||
</script>
|
||||
|
||||
<div class="try-container">
|
||||
<Section --background="var(--background-2)">
|
||||
<div class="grid" style="--columns: 2">
|
||||
<div class="try">
|
||||
<TryTerminal />
|
||||
|
||||
<p class="create-an-app">
|
||||
...or
|
||||
<a target="_blank" rel="noreferrer" href="https://sveltekit.new"> create an app </a>
|
||||
on StackBlitz.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<p>
|
||||
Svelte is a radical new approach to building user interfaces. Whereas traditional
|
||||
frameworks like React and Vue do the bulk of their work in the <em>browser</em>, Svelte
|
||||
shifts that work into a
|
||||
<em>compile step</em> that happens when you build your app. No more virtual DOM!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
We're proud that Svelte was recently voted the <a
|
||||
href="https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks"
|
||||
>most loved web framework</a
|
||||
>
|
||||
with the
|
||||
<a href="https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/"
|
||||
>most satisfied developers</a
|
||||
>
|
||||
drawing the
|
||||
<a
|
||||
href="https://tsh.io/state-of-frontend/#which-of-the-following-frameworks-would-you-like-to-learn-in-the-future"
|
||||
>most interest in learning it</a
|
||||
>
|
||||
in a trio of industry surveys. We think you'll love it too.
|
||||
<a href="/blog/svelte-3-rethinking-reactivity" class="cta"
|
||||
>Read the introductory blog post</a
|
||||
>
|
||||
to learn more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.try-container {
|
||||
--background-2: var(--sk-back-4);
|
||||
}
|
||||
|
||||
:global(body.dark .try-container) {
|
||||
--background-2: #444;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.try-container {
|
||||
--background-2: #444;
|
||||
}
|
||||
|
||||
:global(body.light .try-container) {
|
||||
--background-2: var(--sk-back-4) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
margin: 0 0 4rem 0;
|
||||
}
|
||||
|
||||
.grid:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(var(--columns), 1fr);
|
||||
gap: 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.create-an-app {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.grid *::selection {
|
||||
background: hsl(15, 100%, 65%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--sk-text-1);
|
||||
}
|
||||
|
||||
.description p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.try {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
font-size: var(--sk-text-m);
|
||||
color: var(--sk-text-1);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 3.2 MiB |
|
Before Width: | Height: | Size: 3.1 MiB |
|
After Width: | Height: | Size: 4.4 MiB |
|
After Width: | Height: | Size: 4.3 MiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.7 KiB |