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

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

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

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

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

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

@ -6,7 +6,7 @@
<Section> <Section>
<p class="intro"> <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> </p>
<div class="layout"> <div class="layout">
@ -49,6 +49,7 @@
<style> <style>
h3 { h3 {
color: var(--sk-text-2); color: var(--sk-text-2);
font-size: var(--sk-text-l);
} }
.intro { .intro {

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

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

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

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

Write Preview
Loading…
Cancel
Save