screencast: better description, better thumbnail, add links

diff --git a/css/style.css b/css/style.css
index 1007944bb2c2283119e99b2018cdc87d6465016b..675b010ca6d71ae602b4a33192fd2b05656a5d68 100644 (file)
--- 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 (file)
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 70a741f44a5d5431f6e30751194d770246e46304..c3f15ec5966d124decd602d210b8cd4c215ffc61 100644 (file)
--- 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>