atproto blogging
nonbinary.computer
1/* Profile display - sidebar on desktop, header on mobile */
2
3.profile-display {
4 margin-top: 0.25rem;
5 max-width: 100%;
6 /* No background - same plane as page */
7}
8
9.profile-banner {
10 max-width: 100%;
11 height: 150px;
12 overflow: hidden;
13}
14
15.profile-banner img {
16 width: 100%;
17 height: 100%;
18 object-fit: cover;
19 margin: 0;
20 border-radius: 0;
21}
22
23.profile-content {
24 padding: 1.25rem;
25}
26
27.profile-identity {
28 margin-bottom: 1.25rem; /* Grid unit */
29}
30
31.profile-identity .avatar {
32 width: 120px;
33 height: 120px;
34 margin-top: -5rem;
35 margin-bottom: 1rem;
36}
37
38.profile-name-section {
39 margin-bottom: 0.75rem;
40}
41
42.profile-display-name {
43 font-size: 1.5rem;
44 font-weight: 600;
45 color: var(--color-text);
46 margin: 0 0 0.25rem 0;
47 font-family: var(--font-heading);
48}
49
50.profile-pronouns {
51 font-size: 1rem;
52 font-weight: 400;
53 color: var(--color-muted);
54}
55
56.profile-handle {
57 font-size: 0.95rem;
58 color: var(--color-subtle);
59 margin-bottom: 0rem;
60}
61
62.profile-location {
63 font-size: 0.9rem;
64 color: var(--color-muted);
65}
66
67.profile-description {
68 color: var(--color-text);
69 font-size: 0.875rem;
70 line-height: 1.5;
71 margin-top: 0.75rem;
72 white-space: pre-wrap;
73}
74
75.profile-stats {
76 display: grid;
77 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
78 gap: 0.25rem;
79 padding: 1.25rem 0;
80 margin: 1.25rem 0;
81 border-top: 1.5px dashed var(--color-border);
82 border-bottom: 1.5px dashed var(--color-border);
83}
84
85.profile-stat {
86 display: flex;
87 flex-direction: column;
88 gap: 0.25rem;
89}
90
91.profile-stat-label {
92 font-size: 0.85rem;
93 color: var(--color-subtle);
94}
95
96.profile-stat-value {
97 font-size: 1.25rem;
98 font-weight: 600;
99 color: var(--color-primary);
100}
101
102.profile-links {
103 display: flex;
104 flex-direction: column;
105 gap: 0.5rem;
106}
107
108.profile-link {
109 color: var(--color-link);
110 text-decoration: none;
111 font-size: 0.9rem;
112 transition: color 0.15s ease;
113}
114
115.profile-link:hover {
116 color: var(--color-primary);
117}
118
119.profile-link-platform {
120 display: inline;
121 font-weight: 500;
122}
123
124.profile-loading {
125 padding: 2rem;
126 text-align: center;
127 color: var(--color-muted);
128}
129
130/* Mobile layout */
131@media (max-width: 768px) {
132 .profile-identity .avatar {
133 width: 80px;
134 height: 80px;
135 }
136
137 .profile-display-name {
138 font-size: 1.25rem;
139 }
140}
141
142/* Mobile: header gets top and bottom borders */
143@media (max-width: 1400px) {
144 .profile-display {
145 border-top: 1.5px dashed var(--color-border);
146 border-bottom: 1.5px solid var(--color-border);
147 }
148
149 .profile-content {
150 display: flex;
151 flex-direction: row;
152 justify-content: space-between;
153 }
154
155 .profile-extras {
156 padding-inline-start: 1rem;
157 border-inline-start: 1.5px dashed var(--color-border);
158 }
159
160 .profile-block {
161 display: flex;
162 flex-direction: row;
163 }
164
165 .profile-stats {
166 border-top: none;
167 }
168
169 .profile-identity .avatar {
170 margin-bottom: 0rem;
171 }
172
173 .profile-description {
174 margin-top: 0rem;
175 }
176
177 .profile-name-section {
178 margin-inline-start: 1rem;
179 margin-top: -0.5rem;
180 }
181}
182
183@media (prefers-color-scheme: dark) {
184 .profile-display {
185 background-color: var(--color-surface);
186 border: 1px solid var(--color-border);
187 }
188}
189
190/* Desktop: sidebar gets top and right borders */
191@media (min-width: 1400px) {
192 .profile-display {
193 border-top: 1.5px solid var(--color-border);
194 border-inline-end: 1.5px solid var(--color-border);
195 }
196}
197
198/* Profile Invites Section */
199.profile-invites {
200 margin-top: 1.25rem;
201 padding-top: 1.25rem;
202 border-top: 1.5px dashed var(--color-border);
203}
204
205.profile-invites-header {
206 font-size: 0.9rem;
207 font-weight: 600;
208 color: var(--color-text);
209 margin: 0 0 0.75rem 0;
210 font-family: var(--font-heading);
211}
212
213.profile-invites-list {
214 display: flex;
215 flex-direction: column;
216 gap: 0.75rem;
217}
218
219.profile-invite-card {
220 padding: 0.75rem;
221 border: 1px solid var(--color-border);
222 border-radius: 4px;
223 background: var(--color-surface);
224}
225
226.profile-invite-from {
227 font-size: 0.85rem;
228 color: var(--color-subtle);
229 margin-bottom: 0.5rem;
230}
231
232.profile-invite-did {
233 color: var(--color-text);
234 font-family: var(--font-mono);
235 font-size: 0.8rem;
236}
237
238.profile-invite-message {
239 font-size: 0.85rem;
240 color: var(--color-muted);
241 margin: 0.5rem 0;
242 font-style: italic;
243}
244
245.profile-invite-error {
246 font-size: 0.8rem;
247 color: var(--color-error, #e53935);
248 margin-bottom: 0.5rem;
249}
250
251.profile-invite-actions {
252 margin-top: 0.5rem;
253}
254
255.profile-invite-accepted {
256 font-size: 0.85rem;
257 color: var(--color-success, #43a047);
258 font-weight: 500;
259}