a mini social media app for small communities
emmeline.girlkisser.top
1@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&family=Oxygen+Mono&display=swap');
2
3:root {
4 /* palette */
5 /* greys */
6 --p-black: #333333;
7 --p-grey0: #414141;
8 --p-grey1: #4a4a4a;
9 --p-grey2: #4f4f4f;
10 --p-grey3: #5c5c5c;
11 --p-grey4: #5f5f5f;
12 --p-white: #e7e7e7;
13 /* rainbow */
14 --p-red: #faa; /* == light red */
15 --p-orange: #fa7;
16 --p-yellow: #ffa; /* == light-orange */
17 --p-teal: #7fa;
18 --p-green: #af7;
19 --p-blue: #7af;
20 --p-purple: #a7f;
21 --p-pink: #f7a;
22 /* light rainbow */
23 --p-light-red: #faa;
24 --p-light-blue: #aaf;
25 --p-light-green: #afa;
26 --p-light-orange: #ffa; /* == yellow */
27 --p-light-purple: #faf;
28 --p-light-blue: #aff;
29
30 /* colours */
31 --c-bg: var(--p-black);
32 --c-panel-bg: var(--p-grey0);
33 --c-panel-border: var(--p-grey2);
34 --c-panel2-bg: var(--p-grey1);
35 --c-panel2-border: var(--p-grey3);
36 --c-panel3-bg: var(--p-grey2);
37 --c-panel3-border: var(--p-grey4);
38 --c-fg: var(--p-white);
39 --c-nsfw-border: var(--p-orange);
40 --c-link: var(--p-blue);
41 --c-link-hover: var(--p-light-blue);
42 --c-accent: var(--p-light-green);
43 --c-notify-ok: var(--p-light-green);
44 --c-notify-error: var(--p-light-red);
45
46 /* text */
47 --t-font: 'Onest', Arial, serif;
48 --t-post-font: Garamond, 'Times New Roman', var(--t-font);
49 --t-mono-font: 'Oxygen Mono', monospace;
50 --t-h-font: 'Oxygen Mono', var(--t-post-font);
51 --t-font-weight: 400;
52 --t-font-style: normal;
53 --t-font-size: 20px;
54
55 /* layout */
56 --l-body-padding: 16px;
57 --l-body-gap: 12px;
58 --l-body-width: 75vw;
59 --l-border-width: 2px;
60 --l-border-style: solid;
61 --l-border-radius: 0px;
62}
63
64html {
65 padding: 0;
66 offset: 0;
67 margin: 0;
68
69 width: 100vw;
70 overflow-x: hidden;
71
72 display: flex;
73 flex-direction: column;
74 align-items: center;
75
76 background-color: var(--c-bg);
77 color: var(--c-fg);
78
79 font-family: var(--t-font);
80 font-weight: var(--t-font-weight);
81 font-style: var(--t-font-style);
82 font-size: var(--t-font-size);
83}
84
85body {
86 padding: var(--l-body-padding) 0 var(--l-body-padding) 0;
87 offset: 0;
88 margin: 0;
89 width: var(--l-body-width);
90}
91
92header {
93 padding-bottom: var(--l-body-padding);
94}
95
96footer {
97 padding-top: var(--l-body-padding);
98}
99
100main {
101 padding: var(--l-body-padding);
102 background-color: var(--c-panel-bg);
103 border: var(--l-border-width) var(--l-border-style) var(--c-panel-border);
104 border-radius: var(--l-border-radius);
105
106 display: flex;
107 flex-direction: column;
108 gap: var(--l-body-gap);
109}
110
111form {
112 display: flex;
113 flex-direction: column;
114 gap: var(--l-body-gap);
115}
116
117button:hover {
118 cursor: pointer;
119}
120
121input,
122textarea,
123button {
124 background-color: var(--c-panel-bg);
125 color: var(--c-fg);
126
127 border: var(--l-border-width) var(--l-border-style) var(--c-accent);
128 border-radius: var(--l-border-radius);
129 padding: 6px;
130
131 font-family: var(--t-font);
132}
133
134input:hover,
135textarea:hover,
136button:hover {
137 border-color: var(--c-fg);
138}
139
140input:focus,
141textarea:focus,
142button:focus {
143 background-color: var(--c-accent);
144 color: var(--c-bg);
145}
146
147h1, h2, h3, h4, h5, h6, p {
148 margin: 0;
149}
150
151h1, header, footer {
152 font-family: var(--t-h-font);
153}
154
155a {
156 color: var(--c-link);
157 transition: 0.15s linear color;
158}
159
160a:hover {
161 color: var(--c-link-hover);
162}
163
164hr {
165 width: 100%;
166}
167
168pre {
169 font-family: var(--t-mono-font);
170}
171
172.post {
173 border: none;
174 border-left: var(--l-border-width) var(--l-border-style) var(--c-fg);
175}
176
177.post>pre {
178 font-family: var(--t-post-font);
179}
180
181.post + .post,
182.notification + .notification {
183 margin-top: 18px;
184}
185
186form:not(.form-inline),
187#recent-posts,
188#pinned-posts {
189 padding: 16px 24px 16px 24px;
190 background-color: var(--c-panel2-bg);
191 border: var(--l-border-width) var(--l-border-style) var(--c-panel2-border);
192 border-radius: var(--l-border-radius);
193}
194
195#errors:empty {
196 display: none;
197 visibility: hidden;
198}
199
200#errors {
201 display: flex;
202 flex-direction: column;
203 gap: var(--l-body-gap);
204}
205
206#errors>p {
207 background-color: var(--c-panel3-bg);
208 border: var(--l-border-width) var(--l-border-style) var(--c-panel3-border);
209 border-radius: var(--l-border-radius);
210
211 padding: 8px;
212 width: calc(100% - 16px);
213
214 display: inline-flex;
215 align-items: center;
216 justify-content: center;
217 gap: 12px;
218}
219
220#errors>p>button {
221 border-color: inherit;
222 flex-grow: 0;
223}
224
225#errors>p>button:hover {
226 border-color: var(--c-fg);
227}
228
229#errors>p>span {
230 flex-grow: 1;
231}
232
233#errors>p.ok {
234 border-color: var(--c-notify-ok);
235}
236
237#errors>p.error {
238 border-color: var(--c-notify-error);
239}