📚 Merge penpot/penpot-docs repository

docs/user-guide/introduction/index.njk

@@ -0,0 +1,26 @@
+---
+title: 01· Introduction
+---
+
+<h1 id="section-1">Introduction</h1>
+
+<ul class="intro-sections">
+  <li>
+    <a href="/user-guide/introduction/quickstart">
+      <h2>Quickstart →</h2>
+      <p>Ways to start with Penpot</p>
+    </a>
+  </li>
+  <li>
+    <a href="/user-guide/introduction/shortcuts">
+      <h2>Shortcuts →</h2>
+      <p>Speed your design workflow</p>
+    </a>
+  </li>
+  <li>
+    <a href="/user-guide/introduction/info">
+      <h2>Info & tutorials →</h2>
+      <p>Info of interest about Penpot</p>
+    </a>
+  </li>
+</ul>

docs/user-guide/introduction/info.njk

@@ -0,0 +1,21 @@
+---
+title: Tutorials & info
+---
+
+<h1 id="section-1-1">Tutorials & info</h1>
+
+<p class="main-paragraph">Some useful links to better understand Penpot through answers and tutorials.</p>
+
+<h2 id="dev-diaries">Dev Diaries</h2>
+<p>The Dev Diaries are our release notes, where we jot down every new feature, enhancement and fix included in every release. There are also kudos to community contributors <3</p>
+
+<p>Wanna know what's new? take a look at our <a href="https://penpot.app/dev-diaries" target="_blank">Dev Diaries</a>.</p>
+
+<h2 id="video-tutorials">Video tutorials</h2>
+<p>Suscribe to the <a href="https://www.youtube.com/channel/UCAqS8G72uv9P5HG1IfgnQ9g" target="_blank">Penpot Youtube channel</a> to get updates when we upload new Penpot tutorials, demos of features and talks.</p>
+
+<h2 id="faqs">Frequently asked questions</h2>
+<p>If you have questions about the "Whys" or the "Hows" of Penpot we have collected and answered a bunch of the most common questions that we've been asked so far at our <a href="https://community.penpot.app/c/faq/17">Frequently Asked Questions</a>.</p>
+
+<h2 id="faqs">Community space</h2>
+<p>We launched a community space to allow for everyone to be part of the conversation. <a href="https://community.penpot.app/" target="_blank">Join the community here</a>.</p>

docs/user-guide/introduction/quickstart.njk

@@ -0,0 +1,15 @@
+---
+title: Quickstart
+---
+
+<h1 id="section-1-1">Quickstart</h1>
+
+<p class="main-paragraph">You can start using Penpot right in your browser or installing it in a server of your own.</p>
+
+<h2>In your browser</h2>
+<p>To use Penpot online point your browser to <a href="https://design.penpot.app" target="_blank">design.penpot.app</a> and start designing. Use the latest Google Chrome or Mozilla Firefox for the best experience. We also provide specific support to WebKit (Safari / Epiphany).</p>
+<p>You can also go to <a href="https://penpot.app" target="_blank">penpot.app</a> if you want to read more about Penpot and our new releases. There, click on the Signup button. You will be asked to create an account. We only ask for an email. There are some authentication providers available too.</p>
+
+<h2>On your own server</h2>
+<p>Currently, private Penpot instances only require basic Docker knowledge.</p>
+<p>You can run your own Penpot server following the instructions at the <a href="/technical-guide/getting-started">Technical Guide</a></p>

docs/user-guide/introduction/shortcuts.njk

