Skip to content

Commit bd646ae

Browse files
dwursteisenclaude
andcommitted
Fix CLI and editor template review feedback
- Use muted green (#5a8c00) for CLI hero and SFX section titles instead of neon var(--green) for better readability - Remove iframe scrollbar, fix container to 768x512 and center it - Add terminal header bar (macOS dots + filename) to editor page Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 2adee9f commit bd646ae

File tree

2 files changed

+21
-6
lines changed

2 files changed

+21
-6
lines changed

tiny-doc/src/docs/templates/pages/cli.peb

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
}
2525
.cli-hero__title {
2626
font-size: 5rem; line-height: 1; text-transform: uppercase;
27-
color: var(--green);
27+
color: #5a8c00;
2828
filter: drop-shadow(4px 4px 0 var(--yellow));
2929
}
3030
.cli-hero__subtitle {
@@ -134,7 +134,7 @@
134134
}
135135
.sfx-section__title {
136136
font-size: 2rem; text-transform: uppercase;
137-
color: var(--green);
137+
color: #5a8c00;
138138
filter: drop-shadow(2px 2px 0 var(--yellow));
139139
margin-bottom: 16px;
140140
}
@@ -143,6 +143,9 @@
143143
margin-bottom: 24px;
144144
}
145145
.sfx-section__editor {
146+
width: 768px; height: 512px;
147+
max-width: 100%;
148+
margin: 0 auto;
146149
border-radius: 10px; border: 1px solid #e0e0e0;
147150
overflow: hidden;
148151
}
@@ -207,7 +210,7 @@
207210
Try it below:
208211
</p>
209212
<div class="sfx-section__editor">
210-
<iframe class="no-resize" title="Tiny retro sound effects editor" loading="lazy" width="768" height="512" src="sample/sfx-editor/index.html" style="border: none; display: block; max-width: 100%;"></iframe>
213+
<iframe class="no-resize" title="Tiny retro sound effects editor" loading="lazy" width="768" height="512" src="sample/sfx-editor/index.html" scrolling="no" style="border: none; display: block; width: 100%; height: 100%;"></iframe>
211214
</div>
212215
</div>
213216
</div>

tiny-doc/src/docs/templates/pages/editor.peb

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,13 @@
3232
}
3333

3434
.editor-wrapper {
35-
max-width: 1200px;
36-
margin: 0 auto;
37-
padding: 0 24px 64px;
35+
border: 1px solid #e0e0e0;
36+
border-radius: 10px;
37+
overflow: hidden;
38+
box-shadow: 0 2px 12px rgba(0,0,0,.06);
39+
}
40+
.editor-wrapper .terminal__header {
41+
border-bottom: 1px solid #e0e0e0;
3842
}
3943

4044
/* -- tiny-web-editor styles */
@@ -111,7 +115,14 @@
111115
</p>
112116
</section>
113117

