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