Skip to content

Commit d561872

Browse files
maskedsyntaxmaskedsyntax
committed
feat(ui): the mobile design is now responsive.
1 parent f8cfa80 commit d561872

2 files changed

Lines changed: 97 additions & 39 deletions

File tree

‎css/styles.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
2+
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap');
23

34
.space-mono-regular {
45
font-family: "Space Mono", monospace;
@@ -31,6 +32,7 @@ body {
3132
}
3233

3334
.hero-header {
35+
font-family: "Kode Mono", monospace;
3436
text-shadow: 4px 4px 0px #7c6f64;
3537
}
3638

@@ -290,4 +292,45 @@ nav {
290292
.feature-item {
291293
padding: 1.5rem;
292294
}
295+
296+
.cta-button {
297+
padding: 0.7rem 1.5rem;
298+
font-size: 0.9rem;
299+
box-shadow: 4px 4px 0 #000;
300+
}
301+
302+
.cta-button:hover {
303+
transform: translate(-2px, -2px);
304+
box-shadow: 6px 6px 0px #000;
305+
}
306+
307+
.mission-grid {
308+
grid-template-columns: 1fr;
309+
gap: 1.5rem;
310+
margin-top: 1.5rem;
311+
}
312+
313+
.mission-card {
314+
padding: 1.5rem;
315+
box-shadow: 4px 4px 0px #427b58;
316+
}
317+
318+
.mission-card h3 {
319+
font-size: 1.1rem;
320+
}
321+
322+
.mission-card p {
323+
font-size: 0.9rem;
324+
}
325+
326+
#mission {
327+
padding: 0.3rem 0.8rem;
328+
border-width: 3px;
329+
font-size: 1.2rem;
330+
margin-bottom: 1.5rem;
331+
}
332+
333+
.hero-header {
334+
text-shadow: 2px 2px 2px #7c6f64;
335+
}
293336
}

‎index.html‎

Lines changed: 54 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -122,20 +122,9 @@ <h4>Pipeline Integration</h4>
122122

123123
<!-- Mission Section -->
124124
<section class="pb-4">
125-
<!-- <div class="mt-16">
126-
<div class="product-header">
127-
<h2 class="underline text-xl sm:text-2xl md:text-3xl font-bold mb-6 sm:mb-8">
128-
# our mission
129-
</h2>
130-
</div>
131-
<p class="hashprep-description">
132-
Think <strong>"Pandas Profiling + ESLint + AutoML"</strong> specifically designed for ML
133-
datasets.
134-
</p>
135-
</div> -->
136125
<div class="mt-16">
137126
<div>
138-
<h2
127+
<h2 id="mission"
139128
class="bg-[#427b58] text-[#f9f5d7] p-2 inline-block border-4 border-[#000] text-2xl font-bold mb-8">
140129
our mission</h2>
141130
<p class="mb-8 text-[#1d2021] italic">
@@ -166,58 +155,84 @@ <h3>Quiet Progress</h3>
166155
</div>
167156
</div>
168157
<p style="margin-top: 3rem; color: var(--accent);">
169-
Our projects are open, simple, and built to be useful. If something helps you, star it. If you can improve it, fork it. Even just exploring the repos means a lot — the work is meant to be shared.
158+
Our projects are open, simple, and built to be useful. If something helps you, star it. If you
159+
can improve it, fork it. Even just exploring the repos means a lot — the work is meant to be
160+
shared.
170161
</p>
171162
</div>
172163
</section>
173164

174165
</main>
175166
</div>
176167

