aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1/* KidLisp Editor - Layout & Structure */
2
3::-webkit-scrollbar {
4 display: none;
5}
6
7* {
8 box-sizing: border-box;
9 touch-action: manipulation;
10}
11
12body {
13 margin: 0;
14 font-size: 18px;
15 font-family: monospace;
16 -webkit-text-size-adjust: none;
17 display: flex;
18 flex-direction: column;
19 min-height: 100vh;
20 background: var(--bg-primary);
21 color: var(--text-primary);
22 cursor: url('https://aesthetic.computer/aesthetic.computer/cursors/precise.svg') 12 12, auto;
23}
24
25header {
26 padding: 16px;
27 background: var(--bg-secondary);
28 border-bottom: 1px solid var(--border-color);
29}
30
31h1 {
32 font-weight: normal;
33 font-size: 20px;
34 margin: 0;
35}
36
37.tagline {
38 font-size: 12px;
39 opacity: 0.6;
40 margin-top: 4px;
41}
42
43main {
44 flex: 1;
45 display: flex;
46 flex-direction: column;
47 gap: 0;
48 width: 100%;
49 overflow: hidden;
50}
51
52.top-row, .bottom-row {
53 display: flex;
54 flex-direction: row;
55 overflow: hidden;
56 width: 100%;
57 min-height: 0;
58}
59
60/* Panels base styles */
61.editor-panel,
62.preview-panel,
63.console-section,
64.reference-section {
65 min-width: 0;
66 min-height: 0;
67}
68
69.editor-panel {
70 display: flex;
71 flex-direction: column;
72 background: var(--editor-yellow);
73}
74
75@media (prefers-color-scheme: dark) {
76 .editor-panel { background: var(--editor-brown); }
77}
78
79[data-theme="light"] .editor-panel { background: var(--editor-yellow); }
80[data-theme="dark"] .editor-panel { background: var(--editor-brown); }
81
82.reference-section,
83.console-section {
84 display: flex;
85 flex-direction: column;
86 overflow: hidden;
87}
88
89/* Headers */
90.editor-header {
91 padding: 0 12px;
92 background: var(--editor-yellow);
93 border-bottom: 1px solid var(--editor-border);
94 display: flex;
95 justify-content: flex-start;
96 gap: 12px;
97 align-items: center;
98 color: var(--editor-text);
99 height: var(--header-height);
100 box-sizing: border-box;
101 overflow: visible;
102 flex-shrink: 0;
103 position: relative;
104 z-index: 200;
105}
106
107@media (prefers-color-scheme: dark) {
108 .editor-header {
109 background: var(--editor-brown-light);
110 border-bottom-color: var(--editor-brown);
111 }
112}
113
114[data-theme="dark"] .editor-header {
115 background: var(--editor-brown-light);
116 border-bottom-color: var(--editor-brown);
117}
118
119.docs-header {
120 padding: 0 12px;
121 background: var(--bg-secondary);
122 border-bottom: 1px solid var(--border-color);
123 display: flex;
124 align-items: center;
125 font-size: 13px;
126 font-weight: bold;
127 color: var(--text-primary);
128 height: var(--header-height);
129 box-sizing: border-box;
130 overflow: visible;
131 flex-shrink: 0;
132 position: relative;
133}
134
135.docs-header:has(.tab) {
136 padding: 0;
137}
138
139/* Preview panel header */
140#preview-panel .docs-header {
141 background: var(--ac-purple-light);
142 border-bottom-color: rgb(220, 215, 230);
143 z-index: 99998;
144}
145
146@media (prefers-color-scheme: dark) {
147 #preview-panel .docs-header {
148 background: var(--ac-purple-dark);
149 border-bottom-color: rgb(62, 56, 72);
150 }
151}
152
153[data-theme="dark"] #preview-panel .docs-header {
154 background: var(--ac-purple-dark);
155 border-bottom-color: rgb(62, 56, 72);
156}
157
158/* Console panel header */
159#console-panel .docs-header {
160 background: var(--console-header-bg);
161 border-bottom-color: #2a1a0f;
162}
163
164#console-title {
165 color: var(--console-text);
166}
167
168/* Content areas */
169.docs-content {
170 flex: 1;
171 overflow-y: auto;
172 padding: 16px;
173 font-size: 13px;
174 line-height: 1.5;
175 background: var(--bg-primary);
176 color: var(--text-primary);
177}
178
179.hidden {
180 display: none !important;
181}
182
183.docs-content.hidden {
184 display: none;
185}
186
187/* Console output */
188.console-output {
189 flex: 1;
190 overflow-y: auto;
191 padding: 8px;
192 font-size: 14px;
193 font-family: var(--font-mono);
194 line-height: 1.4;
195 background: var(--console-bg);
196 color: var(--console-text);
197}
198
199/* Rows for Split.js */
200.top-row, .bottom-row {
201 position: relative;
202}
203
204/* Center square for 4-panel resize */
205#center-square {
206 position: fixed;
207 width: 8px;
208 height: 8px;
209 background: rgba(205, 92, 155, 0.4);
210 cursor: move;
211 z-index: 1000;
212 pointer-events: auto;
213}
214
215#center-square:hover {
216 background: rgba(205, 92, 155, 0.6);
217}
218
219#center-square.dragging {
220 background: rgba(205, 92, 155, 0.8);
221}
222
223footer {
224 text-align: center;
225 padding: 16px;
226 font-size: 14px;
227 opacity: 0.7;
228 display: none;
229}
230
231a {
232 color: inherit;
233 text-decoration: none;
234}
235
236@media (hover: hover) {
237 a:hover {
238 color: var(--ac-purple);
239 }
240}