Skip to content

Commit a016b19

Browse files
zphrszphrs
committed
finalized plugs look
1 parent 312fe19 commit a016b19

File tree

6 files changed

+106
-40
lines changed

6 files changed

+106
-40
lines changed

‎src/lib/AudioPlayer.svelte

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
buffering = true;
3131
audio.play();
3232
} else {
33-
audio.pause();
3433
currentTime = 0;
34+
audio.pause();
3535
}
3636
}
3737
async function loadMedia() {
@@ -49,7 +49,7 @@
4949
function onResume() {
5050
buffering = false;
5151
}
52-
$: progress = audio && audio.duration ? (currentTime / audio.duration) * 100 : 0;
52+
$: progress = audio && audio.duration && playing ? (currentTime / audio.duration) * 100 : 0;
5353
$: progress && onResume();
5454
let audio: HTMLAudioElement;
5555
export let currentTime = 0;
@@ -103,7 +103,7 @@
103103
background: linear-gradient(to right, currentColor 50%, var(--sea-100) 50%);
104104
background-size: 200% 100%;
105105
background-repeat: no-repeat;
106-
background-position: calc(100% - (var(--progress))) 50%;
106+
background-position: 100% 50%;
107107
padding: 0;
108108
width: 100%;
109109
position: relative;
@@ -129,6 +129,7 @@
129129
}
130130
}
131131
.playing {
132+
background-position: calc(100% - (var(--progress))) 50%;
132133
animation: none;
133134
}
134135
.playing .icon {

‎src/lib/Plugs.svelte

Lines changed: 64 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<script lang="ts">
2+
type EventuallyReleasable = {
3+
disabled?: boolean;
4+
estPublishDate?: Date;
5+
};
26
type Plug = {
37
name: string;
48
href: string;
59
desc?: string;
6-
disabled: boolean;
7-
};
8-
const plugs = [
10+
} & (EventuallyReleasable | undefined);
11+
const plugs: Plug[] = [
912
{
1013
name: 'zephyrj.com',
1114
href: 'https://zephyrj.com',
@@ -18,45 +21,69 @@
1821
{
1922
name: 'Forest Cottage',
2023
href: 'https://marketplace.visualstudio.com/items?itemName=zephyrj.forest-cottage',
21-
desc: 'VS Code Theme'
24+
desc: 'A Foresty VS Code Color\nTheme'
2225
},
2326
{
24-
href: 'https://at.zephiris.me',
27+
href: 'https://@.zephiris.me',
2528
name: 'at.zephiris.me',
2629
desc: 'Contact Card',
27-
disabled: true
30+
disabled: true,
31+
estPublishDate: new Date(2023, 6, 25)
32+
},
33+
{
34+
name: 'animent.dev',
35+
href: 'https://animent.dev',
36+
desc: 'Web Design Course',
37+
disabled: true,
38+
estPublishDate: new Date(2023, 7, 2)
2839
},
2940
{
3041
name: 'zephiris.dev',
3142
href: 'https://zephiris.dev',
3243
desc: 'Technical Blog',
33-
disabled: true
44+
disabled: true,
45+
estPublishDate: new Date(2023, 7, 16)
3446
},
3547
{
3648
name: 'creative.zephiris.me',
3749
href: 'https://creative.zephiris.me',
38-
desc: 'Creative Endeavors',
39-
disabled: true
40-
},
41-
{
42-
name: 'animent.dev',
43-
href: 'https://animent.dev',
44-
desc: 'Web Design Tutorial',
45-
disabled: true
50+
desc: 'Creative Blog',
51+
disabled: true,
52+
estPublishDate: new Date(2023, 8, 6)
4653
},
4754
{
4855
name: 'plexigraph.com',
4956
href: 'https://plexigraph.com',
50-
desc: 'Future Project',
51-
disabled: true
57+
disabled: true,
58+
estPublishDate: new Date(2023, 9, 17)
5259
}
5360
];
61+
function treatAsUTC(date: Date) {
62+
var result = new Date(date);
63+
result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
64+
return Number(result);
65+
}
66+
67+
const MSPerDay = 24 * 60 * 60 * 1000;
68+
function daysBetween(startDate: Date, endDate: Date) {
69+
return (treatAsUTC(endDate) - treatAsUTC(startDate)) / MSPerDay;
70+
}
5471
</script>
5572

5673
<div class="grid">
5774
{#each plugs as plug}
58-
<a class="card" href={plug.disabled ? undefined : plug.href} class:disabled={plug.disabled}>
75+
<a
76+
class="card"
77+
style={`--days-left: "${
78+
plug.estPublishDate ? Math.round(daysBetween(new Date(Date.now()), plug.estPublishDate)) : 0
79+
} days"`}
80+
href={plug.disabled ? undefined : plug.href}
81+
class:disabled={plug.disabled}
82+
>
5983
<header>{plug.name}</header>
84+
{#if plug.estPublishDate}
85+
<aside class="gilbert small">{plug.estPublishDate.toLocaleDateString()}</aside>
86+
{/if}
6087
{#if plug.desc}
6188
<p>{plug.desc}</p>
6289
{/if}
@@ -77,6 +104,9 @@
77104
}
78105
.card > p {
79106
font-size: 1.1rem;
107+
line-height: 1.25;
108+
text-align: center;
109+
white-space: pre-wrap;
80110
}
81111
82112
a.card {
@@ -94,16 +124,30 @@
94124
font-size: 1.5em;
95125
}
96126
127+
.small {
128+
font-size: 0.8rem;
129+
}
130+
97131
a.card.disabled {
98132
/* filter: grayscale(1); */
99-
border-color: var(--gray-90);
100-
background-image: linear-gradient(135deg, var(--gray-10) 40%, var(--gray-90) 40%);
133+
border-color: var(--gold-700);
134+
background-image: linear-gradient(135deg, var(--gold-100) 40%, var(--gold-500) 40%);
101135
background-position: 0 0 !important;
102136
color: var(--gray-90) !important;
103137
cursor: default;
104138
position: relative;
105139
}
106140
141+
a.card.disabled::before {
142+
content: var(--days-left, 0);
143+
font-size: 1.1rem;
144+
position: absolute;
145+
top: var(--gap-0-25);
146+
left: var(--gap-0-5);
147+
color: var(--gold-700);
148+
font-family: 'Gilbert', sans-serif;
149+
}
150+
107151
a.card.disabled::after {
108152
content: 'coming soon!';
109153
bottom: 13%;
@@ -112,7 +156,6 @@
112156
font-size: 0.95rem;
113157
font-family: 'Gilbert', sans-serif;
114158
transform-origin: center;
115-
text-align: center;
116159
transform: rotate(-45deg);
117160
}
118161

‎src/routes/+page.svelte

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,31 @@
4646
<h2>Explore my other sites below:</h2>
4747

4848
<Plugs />
49+
50+
<style>
51+
article {
52+
position: relative;
53+
margin-bottom: var(--gap-2);
54+
}
55+
article::after {
56+
content: '';
57+
position: absolute;
58+
bottom: -1.125rem;
59+
left: 0;
60+
filter: blur(0.1rem);
61+
width: 100%;
62+
height: 0.25rem;
63+
background: linear-gradient(
64+
0.5deg,
65+
var(--pink-700),
66+
var(--blue-700),
67+
var(--indigo-700),
68+
var(--lavender-700),
69+
var(--white),
70+
var(--gold-700),
71+
var(--sea-700),
72+
var(--gold-500),
73+
var(--sea-500)
74+
);
75+
}
76+
</style>

‎src/routes/Nicknames.svelte

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
</ol>
2323

2424
<style>
25-
ul,
2625
ol {
2726
list-style: none;
2827
padding: 0;
@@ -38,12 +37,4 @@
3837
width: 300px;
3938
text-align: center;
4039
}
41-
42-
li > ul {
43-
margin: 0;
44-
padding-top: 0.5rem;
45-
padding-bottom: 0.25rem;
46-
text-align: left;
47-
padding-left: 1.5rem;
48-
}
4940
</style>

‎src/routes/styles/global.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,11 @@
1818
--forest: #6a9955;
1919
--moss: #335122;
2020
--pine: #172a18;
21-
--sun: #ecd47c;
22-
--gold: #ffbd7a;
21+
--gold-100: #413900;
22+
--gold-300: #846905;
23+
--gold-500: #ce9409;
24+
--gold-700: #ffd140;
25+
--gold-900: #fff4b8;
2326
--clay: #f59778;
2427
--grapefruit: #d16969;
2528
--sky: #9cdcfe;

‎static/favicon.svg

Lines changed: 5 additions & 5 deletions
Loading

0 commit comments

Comments
 (0)