Skip to content

Commit fe22042

Browse files
mrryfmrryf
authored
Merge pull request #7 from mrryf/redesign-minimalist-monochrome
fix: improve spacing throughout webapp following 4px design system
2 parents 6d96499 + 8053eb6 commit fe22042

11 files changed

Lines changed: 706 additions & 464 deletions

File tree

‎webapp/src/app.css‎

Lines changed: 145 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,177 @@
1+
/* Import Google Fonts */
2+
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=JetBrains+Mono:wght@400;500&display=swap');
3+
14
@tailwind base;
25
@tailwind components;
36
@tailwind utilities;
47

58
@layer base {
69
:root {
7-
--background: 0 0% 100%;
8-
--foreground: 222.2 84% 4.9%;
9-
--card: 0 0% 100%;
10-
--card-foreground: 222.2 84% 4.9%;
11-
--popover: 0 0% 100%;
12-
--popover-foreground: 222.2 84% 4.9%;
13-
--primary: 221.2 83.2% 53.3%;
14-
--primary-foreground: 210 40% 98%;
15-
--secondary: 210 40% 96.1%;
16-
--secondary-foreground: 222.2 47.4% 11.2%;
17-
--muted: 210 40% 96.1%;
18-
--muted-foreground: 215.4 16.3% 46.9%;
19-
--accent: 210 40% 96.1%;
20-
--accent-foreground: 222.2 47.4% 11.2%;
21-
--destructive: 0 84.2% 60.2%;
22-
--destructive-foreground: 210 40% 98%;
23-
--border: 214.3 31.8% 91.4%;
24-
--input: 214.3 31.8% 91.4%;
25-
--ring: 221.2 83.2% 53.3%;
26-
--radius: 0.5rem;
27-
}
28-
29-
.dark {
30-
--background: 222.2 84% 4.9%;
31-
--foreground: 210 40% 98%;
32-
--card: 222.2 84% 4.9%;
33-
--card-foreground: 210 40% 98%;
34-
--popover: 222.2 84% 4.9%;
35-
--popover-foreground: 210 40% 98%;
36-
--primary: 217.2 91.2% 59.8%;
37-
--primary-foreground: 222.2 47.4% 11.2%;
38-
--secondary: 217.2 32.6% 17.5%;
39-
--secondary-foreground: 210 40% 98%;
40-
--muted: 217.2 32.6% 17.5%;
41-
--muted-foreground: 215 20.2% 65.1%;
42-
--accent: 217.2 32.6% 17.5%;
43-
--accent-foreground: 210 40% 98%;
44-
--destructive: 0 62.8% 30.6%;
45-
--destructive-foreground: 210 40% 98%;
46-
--border: 217.2 32.6% 17.5%;
47-
--input: 217.2 32.6% 17.5%;
48-
--ring: 224.3 76.3% 48%;
10+
--background: #FFFFFF;
11+
--foreground: #000000;
12+
--card: #FFFFFF;
13+
--card-foreground: #000000;
14+
--popover: #FFFFFF;
15+
--popover-foreground: #000000;
16+
--primary: #000000;
17+
--primary-foreground: #FFFFFF;
18+
--secondary: #F5F5F5;
19+
--secondary-foreground: #000000;
20+
--muted: #F5F5F5;
21+
--muted-foreground: #525252;
22+
--accent: #000000;
23+
--accent-foreground: #FFFFFF;
24+
--destructive: #000000;
25+
--destructive-foreground: #FFFFFF;
26+
--border: #000000;
27+
--border-light: #E5E5E5;
28+
--input: #000000;
29+
--ring: #000000;
30+
--radius: 0px;
4931
}
5032
}
5133

5234
@layer base {
5335
* {
54-
@apply border-border;
36+
@apply border-0;
37+
border-radius: 0 !important;
5538
}
39+
5640
body {
57-
@apply bg-background text-foreground;
41+
@apply bg-background text-foreground font-serif antialiased;
42+
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
43+
background-size: 256px 256px;
44+
background-attachment: fixed;
45+
}
46+
47+
body::before {
48+
content: '';
49+
position: fixed;
50+
top: 0;
51+
left: 0;
52+
width: 100%;
53+
height: 100%;
54+
background-image: repeating-linear-gradient(
55+
0deg,
56+
transparent,
57+
transparent 1px,
58+
#000 1px,
59+
#000 2px
60+
);
61+
background-size: 100% 4px;
62+
opacity: 0.015;
63+
pointer-events: none;
64+
z-index: 0;
5865
}
5966

60-
/* Enhanced focus visibility for accessibility */
67+
/* Enhanced focus visibility - Pure monochrome */
6168
a:focus-visible,
6269
button:focus-visible,
6370
[role="button"]:focus-visible {
64-
@apply outline-2 outline-offset-2 outline-ring;
71+
@apply outline outline-[3px] outline-offset-[3px] outline-black;
72+
}
73+
74+
input:focus-visible,
75+
textarea:focus-visible {
76+
@apply outline-none border-b-[4px] border-black;
6577
}
6678
}
6779

