social bookmarking for atproto
hexmani.ac
1/*
2 * clippr: a social bookmarking service for the AT Protocol
3 * Copyright (c) 2025 clippr contributors.
4 * SPDX-License-Identifier: AGPL-3.0-only
5 */
6
7:root {
8 color-scheme: dark light;
9 font-family: Arial, sans-serif;
10}
11
12@media (prefers-color-scheme: dark) {
13 :root {
14 --bg: #222 !important;
15 --fg: #fff !important;
16 --controls-bg: #2B2A33 !important;
17 --controls-bg-hover: #52525E !important;
18 --controls-border: #8F8F9D !important;
19 }
20}
21
22@media (prefers-color-scheme: light) {
23 :root {
24 --bg: #fff !important;
25 --fg: #222 !important;
26 --controls-bg: #E9E9ED !important;
27 --controls-bg-hover: #D0D0D7 !important;
28 --controls-border: #8F8F9D !important;
29 }
30}
31
32body {
33 background-color: var(--bg);
34 color: var(--fg);
35 width: 70vw;
36 margin: 1rem auto;
37}
38
39header {
40 display: flex;
41 justify-content: space-between;
42 align-items: center;
43 padding: 0 1rem;
44 border-bottom: 1px solid var(--fg);
45
46 #header-left {
47 font-weight: bold;
48 }
49
50 #header-right nav {
51 display: inline-flex;
52 align-items: center;
53 justify-content: space-between;
54 gap: 1rem;
55 }
56}
57
58main {
59 margin: 1rem;
60}
61
62#main-headings {
63 h1 {
64 margin: 0;
65 }
66
67 margin: 1rem 0 1rem 0;
68}
69
70#page-location {
71 display: flex;
72 align-items: start;
73 gap: 0.5rem;
74 padding: 0 0 0 0.5rem;
75 border: 1px solid var(--fg);
76
77 p {
78 margin: 0;
79 padding: 0.5rem 0;
80 }
81}
82
83#page-location-last {
84 font-weight: bold;
85}
86
87#content {
88 display: flex;
89 flex-direction: row;
90 gap: 2rem;
91 justify-content: space-between;
92}
93
94#main-content {
95 h3 {
96 margin: 0;
97 }
98
99 p {
100 line-height: 1.5;
101 }
102}
103
104#sidebar {
105 display: flex;
106 flex-direction: column;
107 gap: 1rem;
108}
109
110.centered {
111 text-align: center;
112 margin: 0 auto;
113}
114
115.sidebar-item {
116 border: 1px solid var(--fg);
117 display: flex;
118 flex-direction: column;
119 align-items: center;
120 justify-content: space-between;
121 padding: 0.5rem;
122 text-align: center;
123
124 h3 {
125 margin: 0.5rem 0 1rem 0;
126 }
127
128 h4 {
129 margin: 0;
130 }
131}
132
133.stat-counter {
134 font-weight: bold;
135 font-size: 1.5rem;
136 margin: 0.5rem 0;
137}
138
139form {
140 display: flex;
141 flex-direction: column;
142 align-items: center;
143 gap: 0.5rem;
144
145 input {
146 padding: 0.25rem;
147 margin: 0.5rem;
148 }
149}
150
151button {
152 padding: 0.25rem 2rem;
153 margin: 0 0 0.5rem 0;
154}
155
156footer {
157 display: flex;
158 justify-content: space-between;
159 align-items: center;
160 padding: 0 1rem;
161 border-top: 1px solid var(--fg);
162
163 #footer-right nav {
164 display: inline-flex;
165 align-items: center;
166 justify-content: space-between;
167 gap: 1rem;
168 }
169}
170
171a {
172 text-decoration: none;
173 color: #8c8cfe;
174}
175
176a:hover {
177 font-style: italic;
178 font-weight: bold;
179 cursor: pointer;
180}
181
182a:visited {
183 color: #8c8cfe;
184}
185
186.silent-link {
187 color: var(--fg);
188
189 &:hover {
190 font-style: revert;
191 font-weight: revert;
192 }
193}
194
195#profile-view {
196 display: flex;
197 flex-direction: row;
198 align-items: center;
199 gap: 2rem;
200
201 div {
202 text-align: left;
203 }
204
205 * {
206 margin: 0.5rem 0;
207 }
208}
209
210.profile-picture {
211 border-radius: 50%;
212 width: 150px;
213 height: 150px;
214}
215
216form input[type="file"] {
217 display: none;
218}
219
220.file-upload {
221 border: 1px solid var(--controls-border);
222 display: inline-block;
223 padding: 6px 12px;
224 background-color: var(--controls-bg);
225 border-radius: 6px;
226 margin: 0.5rem 0;
227}
228
229.file-upload:hover {
230 background-color: var(--controls-bg-hover);
231}
232
233textarea {
234 padding: 0.5rem;
235 width: 275px;
236 height: 100px;
237 font-family: Arial, sans-serif;
238}
239
240@media (max-width: 768px) {
241 body {
242 width: 90vw;
243 }
244
245 header {
246 flex-direction: column;
247 padding-bottom: 1rem;
248 }
249
250 #content {
251 flex-direction: column;
252 }
253
254 #profile-view {
255 flex-direction: column;
256 align-items: center;
257 gap: 0.1rem;
258 }
259
260 footer {
261 flex-direction: column;
262 text-align: center;
263 }
264}