Skip to content

Commit b698617

Browse files
sadespressosadespresso
committed
visual tweaks
1 parent 98664a0 commit b698617

File tree

7 files changed

+107
-34
lines changed

7 files changed

+107
-34
lines changed

‎src/app.css

+6
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@
1010
font-family: Poppins, Montserrat, 'Segoe UI', Helvetica, 'Noto Sans Mongolian', sans-serif;
1111
}
1212

13+
@layer components {
14+
.babalo {
15+
@apply h-40 w-40 bg-primary opacity-60 blur-3xl absolute
16+
}
17+
}
18+
1319
* {
1420
padding: 0;
1521
margin: 0;

‎src/lib/components/FeatureCard.svelte

+8-6
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,19 @@
33
44
interface $Props {
55
title: string;
6+
icon: Snippet;
67
children: Snippet;
78
}
89
9-
let { title, children }: $Props = $props();
10+
let { title, children, icon }: $Props = $props();
1011
</script>
1112

12-
<div class="gradient-border flex flex-col gap-4 rounded-lg px-4 py-3">
13-
<div>
14-
{title}
13+
<div class="gradient-border flex flex-col gap-2 rounded-lg px-4 py-3">
14+
<div class="flex flex-row items-center justify-start gap-2 text-lg font-semibold">
15+
{@render icon?.()}
16+
<span>{title}</span>
1517
</div>
16-
<div>
18+
<div class="text-sm">
1719
{@render children()}
1820
</div>
1921
</div>
@@ -39,6 +41,6 @@
3941
rgba(242, 192, 255, 1) 100%
4042
)
4143
border-box;
42-
border: 2px solid transparent;
44+
border: 1px solid transparent;
4345
}
4446
</style>

‎src/lib/components/Fna.svelte

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script lang="ts">
2+
interface $Props {
3+
href?: string;
4+
n: string;
5+
}
6+
7+
let { href: propHref, n }: $Props = $props();
8+
9+
const href = propHref ?? `#fna${n}`;
10+
</script>
11+
12+
<sup>
13+
<a {href}>[{n}]</a>
14+
</sup>

‎src/lib/components/Footer.svelte

+1-7
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import Frame from './Frame.svelte';
44
</script>
55

6-
<footer class="w-screen py-8 md:py-16">
6+
<footer class="shadow-footer w-screen bg-background py-8 md:py-16">
77
<Frame>
88
<div class="flex flex-col gap-8">
99
<ul
@@ -72,9 +72,3 @@
7272
</div>
7373
</Frame>
7474
</footer>
75-
76-
<style>
77-
footer {
78-
box-shadow: 0 -1px 6px 0px rgba(255, 255, 255, 0.1);
79-
}
80-
</style>

‎src/routes/+layout.svelte

+7
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@
2121
<Footer />
2222

2323
<style>
24+
:global(html) {
25+
background-size: 64px 64px;
26+
background-repeat: repeat;
27+
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
28+
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
29+
}
30+
2431
main {
2532
margin-top: var(--navbar-height, 0px);
2633
}

‎src/routes/+page.svelte

+49-21
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,21 @@
22
import DiscordLogo from '$lib/components/DiscordLogo.svelte';
33
import FeatureCard from '$lib/components/FeatureCard.svelte';
44
import FlexDownloadButtons from '$lib/components/FlexDownloadButtons.svelte';
5+
import Fna from '$lib/components/Fna.svelte';
56
</script>
67

78
<svelte:head>
89
<title>Flow - FOSS expense tracker</title>
910
</svelte:head>
1011

12+
<!-- md+ -->
13+
<div class="babalo left-[25vw] top-[25vh] hidden animate-moveAroundA md:block"></div>
14+
<div class="babalo right-[20vw] top-[10vh] hidden animate-moveAroundB md:block"></div>
15+
<div class="babalo right-[15vw] top-[80vh] hidden animate-moveAroundC md:block"></div>
16+
<!-- mobile -->
17+
<div class="babalo left-[-1vw] top-[10vh] animate-moveAroundA md:hidden"></div>
18+
<div class="babalo right-[8vw] top-[80vh] animate-moveAroundC md:hidden"></div>
19+
1120
<section class="flex flex-col items-center gap-10">
1221
<div class="h-20"></div>
1322

@@ -31,44 +40,63 @@
3140

