Scratch space for learning atproto app development
cduck.me
1body {
2 font-family: Arial, Helvetica, sans-serif;
3
4 --border-color: #ddd;
5 --gray-100: #fafafa;
6 --gray-500: #666;
7 --gray-700: #333;
8 --primary-400:#2e8fff;
9 --primary-500: #0078ff;
10 --primary-600: #0066db;
11 --error-500: #f00;
12 --error-100: #fee;
13}
14
15/*
16 Josh's Custom CSS Reset
17 https://www.joshwcomeau.com/css/custom-css-reset/
18*/
19*, *::before, *::after {
20 box-sizing: border-box;
21}
22* {
23 margin: 0;
24}
25body {
26 line-height: 1.5;
27 -webkit-font-smoothing: antialiased;
28}
29img, picture, video, canvas, svg {
30 display: block;
31 max-width: 100%;
32}
33input, button, textarea, select {
34 font: inherit;
35}
36p, h1, h2, h3, h4, h5, h6 {
37 overflow-wrap: break-word;
38}
39#root, #__next {
40 isolation: isolate;
41}
42
43/*
44 Common components
45*/
46button, .button {
47 display: inline-block;
48 border: 0;
49 background-color: var(--primary-500);
50 border-radius: 50px;
51 color: #fff;
52 padding: 2px 10px;
53 cursor: pointer;
54 text-decoration: none;
55}
56button:hover, .button:hover {
57 background: var(--primary-400);
58}
59
60/*
61 Custom components
62*/
63.error {
64 background-color: var(--error-100);
65 color: var(--error-500);
66 text-align: center;
67 padding: 1rem;
68 display: none;
69}
70.error.visible {
71 display: block;
72}
73
74#header {
75 background-color: #fff;
76 text-align: center;
77 padding: 0.5rem 0 1.5rem;
78}
79
80#header h1 {
81 font-size: 5rem;
82}
83
84.container {
85 display: flex;
86 flex-direction: column;
87 gap: 4px;
88 margin: 0 auto;
89 max-width: 600px;
90 padding: 20px;
91}
92
93.card {
94 /* border: 1px solid var(--border-color); */
95 border-radius: 6px;
96 padding: 10px 16px;
97 background-color: #fff;
98}
99.card > :first-child {
100 margin-top: 0;
101}
102.card > :last-child {
103 margin-bottom: 0;
104}
105
106.session-form {
107 display: flex;
108 flex-direction: row;
109 align-items: center;
110 justify-content: space-between;
111}
112
113.login-form {
114 display: flex;
115 flex-direction: row;
116 gap: 6px;
117 border: 1px solid var(--border-color);
118 border-radius: 6px;
119 padding: 10px 16px;
120 background-color: #fff;
121}
122
123.login-form input {
124 flex: 1;
125 border: 0;
126}
127
128.status-options {
129 display: flex;
130 flex-direction: row;
131 flex-wrap: wrap;
132 gap: 8px;
133 margin: 10px 0;
134}
135
136.status-option {
137 font-size: 2rem;
138 width: 3rem;
139 height: 3rem;
140 background-color: #fff;
141 border: 1px solid var(--border-color);
142 border-radius: 3rem;
143 text-align: center;
144 box-shadow: 0 1px 4px #0001;
145 cursor: pointer;
146}
147
148.status-option:hover {
149 background-color: var(--gray-100);
150}
151
152.status-line {
153 display: flex;
154 flex-direction: row;
155 align-items: center;
156 gap: 10px;
157 position: relative;
158 margin-top: 15px;
159}
160
161.status-line:not(.no-line)::before {
162 content: '';
163 position: absolute;
164 width: 2px;
165 background-color: var(--border-color);
166 left: 1.45rem;
167 bottom: calc(100% + 2px);
168 height: 15px;
169}
170
171.status-line .status {
172 font-size: 2rem;
173 background-color: #fff;
174 width: 3rem;
175 height: 3rem;
176 border-radius: 1.5rem;
177 text-align: center;
178 border: 1px solid var(--border-color);
179}
180
181.status-line .desc {
182 color: var(--gray-500);
183}
184
185.status-line .author {
186 color: var(--gray-700);
187 font-weight: 600;
188 text-decoration: none;
189}
190
191.status-line .author:hover {
192 text-decoration: underline;
193}