Skip to content

Commit dd800c1

Browse files
ducdat0507ducdat0507
committed
refurbish site
1 parent 281208c commit dd800c1

32 files changed

Lines changed: 153 additions & 48 deletions

‎src/components/cards/ProjectCard.svelte‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
66
let {
77
links,
8+
banner,
89
title,
910
prototype = false,
1011
description,
@@ -16,6 +17,7 @@
1617
href: string,
1718
} | null)[],
1819
title: string,
20+
banner?: string,
1921
prototype: boolean,
2022
description: Snippet,
2123
} = $props();
@@ -32,6 +34,9 @@
3234

3335
<li class="project-card" class:prototype={prototype} {...cardProps} aria-label={title}>
3436
<article>
37+
{#if banner}
38+
<img class="banner" src={banner} alt="" aria-hidden="true">
39+
{/if}
3540
<h4 class="title">
3641
<span role="link" tabindex={0} onclick={showPopup} onkeydown={(e) => e.key == "Enter" && showPopup(e)}>{title}</span>
3742
</h4>
@@ -64,15 +69,28 @@
6469
background: black;
6570
color: white;
6671
padding: 0.5em;
72+
position: relative;
6773
}
6874
.project-card.prototype > article {
6975
border-style: dashed;
7076
}
7177
.project-card :is(h4, :global(p)) {
7278
margin: 0;
7379
}
80+
.project-card .banner {
81+
position: absolute;
82+
inset: 0;
83+
width: 100%;
84+
height: 100%;
85+
object-fit: cover;
86+
mask-image: linear-gradient(110deg, #fff1, #fff2, #fff4, #fff7, #fff9, #fffb, #fffc);
87+
}
88+
.project-card .title {
89+
z-index: 1;
90+
}
7491
.project-card .title > span {
7592
cursor: help;
93+
text-shadow: 0.5px 0.5px 2px #000, 1px 1px 3px #000, 1.5px 1.5px 5px #000, 2px 2px 8px #000;
7694
}
7795
.project-card .links {
7896
display: flex;
@@ -92,12 +110,13 @@
92110
flex: 1;
93111
}
94112
.project-card .link-tile > a {
113+
--inset-border: 0px;
95114
display: block;
96115
width: 100%;
97116
height: 100%;
98-
border: 2px solid white;
99-
background: black;
100-
color: white;
117+
border: none;
118+
background: #abf;
119+
color: black;
101120
padding: 0.5em;
102121
}
103122
</style>

‎src/components/cards/ProjectLister.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<h3>{categoryName}</h3>
1919
<ul class="project-list">
2020
{#each category as project}
21-
<ProjectCard prototype={project.prototype} links={project.links} title={project.name}>
21+
<ProjectCard prototype={project.prototype} links={project.links} title={project.name} banner={project.banner}>
2222
{#snippet description()}
2323
{@html project.description}
2424
{/snippet}

‎src/components/cards/WebsiteButton.svelte‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
.website-button a {
3838
display: flex;
3939
font-size: .75em;
40-
color: white;
40+
color: black;
4141
text-decoration: none;
4242
margin: 0;
4343
padding-top: 2px;
@@ -49,16 +49,15 @@
4949
flex: 1;
5050
}
5151
.website-image {
52-
flex: 0 0 90px;
53-
border: 2px solid white;
54-
border-right: 0;
52+
flex: 0 0 88px;
5553
background: black;
5654
display: flex;
5755
align-items: center;
5856
justify-content: center;
59-
min-height: 35px;
57+
min-height: 31px;
6058
}
6159
.website-image img {
60+
display: block;
6261
max-width: 88px;
6362
max-height: 31px;
6463
image-rendering: pixelated;
@@ -69,8 +68,7 @@
6968
}
7069
.website-name {
7170
position: relative;
72-
border: 2px solid white;
73-
background: black;
71+
background: #abf;
7472
display: flex;
7573
align-items: center;
7674
padding-inline: calc(15px - 0.5em);
@@ -82,12 +80,11 @@
8280
position: absolute;
8381
left: 0;
8482
top: 50%;
85-
transform: translate(calc(-50% - 1px), -50%) rotate(45deg);
83+
transform: translate(-50%, -50%) rotate(45deg);
8684
width: 0;
8785
height: 0;
88-
background: linear-gradient(45deg, black 60%, #0000 60%);
89-
border-left: 2px solid white;
90-
border-bottom: 2px solid white;
86+
background: linear-gradient(45deg, #abf 60%, #0000 60%);
87+
background-clip: border-box;
9188
transition: all .1s;
9289
}
9390
.website-button a:hover .website-name::before {
@@ -96,21 +93,21 @@
9693
}
9794
.outlink-icon {
9895
position: absolute;
99-
right: 0;
96+
right: -2px;
10097
top: 0;
101-
bottom: 0;
98+
bottom: -2px;
10299
overflow: hidden;
103100
pointer-events: none;
104101
}
105102
.outlink-icon :global(svg) {
106103
height: 200%;
107104
width: auto;
108-
opacity: 0.3;
105+
opacity: 0.15;
109106
}
110107
.outlink-icon :global(svg path) {
111108
stroke-width: 1.5 !important;
112109
}
113110
.website-button a:hover .outlink-icon :global(svg) {
114-
opacity: 0.4;
111+
opacity: 0.3;
115112
}
116113
</style>

‎src/components/stat/StatusCafeStat.svelte‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,24 @@
2828
<div class="status-cafe-face">{lastStatus?.face}</div>
2929
<div class="status-cafe">
3030
<time style="opacity: .5">{lastStatus?.timeAgo}</time><br/>
31-
{@html DOMPurify.sanitize(lastStatus.content)}
31+
<div class="status-cafe-content">
32+
{@html DOMPurify.sanitize(lastStatus.content)}
33+
</div>
3234
</div>
3335
{/if}
3436

3537
<style>
3638
.status-cafe-face {
3739
filter: grayscale(1);
3840
}
41+
.status-cafe {
42+
display: flex;
43+
flex-direction: column;
44+
}
45+
.status-cafe-content {
46+
font-style: italic;
47+
flex-grow: 1;
48+
overflow: hidden;
49+
mask-image: linear-gradient(#fff 60%, #0000);
50+
}
3951
</style>

‎src/components/utils/PopupDisplayer.svelte‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -177,12 +177,13 @@
177177
aspect-ratio: 2;
178178
}
179179
.popup-actions > .action > :is(a, button) {
180+
--inset-border: 0px;
180181
display: block;
181182
width: 100%;
182183
height: 100%;
183-
border: 2px solid white;
184-
background: black;
185-
color: white;
184+
background: #abf;
185+
color: black;
186+
border: none;
186187
padding: 0.5em;
187188
font: inherit;
188189
}

‎src/components/webrings/WebringNav.svelte‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,12 +118,13 @@
118118
flex: 1;
119119
}
120120
.webring-nav .link-tile > a {
121+
--inset-border: 0px;
121122
display: block;
122123
width: 100%;
123124
height: 100%;
124-
border: 2px solid white;
125-
background: black;
126-
color: white;
125+
border: none;
126+
background: #abf;
127+
color: black;
127128
padding: 0.5em;
128129
}
129130
</style>

‎src/data/projects.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export type ProjectDefinition = {
22
name: string,
3+
banner?: string,
34
description: string,
45
prototype?: boolean,
56
links: ({
@@ -20,6 +21,7 @@ export const games: ProjectCollection = {
2021
"flagships (a.k.a. originals)": [
2122
{
2223
name: "One Trillion Free Draws",
24+
banner: "/index/res/banners/games/1tfd.png",
2325
description: `
2426
<p>
2527
The definitive idle game where you have 1,000,000,000,000 free card packs to draw. That's 1 followed by 12 zeros!
@@ -36,6 +38,7 @@ export const games: ProjectCollection = {
3638
},
3739
{
3840
name: "Infinite Button Simulator",
41+
banner: "/index/res/banners/games/infinite-bsim.png",
3942
description: `
4043
<p>
4144
It's one of those button games on Roblox, but the buttons repeat to infinity and the game's on a website rather than Roblox.
@@ -52,6 +55,7 @@ export const games: ProjectCollection = {
5255
},
5356
{
5457
name: "Towers of Googology",
58+
banner: "/index/res/banners/games/towers.png",
5559
description: `
5660
<p>
5761
Defeat enemies and grow your towers, incremental game style!
@@ -73,6 +77,7 @@ export const games: ProjectCollection = {
7377
"prestige tree -kind": [
7478
{
7579
name: "The Communitree!",
80+
banner: "/index/res/banners/games/communitree.png",
7681
description: `
7782
<p>
7883
A prestige-tree like game about other prestige-tree like games and the community that makes prestige-tree like games.
@@ -90,6 +95,7 @@ export const games: ProjectCollection = {
9095
},
9196
{
9297
name: "The Prestreestuck",
98+
banner: "/index/res/banners/games/prestreestuck.png",
9399
description: `
94100
<p>
95101
A prestige-tree like game loosely based on the hit web-comic <a href="https://homestuck.com">Homestuck</a>.
@@ -112,6 +118,7 @@ export const games: ProjectCollection = {
112118
},
113119
{
114120
name: "The Dynas Tree",
121+
banner: "/index/res/banners/games/dynastree.png",
115122
description: `
116123
<p>
117124
An old prestige-tree like game about growing an empire or something.
@@ -127,6 +134,7 @@ export const games: ProjectCollection = {
127134
"incremental games on esoteric places": [
128135
{
129136
name: "Untitled Dice Game",
137+
banner: "/index/res/banners/games/udg.png",
130138
description: `
131139
<p>
132140
An incremental game on Scratch, a coding platform for children.
@@ -143,6 +151,7 @@ export const games: ProjectCollection = {
143151
},
144152
{
145153
name: "Unfeaturable Game",
154+
banner: "/index/res/banners/games/unfeaturable-game.png",
146155
description: `
147156
<p>
148157
An incremental game on Fancade, a UGC-based bite-sized gaming platform on phones. Beware of the ads!
@@ -158,6 +167,7 @@ export const games: ProjectCollection = {
158167
},
159168
{
160169
name: "Sparklifer",
170+
banner: "/index/res/banners/games/sparklifer.png",
161171
prototype: true,
162172
description: `
163173
<p>
@@ -175,6 +185,7 @@ export const games: ProjectCollection = {
175185
},
176186
{
177187
name: "MSPFA Incremental",
188+
banner: "/index/res/banners/games/mspfa-incremental.png",
178189
prototype: true,
179190
description: `
180191
<p>
@@ -193,6 +204,7 @@ export const games: ProjectCollection = {
193204
"other prototypes": [
194205
{
195206
name: "Project: Incremental",
207+
banner: "/index/res/banners/games/project-incremental.png",
196208
prototype: true,
197209
description: `
198210
<p>
@@ -206,6 +218,7 @@ export const games: ProjectCollection = {
206218
},
207219
{
208220
name: "A+1→A",
221+
banner: "/index/res/banners/games/a1a.png",
209222
prototype: true,
210223
description: `
211224
<p>
@@ -223,6 +236,7 @@ export const games: ProjectCollection = {
223236
"not mine but I was involved": [
224237
{
225238
name: "Advent Incremental",
239+
banner: "/index/res/banners/games/advent-incremental.png",
226240
description: `
227241
<p>
228242
A incremental game which also acts as an advent calendar—content are unlocked throughout the days of December
@@ -244,6 +258,7 @@ export const games: ProjectCollection = {
244258
},
245259
{
246260
name: `The Camellia Tree: duducat's Extremely Novel and (Almost) Completely Overhauled "I wanna be the Kamiller" Rewrite/Modification`,
261+
banner: "/index/res/banners/games/camellia-tree.png",
247262
description: `
248263
<p>
249264
A TPT-like game loosely based on the hit EDM composer
@@ -260,6 +275,7 @@ export const games: ProjectCollection = {
260275
},
261276
{
262277
name: `The Longest Incremental^2`,
278+
banner: "/index/res/banners/games/tli-2.png",
263279
prototype: true,
264280
description: `
265281
<p>
@@ -280,6 +296,7 @@ export const games: ProjectCollection = {
280296
"rhythm games": [
281297
{
282298
name: "JANOARG",
299+
banner: "/index/res/banners/games/janoarg.png",
283300
prototype: true,
284301
description: `
285302
<p>
@@ -296,6 +313,7 @@ export const games: ProjectCollection = {
296313
"puzzle games": [
297314
{
298315
name: "Yet Another Match-3 Clone",
316+
banner: "/index/res/banners/games/match-3.png",
299317
description: `
300318
<p>
301319
It's like Bejeweled but free, and on the internet, just like Bejeweled!
@@ -309,6 +327,7 @@ export const games: ProjectCollection = {
309327
},
310328
{
311329
name: "Painteract",
330+
banner: "/index/res/banners/games/painteract.png",
312331
prototype: true,
313332
description: `
314333
<p>
@@ -327,6 +346,7 @@ export const games: ProjectCollection = {
327346
"roblox grinding simulators (ewww)": [
328347
{
329348
name: "Browser Mining",
349+
banner: "/index/res/banners/games/browser-mining.png",
330350
prototype: true,
331351
description: `
332352
<p>

0 commit comments

Comments
 (0)