@@ -0,0 +1,935 @@
+---
+title: Shortcuts
+---
+
+<h1 id="section-1-1">Shortcuts</h1>
+
+<p class="main-paragraph">Penpot provides shortcuts that help to speed your workflow. Many keyboard shortcuts appear next to the command names in menus.</p>
+
+<p class="main-paragraph">Here you can find a list of all keyboard shortcuts that you can use in Penpot. Bear in mind that most of them are at the workspace, where they are more needed.</p>
+
+<p>You can also check the most updated list of shortcuts at the <a href="https://github.com/penpot/penpot/blob/develop/frontend/src/app/main/data/workspace/shortcuts.cljs" target="_blank">GitHub file</a>.</p>
+
+<h2 id="workspace-section"> Workspace </h2>
+<p>The Workspace is where the designs are actually created. <a href="/user-guide/the-interface/#interface-workspace">More about the Workspace</a>.</p>
+<h3 id="alignment">Item Alignment</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Align bottom</td>
+      <td style="text-align: center;"><kbd>Alt</kbd><kbd>S</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd><kbd>S</kbd></td>
+    </tr>
+    <tr>
+      <td>Align center horizontally</td>
+      <td style="text-align: center;"><kbd>Alt</kbd><kbd>H</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd><kbd>H</kbd></td>
+    </tr>
+    <tr>
+      <td>Align center vertically</td>
+      <td style="text-align: center;"><kbd>Alt</kbd><kbd>V</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd><kbd>V</kbd></td>
+    </tr>
+    <tr>
+      <td>Align left</td>
+      <td style="text-align: center;"><kbd>Alt</kbd><kbd>A</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd><kbd>A</kbd></td>
+    </tr>
+    <tr>
+      <td>Align right</td>
+      <td style="text-align: center;"><kbd>Alt</kbd><kbd>D</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd><kbd>D</kbd></td>
+    </tr>
+    <tr>
+      <td>Align top</td>
+      <td style="text-align: center;"><kbd>Alt</kbd><kbd>W</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd><kbd>W</kbd></td>
+    </tr>
+    <tr>
+      <td>Distribute horizontally</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>Alt</kbd><kbd>H</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>⌥</kbd><kbd>H</kbd></td>
+    </tr>
+    <tr>
+      <td>Distribute vertically</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>Alt</kbd><kbd>V</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>⌥</kbd><kbd>V</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="edit">Edit</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Cancel</td>
+      <td style="text-align: center;"><kbd>Esc</kbd></td>
+      <td style="text-align: center;"><kbd>Esc</kbd></td>
+    </tr>
+    <tr>
+      <td>Clear undo</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Q</kbd></td>
+      <td style="text-align: center;"><kbd>Alt</kbd><kbd>Q</kbd></td>
+    </tr>
+    <tr>
+      <td>Copy</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>C</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>C</kbd></td>
+    </tr>
+    <tr>
+      <td>Cut</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>X</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>X</kbd></td>
+    </tr>
+    <tr>
+      <td>Delete</td>
+      <td style="text-align: center;"><kbd>Supr</kbd> or <kbd>Delete</kbd></td>
+      <td style="text-align: center;"><kbd>⌫</kbd></td>
+    </tr>
+    <tr>
+      <td>Duplicate</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>D</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>D</kbd></td>
+    </tr>
+    <tr>
+      <td>Paste</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>V</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>V</kbd></td>
+    </tr>
+    <tr>
+      <td>Redo</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>Z</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>Z</kbd></td>
+    </tr>
+    <tr>
+      <td>Start/Stop measurement</td>
+      <td style="text-align: center;"><kbd>Alt</kbd> or <kbd>.</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd> or <kbd>.</kbd></td>
+    </tr>
+    <tr>
+      <td>Start editing</td>
+      <td style="text-align: center;"><kbd>Enter</kbd></td>
+      <td style="text-align: center;"><kbd>Enter</kbd></td>
+    </tr>
+    <tr>
+      <td>Undo</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Z</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>Z</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h3 id="main-menu">Main menu</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Switch color theme</td>
+      <td style="text-align: center;"><kbd>Alt</kbd><kbd>M</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd><kbd>M</kbd></td>
+    </tr>
+    <tr>
+      <td>Export shapes</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>E</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>E</kbd></td>
+    </tr>
+    <tr>
+      <td>Select all</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>A</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>A</kbd></td>
+    </tr>
+    <tr>
+      <td>Set thumbnails</td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>T</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd><kbd>T</kbd></td>
+    </tr>
+    <tr>
+      <td>Show/hide grid</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>'</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>'</kbd></td>
+    </tr>
+    <tr>
+      <td>Show/hide pixel grid</td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>,</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd><kbd>,</kbd></td>
+    </tr>
+    <tr>
+      <td>Show/hide rulers</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>R</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>R</kbd></td>
+    </tr>
+    <tr>
+      <td>Show/hide shortcuts</td>
+      <td style="text-align: center;"><kbd>?</kbd></td>
+      <td style="text-align: center;"><kbd>?</kbd></td>
+    </tr>
+    <tr>
+      <td>Snap to grid</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>'</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>'</kbd></td>
+    </tr>
+    <tr>
+      <td>Snap to guides</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>G</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>G</kbd></td>
+    </tr>
+    <tr>
+      <td>Snap to pixel grid</td>
+      <td style="text-align: center;"><kbd>,</kbd></td>
+      <td style="text-align: center;"><kbd>,</kbd></td>
+    </tr>
+    <tr>
+      <td>Toggle dynamic alignment</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>\</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>\</kbd></td>
+    </tr>
+    <tr>
+      <td>Toggle scale tool</td>
+      <td style="text-align: center;"><kbd>K</kbd></td>
+      <td style="text-align: center;"><kbd>K</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="modify-layers">Modify layers</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Bring forward</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>↑</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>↑</kbd></td>
+    </tr>
+    <tr>
+      <td>Bring to front</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>↑</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>↑</kbd></td>
+    <tr>
+    <tr>
+      <td>Create artboard from selection</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>G</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⌥</kbd><kbd>G</kbd></td>
+    <tr>
+    <tr>
+      <td>Create component</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>K</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>K</kbd></td>
+    </tr>
+    <tr>
+      <td>Detach component</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>K</kbd></td>
+    </tr>
+    <tr>
+      <td>Flip horizontal</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>H</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>H</kbd></td>
+    </tr>
+    <tr>
+      <td>Flip vertical</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>V</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>V</kbd></td>
+    </tr>
+    <tr>
+      <td>Group</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>G</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>G</kbd></td>
+    </tr>
+    <tr>
+      <td>Mask</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>M</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>M</kbd></td>
+    </tr>
+    <tr>
+      <td>Move down</td>
+      <td style="text-align: center;"><kbd>↓</kbd></td>
+      <td style="text-align: center;"><kbd>↓</kbd></td>
+    </tr>
+    <tr>
+      <td>Move down fast</td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>↓</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd><kbd>↓</kbd></td>
+    </tr>
+    <tr>
+      <td>Move left</td>
+      <td style="text-align: center;"><kbd>←</kbd></td>
+      <td style="text-align: center;"><kbd>←</kbd></td>
+    </tr>
+    <tr>
+      <td>Move left fast</td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>←</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd><kbd>←</kbd></td>
+    </tr>
+    <tr>
+      <td>Move right</td>
+      <td style="text-align: center;"><kbd>→</kbd></td>
+      <td style="text-align: center;"><kbd>→</kbd></td>
+    </tr>
+    <tr>
+      <td>Move right fast</td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>→</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd><kbd>→</kbd></td>
+    </tr>
+    <tr>
+      <td>Move up</td>
+      <td style="text-align: center;"><kbd>↑</kbd></td>
+      <td style="text-align: center;"><kbd>↑</kbd></td>
+    </tr>
+    <tr>
+      <td>Move up fast</td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>↑</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd><kbd>↑</kbd></td>
+    </tr>
+    <tr>
+      <td>Send backwards</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>↓</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>↓</kbd></td>
+    </tr>
+    <tr>
+      <td>Send to back</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>↓</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>↓</kbd></td>
+    </tr>
+
+    <tr>
+      <td>Set opacity to 10%</td>
+      <td style="text-align: center;"><kbd>1</kbd></td>
+      <td style="text-align: center;"><kbd>1</kbd></td>
+    </tr>
+    <tr>
+      <td>Set opacity to 20%</td>
+      <td style="text-align: center;"><kbd>2</kbd></td>
+      <td style="text-align: center;"><kbd>2</kbd></td>
+    </tr>
+      <tr>
+      <td>Set opacity to 30%</td>
+      <td style="text-align: center;"><kbd>3</kbd></td>
+      <td style="text-align: center;"><kbd>3</kbd></td>
+    </tr>
+      <tr>
+      <td>Set opacity to 40%</td>
+      <td style="text-align: center;"><kbd>4</kbd></td>
+      <td style="text-align: center;"><kbd>4</kbd></td>
+    </tr>
+    <tr>
+      <td>Set opacity to 50%</td>
+      <td style="text-align: center;"><kbd>5</kbd></td>
+      <td style="text-align: center;"><kbd>5</kbd></td>
+    </tr>
+    <tr>
+      <td>Set opacity to 60%</td>
+      <td style="text-align: center;"><kbd>6</kbd></td>
+      <td style="text-align: center;"><kbd>6</kbd></td>
+    </tr>
+    <tr>
+      <td>Set opacity to 70%</td>
+      <td style="text-align: center;"><kbd>7</kbd></td>
+      <td style="text-align: center;"><kbd>7</kbd></td>
+    </tr>
+    <tr>
+      <td>Set opacity to 80%</td>
+      <td style="text-align: center;"><kbd>8</kbd></td>
+      <td style="text-align: center;"><kbd>8</kbd></td>
+    </tr>
+    <tr>
+      <td>Set opacity to 90%</td>
+      <td style="text-align: center;"><kbd>9</kbd></td>
+      <td style="text-align: center;"><kbd>9</kbd></td>
+    </tr>
+    <tr>
+      <td>Set opacity to 100%</td>
+      <td style="text-align: center;"><kbd>0</kbd></td>
+      <td style="text-align: center;"><kbd>0</kbd></td>
+    </tr>
+    <tr>
+      <td>Ungroup</td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>G</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd><kbd>G</kbd></td>
+    </tr>
+    <tr>
+      <td>Unmask</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>M</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>M</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="goto-screens-workspace">Navigation</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Go to dashboard</td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>D</kbd></td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>D</kbd></td>
+    </tr>
+    <tr>
+      <td>Go to view mode inspect section</td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>H</kbd></td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>H</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="panels">Panels</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Assets</td>
+      <td style="text-align: center;"><kbd>Alt</kbd><kbd>I</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd><kbd>I</kbd></td>
+    </tr>
+    <tr>
+      <td>Color palette</td>
+      <td style="text-align: center;"><kbd>Alt</kbd><kbd>P</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd><kbd>P</kbd></td>
+    </tr>
+    <tr>
+      <td>History</td>
+      <td style="text-align: center;"><kbd>Alt</kbd><kbd>H</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd><kbd>H</kbd></td>
+    </tr>
+    <tr>
+      <td>Layers</td>
+      <td style="text-align: center;"><kbd>Alt</kbd><kbd>L</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd><kbd>L</kbd></td>
+    </tr>
+    <tr>
+      <td>Show/hide UI</td>
+      <td style="text-align: center;"><kbd>\</kbd></td>
+      <td style="text-align: center;"><kbd>\</kbd></td>
+    </tr>
+    <tr>
+      <td>Text palette</td>
+      <td style="text-align: center;"><kbd>Alt</kbd><kbd>T</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd><kbd>T</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="path-editor">Path editor</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Add node</td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>+</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd><kbd>+</kbd></td>
+    </tr>
+    <tr>
+      <td>Delete node</td>
+      <td style="text-align: center;"><kbd>Supr</kbd> or <kbd>Delete</kbd></td>
+      <td style="text-align: center;"><kbd>⌫</kbd></td>
+    </tr>
+    <tr>
+      <td>Draw Path</td>
+      <td style="text-align: center;"><kbd>P</kbd></td>
+      <td style="text-align: center;"><kbd>P</kbd></td>
+    </tr>
+    <tr>
+      <td>Join nodes</td>
+      <td style="text-align: center;"><kbd>J</kbd></td>
+      <td style="text-align: center;"><kbd>J</kbd></td>
+    </tr>
+    <tr>
+      <td>Make corner</td>
+      <td style="text-align: center;"><kbd>X</kbd></td>
+      <td style="text-align: center;"><kbd>X</kbd></td>
+    </tr>
+    <tr>
+      <td>Make curve</td>
+      <td style="text-align: center;"><kbd>C</kbd></td>
+      <td style="text-align: center;"><kbd>C</kbd></td>
+    </tr>
+    <tr>
+      <td>Merge nodes</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>J</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>J</kbd></td>
+    </tr>
+    <tr>
+      <td>Move Nodes</td>
+      <td style="text-align: center;"><kbd>M</kbd></td>
+      <td style="text-align: center;"><kbd>M</kbd></td>
+    </tr>
+    <tr>
+      <td>Separate nodes</td>
+      <td style="text-align: center;"><kbd>K</kbd></td>
+      <td style="text-align: center;"><kbd>K</kbd></td>
+    </tr>
+    <tr>
+      <td>Snap to nodes</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>'</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>'</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="shapes">Shapes</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Boolean difference</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>D</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⌥</kbd><kbd>D</kbd></td>
+    </tr>
+    <tr>
+      <td>Boolean exclude</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>E</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⌥</kbd><kbd>E</kbd></td>
+    </tr>
+    <tr>
+      <td>Boolean intersection</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>I</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⌥</kbd><kbd>I</kbd></td>
+    </tr>
+    <tr>
+      <td>Boolean union</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>U</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⌥</kbd><kbd>U</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="tools">Tools</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Board</td>
+      <td style="text-align: center;"><kbd>B</kbd></td>
+      <td style="text-align: center;"><kbd>B</kbd></td>
+    </tr>
+    <tr>
+      <td>Curve</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>C</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>C</kbd></td>
+    </tr>
+    <tr>
+      <td>Ellipse</td>
+      <td style="text-align: center;"><kbd>E</kbd></td>
+      <td style="text-align: center;"><kbd>E</kbd></td>
+    </tr>
+    <tr>
+      <td>Image</td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>K</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd><kbd>K</kbd></td>
+    </tr>
+    <tr>
+      <td>Path</td>
+      <td style="text-align: center;"><kbd>P</kbd></td>
+      <td style="text-align: center;"><kbd>P</kbd></td>
+    </tr>
+    <tr>
+      <td>Rectangle</td>
+      <td style="text-align: center;"><kbd>R</kbd></td>
+      <td style="text-align: center;"><kbd>R</kbd></td>
+    </tr>
+    <tr>
+      <td>Text</td>
+      <td style="text-align: center;"><kbd>T</kbd></td>
+      <td style="text-align: center;"><kbd>T</kbd></td>
+    </tr>
+    <tr>
+      <td>Flex Layout</td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>A</kbd></td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>A</kbd></td>
+    </tr>
+    <tr>
+      <td>Grid Layout</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>A</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>Shift</kbd><kbd>A</kbd></td>
+    </tr>
+    <tr>
+      <td>Color picker</td>
+      <td style="text-align: center;"><kbd>I</kbd></td>
+      <td style="text-align: center;"><kbd>I</kbd></td>
+    </tr>
+    <tr>
+      <td>Comments</td>
+      <td style="text-align: center;"><kbd>C</kbd></td>
+      <td style="text-align: center;"><kbd>C</kbd></td>
+    </tr>
+    <tr>
+      <td>Lock Proportions</td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>L</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd><kbd>L</kbd></td>
+    </tr>
+    <tr>
+      <td>Lock selected</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>L</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>L</kbd></td>
+    </tr>
+    <tr>
+      <td>Move</td>
+      <td style="text-align: center;"><kbd>V</kbd></td>
+      <td style="text-align: center;"><kbd>V</kbd></td>
+    </tr>
+    <tr>
+      <td>Toggle focus mode</td>
+      <td style="text-align: center;"><kbd>F</kbd></td>
+      <td style="text-align: center;"><kbd>F</kbd></td>
+    </tr>
+    <tr>
+      <td>Toggle scale text</td>
+      <td style="text-align: center;"><kbd>K</kbd></td>
+      <td style="text-align: center;"><kbd>K</kbd></td>
+    </tr>
+    <tr>
+      <td>Toggle visibility</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>H</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>H</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="zoom-workspace">Zoom</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Reset zoom to 100%</td>
+      <td style="text-align: center;"><kbd>Shift</kbd> <kbd>0</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>0</kbd></td>
+    </tr>
+    <tr>
+      <td>Zoom in</td>
+      <td style="text-align: center;"><kbd>+</kbd> <br><br> <kbd>Ctrl</kbd> Scrollwheel <br><br> Pinch out (trackpad)</td>
+      <td style="text-align: center;"><kbd>+</kbd> <br><br> <kbd>Option</kbd> Scrollwheel <br><br> Option-swipe (Magic Mouse) <br><br> Pinch out (trackpad) <br></td>
+    </tr>
+    <tr>
+      <td>Zoom to fit all</td>
+      <td style="text-align: center;"><kbd>Shift</kbd> <kbd>1</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>1</kbd></td>
+    </tr>
+    <tr>
+      <td>Zoom to selected</td>
+      <td style="text-align: center;"><kbd>Shift</kbd> <kbd>2</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>2</kbd></td>
+    </tr>
+    <tr>
+      <td>Zoom out</td>
+      <td style="text-align: center;"><kbd>-</kbd> <br><br> <kbd>Ctrl</kbd> Scrollwheel <br><br> Pinch in (trackpad)</td>
+      <td style="text-align: center;"><kbd>-</kbd> <br><br> <kbd>Option</kbd> Scrollwheel <br><br> Option-swipe (Magic Mouse) <br> Pinch in (trackpad) <br></td>
+    </tr>
+    <tr>
+      <td>Zoom lense in</td>
+      <td style="text-align: center;"><kbd>Z</kbd></td>
+      <td style="text-align: center;"><kbd>Z</kbd></td>
+    </tr>
+    <tr>
+      <td>Zoom lense out</td>
+      <td style="text-align: center;"><kbd>Alt</kbd> <kbd>Z</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd> <kbd>Z</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h3 id="text">Text edition</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Bold</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>B</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd> <kbd>B</kbd></td>
+    </tr>
+    <tr>
+      <td>Italic</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>I</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd> <kbd>I</kbd></td>
+    </tr>
+    <tr>
+      <td>Underline</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>U</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd> <kbd>U</kbd></td>
+    </tr>
+    <tr>
+      <td>Strikethrough</td>
+      <td style="text-align: center;"><kbd>Shift</kbd> <kbd>Alt</kbd> <kbd>5</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd> <kbd>⌥</kbd> <kbd>5</kbd></td>
+    </tr>
+    <tr>
+      <td>Increase font size</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>RIGHT</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>RIGHT</kbd></td>
+    </tr>
+    <tr>
+      <td>Decrease font size</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>LEFT</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>LEFT</kbd></td>
+    </tr>
+    <tr>
+      <td>Increase letter spacing</td>
+      <td style="text-align: center;"><kbd>Alt</kbd> <kbd>UP</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd> <kbd>UP</kbd></td>
+    </tr>
+    <tr>
+      <td>Decrease letter spacing</td>
+      <td style="text-align: center;"><kbd>Alt</kbd> <kbd>DOWN</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd> <kbd>DOWN</kbd></td>
+    </tr>
+    <tr>
+      <td>Increase line height</td>
+      <td style="text-align: center;"><kbd>Shift</kbd> <kbd>Alt</kbd> <kbd>UP</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd> <kbd>⌥</kbd> <kbd>UP</kbd></td>
+    </tr>
+    <tr>
+      <td>Decrease line height</td>
+      <td style="text-align: center;"><kbd>Shift</kbd> <kbd>Alt</kbd> <kbd>DOWN</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd> <kbd>⌥</kbd> <kbd>DOWN</kbd></td>
+    </tr>
+    <tr>
+      <td>Align left</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>L</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd> <kbd>⌥</kbd> <kbd>L</kbd></td>
+    </tr>
+    <tr>
+      <td>Align right</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>R</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd> <kbd>⌥</kbd> <kbd>R</kbd></td>
+    </tr>
+    <tr>
+      <td>Align center</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>T</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd> <kbd>⌥</kbd> <kbd>T</kbd></td>
+    </tr>
+    <tr>
+      <td>Justify</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>J</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd> <kbd>⌥</kbd> <kbd>J</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="dashboard-section"> Dashboard </h2>
+<p>The Dashboard is the place where you will be able to organize your files, libraries, projects and teams. <a href="/user-guide/the-interface/#interface-dashboard">More about the Dashboard</a>.</p>
+
+<h3 id="generic-dashboard">Generic</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Switch color theme</td>
+      <td style="text-align: center;"><kbd>Alt</kbd><kbd>M</kbd></td>
+      <td style="text-align: center;"><kbd>⌥</kbd><kbd>M</kbd></td>
+    </tr>
+    <tr>
+      <td>Create new project</td>
+      <td style="text-align: center;"><kbd>+</kbd></td>
+      <td style="text-align: center;"><kbd>+</kbd></td>
+    </tr>
+    <tr>
+      <td>Create new file (Inside project)</td>
+      <td style="text-align: center;"><kbd>+</kbd></td>
+      <td style="text-align: center;"><kbd>+</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="navigation-dashboard">Navigation</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Go to shared libraries</td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>L</kbd></td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>L</kbd></td>
+    </tr>
+    <tr>
+      <td>Go to drafts</td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>D</kbd></td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>D</kbd></td>
+    </tr>
+    <tr>
+      <td>Search</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>F</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>F</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="viewer-section"> View mode </h2>
+<p>The View mode is the area to present and share designs and play the proptotype interactions. <a href="/user-guide/the-interface/#interface-viewmode">More about the View mode</a>.</p>
+
+<h3 id="generic-viewer">Generic</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Next frame</td>
+      <td style="text-align: center;"><kbd>→</kbd></td>
+      <td style="text-align: center;"><kbd>→</kbd></td>
+    </tr>
+    <tr>
+      <td>Previous frame</td>
+      <td style="text-align: center;"><kbd>←</kbd></td>
+      <td style="text-align: center;"><kbd>←</kbd></td>
+    </tr>
+    <tr>
+      <td>Select all</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>A</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>A</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="navigation-viewer">Navigation</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Go to comment section</td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>C</kbd></td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>C</kbd></td>
+    </tr>
+    <tr>
+      <td>Go to inspect section</td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>H</kbd></td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>H</kbd></td>
+    </tr>
+    <tr>
+      <td>Go to interactions section</td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>V</kbd></td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>V</kbd></td>
+    </tr>
+    <tr>
+      <td>Go to workspace</td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>W</kbd></td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>W</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="zoom-viewer">Zoom</h3>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Zoom in</td>
+      <td style="text-align: center;"><kbd>+</kbd> <br><br> <kbd>Ctrl</kbd> Scrollwheel <br><br> Pinch out (trackpad)</td>
+      <td style="text-align: center;"><kbd>+</kbd> <br><br> <kbd>Option</kbd> Scrollwheel <br><br> Option-swipe (Magic Mouse) <br><br> Pinch out (trackpad) <br></td>
+    </tr>
+    <tr>
+      <td>Zoom out</td>
+      <td style="text-align: center;"><kbd>-</kbd> <br><br> <kbd>Ctrl</kbd> Scrollwheel <br><br> Pinch in (trackpad)</td>
+      <td style="text-align: center;"><kbd>-</kbd> <br><br> <kbd>Option</kbd> Scrollwheel <br><br> Option-swipe (Magic Mouse) <br> Pinch in (trackpad) <br></td>
+    </tr>
+    <tr>
+      <td>Reset zoom to 100%</td>
+      <td style="text-align: center;"><kbd>Shift</kbd> <kbd>0</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd> <kbd>0</kbd></td>
+    </tr>
+    <tr>
+      <td>Toggle zoom style</td>
+      <td style="text-align: center;"><kbd>F</kbd></td>
+      <td style="text-align: center;"><kbd>F</kbd></td>
+    </tr>
+    <tr>
+      <td>Toggle fullscreen</td>
+      <td style="text-align: center;"> <kbd>Shift</kbd>  <kbd>F</kbd></td>
+      <td style="text-align: center;"> <kbd>⇧</kbd>  <kbd>F</kbd></td>
+    </tr>
+  </tbody>
+</table>