Skip to content

Commit b4c754e

Browse files
acharneskiacharneski
committed
wip
1 parent af8031a commit b4c754e

2 files changed

Lines changed: 99 additions & 100 deletions

File tree

‎experiments/gravity/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,9 @@
1111
<link rel="icon" type="image/png" sizes="32x32" href="../../icon.png" />
1212
<link rel="apple-touch-icon" sizes="180x180" href="../../icon.png" />
1313
<link rel="shortcut icon" href="../../icon.png" />
14-
1514
</head>
1615
<body>
17-
<a class="home-link" href="../../index.html" title="Back to home">← Home</a>
16+
<a class="home-link" href="../../index.html" title="Back to home">← Home</a>
1817
<div id="app">
1918
<canvas id="sim-canvas"></canvas>
2019
<aside id="controls" class="panel"></aside>

‎experiments/gravity/styles/main.css‎

Lines changed: 98 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,158 +1,158 @@
11
:root {
2-
--bg: #05060a;
3-
--panel-bg: #11141d;
4-
--panel-border: #232838;
5-
--text: #d6dbe6;
6-
--accent: #5ad1ff;
7-
--accent-2: #ff7b5a;
2+
--bg: #05060a;
3+
--panel-bg: #11141d;
4+
--panel-border: #232838;
5+
--text: #d6dbe6;
6+
--accent: #5ad1ff;
7+
--accent-2: #ff7b5a;
88
}
99

1010
* {
11-
box-sizing: border-box;
11+
box-sizing: border-box;
1212
}
1313

1414
html,
1515
body {
16-
margin: 0;
17-
height: 100%;
18-
background: var(--bg);
19-
color: var(--text);
20-
font-family: 'Segoe UI', system-ui, sans-serif;
21-
overflow: hidden;
16+
margin: 0;
17+
height: 100%;
18+
background: var(--bg);
19+
color: var(--text);
20+
font-family: 'Segoe UI', system-ui, sans-serif;
21+
overflow: hidden;
2222
}
2323

2424
#app {
25-
position: relative;
26-
width: 100vw;
27-
height: 100vh;
25+
position: relative;
26+
width: 100vw;
27+
height: 100vh;
2828
}
2929

3030
#sim-canvas {
31-
position: absolute;
32-
inset: 0;
33-
width: 100%;
34-
height: 100%;
35-
display: block;
36-
cursor: crosshair;
31+
position: absolute;
32+
inset: 0;
33+
width: 100%;
34+
height: 100%;
35+
display: block;
36+
cursor: crosshair;
3737
}
3838

3939
.panel {
40-
position: absolute;
41-
top: 12px;
42-
right: 12px;
43-
width: 280px;
44-
max-height: calc(100vh - 24px);
45-
overflow-y: auto;
46-
background: rgba(17, 20, 29, 0.92);
47-
border: 1px solid var(--panel-border);
48-
border-radius: 10px;
49-
padding: 14px;
50-
backdrop-filter: blur(6px);
40+
position: absolute;
41+
top: 12px;
42+
right: 12px;
43+
width: 280px;
44+
max-height: calc(100vh - 24px);
45+
overflow-y: auto;
46+
background: rgba(17, 20, 29, 0.92);
47+
border: 1px solid var(--panel-border);
48+
border-radius: 10px;
49+
padding: 14px;
50+
backdrop-filter: blur(6px);
5151
}
5252

5353
.panel h2 {
54-
margin: 0 0 10px;
55-
font-size: 15px;
56-
letter-spacing: 0.4px;
54+
margin: 0 0 10px;
55+
font-size: 15px;
56+
letter-spacing: 0.4px;
5757
}
5858

5959
.control-row {
60-
margin-bottom: 10px;
61-
font-size: 12px;
60+
margin-bottom: 10px;
61+
font-size: 12px;
6262
}
6363

6464
.control-row label {
65-
display: flex;
66-
justify-content: space-between;
67-
margin-bottom: 3px;
68-
color: #aab2c5;
69-
align-items: center;
65+
display: flex;
66+
justify-content: space-between;
67+
margin-bottom: 3px;
68+
color: #aab2c5;
69+
align-items: center;
7070
}
7171

