Skip to content

Commit 4aef627

Browse files
xuelinkxuelink
authored
Merge pull request #93 from Honzoraptor31415/main
Made powered by / verified by companie's icons on home page change color to the brand color when hovered
2 parents b875c7e + 234dec5 commit 4aef627

File tree

4 files changed

+119
-21
lines changed

4 files changed

+119
-21
lines changed

‎src/lib/components/molecules/AnnouncementModal.svelte

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,14 @@
66
let show = false;
77
88
onMount(() => {
9-
setTimeout(() => {
10-
show = true;
11-
}, 3000); // Delay
9+
if (
10+
localStorage.getItem('show-accouncment-modal') === null ||
11+
localStorage.getItem('show-accouncment-modal') === 'true'
12+
) {
13+
setTimeout(() => {
14+
show = true;
15+
}, 3000); // Delay
16+
}
1217
});
1318
</script>
1419

@@ -22,7 +27,14 @@
2227
</p>
2328
<div class="btn-wrapper">
2429
<a href="http://token.langx.io" target="_blank" class="open">Visit</a>
25-
<button type="button" class="close" on:click={() => (show = false)}>Close</button>
30+
<button
31+
type="button"
32+
class="close"
33+
on:click={() => {
34+
show = false;
35+
localStorage.setItem('show-accouncment-modal', 'false');
36+
}}>Close</button
37+
>
2638
</div>
2739
</div>
2840
</div>

‎src/lib/components/organisms/BCSponsors.svelte

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<h2>Powered by Growing Companies Worldwide</h2>
44
<div class="sponsor-container">
55
<div>
6-
<a href="https://www.cloudflare.com" target="_blank" rel="noopener noreferrer">
6+
<a href="https://www.cloudflare.com" target="_blank" rel="noopener noreferrer" id="cloudflare-link">
77
<svg
88
fill="var(--color--text)"
99
width="58px"
@@ -26,7 +26,7 @@
2626
</a>
2727
</div>
2828
<div>
29-
<a href="https://www.digitalocean.com" target="_blank" rel="noopener noreferrer">
29+
<a href="https://www.digitalocean.com" target="_blank" rel="noopener noreferrer" id="digitalocean-link">
3030
<svg
3131
width="52px"
3232
height="52px"
@@ -50,7 +50,7 @@
5050
</a>
5151
</div>
5252
<div>
53-
<a href="https://www.backblaze.com" target="_blank" rel="noopener noreferrer">
53+
<a href="https://www.backblaze.com" target="_blank" rel="noopener noreferrer" id="backblaze-link">
5454
<svg
5555
width="50px"
5656
height="50px"
@@ -71,7 +71,7 @@
7171
</a>
7272
</div>
7373
<div>
74-
<a href="https://nodejs.org" target="_blank" rel="noopener noreferrer">
74+
<a href="https://nodejs.org" target="_blank" rel="noopener noreferrer" id="nodejs-link">
7575
<svg
7676
width="50px"
7777
height="50px"
@@ -93,7 +93,7 @@
9393
</a>
9494
</div>
9595
<div>
96-
<a href="https://appwrite.io" target="_blank" rel="noopener noreferrer">
96+
<a href="https://appwrite.io" target="_blank" rel="noopener noreferrer" id="appwrite-link">
9797
<svg
9898
xmlns="http://www.w3.org/2000/svg"
9999
width="45"
@@ -116,6 +116,7 @@
116116

117117
<style lang="scss">
118118
@import '$lib/scss/breakpoints.scss';
119+
@import '$lib/scss/variables.scss';
119120
120121
$yellow: var(--color--primary);
121122
@@ -183,9 +184,29 @@
183184
transition: fill 0.3s ease-in-out;
184185
}
185186
186-
&:hover svg,
187-
&:hover path {
188-
fill: var(--color--secondary);
187+
&#cloudflare-link:hover svg,
188+
&#cloudflare-link:hover path {
189+
fill: var(--cloudflare-color);
190+
}
191+
192+
&#digitalocean-link:hover svg,
193+
&#digitalocean-link:hover path {
194+
fill: var(--digitalocean-color);
195+
}
196+
197+
&#backblaze-link:hover svg,
198+
&#backblaze-link:hover path {
199+
fill: var(--backblaze-color);
200+
}
201+
202+
&#nodejs-link:hover svg,
203+
&#nodejs-link:hover path {
204+
fill: var(--nodejs-color);
205+
}
206+
207+
&#appwrite-link:hover svg,
208+
&#appwrite-link:hover path {
209+
fill: var(--appwrite-color);
189210
}
190211
}
191212
}

