Skip to content

Commit 35d21b9

Browse files
gokulk16gokulk16
authored
Performance improvements, lazy load currency conversions, beautifying the blog page, new toast notifications (#54)
* lazy loading currency related activities, many other performance improvements * new toast notification after currency conversion setup is loaded * beautify the blog page * pr review fixes * minor fix for href opening in new tab * increase toast size for mobile devices * minor fixes from pr review
1 parent 4ec9905 commit 35d21b9

File tree

10 files changed

+576
-151
lines changed

10 files changed

+576
-151
lines changed

‎css/blog.css

Lines changed: 203 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,44 @@
33
font-size: 56px;
44
letter-spacing: -0.5px;
55
line-height: 1.2;
6+
margin: 37px;
67
}
78

8-
.hero-button {
9-
background-color: #0056b3;
10-
color: var(--input-number);
11-
padding: 10px 20px;
12-
border-radius: 5px;
13-
font-weight: bold;
14-
font-size: 18px;
9+
.hero-title-app-name {
10+
color: var(--accent-result);
11+
font-weight: 800;
1512
text-decoration: none;
16-
transition: background-color 0.3s ease;
17-
cursor: pointer;
18-
width: 285px;
1913
}
2014

21-
.hero-button:hover {
22-
background-color: #004a9b;
15+
.hero-button {
16+
background: #1E2A38;
17+
color: #cf9c9c;
18+
padding: 16px 40px;
19+
border-radius: 12px;
20+
font-weight: 800;
21+
font-size: 1.18rem;
22+
border: 0.5px var(--accent-result) solid;
23+
box-shadow: 0 4px 16px rgba(44, 62, 80, 0.13);
24+
cursor: pointer;
25+
transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
26+
margin: 15px 12px;
27+
letter-spacing: 0.5px;
28+
width: 285px;
29+
outline: none;
30+
position: relative;
31+
overflow: hidden;
32+
}
33+
34+
.hero-button:hover, .hero-button:focus {
35+
background: #1d4462;
36+
box-shadow: 0 8px 24px rgba(44, 62, 80, 0.18);
37+
transform: translateY(-2px) scale(1.03);
38+
}
39+
40+
.hero-button:active {
41+
background: #004a9b;
42+
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.10);
43+
transform: scale(0.98);
2344
}
2445

2546
.hero {
@@ -32,12 +53,180 @@
3253
font-weight: 380;
3354
font-size: 28px;
3455
line-height: 1;
35-
background-color: #d3dfe6;
56+
background-color: var(--background);
57+
color: var(--history-accent-2);
58+
}
59+
60+
.features-h2 {
61+
font-weight: 600;
62+
font-size: 48px;
63+
line-height: 1.5;
64+
margin: 20px 0;
3665
}
3766

3867
.hero-gif {
39-
margin-top: 20px;
68+
margin: 20px 45px;
4069
display: block;
4170
margin: 0 auto;
4271
max-width: 100%;
4372
}
73+
74+
.features-list, .usecases-list {
75+
display: grid;
76+
grid-template-columns: 1fr 1fr;
77+
gap: 22px 36px;
78+
list-style: none;
79+
padding: 0;
80+
margin: 0 auto 32px auto;
81+
justify-items: stretch;
82+
width: 100%;
83+
max-width: 720px;
84+
}
85+
.features-list li, .usecases-list li {
86+
font-size: 1.13em;
87+
color: #1a2a3a;
88+
background: #ddd5ce;
89+
border-radius: 14px;
90+
padding: 20px 28px;
91+
line-height: 1.2;
92+
margin: 10px;
93+
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.07);
94+
display: flex;
95+
flex-direction: column;
96+
align-items: flex-start;
97+
gap: 8px;
98+
text-align: left;
99+
border: 1px solid #e0eafc;
100+
transition: box-shadow 0.2s, border 0.2s;
101+
position: relative;
102+
}
103+
.features-list li strong, .usecases-list li strong {
104+
color: #0076d1;
105+
font-weight: 700;
106+
font-size: 1.08em;
107+
108+
}
109+
.features-list li:hover, .usecases-list li:hover {
110+
box-shadow: 0 6px 24px rgba(44, 62, 80, 0.13);
111+
border: 1.5px solid #6cace4;
112+
z-index: 1;
113+
transform: scale(1.2);
114+
transition: transform 0.2s, box-shadow 0.2s, border 0.2s;
115+
}
116+
.features-h2, .usecases-h2 {
117+
font-weight: 700;
118+
font-size: 2.1em;
119+
line-height: 1.4;
120+
margin: 32px 0 18px 0;
121+
color: var(--accent-result);
122+
text-align: center;
123+
}
124+
125+
.usecases-section, .features-section {
126+
padding: 20px;
127+
}
128+
129+
@media (max-width: 600px) {
130+
.hero {
131+
overflow-x: hidden !important;
132+
width: 95vw !important;
133+
font-size: 48px !important;
134+
}
135+
136+
.hero-button {
137+
width: 50vw !important;
138+
margin: 0 auto;
139+
padding: 16px 0;
140+
font-size: 3rem !important;
141+
}
142+
143+
144+
.features-section, .usecases-section {
145+
padding: 0;
146+
border-radius: 0;
147+
margin: 0;
148+
box-shadow: none;
149+
max-width: 90vw !important;
150+
width: 100%;
151+
box-sizing: border-box;
152+
}
153+
.features-section h2, .usecases-section h2, .features-h2, .usecases-h2 {
154+
font-size: 1.8rem !important;
155+
margin-bottom: 12px;
156+
margin-top: 18px;
157+
width: 100vw;
158+
text-align: left;
159+
padding-left: 4vw;
160+
box-sizing: border-box;
161+
}
162+
.features-list, .usecases-list {
163+
grid-template-columns: 1fr;
164+
gap: 10px 0;
165+
width: 100%;
166+
max-width: 90vw !important;
167+
padding: 0;
168+
margin: 0;
169+
box-sizing: border-box;
170+
}
171+
.features-list li, .usecases-list li {
172+
font-size: 1.5rem !important;
173+
padding: 14px 4vw 14px 4vw;
174+
border-radius: 0;
175+
min-width: 0;
176+
word-break: break-word;
177+
box-shadow: none;
178+
border: none;
179+
margin: 0;
180+
width: 100vw !important;
181+
text-align: left;
182+
background: #f7fafd;
183+
box-sizing: border-box;
184+
}
185+
.features-list li strong, .usecases-list li strong {
186+
font-size: 1.18em !important;
187+
}
188+
.hero-title {
189+
font-size: 2rem !important;
190+
padding: 0 2vw;
191+
width: 90vw;
192+
text-align: left;
193+
box-sizing: border-box;
194+
}
195+
.hero-text {
196+
font-size: 2rem !important;
197+
padding: 8px 2vw;
198+
width: 100vw;
199+
text-align: left;
200+
box-sizing: border-box;
201+
}
202+
.hero-gif {
203+
width: 100vw;
204+
margin: 0;
205+
padding: 0;
206+
box-sizing: border-box;
207+
}
208+
.hero-gif img {
209+
max-width: 100vw;
210+
border-radius: 0;
211+
width: 100vw;
212+
display: block;
213+
box-sizing: border-box;
214+
}
215+
.hero-button {
216+
font-size: 2rem !important;
217+
padding: 14px 0;
218+
width: 100vw;
219+
border-radius: 0;
220+
margin: 8px 0;
221+
box-sizing: border-box;
222+
}
223+
.howto-card, .hero {
224+
padding: 0;
225+
gap: 0;
226+
border-radius: 0;
227+
max-width: 100vw;
228+
width: 100vw;
229+
margin: 0;
230+
box-sizing: border-box;
231+
}
232+
}

