grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
1*,
2*::before,
3*::after {
4 box-sizing: border-box;
5 margin: 0;
6 padding: 0;
7}
8
9:root {
10 --bg-root: #080b12;
11 --bg-surface: #0f1419;
12 --bg-elevated: #161d27;
13 --bg-hover: #1c2633;
14 --border: #1e293b;
15 --border-light: #2a3a4e;
16 --grain: #85a1ff;
17 --grain-btn: rgb(74, 93, 249);
18 --grain-btn-dim: rgb(60, 78, 220);
19 --grain-dim: #6b8bef;
20 --grain-glow: rgba(133, 161, 255, 0.15);
21 --text-primary: #e2e8f0;
22 --text-secondary: #94a3b8;
23 --text-muted: #64748b;
24 --text-faint: #475569;
25 --danger: #f87171;
26 --danger-bg: #1c1117;
27 --col-left: 78px;
28 --col-right: 320px;
29 --col-center: minmax(0, 600px);
30 --font-display: "Syne", sans-serif;
31 --font-body: "Plus Jakarta Sans", -apple-system, sans-serif;
32}
33
34html {
35 background: var(--bg-root);
36 color: var(--text-primary);
37 overflow-x: hidden;
38}
39
40html:not(.fonts-loaded) body {
41 opacity: 0;
42}
43html.fonts-loaded body {
44 opacity: 1;
45 transition: opacity 0.1s;
46}
47
48body {
49 font-family: var(--font-body);
50 font-size: 15px;
51 line-height: 1.5;
52 min-height: 100vh;
53 overscroll-behavior: none;
54}
55
56a {
57 color: inherit;
58 text-decoration: none;
59}
60
61@media (max-width: 600px) {
62 html,
63 body {
64 overflow: hidden;
65 position: fixed;
66 inset: 0;
67 min-height: 0;
68 }
69}
70
71@keyframes spin {
72 to {
73 transform: rotate(360deg);
74 }
75}
76
77@keyframes fadeIn {
78 from {
79 opacity: 0;
80 }
81}
82
83@keyframes slideUp {
84 from {
85 transform: translateY(12px);
86 opacity: 0;
87 }
88}