msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

IMprove designs

Browse Source
pull/8454/head
Puru Vijay 3 years ago
parent ab3d671380
commit 8b62002b91
6 changed files with 101 additions and 101 deletions
Show Stats Download Patch File Download Diff File

80
sites/svelte.dev/src/routes/+page.svelte
Unescape View File

@ -21,48 +21,41 @@
<Hero />
<div class="blurb-shifter">
<Blurb --background="var(--sk-back-1)">
<div slot="one">
<h2>Write less code</h2>
<p>
Build boilerplate-free components using languages you already know — HTML, CSS and
JavaScript
</p>
<a href="/blog/write-less-code" class="cta">learn more</a>
</div>
<div slot="two">
<h2>No virtual DOM</h2>
<p>
Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and
stays fast
</p>
<a href="/blog/virtual-dom-is-pure-overhead" class="cta">learn more</a>
</div>
<div slot="three">
<h2>Truly reactive</h2>
<p>
No more complex state management libraries — Svelte brings reactivity to JavaScript itself
</p>
<a href="/blog/svelte-3-rethinking-reactivity" class="cta">learn more</a>
</div>
</Blurb>
</div>
<Blurb --background="var(--sk-back-1)">
<div slot="one">
<h2>Write less code</h2>
<p>
Build boilerplate-free components using languages you already know — HTML, CSS and JavaScript
</p>
<a href="/blog/write-less-code" class="cta">learn more</a>
</div>
<div slot="two">
<h2>No virtual DOM</h2>
<p>
Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays
fast
</p>
<a href="/blog/virtual-dom-is-pure-overhead" class="cta">learn more</a>
</div>
<div slot="three">
<h2>Truly reactive</h2>
<p>
No more complex state management libraries — Svelte brings reactivity to JavaScript itself
</p>
<a href="/blog/svelte-3-rethinking-reactivity" class="cta">learn more</a>
</div>
</Blurb>
<Try />
<Demo />
<section>
<h3>Who's using Svelte?</h3>
<WhosUsingSvelte />
</section>
<WhosUsingSvelte />
<Supporters />
@ -78,11 +71,8 @@
</footer>
<style>
section {
position: relative;
margin: 10rem auto;
padding: 0 var(--side-nav);
max-width: 120rem;
h2 {
line-height: 1.05;
}
footer {
@ -97,10 +87,4 @@
padding: 0.5rem 1rem;
display: block;
}
/* @media (min-width: 900px) {
.blurb-shifter {
margin-top: -12em;
}
} */
</style>

14
sites/svelte.dev/src/routes/_components/Demo.svelte
Unescape View File

@ -58,12 +58,11 @@
<style>
h3 {
/* color: white; */
font-size: var(--sk-text-xl);
}
.description {
color: var(--sk-text-2);
height: 12rem; /* prevent layout popping when tab changes */
}
.container {
@ -78,11 +77,15 @@
width: 100%;
height: 5rem;
grid-template-columns: 4fr 1fr;
color: var(--sk-text-2);
color: var(--sk-text-1);
align-items: center;
font-size: var(--h5);
}
a {
color: unset;
}
.tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
@ -122,11 +125,6 @@
display: none;
}
a,
.description :global(a) {
/* color: white; */
}
.description :global(a) {
text-decoration: underline;
}

50
sites/svelte.dev/src/routes/_components/Hero.svelte
Unescape View File

