Skip to content

Commit 8e93e2a

Browse files
ptoffyptoffy
authored
Add showcase page (#136)
* Add showcase page * Store CSS here * Add some custom dark mode images
1 parent 0cf1d16 commit 8e93e2a

5 files changed

Lines changed: 627 additions & 7 deletions

File tree

‎Package.resolved‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Package.swift‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
// swift-tools-version:5.10
2-
32
import PackageDescription
43

54
let package = Package(
@@ -9,7 +8,7 @@ let package = Package(
98
.executable(
109
name: "Website",
1110
targets: ["Website"]
12-
),
11+
)
1312
],
1413
dependencies: [
1514
.package(url: "https://github.com/johnsundell/publish.git", branch: "master"),
@@ -22,6 +21,6 @@ let package = Package(
2221
.product(name: "Publish", package: "Publish"),
2322
.product(name: "VaporDesign", package: "design"),
2423
]
25-
),
24+
)
2625
]
2726
)

‎Resources/static/css/showcase.css‎

Lines changed: 291 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,291 @@
1+
/* Showcase page styles. Edit here — this is the source of truth.
2+
(The search icon is inlined as a base64 mask.) */
3+
4+
@media (min-width: 992px) {
5+
#vapor-navbar {
6+
position: fixed;
7+
top: 0;
8+
left: 0;
9+
right: 0;
10+
}
11+
#showcase-page-body {
12+
padding-top: 80px;
13+
}
14+
}
15+
/* The shared faded background sits at 320px (tuned for the home page's tall
16+
logo hero); raise it so the fade sits behind the showcase title. */
17+
#showcase-page-body {
18+
background-position-y: 40px;
19+
}
20+
.showcase-page {
21+
padding-bottom: 96px;
22+
}
23+
.showcase-page .showcase-page-header {
24+
text-align: center;
25+
padding-top: 48px;
26+
margin-bottom: 48px;
27+
}
28+
.showcase-page .showcase-page-header .main-page-caption {
29+
max-width: 640px;
30+
justify-content: center;
31+
}
32+
.showcase-page .showcase-controls {
33+
display: flex;
34+
flex-direction: row;
35+
align-items: center;
36+
justify-content: space-between;
37+
gap: 16px;
38+
margin-bottom: 40px;
39+
}
40+
@media (max-width: 767.98px) {
41+
.showcase-page .showcase-controls {
42+
flex-direction: column;
43+
align-items: stretch;
44+
}
45+
}
46+
.showcase-page .showcase-search {
47+
position: relative;
48+
flex: 1 1 auto;
49+
max-width: 360px;
50+
}
51+
@media (max-width: 767.98px) {
52+
.showcase-page .showcase-search {
53+
max-width: none;
54+
}
55+
}
56+
.showcase-page .showcase-search-icon {
57+
position: absolute;
58+
left: 16px;
59+
top: 50%;
60+
transform: translateY(-50%);
61+
width: 18px;
62+
height: 18px;
63+
background-color: #666880;
64+
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggb3BhY2l0eT0iLjQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQuMjkyOSAxNC4yOTI5Yy4zOTA1LS4zOTA1IDEuMDIzNy0uMzkwNSAxLjQxNDIgMGw1Ljk5OTkgNmMuMzkwNS4zOTA1LjM5MDUgMS4wMjM3IDAgMS40MTQyLS4zOTA1LjM5MDUtMS4wMjM3LjM5MDUtMS40MTQyIDBsLTUuOTk5OS02Yy0uMzkwNS0uMzkwNS0uMzkwNS0xLjAyMzcgMC0xLjQxNDJ6IiBmaWxsPSIjMDAwIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMCA0Yy0zLjMxMzcxIDAtNiAyLjY4NjI5LTYgNiAwIDMuMzEzNyAyLjY4NjI5IDYgNiA2IDMuMzEzNyAwIDYtMi42ODYzIDYtNiAwLTMuMzEzNzEtMi42ODYzLTYtNi02em0tOCA2YzAtNC40MTgyOCAzLjU4MTcyLTggOC04IDQuNDE4MyAwIDggMy41ODE3MiA4IDggMCA0LjQxODMtMy41ODE3IDgtOCA4LTQuNDE4MjggMC04LTMuNTgxNy04LTh6IiBmaWxsPSIjMDAwIi8+PC9zdmc+");
65+
mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggb3BhY2l0eT0iLjQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQuMjkyOSAxNC4yOTI5Yy4zOTA1LS4zOTA1IDEuMDIzNy0uMzkwNSAxLjQxNDIgMGw1Ljk5OTkgNmMuMzkwNS4zOTA1LjM5MDUgMS4wMjM3IDAgMS40MTQyLS4zOTA1LjM5MDUtMS4wMjM3LjM5MDUtMS40MTQyIDBsLTUuOTk5OS02Yy0uMzkwNS0uMzkwNS0uMzkwNS0xLjAyMzcgMC0xLjQxNDJ6IiBmaWxsPSIjMDAwIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMCA0Yy0zLjMxMzcxIDAtNiAyLjY4NjI5LTYgNiAwIDMuMzEzNyAyLjY4NjI5IDYgNiA2IDMuMzEzNyAwIDYtMi42ODYzIDYtNiAwLTMuMzEzNzEtMi42ODYzLTYtNi02em0tOCA2YzAtNC40MTgyOCAzLjU4MTcyLTggOC04IDQuNDE4MyAwIDggMy41ODE3MiA4IDggMCA0LjQxODMtMy41ODE3IDgtOCA4LTQuNDE4MjggMC04LTMuNTgxNy04LTh6IiBmaWxsPSIjMDAwIi8+PC9zdmc+");
66+
-webkit-mask-repeat: no-repeat;
67+
mask-repeat: no-repeat;
68+
-webkit-mask-position: center;
69+
mask-position: center;
70+
-webkit-mask-size: contain;
71+
mask-size: contain;
72+
pointer-events: none;
73+
}
74+
.showcase-page .showcase-search-input,
75+
.showcase-page .showcase-sort-select {
76+
width: 100%;
77+
height: 48px;
78+
border: 1px solid #dfe0eb;
79+
border-radius: 12px;
80+
background: #fafafd;
81+
color: #141416;
82+
font-size: 15px;
83+
font-weight: 200;
84+
outline: none;
85+
box-shadow: 0 1px 2px rgba(20, 20, 22, 0.06);
86+
transition:
87+
border-color 0.15s ease,
88+
box-shadow 0.15s ease;
89+
}
90+
.showcase-page .showcase-search-input:focus,
91+
.showcase-page .showcase-sort-select:focus {
92+
border-color: #df3efb;
93+
box-shadow: 0 0 0 3px rgba(223, 62, 251, 0.15);
94+
}
95+
.showcase-page .showcase-search-input {
96+
padding: 0 16px 0 44px;
97+
}
98+
.showcase-page .showcase-search-input::placeholder {
99+
color: #9fa1bf;
100+
font-weight: 400;
101+
}
102+
.showcase-page .showcase-sort {
103+
position: relative;
104+
flex: 0 0 auto;
105+
}
106+
.showcase-page .showcase-sort-select {
107+
padding: 0 44px 0 16px;
108+
cursor: pointer;
109+
color: #8385a3;
110+
-webkit-appearance: none;
111+
-moz-appearance: none;
112+
appearance: none;
113+
}
114+
.showcase-page .showcase-sort-icon {
115+
position: absolute;
116+
right: 16px;
117+
top: 50%;
118+
transform: translateY(-50%);
119+
width: 16px;
120+
height: 16px;
121+
background-color: #8385a3;
122+
pointer-events: none;
123+
}
124+
.showcase-page .showcase-grid {
125+
display: grid;
126+
grid-template-columns: repeat(3, 1fr);
127+
gap: 32px;
128+
}
129+
@media (max-width: 991.98px) {
130+
.showcase-page .showcase-grid {
131+
grid-template-columns: repeat(2, 1fr);
132+
}
133+
}
134+
@media (max-width: 767.98px) {
135+
.showcase-page .showcase-grid {
136+
grid-template-columns: 1fr;
137+
}
138+
}
139+
.showcase-page .showcase-grid .showcase-grid-item {
140+
display: flex;
141+
}
142+
.showcase-page .showcase-grid .card {
143+
width: 100% !important;
144+
border: 1px solid #dfe0eb;
145+
border-radius: 24px;
146+
background: #fafafd;
147+
overflow: hidden;
148+
transition:
149+
transform 0.2s ease,
150+
box-shadow 0.2s ease,
151+
border-color 0.2s ease;
152+
}
153+
.showcase-page .showcase-grid .card:hover {
154+
transform: translateY(-4px);
155+
border-color: rgba(223, 62, 251, 0.4);
156+
box-shadow: 0 12px 32px rgba(20, 20, 22, 0.08);
157+
}
158+
.showcase-page .showcase-grid .card .card-img-top {
159+
border-top-left-radius: 24px;
160+
border-top-right-radius: 24px;
161+
aspect-ratio: 16/10;
162+
object-fit: cover;
163+
object-position: top;
164+
}
165+
.showcase-page .showcase-grid .card .card-body {
166+
padding: 24px;
167+
}
168+
.showcase-page .showcase-grid .card .card-title {
169+
font-weight: 600;
170+
margin-bottom: 8px;
171+
color: #141416;
172+
}
173+
.showcase-page .showcase-grid .card .card-text {
174+
color: #666880;
175+
font-size: 15px;
176+
line-height: 150%;
177+
margin-bottom: 24px;
178+
}
179+
.showcase-page .showcase-grid .card .btn {
180+
box-sizing: border-box;
181+
display: inline-flex;
182+
flex-direction: row;
183+
justify-content: center;
184+
align-items: center;
185+
align-self: flex-start;
186+
padding: 8px 8px 8px 16px;
187+
gap: 4px;
188+
background: #f0f0f7;
189+
border: 1px solid rgba(223, 62, 251, 0.1);
190+
border-radius: 12px;
191+
font-weight: 500;
192+
font-size: 14px;
193+
line-height: 150%;
194+
color: #df3efb;
195+
}
196+
.showcase-page .showcase-grid .card .btn:hover {
197+
background: #dfe0eb;
198+
}
199+
.showcase-page .showcase-grid .card .btn .vapor-icon {
200+
background-color: #df3efb;
201+
width: 14px;
202+
height: 15px;
203+
margin-left: 2px;
204+
}
205+
.showcase-page .showcase-empty {
206+
text-align: center;
207+
color: #666880;
208+
padding: 48px 0;
209+
font-size: 18px;
210+
}
211+
.showcase-page .showcase-pagination {
212+
margin-top: 48px;
213+
}
214+
.showcase-page .showcase-cta {
215+
display: flex;
216+
flex-direction: column;
217+
align-items: center;
218+
margin-top: 96px;
219+
padding: 64px 32px;
220+
border-radius: 24px;
221+
text-align: center;
222+
background: #fafafd;
223+
border: 1px solid #dfe0eb;
224+
}
225+
@media (max-width: 767.98px) {
226+
.showcase-page .showcase-cta {
227+
padding: 48px 24px;
228+
}
229+
}
230+
.showcase-page .showcase-cta .showcase-cta-title {
231+
font-weight: 500;
232+
letter-spacing: -0.02em;
233+
text-align: center;
234+
margin-bottom: 12px;
235+
}
236+
.showcase-page .showcase-cta .showcase-cta-caption {
237+
color: #666880;
238+
max-width: 520px;
239+
text-align: center;
240+
margin: 0 auto 24px;
241+
}
242+
243+
.dark .showcase-page .showcase-search-input,
244+
.dark .showcase-page .showcase-sort-select {
245+
background: rgba(255, 255, 255, 0.05);
246+
border-color: rgba(255, 255, 255, 0.1);
247+
color: #fafafd;
248+
}
249+
.dark .showcase-page .showcase-search-input::placeholder {
250+
color: #9fa1bf;
251+
font-weight: 400;
252+
}
253+
.dark .showcase-page .showcase-search-icon,
254+
.dark .showcase-page .showcase-sort-icon {
255+
background-color: #9fa1bf;
256+
}
257+
.dark .showcase-page .showcase-grid .card {
258+
background: rgba(55, 57, 83, 0.3);
259+
border-color: rgba(255, 255, 255, 0.08);
260+
}
261+
.dark .showcase-page .showcase-grid .card:hover {
262+
border-color: rgba(223, 62, 251, 0.5);
263+
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
264+
}
265+
.dark .showcase-page .showcase-grid .card .card-title {
266+
color: #f0f0f7;
267+
}
268+
.dark .showcase-page .showcase-grid .card .card-text {
269+
color: #9fa1bf;
270+
}
271+
.dark .showcase-page .showcase-grid .card .btn {
272+
background: rgba(255, 255, 255, 0.05);
273+
border: 1px solid rgba(223, 62, 251, 0.1);
274+
}
275+
.dark .showcase-page .showcase-grid .card .btn:hover {
276+
background: rgba(255, 255, 255, 0.1);
277+
border: 1px solid rgba(223, 62, 251, 0.2);
278+
}
279+
.dark .showcase-page .showcase-cta {
280+
background: rgba(55, 57, 83, 0.3);
281+
border-color: rgba(255, 255, 255, 0.08);
282+
}
283+
284+
/* These card images are light-background PNGs; swap to the dark variants in
285+
dark mode (the design ships them, but only swaps on the home page carousel). */
286+
.dark .showcase-page #swiftfiddle-card .card-img-top {
287+
content: url("https://design.vapor.codes/images/swiftfiddle-card-dark.png");
288+
}
289+
.dark .showcase-page #underway-nyc-card .card-img-top {
290+
content: url("https://design.vapor.codes/images/underway-nyc-card-dark.png");
291+
}

0 commit comments

Comments
 (0)