Skip to content

Commit 350e2c4

Browse files
author
Dominique Chuo
committed
favicons
1 parent 5be9c9f commit 350e2c4

17 files changed

+358
-222
lines changed

‎docusaurus.config.ts‎

Lines changed: 75 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,94 @@ const config: Config = {
1616
baseUrl: '/',
1717

1818
headTags: [
19+
{
20+
tagName: 'link',
21+
attributes: {
22+
rel: 'icon',
23+
type: 'image/png',
24+
sizes: '16x16',
25+
href: '/img/favicon-16x16.png',
26+
},
27+
},
1928
{
2029
tagName: 'link',
2130
attributes: {
2231
rel: 'icon',
2332
type: 'image/png',
2433
sizes: '32x32',
25-
href: '/favicon-32x32.png',
34+
href: '/img/favicon-32x32.png',
2635
},
2736
},
2837
{
2938
tagName: 'link',
3039
attributes: {
3140
rel: 'icon',
3241
type: 'image/png',
33-
sizes: '16x16',
34-
href: '/favicon-16x16.png',
42+
sizes: '48x48',
43+
href: '/img/favicon-48x48.png',
44+
},
45+
},
46+
{
47+
tagName: 'link',
48+
attributes: {
49+
rel: 'icon',
50+
type: 'image/png',
51+
sizes: '64x64',
52+
href: '/img/favicon-64x64.png',
53+
},
54+
},
55+
{
56+
tagName: 'link',
57+
attributes: {
58+
rel: 'apple-touch-icon',
59+
sizes: '180x180',
60+
href: '/img/apple-touch-icon.png',
61+
},
62+
},
63+
{
64+
tagName: 'link',
65+
attributes: {
66+
rel: 'icon',
67+
type: 'image/png',
68+
sizes: '192x192',
69+
href: '/img/android-chrome-192x192.png',
70+
},
71+
},
72+
{
73+
tagName: 'link',
74+
attributes: {
75+
rel: 'icon',
76+
type: 'image/png',
77+
sizes: '512x512',
78+
href: '/img/android-chrome-512x512.png',
79+
},
80+
},
81+
{
82+
tagName: 'link',
83+
attributes: {
84+
rel: 'manifest',
85+
href: '/site.webmanifest',
86+
},
87+
},
88+
{
89+
tagName: 'meta',
90+
attributes: {
91+
name: 'msapplication-TileColor',
92+
content: '#383838',
93+
},
94+
},
95+
{
96+
tagName: 'meta',
97+
attributes: {
98+
name: 'msapplication-TileImage',
99+
content: '/img/mstile-150x150.png',
100+
},
101+
},
102+
{
103+
tagName: 'meta',
104+
attributes: {
105+
name: 'theme-color',
106+
content: '#383838',
35107
},
36108
},
37109
],

‎src/components/InlineEditor/index.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -240,15 +240,8 @@ export default function InlineEditor({
240240
const { statement, result, error } = statementResult;
241241

242242
return (
243-
<div key={index} className={styles.statementResult}>
244-
<div className={styles.statementHeader}>
245-
<span className={styles.statementNumber}>STATEMENT {index + 1}</span>
246-
<code className={styles.statementPreview}>
247-
{statement.length > 50 ? statement.substring(0, 50) + '...' : statement}
248-
</code>
249-
</div>
250-
251-
<ResultViewer
243+
<div key={index} >
244+
<ResultViewer
252245
result={result || undefined}
253246
error={error || undefined}
254247
isLoading={false}

‎src/components/InlineEditor/styles.module.css‎

Lines changed: 69 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
.brutalistEditor {
22
margin: 1.5rem 0;
33
background: white;
4-
border: 1px solid #E5E5E5;
4+
border: 3px solid #383838;
55
border-radius: 0;
6-
box-shadow: -2px 2px 0px 0px rgba(56, 56, 56, 0.1);
7-
transition: all 0.2s ease;
6+
box-shadow: -5px 5px 0px 0px #383838;
7+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
88
}
99

1010
.brutalistEditor:hover {
11-
box-shadow: -3px 3px 0px 0px rgba(56, 56, 56, 0.15);
11+
transform: translate(5px, -5px);
12+
box-shadow: -7px 7px 0px 0px #383838;
1213
}
1314

1415
.editorContainer {
15-
background: #FAFAFA;
16-
border-bottom: 1px solid #E5E5E5;
16+
background: #F4EFEA;
17+
border-bottom: 3px solid #383838;
1718
}
1819

1920
.editorWrapper {
2021
position: relative;
2122
}
2223

2324
.codeContainer {
24-
border-bottom: 1px solid #E5E5E5;
25+
border-bottom: 3px solid #383838;
2526
background: white;
2627
position: relative;
2728
overflow: hidden;
@@ -32,32 +33,32 @@
3233
align-items: center;
3334
gap: 0.75rem;
3435
padding: 0.75rem 1rem;
35-
background: #FAFAFA;
36-
border-top: 1px solid #E5E5E5;
36+
background: #F4EFEA;
37+
border-top: 3px solid #383838;
3738
flex-wrap: wrap;
3839
}
3940

4041
.executeBtn {
41-
padding: 0.5rem 1rem;
42+
padding: 8px 16px;
4243
background: #383838;
4344
color: white;
44-
border: 1px solid #383838;
45+
border: 3px solid #383838;
4546
border-radius: 0;
4647
text-transform: uppercase;
47-
letter-spacing: 0.02em;
48-
font-weight: 600;
49-
font-size: 11px;
48+
letter-spacing: 0.025em;
49+
font-weight: 500;
50+
font-size: 12px;
5051
cursor: pointer;
51-
transition: all 0.2s ease;
52+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
5253
display: flex;
5354
align-items: center;
5455
gap: 0.375rem;
55-
box-shadow: -2px 2px 0px 0px rgba(56, 56, 56, 0.15);
56+
box-shadow: -5px 5px 0px 0px #383838;
5657
}
5758

5859
.executeBtn:hover:not(:disabled) {
59-
transform: translate(2px, -2px);
60-
box-shadow: -3px 3px 0px 0px rgba(56, 56, 56, 0.25);
60+
transform: translate(7px, -7px);
61+
box-shadow: -7px 7px 0px 0px #383838;
6162
}
6263

6364
.executeBtn:active:not(:disabled) {
@@ -72,23 +73,25 @@
7273

7374
.toggleBtn,
7475
.resetBtn {
75-
padding: 0.375rem 0.75rem;
76+
padding: 6px 12px;
7677
background: white;
77-
color: #374151;
78-
border: 1px solid #D1D5DB;
78+
color: #383838;
79+
border: 3px solid #383838;
7980
border-radius: 0;
8081
text-transform: uppercase;
81-
letter-spacing: 0.02em;
82+
letter-spacing: 0.025em;
8283
font-weight: 500;
83-
font-size: 10px;
84+
font-size: 11px;
8485
cursor: pointer;
85-
transition: all 0.15s ease;
86+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
87+
box-shadow: -5px 5px 0px 0px #383838;
8688
}
8789

8890
.toggleBtn:hover,
8991
.resetBtn:hover {
90-
background: #F3F4F6;
91-
border-color: #9CA3AF;
92+
background: #F4EFEA;
93+
transform: translate(5px, -5px);
94+
box-shadow: -7px 7px 0px 0px #383838;
9295
}
9396

9497
.shortcutHint {
@@ -100,16 +103,18 @@
100103
}
101104

102105
.connectionDot {
103-
padding: 0.25rem 0.625rem;
106+
padding: 6px 12px;
104107
text-transform: uppercase;
105-
font-size: 10px;
106-
letter-spacing: 0.02em;
107-
font-weight: 500;
108-
border: 1px solid;
108+
font-size: 11px;
109+
letter-spacing: 0.025em;
110+
font-weight: 600;
111+
border: 3px solid;
112+
border-radius: 0;
109113
position: relative;
110114
display: flex;
111115
align-items: center;
112116
gap: 0.375rem;
117+
box-shadow: -5px 5px 0px 0px #383838;
113118
}
114119

115120
.connectionDot::before {
@@ -152,9 +157,9 @@
152157

153158
.codeBlock {
154159
margin: 0;
155-
padding: 1rem;
156-
background: #FAFAFA;
157-
border-bottom: 1px solid #E5E5E5;
160+
padding: 1.5rem;
161+
background: #F8F8F7;
162+
border-bottom: 3px solid #383838;
158163
overflow-x: auto;
159164
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
160165
font-size: 16px;
@@ -202,9 +207,9 @@
202207
}
203208

204209
.resultsWrapper {
205-
background: #FAFAFA;
206-
padding: 1rem;
207-
border-top: 1px solid #E5E5E5;
210+
background: #F4EFEA;
211+
padding: 1.5rem;
212+
border-top: 3px solid #383838;
208213
}
209214

210215
.statementResult {
@@ -259,9 +264,9 @@
259264

260265
.brutalistModal {
261266
background: white;
262-
border: 1px solid #374151;
267+
border: 3px solid #383838;
263268
border-radius: 0;
264-
box-shadow: -4px 4px 0px 0px rgba(56, 56, 56, 0.2);
269+
box-shadow: -7px 7px 0px 0px #383838;
265270
max-width: 500px;
266271
width: 90%;
267272
max-height: 80vh;
@@ -273,9 +278,9 @@
273278
justify-content: space-between;
274279
align-items: center;
275280
padding: 1rem 1.25rem;
276-
background: #374151;
281+
background: #383838;
277282
color: white;
278-
border-bottom: 1px solid #374151;
283+
border-bottom: 3px solid #383838;
279284
}
280285

281286
.modalHeader h3 {
@@ -332,9 +337,11 @@
332337
display: flex;
333338
gap: 0.5rem;
334339
background: white;
335-
border: 1px solid #D1D5DB;
340+
border: 3px solid #383838;
341+
border-radius: 0;
336342
padding: 0.75rem;
337343
align-items: center;
344+
box-shadow: -5px 5px 0px 0px #383838;
338345
}
339346

340347
.commandBox code {
@@ -420,39 +427,41 @@
420427

421428
/* Dark Mode - Subtle */
422429
[data-theme='dark'] .brutalistEditor {
423-
background: #1F2937;
424-
border-color: #374151;
425-
box-shadow: -2px 2px 0px 0px rgba(248, 248, 247, 0.05);
430+
background: #2A2A2A;
431+
border-color: #F8F8F7;
432+
box-shadow: -5px 5px 0px 0px #F8F8F7;
426433
}
427434

428435
[data-theme='dark'] .brutalistEditor:hover {
429-
box-shadow: -3px 3px 0px 0px rgba(248, 248, 247, 0.1);
436+
transform: translate(5px, -5px);
437+
box-shadow: -7px 7px 0px 0px #F8F8F7;
430438
}
431439

432440
[data-theme='dark'] .editorContainer {
433-
background: #111827;
434-
border-bottom-color: #374151;
441+
background: #2A2A2A;
442+
border-bottom-color: #F8F8F7;
435443
}
436444

437445
[data-theme='dark'] .codeContainer {
438-
background: #1F2937;
439-
border-bottom-color: #374151;
446+
background: #2A2A2A;
447+
border-bottom-color: #F8F8F7;
440448
}
441449

442450
[data-theme='dark'] .editorActions {
443-
background: #111827;
444-
border-top-color: #374151;
451+
background: #2A2A2A;
452+
border-top-color: #F8F8F7;
445453
}
446454

447455
[data-theme='dark'] .executeBtn {
448-
background: #E5E7EB;
449-
color: #111827;
450-
border-color: #E5E7EB;
451-
box-shadow: -2px 2px 0px 0px rgba(229, 231, 235, 0.15);
456+
background: #F8F8F7;
457+
color: #2A2A2A;
458+
border-color: #F8F8F7;
459+
box-shadow: -5px 5px 0px 0px #F8F8F7;
452460
}
453461

454462
[data-theme='dark'] .executeBtn:hover:not(:disabled) {
455-
box-shadow: -3px 3px 0px 0px rgba(229, 231, 235, 0.25);
463+
transform: translate(7px, -7px);
464+
box-shadow: -7px 7px 0px 0px #F8F8F7;
456465
}
457466

458467
[data-theme='dark'] .toggleBtn,
@@ -506,9 +515,9 @@
506515
}
507516

508517
[data-theme='dark'] .brutalistModal {
509-
background: #1F2937;
510-
border-color: #4B5563;
511-
box-shadow: -4px 4px 0px 0px rgba(248, 248, 247, 0.1);
518+
background: #2A2A2A;
519+
border-color: #F8F8F7;
520+
box-shadow: -7px 7px 0px 0px #F8F8F7;
512521
}
513522

514523
[data-theme='dark'] .modalHeader {

0 commit comments

Comments
 (0)