@ -6,7 +6,11 @@
<div class="hero">
<strong>Cybernetically enhanced web apps</strong>
<Image src={Machine} alt="The Svelte compiler packaging up your component code" --max-height="65vh" />
<Image
src={Machine}
alt="The Svelte compiler packaging up your component code"
--max-height="65vh"
/>
<img alt="Svelte logotype" class="logotype" src={SvelteLogotype} />
</div>
@ -28,7 +32,7 @@
font-weight: 700;
color: var(--sk-text-2);
letter-spacing: 0.05em;
left: max(var(--side-nav), 10%);
left: max(var(--sk-page-padding-side), 10%);
top: 25%;
}
@ -44,18 +48,18 @@
position: absolute;
display: block;
width: min(30vw, 36rem);
bottom: 58%;
left: 10%;
bottom: 54%;
left: 15%;
}
strong {
max-width: 16em;
top: 45%;
top: 49%;
}
.logotype,
strong {
left: calc(var(--side-nav) + 4rem);
left: calc(var(--side-nav) + 8rem);
/* left: calc(50% - 56rem + var(--side-nav)); */
}
}
@ -67,24 +71,22 @@
}
}
@media (prefers-color-scheme: dark) {
.hero {
background: radial-gradient(
64.14% 72.25% at 47.58% 31.75%,
hsl(209deg 6% 47% / 52%) 0%,
hsla(0, 0%, 100%, 0) 100%
),
linear-gradient(
92.4deg,
hsl(210, 7%, 16%) 14.67%,
hsl(0deg 0% 0% / 48%) 54.37%,
hsla(207, 22%, 13%, 0.62) 92.49%
),
linear-gradient(0deg, hsl(204, 38%, 20%), hsl(204, 10%, 90%));
}
:global(body.dark) .hero {
background: radial-gradient(
64.14% 72.25% at 47.58% 31.75%,
hsl(209deg 6% 47% / 52%) 0%,
hsla(0, 0%, 100%, 0) 100%
),
linear-gradient(
92.4deg,
hsl(210, 7%, 16%) 14.67%,
hsl(0deg 0% 0% / 48%) 54.37%,
hsla(207, 22%, 13%, 0.62) 92.49%
),
linear-gradient(0deg, hsl(204, 38%, 20%), hsl(204, 10%, 90%));
}
.logotype {
filter: invert(4) brightness(1.2);
}
:global(body.dark) .logotype {
filter: invert(4) brightness(1.2);
}
</style>

3
sites/svelte.dev/src/routes/_components/Supporters/index.svelte
Unescape View File

@ -6,7 +6,7 @@
<Section>
<p class="intro">
Svelte is free and open source software, made possible by the work of hundreds of supporters.
Svelte is free and open source software, made possible <br /> by the work of hundreds of supporters.
</p>
<div class="layout">
@ -49,6 +49,7 @@
<style>
h3 {
color: var(--sk-text-2);
font-size: var(--sk-text-l);
}
.intro {

20
sites/svelte.dev/src/routes/_components/Try.svelte
Unescape View File

@ -1,9 +1,10 @@
<script>
import { Section } from '@sveltejs/site-kit/components';
import TryTerminal from '@sveltejs/site-kit/components/home/TryTerminal.svelte';
import { theme } from '@sveltejs/site-kit/theme';
</script>
<div class="container">
<div class="container" class:dark={$theme.current === 'dark'}>
<Section --background="var(--background-2)">
<div class="grid" style="--columns: 2">
<div class="try">
@ -60,6 +61,11 @@
--background-2: var(--sk-back-4);
}
.container.dark {
--background-1: #222;
--background-2: #444;
}
.grid {
display: grid;
gap: 1em;
@ -77,12 +83,8 @@
}
}
@media (prefers-color-scheme: dark) {
.container {
/* --background-1: radial-gradient(circle at top right, rgb(49, 49, 49), rgb(77, 77, 77)); */
--background-1: #222;
--background-2: #444;
}
.create-an-app {
font-size: 0.75em;
}
.grid *::selection {
@ -94,6 +96,10 @@
color: var(--sk-text-1);
}
.description p:first-child {
margin-top: 0;
}
.try {
width: 100%;
margin: 0 auto;

35
sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte
Unescape View File

@ -1,20 +1,30 @@
<script>
import Section from '../Section.svelte';
import { companies } from './companies.js';
import { theme } from '@sveltejs/site-kit/theme';
const sorted = companies.sort((a, b) => (a.alt < b.alt ? -1 : 1));
</script>
<div class="logos">
{#each sorted as { href, filename, alt, style, invert, width, height }}
<a target="_blank" rel="noreferrer" {href} class:invert style={style || ''}>
<img src="/whos-using-svelte/{filename}" {alt} {width} {height} loading="lazy" />
</a>
<Section --background={$theme.current === 'light' ? 'var(--sk-back-4)' : '#444'}>
<section class="whos-using-svelte-container" class:dark={$theme.current === 'dark'}>
<h3>Who's using Svelte?</h3>
<div class="logos">
{#each sorted as { href, filename, alt, style, invert, width, height }}
<a target="_blank" rel="noreferrer" {href} class:invert style={style || ''}>
<img src="/whos-using-svelte/{filename}" {alt} {width} {height} loading="lazy" />
</a>
<span class="spacer" />
{/each}
</div>
<span class="spacer" />
{/each}
</div>
</section>
</Section>
<style>
h3 {
font-size: var(--sk-text-xl);
}
.logos {
display: flex;
margin: 6rem 0 0 0;
@ -55,6 +65,7 @@
min-width: 0; /* Avoid image overflow in Safari */
width: 100%;
height: auto;
/* mix-blend-mode: multiply; */
}
@media (min-width: 640px) {
@ -74,10 +85,8 @@
}
}
@media (prefers-color-scheme: dark) {
a {
--invert: 1;
filter: grayscale(1) contrast(4) opacity(0.7) invert(var(--invert, 0));
}
:global(body.dark) .logos a {
--invert: 1;
filter: grayscale(1) contrast(4) opacity(0.7) invert(var(--invert, 0));
}
</style>

Write Preview
Loading…
Cancel
Save