‎css/editor.css

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -334,14 +334,37 @@ tr:nth-child(odd) {
334334
transition: all 0.3s cubic-bezier(0.67, 0.17, 0.4, 0.83);
335335
border: none;
336336
}
337-
338337
#feedback-form button:hover {
339338
cursor: pointer;
340339
}
341340

341+
.notyf_toast_custom_info {
342+
font-family: var(--font-mono);
343+
width: fit-content !important;
344+
max-width: 90vw !important;
345+
min-width: 36vw;
346+
background-color: #205E95 !important;
347+
border-radius: 2px;
348+
border: 0.5px solid #bfc9d1;
349+
cursor: pointer;
350+
}
351+
352+
.mobile-device .notyf_toast_custom_info {
353+
font-size: 24px !important;
354+
min-width: 80vw !important;
355+
max-width: 98vw !important;
356+
padding: 18px 12px !important;
357+
border-radius: 3px;
358+
line-height: 1.4;
359+
word-break: break-word;
360+
left: 1vw;
361+
right: 1vw;
362+
margin: 0 auto;
363+
}
364+
342365
.how-to-use {
343366
display: block;
344367
text-align: center;
345368
font-size: 24px;
346369
color: #6cace4;
347-
}
370+
}

‎css/loader.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
width: 180px;
4040
height: 180px;
4141
animation: pulse 1.5s ease-in-out infinite;
42-
background-image: url('/assets/images/favicon/favicon-512.png');
42+
background-image: url('../assets/images/favicon/favicon-512.png');
4343
background-size: contain;
4444
background-repeat: no-repeat;
4545
background-position: center;

‎esbuild.js

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ import copyFilePlugin from "./esbuild-helper/copy-file-plugin.js";
77
fsExtra.emptyDirSync("./dist");
88

99
esbuild.build({
10-
entryPoints: ["./js/editor.js", "./js/loader.js"],
10+
entryPoints: [
11+
"./js/editor.js",
12+
"./js/loader.js",
13+
"./js/styles.js" // Add styles entry for CSS bundling
14+
],
1115
outdir: "dist/js",
1216
bundle: true,
1317
minify: true,
@@ -16,14 +20,6 @@ esbuild.build({
1620
plugins: [
1721
copyFilePlugin("./manifest.json", "./dist/manifest.json"),
1822
copyFilePlugin("./sw.js", "./dist/sw.js"),
19-
copyStaticFiles({
20-
src: "./css",
21-
dest: "dist/css",
22-
dereference: true,
23-
errorOnExist: false,
24-
preserveTimestamps: false,
25-
recursive: true,
26-
}),
2723
copyStaticFiles({
2824
src: "./assets",
2925
dest: "dist/assets",
@@ -46,4 +42,9 @@ esbuild.build({
4642
project: "javascript",
4743
}),
4844
],
45+
loader: {
46+
'.css': 'css',
47+
'.png': 'file',
48+
},
49+
4950
});

0 commit comments

Comments
 (0)