Skip to content

Commit 74b55b7

Browse files
SchneegansSchneegans
committed
Update landing page
1 parent 1ffe91a commit 74b55b7

11 files changed

Lines changed: 1008 additions & 794 deletions

File tree

‎astro.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@ export default defineConfig({
130130
components: {
131131
Head: './src/components/Head.astro',
132132
Footer: './src/components/Footer.astro',
133+
Hero: './src/components/Hero.astro',
133134
},
134135
}),
135136
],

‎package-lock.json‎

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

‎src/assets/video-bg.png‎

-91.6 KB
Loading

‎src/components/CherryBlossoms.astro‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
---
2+
// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
3+
// SPDX-License-Identifier: CC0-1.0
4+
5+
interface Petal {
6+
id: number;
7+
left: number;
8+
delay: number;
9+
duration: number;
10+
size: number;
11+
opacity: number;
12+
}
13+
14+
const petals: Petal[] = Array.from({ length: 20 }, (_, i) => ({
15+
id: i,
16+
left: Math.random() * 100,
17+
delay: Math.random() * 15,
18+
duration: 20 + Math.random() * 20,
19+
size: 8 + Math.random() * 12,
20+
opacity: 0.3 + Math.random() * 0.4,
21+
}));
22+
---
23+
24+
<div class="blossoms">
25+
{
26+
petals.map((petal) => (
27+
<div
28+
class="absolute petal-fall"
29+
style={`left: ${petal.left}%; animation-delay: ${petal.delay}s; animation-duration: ${petal.duration}s;`}>
30+
<svg
31+
width={petal.size}
32+
height={petal.size}
33+
viewBox="0 0 24 24"
34+
fill="none"
35+
class="petal-sway"
36+
style={`opacity: ${petal.opacity}; animation-delay: ${petal.delay * 0.5}s;`}>
37+
<path
38+
d="M12 2C12 2 8 6 8 10C8 14 12 18 12 18C12 18 16 14 16 10C16 6 12 2 12 2Z"
39+
fill="hsl(350 80% 72%)"
40+
/>
41+
<path
42+
d="M12 6C12 6 9 8 9 11C9 14 12 16 12 16C12 16 15 14 15 11C15 8 12 6 12 6Z"
43+
fill="hsl(350 70% 85%)"
44+
fill-opacity="0.6"
45+
/>
46+
</svg>
47+
</div>
48+
))
49+
}
50+
</div>
51+
52+
<style>
53+
.blossoms {
54+
position: absolute;
55+
margin: 0;
56+
top: 0;
57+
right: 0;
58+
width: 100vw;
59+
height: 200vh;
60+
pointer-events: none;
61+
overflow: hidden;
62+
z-index: -1;
63+
transform: translateY(calc(0.5 * var(--parallax-offset-top, 0px)));
64+
}
65+
66+
.absolute {
67+
position: absolute;
68+
}
69+
70+
.petal-fall {
71+
animation: petal-fall linear infinite;
72+
will-change: transform;
73+
}
74+
75+
.petal-sway {
76+
animation: petal-sway 3s ease-in-out infinite;
77+
}
78+
79+
@keyframes petal-fall {
80+
0% {
81+
transform: translateY(-10vh) translateX(0) rotate(0deg);
82+
opacity: 1;
83+
}
84+
100% {
85+
transform: translateY(110vh) translateX(100px) rotate(720deg);
86+
opacity: 0;
87+
}
88+
}
89+
90+
@keyframes petal-sway {
91+
0%,
92+
100% {
93+
transform: translateX(0);
94+
}
95+
50% {
96+
transform: translateX(30px);
97+
}
98+
}
99+
</style>

‎src/components/Footer.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ import SocialShare from './SocialShare.astro';
2323
<Pagination {...Astro.props} />
2424

