everything ✶
i.want.to.be.foreveryou.ng
add icons and some fun things
+28
-28
+3
bun.lock
+3
bun.lock
···
7
7
"@fontsource/special-gothic": "^5.2.2",
8
8
"astro": "^5.7.13",
9
9
"minireset.css": "^0.0.7",
10
+
"phosphor-icons-astro": "^2.1.1-17042025",
10
11
},
11
12
},
12
13
},
···
524
525
"parse-latin": ["parse-latin@7.0.0", "", { "dependencies": { "@types/nlcst": "^2.0.0", "@types/unist": "^3.0.0", "nlcst-to-string": "^4.0.0", "unist-util-modify-children": "^4.0.0", "unist-util-visit-children": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ=="],
525
526
526
527
"parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
528
+
529
+
"phosphor-icons-astro": ["phosphor-icons-astro@2.1.1-17042025", "", {}, "sha512-/Gm8QQ5jZ7kvhtbpJu7lnzR9/HIG1W/r/3lClo3VF+3fMy9LFU14r0NF9YPE3DH1KOIBEpjweUp+6skJct6SrA=="],
527
530
528
531
"picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
529
532
+2
-1
package.json
+2
-1
package.json
+1
-9
public/favicon.svg
+1
-9
public/favicon.svg
···
1
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
2
-
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
3
-
<style>
4
-
path { fill: #000; }
5
-
@media (prefers-color-scheme: dark) {
6
-
path { fill: #FFF; }
7
-
}
8
-
</style>
9
-
</svg>
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#777777" viewBox="0 0 256 256"><path d="M218.29,182.17a12,12,0,0,1-16.47,4.12L140,149.19V216a12,12,0,0,1-24,0V149.19l-61.82,37.1a12,12,0,1,1-12.35-20.58L104.68,128,41.83,90.29A12,12,0,1,1,54.18,69.71L116,106.81V40a12,12,0,0,1,24,0v66.81l61.82-37.1a12,12,0,1,1,12.35,20.58L151.32,128l62.85,37.71A12,12,0,0,1,218.29,182.17Z"></path></svg>
+7
-2
src/components/list.astro
+7
-2
src/components/list.astro
···
1
1
---
2
+
import { PhArrowUDownRight } from "phosphor-icons-astro";
2
3
import externalItems from "@/resources/items.json";
3
4
const items = externalItems || Astro.props.items || [];
4
5
---
···
10
11
.sort((a, b) => b - a)
11
12
.map((year) => (
12
13
<div class="list-group">
13
-
<h3 class="list-group-title">{year}</h3>
14
+
<h6 class="list-group-title">{year}</h6>
14
15
<div class="list-group-items">
15
16
{items
16
17
.filter((item) => item.year === year)
17
18
.map((item, index) => (
18
19
<span class="list-group-item">
20
+
<PhArrowUDownRight size={16} />
19
21
<a
20
22
class="list-group-item-link"
21
23
href={item.url || "#"}
···
65
67
border-bottom: 1px solid #ccc;
66
68
}
67
69
70
+
.list-group-title {
71
+
font-size: 0.8rem;
72
+
}
73
+
68
74
.list-group-items {
69
75
display: flex;
70
76
flex-direction: column;
···
78
84
79
85
.list-group-item-type {
80
86
font-size: 0.8rem;
81
-
color: #444;
82
87
border-radius: 4px;
83
88
background-color: #f0f0f0;
84
89
padding: 2px 4px 3px 4px;
+15
-16
src/pages/index.astro
+15
-16
src/pages/index.astro
···
9
9
<html lang="en">
10
10
<Head />
11
11
<body>
12
-
<h1 class="title">everything (so far)</h1>
12
+
<h1 class="title">
13
+
everything so far<code>$ ls /Users/eti/Desktop/**</code>
14
+
</h1>
13
15
<List />
14
16
<div class="bottom">
15
17
<Socials />
16
-
<span class="footer">
17
-
<span class="footer-author">eti / sds</span>
18
-
<span class="footer-timestamp"
19
-
>generated on {new Date().toLocaleDateString("en-FR")} at
20
-
{new Date().toLocaleTimeString("en-FR")}
21
-
</span>
18
+
<!-- <span class="footer-author">eti / sds</span> -->
19
+
<span class="footer-timestamp"
20
+
>generated on {new Date().toLocaleDateString("en-FR")} at
21
+
{new Date().toLocaleTimeString("en-FR")}
22
22
</span>
23
23
</div>
24
24
</body>
···
49
49
}
50
50
51
51
&:hover {
52
-
font-style: italic;
52
+
text-decoration: dotted underline;
53
53
}
54
54
}
55
55
56
+
.title {
57
+
display: inline-flex;
58
+
justify-content: space-between;
59
+
align-items: center;
60
+
}
61
+
56
62
.bottom {
57
-
display: flex;
58
-
flex-direction: column;
59
-
align-items: end;
60
-
justify-content: end;
61
63
height: 100%;
62
64
max-height: -webkit-fill-available;
63
-
}
64
-
65
-
.footer {
66
65
display: flex;
67
66
flex-direction: row;
68
67
justify-content: space-between;
69
-
width: 100%;
68
+
align-items: end;
70
69
}
71
70
72
71
@media screen and (min-width: 700px) {