A social RSS reader built on the AT Protocol.
glean.at
glean
atproto
atmosphere
rss
feed
social
app
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5@layer base {
6 :root {
7 color-scheme: dark;
8 --spot-bg: #0a1814;
9 --spot-surface: #152b24;
10 --spot-hover: #1e3c33;
11 --spot-hover-50: rgba(30,60,51,0.5);
12 --spot-text: #f2f2f2;
13 --spot-secondary: rgba(255,255,255,0.78);
14 --spot-body: rgba(255,255,255,0.92);
15 --spot-muted: rgba(255,255,255,0.42);
16 --spot-divider: rgba(255,255,255,0.12);
17 --spot-divider-30: rgba(255,255,255,0.16);
18 --spot-outline: rgba(255,255,255,0.30);
19 --spot-placeholder: rgba(255,255,255,0.45);
20 --spot-active-bg: #ffffff;
21 --spot-active-text: #1E3932;
22 --spot-shadow: 0 1px 2px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.20);
23 --spot-shadow-heavy: 0 4px 8px rgba(0,0,0,0.35), 0 12px 24px rgba(0,0,0,0.25);
24 --spot-shadow-elevated: 0 8px 16px rgba(0,0,0,0.40), 0 24px 48px rgba(0,0,0,0.30);
25 }
26
27 [data-theme="light"] {
28 color-scheme: light;
29 --spot-bg: #f2f0eb;
30 --spot-surface: #ffffff;
31 --spot-hover: #edebe9;
32 --spot-hover-50: rgba(237,235,233,0.5);
33 --spot-text: rgba(0,0,0,0.87);
34 --spot-secondary: rgba(0,0,0,0.58);
35 --spot-body: rgba(0,0,0,0.70);
36 --spot-muted: rgba(0,0,0,0.25);
37 --spot-divider: rgba(0,0,0,0.08);
38 --spot-divider-30: rgba(0,0,0,0.12);
39 --spot-outline: rgba(0,0,0,0.15);
40 --spot-placeholder: rgba(0,0,0,0.30);
41 --spot-active-bg: #1E3932;
42 --spot-active-text: #ffffff;
43 --spot-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
44 --spot-shadow-heavy: 0 4px 12px rgba(0,0,0,0.08), 0 12px 28px rgba(0,0,0,0.06);
45 --spot-shadow-elevated: 0 8px 24px rgba(0,0,0,0.10), 0 24px 48px rgba(0,0,0,0.08);
46 }
47}
48
49@layer components {
50 .article-body h1 { @apply text-2xl font-bold mt-8 mb-3 text-spot-text }
51 .article-body h2 { @apply text-xl font-semibold mt-6 mb-2 text-spot-text }
52 .article-body h3 { @apply text-lg font-semibold mt-5 mb-2 text-spot-text }
53 .article-body h4 { @apply text-base font-semibold mt-4 mb-1 text-spot-text }
54 .article-body p { @apply my-3 leading-7 text-spot-body }
55 .article-body ul { @apply list-disc pl-6 my-3 text-spot-body }
56 .article-body ol { @apply list-decimal pl-6 my-3 text-spot-body }
57 .article-body li { @apply my-1 leading-7 }
58 .article-body blockquote { @apply border-l-4 border-spot-divider pl-4 italic text-spot-secondary my-4 }
59 .article-body pre { @apply bg-spot-bg text-spot-body rounded-lg p-4 overflow-x-auto my-4 text-sm leading-6 }
60 .article-body code { @apply bg-spot-surface text-spot-body px-1.5 py-0.5 rounded text-sm font-mono }
61 .article-body pre code { @apply bg-transparent text-spot-body p-0 }
62 .article-body img { @apply rounded-lg max-w-full h-auto my-4 }
63 .article-body figure { @apply my-4 }
64 .article-body figcaption { @apply text-sm text-spot-secondary text-center mt-2 }
65 .article-body a { @apply text-spot-green underline hover:brightness-110 }
66 .article-body table { @apply w-full border-collapse my-4 }
67 .article-body th { @apply border border-spot-divider px-3 py-2 bg-spot-surface font-semibold text-left text-spot-text }
68 .article-body td { @apply border border-spot-divider px-3 py-2 text-spot-body }
69 .article-body hr { @apply border-spot-divider my-6 }
70 .article-body iframe, .article-body video { @apply rounded-lg my-4 max-w-full }
71 .article-body iframe[src*="youtube.com"], .article-body iframe[src*="youtube-nocookie.com"], .article-body iframe[src*="vimeo.com"], .article-body iframe[src*="spotify.com"], .article-body iframe[src*="soundcloud.com"], .article-body iframe[src*="bandcamp.com"] { @apply w-full aspect-video }
72 .article-body del { @apply line-through text-spot-secondary }
73 .article-body mark { @apply bg-spot-orange/30 px-1 rounded }
74 .article-body .annotation-highlight { @apply bg-spot-green/25 border-b-2 border-spot-green/50 px-0.5 rounded-sm transition-colors }
75 .article-body .annotation-highlight:hover { @apply bg-spot-green/40 }
76}
77
78@layer utilities {
79 .line-clamp-2 {
80 display: -webkit-box;
81 -webkit-line-clamp: 2;
82 -webkit-box-orient: vertical;
83 overflow: hidden;
84 }
85}
86
87body {
88 font-family: 'Inter', 'Helvetica Neue', helvetica, arial, sans-serif;
89 letter-spacing: -0.01em;
90}
91
92.sidebar-link {
93 transition: color 0.15s;
94}
95.sidebar-link:hover {
96 color: var(--spot-text);
97}
98
99
100
101::-webkit-scrollbar { width: 8px; }
102::-webkit-scrollbar-track { background: var(--spot-bg); }
103::-webkit-scrollbar-thumb { background: var(--spot-muted); border-radius: 6px; }
104::-webkit-scrollbar-thumb:hover { background: var(--spot-outline); }
105
106.htmx-swapping {
107 opacity: 0;
108 transition: opacity 0.3s ease-out;
109}