2525
<div class="kudos">
26-
<AstroIcon name="simple-icons:creativecommons" /> Content Licensed under CC-BY-4.0 by <a
27-
href="mailto:code@simonschneegans.de">Simon Schneegans</a
28-
> and all other Kando Documentation Contributors.
26+
<AstroIcon name="simple-icons:creativecommons" /> Content created with ❤️ and 🌸 under CC-BY-4.0
27+
by <a href="mailto:code@simonschneegans.de">Simon Schneegans</a> and all other Kando Documentation
28+
Contributors.
2929
<br />
3030
Build with <a href="https://docs.astro.build/en/getting-started/"
3131
><Icon name="astro" />

‎src/components/Hero.astro‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
---
2+
// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
3+
// SPDX-License-Identifier: CC0-1.0
4+
5+
import Default from '@astrojs/starlight/components/Hero.astro';
6+
7+
import CherryBlossoms from './CherryBlossoms.astro';
8+
---
9+
10+
<!-- Render the default <Hero/> component. -->
11+
<Default {...Astro.props}><slot /></Default>
12+
13+
<CherryBlossoms />
14+
15+
<style is:global>
16+
/* Add background images to landing page. */
17+
[data-has-hero] body {
18+
background-image: url('../assets/bg-dark.webp'), url('../assets/bg-dark-bottom.webp');
19+
background-size: auto 100vh;
20+
background-position:
21+
left 0px top calc(0.5 * var(--parallax-offset-top, 0px)),
22+
left 0px bottom calc(0.5 * var(--parallax-offset-bottom, 0px));
23+
background-repeat: no-repeat;
24+
background-color: #000;
25+
position: relative;
26+
overflow-x: hidden;
27+
will-change: background-position;
28+
}
29+
30+
@media (min-aspect-ratio: 4/3) {
31+
[data-has-hero] body {
32+
background-size: 100vw auto;
33+
}
34+
}
35+
36+
:root[data-theme='light'][data-has-hero] body {
37+
background-image:
38+
url('../assets/bg-light.webp'), url('../assets/bg-light-bottom.webp');
39+
background-color: white;
40+
}
41+
42+
/* Make header transparent on the landing page. */
43+
[data-has-hero] header {
44+
border-bottom: 1px solid transparent;
45+
background-color: transparent;
46+
-webkit-backdrop-filter: blur(16px);
47+
backdrop-filter: blur(16px);
48+
}
49+
50+
[data-has-hero] .main-frame {
51+
padding-top: 0;
52+
}
53+
54+
.hero {
55+
min-height: calc(100vh - 150px);
56+
}
57+
58+
.hero h1 {
59+
font-family: Neucha, serif;
60+
}
61+
62+
.hero h1 {
63+
font-size: clamp(5rem, calc(3rem + 10vw), 10rem);
64+
font-weight: normal;
65+
line-height: 5rem;
66+
}
67+
68+
.hero h1::after {
69+
content: '';
70+
display: inline-block;
71+
width: 0.35em;
72+
height: 0.35em;
73+
vertical-align: super;
74+
background-image: url(../assets/kando-logo-postfix-dark.svg);
75+
background-size: contain;
76+
background-repeat: no-repeat;
77+
transform: translate(-0.025em, -0.2em);
78+
}
79+
80+
:root[data-theme='light'] .hero h1::after {
81+
background-image: url(../assets/kando-logo-postfix-light.svg);
82+
}
83+
84+
.tagline {
85+
}
86+
87+
@media (min-width: 50rem) {
88+
.hero {
89+
grid-template-columns: 7fr 5fr;
90+
}
91+
92+
.hero h1 {
93+
margin-top: 4rem;
94+
line-height: 6rem;
95+
}
96+
97+
.hero > img,
98+
.hero > .hero-html {
99+
width: 100%;
100+
}
101+
}
102+
</style>
103+
104+
<script>
105+
if (typeof window !== 'undefined') {
106+
const updateParallax = () => {
107+
const offsetTop = window.scrollY;
108+
const offsetBottom =
109+
document.body.scrollHeight - window.innerHeight - window.scrollY;
110+
111+
console.log('offsetTop:', offsetTop, 'offsetBottom:', offsetBottom);
112+
113+
document.documentElement.style.setProperty(
114+
'--parallax-offset-top',
115+
`${offsetTop}px`
116+
);
117+
document.documentElement.style.setProperty(
118+
'--parallax-offset-bottom',
119+
`${offsetBottom}px`
120+
);
121+
};
122+
window.addEventListener('scroll', updateParallax);
123+
updateParallax();
124+
}
125+
</script>