6880
@layer utilities {
69-
/* Smooth hover transitions */
70-
.hover-lift {
71-
@apply transition-all duration-200;
81+
/* Monochrome inversion hover */
82+
.hover-invert {
83+
@apply transition-colors duration-100;
84+
}
85+
.hover-invert:hover {
86+
@apply bg-foreground text-background;
87+
}
88+
89+
/* Instant interaction */
90+
.interactive-instant {
91+
@apply cursor-pointer select-none;
92+
transition: all 0ms;
93+
}
94+
95+
/* Border thicken on hover */
96+
.hover-border-thicken {
97+
@apply border-2 border-black transition-all duration-100;
98+
}
99+
.hover-border-thicken:hover {
100+
@apply border-[4px];
72101
}
73-
.hover-lift:hover {
74-
@apply -translate-y-0.5 shadow-md;
102+
103+
/* Typography utilities */
104+
.text-display {
105+
@apply font-display;
106+
}
107+
108+
.text-mono-label {
109+
@apply font-mono uppercase tracking-widest text-xs;
110+
}
111+
112+
/* Section divider - thick horizontal rule */
113+
.section-divider {
114+
@apply border-t-4 border-black w-full my-24;
115+
}
116+
117+
.section-divider-ultra {
118+
@apply border-t-8 border-black w-full my-32;
119+
}
120+
121+
/* Inverted section */
122+
.section-inverted {
123+
@apply bg-black text-white relative overflow-hidden;
75124
}
76125

77-
/* Consistent interactive element styling */
78-
.interactive {
79-
@apply cursor-pointer select-none transition-all duration-200;
126+
.section-inverted::before {
127+
content: '';
128+
position: absolute;
129+
top: 0;
130+
left: 0;
131+
width: 100%;
132+
height: 100%;
133+
background-image: repeating-linear-gradient(
134+
90deg,
135+
transparent,
136+
transparent 1px,
137+
#fff 1px,
138+
#fff 2px
139+
);
140+
background-size: 4px 100%;
141+
opacity: 0.03;
142+
pointer-events: none;
80143
}
81-
.interactive:hover {
82-
@apply opacity-90;
144+
145+
/* Grid texture pattern */
146+
.pattern-grid {
147+
position: relative;
83148
}
84-
.interactive:active {
85-
@apply scale-95;
149+
150+
.pattern-grid::before {
151+
content: '';
152+
position: absolute;
153+
top: 0;
154+
left: 0;
155+
width: 100%;
156+
height: 100%;
157+
background-image:
158+
linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
159+
linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
160+
background-size: 40px 40px;
161+
pointer-events: none;
162+
z-index: 0;
86163
}
87164

88-
/* Enhanced link styling with underline offset */
89-
.link-enhanced {
90-
@apply underline decoration-primary/50 underline-offset-4 transition-all duration-200;
165+
/* Decorative elements */
166+
.hero-decorator {
167+
@apply relative;
91168
}
92-
.link-enhanced:hover {
93-
@apply decoration-primary underline-offset-2;
169+
170+
.hero-decorator::after {
171+
content: '';
172+
@apply absolute w-3 h-3 border-2 border-black;
173+
right: -1.5rem;
174+
top: 50%;
175+
transform: translateY(-50%);
94176
}
95177
}

‎webapp/src/lib/components/Breadcrumbs.svelte‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<script lang="ts">
22
import { page } from "$app/stores";
3-
43
import Home from "@lucide/svelte/icons/home";
5-
import * as Breadcrumb from "$lib/components/ui/breadcrumb";
4+
import ChevronRight from "@lucide/svelte/icons/chevron-right";
65
76
// Route name mapping for human-readable breadcrumbs
87
const routeLabels: Record<string, string> = {
@@ -35,31 +34,37 @@
3534
</script>
3635

3736
{#if breadcrumbs.length > 0}
38-
<nav class="container mx-auto px-4 py-3" aria-label="Breadcrumb">
39-
<Breadcrumb.Root>
40-
<Breadcrumb.List>
37+
<nav class="border-b-2 border-black bg-white" aria-label="Breadcrumb">
38+
<div class="container mx-auto px-6 md:px-12 py-6">
39+
<ol class="flex items-center gap-3 text-sm">
4140
<!-- Home link -->
42-
<Breadcrumb.Item>
43-
<Breadcrumb.Link href="/" class="flex items-center gap-1.5">
44-
<Home class="h-4 w-4" />
41+
<li>
42+
<a
43+
href="/"
44+
class="flex items-center gap-2 hover:opacity-70 transition-opacity duration-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-black focus-visible:outline-offset-2"
45+
>
46+
<Home size={16} strokeWidth={1.5} />
4547
<span class="sr-only">Home</span>
46-
</Breadcrumb.Link>
47-
</Breadcrumb.Item>
48+
</a>
49+
</li>
4850

4951
<!-- Dynamic breadcrumb items -->
5052
{#each breadcrumbs as crumb}
51-
<Breadcrumb.Separator />
52-
<Breadcrumb.Item>
53+
<li class="flex items-center gap-3">
54+
<ChevronRight size={16} strokeWidth={1.5} class="text-mutedForeground" />
5355
{#if crumb.isLast}
54-
<Breadcrumb.Page>{crumb.label}</Breadcrumb.Page>
56+
<span class="font-semibold">{crumb.label}</span>
5557
{:else}
56-
<Breadcrumb.Link href={crumb.href}>
58+
<a
59+
href={crumb.href}
60+
class="hover:opacity-70 transition-opacity duration-100 underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-black focus-visible:outline-offset-2"
61+
>
5762
{crumb.label}
58-
</Breadcrumb.Link>
63+
</a>
5964
{/if}
60-
</Breadcrumb.Item>
65+
</li>
6166
{/each}
62-
</Breadcrumb.List>
63-
</Breadcrumb.Root>
67+
</ol>
68+
</div>
6469
</nav>
6570
{/if}

0 commit comments

Comments
 (0)