switch from blogofile to jekyll for building the site

[i3/i3.github.io] / screenshots / index.html

diff --git a/screenshots/index.html b/screenshots/index.html
new file mode 100644 (file)
index 0000000..d321c52
--- /dev/null
+++ b/screenshots/index.html
@@ -0,0 +1,114 @@
+---
+layout: default
+title: Screens
+group: Screens
+require_jquery: true
+javascript: gallery.min.2.js
+js_callback: initGallery();
+---
+<div id="mask">
+</div>
+
+<div id="loading">
+</div>
+
+<div id="bigimg">
+    <div id="maskouter">
+        <div id="maskinner">
+            <div id="imgleft">
+            </div>
+            <div id="imgright">
+            </div>
+           <div id="imgdesc">
+           <span class="filename">i3-2.png</span>
+           <span class="description">VIM, MPlayer</span>
+           </div>
+        </div>
+    </div>
+</div>
+
+<div id="content">
+
+<h2>Latest Videos</h2>
+
+<div id="screencasts">
+    <div class="video clearfix">
+        <a href="http://www.youtube.com/watch?v=Wx0eNaGzAZU" title="Watch i3 screencast v4.1 on YouTube">
+        <img src="/img/screencast-3.d.thumb.png" width="240" height="150" border="0" alt="Screencast thumbnail" style="float: left">
+        </a>
+        <div style="float: left">
+            <strong>Screencast of v4.1</strong>
+            <p>
+            This video (5 min) shows the basic features of i3:
+            </p>
+            <ul>
+                <li>Layouts, Focus, Moving, Workspaces</li>
+                <li>dmenu, Floating Windows, Resizing</li>
+            </ul>
+            <p>
+            <a href="http://www.youtube.com/watch?v=Wx0eNaGzAZU">Watch it on YouTube</a> or <a href="/screenshots/screencast-4.1.mp4">download it (18 MB)</a>.
+            </p>
+        </div>
+    </div>
+
+    <br style="clear: both">
+    <br>
+
+    <div class="video clearfix">
+        <a href="http://www.youtube.com/watch?v=AWA8Pl57UBY" title="Watch i3 container and tree data structure screencast on YouTube">
+        <img src="/img/screencast-cons.thumb.jpg" width="240" height="135" border="0" alt="tech talk thumbnail" style="float: left">
+        </a>
+        <div style="float: left">
+            <strong>Screencast: Containers and tree data structure</strong>
+           <p style="white-space: pre">Explains how i3 works internally so
+that you can fully understand what's going on. I expect you to have
+watched the screencast on v4.1 already.</p>
+            <p>
+            <a href="http://www.youtube.com/watch?v=AWA8Pl57UBY">Watch it on YouTube</a>
+            </p>
+        </div>
+    </div>
+
+    <br style="clear: both">
+    <br>
+
+    <div class="video clearfix">
+        <a href="http://www.youtube.com/watch?v=QnYN2CTb1hM" title="Watch i3 google tech talk on YouTube">
+        <img src="/img/techtalk.thumb.jpg" width="240" height="135" border="0" alt="tech talk thumbnail" style="float: left">
+        </a>
+        <div style="float: left">
+            <strong>Google Tech Talk about i3</strong>
+            <p style="white-space: pre">This video (1 hour) is an introduction to i3, explaining our
+motivation, a bit of history, some cool features and how we
+develop.</p>
+            <p>
+            <a href="http://www.youtube.com/watch?v=QnYN2CTb1hM">Watch it on YouTube</a>
+            </p>
+        </div>
+    </div>
+</div>
+
+<h2>Screenshots</h2>
+
+<p>
+To get a quick impression of i3, have a look at these screenshots.
+</p>
+
+<div class="screenshots clearfix">
+{% include screenshot.html link="/screenshots/i3-1.png" thumb="/screenshots/i3-1.thumb.png" description="Vimperator, VIM, MPlayer, dzen2" %}
+{% include screenshot.html link="/screenshots/i3-2.png" thumb="/screenshots/i3-2.thumb.png" description="Vimperator, VIM, xpdf, bc" %}
+{% include screenshot.html link="/screenshots/i3-3.png" thumb="/screenshots/i3-3.thumb.png" description="PCManFM, ROXTerm, evince" %}
+<br>
+{% include screenshot.html link="/screenshots/i3-4.png" thumb="/screenshots/i3-4.thumb.png" description="i3 logo out of terminals" %}
+{% include screenshot.html link="/screenshots/i3-6.png" thumb="/screenshots/i3-6.thumb.png" description="VIM, zsh, i3status (FreeBSD)" %}
+{% include screenshot.html link="/screenshots/i3-7.png" thumb="/screenshots/i3-7.thumb.png" description="GIMP, urxvt (both floating)" %}
+<br>
+{% include screenshot.html link="/screenshots/i3-5.png" thumb="/screenshots/i3-5.thumb.png" description="mc, xosview, MPlayer, irssi, gajim" %}
+{% include screenshot.html link="/screenshots/i3-8.jpg" thumb="/screenshots/i3-8.thumb.jpg" description="git, synergy, htop, urxvt" %}
+{% include screenshot.html link="/screenshots/i3-9.png" thumb="/screenshots/i3-9.thumb.png" description="VIM, git, MPlayer, i3bar" %}
+<br>
+{% include screenshot.html link="/screenshots/i3-10.png" thumb="/screenshots/i3-10.thumb.png" description="Right-to-left titles" %}
+{% include screenshot.html link="/screenshots/i3-11.jpg" thumb="/screenshots/i3-11.thumb.jpg" description="dzen2, VIM, bash, top" %}
+</div>
+
+</div>