veryroundbird.house
+32
README.md
+32
README.md
···
1
+
<div style="text-align: center"><img src="https://github.com/rose-pine/rose-pine-theme/raw/main/assets/icon.png" alt="Rosé Pine Icon" /><h1>Rosé Pine for Anarchist Library</h1><p>All natural pine, faux fur and a bit of soho vibes for the classy minimalist</p><a href="https://github.com/rose-pine/rose-pine-theme" target="_blank" rel="external"><img src="https://camo.githubusercontent.com/240315546a4728d137750e04063612d6b1b28d643d3f237f7e243490b008df40/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f6d6d756e6974792d726f73c3a925323070696e652d3236323333613f6c6162656c436f6c6f723d313931373234266c6f676f3d646174613a696d6167652f7376672b786d6c3b6261736536342c50484e325a79423361575230614430694d6a55774969426f5a576c6e61485139496a497a4e794967646d6c6c64304a76654430694d434177494449314d4341794d7a636949475a7062477739496d3576626d5569494868746247357a50534a6f644852774f693876643364334c6e637a4c6d39795a7938794d4441774c334e325a79492b436a78775958526f49475139496b30784e6a45754d6a4933494445324d5334794e5446444d544d794c6a45314e4341784e6a6b754d445178494445784e4334354d4445674d546b344c6a6b794e4341784d6a49754e6a6b78494449794e7934354f5464444d54497a4c6a6b794e5341794d7a49754e6a417a494445794f4334324e546b674d6a4d314c6a4d7a4e6941784d7a4d754d6a59304944497a4e4334784d444a4d4d5467314c6a6b774e7941794d546b754f546b32517a49784f5334314f4455674d6a45774c6a6b334d6941794d7a6b754e5463674d5463324c6a4d314e4341794d7a41754e545132494445304d6934324e7a644d4d5459784c6a49794e7941784e6a45754d6a5578576949675a6d6c7362443069497a49304e6a49335169497650676f38634746306143426b50534a4e4f4467754d54677a4e6941784e546b754f546734517a45784e7934794e5463674d5459334c6a63334f4341784d7a51754e5445674d546b334c6a59324d6941784d6a59754e7a49674d6a49324c6a637a4e554d784d6a55754e4467324944497a4d53347a4e4341784d6a41754e7a55794944497a4e4334774e7a4d674d5445324c6a45304e7941794d7a49754f444d355444597a4c6a55774e4445674d6a45344c6a637a4d304d794f5334344d6a5930494449774f5334334d5341354c6a67304d446b30494445334e5334774f5449674d5467754f4459304f5341784e4445754e444530544467344c6a45344d7a59674d5455354c6a6b344f466f6949475a706247773949694d794e4459794e3049694c7a344b50484268644767675a443069545445344e6934344e6a63674d5463794c6a6b34517a45314d6934774d4449674d5463794c6a6b34494445794d7934334d7a63674d6a41784c6a49304e5341784d6a4d754e7a4d334944497a4e6934784d5446494d5467324c6a6733517a49794d5334334d7a59674d6a4d324c6a45784d5341794e5441674d6a41334c6a67304e6941794e5441674d5463794c6a6b34544445344e6934344e6a63674d5463794c6a6b34576949675a6d6c7362443069497a4d784e7a51345269497650676f38634746306143426b50534a4e4e6a4d754d544d794e7941784e7a49754f5468444f5463754f546b344e4341784e7a49754f5467674d5449324c6a49324d7941794d4445754d6a5131494445794e6934794e6a4d674d6a4d324c6a45784d5567324d7934784d304d794f4334794e6a51794944497a4e6934784d5445674c5445754e5449304d444e6c4c544132494449774e7934344e4459674d4341784e7a49754f54684d4e6a4d754d544d794e7941784e7a49754f5468614969426d615778735053496a4d7a45334e4468474969382b436a78775958526f49475139496b30784e7a45754e7a4533494463314c6a45794e6a4e444d5463784c6a63784e7941784d4445754d6a6332494445314d4334314d5467674d5449794c6a51334e5341784d6a51754d7a5935494445794d6934304e7a56444f5467754d6a45344f4341784d6a49754e446331494463334c6a41794d4449674d5441784c6a49334e6941334e7934774d6a4179494463314c6a45794e6a4e444e7a63754d4449774d6941304f4334354e7a593049446b344c6a49784f4467674d6a63754e7a63334f4341784d6a51754d7a5935494449334c6a63334e7a68444d5455774c6a55784f4341794e7934334e7a6334494445334d5334334d5463674e4467754f5463324e4341784e7a45754e7a4533494463314c6a45794e6a4e614969426d615778735053496a52554a4351304a424969382b436a78775958526f49475139496b30784e4451754d6a4533494467324c6a497a4e7a6c444d5459784c6a59304f5341314e6934774e444d79494445314d53347a4d444d674d5463754e444d794f5341784d6a45754d5441344944424d4d5441324c6a4132494449324c6a41324e4452444f4467754e6a4933494455324c6a49314f5341354f4334354e7a4d3249446b304c6a67324f5451674d5449354c6a45324f4341784d5449754d7a4179544445304e4334794d5463674f4459754d6a4d334f566f6949475a706247773949694e46516b4a44516b45694c7a344b50484268644767675a443069545445794e5334794f546b674e6a41754f5463344f554d784d5459754d6a6331494449334c6a4d774d5449674f4445754e6a55334e5341334c6a4d784e545933494451334c6a6b334f5463674d5459754d7a4d354e6b77324e43347a4d546b33494463334c6a4d794d5446444e7a4d754d7a517a4e6941784d5441754f546b35494445774e7934354e6a45674d544d774c6a6b344e4341784e4445754e6a4d35494445794d5334354e6b77784d6a55754d6a6b35494459774c6a6b334f446c614969426d615778735053496a52554a4351304a424969382b436a78775958526f49475139496b30784d6a51754f544932494459774c6a6b334f446c444d544d7a4c6a6b31494449334c6a4d774d5449674d5459344c6a55324e7941334c6a4d784e545933494449774d6934794e4455674d5459754d7a4d354e6b77784f4455754f544131494463334c6a4d794d5446444d5463324c6a67344d5341784d5441754f546b35494445304d6934794e6a4d674d544d774c6a6b344e4341784d4467754e546732494445794d5334354e6b77784d6a51754f544932494459774c6a6b334f446c614969426d615778735053496a52554a4351304a424969382b436a777663335a6e50676f3d267374796c653d666f722d7468652d6261646765" alt="Rosé Pine Community" /></div>
2
+
3
+
## What It's For
4
+
5
+
Reading on [Anarchist Library](https://theanarchistlibrary.org)! Which is wonderful but feels awful to read with your eyeballs. Or at least it could definitely be better.
6
+
7
+
And cuter.
8
+
9
+
## Usage
10
+
11
+
1. Install [Stylus](https://github.com/openstyles/stylus) for your browser, if you haven't already
12
+
2. Click the "View Raw" on the rose-pine-anarchistlibrary.user.css file in this repo
13
+
3. Stylus should ask you if you want to install it! So install it.
14
+
4. In the Stylus extension menu, click the gear icon next to the userstyle to select your favorite font. Note: if you do not have the fonts installed, you should install them. Links provided below.
15
+
16
+
## Fonts
17
+
18
+
I didn't use imported fonts from, say, Google Fonts, because I don't want to introduce potential security complications for reading on a very political site. So you'll need to download the fonts yourself and install them on your computer if you want to use something different!
19
+
20
+
* [Atkinson Hyperlegible](https://www.brailleinstitute.org/freefont/)
21
+
* [Geometria](https://befonts.com/geometria-font-family.html)
22
+
* [Lexend](https://www.lexend.com/)
23
+
* [Source Serif Pro](https://www.fontsquirrel.com/fonts/source-serif-pro)
24
+
* [IBM Plex Serif](https://github.com/IBM/plex) - look for a serif package under "Releases"
25
+
* [Space Mono](https://github.com/googlefonts/spacemono)
26
+
* [Sligoil](https://velvetyne.fr/fonts/sligoil/)
27
+
28
+
If you want to use a custom font from your own device, select "Custom" and enter your font information in the box! It should be formatted as a CSS font stack, so put multi-word fonts in quotes.
29
+
30
+
## Questions
31
+
32
+
Feel free to create issues if something looks wonky or email carly@veryroundbird.house with questions!
+421
rose-pine-anarchistlibrary.user.css
+421
rose-pine-anarchistlibrary.user.css
···
1
+
/* ==UserStyle==
2
+
@name rosé pine anarchism
3
+
@namespace veryroundbird.house
4
+
@version 1.0.0
5
+
@description Tweaks theanarchistlibrary.org to be more readable (larger text, fonts for legbility) and also more cute
6
+
@author Carly Smallbird
7
+
@var select font "Font" {
8
+
"system:System*": "font-family: system-ui, sans-serif",
9
+
"atkinson:Atkinson Hyperlegible": "'Atkinson Hyperlegible', sans-serif",
10
+
"geometria:Geometria": "'Geometria', sans-serif",
11
+
"lexend:Lexend": "'Lexend', sans-serif",
12
+
"sourceserif:Source Serif Pro": "'Source Serif Pro', serif",
13
+
"ibmplexserif:IBM Plex Serif": "'IBM Plex Serif', serif",
14
+
"spacemono:Space Mono": "'Space Mono', monospace",
15
+
"sligoil:Sligoil": "'Sligoil', monospace",
16
+
"custom:Custom": "var(--customfont)"
17
+
}
18
+
@var text customfont "Custom Font" ""
19
+
==/UserStyle== */
20
+
21
+
@-moz-document domain("theanarchistlibrary.org") {
22
+
:root {
23
+
--background: #faf4ed;
24
+
--surface: #fffaf3;
25
+
--overlay: #f2e9e1;
26
+
--muted: #9893a5;
27
+
--subtle: #797593;
28
+
--text: #575279;
29
+
--love: #b4637a;
30
+
--gold: #ea9d34;
31
+
--rose: #d7827e;
32
+
--pine: #286983;
33
+
--foam: #56949f;
34
+
--iris: #907aa9;
35
+
--highlightlow: #f4ede8;
36
+
--highlightmed: #dfdad9;
37
+
--highlighthi: #cecacd;
38
+
--darkencolor: #000000;
39
+
40
+
@media (prefers-color-scheme: dark) {
41
+
--background: #232136;
42
+
--surface: #2a273f;
43
+
--overlay: #393552;
44
+
--muted: #6e6a86;
45
+
--subtle: #908caa;
46
+
--text: #e0def4;
47
+
--love: #eb6f92;
48
+
--gold: #f6c177;
49
+
--rose: #ea9a97;
50
+
--pine: #3e8fb0;
51
+
--foam: #9ccfd8;
52
+
--iris: #c4a7e7;
53
+
--highlightlow: #2a283e;
54
+
--highlightmed: #44415a;
55
+
--highlighthi: #56526e;
56
+
--darkencolor: #FFFFFF;
57
+
}
58
+
}
59
+
60
+
/* GENERAL COMPONENTS */
61
+
62
+
body {
63
+
font-family: var(--font);
64
+
font-size: 16px;
65
+
background-color: var(--background);
66
+
color: var(--text);
67
+
}
68
+
69
+
a {
70
+
color: var(--love);
71
+
}
72
+
73
+
a:hover {
74
+
color: color-mix(in srgb-linear, var(--love), var(--darkencolor) 50%);
75
+
}
76
+
77
+
blockquote {
78
+
font-size: 20px;
79
+
font-style: italic;
80
+
border-left: 8px var(--rose) solid;
81
+
}
82
+
83
+
blockquote blockquote {
84
+
border-color: var(--gold);
85
+
}
86
+
87
+
hr {
88
+
border-color: var(--highlighthi);
89
+
}
90
+
91
+
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
92
+
color: var(--text);
93
+
font-family: var(--font);
94
+
}
95
+
96
+
h1, .h1 {
97
+
font-size: 2.5em;
98
+
}
99
+
100
+
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
101
+
color: var(--subtle);
102
+
}
103
+
104
+
.well,
105
+
.jumbotron {
106
+
background-image: none;
107
+
background-color: var(--surface);
108
+
border-color: var(--highlighthi);
109
+
}
110
+
111
+
.text-primary, .text-primary:hover {
112
+
color: var(--foam);
113
+
}
114
+
115
+
.fa-border {
116
+
border-width: 1px;
117
+
border-color: var(--highlighthi);
118
+
background-color: var(--surface);
119
+
}
120
+
121
+
.label-default {
122
+
background-color: var(--iris);
123
+
color: var(--background);
124
+
}
125
+
126
+
.badge {
127
+
background-color: var(--foam);
128
+
}
129
+
130
+
/* BUTTONS */
131
+
132
+
.btn-primary {
133
+
background-image: none;
134
+
background-color: var(--pine);
135
+
color: var(--background);
136
+
border-color: color-mix(in srgb-linear, var(--pine), var(--darkencolor) 20%);
137
+
}
138
+
139
+
.btn-primary:hover,
140
+
.btn-primary:focus {
141
+
background-color: color-mix(in srgb-linear, var(--pine), var(--darkencolor) 20%);
142
+
border-color: color-mix(in srgb-linear, var(--pine), var(--darkencolor) 40%);
143
+
}
144
+
145
+
.btn-default {
146
+
background-color: var(--rose);
147
+
color: var(--background);
148
+
border-color: color-mix(in srgb-linear, var(--rose), var(--darkencolor) 20%);
149
+
background-image: none;
150
+
text-shadow: none;
151
+
}
152
+
153
+
.btn-default:hover,
154
+
.btn-default:focus {
155
+
background-color: color-mix(in srgb-linear, var(--rose), var(--darkencolor) 20%);
156
+
border-color: color-mix(in srgb-linear, var(--rose), var(--darkencolor) 40%);
157
+
color: var(--background);
158
+
}
159
+
160
+
.btn-sm, .btn-group-sm > .btn {
161
+
font-size: 14px;
162
+
}
163
+
164
+
/* FORM CONTROLS */
165
+
166
+
legend {
167
+
border-color: var(--highlighthi);
168
+
color: var(--subtle);
169
+
}
170
+
171
+
.form-control {
172
+
border-color: var(--highlighthi);
173
+
color: var(--text);
174
+
}
175
+
176
+
.form-control::placeholder {
177
+
color: var(--muted);
178
+
}
179
+
180
+
.form-control::-moz-placeholder {
181
+
color: var(--muted);
182
+
}
183
+
184
+
.form-control::-webkit-placeholder {
185
+
color: var(--muted);
186
+
}
187
+
188
+
.form-control:focus {
189
+
border-color: var(--pine);
190
+
box-shadow: inset 0 1px 1px color-mix(in srgb-linear, var(--muted), transparent 25%), 0 0 8px color-mix(in srgb-linear, var(--pine), transparent 40%);
191
+
}
192
+
193
+
/* PAGE STRUCTURE */
194
+
195
+
.navbar-default {
196
+
background-image: none;
197
+
color: var(--text);
198
+
background-color: var(--surface);
199
+
border-color: var(--highlighthi);
200
+
}
201
+
202
+
b.caret {
203
+
border-top-color: var(--subtle);
204
+
}
205
+
206
+
.dropdown-toggle:hover b.caret {
207
+
border-top-color: var(--rose);
208
+
}
209
+
210
+
.navbar-default .navbar-nav > .open > a b.caret,
211
+
.navbar-default .navbar-nav > .active > a b.caret {
212
+
border-top-color: var(--text);
213
+
}
214
+
215
+
.amw-navlogo b.caret {
216
+
border-top-color: var(--foam);
217
+
}
218
+
219
+
.navbar-header .amw-navlogo {
220
+
position: relative;
221
+
display: block;
222
+
background-color: white;
223
+
224
+
@media (prefers-color-scheme: dark) {
225
+
background-color: black;
226
+
}
227
+
}
228
+
229
+
.navbar-header .amw-navlogo img {
230
+
@media (prefers-color-scheme: dark) {
231
+
filter: contrast(1.5) invert(1);
232
+
}
233
+
}
234
+
235
+
.navbar-header .amw-navlogo:before,
236
+
.navbar-header .amw-navlogo:after {
237
+
content: "";
238
+
display: block;
239
+
width: 100%;
240
+
height: 100%;
241
+
top: 0;
242
+
left: 0;
243
+
position: absolute;
244
+
}
245
+
246
+
.navbar-header .amw-navlogo:before {
247
+
background-color: var(--surface);
248
+
mix-blend-mode: multiply;
249
+
z-index: 5;
250
+
251
+
@media (prefers-color-scheme: dark) {
252
+
mix-blend-mode: screen;
253
+
z-index: 3;
254
+
}
255
+
}
256
+
257
+
.navbar-header .amw-navlogo:after {
258
+
background-color: var(--text);
259
+
mix-blend-mode: screen;
260
+
z-index: 3;
261
+
262
+
@media (prefers-color-scheme: dark) {
263
+
mix-blend-mode: multiply;
264
+
z-index: 5;
265
+
}
266
+
}
267
+
268
+
.navbar-default .navbar-nav > li > a {
269
+
color: var(--subtle);
270
+
}
271
+
272
+
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .active > a {
273
+
color: var(--text);
274
+
background-image: none;
275
+
background-color: var(--overlay);
276
+
box-shadow: none;
277
+
}
278
+
279
+
.navbar-default .navbar-nav > .open > a,
280
+
.navbar-default .navbar-nav > .open > a:hover,
281
+
.navbar-default .navbar-nav > .open > a:focus {
282
+
color: var(--rose);
283
+
}
284
+
285
+
.navbar-default .navbar-nav > .open > a .caret,
286
+
.navbar-default .navbar-nav > .open > a:hover .caret,
287
+
.navbar-default .navbar-nav > .open > a:focus .caret {
288
+
border-top-color: var(--rose);
289
+
}
290
+
291
+
.dropdown-menu {
292
+
background-color: var(--surface);
293
+
border-color: var(--highlighthi);
294
+
font-size: 16px;
295
+
}
296
+
297
+
.dropdown-menu li.divider {
298
+
background-color: var(--highlighthi);
299
+
margin: 0;
300
+
}
301
+
302
+
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
303
+
background-image: none;
304
+
background-color: var(--love);
305
+
color: var(--background);
306
+
}
307
+
308
+
.dropdown-menu > li > a {
309
+
color: var(--text);
310
+
padding: 6px 20px;
311
+
}
312
+
313
+
.dropdown-menu > li > a:hover,
314
+
.dropdown-menu > li > a:focus {
315
+
background-image: none;
316
+
background-color: var(--highlightmed);
317
+
color: var(--text);
318
+
}
319
+
320
+
.dropdown-header {
321
+
color: var(--subtle);
322
+
text-transform: uppercase;
323
+
font-size: 14px;
324
+
}
325
+
326
+
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
327
+
color: var(--rose);
328
+
}
329
+
330
+
.ui-autocomplete {
331
+
background-color: var(--surface);
332
+
}
333
+
334
+
.ui-menu-item-wrapper {
335
+
padding: 5px 10px;
336
+
}
337
+
338
+
.breadcrumb {
339
+
background-color: var(--surface);
340
+
color: var(--muted);
341
+
}
342
+
343
+
.nav-tabs a,
344
+
.nav-pills a,
345
+
.breadcrumb a,
346
+
.pager a {
347
+
color: var(--muted);
348
+
}
349
+
350
+
.breadcrumb > .active {
351
+
color: var(--subtle);
352
+
}
353
+
354
+
.breadcrumb > li + li::before {
355
+
color: var(--muted);
356
+
}
357
+
358
+
.page-header {
359
+
border-color: var(--highlighthi);
360
+
}
361
+
362
+
p.tableofcontentline a {
363
+
color: var(--subtle);
364
+
}
365
+
366
+
#downloadformats a {
367
+
color: var(--foam);
368
+
}
369
+
370
+
.list-group-item {
371
+
background-color: var(--surface);
372
+
color: var(--subtle);
373
+
border-color: var(--highlighthi);
374
+
}
375
+
376
+
a.list-group-item, button.list-group-item {
377
+
color: var(--subtle);
378
+
}
379
+
380
+
a.list-group-item:hover,
381
+
button.list-group-item:hover,
382
+
a.list-group-item:focus,
383
+
button.list-group-item:focus {
384
+
background-color: var(--highlightlow);
385
+
color: var(--text);
386
+
}
387
+
388
+
.pagination > li > a, .pagination > li > span {
389
+
background-color: var(--highlightmed);
390
+
color: var(--text);
391
+
border-color: var(--highlighthi);
392
+
}
393
+
394
+
.pagination > li > a:hover,
395
+
.pagination > li > span:hover,
396
+
.pagination > li > a:focus,
397
+
.pagination > li > span:focus {
398
+
background-color: var(--foam);
399
+
color: var(--background);
400
+
}
401
+
402
+
.pagination > .active > a,
403
+
.pagination > .active > span,
404
+
.pagination > .active > a:hover,
405
+
.pagination > .active > span:hover,
406
+
.pagination > .active > a:focus,
407
+
.pagination > .active > span:focus {
408
+
background-color: var(--pine);
409
+
color: var(--background);
410
+
}
411
+
412
+
.footer {
413
+
background-color: var(--surface);
414
+
color: var(--text);
415
+
padding-bottom: 20px;
416
+
}
417
+
418
+
.footer a {
419
+
color: var(--subtle);
420
+
}
421
+
}