templates/screenshot.stpl

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <meta charset="UTF-8">
   5     <meta http-equiv="X-UA-Compatible" content="IE-edge">
   6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7     <meta name="keywords" content="luflow, <%= self.title %>, Overview">
   8     <meta name="description" content="<%= self.title %>.">
   9     <link type="application/atom+xml" rel="alternate" title="luflow.net — Activity Feed" href="/feeds/blog.atom">
  10     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  11     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  12     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  13     <link rel="icon" type="image/svg+xml" sizes="any" href="/static/img/icon.svg" />
  14     <link rel="manifest" href="/site.webmanifest">
  15     <link rel="stylesheet" href="/static/css/common.css">
  16     <link rel="stylesheet" href="/static/css/item-preview.css">
  17     <link rel="stylesheet" href="/static/css/breadcrumbs.css">
  18     <link rel="stylesheet" href="/static/css/header.css">
  19     <link rel="stylesheet" href="/static/css/footer.css">
  20     <link rel="stylesheet" href="/static/css/index.css">
  21     <title><%= self.title %> | luflow.net</title>
  22 </head>
  23 <body>
  24     <div id="content">
  25
  26         <% include!("./partials/header.stpl"); %>
  27
  28         <% include!("./partials/screenshot_breadcrumbs.stpl"); %>
  29
  30         <main>
  31             <section class="light-text centered-text noise-bg">
  32                 <h2 class="a11y-offset"><%= self.title %></h2>
  33                 <div class="screenshot-viewer">
  34                     <img class="responsive-image centered-block" src="/<%= self.image_big %>" alt="<%= self.title %>" />
  35                 </div>
  36                 <div class="screenshots-box top-shadow-bg">
  37                     <%
  38                         for screenshot in &self.screenshots {
  39                             if self.title == screenshot.title {
  40                                 continue; // skip currently viewed big:
  41                             }
  42                     %>
  43                     <div class="screenshot-preview">
  44                         <a href="/<%= screenshot.url %>/">
  45                             <img class="responsive-image" src="/<%= screenshot.image_min %>" alt="" />
  46                             <span class="screenshot-inset-shadow"></span>
  47                         </a>
  48                         <p class="screenshot-preview-description"><%= screenshot.title %>
  49                             <span class="hidden">.</span>
  50                         </p>
  51                     </div>
  52                     <% } %>
  53                 </div>
  54             </section>
  55         </main>
  56
  57         <% include!("./partials/footer.stpl"); %>
  58
  59     </div>
  60
  61     <% include!("./partials/script_core.stpl"); %>
  62     <script>
  63         // make menu item active visually:
  64         let menuItem = document.getElementById("Screenshots");
  65         if (menuItem)
  66         {
  67             menuItem.classList.add("menu-item-active");
  68         }
  69     </script>
  70
  71 </body>
  72 </html>
  73