Skip to content

Redraw the shortcut section icons on one grid #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marcosqlbi merged 1 commit into from
Aug 21, 2026
Merged

Redraw the shortcut section icons on one grid #58

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions site/shortcuts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,11 @@ <h1>Shortcuts</h1>
<div class="wrap narrow inner">
<nav class="chipnav" aria-label="Shortcut groups">
<a href="#pen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>Pen</a>
<a href="#mouse"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="3" width="12" height="18" rx="6"/><path d="M12 3v7"/></svg>Mouse</a>
<a href="#touch"><svg viewBox="390 242 320 400" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="m547.1 259.93c-74.945 0-136.03 61.082-136.03 136.03 0 29.52 8.7656 61.004 25.504 84.309v0.003906c2.3477 3.2578 5.8945 5.4531 9.8594 6.0977 3.9648 0.64453 8.0234-0.31641 11.281-2.6641 3.2578-2.3516 5.4492-5.8984 6.0898-9.8672 0.64062-3.9648-0.32031-8.0234-2.6719-11.281-11.766-16.379-19.836-43.527-19.836-66.598 0-58.609 47.188-105.8 105.8-105.8 58.609 0 105.8 47.188 105.8 105.8 0 23.066-8.0703 50.219-19.836 66.598h-0.003906c-2.3477 3.2578-3.3086 7.3164-2.668 11.281 0.64453 3.9609 2.832 7.5078 6.0898 9.8594 3.2578 2.3477 7.3164 3.3047 11.281 2.6641 3.9609-0.64062 7.5078-2.832 9.8594-6.0898 16.742-23.305 25.504-54.789 25.504-84.309 0-74.949-61.082-136.03-136.03-136.03zm0 105.8c-33.23 0-60.457 27.227-60.457 60.457v208.06c-9.3594-20.23-26.156-42.102-47.23-47.469-28.672-7.7852-63.793 15.152-71.793 41.801-4.0781 14.852-1.418 31.758 6.6133 52.426 39.262 94.41 87.605 185.05 146.42 253.88 2.8125 3.2344 7.0508 5.1758 11.336 5.1953h204.04c3.2148 0 6.4102-1.1289 8.9727-3.0703 21.754-16.117 39.289-43.57 53.844-76.281 14.555-32.711 25.699-70.656 31.41-107.69 5.7109-37.031 5.6875-71.711-2.3633-102.49-7.7695-29.711-28.73-54.438-59.984-58.094-7.3672 0-15.148 0.61328-21.727 2.125-3.875-9.2695-9.3086-17.172-16.059-21.961-11.301-8.0195-22.805-10.547-32.117-10.391-8.9414 0.15234-17.098 3.4062-24.324 8.5-3.25-4.9609-6.5977-10.125-10.863-13.227-11.203-8.1367-23.125-10.391-32.59-10.391-7.8281 0-15.41 2.1719-22.672 5.1953v-126.11c-0.64062-40.453-32.547-60.535-60.457-60.457zm0 30.23c17.008 0 30.23 13.219 30.23 30.23v158.7c-0.097656 6.8516 5.1289 13.344 11.809 14.879 6.6758 1.5312 14.105-2.0586 17.004-8.2656 3.3398-6.9414 15.918-14.168 24.09-14.168 3.668 0 10.473 1.5234 14.879 4.7227 4.4023 3.1992 7.793 6.9414 7.793 17.949 0 6.7188 5.0391 13.074 11.57 14.641 6.5352 1.5664 13.945-1.8125 17.004-7.793 6.1445-12.293 9.4375-14.277 17.004-14.406 2.0938 0 9.4297 1.3594 14.168 4.7227 4.7383 3.3633 8.2656 7.2305 8.2656 17.949-0.074219 5.8867 3.5781 11.586 8.9727 13.934 5.3984 2.3477 12.258 1.2148 16.531-2.832 5.7305-2.8242 11.352-3.6836 18.656-3.543 18.02 2.293 27.375 13.586 33.77 36.133 6.457 22.754 6.6953 55.281 1.418 89.504-5.2773 34.227-15.711 70.164-29.047 100.13-12.504 28.105-27.82 50.055-41.328 61.402h-190.58c-53.051-62.586-103.71-158.69-136.74-239.7-6.875-17.695-7.4961-27.855-5.9023-33.535 5.6016-14.617 21.273-22.871 34.715-20.781 16.07 6.0508 20.051 16.773 26.922 29.047l29.992 60.219c3.0586 5.9844 10.469 9.3594 17.004 7.793 6.5352-1.5664 11.559-7.9219 11.57-14.641v-272.06c0-17.008 13.219-30.23 30.23-30.23z"/></svg>Touch</a>
<a href="#mouse"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="2" width="14" height="20" rx="7"/><path d="M12 6v4"/></svg>Mouse</a>
<a href="#touch"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11.5 10.5V4.5a2.25 2.25 0 0 0-4.5 0V15"/><path d="M11.5 11.5a2.25 2.25 0 0 1 4.5 0V15a7 7 0 0 1-7 7 6 6 0 0 1-4.25-1.76l-3.4-3.4a2 2 0 0 1 2.83-2.83L8 16"/></svg>Touch</a>
<a href="#keyboard"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M8 14h8"/></svg>Keyboard</a>
<a href="#double-click"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="3" width="12" height="18" rx="6"/><path d="M14 3v7"/><path d="M5.6 5.2A2 2 0 0 0 5.6 9"/><path d="M3.6 3.8A3.4 3.4 0 0 0 3.6 10.4"/></svg>Double-click</a>
<a href="#tools"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>Palette and commands</a>
<a href="#double-click"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.2 2.2 8 5.1"/><path d="M14 4.1 12 6"/><path d="m5.1 8-2.9-.8"/><path d="m6 12-1.9 2"/><path fill="currentColor" d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074Z"/></svg>Double-click</a>
<a href="#tools"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8Z"/><circle cx="8.5" cy="7.5" r="1" fill="currentColor" stroke="none"/><circle cx="13.5" cy="6.5" r="1" fill="currentColor" stroke="none"/><circle cx="17.5" cy="10.5" r="1" fill="currentColor" stroke="none"/><circle cx="6.5" cy="12.5" r="1" fill="currentColor" stroke="none"/></svg>Palette</a>
</nav>
<input class="keyfilter" id="filter" type="search" placeholder="Filter commands" aria-label="Filter shortcuts">
</div>
Expand All @@ -60,7 +60,7 @@ <h1>Shortcuts</h1>
<main class="wrap narrow" id="main">