118+
<div style="max-width: 1200px; margin: 0 auto; padding: 0 24px 64px;">
114119
<div class="editor-wrapper">
120+
<div class="terminal__header">
121+
<span class="terminal__dot terminal__dot--red"></span>
122+
<span class="terminal__dot terminal__dot--yellow"></span>
123+
<span class="terminal__dot terminal__dot--green"></span>
124+
<span class="terminal__filename">game.lua</span>
125+
</div>
115126
<tiny-editor style="display: none;" sprite="resources/tiny-dungeon.png" mode="editor"
116127
examples='[{"name":"Empty Project","code":"ZnVuY3Rpb24gX2luaXQoKQoKZW5kCgpmdW5jdGlvbiBfdXBkYXRlKCkKCmVuZAoKZnVuY3Rpb24gX2RyYXcoKQoKZW5k"},{"name":"Tracking the player mouse","code":"CiAgCmZ1bmN0aW9uIF9kcmF3KCkKICAgIGdmeC5jbHMoKQoKICAgIHByaW50KCJSZWN0YW5nbGUgbGltaXQiLCA2NCwgNjQgLSA1KQogICAgLS0gZHJhdyB0aGUgYm9yZGVyIGxpbWl0LgogICAgZ2Z4LmRpdGhlcigweEE1QTUpCiAgICBzaGFwZS5yZWN0KDY0LCA2NCwgMjU2IC0gMTI4LCAyNTYgLSAxMjgsIDIpCiAgICBnZnguZGl0aGVyKCkKCiAgICAtLSBkcmF3IHRoZSBtb3VzZSBwb3NpdGlvbi4KICAgIGxvY2FsIHBvcyA9IGN0cmwudG91Y2goKQogICAgc2hhcGUubGluZShwb3MueCAtIDIsIHBvcy55LCBwb3MueCArIDIsIHBvcy55LCAzKQogICAgc2hhcGUubGluZShwb3MueCwgcG9zLnkgLSAyLCBwb3MueCwgcG9zLnkgKyAyLCAzKQoKICAgIC0tIGRyYXcgdGhlIHJlY3RhbmdsZSB0aGF0IGlzIHN0YXlpbmcgd2l0aGluIHRoZSBib3JkZXIgbGltaXQuCiAgICBsb2NhbCB4ID0gbWF0aC5jbGFtcCg2NCwgcG9zLnggLSA0LCAyNTYgLSA2NCAtIDkpCiAgICBsb2NhbCB5ID0gbWF0aC5jbGFtcCg2NCwgcG9zLnkgLSA0LCAyNTYgLSA2NCAtIDkpCiAgICBzaGFwZS5yZWN0KHgsIHksIDksIDksIDgpCmVuZAo="},{"name":"Waving letters","code":"ZnVuY3Rpb24gX2luaXQoKQogICAgbGV0dGVycyA9IHsiaCIsICJlIiwgImwiLCAibCIsICJvIiwgIiAiLCAidCIsICJpIiwgIm4iLCAieSIsICIhIn0KICAgIHN0YXJ0eCA9ICgyNTYgLSAoI2xldHRlcnMgKiA1KSkgKiAwLjUKZW5kCgpmdW5jdGlvbiBfZHJhdygpCiAgICBnZnguY2xzKCkKICAgIGZvciBpLCBsIGluIGlwYWlycyhsZXR0ZXJzKSBkbwogICAgICAgIHByaW50KAogICAgICAgICAgICBsLCAtLSBsZXR0ZXIgdG8gcHJpbnQKICAgICAgICAgICAgc3RhcnR4ICsgaSAqIDUsIC0tIHggcG9zaXRpb24gcmVnYXJkaW5nIHRoZSBsZXR0ZXIgaW5kZXguCiAgICAgICAgICAgIDEyOCArIG1hdGguY29zKHRpbnkudCAqIDMgKyBpKSAqIDgsIC0tIHkgcG9zaXRpb24gcmVnYXJkaW5nIHRoZSB0aW1lIGVsYXBzZWQgYW5kIHRoZSBsZXR0ZXIgaW5kZXggCiAgICAgICAgICAgIG1hdGguY2VpbCh0aW55LmZyYW1lICogMC4yIC0gaSkgLS0gY29sb3Igb2YgdGhlIGxldHRlciByZWdhcmRpbmcgdGhlIGluZGV4CiAgICAgICAgKQogICAgZW5kCmVuZA=="},{"name":"AABB Collision","code":"LS0gRnVuY3Rpb24gdG8gY2hlY2sgY29sbGlzaW9uIGJldHdlZW4gdHdvIHJlY3RhbmdsZXMKZnVuY3Rpb24gY2hlY2tDb2xsaXNpb24ocmVjdDEsIHJlY3QyKQogICAgcmV0dXJuIHJlY3QxLnggPCByZWN0Mi54ICsgcmVjdDIud2lkdGggYW5kCiAgICAgICAgICAgcmVjdDEueCArIHJlY3QxLndpZHRoID4gcmVjdDIueCBhbmQKICAgICAgICAgICByZWN0MS55IDwgcmVjdDIueSArIHJlY3QyLmhlaWdodCBhbmQKICAgICAgICAgICByZWN0MS55ICsgcmVjdDEuaGVpZ2h0ID4gcmVjdDIueQplbmQKCi0tIEZ1bmN0aW9uIHRvIHJlc29sdmUgY29sbGlzaW9uIGFuZCBzbGlkZQpmdW5jdGlvbiBjb2xsaWRlQW5kU2xpZGUob2JqZWN0LCBvYnN0YWNsZSkKICAgIGlmIGNoZWNrQ29sbGlzaW9uKG9iamVjdCwgb2JzdGFjbGUpIHRoZW4KICAgICAgICBsb2NhbCBvdmVybGFwWCA9IG1hdGgubWluKG9iamVjdC54ICsgb2JqZWN0LndpZHRoLCBvYnN0YWNsZS54ICsgb2JzdGFjbGUud2lkdGgpIC0gbWF0aC5tYXgob2JqZWN0LngsIG9ic3RhY2xlLngpCiAgICAgICAgbG9jYWwgb3ZlcmxhcFkgPSBtYXRoLm1pbihvYmplY3QueSArIG9iamVjdC5oZWlnaHQsIG9ic3RhY2xlLnkgKyBvYnN0YWNsZS5oZWlnaHQpIC0gbWF0aC5tYXgob2JqZWN0LnksIG9ic3RhY2xlLnkpCgogICAgICAgIGlmIG92ZXJsYXBYIDwgb3ZlcmxhcFkgdGhlbgogICAgICAgICAgICBpZiBvYmplY3QueCA8IG9ic3RhY2xlLnggdGhlbgogICAgICAgICAgICAgICAgb2JqZWN0LnggPSBvYmplY3QueCAtIG92ZXJsYXBYCiAgICAgICAgICAgIGVsc2UKICAgICAgICAgICAgICAgIG9iamVjdC54ID0gb2JqZWN0LnggKyBvdmVybGFwWAogICAgICAgICAgICBlbmQKICAgICAgICBlbHNlCiAgICAgICAgICAgIGlmIG9iamVjdC55IDwgb2JzdGFjbGUueSB0aGVuCiAgICAgICAgICAgICAgICBvYmplY3QueSA9IG9iamVjdC55IC0gb3ZlcmxhcFkKICAgICAgICAgICAgZWxzZQogICAgICAgICAgICAgICAgb2JqZWN0LnkgPSBvYmplY3QueSArIG92ZXJsYXBZCiAgICAgICAgICAgIGVuZAogICAgICAgIGVuZAogICAgZW5kCmVuZAoKcGxheWVyID0ge3ggPSA1MCwgeSA9IDUwLCB3aWR0aCA9IDIwLCBoZWlnaHQgPSAyMH0Kb2JzdGFjbGVzID0gewogICB7eCA9IDYwLCB5ID0gNDAsIHdpZHRoID0gMzAsIGhlaWdodCA9IDMwfSwKICB7eCA9IDY1LCB5ID0gNjAsIHdpZHRoID0gNDAsIGhlaWdodCA9IDMwfQp9CgpmdW5jdGlvbiBfdXBkYXRlKCkKICAgIGlmKGN0cmwucHJlc3Npbmcoa2V5cy5sZWZ0KSkgdGhlbgogICAgICAgICBwbGF5ZXIueCA9IHBsYXllci54IC0gMQogICAgZWxzZWlmIChjdHJsLnByZXNzaW5nKGtleXMucmlnaHQpKSB0aGVuCiAgICAgICAgIHBsYXllci54ID0gcGxheWVyLnggKyAxCiAgICBlbmQKCiAgICBpZihjdHJsLnByZXNzaW5nKGtleXMudXApKSB0aGVuCiAgICAgICAgIHBsYXllci55ID0gcGxheWVyLnkgLSAxCiAgICBlbHNlaWYgKGN0cmwucHJlc3Npbmcoa2V5cy5kb3duKSkgdGhlbgogICAgICAgICBwbGF5ZXIueSA9IHBsYXllci55ICsgMQogICAgZW5kCgogICAgZm9yIG9ic3RhY2xlIGluIGFsbChvYnN0YWNsZXMpIGRvCiAgICAgICBjb2xsaWRlQW5kU2xpZGUocGxheWVyLCBvYnN0YWNsZSkKICAgIGVuZAplbmQKCgpmdW5jdGlvbiBfZHJhdygpCiAgICBnZnguY2xzKCkKICAgIGZvciBvYnN0YWNsZSBpbiBhbGwob2JzdGFjbGVzKSBkbwogICAgICAgIHNoYXBlLnJlY3Qob2JzdGFjbGUueCwgb2JzdGFjbGUueSwgb2JzdGFjbGUud2lkdGgsIG9ic3RhY2xlLmhlaWdodCwgOSkKICAgIGVuZAoKICAgIHNoYXBlLnJlY3QocGxheWVyLngsIHBsYXllci55LCBwbGF5ZXIud2lkdGgsIHBsYXllci5oZWlnaHQsIDgpCmVuZA=="},{"name":"Control sprite move","code":"LS0gVXBkYXRlIHRoZSBjb2RlIHRvIHVwZGF0ZSB0aGUgZ2FtZSEKbG9jYWwgUGxheWVyID0gewogICB4ID0gMTI4IC0gMTYsCiAgIHkgPSAxMjggLSAxNiwKfQpmdW5jdGlvbiBfaW5pdCgpCiAgcGxheWVyID0gbmV3KFBsYXllcikKZW5kCgpmdW5jdGlvbiBfdXBkYXRlKCkKICBpZiBjdHJsLnByZXNzaW5nKGtleXMubGVmdCkgdGhlbgogICAgIHBsYXllci54ID0gbWF0aC5tYXgoMCwgcGxheWVyLnggLSAxKQogIGVsc2VpZiBjdHJsLnByZXNzaW5nKGtleXMucmlnaHQpIHRoZW4KICAgICAgcGxheWVyLnggPSBtYXRoLm1pbigyNDAsIHBsYXllci54ICsgMSkKICBlbmQKCmlmIGN0cmwucHJlc3Npbmcoa2V5cy51cCkgdGhlbgogICAgIHBsYXllci55ID0gbWF0aC5tYXgoMCwgcGxheWVyLnkgLSAxKQogIGVsc2VpZiBjdHJsLnByZXNzaW5nKGtleXMuZG93bikgdGhlbgogICAgICBwbGF5ZXIueSA9IG1hdGgubWluKDI0MCwgcGxheWVyLnkgKyAxKQogIGVuZAplbmQKCmZ1bmN0aW9uIF9kcmF3KCkKICAgZ2Z4LmNscygpCgogICBzaGFwZS5ncmFkaWVudCgwLCAwLCAyNTYsIDI1NiwgMywgNCkKCiAgIHNwci5kcmF3KDk2LCBwbGF5ZXIueCwgcGxheWVyLnkpCiAgIAplbmQK"},{"name":"Bouncing Bat","code":"bG9jYWwgUGxheWVyID0gewogIHggPSAxMjggLSAxNiwKICB5ID0gMTI4IC0gMTYsCiAgZHggPSAwLAogIGR5ID0gMAp9CiAgCmZ1bmN0aW9uIF9pbml0KCkKICAgbG9jYWwgc2VlZCA9IG1hdGgucm5kKCkKICAgcGxheWVyID0gbmV3KFBsYXllciwgewogICAgICAgZHggPSBtYXRoLmNvcyhzZWVkKSAqIDMsIAogICAgICAgZHkgPSBtYXRoLnNpbihzZWVkKSAqIDMKICAgfSkKZW5kCgpmdW5jdGlvbiBfdXBkYXRlKCkKICAgaWYgY3RybC5wcmVzc2VkKGtleXMuc3BhY2UpIHRoZW4KICAgICBfaW5pdCgpCiAgIGVuZAogICBwbGF5ZXIueCA9IHBsYXllci54ICsgcGxheWVyLmR4CiAgIHBsYXllci55ID0gcGxheWVyLnkgKyBwbGF5ZXIuZHkKICAgaWYgcGxheWVyLnggPiAyNDAgb3IgcGxheWVyLnggPCAwIHRoZW4KICAgICAgcGxheWVyLmR4ID0gcGxheWVyLmR4ICogLTEKICAgZW5kCiAgIGlmIHBsYXllci55ID4gMjQwIG9yIHBsYXllci55IDwgMCB0aGVuCiAgICAgIHBsYXllci5keSA9IHBsYXllci5keSAqIC0xCiAgIGVuZAogICBwbGF5ZXIueCA9IG1hdGgubWF4KDAsIG1hdGgubWluKHBsYXllci54LCAyNDApKQogICBwbGF5ZXIueSA9IG1hdGgubWF4KDAsIG1hdGgubWluKHBsYXllci55LCAyNDApKQplbmQKCmZ1bmN0aW9uIF9kcmF3KCkKICBnZnguY2xzKCkKICBzcHIuZHJhdygxMjAsIHBsYXllci54LCBwbGF5ZXIueSkKZW5kCg=="},{"name":"Perlin and dither","code":"ZnVuY3Rpb24gX2RyYXcoKQogICAgZ2Z4LmNscygxKQoKICAgIGdmeC5kaXRoZXIoMHgwMDAxKQogICAgbG9jYWwgeCA9IG1hdGgucGVybGluKDAuMSwgMC4yLCB0aW55LmZyYW1lIC8gMTAwKQogICAgbG9jYWwgeSA9IG1hdGgucGVybGluKDAuNCwgMC41LCB0aW55LmZyYW1lIC8gMTAwKQogICAgc2hhcGUuY2lyY2xlZih4ICogMjU2LCB5ICogMjU2LCA2NCwgNykKCiAgICBsb2NhbCB4ID0gbWF0aC5wZXJsaW4oMC45LCAwLjcsIHRpbnkuZnJhbWUgLyAxMDApCiAgICBsb2NhbCB5ID0gbWF0aC5wZXJsaW4oMC4zLCAwLjEsIHRpbnkuZnJhbWUgLyAxMDApCiAgICBzaGFwZS5jaXJjbGVmKHggKiAyNTYsIHkgKiAyNTYsIDMyLCA3KQoKICAgIGxvY2FsIHggPSBtYXRoLnBlcmxpbigwLjMsIDAuMSwgdGlueS5mcmFtZSAvIDEwMCkKICAgIGxvY2FsIHkgPSBtYXRoLnBlcmxpbigwLjIsIDAuNCwgdGlueS5mcmFtZSAvIDEwMCkKICAgIHNoYXBlLmNpcmNsZWYoeCAqIDI1NiwgeSAqIDI1NiwgNTYsIDcpCgogICAgZ2Z4LmRpdGhlcigpCgogICAgZm9yIHh4ID0gNjQsIDI1NiAtIDY0LCA0IGRvCiAgICAgICAgbG9jYWwgYWRqdXN0ID0gbWF0aC5wZXJsaW4oeHggLyA2NCwgMC4xLCB0aW55LmZyYW1lIC8gNTApCiAgICAgICAgc2hhcGUuY2lyY2xlZih4eCAtIDEsIDEyNiArIGFkanVzdCAqIDgsIDgsIDcpCiAgICAgICAgc2hhcGUuY2lyY2xlZih4eCArIDEsIDEyNiArIGFkanVzdCAqIDgsIDgsIDcpCiAgICAgICAgc2hhcGUuY2lyY2xlZih4eCwgMSArIDEyNiArIGFkanVzdCAqIDgsIDgsIDcpCiAgICAgICAgc2hhcGUuY2lyY2xlZih4eCwgLTEgKyAxMjYgKyBhZGp1c3QgKiA4LCA4LCA3KQogICAgZW5kCgogICAgZm9yIHh4ID0gNjQsIDI1NiAtIDY0LCA0IGRvCiAgICAgICAgbG9jYWwgYWRqdXN0ID0gbWF0aC5wZXJsaW4oeHggLyA2NCwgMC4xLCB0aW55LmZyYW1lIC8gNTApCiAgICAgICAgc2hhcGUuY2lyY2xlZih4eCwgMTI2ICsgYWRqdXN0ICogOCwgOCwgMSkgICAgCiAgICBlbmQKCiAgICBsb2NhbCB0eHQgPSAiaGVsbG8gd29ybGQgIgogICAgbG9jYWwgbGV0dGVyID0gMQogICAgZm9yIHh4ID0gNjQsIDI1NiAtIDY0LCA0IGRvCiAgICAgICAgbG9jYWwgYWRqdXN0ID0gbWF0aC5wZXJsaW4oeHggLyA2NCwgMC4xLCB0aW55LmZyYW1lIC8gNTApCiAgICAgICAgcHJpbnQoc3RyaW5nLnN1Yih0eHQsIGxldHRlciwgbGV0dGVyKSwgMSArIHh4LCAxMjQgKyBhZGp1c3QgKiA4LCA3KQogICAgICAgIHByaW50KHN0cmluZy5zdWIodHh0LCBsZXR0ZXIsIGxldHRlciksIC0xICsgeHgsIDEyNCArIGFkanVzdCAqIDgsIDcpCiAgICAgICAgcHJpbnQoc3RyaW5nLnN1Yih0eHQsIGxldHRlciwgbGV0dGVyKSwgeHgsIDEgKyAxMjQgKyBhZGp1c3QgKiA4LCA3KQogICAgICAgIHByaW50KHN0cmluZy5zdWIodHh0LCBsZXR0ZXIsIGxldHRlciksIHh4LCAtMSArIDEyNCArIGFkanVzdCAqIDgsIDcpCgogICAgICAgIHByaW50KHN0cmluZy5zdWIodHh0LCBsZXR0ZXIsIGxldHRlciksIHh4LCAxMjQgKyBhZGp1c3QgKiA4LCAxKQoKICAgICAgICBsZXR0ZXIgPSBtYXRoLm1heCgxLCAobGV0dGVyICsgMSkgJSAoI3R4dCArIDEpKQogICAgZW5kCmVuZAoK"}]'>
117128
function _init()
@@ -127,6 +138,7 @@ function _draw()
127138
end
128139
</tiny-editor>
129140
</div>
141+
</div>
130142
{% endblock %}
131143

132144
{% block pageScripts %}

0 commit comments

Comments
 (0)