My website
1/* host-theme.css */
2
3at-inlay-root {
4 --text-primary: #272727;
5 --text-body: #555;
6 --text-secondary: #999;
7
8 font-family: "Inter", system-ui, sans-serif;
9 font-size: 15px;
10 line-height: 1.5;
11 color: var(--text-primary);
12 background: #fff;
13 border-radius: 12px;
14 -webkit-font-smoothing: antialiased;
15}
16
17at-inlay-root[data-page],
18at-inlay-root[data-full] {
19 border-radius: 0;
20}
21
22/* Gap */
23
24:is(org-atsui-stack, org-atsui-row, org-atsui-grid)[gap="none"] {
25 gap: 0;
26}
27:is(org-atsui-stack, org-atsui-row, org-atsui-grid)[gap="small"] {
28 gap: 6px;
29}
30:is(org-atsui-stack, org-atsui-row, org-atsui-grid)[gap="medium"] {
31 gap: 12px;
32}
33:is(org-atsui-stack, org-atsui-row, org-atsui-grid)[gap="large"] {
34 gap: 24px;
35}
36
37/* Type */
38
39org-atsui-title {
40 font-size: 1.5rem;
41 font-weight: 700;
42 line-height: 1.2;
43 letter-spacing: -0.02em;
44 color: var(--text-primary);
45}
46
47org-atsui-heading {
48 font-weight: 600;
49 color: var(--text-primary);
50}
51
52org-atsui-text {
53 color: var(--text-body);
54}
55
56org-atsui-text b,
57org-atsui-text strong {
58 font-weight: 600;
59 color: var(--text-primary);
60}
61
62org-atsui-caption {
63 font-size: 0.8125rem;
64 color: var(--text-secondary);
65}
66
67/* Avatar */
68
69org-atsui-avatar {
70 border-radius: 50%;
71}
72
73/* Cover */
74
75org-atsui-cover::before {
76 height: 200px;
77 background:
78 linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 50%),
79 var(--cover-src) center / cover no-repeat;
80}
81
82/* Avatar lift */
83
84org-atsui-avatar[lift] {
85 position: relative;
86 z-index: 1;
87 box-shadow: 0 0 0 3px #fff;
88}
89org-atsui-avatar[lift][size="xsmall"] {
90 margin-top: calc(-10px - var(--inset, 0px));
91}
92org-atsui-avatar[lift][size="small"] {
93 margin-top: calc(-16px - var(--inset, 0px));
94}
95org-atsui-avatar[lift][size="medium"] {
96 margin-top: calc(-24px - var(--inset, 0px));
97}
98org-atsui-avatar[lift][size="large"] {
99 margin-top: calc(-40px - var(--inset, 0px));
100}
101
102/* Blob */
103
104org-atsui-blob img {
105 border-radius: 8px;
106}
107
108/* Inset */
109
110:is(org-atsui-stack, org-atsui-row)[inset] {
111 --inset: 12px;
112 padding: 12px;
113}
114
115/* Link */
116
117org-atsui-link a {
118 text-decoration: none;
119 color: inherit;
120 display: block;
121}
122org-atsui-link[decoration="underline"] a {
123 text-decoration: underline;
124 color: #b497bf;
125}
126
127org-atsui-link a:hover {
128 opacity: 0.85;
129}
130
131/* List separators */
132
133hr {
134 border: none;
135 height: 1px;
136 background: #eee;
137 margin: 0;
138 width: 100%;
139}
140
141/* Tabs */
142
143org-atsui-tabs .tabs-bar {
144 gap: 0;
145 border-bottom: 1px solid #eee;
146 padding: 0 16px;
147 background: #fff;
148}
149
150org-atsui-tabs .tabs-bar button {
151 flex: 1;
152 text-align: center;
153 font-size: 0.8125rem;
154 font-weight: 500;
155 padding: 10px 0;
156 color: var(--text-secondary);
157 border-bottom: 2px solid transparent;
158 margin-bottom: -1px;
159}
160
161org-atsui-tabs .tabs-bar button[aria-selected="true"] {
162 color: var(--text-primary);
163 border-bottom-color: var(--text-primary);
164 font-weight: 600;
165}
166
167org-atsui-tabs .tabs-bar button:hover:not([aria-selected="true"]) {
168 color: #666;
169}