Skip to content

Commit 0f04e45

Browse files
benmccannbenmccann
authored
Merge pull request #1 from vedam/homepage-vedam
@vedam Homepage tweaking
2 parents 4d054d7 + 9f75e87 commit 0f04e45

13 files changed

+157
-37
lines changed

‎sites/kit.svelte.dev/src/routes/+layout.svelte

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,21 @@
6464
</a>
6565

6666
<style>
67+
/* @vedam -------------------------------------
68+
Because I didn't want to fiddle arround in @sveltejs/site-kit
69+
I tweaked the h3s font-size here.
70+
I don't know if changing this value is a foottrap elsewhere.
71+
72+
*/
73+
:global(.typo-default) {
74+
--h3: 3.6rem;
75+
}
76+
/* /@vedam ------------------------------------- */
77+
78+
79+
80+
81+
6782
main {
6883
position: relative;
6984
margin: 0 auto;

‎sites/kit.svelte.dev/src/routes/Fun.svelte

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<div class="container">
22

3+
34
<div class="text">
4-
<h3>Web development. <span style="font-weight:bold">But fun.</span></h3>
5+
<h3>Web development. <br/><span style="font-weight:bold">But fun.</span></h3>
56
Don't take our word for it, hear what our users say…<br/>
67
<br/>
7-
<p class="quote">I tried it and then I wanted to teach it immediately. I wanted to share it immediately. I wanted to build more things in it.</p>
8+
<p class="quote">"I tried it and then I wanted to teach it immediately. I wanted to share it immediately. I wanted to build more things in it."</p>
89
<p><span class="author">Scott Tolinski</span><br/>Creator of Level Up Tutorials</p>
910
</div>
1011

@@ -35,7 +36,10 @@
3536
3637
.quote {
3738
color: #40b3ff;
38-
font-size: 2rem;
39+
font-size: 4rem;
40+
line-height: 1.1;
41+
max-width: 12em;
42+
margin-bottom: 1rem;
3943
}
4044
4145
.author {

‎sites/kit.svelte.dev/src/routes/Grow.svelte

Lines changed: 84 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,123 @@
11
<script>
22
import createGlobe from 'cobe';
33
import { onMount } from 'svelte';
4-
import Grow from './grow.png';
4+
5+
// @vedam, aren't svgs smaller in size and at better quality than .pngs?
6+
import Grow from './grow.svg';
57
68
let canvas;
79
let phi = 0;
810
911
onMount(() => {
12+
// @vedam, tweaked the values here
1013
const globe = createGlobe(canvas, {
1114
devicePixelRatio: 2,
1215
width: 1000 * 2,
1316
height: 1000 * 2,
1417
phi: 0,
1518
theta: 0,
16-
dark: 1,
17-
diffuse: 1.2,
19+
dark: 0.1,
20+
diffuse: 0.6,
1821
mapSamples: 16000,
19-
mapBrightness: 6,
20-
baseColor: [0.3, 0.3, 0.3],
21-
markerColor: [0.1, 0.8, 1],
22-
glowColor: [1, 1, 1],
23-
offset: [0, 2000],
22+
mapBrightness: 4,
23+
baseColor: [0.9137, 0.9098, 0.9019], // the light warm grey from figma
24+
markerColor: [1, 0.2431, 0], // our --primary
25+
glowColor: [1, 1, 1], // white
26+
offset: [0, 2100],
2427
markers: [
2528
// https://vercel.com/docs/concepts/edge-network/regions
26-
{ location: [59.3293, 18.0686], size: 0.1 }, // Stockholm
27-
{ location: [19.0760, 72.8777], size: 0.1 }, // Mumbai
28-
{ location: [48.8566, 2.3522], size: 0.1 }, // Paris
29-
{ location: [41.4993, -81.6944], size: 0.1 }, // Cleveland
30-
{ location: [-33.9249, 18.4241], size: 0.1 }, // Cape Town
31-
{ location: [53.3498, -6.2603], size: 0.1 }, // Dublin
32-
{ location: [50.1109, 8.6821], size: 0.1 }, // Frankfurt
33-
{ location: [-23.5558, -46.6396], size: 0.1 }, // São Paulo
34-
{ location: [22.3193, 114.1694], size: 0.1 }, // Hong Kong
35-
{ location: [35.6762, 139.6503], size: 0.1 }, // Tokyo
36-
{ location: [38.9072, -77.0369], size: 0.1 }, // DC
37-
{ location: [37.5665, 126.9780], size: 0.1 }, // Seoul
38-
{ location: [34.6937, 135.5023], size: 0.1 }, // Osaka
39-
{ location: [51.5072, -0.1276], size: 0.1 }, // London
40-
{ location: [45.5152, -122.6784], size: 0.1 }, // Portland
41-
{ location: [37.7595, -122.4367], size: 0.1 }, // SF
42-
{ location: [1.3521, 103.8198], size: 0.1 }, // Singapore
43-
{ location: [-33.8688, 151.2093], size: 0.1 } // Sydney
29+
{ location: [59.3293, 18.0686], size: 0.05 }, // Stockholm
30+
{ location: [19.076, 72.8777], size: 0.05 }, // Mumbai
31+
{ location: [48.8566, 2.3522], size: 0.05 }, // Paris
32+
{ location: [41.4993, -81.6944], size: 0.05 }, // Cleveland
33+
{ location: [-33.9249, 18.4241], size: 0.05 }, // Cape Town
34+
{ location: [53.3498, -6.2603], size: 0.05 }, // Dublin
35+
{ location: [50.1109, 8.6821], size: 0.05 }, // Frankfurt
36+
{ location: [-23.5558, -46.6396], size: 0.05 }, // São Paulo
37+
{ location: [22.3193, 114.1694], size: 0.05 }, // Hong Kong
38+
{ location: [35.6762, 139.6503], size: 0.05 }, // Tokyo
39+
{ location: [38.9072, -77.0369], size: 0.05 }, // DC
40+
{ location: [37.5665, 126.978], size: 0.05 }, // Seoul
41+
{ location: [34.6937, 135.5023], size: 0.05 }, // Osaka
42+
{ location: [51.5072, -0.1276], size: 0.05 }, // London
43+
{ location: [45.5152, -122.6784], size: 0.05 }, // Portland
44+
{ location: [37.7595, -122.4367], size: 0.05 }, // SF
45+
{ location: [1.3521, 103.8198], size: 0.05 }, // Singapore
46+
{ location: [-33.8688, 151.2093], size: 0.05 } // Sydney
4447
],
45-
onRender: state => {
48+
onRender: (state) => {
4649
state.phi = phi;
4750
phi += 0.008;
4851
}
4952
});
5053
});
5154
</script>
5255

53-
<h3>SvelteKit grows with you,<br/><span style="font-weight:bold">whatever</span> you're building</h3>
56+
<h3>
57+
SvelteKit grows with you,<br /><span style="font-weight:bold">whatever</span> you're building
58+
</h3>
5459

5560
<img src={Grow} alt="Build SSGs, MPAs, PWAs, or SPAs." />
5661

57-
<canvas bind:this={canvas} style="width: 1000px; height: 500px;" />
62+
<!-- @vedam see styles -->
63+
<div class="canvas-wrap">
64+
<canvas bind:this={canvas} class="globe" width="1800" height="400" />
65+
</div>
66+
67+
<div class="box">
68+
<p>From your local machine<br />to the edge of the world</p>
69+
</div>
5870

5971
<style>
6072
h3 {
6173
margin-bottom: 3rem;
6274
}
6375
6476
img {
77+
position: relative;
78+
/* @vedam - Dirty hack part 1
79+
Unfortunately I'm not able to handle the positioning/sizing correctly.
80+
At least not in a reasonable amount of time.
81+
So I tried this ugly, failing workaround. Sorry.
82+
Only looks correct at arround 1500px viewport-width.
83+
This should be done by someone who has a clue about what he's doing.
84+
85+
These 7em at bottom are to push "Starts fast" down.
86+
*/
87+
margin: 5em 0 7em 0;
6588
width: 100%;
6689
height: auto;
90+
z-index: 1;
91+
}
92+
93+
/* @vedam - Dirty hack part 2 */
94+
.canvas-wrap {
95+
position: absolute;
96+
top: 18.6em;
97+
left: -10.14vw;
98+
right: 0;
99+
bottom: 0;
100+
width: 100vw;
101+
height: 500px;
102+
overflow: hidden;
103+
z-index: -1;
104+
/* background-color: #ccc; */
105+
}
106+
107+
/* @vedam - Dirty hack part 3 */
108+
.globe {
109+
margin-left: -16.5vw;
110+
}
111+
112+
.box {
113+
position: absolute;
114+
max-width: 236px;
115+
right: -2em;
116+
bottom: 0;
117+
padding: 1.2em 1.6em 0.5em;
118+
background-color: var(--prime);
119+
color: white;
120+
border-radius: var(--border-r);
121+
z-index: 1;
67122
}
68123
</style>

‎sites/kit.svelte.dev/src/routes/LanguageTools.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div class="container">
66

77
<div class="text">
8-
<h3>TypeScript and IDE support</h3>
8+
<h3>TypeScript and<br/>IDE support</h3>
99
Type definitions for all APIs for first-class TypeScript support. And an official <a href="https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode">VS Code extension</a> and <a href="https://sveltesociety.dev/tools#editor-support">community support for numerous other editors</a> like Emacs, Vim, and Sublime Text.
1010
</div>
1111

‎sites/kit.svelte.dev/src/routes/Lighthouse.svelte

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,15 @@
33
</script>
44

55
<div class="container">
6-
76
<div class="text">
8-
<h3>Starts fast, <span style="font-weight:bold">Stays fast</span></h3>
9-
Server-side rendering ensures your visitors aren't left staring at loading spinners.<br/>
7+
<h3>Starts fast, <br /><span style="font-weight:bold">Stays fast</span></h3>
8+
Server-side rendering ensures your visitors aren't left staring at loading spinners.<br />
109
Client-side navigation makes your app feel like it's 2022.
1110
</div>
1211

1312
<div class="image">
1413
<img src={Lighthouse} alt="Speedy page loads" />
1514
</div>
16-
1715
</div>
1816

1917
<style>

‎sites/kit.svelte.dev/src/routes/grow.svg

Lines changed: 1 addition & 0 deletions
Loading

‎sites/kit.svelte.dev/static/images/logo-appengine.svg

Lines changed: 11 additions & 0 deletions
Loading

‎sites/kit.svelte.dev/static/images/logo-cloudflare.svg

Lines changed: 10 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)