Skip to content

Commit 49480ec

Browse files
whostackingwhostacking
committed
feat: split the two tools
1 parent 69fe181 commit 49480ec

8 files changed

Lines changed: 887 additions & 0 deletions

File tree

‎bucket/bridge.png‎

2.14 MB
Loading

‎bucket/bucket.css‎

Lines changed: 324 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,324 @@
1+
:root {
2+
color-scheme: dark;
3+
--bg: #0f0a0f;
4+
--panel: #291729;
5+
--line: rgba(255, 255, 255, .05);
6+
--line-strong: #3d4c64;
7+
--text: #ecf2ff;
8+
--muted: #9eacc0;
9+
--accent: #491d4f;
10+
--accent-strong: #f6c85f;
11+
--danger: #ff7a90;
12+
--shadow: 0 20px 60px rgba(0, 0, 0, .42);
13+
font-family: "Google Sans Flex", sans-serif;
14+
}
15+
16+
* {
17+
box-sizing: border-box;
18+
}
19+
20+
body {
21+
margin: 0;
22+
min-height: 100vh;
23+
color: var(--text);
24+
background: var(--bg);
25+
26+
&::before {
27+
content: '';
28+
position: absolute;
29+
inset: 0;
30+
background: url(bridge.png);
31+
background-size: cover;
32+
background-position: center;
33+
background-repeat: no-repeat;
34+
z-index: -1;
35+
height: 50vh;
36+
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
37+
}
38+
39+
&::after {
40+
content: '';
41+
position: fixed;
42+
inset: 0;
43+
background: url(frosted-texture.png);
44+
background-repeat: repeat;
45+
background-size: 200px 200px;
46+
opacity: 0.1;
47+
z-index: -2;
48+
}
49+
}
50+
51+
button,
52+
input,
53+
textarea {
54+
font: inherit;
55+
}
56+
57+
button {
58+
min-height: 38px;
59+
border-radius: 7px;
60+
background: #4a1d4f;
61+
color: var(--text);
62+
cursor: pointer;
63+
transition: border-color .16s ease, background .16s ease, transform .16s ease;
64+
border: unset;
65+
66+
&:hover {
67+
background: #331d3d;
68+
}
69+
70+
&:active {
71+
transform: translateY(1px);
72+
}
73+
}
74+
75+
a {
76+
color: #e5acef;
77+
}
78+
79+
a:not(:hover) {
80+
text-decoration: none;
81+
}
82+
83+
code {
84+
color: #f6c8f7;
85+
}
86+
87+
.shell {
88+
width: min(1280px, calc(100vw - 32px));
89+
margin: 0 auto;
90+
padding: 5rem 0;
91+
}
92+
93+
.workspace {
94+
min-height: calc(100vh - 56px);
95+
display: flex;
96+
flex-direction: column;
97+
gap: 16px;
98+
}
99+
100+
.intro {
101+
display: flex;
102+
align-items: center;
103+
text-align: center;
104+
justify-content: center;
105+
flex-direction: column;
106+
gap: 5px;
107+
padding: 0 0 2rem 0;
108+
position: relative;
109+
110+
> div {
111+
font-variation-settings: "ROND" 100;
112+
}
113+
114+
/* > img {
115+
position: absolute;
116+
z-index: -1;
117+
top: 50%;
118+
left: 50%;
119+
transform: translate(-50%, -60%);
120+
opacity: 0.35;
121+
height: 150%;
122+
} */
123+
}
124+
125+
.intro h1 {
126+
display: flex;
127+
justify-content: center;
128+
gap: 1rem;
129+
flex-wrap: wrap;
130+
align-items: center;
131+
}
132+
133+
h1,
134+
h2,
135+
h3,
136+
p {
137+
margin: 0;
138+
}
139+
140+
h1 {
141+
font-size: clamp(2rem, 4vw, 4.2rem);
142+
line-height: .96;
143+
letter-spacing: 0;
144+
font-variation-settings: "ROND" 80;
145+
}
146+
147+
h2, h3 {
148+
font-size: 1rem;
149+
}
150+
151+
.section-heading {
152+
font-size: 1.4rem;
153+
margin-bottom: 0.8rem;
154+
color: #e3a1b3;
155+
font-variation-settings: 'ROND' 90;
156+
}
157+
158+
.tool-grid {
159+
flex: 1;
160+
display: grid;
161+
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
162+
gap: 16px;
163+
min-height: 560px;
164+
}
165+
166+
.panel {
167+
border: 1px solid var(--line);
168+
border-radius: 16px;
169+
background: oklch(from var(--panel) l c h / 0.5);
170+
backdrop-filter: blur(12px) saturate(1.2);
171+
box-shadow: var(--shadow);
172+
overflow: hidden;
173+
}
174+
175+
.input-panel,
176+
.output-panel {
177+
min-height: 560px;
178+
display: flex;
179+
flex-direction: column;
180+
}
181+
182+
.panel-head {
183+
display: flex;
184+
align-items: stretch;
185+
justify-content: space-between;
186+
gap: 14px;
187+
padding: 16px;
188+
border-bottom: 1px solid var(--line);
189+
}
190+
191+
.panel-head-details {
192+
flex: 1;
193+
194+
@media (max-width: 800px) {
195+
width: 100%;
196+
}
197+
}
198+
199+
.panel-head p,
200+
.diagnostics p,
201+
.diagnostics li {
202+
color: var(--muted);
203+
font-size: .92rem;
204+
line-height: 1.45;
205+
}
206+
207+
.button-row,
208+
.segmented {
209+
display: flex;
210+
gap: 10px;
211+
212+
& button {
213+
padding: 3px 10px;
214+
}
215+
}
216+
217+
#copyButton,
218+
#copySchemaButton,
219+
#copyStoreButton {
220+
padding: 10px;
221+
display: flex;
222+
justify-content: center;
223+
align-items: center;
224+
background: #44364a;
225+
}
226+
227+
.segmented button {
228+
border: 0;
229+
background: transparent;
230+
color: var(--muted);
231+
transition: .25s all ease;
232+
233+
&.active {
234+
background: var(--accent);
235+
color: #B9E3A1;
236+
font-weight: 700;
237+
font-variation-settings: "ROND" 100;
238+
}
239+
}
240+
241+
textarea,
242+
pre,
243+
input {
244+
border: 0;
245+
color: var(--text);
246+
background: #211a21;
247+
font-family: "Cascadia Code", monospace;
248+
word-break: break-all;
249+
250+
@media (max-width: 800px) {
251+
font-size: small;
252+
}
253+
}
254+
255+
textarea {
256+
flex: 1;
257+
width: 100%;
258+
min-height: 420px;
259+
resize: none;
260+
padding: 18px;
261+
line-height: 1.5;
262+
outline: 0;
263+
}
264+
265+
textarea:focus,
266+
input:focus,
267+
pre:focus {
268+
outline: 2px solid rgba(79, 209, 197, .55);
269+
outline-offset: -2px;
270+
}
271+
272+
input {
273+
min-height: 38px;
274+
border: 1px solid var(--line);
275+
border-radius: 7px;
276+
padding: 0 11px;
277+
}
278+
279+
pre {
280+
flex: 1;
281+
margin: 0;
282+
padding: 18px;
283+
overflow: auto;
284+
white-space: pre-wrap;
285+
word-break: break-word;
286+
line-height: 1.5;
287+
}
288+
289+
.diagnostics {
290+
padding: 2rem 0 0 0;
291+
}
292+
293+
@media (max-width: 800px) {
294+
.shell {
295+
width: min(100vw - 20px, 720px);
296+
/* padding: 10px 0; */
297+
}
298+
299+
.intro,
300+
.panel-head,
301+
.diagnostics,
302+
.tool-grid {
303+
grid-template-columns: 1fr;
304+
}
305+
306+
.intro,
307+
.panel-head {
308+
align-items: stretch;
309+
flex-wrap: wrap;
310+
}
311+
312+
.tool-grid {
313+
min-height: 0;
314+
}
315+
316+
.input-panel,
317+
.output-panel {
318+
min-height: 460px;
319+
}
320+
321+
h1 {
322+
font-size: 2rem;
323+
}
324+
}

0 commit comments

Comments
 (0)