<section class="keygroup" id="session">
<h2>In every session</h2>
<h2><span class="secico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14h6l-2 8 12-12h-6l2-8L4 14Z"/></svg></span>In every session</h2>
<div class="quickgrid">
<div class="quick"><kbd>F6</kbd><span class="what">Format DAX or SQL</span></div>
<div class="quick"><kbd>F2</kbd><span class="what">Edit the text container</span></div>
Expand All @@ -86,7 +86,7 @@ <h2><span class="secico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"
</section>

<section class="keygroup" id="mouse">
<h2><span class="secico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="3" width="12" height="18" rx="6"/><path d="M12 3v7"/></svg></span>Mouse</h2>
<h2><span class="secico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="7"/><path d="M12 6v4"/></svg></span>Mouse</h2>
<div class="keyrows">
<div class="keyrow"><span><kbd class="gesture">Movement</kbd></span><span class="act">A physical mouse shows the normal arrow.</span></div>
<div class="keyrow"><span><kbd class="gesture">Left button</kbd></span><span class="act">Select, move, or resize a container. Release returns to the previous drawing tool.</span></div>
Expand All @@ -99,7 +99,7 @@ <h2><span class="secico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"
</section>

<section class="keygroup" id="touch">
<h2><span class="secico" aria-hidden="true"><svg viewBox="390 242 320 400"><path fill="currentColor" fill-rule="evenodd" d="m547.1 259.93c-74.945 0-136.03 61.082-136.03 136.03 0 29.52 8.7656 61.004 25.504 84.309v0.003906c2.3477 3.2578 5.8945 5.4531 9.8594 6.0977 3.9648 0.64453 8.0234-0.31641 11.281-2.6641 3.2578-2.3516 5.4492-5.8984 6.0898-9.8672 0.64062-3.9648-0.32031-8.0234-2.6719-11.281-11.766-16.379-19.836-43.527-19.836-66.598 0-58.609 47.188-105.8 105.8-105.8 58.609 0 105.8 47.188 105.8 105.8 0 23.066-8.0703 50.219-19.836 66.598h-0.003906c-2.3477 3.2578-3.3086 7.3164-2.668 11.281 0.64453 3.9609 2.832 7.5078 6.0898 9.8594 3.2578 2.3477 7.3164 3.3047 11.281 2.6641 3.9609-0.64062 7.5078-2.832 9.8594-6.0898 16.742-23.305 25.504-54.789 25.504-84.309 0-74.949-61.082-136.03-136.03-136.03zm0 105.8c-33.23 0-60.457 27.227-60.457 60.457v208.06c-9.3594-20.23-26.156-42.102-47.23-47.469-28.672-7.7852-63.793 15.152-71.793 41.801-4.0781 14.852-1.418 31.758 6.6133 52.426 39.262 94.41 87.605 185.05 146.42 253.88 2.8125 3.2344 7.0508 5.1758 11.336 5.1953h204.04c3.2148 0 6.4102-1.1289 8.9727-3.0703 21.754-16.117 39.289-43.57 53.844-76.281 14.555-32.711 25.699-70.656 31.41-107.69 5.7109-37.031 5.6875-71.711-2.3633-102.49-7.7695-29.711-28.73-54.438-59.984-58.094-7.3672 0-15.148 0.61328-21.727 2.125-3.875-9.2695-9.3086-17.172-16.059-21.961-11.301-8.0195-22.805-10.547-32.117-10.391-8.9414 0.15234-17.098 3.4062-24.324 8.5-3.25-4.9609-6.5977-10.125-10.863-13.227-11.203-8.1367-23.125-10.391-32.59-10.391-7.8281 0-15.41 2.1719-22.672 5.1953v-126.11c-0.64062-40.453-32.547-60.535-60.457-60.457zm0 30.23c17.008 0 30.23 13.219 30.23 30.23v158.7c-0.097656 6.8516 5.1289 13.344 11.809 14.879 6.6758 1.5312 14.105-2.0586 17.004-8.2656 3.3398-6.9414 15.918-14.168 24.09-14.168 3.668 0 10.473 1.5234 14.879 4.7227 4.4023 3.1992 7.793 6.9414 7.793 17.949 0 6.7188 5.0391 13.074 11.57 14.641 6.5352 1.5664 13.945-1.8125 17.004-7.793 6.1445-12.293 9.4375-14.277 17.004-14.406 2.0938 0 9.4297 1.3594 14.168 4.7227 4.7383 3.3633 8.2656 7.2305 8.2656 17.949-0.074219 5.8867 3.5781 11.586 8.9727 13.934 5.3984 2.3477 12.258 1.2148 16.531-2.832 5.7305-2.8242 11.352-3.6836 18.656-3.543 18.02 2.293 27.375 13.586 33.77 36.133 6.457 22.754 6.6953 55.281 1.418 89.504-5.2773 34.227-15.711 70.164-29.047 100.13-12.504 28.105-27.82 50.055-41.328 61.402h-190.58c-53.051-62.586-103.71-158.69-136.74-239.7-6.875-17.695-7.4961-27.855-5.9023-33.535 5.6016-14.617 21.273-22.871 34.715-20.781 16.07 6.0508 20.051 16.773 26.922 29.047l29.992 60.219c3.0586 5.9844 10.469 9.3594 17.004 7.793 6.5352-1.5664 11.559-7.9219 11.57-14.641v-272.06c0-17.008 13.219-30.23 30.23-30.23z"/></svg></span>Touch</h2>
<h2><span class="secico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.5 10.5V4.5a2.25 2.25 0 0 0-4.5 0V15"/><path d="M11.5 11.5a2.25 2.25 0 0 1 4.5 0V15a7 7 0 0 1-7 7 6 6 0 0 1-4.25-1.76l-3.4-3.4a2 2 0 0 1 2.83-2.83L8 16"/></svg></span>Touch</h2>
<div class="keyrows">
<div class="keyrow"><span><kbd class="gesture">One finger</kbd></span><span class="act">Pan. Suspended while the pen is in contact. With Finger drawing on, uses the current tool instead.</span></div>
<div class="keyrow"><span><kbd class="gesture">Two fingers</kbd></span><span class="act">Pan and pinch zoom. With Finger drawing on, also cancels the in-progress finger stroke.</span></div>
Expand Down Expand Up @@ -129,15 +129,15 @@ <h2><span class="secico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"
</section>

