xan.lol
forked from
atpota.to/flushes.app
The 1st decentralized social network for sharing when you're on the toilet. Post a "flush" today! Powered by the AT Protocol.
1.container {
2 max-width: 800px;
3 margin: 0 auto;
4 padding: 2rem 1.5rem;
5 color: var(--foreground-rgb);
6}
7
8.header {
9 text-align: center;
10 margin-bottom: 2rem;
11}
12
13.title {
14 font-size: 2.5rem;
15 font-weight: 800;
16 margin-bottom: 0.5rem;
17 color: var(--primary-color);
18}
19
20.subtitle {
21 font-size: 1.25rem;
22 color: var(--secondary-foreground);
23 max-width: 600px;
24 margin: 0 auto;
25}
26
27.section {
28 margin-bottom: 2rem;
29 background-color: var(--card-background);
30 border-radius: 1rem;
31 padding: 2rem;
32 border: 1px solid var(--tile-border);
33}
34
35.section h2 {
36 margin-top: 0;
37 margin-bottom: 1.25rem;
38 font-size: 1.5rem;
39 font-weight: 700;
40 color: var(--primary-color);
41}
42
43.section p {
44 margin-bottom: 1.25rem;
45 line-height: 1.6;
46}
47
48.section a {
49 color: var(--link-color);
50 text-decoration: none;
51 font-weight: 500;
52 transition: color 0.2s ease;
53}
54
55.section a:hover {
56 text-decoration: underline;
57}
58
59.featureList, .pressList {
60 margin: 1.5rem 0;
61 padding-left: 1.5rem;
62}
63
64.featureList li, .pressList li {
65 line-height: 1.6;
66 margin-bottom: 0.75rem;
67}
68
69.videoContainer {
70 position: relative;
71 width: 100%;
72 padding-bottom: 56.25%; /* 16:9 aspect ratio */
73 height: 0;
74 margin: 1.5rem 0;
75}
76
77.videoContainer iframe {
78 position: absolute;
79 top: 0;
80 left: 0;
81 width: 100%;
82 height: 100%;
83 border-radius: 0.5rem;
84}
85
86.actionLinks {
87 display: flex;
88 flex-wrap: wrap;
89 gap: 1rem;
90 margin-top: 1.5rem;
91 padding-top: 1rem;
92}
93
94.actionLink {
95 background-color: var(--card-background);
96 border: 1px solid var(--primary-color);
97 color: var(--primary-color);
98 padding: 0.75rem 1.25rem;
99 border-radius: 0.5rem;
100 text-decoration: none;
101 font-weight: 500;
102 transition: all 0.2s ease;
103}
104
105.actionLink:hover {
106 background-color: var(--primary-color);
107 color: white;
108}
109
110/* Responsive styles */
111@media (max-width: 768px) {
112 .container {
113 padding: 1.5rem 1rem;
114 }
115
116 .section {
117 padding: 1.5rem;
118 }
119
120 .title {
121 font-size: 2rem;
122 }
123
124 .subtitle {
125 font-size: 1.1rem;
126 }
127}
128
129@media (max-width: 480px) {
130 .title {
131 font-size: 1.75rem;
132 }
133
134 .section h2 {
135 font-size: 1.3rem;
136 }
137
138 .actionLinks {
139 flex-direction: column;
140 }
141
142 .actionLink {
143 width: 100%;
144 text-align: center;
145 }
146}