‎src/lib/components/organisms/CSponsors.svelte

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<h2>Verified by Leading Companies Worldwide</h2>
44
<div class="sponsor-container">
55
<div>
6-
<a href="https://apple.com" target="_blank" rel="noopener noreferrer">
6+
<a href="https://apple.com" target="_blank" rel="noopener noreferrer" id="apple-link">
77
<svg
88
width="48px"
99
height="48px"
@@ -36,7 +36,7 @@
3636
</a>
3737
</div>
3838
<div>
39-
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
39+
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" id="facebook-link">
4040
<svg
4141
width="68px"
4242
height="68px"
@@ -56,7 +56,7 @@
5656
</a>
5757
</div>
5858
<div>
59-
<a href="https://tiktok.com" target="_blank" rel="noopener noreferrer">
59+
<a href="https://tiktok.com" target="_blank" rel="noopener noreferrer" id="tiktok-link">
6060
<svg
6161
fill="var(--color--text)"
6262
width="50px"
@@ -75,7 +75,7 @@
7575
</a>
7676
</div>
7777
<div>
78-
<a href="https://google.com" target="_blank" rel="noopener noreferrer">
78+
<a href="https://google.com" target="_blank" rel="noopener noreferrer" id="google-link">
7979
<svg
8080
width="45px"
8181
height="45px"
@@ -155,7 +155,7 @@
155155
</a>
156156
</div>
157157
<div>
158-
<a href="https://x.com" target="_blank" rel="noopener noreferrer">
158+
<a href="https://x.com" target="_blank" rel="noopener noreferrer" id="twitter-link">
159159
<svg
160160
width="50px"
161161
height="50px"
@@ -188,7 +188,7 @@
188188
</a>
189189
</div>
190190
<div>
191-
<a href="https://huawei.com" target="_blank" rel="noopener noreferrer">
191+
<a href="https://huawei.com" target="_blank" rel="noopener noreferrer" id="huawei-link">
192192
<svg
193193
xmlns="http://www.w3.org/2000/svg"
194194
width="50"
@@ -207,6 +207,7 @@
207207

208208
<style lang="scss">
209209
@import '$lib/scss/breakpoints.scss';
210+
@import '$lib/scss/variables.scss';
210211
211212
$yellow: var(--color--primary);
212213
@@ -278,9 +279,56 @@
278279
transition: fill 0.3s ease-in-out;
279280
}
280281
281-
&:hover svg,
282-
&:hover path {
283-
fill: var(--color--secondary);
282+
&#apple-link:hover svg,
283+
&#apple-link:hover path {
284+
fill: var(--apple-color);
285+
}
286+
287+
&#facebook-link:hover svg,
288+
&#facebook-link:hover path {
289+
fill: var(--facebook-color);
290+
}
291+
292+
&#apple-link:hover svg,
293+
&#apple-link:hover path {
294+
fill: var(--apple-color);
295+
}
296+
297+
&#tiktok-link svg {
298+
transition: 0.3s;
299+
}
300+
301+
&#tiktok-link:hover svg {
302+
box-shadow:
303+
-2px -2px 5px 1px var(--tiktok-color-blue),
304+
2px 2px 5px 1px var(--tiktok-color-red);
305+
background: black;
306+
}
307+
308+
&#google-link:hover path#Fill-4 {
309+
fill: var(--google-color-blue);
310+
}
311+
312+
&#google-link:hover path#Fill-3 {
313+
fill: var(--google-color-green);
314+
}
315+
316+
&#google-link:hover path#Fill-2 {
317+
fill: var(--google-color-red);
318+
}
319+
320+
&#google-link:hover path#Fill-1 {
321+
fill: var(--google-color-yellow);
322+
}
323+
324+
&#twitter-link:hover svg,
325+
&#twitter-link:hover path {
326+
fill: var(--twitter-color);
327+
}
328+
329+
&#huawei-link:hover svg,
330+
&#huawei-link:hover path {
331+
fill: var(--huawei-color);
284332
}
285333
}
286334
}

‎src/lib/scss/_variables.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,21 @@
1010
--ease-out-1: cubic-bezier(0, 0, 0.75, 1);
1111
--ease-out-3: cubic-bezier(0, 0, 0.3, 1);
1212
--ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
13+
14+
// Verified by / Powered by companie's accent colors
15+
--apple-color: #fff;
16+
--facebook-color: #0866FF;
17+
--tiktok-color-red: #fe2c55;
18+
--tiktok-color-blue: #25f4ee;
19+
--google-color-yellow: #FBC02D;
20+
--google-color-red: #E53935;
21+
--google-color-green: #4CAF50;
22+
--google-color-blue: #1565C0;
23+
--twitter-color: #03A9F4;
24+
--huawei-color: #c7000b;
25+
--cloudflare-color: #f6821f;
26+
--digitalocean-color: #0069ff;
27+
--backblaze-color: #e21e29;
28+
--nodejs-color: #5fa04e;
29+
--appwrite-color: #FD366E;
1330
}

0 commit comments

Comments
 (0)