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

fix(site-2): Home page styles(pt 2) (#8720)

Browse Source 
* DocsNav

* Push

* Nav title on each page

* Install jridgewell sourcemap codec. Why it breaking suddenly

* Use theme store

* Use $nav_title

* use $page.data.nav_title

* Disable global prerendering

* Fix Suppprters section

* use new method

* Initially hidden nav functionality

* Minor fixes

* Simplify into one single nav

* Accomodate to the bottom nav

* Minor fixes

* nit

* Add selected to other pages as well

* New way of passing to navbar

* Code cleanup

* Directly pass list instead of components

* 14 days

* Fix comment

* Discord icon

* Homepage styles

* More tweak, extra CTA

* Bigger lowercase tagline

* Preload overpass for transitions demo

* Tweak for ipad air

* Remove letter spacing

* simplify home page styles (#8738)

* simplify

* fix

* slightly better use of space

* tiny bit more room

* read the docs

* crop image

* very minor tweak

* another breakpoint

* tweak

* actually it works down to 1400px

---------

Co-authored-by: Rich Harris <git@rich-harris.dev>

---------

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
Co-authored-by: Rich Harris <git@rich-harris.dev>
pull/8742/head
Puru Vijay 2 years ago committed by GitHub
parent 62bef809b2
commit 9d33d14ed4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 148 additions and 93 deletions
Show Stats Download Patch File Download Diff File

50
pnpm-lock.yaml
Unescape View File

@ -191,17 +191,17 @@ importers:
specifier: ^5.0.0 specifier: ^5.0.0
version: 5.0.0 version: 5.0.0
'@types/node': '@types/node':
specifier: ^20.2.5 specifier: ^20.2.6
version: 20.2.5 version: 20.2.6
'@types/prettier': '@types/prettier':
specifier: ^2.7.2 specifier: ^2.7.3
version: 2.7.2 version: 2.7.3
degit: degit:
specifier: ^2.8.4 specifier: ^2.8.4
version: 2.8.4 version: 2.8.4
dotenv: dotenv:
specifier: ^16.1.0 specifier: ^16.1.4
version: 16.1.0 version: 16.1.4
jimp: jimp:
specifier: ^0.22.8 specifier: ^0.22.8
version: 0.22.8 version: 0.22.8
@ -209,8 +209,8 @@ importers:
specifier: ^0.30.0 specifier: ^0.30.0
version: 0.30.0 version: 0.30.0
marked: marked:
specifier: ^5.0.3 specifier: ^5.1.0
version: 5.0.3 version: 5.1.0
node-fetch: node-fetch:
specifier: ^3.3.1 specifier: ^3.3.1
version: 3.3.1 version: 3.3.1
@ -255,7 +255,7 @@ importers:
version: 5.0.4 version: 5.0.4
vite: vite:
specifier: ^4.3.9 specifier: ^4.3.9
version: 4.3.9(@types/node@20.2.5)(sass@1.62.1) version: 4.3.9(@types/node@20.2.6)(sass@1.62.1)
vite-imagetools: vite-imagetools:
specifier: ^5.0.4 specifier: ^5.0.4
version: 5.0.4 version: 5.0.4
@ -1742,7 +1742,7 @@ packages:
svelte: link:packages/svelte svelte: link:packages/svelte
tiny-glob: 0.2.9 tiny-glob: 0.2.9
undici: 5.22.1 undici: 5.22.1
vite: 4.3.9(@types/node@20.2.5)(sass@1.62.1) vite: 4.3.9(@types/node@20.2.6)(sass@1.62.1)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@ -1772,7 +1772,7 @@ packages:
codemirror: 6.0.1(@lezer/common@1.0.3) codemirror: 6.0.1(@lezer/common@1.0.3)
esm-env: 1.0.0 esm-env: 1.0.0
estree-walker: 3.0.3 estree-walker: 3.0.3
marked: 5.0.3 marked: 5.1.0
resolve.exports: 2.0.2 resolve.exports: 2.0.2
svelte: link:packages/svelte svelte: link:packages/svelte
svelte-json-tree: 1.0.0 svelte-json-tree: 1.0.0
@ -1820,7 +1820,7 @@ packages:
'@sveltejs/vite-plugin-svelte': 2.4.1(svelte@packages+svelte)(vite@4.3.9) '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@packages+svelte)(vite@4.3.9)
debug: 4.3.4 debug: 4.3.4
svelte: link:packages/svelte svelte: link:packages/svelte
vite: 4.3.9(@types/node@20.2.5)(sass@1.62.1) vite: 4.3.9(@types/node@20.2.6)(sass@1.62.1)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@ -1838,7 +1838,7 @@ packages:
magic-string: 0.30.0 magic-string: 0.30.0
svelte: link:packages/svelte svelte: link:packages/svelte
svelte-hmr: 0.15.2(svelte@packages+svelte) svelte-hmr: 0.15.2(svelte@packages+svelte)
vite: 4.3.9(@types/node@20.2.5)(sass@1.62.1) vite: 4.3.9(@types/node@20.2.6)(sass@1.62.1)
vitefu: 0.2.4(vite@4.3.9) vitefu: 0.2.4(vite@4.3.9)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@ -1912,8 +1912,8 @@ packages:
resolution: {integrity: sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==} resolution: {integrity: sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==}
dev: true dev: true
/@types/node@20.2.5: /@types/node@20.2.6:
resolution: {integrity: sha512-JJulVEQXmiY9Px5axXHeYGLSjhkZEnD+MDPDGbCbIAbMslkKwmygtZFy1X6s/075Yo94sf8GuSlFfPzysQrWZQ==} resolution: {integrity: sha512-GQBWUtGoefMEOx/vu+emHEHU5aw6JdDoEtZhoBrHFPZbA/YNRFfN996XbBASEWdvmLSLyv9FKYppYGyZjCaq/g==}
/@types/normalize-package-data@2.4.1: /@types/normalize-package-data@2.4.1:
resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==} resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
@ -1923,8 +1923,8 @@ packages:
resolution: {integrity: sha512-qwfpsHmFuhAS/dVd4uBIraMxRd56vwBUYQGZ6GpXnFuM2XMRFJbIyruFKKlW2daQliuYZwe0qfn/UjFCDKic5g==} resolution: {integrity: sha512-qwfpsHmFuhAS/dVd4uBIraMxRd56vwBUYQGZ6GpXnFuM2XMRFJbIyruFKKlW2daQliuYZwe0qfn/UjFCDKic5g==}
dev: false dev: false
/@types/prettier@2.7.2: /@types/prettier@2.7.3:
resolution: {integrity: sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==} resolution: {integrity: sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==}
dev: true dev: true
/@types/pug@2.0.6: /@types/pug@2.0.6:
@ -1946,7 +1946,7 @@ packages:
/@types/websocket@1.0.5: /@types/websocket@1.0.5:
resolution: {integrity: sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ==} resolution: {integrity: sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ==}
dependencies: dependencies:
'@types/node': 20.2.5 '@types/node': 20.2.6
dev: false dev: false
/@typescript-eslint/eslint-plugin@5.59.7(@typescript-eslint/parser@5.59.7)(eslint@8.41.0)(typescript@5.0.4): /@typescript-eslint/eslint-plugin@5.59.7(@typescript-eslint/parser@5.59.7)(eslint@8.41.0)(typescript@5.0.4):
@ -2959,8 +2959,8 @@ packages:
engines: {node: '>=12'} engines: {node: '>=12'}
dev: true dev: true
/dotenv@16.1.0: /dotenv@16.1.4:
resolution: {integrity: sha512-XiwP/4cqatBNLEnKe169vPZCrovUmYngyVA4DgZ3uIVLJfZaBgr4uT0EF2TrEQqgWDDlekGo0muEYme5SR78Ww==} resolution: {integrity: sha512-m55RtE8AsPeJBpOIFKihEmqUcoVncQIwo7x9U8ZwLEZw9ZpXboz2c+rvog+jUaJvVrZ5kBOeYQBX5+8Aa/OZQw==}
engines: {node: '>=12'} engines: {node: '>=12'}
dev: true dev: true
@ -4388,8 +4388,8 @@ packages:
engines: {node: '>=8'} engines: {node: '>=8'}
dev: true dev: true
/marked@5.0.3: /marked@5.1.0:
resolution: {integrity: sha512-KUONa43Uk74uUNWMxh6lfaNYmSAsRMiDAaX8QBCCRVXzEufR0zX6T33vrGbvTnQLL02ungDM3KSzZtO+chJaHg==} resolution: {integrity: sha512-z3/nBe7aTI8JDszlYLk7dDVNpngjw0o1ZJtrA9kIfkkHcIF+xH7mO23aISl4WxP83elU+MFROgahqdpd05lMEQ==}
engines: {node: '>= 18'} engines: {node: '>= 18'}
hasBin: true hasBin: true
@ -6230,7 +6230,7 @@ packages:
fsevents: 2.3.2 fsevents: 2.3.2
dev: true dev: true
/vite@4.3.9(@types/node@20.2.5)(sass@1.62.1): /vite@4.3.9(@types/node@20.2.6)(sass@1.62.1):
resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==} resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
engines: {node: ^14.18.0 || >=16.0.0} engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true hasBin: true
@ -6255,7 +6255,7 @@ packages:
terser: terser:
optional: true optional: true
dependencies: dependencies:
'@types/node': 20.2.5 '@types/node': 20.2.6
esbuild: 0.17.19 esbuild: 0.17.19
postcss: 8.4.23 postcss: 8.4.23
rollup: 3.23.0 rollup: 3.23.0
@ -6271,7 +6271,7 @@ packages:
vite: vite:
optional: true optional: true
dependencies: dependencies:
vite: 4.3.9(@types/node@20.2.5)(sass@1.62.1) vite: 4.3.9(@types/node@20.2.6)(sass@1.62.1)
/vitest@0.31.1(happy-dom@9.20.3)(jsdom@21.1.2)(playwright@1.34.3): /vitest@0.31.1(happy-dom@9.20.3)(jsdom@21.1.2)(playwright@1.34.3):
resolution: {integrity: sha512-/dOoOgzoFk/5pTvg1E65WVaobknWREN15+HF+0ucudo3dDG/vCZoXTQrjIfEaWvQXmqScwkRodrTbM/ScMpRcQ==} resolution: {integrity: sha512-/dOoOgzoFk/5pTvg1E65WVaobknWREN15+HF+0ucudo3dDG/vCZoXTQrjIfEaWvQXmqScwkRodrTbM/ScMpRcQ==}

