git.sur5r.net Git - i3/i3.github.io/blob - screenshots/index.html.mako

   1 <%!
   2         section = "screens"
   3         javascript = 'gallery.min.js'
   4         require_jquery = True
   5         js_callback = 'initGallery();'
   6 %>
   7 <%inherit file="_templates/i3.mako" />
   8
   9 <div id="mask">
  10 </div>
  11
  12 <div id="loading">
  13 </div>
  14
  15 <div id="bigimg">
  16     <div id="maskouter">
  17         <div id="maskinner">
  18             <div id="imgleft">
  19             </div>
  20             <div id="imgright">
  21             </div>
  22             <div id="imgdesc">
  23             <span class="filename">i3-2.png</span>
  24             <span class="description">VIM, MPlayer</span>
  25             </div>
  26         </div>
  27     </div>
  28 </div>
  29
  30 <div id="content">
  31
  32 <h2>Latest Video</h2>
  33
  34 <div id="screencasts">
  35     <div class="video clearfix">
  36         <a href="http://www.youtube.com/watch?v=pKfP7Ws-CN8" title="Watch i3 screencast v3.δ on YouTube">
  37         <img src="/img/screencast-3.d.thumb.png" width="240" height="150" border="0" alt="Screencast thumbnail" style="float: left">
  38         </a>
  39         <div style="float: left">
  40             <strong>Screencast of v3.δ</strong>
  41             <p>
  42             This video (5 min) shows the basic features of i3:
  43             </p>
  44             <ul>
  45                 <li>Layouts, Focus, Moving, Workspaces</li>
  46                 <li>dmenu, Floating Windows, Resizing</li>
  47                 <li>Window Borders, Urgency Hint, i3lock, i3status</li>
  48             </ul>
  49             <p>
  50             <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>.
  51             </p>
  52         </div>
  53     </div>
  54 </div>
  55
  56 <h2>Screenshots</h2>
  57
  58 <p>
  59 To get a quick impression of i3, have a look at these screenshots.
  60 </p>
  61
  62 <div class="screenshots clearfix">
  63 <%
  64         screens = [
  65                 [
  66                   "/screenshots/i3-1.png",
  67                   "/screenshots/i3-1.thumb.png",
  68                   "Vimperator, VIM, MPlayer, dzen2"
  69                 ],
  70                 [
  71                   "/screenshots/i3-2.png",
  72                   "/screenshots/i3-2.thumb.png",
  73                   "Vimperator, VIM, xpdf, bc"
  74                 ],
  75                 [
  76                   "/screenshots/i3-3.png",
  77                   "/screenshots/i3-3.thumb.png",
  78                   "PCManFM, ROXTerm, evince"
  79                 ],
  80                 [
  81                   "/screenshots/i3-4.png",
  82                   "/screenshots/i3-4.thumb.png",
  83                   "i3 logo out of terminals"
  84                 ],
  85                 [
  86                   "/screenshots/i3-6.png",
  87                   "/screenshots/i3-6.thumb.png",
  88                   "VIM, zsh, i3status (FreeBSD)"
  89                 ],
  90                 [
  91                   "/screenshots/i3-7.png",
  92                   "/screenshots/i3-7.thumb.png",
  93                   "GIMP, urxvt (both floating)"
  94                 ],
  95                 [
  96                   "/screenshots/i3-5.png",
  97                   "/screenshots/i3-5.thumb.png",
  98                   "mc, xosview, MPlayer, irssi, gajim"
  99                 ],
 100                 [
 101                   "/screenshots/i3-8.jpg",
 102                   "/screenshots/i3-8.thumb.jpg",
 103                   "git, synergy, htop, urxvt"
 104                 ],
 105                 [
 106                   "/screenshots/i3-9.png",
 107                   "/screenshots/i3-9.thumb.png",
 108                   "VIM, git, MPlayer, i3bar"
 109                 ]
 110
 111         ]
 112
 113         c = 0
 114 %>
 115 % for link, thumb, description in screens:
 116
 117     <div class="shot">
 118         <a href="${link}"><img src="${thumb}" width="240" alt="(Screenshot) ${description}"></a><br>
 119         <span>${description}</span>
 120     </div>
 121
 122 <% c += 1 %>
 123 % if (c % 3) == 0:
 124 <br>
 125 % endif
 126 % endfor
 127
 128 </div>
 129
 130 </div>