7272
.control-row input[type='checkbox'] {
73-
accent-color: var(--accent);
74-
cursor: pointer;
73+
accent-color: var(--accent);
74+
cursor: pointer;
7575
}
7676

7777
.control-row input[type='range'] {
78-
width: 100%;
79-
accent-color: var(--accent);
78+
width: 100%;
79+
accent-color: var(--accent);
8080
}
8181

8282
.control-row .val {
83-
color: var(--accent);
84-
font-variant-numeric: tabular-nums;
83+
color: var(--accent);
84+
font-variant-numeric: tabular-nums;
8585
}
8686

8787
.button-row {
88-
display: flex;
89-
flex-wrap: wrap;
90-
gap: 6px;
91-
margin: 10px 0;
88+
display: flex;
89+
flex-wrap: wrap;
90+
gap: 6px;
91+
margin: 10px 0;
9292
}
9393

9494
.button-row button,
9595
.preset-select {
96-
flex: 1 1 auto;
97-
background: #1c2233;
98-
color: var(--text);
99-
border: 1px solid var(--panel-border);
100-
border-radius: 6px;
101-
padding: 6px 8px;
102-
font-size: 12px;
103-
cursor: pointer;
96+
flex: 1 1 auto;
97+
background: #1c2233;
98+
color: var(--text);
99+
border: 1px solid var(--panel-border);
100+
border-radius: 6px;
101+
padding: 6px 8px;
102+
font-size: 12px;
103+
cursor: pointer;
104104
}
105105

106106
.button-row button:hover {
107-
background: #28304a;
107+
background: #28304a;
108108
}
109109

110110
.preset-select {
111-
width: 100%;
112-
margin-bottom: 8px;
111+
width: 100%;
112+
margin-bottom: 8px;
113113
}
114114

115115
.readouts {
116-
position: absolute;
117-
left: 12px;
118-
bottom: 12px;
119-
background: rgba(17, 20, 29, 0.85);
120-
border: 1px solid var(--panel-border);
121-
border-radius: 8px;
122-
padding: 10px 12px;
123-
font-size: 12px;
124-
font-variant-numeric: tabular-nums;
125-
line-height: 1.6;
126-
min-width: 180px;
116+
position: absolute;
117+
left: 12px;
118+
bottom: 12px;
119+
background: rgba(17, 20, 29, 0.85);
120+
border: 1px solid var(--panel-border);
121+
border-radius: 8px;
122+
padding: 10px 12px;
123+
font-size: 12px;
124+
font-variant-numeric: tabular-nums;
125+
line-height: 1.6;
126+
min-width: 180px;
127127
}
128128

129129
.readouts span {
130-
color: var(--accent);
130+
color: var(--accent);
131131
}
132132

133133
.home-link {
134-
position: fixed;
135-
top: 12px;
136-
left: 12px;
137-
z-index: 9999;
138-
display: inline-flex;
139-
align-items: center;
140-
gap: 6px;
141-
padding: 8px 14px;
142-
font-family: var(--font-sans);
143-
font-size: 13px;
144-
font-weight: 600;
145-
color: var(--text-primary);
146-
background: rgba(26, 29, 36, 0.92);
147-
border: 1px solid var(--border-color);
148-
border-radius: var(--radius-sm);
149-
text-decoration: none;
150-
backdrop-filter: blur(8px);
151-
transition: all 0.15s ease;
134+
position: fixed;
135+
top: 12px;
136+
left: 12px;
137+
z-index: 9999;
138+
display: inline-flex;
139+
align-items: center;
140+
gap: 6px;
141+
padding: 8px 14px;
142+
font-family: var(--font-sans);
143+
font-size: 13px;
144+
font-weight: 600;
145+
color: var(--text-primary);
146+
background: rgba(26, 29, 36, 0.92);
147+
border: 1px solid var(--border-color);
148+
border-radius: var(--radius-sm);
149+
text-decoration: none;
150+
backdrop-filter: blur(8px);
151+
transition: all 0.15s ease;
152152
}
153153

154154
.home-link:hover {
155-
background: var(--card-hover);
156-
border-color: var(--accent-primary);
157-
color: var(--accent-primary);
158-
}
155+
background: var(--card-hover);
156+
border-color: var(--accent-primary);
157+
color: var(--accent-primary);
158+
}

0 commit comments

Comments
 (0)