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: 1000px;
3 margin: 0 auto;
4 padding: 2rem 1.5rem;
5 color: var(--foreground-rgb);
6}
7
8.header {
9 text-align: center;
10 max-width: 500px;
11 margin: auto;
12}
13
14.title {
15 font-size: 2.5rem;
16 font-weight: 800;
17 margin-bottom: 0.5rem;
18 color: var(--primary-color);
19}
20
21.subtitle {
22 font-size: 1.25rem;
23 color: var(--secondary-foreground);
24 max-width: 600px;
25 margin: 0 auto;
26}
27
28.shortcutCard {
29 display: flex;
30 background-color: var(--card-background);
31 border-radius: 1rem;
32 overflow: hidden;
33 margin-bottom: 3rem;
34 border: 1px solid var(--tile-border);
35}
36
37.cardContent {
38 flex: 1;
39 padding: 2rem;
40}
41
42.shortcutImage {
43 width: 300px;
44 background-color: var(--background-start-rgb);
45 display: flex;
46 align-items: center;
47 justify-content: center;
48}
49
50.placeholderImage {
51 width: 200px;
52 height: 300px;
53 background-color: rgba(var(--card-rgb), 0.3);
54 border-radius: 1.5rem;
55 display: flex;
56 align-items: center;
57 justify-content: center;
58 font-size: 5rem;
59}
60
61.featureList {
62 margin: 1.5rem 0;
63}
64
65.feature {
66 display: flex;
67 align-items: center;
68 margin-bottom: 1rem;
69}
70
71.icon {
72 margin-right: 1rem;
73 font-size: 1.25rem;
74}
75
76.downloadButton {
77 background-color: var(--primary-color);
78 color: white;
79 border: none;
80 padding: 0.75rem 1.5rem;
81 border-radius: 0.5rem;
82 font-size: 1rem;
83 font-weight: 600;
84 cursor: pointer;
85 transition: background-color 0.2s ease;
86 margin-top: 1rem;
87 padding-top: 1rem;
88}
89
90
91.downloadButton:hover {
92 background-color: var(--primary-hover);
93}
94
95.alternativeSection,
96.helpSection {
97 margin-top: 3rem;
98 padding: 2rem;
99 background-color: var(--card-background);
100 border-radius: 1rem;
101 border: 1px solid var(--tile-border);
102}
103
104.copyButton {
105 background-color: var(--secondary-color);
106 color: white;
107 border: none;
108 padding: 0.75rem 1.5rem;
109 border-radius: 0.5rem;
110 font-size: 1rem;
111 font-weight: 600;
112 cursor: pointer;
113 transition: background-color 0.2s ease;
114 margin-top: 1rem;
115}
116
117.copyButton:hover {
118 background-color: var(--secondary-hover);
119}
120
121.copied {
122 background-color: var(--success-color);
123}
124
125.copied:hover {
126 background-color: var(--success-hover);
127}
128
129/* Responsive styles */
130@media (max-width: 768px) {
131 .shortcutCard {
132 flex-direction: column;
133 }
134
135 .shortcutImage {
136 width: 100%;
137 padding: 2rem;
138 }
139
140 .placeholderImage {
141 width: 100%;
142 max-width: 200px;
143 height: 250px;
144 }
145
146 .title {
147 font-size: 2rem;
148 }
149}
150
151@media (max-width: 480px) {
152 .container {
153 padding: 1.5rem 1rem;
154 }
155
156 .title {
157 font-size: 1.75rem;
158 }
159
160 .subtitle {
161 font-size: 1rem;
162 }
163}