<section class="keygroup" id="double-click">
<h2><span class="secico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="3" width="12" height="18" rx="6"/><path d="M14 3v7"/><path d="M5.6 5.2A2 2 0 0 0 5.6 9"/><path d="M3.6 3.8A3.4 3.4 0 0 0 3.6 10.4"/></svg></span>Double-click</h2>
<h2><span class="secico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.2 2.2 8 5.1"/><path d="M14 4.1 12 6"/><path d="m5.1 8-2.9-.8"/><path d="m6 12-1.9 2"/><path fill="currentColor" d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074Z"/></svg></span>Double-click</h2>
<div class="keyrows">
<div class="keyrow"><span><kbd class="gesture">On a container</kbd></span><span class="act">Center it and fit it to the canvas.</span></div>
<div class="keyrow"><span><kbd class="gesture">On empty canvas</kbd></span><span class="act">Center and fit all content, or reset an empty board.</span></div>
</div>
</section>

<section class="keygroup" id="tools">
<h2><span class="secico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></span>Palette and commands</h2>
<h2><span class="secico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8Z"/><circle cx="8.5" cy="7.5" r="1" fill="currentColor" stroke="none"/><circle cx="13.5" cy="6.5" r="1" fill="currentColor" stroke="none"/><circle cx="17.5" cy="10.5" r="1" fill="currentColor" stroke="none"/><circle cx="6.5" cy="12.5" r="1" fill="currentColor" stroke="none"/></svg></span>Palette and commands</h2>
<div class="keyrows">
<div class="keyrow"><span><kbd class="gesture">Pen</kbd></span><span class="act">Pressure-aware ink. Selected at startup.</span></div>
<div class="keyrow"><span><kbd class="gesture">Highlighter</kbd></span><span class="act">Translucent stroke. Marks a line without covering it.</span></div>
Expand Down