Skip to content

Commit 258b1af

Browse files
author
Jesse Winton
committed
tweaks
1 parent c3d144d commit 258b1af

File tree

5 files changed

+78
-58
lines changed

5 files changed

+78
-58
lines changed

‎src/lib/components/appwrite-network/map.svelte

Lines changed: 68 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
handleResetActiveTooltip
1010
} from './map-tooltip.svelte';
1111
import { createMap } from 'svg-dotted-map';
12-
import { Icon } from '../ui';
12+
import { browser } from '$app/environment';
1313
1414
let activeSegment = $state<string>('pop-locations');
1515
let activeMarkers = $derived(pins[activeSegment as PinSegment]);
@@ -86,62 +86,74 @@
8686
class="relative mx-auto my-10 h-fit w-full max-w-5xl origin-bottom transform-[perspective(25px)_rotateX(1deg)_scale3d(1.2,_1.2,_1)] transition-all [scrollbar-width:none] md:my-0 md:-translate-x-20"
8787
use:mousePosition
8888
>
89-
<svg viewBox={`0 0 ${height * 2} ${height}`}>
90-
<defs>
91-
<mask id="map">
92-
{#each points as point}
93-
<ellipse
94-
cx={point.x}
95-
cy={point.y}
96-
rx={radius}
97-
ry={radius * 1.25}
98-
fill="white"
99-
/>
100-
{/each}
101-
</mask>
102-
</defs>
103-
{#each points as point}
104-
<ellipse
105-
cx={point.x}
106-
cy={point.y}
107-
rx={radius}
108-
ry={radius * 1.25}
109-
fill={theme === 'dark' ? 'rgba(255,255,255,.1)' : '#dadadd'}
110-
/>
111-
{/each}
112-
{#each markers as marker}
113-
<g
114-
role="tooltip"
115-
class="animate-fade-in outline-none"
116-
onmouseover={() =>
117-
handleSetActiveTooltip(
118-
marker.city,
119-
marker.code,
120-
marker.available,
121-
marker.date
122-
)}
123-
onfocus={() =>
124-
handleSetActiveTooltip(
125-
marker.city,
126-
marker.code,
127-
marker.available,
128-
marker.date
129-
)}
130-
onblur={() => handleResetActiveTooltip()}
131-
onmouseout={() => handleResetActiveTooltip()}
132-
data-region={slugify(marker.city)}
133-
>
134-
<circle cx={marker.x} cy={marker.y} r={radius * 1.25} class="fill-accent" />
135-
<circle cx={marker.x} cy={marker.y} r={radius * 0.5} class="fill-white" />
136-
<circle
137-
cx={marker.x}
138-
cy={marker.y}
139-
r={radius * 4}
140-
class="fill-transparent"
89+
{#if browser}
90+
<svg viewBox={`0 0 ${height * 2} ${height}`}>
91+
<defs>
92+
<mask id="map">
93+
{#each points as point}
94+
<ellipse
95+
cx={point.x}
96+
cy={point.y}
97+
rx={radius}
98+
ry={radius * 1.25}
99+
fill="white"
100+
/>
101+
{/each}
102+
</mask>
103+
</defs>
104+
{#each points as point}
105+
<ellipse
106+
cx={point.x}
107+
cy={point.y}
108+
rx={radius}
109+
ry={radius * 1.25}
110+
fill={theme === 'dark' ? 'rgba(255,255,255,.1)' : '#dadadd'}
141111
/>
142-
</g>
143-
{/each}
144-
</svg>
112+
{/each}
113+
{#each markers as marker}
114+
<g
115+
role="tooltip"
116+
class="animate-fade-in outline-none"
117+
onmouseover={() =>
118+
handleSetActiveTooltip(
119+
marker.city,
120+
marker.code,
121+
marker.available,
122+
marker.date
123+
)}
124+
onfocus={() =>
125+
handleSetActiveTooltip(
126+
marker.city,
127+
marker.code,
128+
marker.available,
129+
marker.date
130+
)}
131+
onblur={() => handleResetActiveTooltip()}
132+
onmouseout={() => handleResetActiveTooltip()}
133+
data-region={slugify(marker.city)}
134+
>
135+
<circle
136+
cx={marker.x}
137+
cy={marker.y}
138+
r={radius * 1.25}
139+
class="fill-accent"
140+
/>
141+
<circle
142+
cx={marker.x}
143+
cy={marker.y}
144+
r={radius * 0.5}
145+
class="fill-white"
146+
/>
147+
<circle
148+
cx={marker.x}
149+
cy={marker.y}
150+
r={radius * 4}
151+
class="fill-transparent"
152+
/>
153+
</g>
154+
{/each}
155+
</svg>
156+
{/if}
145157
</div>
146158
</div>
147159
</div>

‎src/routes/(marketing)/(assets)/images/avatar.png

-3.59 KB
Binary file not shown.

‎src/routes/(marketing)/(assets)/images/site.png

6.44 KB
Loading

‎src/routes/(marketing)/(components)/case-studies.svelte

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,8 @@
7373
<img
7474
src={study.logo}
7575
alt={study.headline}
76+
width={100}
77+
height={100}
7678
class={classNames(
7779
'visible h-5 px-2 opacity-100 transition-all [grid-area:stack] lg:h-7',
7880
'group-[&[data-state=on]]/card:invisible group-[&[data-state=on]]/card:opacity-0',
@@ -86,7 +88,13 @@
8688
'group-[&[data-state=on]]/card:visible group-[&[data-state=on]]/card:opacity-100 group-[&[data-state=on]]/card:blur-none'
8789
)}
8890
>
89-
<img src={study.logo} alt={study.headline} class="w-20" />
91+
<img
92+
width={100}
93+
height={100}
94+
src={study.logo}
95+
alt={study.headline}
96+
class="w-20"
97+
/>
9098

9199
<span
92100
class="text-title font-aeonik-pro text-primary relative flex flex-wrap gap-2 text-left"

‎src/routes/(marketing)/+page.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
<CaseStudies />
3636
<Features />
3737
<div class="light bg-[#EDEDF0]">
38-
<!-- <Map theme="light" /> -->
38+
<Map theme="light" />
3939
<Scale
4040
testimonial={{
4141
name: 'Ryan O’Conner',

0 commit comments

Comments
 (0)