Merge pull request #9 from endlessm/screenshots

Screenshots: simplify, style alt text

_includes/head.html

@@ -37,5 +37,4 @@
   <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,300&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" type="text/css" media="all" href="{{ '/css/main.css' | absolute_url | append: '?v=' | append: site.time }}">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.6.0/tiny-slider.css">
 </head>

_layouts/app.html

@@ -20,7 +20,15 @@ <h1>{{ page.title }}</h1>
 
 <div class="main">
 
-  {% include screenshots.html %}
+  {% if page.screenshots %}
+    <section class="screenshots constrain">
+      <img
+        alt="Screenshot of {{ page.title }}"
+        srcset="{{ page.screenshots[0] | absolute_url }}"
+        src="{{ site.baseurl }}/images/dotted-box-symbolic.svg"
+      />
+    </section>
+  {% endif %}
 
   <section class="description constrain">
     <h2>{{ page.summary }}</h2>

_sass/_apps.scss

@@ -1,38 +1,36 @@
 .screenshots {
-  background-color: rgba(150, 150, 150, 0.125);
-}
-
-.screenshots img {
-  display: block;
-  max-width: 100%;
-  max-height: 450px;
-  margin: 0 auto;
-}
-
-.pager {
-  display:flex;
-  justify-content: center;
-  padding: 12px 0;
+  align-items: center;
+  // Weird aspect ratio of legacy screenshots (16:9 minus bottom bar?)
+  aspect-ratio: 24 / 13;
+  background: rgba(150, 150, 150, 0.125);
+  display: flex;
 
-  span {
+  img {
     display: block;
-    width: 0.75em;
-    height: 0.75em;
-    background: #666;
-    border-radius: 50%;
-    margin: 0 8px;
-    cursor: pointer;
-    opacity: 0.5;
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
 
-    &:active,
-    &:focus {
-      outline: 0;
-      border: none;
+    &::before {
+      display: block;
+      text-align: center;
     }
-  }
 
-  .tns-nav-active {
-    opacity: 1;
+    &::after {
+      // We want it to match the color of the container over the page background,
+      // but it needs to be opaque to cover the browser's default alt text (which
+      // is not consistently stylable)
+      background-image:
+        linear-gradient(to bottom, rgba(150, 150, 150, 0.125), rgba(150, 150, 150, 0.125)),
+        linear-gradient(to bottom, var(--bg),  var(--bg));
+      bottom: 0;
+      content: attr(alt);
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+      text-align: center;
+      top: 0;
+    }
   }
 }
-