8
sites/svelte.dev/package.json
Unescape View File

@ -32,13 +32,13 @@
"@sveltejs/site-kit": "6.0.0-next.1", "@sveltejs/site-kit": "6.0.0-next.1",
"@sveltejs/vite-plugin-svelte": "^2.4.1", "@sveltejs/vite-plugin-svelte": "^2.4.1",
"@types/marked": "^5.0.0", "@types/marked": "^5.0.0",
"@types/node": "^20.2.5", "@types/node": "^20.2.6",
"@types/prettier": "^2.7.2", "@types/prettier": "^2.7.3",
"degit": "^2.8.4", "degit": "^2.8.4",
"dotenv": "^16.1.0", "dotenv": "^16.1.4",
"jimp": "^0.22.8", "jimp": "^0.22.8",
"magic-string": "^0.30.0", "magic-string": "^0.30.0",
"marked": "^5.0.3", "marked": "^5.1.0",
"node-fetch": "^3.3.1", "node-fetch": "^3.3.1",
"prettier": "^2.8.8", "prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.10.1", "prettier-plugin-svelte": "^2.10.1",

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

@ -31,6 +31,10 @@
let selected = examples[0]; let selected = examples[0];
</script> </script>
<svelte:head>
<link rel="prefetch" href="/fonts/overpass/overpass-latin-400.woff2" />
</svelte:head>
<Section --background="var(--sk-back-2)"> <Section --background="var(--sk-back-2)">
<h3>Why Svelte?</h3> <h3>Why Svelte?</h3>

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