177-
<!-- Footer -->
178-
<footer
179-
class="w-full sm:w-4/5 md:w-3/5 container mx-auto px-4 sm:px-6 py-6 sm:py-8 border-t border-[#1d2021] dark:border-[#f9f5d7] text-base sm:text-lg">
180-
<!-- Responsive width and padding -->
181-
<div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0">
182-
<!-- Left Side -->
183-
<div class="flex items-center space-x-4">
184-
<div>
185-
<img src="assets/logos/Cache_Vector.svg" alt="CacheVector Logo" class="w-12 sm:w-16 h-12 sm:h-16" />
186-
<!-- Scaled for mobile -->
187-
</div>
188-
<div>
189-
<p>© 2025 CacheVector</p>
190-
<p>All rights reserved</p>
168+
<!-- Footer -->
169+
<footer
170+
class="w-full sm:w-4/5 md:w-3/5 container mx-auto px-4 sm:px-6 py-6 sm:py-8 border-t border-[#1d2021] dark:border-[#f9f5d7] text-base sm:text-lg">
171+
<!-- Responsive width and padding -->
172+
<div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0">
173+
<!-- Left Side -->
174+
<div class="flex items-center space-x-4">
175+
<div>
176+
<img src="assets/logos/Cache_Vector.svg" alt="CacheVector Logo" class="w-12 sm:w-16 h-12 sm:h-16" />
177+
</div>
178+
<div class="hidden sm:block">
179+
<p>© 2025 CacheVector</p>
180+
<p>All rights reserved</p>
181+
</div>
182+
</div>
183+
184+
<!-- Right Side -->
185+
<div class="flex flex-col items-center sm:items-end w-full sm:w-auto">
186+
<!-- Mobile order (socials → backed → copyright) -->
187+
<div class="flex flex-col items-center sm:hidden w-full space-y-2">
188+
<div class="flex space-x-4 justify-center">
189+
<a href="https://www.github.com/cachevector" target="_blank" class="social-icon text-gray-400">
190+
<img src="assets/icons/github_dm.svg" alt="Github Link"
191+
class="dark:block hidden w-8 h-8" />
192+
<img src="assets/icons/github_lm.svg" alt="Github Link"
193+
class="block dark:hidden w-8 h-8" />
194+
</a>
195+
<a href="https://x.com/cvectordotcom" target="_blank" class="social-icon text-gray-400">
196+
<img src="assets/icons/x_dm.svg" alt="X Link" class="dark:block hidden w-8 h-8" />
197+
<img src="assets/icons/x_lm.svg" alt="X Link" class="block dark:hidden w-8 h-8" />
198+
</a>
199+
<a href="https://discord.gg/spuz77bcJg" target="_blank" class="social-icon text-gray-400">
200+
<img src="assets/icons/discord_dm.svg" alt="Discord Link"
201+
class="dark:block hidden w-8 h-8" />
202+
<img src="assets/icons/discord_lm.svg" alt="Discord Link"
203+
class="block dark:hidden w-8 h-8" />
204+
</a>
191205
</div>
206+
<div class="text-sm">Backed by Growvth</div>
207+
<div class="text-xs text-center">© 2025 CacheVector. All rights reserved.</div>
192208
</div>
193209

194-
<!-- Right Side -->
195-
<div class="flex flex-col items-center sm:items-end">
210+
<!-- Desktop order (unchanged) -->
211+
<div class="hidden sm:flex flex-col items-end">
196212
<div class="flex space-x-4">
197213
<a href="https://www.github.com/cachevector" target="_blank" class="social-icon text-gray-400">
198214
<img src="assets/icons/github_dm.svg" alt="Github Link"
199-
class="dark:block hidden w-5 sm:w-8 h-5 sm:h-8" />
215+
class="dark:block hidden w-8 h-8" />
200216
<img src="assets/icons/github_lm.svg" alt="Github Link"
201-
class="block dark:hidden w-5 sm:w-8 h-5 sm:h-8" />
202-
<!-- Scaled -->
217+
class="block dark:hidden w-8 h-8" />
203218
</a>
204219
<a href="https://x.com/cvectordotcom" target="_blank" class="social-icon text-gray-400">
205-
<img src="assets/icons/x_dm.svg" alt="X Link"
206-
class="dark:block hidden w-5 sm:w-8 h-5 sm:h-8" />
207-
<img src="assets/icons/x_lm.svg" alt="X Link"
208-
class="block dark:hidden w-5 sm:w-8 h-5 sm:h-8" />
220+
<img src="assets/icons/x_dm.svg" alt="X Link" class="dark:block hidden w-8 h-8" />
221+
<img src="assets/icons/x_lm.svg" alt="X Link" class="block dark:hidden w-8 h-8" />
209222
</a>
210223
<a href="https://discord.gg/spuz77bcJg" target="_blank" class="social-icon text-gray-400">
211224
<img src="assets/icons/discord_dm.svg" alt="Discord Link"
212-
class="dark:block hidden w-5 sm:w-8 h-5 sm:h-8" />
225+
class="dark:block hidden w-8 h-8" />
213226
<img src="assets/icons/discord_lm.svg" alt="Discord Link"
214-
class="block dark:hidden w-5 sm:w-8 h-5 sm:h-8" />
227+
class="block dark:hidden w-8 h-8" />
215228
</a>
216229
</div>
217230
<div class="mt-2">Backed by Growvth</div>
218231
</div>
219232
</div>
220-
</footer>
233+
</div>
234+
</footer>
235+
221236
</body>
222237

223238
</html>

0 commit comments

Comments
 (0)