‎src/components/ShowCaseGrid.astro‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
3+
// SPDX-License-Identifier: CC0-1.0
4+
---
5+
6+
<div class="show-case-grid"><slot /></div>
7+
8+
<style>
9+
.show-case-grid {
10+
display: flex;
11+
flex-wrap: wrap;
12+
justify-content: center;
13+
gap: 1rem;
14+
}
15+
</style>

‎src/components/ShowCaseGridItem.astro‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
---
2+
// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
3+
// SPDX-License-Identifier: CC0-1.0
4+
5+
interface Props {
6+
type: 'feature' | 'button';
7+
href?: string;
8+
}
9+
10+
const { type, href } = Astro.props;
11+
---
12+
13+
<a class:list={['grid-item', type]} href={href}>
14+
<div class="icon">
15+
<slot name="icon" />
16+
</div>
17+
<div class="body">
18+
<div class="title">
19+
<slot name="title" />
20+
</div>
21+
<div class="description">
22+
<slot name="description" />
23+
</div>
24+
</div>
25+
</a>
26+
27+
<style>
28+
.grid-item {
29+
display: flex;
30+
flex-direction: column;
31+
padding: 2rem 2rem;
32+
margin-top: 0;
33+
position: relative;
34+
text-decoration: none !important;
35+
color: var(--sl-white);
36+
transition:
37+
color 0.3s ease,
38+
transform 0.3s ease;
39+
40+
mask-image: url('../assets/image-mask.jpg');
41+
mask-mode: luminance;
42+
mask-size: 100% 100%;
43+
44+
&:hover {
45+
transform: scale(1.03);
46+
}
47+
48+
&.feature {
49+
align-items: center;
50+
text-align: center;
51+
width: calc(200px + 10vw);
52+
53+
.icon {
54+
font-size: 2rem;
55+
56+
width: 3.5rem;
57+
height: 3.5rem;
58+
display: flex;
59+
align-items: center;
60+
justify-content: center;
61+
position: relative;
62+
color: #f0cece;
63+
64+
&::before {
65+
content: '';
66+
position: absolute;
67+
top: 0;
68+
left: 0;
69+
width: 100%;
70+
height: 100%;
71+
z-index: -1;
72+
background: linear-gradient(135deg, #a53d6b 0%, #652945 100%);
73+
border-radius: 50%;
74+
}
75+
}
76+
77+
.title {
78+
font-size: 1.5rem;
79+
font-weight: bold;
80+
}
81+
82+
.description {
83+
margin-top: 0.3rem;
84+
font-size: 1rem;
85+
}
86+
}
87+
88+
&.button {
89+
align-items: center;
90+
text-align: center;
91+
width: calc(100px + 10vw);
92+
93+
&::before {
94+
content: '';
95+
position: absolute;
96+
top: 0;
97+
left: 0;
98+
width: 100%;
99+
height: 100%;
100+
z-index: -1;
101+
102+
background-color: var(--sl-color-accent-low);
103+
border-radius: 3rem;
104+
105+
opacity: 0.4;
106+
}
107+
108+
&:hover {
109+
color: var(--sl-color-accent-high);
110+
}
111+
112+
.icon {
113+
font-size: 4rem;
114+
margin-bottom: 0.5rem;
115+
}
116+
117+
.title {
118+
font-weight: bold;
119+
}
120+
121+
.description {
122+
margin-top: 0;
123+
opacity: 0.6;
124+
font-size: 0.8rem;
125+
}
126+
}
127+
}
128+
</style>

0 commit comments

Comments
 (0)