Skip to content

Commit 7816ce4

Browse files
wyMinLwinwyMinLwin
committed
feat: Showcase Page
1 parent bf31af6 commit 7816ce4

File tree

13 files changed

+199
-1
lines changed

13 files changed

+199
-1
lines changed

‎apps/svelte.dev/src/routes/+layout.server.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@ const nav_links: NavigationLink[] = [
5555
{
5656
title: 'Blog',
5757
slug: 'blog'
58+
},
59+
{
60+
title: 'Showcase',
61+
slug: 'showcase'
5862
}
5963
];
6064

‎apps/svelte.dev/src/routes/+layout.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@
3535
playground: 'Playground',
3636
blog: 'Blog',
3737
tutorial: 'Tutorial',
38-
search: 'Search'
38+
search: 'Search',
39+
showcase: 'Showcase'
3940
};
4041
</script>
4142

‎apps/svelte.dev/src/routes/showcase/+page.svelte‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<script>
2+
const showcaseItems = [
3+
{
4+
title: 'Apple Music',
5+
image: '/showcase/music.apple.png',
6+
link: 'https://music.apple.com/'
7+
},
8+
{
9+
title: 'Brave',
10+
image: '/showcase/brave.png',
11+
link: 'https://brave.com/'
12+
},
13+
{
14+
title: 'Bugatti',
15+
image: '/showcase/bugatti.png',
16+
link: 'https://www.bugatti.com/'
17+
},
18+
{
19+
title: 'IKEA',
20+
image: '/showcase/ikea.png',
21+
link: 'https://www.ikea.com/'
22+
},
23+
{
24+
title: 'Logitech',
25+
image: '/showcase/logitech.png',
26+
link: 'https://www.logitech.com/'
27+
},
28+
{
29+
title: 'The New York Times',
30+
image: '/showcase/nytimes.png',
31+
link: 'https://www.nytimes.com/'
32+
},
33+
{
34+
title: 'Square',
35+
image: '/showcase/squareup.png',
36+
link: 'https://squareup.com/'
37+
},
38+
{
39+
title: 'Yahoo Finance',
40+
image: '/showcase/finance.yahoo.png',
41+
link: 'https://finance.yahoo.com/'
42+
},
43+
{
44+
title: 'Yelp',
45+
image: '/showcase/top100.yelp.png',
46+
link: 'https://top100.yelp.com/'
47+
}
48+
];
49+
</script>
50+
51+
<svelte:head>
52+
<title>Showcase • Svelte</title>
53+
54+
<meta name="twitter:title" content="Showcase • Svelte" />
55+
<meta name="twitter:description" content="Explore projects built with Svelte and SvelteKit." />
56+
<meta name="Description" content="Explore projects built with Svelte and SvelteKit." />
57+
</svelte:head>
58+
<div class="page content">
59+
<header>
60+
<h1>Showcase</h1>
61+
<p>Explore projects built with Svelte and SvelteKit.</p>
62+
</header>
63+
64+
<div class="showcase-grid">
65+
{#each showcaseItems as item, index (index)}
66+
<a href={item.link} class="showcase-card" target="_blank" rel="noopener noreferrer">
67+
<div class="card-image">
68+
<img src={item.image} alt={item.title} loading="lazy" />
69+
</div>
70+
<div class="card-content">
71+
<h3 class="card-title">
72+
<span> {item.title}</span>
73+
<span data-icon="arrow-up-right"></span>
74+
</h3>
75+
</div>
76+
</a>
77+
{/each}
78+
</div>
79+
</div>
80+
81+
<style>
82+
.page {
83+
padding: var(--sk-page-padding-top) var(--sk-page-padding-side) var(--sk-page-padding-bottom);
84+
min-width: 0 !important;
85+
max-width: 140rem;
86+
margin: 0 auto;
87+
text-wrap: balance;
88+
}
89+
90+
header {
91+
margin: 0 0 4rem 0;
92+
}
93+
94+
[data-icon] {
95+
position: relative;
96+
display: inline-flex;
97+
width: 1.8rem;
98+
height: 1.8rem;
99+
background: currentColor;
100+
mask: no-repeat 50% 50%;
101+
mask-size: contain;
102+
transition: all 300ms ease;
103+
&[data-icon='arrow-up-right'] {
104+
mask-image: url(icons/arrow-up-right);
105+
}
106+
}
107+
108+
.showcase-grid {
109+
display: grid;
110+
grid-template-columns: repeat(3, 1fr);
111+
gap: 3rem;
112+
width: 100%;
113+
114+
@media screen and (max-width: 1200px) {
115+
grid-template-columns: repeat(3, 1fr);
116+
gap: 2.5rem;
117+
}
118+
119+
@media (max-width: 768px) {
120+
grid-template-columns: repeat(2, 1fr);
121+
gap: 2.25rem;
122+
}
123+
124+
@media (max-width: 480px) {
125+
grid-template-columns: 1fr;
126+
gap: 1rem;
127+
}
128+
}
129+
130+
.showcase-card {
131+
display: flex;
132+
flex-direction: column;
133+
overflow: hidden;
134+
transition: all 0.3s ease;
135+
background-color: var(--sk-bg-1);
136+
color: inherit;
137+
height: 100%;
138+
text-decoration: none;
139+
border-radius: var(--sk-border-radius);
140+
min-height: 16rem;
141+
142+
:root:not(.light) & {
143+
@media (prefers-color-scheme: dark) {
144+
background-color: var(--sk-bg-3);
145+
}
146+
}
147+
148+
:root.light & {
149+
filter: drop-shadow(0rem 0.6rem 0.6rem rgb(0 0 0 / 0.125));
150+
background-color: #fbfbfb;
151+
}
152+
153+
&:hover .card-title {
154+
color: #0087e8;
155+
}
156+
157+
&:hover [data-icon] {
158+
transform: translate(0.1rem, -0.2rem);
159+
}
160+
}
161+
162+
.card-image {
163+
position: relative;
164+
width: 100%;
165+
padding-top: 62.5%;
166+
overflow: hidden;
167+
background: var(--sk-back-2);
168+
}
169+
170+
.card-image img {
171+
position: absolute;
172+
top: 0;
173+
left: 0;
174+
width: 100%;
175+
height: 100%;
176+
object-fit: cover;
177+
}
178+
179+
.card-content {
180+
padding: 1.25rem;
181+
flex: 1;
182+
display: flex;
183+
align-items: center;
184+
}
185+
186+
.card-title {
187+
font: var(--sk-font-ui-medium);
188+
display: flex;
189+
align-items: center;
190+
gap: 0.2rem;
191+
}
192+
</style>

‎apps/svelte.dev/static/showcase/brave.png‎

104 KB
Loading

‎apps/svelte.dev/static/showcase/bugatti.png‎

351 KB
Loading

‎apps/svelte.dev/static/showcase/finance.yahoo.png‎

340 KB
Loading

‎apps/svelte.dev/static/showcase/ikea.png‎

159 KB
Loading

‎apps/svelte.dev/static/showcase/logitech.png‎

231 KB
Loading

‎apps/svelte.dev/static/showcase/music.apple.png‎

233 KB
Loading

‎apps/svelte.dev/static/showcase/nytimes.png‎

349 KB
Loading

0 commit comments

Comments
 (0)