This repository has no description
change logo
author
damedotblog
date
(Mar 17, 2025, 11:19 AM -0400)
commit
8c19dde6
8c19dde6c7ee3fda5ecac952d0a06e613f24c033
parent
e94cd573
e94cd573f621882661310783d32ce2fc9b0a8014
+66
-63
+42
-44
app/src/app/page.module.css
+42
-44
app/src/app/page.module.css
···
5
5
6
6
.header {
7
7
display: flex;
8
-
justify-content: space-between;
9
-
align-items: flex-start;
8
+
justify-content: center;
9
+
align-items: center;
10
10
margin-bottom: 2rem;
11
-
flex-wrap: wrap;
12
-
gap: 1rem;
11
+
text-align: center;
12
+
width: 100%;
13
13
}
14
14
15
15
.headerContent {
16
-
flex: 1 1 300px;
17
-
min-width: 0;
16
+
flex: 1;
17
+
max-width: 600px;
18
+
display: flex;
19
+
flex-direction: column;
20
+
align-items: center;
18
21
}
19
22
20
-
.title {
21
-
font-size: 2.5rem;
22
-
margin-bottom: 0.25rem;
23
+
.tagline {
24
+
font-size: 1.5rem;
25
+
margin-bottom: 0.6rem;
23
26
color: var(--primary-color);
24
27
word-wrap: break-word;
25
28
hyphens: auto;
26
-
line-height: 1.2;
29
+
line-height: 1.4;
30
+
text-align: center;
27
31
}
28
32
29
-
.subtitle {
30
-
font-size: 1rem;
31
-
color: var(--timestamp-color);
32
-
margin: 0 0 0.5rem 0;
33
-
font-weight: normal;
33
+
.description {
34
+
font-size: 1.1rem;
35
+
color: var(--text-color);
36
+
margin: 0 0 0.6rem 0;
37
+
line-height: 1.5;
34
38
word-wrap: break-word;
39
+
text-align: center;
35
40
}
36
41
37
-
.description {
38
-
font-size: 0.9rem;
42
+
.donateText {
43
+
font-size: 1rem;
39
44
color: var(--text-color);
40
-
margin: 0;
41
-
line-height: 1.4;
45
+
margin: 0 0 0.6rem 0;
46
+
line-height: 1.5;
42
47
word-wrap: break-word;
48
+
text-align: center;
43
49
}
44
50
45
51
.creditLine {
46
-
display: block;
47
-
font-size: 0.85rem;
48
-
margin-top: 0.5rem;
52
+
font-size: 0.9rem;
53
+
margin-top: 0.2rem;
49
54
color: var(--timestamp-color);
55
+
text-align: center;
50
56
}
51
57
52
58
.kofiLink {
···
59
65
text-decoration: underline;
60
66
}
61
67
62
-
.headerActions {
63
-
display: flex;
64
-
gap: 1rem;
65
-
align-items: center;
66
-
}
67
-
68
+
/* Responsive adjustments */
68
69
@media (max-width: 600px) {
69
-
/* Header styles */
70
-
.header {
71
-
flex-direction: column;
72
-
align-items: flex-start;
70
+
.tagline {
71
+
font-size: 1.3rem;
73
72
}
74
73
75
-
.headerContent {
76
-
flex: 1 1 100%;
77
-
text-align: left;
74
+
.description {
75
+
font-size: 1rem;
78
76
}
79
77
80
-
.headerActions {
81
-
width: 100%;
82
-
justify-content: flex-start;
78
+
.donateText {
79
+
font-size: 0.9rem;
83
80
}
84
-
85
-
.title {
86
-
font-size: 2rem;
81
+
}
82
+
83
+
@media (max-width: 400px) {
84
+
.tagline {
85
+
font-size: 1.2rem;
87
86
}
88
87
89
-
/* Content alignment for feed items */
90
-
.contentLeft {
91
-
align-items: center;
88
+
.description, .donateText {
89
+
font-size: 0.85rem;
92
90
}
93
91
}
94
92
+11
-5
app/src/app/page.tsx
+11
-5
app/src/app/page.tsx
···
356
356
<div className={styles.container}>
357
357
<header className={styles.header}>
358
358
<div className={styles.headerContent}>
359
+
{/* New header layout with 4 center-aligned lines */}
360
+
<h1 className={styles.tagline}>
361
+
The Decentralized Toilet Network of Planet Earth & Simulation 12B
362
+
</h1>
359
363
<p className={styles.description}>
360
-
The world's 1st decentralized social media app for sharing when you're on the toilet. Powered by the AT Protocol. Your flushes are saved to your PDS via the im.flushing lexicon.<br />
361
-
<span className={styles.creditLine}>
362
-
Made by <a href="https://bsky.app/profile/dame.is" target="_blank" rel="noopener noreferrer">@dame.is</a>.
363
-
Like the app? Donate to<a href="https://ko-fi.com/dameis" target="_blank" rel="noopener noreferrer" className={styles.kofiLink}> my toilet paper fund</a>.
364
-
</span>
364
+
Share a "flush" whenever you're in the bathroom.
365
+
</p>
366
+
<p className={styles.donateText}>
367
+
Like the app? Donate to <a href="https://ko-fi.com/dameis" target="_blank" rel="noopener noreferrer" className={styles.kofiLink}>our toilet paper fund</a>.
368
+
</p>
369
+
<p className={styles.creditLine}>
370
+
Made by <a href="https://bsky.app/profile/dame.is" target="_blank" rel="noopener noreferrer">@dame.is</a> and <a href="https://bsky.app/profile/atpota.to" target="_blank" rel="noopener noreferrer">@atpota.to</a>
365
371
</p>
366
372
</div>
367
373
</header>