A location based messaging app built on ATProto.
joelh.social
1/* Custom Font Faces */
2@font-face {
3 font-family: 'Optimus Princeps';
4 src: url('../fonts/optimusprinceps/OptimusPrinceps.ttf') format('truetype');
5 font-weight: normal;
6 font-style: normal;
7 font-display: swap;
8}
9
10@font-face {
11 font-family: 'Optimus Princeps';
12 src: url('../fonts/optimusprinceps/OptimusPrincepsSemiBold.ttf') format('truetype');
13 font-weight: 600;
14 font-style: normal;
15 font-display: swap;
16}
17
18@font-face {
19 font-family: 'Honoka Mincho';
20 src: url('../fonts/honoka-mincho/honokamin.ttf') format('truetype');
21 font-weight: normal;
22 font-style: normal;
23 font-display: swap;
24}
25
26/* Bootstrap Dark Theme with Dark Amber Palette */
27:root {
28 /* Base dark background colors */
29 --bs-body-bg: #000000;
30 --bs-body-color: #f4f1ec;
31 --bs-border-color: #1a1a1a;
32 --bs-secondary-bg: #0a0a0a;
33
34 /* Dark amber primary colors */
35 --bs-primary: #feb204;
36 --bs-primary-rgb: 254, 178, 4;
37 --bs-primary-bg-subtle: #2a1f0a;
38 --bs-primary-border-subtle: #4a3515;
39 --bs-primary-text-emphasis: #ffd22b;
40
41 --bs-link-color-rgb: 254, 178, 4;
42 --bs-link-hover-color-rgb: 255, 200, 50;
43
44 /* Secondary colors with amber undertones */
45 --bs-secondary: #2a2a2a;
46 --bs-secondary-rgb: 42, 42, 42;
47 --bs-secondary-bg-subtle: #0a0a0a;
48 --bs-secondary-border-subtle: #1a1a1a;
49 --bs-secondary-text-emphasis: #8b7355;
50
51 /* Success colors using warm greens */
52 --bs-success: #4a5d23;
53 --bs-success-rgb: 74, 93, 35;
54 --bs-success-bg-subtle: #0f1505;
55 --bs-success-border-subtle: #1a2a0a;
56 --bs-success-text-emphasis: #6b8632;
57
58 /* Info colors using cool amber tones */
59 --bs-info: #8b6914;
60 --bs-info-rgb: 139, 105, 20;
61 --bs-info-bg-subtle: #151105;
62 --bs-info-border-subtle: #2a1f0a;
63 --bs-info-text-emphasis: #b8911c;
64
65 /* Warning colors using darker amber tones */
66 --bs-warning: #ff8503;
67 --bs-warning-rgb: 255, 133, 3;
68 --bs-warning-bg-subtle: #1a0f00;
69 --bs-warning-border-subtle: #2a1a00;
70 --bs-warning-text-emphasis: #feb204;
71
72 /* Danger colors using deep red-amber */
73 --bs-danger: #d53600;
74 --bs-danger-rgb: 213, 54, 0;
75 --bs-danger-bg-subtle: #1a0500;
76 --bs-danger-border-subtle: #2a0a00;
77 --bs-danger-text-emphasis: #ff6b2b;
78
79 /* Light and dark theme colors */
80 --bs-light: #f8dfc1;
81 --bs-light-bg-subtle: #1a1a1a;
82 --bs-light-border-subtle: #1a1a1a;
83 --bs-light-text-emphasis: #d4c4a0;
84
85 --bs-dark: #0a0a0a;
86 --bs-dark-rgb: 10, 10, 10;
87 --bs-dark-bg-subtle: #000000;
88 --bs-dark-border-subtle: #1a1a1a;
89 --bs-dark-text-emphasis: #2a2a2a;
90}
91
92/* Typography using custom fonts */
93body {
94 font-family: 'Honoka Mincho', 'Georgia', 'Times New Roman', serif;
95}
96
97h1, h2, h3, h4, h5, h6,
98.h1, .h2, .h3, .h4, .h5, .h6 {
99 font-family: 'Optimus Princeps', 'Georgia', serif;
100 font-weight: 600;
101}
102