From: Michael Stapelberg <michael@stapelberg.de>
Date: Fri, 22 Jul 2011 12:00:45 +0000 (+0200)
Subject: screencast: better description, better thumbnail, add links
X-Git-Url: https://git.sur5r.net/?a=commitdiff_plain;h=635f3ba16dba319dff8c06c4e5a0ebb561901643;p=i3%2Fi3.github.io

screencast: better description, better thumbnail, add links
---

diff --git a/css/style.css b/css/style.css
index 1007944..675b010 100644
--- a/css/style.css
+++ b/css/style.css
@@ -222,6 +222,15 @@ h1#title {
     margin-right: 1em;
 }
 
+#screencasts li {
+    margin-bottom: 0.25em;
+}
+
+#screencasts p, #screencasts ul {
+    margin-top: 0.35em;
+    margin-bottom: 0.35em;
+}
+
 .imgdesc {
     margin-bottom: 1em;
 }
diff --git a/img/screencast-3.d.thumb.png b/img/screencast-3.d.thumb.png
new file mode 100644
index 0000000..70631bc
Binary files /dev/null and b/img/screencast-3.d.thumb.png differ
diff --git a/screenshots/index.html.mako b/screenshots/index.html.mako
index 70a741f..c3f15ec 100644
--- a/screenshots/index.html.mako
+++ b/screenshots/index.html.mako
@@ -24,22 +24,27 @@
 
 <h2>Latest Video</h2>
 
-<div class="video clearfix">
-<img src="http://i1.ytimg.com/vi/pKfP7Ws-CN8/default.jpg" width="240" style="float: left">
-<div style="float: left; padding-top: 0.25em">
-<strong>Screencast of v3.δ</strong>
-<p>
-This video shows the basic features of i3:
-</p>
-<ul>
-<li>Different layouts</li>
-<li>Meh</li>
-</ul>
-<p>
-Download it here.
-</p>
-</div>
-</div>
+<div id="screencasts">
+    <div class="video clearfix">
+        <a href="http://www.youtube.com/watch?v=pKfP7Ws-CN8" title="Watch i3 screencast v3.δ on YouTube">
+        <img src="/img/screencast-3.d.thumb.png" width="240" height="150" border="0" style="float: left">
+        </a>
+        <div style="float: left">
+            <strong>Screencast of v3.δ</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>
+                <li>Window Borders, Urgency Hint, i3lock, i3status</li>
+            </ul>
+            <p>
+            <a href="http://www.youtube.com/watch?v=pKfP7Ws-CN8">Watch it on YouTube</a> or <a href="/screenshots/screencast-3.d.mkv">download it (2.5 MB)</a>.
+            </p>
+        </div>
+    </div>
+<div>
 
 <h2>Screenshots</h2>