Skip to content

Commit 8383a85

Browse files
mvkaranmvkaran
committed
style: update typography for components in About Badge page for improved readability
1 parent e47d226 commit 8383a85

File tree

1 file changed

+25
-35
lines changed

1 file changed

+25
-35
lines changed

‎src/pages/about-badge.astro‎

Lines changed: 25 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -94,94 +94,84 @@ import {
9494
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
9595
<!-- Front Components -->
9696
<div class="space-y-4">
97-
<h4 class="font-semibold text-lg text-primary">Front Components</h4>
97+
<h4 class="font-sans font-semibold text-xl text-primary normal-case">Front Components</h4>
9898

9999
<Card>
100100
<CardHeader>
101-
<CardTitle>Display</CardTitle>
101+
<CardTitle className="font-sans text-xl font-semibold normal-case">Display</CardTitle>
102102
</CardHeader>
103103
<CardContent class="space-y-2">
104104
<div>
105-
<h5 class="font-semibold text-sm mb-1">Full-Color TFT Display</h5>
106-
<p class="text-sm text-muted-foreground">Vibrant full-color screen displaying the GitHub Octocat and your custom apps</p>
105+
<h5 class="font-sans font-semibold text-lg mb-1 normal-case">Full-Color TFT Display</h5>
106+
<p class="font-sans text-lg leading-7 text-muted-foreground/90">Vibrant full-color screen displaying the GitHub Octocat and your custom apps</p>
107107
</div>
108108
</CardContent>
109109
</Card>
110110

111111
<Card>
112112
<CardHeader>
113-
<CardTitle>Control Buttons</CardTitle>
113+
<CardTitle className="font-sans text-xl font-semibold normal-case">Control Buttons</CardTitle>
114114
</CardHeader>
115115
<CardContent class="space-y-3">
116116
<div>
117-
<h5 class="font-semibold text-sm mb-1">Bottom Buttons (A, B, C)</h5>
118-
<p class="text-sm text-muted-foreground">Three primary tactile buttons for app interaction and menu selection</p>
117+
<h5 class="font-sans font-semibold text-lg mb-1 normal-case">Bottom Buttons (A, B, C)</h5>
118+
<p class="font-sans text-lg leading-7 text-muted-foreground/90">Three primary tactile buttons for app interaction and menu selection</p>
119119
</div>
120120
<div>
121-
<h5 class="font-semibold text-sm mb-1">Side Navigation (UP △, DOWN ▽)</h5>
122-
<p class="text-sm text-muted-foreground">Two directional buttons on the right edge for scrolling and navigation</p>
123-
</div>
124-
<div>
125-
<h5 class="font-semibold text-sm mb-1">Status LEDs</h5>
126-
<p class="text-sm text-muted-foreground">Five indicator LEDs on the left side for visual feedback</p>
121+
<h5 class="font-sans font-semibold text-lg mb-1 normal-case">Side Navigation (UP △, DOWN ▽)</h5>
122+
<p class="font-sans text-lg leading-7 text-muted-foreground/90">Two directional buttons on the right edge for scrolling and navigation</p>
127123
</div>
124+
128125
</CardContent>
129126
</Card>
130127
</div>
131128

132129
<!-- Back Components -->
133130
<div class="space-y-4">
134-
<h4 class="font-semibold text-lg text-primary">Back Components</h4>
131+
<h4 class="font-sans font-semibold text-xl text-primary normal-case">Back Components</h4>
135132

136133
<Card>
137134
<CardHeader>
138-
<CardTitle>Power & Connectivity</CardTitle>
135+
<CardTitle className="font-sans text-xl font-semibold normal-case">Power & Connectivity</CardTitle>
139136
</CardHeader>
140137
<CardContent class="space-y-2">
141138
<div>
142-
<h5 class="font-semibold text-sm mb-1">USB-C Port</h5>
143-
<p class="text-sm text-muted-foreground">For power, charging, and programming</p>
139+
<h5 class="font-sans font-semibold text-lg mb-1 normal-case">USB-C Port</h5>
140+
<p class="font-sans text-lg leading-7 text-muted-foreground/90">For power, charging, and programming</p>
144141
</div>
145142
<div>
146-
<h5 class="font-semibold text-sm mb-1">Battery Connector</h5>
147-
<p class="text-sm text-muted-foreground">JST connector for Li-Po battery power</p>
143+
<h5 class="font-sans font-semibold text-lg mb-1 normal-case">Battery Connector</h5>
144+
<p class="font-sans text-lg leading-7 text-muted-foreground/90">JST connector for Li-Po battery power</p>
148145
</div>
149146
</CardContent>
150147
</Card>
151148

152149
<Card>
153150
<CardHeader>
154-
<CardTitle>Expansion & GPIO</CardTitle>
151+
<CardTitle className="font-sans text-xl font-semibold normal-case">Expansion & GPIO</CardTitle>
155152
</CardHeader>
156153
<CardContent class="space-y-2">
157154
<div>
158-
<h5 class="font-semibold text-sm mb-1">QWIIC Connector</h5>
159-
<p class="text-sm text-muted-foreground">I2C connector (purple) for easy sensor and module attachment</p>
155+
<h5 class="font-sans font-semibold text-lg mb-1 normal-case">QWIIC Connector</h5>
156+
<p class="font-sans text-lg leading-7 text-muted-foreground/90">I2C connector (purple) for easy sensor and module attachment</p>
160157
</div>
161158
<div>
162-
<h5 class="font-semibold text-sm mb-1">GPIO Pins</h5>
163-
<p class="text-sm text-muted-foreground">6 pins: 3V, GP6, GP7, GP10, GP11, GND for hardware expansion</p>
159+
<h5 class="font-sans font-semibold text-lg mb-1 normal-case">GPIO Pins</h5>
160+
<p class="font-sans text-lg leading-7 text-muted-foreground/90">6 pins: 3V, GP6, GP7, GP10, GP11, GND for hardware expansion</p>
164161
</div>
165162
</CardContent>
166163
</Card>
167164

168165
<Card>
169166
<CardHeader>
170-
<CardTitle>Processor & Info</CardTitle>
167+
<CardTitle className="font-sans text-xl font-semibold normal-case">Processor & Info</CardTitle>
171168
</CardHeader>
172169
<CardContent class="space-y-2">
173170
<div>
174-
<h5 class="font-semibold text-sm mb-1">RP2350B Chip</h5>
175-
<p class="text-sm text-muted-foreground">Dual-core ARM processor visible on the PCB</p>
176-
</div>
177-
<div>
178-
<h5 class="font-semibold text-sm mb-1">QR Code</h5>
179-
<p class="text-sm text-muted-foreground">Links to gh.io/badger for documentation</p>
180-
</div>
181-
<div>
182-
<h5 class="font-semibold text-sm mb-1">Made by Pimoroni</h5>
183-
<p class="text-sm text-muted-foreground">Crafted in Sheffield, UK • Sponsored by ARM</p>
171+
<h5 class="font-sans font-semibold text-lg mb-1 normal-case">RP2350B Chip</h5>
172+
<p class="font-sans text-lg leading-7 text-muted-foreground/90">Dual-core ARM processor visible on the PCB</p>
184173
</div>
174+
185175
</CardContent>
186176
</Card>
187177
</div>

0 commit comments

Comments
 (0)