@ -1,109 +1,161 @@
<script> <script>
import Image from './Image.svelte'; import { Icon } from '@sveltejs/site-kit/components';
import SvelteLogotype from './svelte-logotype.svg'; import SvelteLogotype from './svelte-logotype.svg';
// @ts-ignore
import MachineDesktop from './svelte-machine-desktop.png?w=1200;2000;2800;4400&format=avif;webp;png;&as=picture';
// @ts-ignore
import MachineMobile from './svelte-machine-mobile.png?w=960&format=avif;webp;png;&as=picture';
import Machine from './svelte-machine.png?big-image'; const srcset = (sources) => sources.map(({ src, w }) => `${src} ${w}w`).join(', ');
</script> </script>
<div class="hero"> <div class="hero">
<strong>Cybernetically enhanced web apps</strong> <div class="hero-content">
<img alt="Svelte logotype" class="logotype" src={SvelteLogotype} />
<Image <strong>
src={Machine} <span style="white-space: nowrap;">Cybernetically enhanced</span> <br /> web apps
alt="The Svelte compiler packaging up your component code" </strong>
--max-height="60vh" <div class="buttons">
/> <a href="https://learn.svelte.dev" rel="external" class="cta">
tutorial <Icon name="arrow-right" />
<img alt="Svelte logotype" class="logotype" src={SvelteLogotype} /> </a>
<a href="/docs/introduction" class="cta basic">read the docs</a>
</div>
</div>
<picture class="machine">
<source
srcset={srcset(MachineDesktop.sources.avif)}
type="image/avif"
media="(min-width: 800px)"
/>
<source
srcset={srcset(MachineDesktop.sources.webp)}
type="image/webp"
media="(min-width: 800px)"
/>
<source
srcset={srcset(MachineDesktop.sources.png)}
type="image/png"
media="(min-width: 800px)"
/>
<source srcset={srcset(MachineMobile.sources.avif)} type="image/avif" />
<source srcset={srcset(MachineMobile.sources.webp)} type="image/webp" />
<source srcset={srcset(MachineMobile.sources.png)} type="image/png" />
<img alt="The Svelte compiler packaging up your component code" src={MachineMobile.img.src} />
</picture>
</div> </div>
<style> <style>
.hero { .hero {
position: relative; position: relative;
background: radial-gradient(circle at 40% 30%, rgb(235, 243, 249), rgb(214, 222, 228)); background: radial-gradient(circle at 40% 30%, rgb(235, 243, 249), rgb(214, 222, 228));
padding: 6rem 0 34vw 0;
height: 40vh; margin-bottom: 3rem;
} }
.hero :global(picture img) { .machine img {
width: 240%; position: absolute;
transform: translateX(-26%); pointer-events: none;
} }
.logotype { .hero-content {
display: none; display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 4rem;
} }
strong { strong {
position: absolute; font-size: var(--sk-text-l);
font-size: min(4vw, var(--sk-text-s)); text-align: center;
max-width: 10em; font-family: var(--sk-font);
text-transform: uppercase; text-transform: lowercase;
font-weight: 700; font-weight: 400;
color: var(--sk-text-2); color: var(--sk-text-2);
line-height: 1.2;
}
.buttons {
display: flex;
gap: 1rem;
align-items: center;
}
.cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--sk-theme-1);
padding: 0.35em 0.8em;
font-size: var(--sk-text-s);
letter-spacing: 0.05em; letter-spacing: 0.05em;
left: max(var(--sk-page-padding-side), 10%); white-space: nowrap;
top: 25%; border-radius: var(--sk-border-radius);
box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.08);
color: #fff;
color: color-mix(in hwb, hsl(var(--sk-theme-1-hsl)) 10%, var(--sk-back-1) 95%);
transition: 0.5s var(--quint-out);
transition-property: transform, box-shadow, color;
} }
@media (min-width: 580px) { .cta:hover {
strong { text-decoration: none;
max-width: 12em; box-shadow: 0px 0.8px 3.8px rgba(0, 0, 0, 0.115), 0px 6px 30px rgba(0, 0, 0, 0.23);
top: 30%; transform: scale3d(1.01, 1.01, 1);
} }
.hero { .cta.basic {
height: 42vh; background-color: var(--sk-back-5);
}
.hero :global(picture img) { color: var(--sk-text-1);
width: 220%; }
transform: translateX(-26%);
} .logotype {
width: min(45vw, 40em);
} }
@media (min-width: 800px) { @media (min-width: 800px) {
.logotype { .hero-content {
--width: clamp(60rem, 50vw, 80rem);
position: absolute; position: absolute;
display: block; display: grid;
width: min(30vw, 36rem); grid-template-columns: 1fr 1fr;
bottom: 54%; grid-column-gap: 4rem;
left: 15%; grid-row-gap: 2rem;
width: var(--width);
left: calc(0.5 * (100% - min(100vw, 120rem)) + var(--sk-page-padding-side));
top: 6rem;
font-size: 0.9em;
} }
strong { .logotype {
max-width: 16em; width: 100%;
top: 49%; justify-self: end;
} }
.logotype,
strong { strong {
left: calc(var(--sk-page-padding-side) + 8rem); text-align: left;
font-size: calc(0.04 * var(--width));
} }
.hero { .hero {
height: 44vh; height: calc(14rem + 20vw);
} padding: 14rem 0 0 0;
.hero :global(picture img) {
width: 160%;
transform: translateX(-14%);
} }
} }
@media (min-width: 1200px) { @media (min-width: 1400px) {
strong, .hero-content {
.logotype { grid-template-columns: 1fr;
left: calc(50% - 56rem + var(--sk-page-padding-side)); width: calc(0.5 * var(--width));
top: 6vw;
} }
.hero { .hero {
height: 45vh; height: calc(10rem + 20vw);
} padding: 10rem 0 0 0;
.hero :global(picture img) {
width: 120%;
transform: translateX(-10%);
} }
} }

1
sites/svelte.dev/src/routes/_components/Image.svelte
Unescape View File

@ -26,7 +26,6 @@
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
max-height: var(--max-height, 100%);
object-fit: cover; object-fit: cover;
} }
</style> </style>

BIN
sites/svelte.dev/src/routes/_components/svelte-machine-desktop.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
sites/svelte.dev/src/routes/_components/svelte-machine-mobile.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 994 KiB

BIN
sites/svelte.dev/src/routes/_components/svelte-machine.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

Write Preview
Loading…
Cancel
Save