--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>i3 Reference Card</title>
+ <link rel="stylesheet" href="refcard_style.css" />
+ <style type="text/css">
+ * { margin: 0; padding: 0; vertical-align: middle; }
+ html { font-family: LinuxLibertine, Linux Libertine O, Linux Libertine, serif; font-size: 15px; /* column-count: 3; column-gap: 10px; -moz-column-count: 3; -moz-column-gap: 10px; -webkit-column-count: 3; -webkit-column-gap: 10px; */ }
+ body > div { display: inline-block; width: 33%; margin: 0.25%; vertical-align: top; }
+ body > div:first-child { margin-left: 0; }
+ body > div:last-child { margin-right: 0; }
+ #logo { float: left; width: 40px; margin: 7px; }
+ header { font-size: 1.1em; text-align: center; }
+ h1 { font-size: 1.1em; }
+ header a { font-size: 0.7em; }
+ header p { margin: 5px 0; font-size: 0.8em; text-align: left; }
+ kbd { font-family: LinuxBiolinumKeyboard, Linux Biolinum Keyboard O, Linux Biolinum Keyboard, DejaVu Sans Mono, monospace; font-size: 0.9em; }
+ code { font-family: DejaVu Sans Mono, monospace; font-size: 0.8em; }
+ section { break-inside: avoid-column; -moz-break-inside: -moz-avoid-column; -webkit-break-inside: avoid-column; }
+ h2 { margin: 7px 0 2px; padding: 2px 4px; font-size: 1.1em; font-family: LinuxBiolinum, Linux Biolinum O, Linux Biolinum, sans; background-color: #b3b3b3; }
+ table { width: 100%; }
+ .i3mod { width: 15px; }
+ td:last-child { text-align: right; }
+ .ref { font-size: 0.8em; }
+ #copyright { margin: 20px 0 15px; font-size: 0.7em; text-align: center; }
+ #licence { max-width: 70%; margin: 3px auto; font-size: 0.6em; text-align: right; }
+ </style>
+ <style type="text/css" media="print">
+ html { font-size: 13px; }
+ </style>
+</head>
+<body><div>
+ <header>
+ <img id="logo" src="logo-30.png" alt="" />
+ <h1>i3 Reference Card</h1>
+ <a href="http://i3wm.org/docs/userguide.html">http://i3wm.org/docs/userguide.html</a>
+ <p>
+ Throughout this guide, the i3 logo will be used to refer to the configured modifier.
+ This is the <kbd></kbd> key (<code>Mod1</code>) by default,
+ with super/<kbd></kbd> (<code>Mod4</code>) being a popular alternative.
+ </p>
+ </header>
+
+ <section>
+ <h2>Basics</h2>
+ <table>
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd></kbd>
+ <td>open new terminal
+
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd>j</kbd>
+ <td>focus left
+
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd>k</kbd>
+ <td>focus down
+
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd>l</kbd>
+ <td>focus up
+
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd>;</kbd>
+ <td>focus right
+ </table>
+ </section>
+
+
+ <section>
+ <h2>Changing the container layout</h2>
+ <table>
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd>e</kbd>
+ <td>default
+
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd>s</kbd>
+ <td>stacking
+
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd>w</kbd>
+ <td>tabbed
+ </table>
+ </section>
+
+</div><div>
+
+ <section>
+ <h2>Fullscreen mode</h2>
+ <table>
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd>f</kbd>
+ <td>toggle fullscreen
+ </table>
+ </section>
+
+
+ <section>
+ <h2>Opening other applications</h2>
+ <table>
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd>d</kbd>
+ <td>open application (with dmenu)
+ </table>
+
+
+ <section>
+ <h2>Closing windows</h2>
+ <table>
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd> </kbd>+ <kbd>q</kbd>
+ <td>kill a window
+ </table>
+ </section>
+
+
+ <section>
+ <h2>Using workspaces</h2>
+ <table>
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd>1</kbd>–<kbd>9</kbd>
+ <td>switch to another workspace
+ </table>
+ </section>
+
+
+ <section>
+ <h2>Moving windows to workspaces</h2>
+ <table>
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd></kbd> + <kbd>1</kbd>–<kbd>9</kbd>
+ <td>move a window to another workspace
+ </table>
+ </section>
+
+</div><div>
+
+ <section>
+ <h2>Resizing</h2>
+ <p class="ref">Look at “Resizing containers / windows” section of the user guide.</p>
+ </section>
+
+
+ <section>
+ <h2>Restart / Exit</h2>
+ <table>
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd></kbd> + <kbd>r</kbd>
+ <td>restart i3 inplace
+
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd></kbd> + <kbd>e</kbd>
+
+ </section><td>exit i3
+ </table>
+
+
+ <section>
+ <h2>Floating</h2>
+ <table>
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd></kbd> + <kbd></kbd>
+ <td>toggle floating
+
+ <tr>
+ <td><img class="i3mod" src="logo-30.png" alt="" />+<kbd></kbd>
+ <td>drag floating
+ </table>
+ </section>
+
+ <!-- footer -->
+ <p id="copyright">
+ Copyright © 2012, Michael Stapelberg
+ <br />
+ All rights reserved
+ <br />
+ Designed by Zeus Panchenko
+ </p>
+ <p id="licence">
+ Permission is granted to copy, distribute and/or modify this document provided
+ the copyright notice and this permission notice are preserved on all copies.
+ </p>
+</div></body>
+</html>