chore: update headline spacing, add demo post, general cleanup
the3ash committed
Jul 11, 2025 at 22:20 UTC
11f8a1c3e3058935d207ef74bf5e91fdbdaa4c6b
6 files changed
+103
-20
src/components/examples/Tag.astro
+16
-12
@@ -189,8 +189,8 @@
189
color: var(--bg);
190
border: none;
191
border-radius: 50%;
192
- width: 40px;
193
- height: 40px;
192
+ width: 36px;
193
+ height: 36px;
194
cursor: pointer;
195
display: flex;
196
align-items: center;
@@ -233,11 +233,11 @@
233
.input-state {
234
display: flex;
235
align-items: center;
236
- gap: 0.75rem;
236
+ gap: 0.125rem;
237
background-color: var(--astro-code-background);
238
border: 1px solid var(--code-bg);
239
- border-radius: 20px;
240
- padding: 0.5rem 0.75rem 0.5rem 0.5rem;
239
+ border-radius: 18px;
240
+ padding: 0.28125rem 0.375rem;
241
width: 40px;
242
max-width: 40px;
243
opacity: 0;
@@ -296,6 +296,8 @@
296
transform: scale(0.8);
297
transition: all 0.2s ease;
298
position: relative;
299
+ min-width: 24px;
300
+ min-height: 24px;
301
}
302
303
.confirm-button::before,
@@ -310,8 +312,8 @@
312
opacity: 0;
313
transition: opacity 0.2s ease;
314
z-index: -1;
313
- width: 32px;
314
- height: 32px;
315
+ width: 28px;
316
+ height: 28px;
317
}
318
319
.confirm-button:hover::before,
@@ -354,11 +356,11 @@
356
.tag-display {
357
display: flex;
358
align-items: center;
357
- gap: 0.5rem;
359
+ gap: 0.25rem;
360
background-color: var(--astro-code-background);
361
border: 1px solid var(--code-bg);
360
- border-radius: 20px;
361
- padding: 0.5rem 0.75rem 0.5rem 1rem;
362
+ border-radius: 18px;
363
+ padding: 0.28125rem 0.325rem 0.28125rem 0.75rem;
364
position: absolute;
365
top: 50%;
366
left: 50%;
@@ -404,6 +406,8 @@
406
opacity: 0.6;
407
transition: all 0.2s ease;
408
position: relative;
409
+ min-width: 24px;
410
+ min-height: 24px;
411
}
412
413
.delete-button::before {
@@ -417,8 +421,8 @@
421
opacity: 0;
422
transition: opacity 0.2s ease;
423
z-index: -1;
420
- width: 32px;
421
- height: 32px;
424
+ width: 28px;
425
+ height: 28px;
426
}
427
428
.delete-button:hover {
src/components/layout/BaseHead.astro
+3
-7
@@ -1,17 +1,13 @@
1
---
2
// Import the global.css file here so that it is included on
3
// all pages through the use of the <BaseHead /> component.
4
-import 'katex/dist/katex.min.css'
4
import { SITE } from '@/config'
6
-
7
-interface Props {
8
- title: string
9
- description: string
10
-}
5
+import type { BaseHeadProps } from '@/types/component.types'
6
+import 'katex/dist/katex.min.css'
7
8
const canonicalURL = new URL(Astro.url.pathname, Astro.site)
9
14
-const { title, description } = Astro.props
10
+const { title, description } = Astro.props as BaseHeadProps
11
---
12
13
<!-- Global Metadata -->
src/content/posts/_assets/tr-808.png
Binary files /dev/null and b/src/content/posts/_assets/tr-808.png differ
src/content/posts/the-tr-808-story.md
new
+77
@@ -0,0 +1,77 @@
1
+---
2
+title: The TR-808 Story
3
+pubDate: '2025-05-10'
4
+---
5
+
6
+
7
+
8
+The Roland TR-808 Rhythm Composer, often simply called the "808," is one of the most influential electronic instruments ever created. Despite its initial commercial failure, this drum machine went on to shape entire genres of music and become a cultural icon. This is the story of how a machine designed to replace drummers ended up revolutionizing music production.
9
+
10
+## The Birth of the 808
11
+
12
+In the late 1970s, Roland Corporation was looking to create an affordable drum machine that could compete with the expensive Linn LM-1, which was the first drum machine to use digital samples. The company's engineers, led by **Ikutaro Kakehashi**, set out to create something different—a machine that would use **analog synthesis** to generate drum sounds rather than digital samples.
13
+
14
+The development team faced several challenges:
15
+
16
+1. **Cost constraints** - The machine needed to be affordable for home musicians
17
+2. **Sound design** - Creating realistic drum sounds using only analog circuits
18
+3. **User interface** - Making it intuitive for musicians to program rhythms
19
+
20
+> "We wanted to create something that would make drummers obsolete, but instead we created something that made everyone want to be a drummer." — Ikutaro Kakehashi
21
+
22
+## The "Failed" Launch
23
+
24
+When the TR-808 was released in 1980, it was met with **disappointing sales**. The machine cost \$1,195 (approximately \$4,000 in today's dollars) and was criticized for its "unrealistic" drum sounds. Professional studios preferred the more expensive Linn LM-1, which used actual drum samples.
25
+
26
+The 808's analog sounds were considered too electronic and artificial:
27
+
28
+- The kick drum was too boomy and lacked the punch of real drums
29
+- The snare had a distinctive "clap" sound that sounded nothing like a real snare
30
+- The hi-hats were metallic and harsh
31
+- The toms had a characteristic "boing" sound
32
+
33
+Roland discontinued the TR-808 in 1983 after selling only about **12,000 units**, considering it a commercial failure.
34
+
35
+## The Hip-Hop Revolution
36
+
37
+The TR-808's fortunes changed dramatically when **hip-hop producers** discovered its unique sound. In the early 1980s, young producers in New York, particularly in the Bronx, began experimenting with the machine.
38
+
39
+Key early adopters included **Afrika Bambaataa** who used the 808 on "Planet Rock" (1982), **Marley Marl** who pioneered the use of 808 kicks in hip-hop, **Rick Rubin** who incorporated 808 sounds in early Def Jam recordings, and **The Bomb Squad** who used 808s extensively in Public Enemy's production.
40
+
41
+The 808's distinctive kick drum became the foundation of hip-hop's rhythmic backbone. Its deep, resonant bass sound could shake entire neighborhoods when played through powerful sound systems.
42
+
43
+## The Miami Bass Phenomenon
44
+
45
+In the mid-1980s, the TR-808 found another home in **Miami**, where it became the centerpiece of a new genre called **Miami Bass** or **Booty Bass**. Producers like **2 Live Crew** made the 808 kick drum the star of their tracks, **DJ Magic Mike** created entire albums built around 808 patterns, and **Luke Skyywalker** used 808s to create the signature Miami sound.
46
+
47
+The 808's ability to produce extremely low frequencies made it perfect for the car audio culture that was emerging in Miami, where bass-heavy music became a status symbol.
48
+
49
+## Electronic Music and Dance
50
+
51
+The TR-808's influence extended far beyond hip-hop. In the late 1980s and early 1990s, it became essential in house music and techno. **Frankie Knuckles** and **Marshall Jefferson** used 808s in early Chicago house, while the machine's hi-hats and claps became signature sounds of house music. Its programmable sequencer allowed for complex rhythmic patterns.
52
+
53
+In techno music, **Juan Atkins**, **Derrick May**, and **Kevin Saunderson** (the Belleville Three) incorporated 808s into Detroit techno. The machine's futuristic sounds fit perfectly with techno's robotic aesthetic, and its affordability made it accessible to bedroom producers.
54
+
55
+## The 808 in Modern Music
56
+
57
+Even today, the TR-808 continues to influence music production through software emulations and hardware reissues. **Roland Cloud** offers the official software version of the 808, **Native Instruments** includes 808 samples in their libraries, and **Ableton Live** features 808-inspired drum racks.
58
+
59
+Hardware reissues include the **Roland TR-08** boutique series reissue, the **Roland TR-8S** modern drum machine with 808 sounds, and the **Behringer RD-8** affordable clone of the original.
60
+
61
+## Cultural Impact
62
+
63
+The TR-808 has transcended its role as a musical instrument to become a **cultural symbol**. It has influenced fashion with 808-inspired clothing and accessories, art with visual artists incorporating 808 imagery in their work, film through documentaries and movies about the machine's impact, and literature with books and articles celebrating its legacy.
64
+
65
+> "The 808 didn't just change music—it changed culture. It gave a voice to communities that didn't have access to expensive studio equipment." — Questlove
66
+
67
+## The Enduring Legacy
68
+
69
+The Roland TR-808's story is a perfect example of how **failure can lead to innovation**. What was initially considered a commercial flop became one of the most important musical instruments of the 20th century.
70
+
71
+Key lessons from the 808 story include embracing imperfection (the 808's "flaws" became its greatest strengths), understanding that accessibility matters (affordable tools can democratize music creation), recognizing that community adoption is crucial (users often find creative applications designers never imagined), and appreciating that timeless design remains relevant for decades.
72
+
73
+The TR-808's influence continues to grow, proving that sometimes the most revolutionary innovations come from unexpected places. From its humble beginnings as a "failed" drum machine to its status as a cultural icon, the 808 has truly earned its place in music history.
74
+
75
+---
76
+
77
+_The TR-808 may have been discontinued in 1983, but its beat goes on, inspiring new generations of musicians and producers to create the music of tomorrow._
src/styles/post.css
+1
-1
@@ -28,7 +28,7 @@
28
font-size: var(--font-size-m);
29
font-weight: var(--font-weight-bold);
30
line-height: 1.75;
31
- margin: 2.5em 0 1em 0;
31
+ margin: 3.25em 0 1em 0;
32
}
33
34
/* Bold text */
src/types/component.types.ts
+6
@@ -25,3 +25,9 @@ export interface LayoutProps extends TransitionProps {
25
title?: string
26
description?: string
27
}
28
+
29
+// BaseHead component props interface
30
+export interface BaseHeadProps {
31
+ title: string
32
+ description: string
33
+}