Skip to content

Commit ee853f2

Browse files
KrLiteKrLite
committed
feat: main page overhaul
1 parent 28a6a05 commit ee853f2

28 files changed

Lines changed: 221 additions & 42 deletions

‎src/components/Footer.astro‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ import { commitHash, commitHashShort } from '@/lib/commit-hash'
55
import { t } from 'astro-i18n'
66
import { marked } from 'marked'
77
import { getCopyrightSpan } from '@/lib/copyright'
8+
9+
const props = Astro.props
810
---
911

10-
<div class="container">
12+
<div class="container" {...props}>
1113
<div class="background">
1214
<Logo />
1315
</div>

‎src/components/Overview.astro‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
import TicketCard from './TicketCard.astro'
3+
4+
const props = Astro.props
5+
---
6+
7+
<div {...props}>
8+
<slot name="title" />
9+
<TicketCard class="description-card" borderThickness="1px" cornerSize="3.25em">
10+
<slot name="description" />
11+
</TicketCard>
12+
<TicketCard class="portfolio-card" borderThickness="1px" cornerSize="3.25em">
13+
<slot name="portfolio" />
14+
</TicketCard>
15+
</div>
16+
17+
<style lang="scss">
18+
.description-card {
19+
margin: 4.25em 2.5em;
20+
rotate: -3.27deg;
21+
transform: translateX(-2.1%);
22+
}
23+
24+
.portfolio-card {
25+
margin: 4.25em 2.5em;
26+
rotate: 1.97deg;
27+
transform: translateX(3.2%);
28+
}
29+
30+
.links {
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
}
35+
</style>

‎src/components/TicketCard.astro‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
import type { HTMLAttributes } from 'astro/types'
3+
4+
interface Props extends HTMLAttributes<'div'> {
5+
borderThickness?: string
6+
cornerSize?: string
7+
}
8+
9+
const { borderThickness = '1px', cornerSize = '3.25em', ...props } = Astro.props
10+
---
11+
12+
<div
13+
class:list={['card', props.class]}
14+
style={`--border-thickness: ${borderThickness}; --corner-size: ${cornerSize}`}
15+
{...props}
16+
>
17+
<div class="content"><slot /></div>
18+
<div class="corner" data-corner="lt"></div>
19+
<div class="corner" data-corner="rt"></div>
20+
<div class="corner" data-corner="rb"></div>
21+
<div class="corner" data-corner="lb"></div>
22+
</div>
23+
24+
<style lang="scss">
25+
.card {
26+
position: relative;
27+
overflow: hidden;
28+
29+
& > .content {
30+
padding: 2em;
31+
border-left: var(--border-thickness) solid var(--color-border);
32+
border-right: var(--border-thickness) solid var(--color-border);
33+
border-top: var(--border-thickness) dashed var(--color-border);
34+
border-bottom: var(--border-thickness) dashed var(--color-border);
35+
box-sizing: border-box;
36+
}
37+
38+
& > .corner {
39+
position: absolute;
40+
width: var(--corner-size);
41+
height: var(--corner-size);
42+
background: radial-gradient(
43+
circle at center,
44+
var(--color-background) 0%,
45+
var(--color-background) calc(var(--corner-size) / 2 - var(--border-thickness)),
46+
var(--color-border) calc(var(--corner-size) / 2 - var(--border-thickness))
47+
);
48+
border-radius: 50%;
49+
50+
&[data-corner='lt'] {
51+
top: calc(var(--corner-size) / -2);
52+
left: calc(var(--corner-size) / -2);
53+
}
54+
55+
&[data-corner='rt'] {
56+
top: calc(var(--corner-size) / -2);
57+
right: calc(var(--corner-size) / -2);
58+
}
59+
60+
&[data-corner='rb'] {
61+
bottom: calc(var(--corner-size) / -2);
62+
right: calc(var(--corner-size) / -2);
63+
}
64+
65+
&[data-corner='lb'] {
66+
bottom: calc(var(--corner-size) / -2);
67+
left: calc(var(--corner-size) / -2);
68+
}
69+
}
70+
}
71+
</style>

‎src/components/attachments/index/Description.mdx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
**Kessoku Tea Time (結束ティータイム)[^name]** is a group of cute developers.
2+
3+
[^name]: The name Kessoku Tea Time (結束ティータイム) is a combination of Kessoku (結束), which derives from the band [Kessoku Band (結束バンド)](https://bocchi-the-rock.fandom.com/wiki/Kessoku_Band) from the bangumi [Bocchi the Rock!](https://bocchi.rocks/), and Tea Time (ティータイム), which derives from the band [Ho-kago Tea Time (放課後ティータイム)](https://k-on.fandom.com/wiki/Ho-kago_Tea_Time) from the bangumi [K-ON! (けいおん！)](https://www.tbs.co.jp/anime/k-on/).
4+
5+
### What We Do&ensp;<img style="display: inline-block;height: 1.5em;margin-top: auto;margin-bottom: -0.25em" alt="image" src="https://github.com/KessokuTeaTime/.github/assets/68179735/4787c537-e7f7-4046-9d39-189df6cb7ed2" />
6+
7+
- Make [Minecraft](https://minecraft.net) mods on multiple mod loaders
8+
9+
### What We Can't Do&ensp;<img style="display: inline-block;height: 1.5em;margin-top: auto;margin-bottom: -0.25em" alt="image" src="https://github.com/KessokuTeaTime/.github/assets/68179735/c3360830-7261-4b0f-a9a9-b466f1c6fb2c" />
10+
11+
- Sing
12+
- Become the most popular band in Shimokitazawa

src/components/attachments/index/Overview.mdx renamed to src/components/attachments/index/Title.mdx

File renamed without changes.

‎src/components/attachments/index/en/Description.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Parent from '../Description.mdx'
2+
3+
<Parent />

‎src/components/attachments/index/en/Overview.mdx‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/components/attachments/index/en/Title.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Parent from '../Title.mdx'
2+
3+
<Parent />

‎src/components/attachments/index/zh/Description.mdx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<b>结束 TEA TIME（結束ティータイム）[^name]</b>是一群可爱的开发者。
2+
3+
[^name]: 结束 TEA TIME（結束ティータイム）是由[结束乐队（結束バンド）](https://bocchi-the-rock.fandom.com/wiki/Kessoku_Band)的结束（来自番剧[孤独摇滚](https://bocchi.rocks/)）和[放学后 TEA TIME（放課後ティータイム）](https://k-on.fandom.com/wiki/Ho-kago_Tea_Time)的TEA TIME（ティータイム）（来自番剧[轻音少女 K-ON!](https://www.tbs.co.jp/anime/k-on/)）组合而成。
4+
5+
### 我们在做的&ensp;<img style="display: inline-block;height: 1.5em;margin-top: auto;margin-bottom: -0.25em" alt="image" src="https://github.com/KessokuTeaTime/.github/assets/68179735/4787c537-e7f7-4046-9d39-189df6cb7ed2" />
6+
7+
- 为[Minecraft](https://minecraft.net)制作跨加载器的模组
8+
9+
### 我们做不到&ensp;<img style="display: inline-block;height: 1.5em;margin-top: auto;margin-bottom: -0.25em" alt="image" src="https://github.com/KessokuTeaTime/.github/assets/68179735/c3360830-7261-4b0f-a9a9-b466f1c6fb2c" />
10+
11+
- 唱歌
12+
- 成为下北泽最受欢迎的乐队

src/components/attachments/index/zh/Overview.mdx renamed to src/components/attachments/index/zh/Title.mdx

File renamed without changes.

0 commit comments

Comments
 (0)