Skip to content

Commit c307845

Browse files
LinuxJava7LinuxJava7
committed
upload website
1 parent 3f04777 commit c307845

24 files changed

+1346
-12
lines changed

‎src/components/Card.astro‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
---
2+
import { Image } from "astro:assets";
3+
4+
const { name, url, description, image, alt = "", background } = Astro.props;
5+
---
6+
7+
<style>
8+
.card {
9+
display: flex;
10+
flex-direction: column;
11+
text-decoration: none;
12+
transition: all 300ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
13+
margin: 0;
14+
padding: 0;
15+
border-radius: 1.5rem;
16+
background-color: oklab(0 0 0/5%);
17+
@media (prefers-color-scheme: dark) {
18+
background-color: oklab(1 0 0/5%);
19+
}
20+
box-sizing: border-box;
21+
overflow: hidden;
22+
flex: 1;
23+
24+
.card_text {
25+
display: flex;
26+
flex-direction: column;
27+
height: 100%;
28+
justify-content: center;
29+
}
30+
31+
img {
32+
height: 270px;
33+
object-fit: cover;
34+
object-position: bottom center;
35+
z-index: 0;
36+
overflow: hidden;
37+
width: 100%;
38+
}
39+
.card_text {
40+
padding: 1rem;
41+
}
42+
p:last-child {
43+
margin-bottom: 0;
44+
}
45+
46+
h3 {
47+
display: flex;
48+
align-items: center;
49+
gap: 0.5rem;
50+
img {
51+
border-radius: 0.3rem;
52+
}
53+
}
54+
55+
h4 {
56+
margin-bottom: 0.5rem;
57+
}
58+
59+
.button {
60+
margin: 1rem;
61+
background: oklch(from var(--accent-color) 0.6 0.2 h/66%);
62+
63+
@media (prefers-color-scheme: dark) {
64+
background: oklch(from var(--accent-color) 0.8 0.1 h/66%);
65+
}
66+
border: none;
67+
cursor: pointer;
68+
outline-offset: 4px;
69+
border-radius: 0.5rem;
70+
max-width: 100%;
71+
box-sizing: border-box;
72+
display: block;
73+
}
74+
75+
.button:hover .front {
76+
transform: translateY(-6px);
77+
}
78+
79+
.button:active .front {
80+
transform: translateY(-2px);
81+
}
82+
83+
.front {
84+
font-size: 1.25rem;
85+
background: oklch(from var(--accent-color) 0.6 0.2 h/100%);
86+
87+
@media (prefers-color-scheme: dark) {
88+
background: oklch(from var(--accent-color) 0.8 0.1 h/100%);
89+
}
90+
color: oklch(from var(--accent-color) 1 0 h/ 80%);
91+
@media (prefers-color-scheme: dark) {
92+
color: oklch(from var(--accent-color) 0.2 0.01 h);
93+
}
94+
transform: translateY(-4px);
95+
padding: 0.6rem 1.5rem;
96+
border-radius: 0.5rem;
97+
font-size: 80%;
98+
max-width: 100%;
99+
display: block;
100+
transition: transform 200ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
101+
text-align: center;
102+
}
103+
104+
.button svg {
105+
margin-right: 6px;
106+
vertical-align: middle;
107+
display: inline-block;
108+
width: 1rem;
109+
height: auto;
110+
fill: currentColor;
111+
}
112+
}
113+
</style>
114+
115+
<div class="card">
116+
<a href={url}>
117+
<Image src={image} alt={alt} />
118+
</a>
119+
<div class="card_text">
120+
<slot />
121+
</div>
122+
<a class="button" href={url}>
123+
<span class="front">
124+
Visit {name}
125+
</span>
126+
</a>
127+
</div>

‎src/components/Font.astro‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
3+
---
4+
5+
<style>
6+
:root {
7+
font-family: "Google Sans Flex", sans-serif;
8+
font-optical-sizing: auto;
9+
font-variation-settings:
10+
"ROND" 100,
11+
"wdth" 90;
12+
}
13+
</style>
14+
15+
<link rel="preconnect" href="https://fonts.googleapis.com" />
16+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
17+
<link
18+
href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,slnt,wdth,wght,GRAD,ROND@6..144,-10..0,25..151,1..1000,0..100,0..100&display=swap"
19+
rel="stylesheet"
20+
/>

‎src/components/Footer.astro‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
3+
---
4+
5+
<style>
6+
footer {
7+
margin: 0.9rem;
8+
padding: 1rem;
9+
10+
background-color: oklch(0 0 0/3%);
11+
@media (prefers-color-scheme: dark) {
12+
background-color: oklch(1 0 0/5%);
13+
}
14+
color: var(--card-fg-color);
15+
padding-top: 1.5rem;
16+
padding-bottom: 1.5rem;
17+
text-align: center;
18+
margin-top: auto;
19+
border-radius: 1.5rem;
20+
p {
21+
margin-bottom: 0;
22+
margin-top: 0.5rem;
23+
}
24+
@media only screen and (max-width: 750px) {
25+
padding-bottom: 4.2rem;
26+
}
27+
}
28+
29+
.social {
30+
list-style: none;
31+
display: flex;
32+
justify-content: center;
33+
padding: 0;
34+
margin: 0;
35+
margin-bottom: 0.5rem;
36+
font-weight: 600;
37+
}
38+
39+
.social li {
40+
margin: 0 0.5rem;
41+
}
42+
43+
.social a {
44+
color: inherit;
45+
text-decoration: none;
46+
}
47+
</style>
48+
49+
<footer>
50+
<ul class="social">
51+
<li class="github">
52+
<a
53+
href="https://github.com/linuxjava7"
54+
title="GitHub"
55+
target="_blank"
56+
rel="noopener noreferrer"
57+
>
58+
GitHub
59+
</a>
60+
</li>
61+
<li class="mastodon">
62+
<a
63+
rel="me"
64+
href="https://mastodon.social/@linuxjava7"
65+
title="Mastodon"
66+
target="_blank"
67+
>
68+
Mastodon
69+
</a>
70+
</li>
71+
</ul>
72+
73+
<p>
74+
This website's code is licensed under the AGPL v3. Content is licensed under
75+
CC BY-SA 4.0.
76+
</p>
77+
</footer>

0 commit comments

Comments
 (0)