3241
<div class="grid max-w-5xl grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
3342
<FeatureCard title="Free and open-source">
43+
{#snippet icon()}
44+
🌐
45+
{/snippet}
3446
Flow is a GPL v3.0 licensed, free, and open-source project.
3547
</FeatureCard>
3648

37-
<FeatureCard title="Offline"
38-
>Flow can work fully offline <sup><a href="#sup1">[1]</a></sup></FeatureCard
39-
>
49+
<FeatureCard title="Privacy-focused">
50+
{#snippet icon()}
51+
🔐
52+
{/snippet}
53+
You are in control of your data
54+
<Fna n="1" />
55+
</FeatureCard>
4056

41-
<FeatureCard title="Privacy-focused"
42-
>You are in control of your data <sup>
43-
<a href="#sup2">[2]</a>&nbsp;<a href="#sup3">[3]</a>
44-
</sup>
57+
<FeatureCard title="Offline">
58+
{#snippet icon()}
59+
⚡️
60+
{/snippet}
61+
Flow can work fully offline <Fna n="2" />
4562
</FeatureCard>
4663

4764
<FeatureCard title="iCloud sync">
48-
With Flow 0.14.0, your data is periodically synced to iCloud, so you don't have to worry about
49-
losing your data.
65+
{#snippet icon()}
66+
☁️
67+
{/snippet}
68+
Your can periodically sync your data to iCloud
5069
</FeatureCard>
5170

5271
<FeatureCard title="Seamless UX">
72+
{#snippet icon()}
73+
💯
74+
{/snippet}
5375
Flow tries to be as user-friendly as possible, with a clean and simple UI.
5476
</FeatureCard>
77+
78+
<FeatureCard title="Multi-currency">
79+
{#snippet icon()}
80+
💱
81+
{/snippet}
82+
Flow supports multiple currencies, and can convert between them.
83+
<Fna n="2" />
84+
</FeatureCard>
5585
</div>
5686

5787
<div class="h-20"></div>
5888

59-
<div class="text-xs opacity-80">
60-
<p id="sup1" class="max-w-prose">
61-
<span class="font-mono">[1]</span> - Flow may need internet to fetch exchange rates if you use
62-
more than one currency.
63-
</p>
64-
<p id="sup2" class="max-w-prose">
65-
<span class="font-mono">[2]</span> - With your permission, Flow may automatically save your data
66-
to your iCloud, or any other storage provider Flow adds in the future.
89+
<div class="text-xs opacity-75">
90+
<p id="fna1">
91+
<span class="font-mono">[1]</span> - If you use older Android devices, or devices with Windows,
92+
or Linux-based operating systems, Flow may store your data, and backups in a easily accessible
93+
place. Make sure your device and system supports containerized storage, or other type of external
94+
access protection as you are responsible for your financial data.
6795
</p>
68-
<p id="sup3" class="max-w-prose">
69-
<span class="font-mono">[3]</span> - If you use older Android devices, or devices with Windows,
70-
or Linux-based operating systems, Flow may store your automatic and manual backups in a easily
71-
accessible place, and you are responsible for protecting your financial data.
96+
<br />
97+
<p id="fna2">
98+
<span class="font-mono">[2]</span> - Flow may need internet to fetch exchange rates if you use
99+
more than one currency.
72100
</p>
73101
</div>
74102
</section>

‎tailwind.config.ts

+22
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,28 @@ export default {
1313
rose: '#ff4040',
1414
text: '#f5f6fa',
1515
background: '#141414'
16+
},
17+
boxShadow: {
18+
footer: '0 -1px 6px 0px rgba(255, 255, 255, 0.1)'
19+
},
20+
keyframes: {
21+
moveAroundA: {
22+
'0%': { transform: 'translate(0%,0%)' },
23+
'100%': { transform: 'translate(-110%,60%)' }
24+
},
25+
moveAroundB: {
26+
'0%': { transform: 'translate(0%,0%)' },
27+
'100%': { transform: 'translate(-60%,40%)' }
28+
},
29+
moveAroundC: {
30+
'0%': { transform: 'translate(0%,0%)' },
31+
'100%': { transform: 'translate(90%,-120%)' }
32+
}
33+
},
34+
animation: {
35+
moveAroundA: 'moveAroundA 10s alternate infinite',
36+
moveAroundB: 'moveAroundB 10s alternate infinite',
37+
moveAroundC: 'moveAroundC 10s alternate infinite'
1638
}
1739
}
1840
},

0 commit comments

Comments
 (0)