add pictures to landing points

assets/landing/websocket.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="193" preserveAspectRatio="xMidYMid"><path fill="#18a18e" d="M192 145h32V68l-36-35-22 22 26 27v63Zm32 16H113l-26-27 11-11 22 22h45l-44-45 11-11 44 44V88l-21-22 11-11-55-55H0l32 32h65l24 23-34 34-24-23V48H32v31l55 55-23 22 36 36h156l-32-31Z"/></svg>

layouts/index.html

@@ -14,42 +14,72 @@
   <section class="features">
     <article>
       <div class="maxw">
-        <header>One API for everything</header>
+        <div class="flex">
-        <p>
+          <div>
-          Build overlays and tooling with easy access to Twitch alerts, chat
+            <header>One API for everything</header>
-          messages and more through a single websocket interface.
+            <p>
-        </p>
+              Build overlays and tooling with easy access to Twitch alerts, chat
+              messages and more through a single websocket interface.
+            </p>
+          </div>
+          {{ $image := resources.Get "landing/websocket.svg" }}
+          <img
+            class="landing-point"
+            src="{{ $image.RelPermalink }}"
+            style="width: 200px; padding-left: 20px"
+          />
+        </div>
       </div>
     </article>
     <article>
       <div class="maxw">
-        <header>No Twitch Affiliate?</header>
+        <div class="flex">
-        <p>
+          {{ $image := resources.Get "landing/rewards.png" }}
-          Our loyalty system lets regular viewers accrue points, claim rewards
+          <img class="landing-point" src="{{ $image.RelPermalink }}" />
-          and contribute towards community goals.
+          <div>
-        </p>
+            <header>No Twitch Affiliate?</header>
+            <p>
+              Our loyalty system lets regular viewers accrue points, claim
+              rewards and contribute towards community goals.
+            </p>
+          </div>
+        </div>
       </div>
     </article>
     <article>
       <div class="maxw">
-        <header>Keep total control</header>
+        <div class="flex">
-        <p>
+          <div class="flex-copy">
-          strimertül runs completely in your computer and has no remote
+            <header>Keep total control</header>
-          components.
+            <p>
-        </p>
+              strimertül runs completely in your computer and has no remote
+              components.
+            </p>
+          </div>
+          {{ $image := resources.Get "landing/downloads.png" }}
+          <img class="landing-point" src="{{ $image.RelPermalink }}" />
+        </div>
       </div>
     </article>
     <article>
       <div class="maxw">
-        <header>Won't turn evil</header>
+        <div class="flex">
-        <p>
+          {{ $image := resources.Get "landing/AGPLv3_Logo.svg" }}
-          strimertül is licensed under
+          <img class="landing-point" src="{{ $image.RelPermalink }}" />
-          <a href="https://github.com/strimertul/strimertul/blob/master/LICENSE"
+          <div>
-            >AGPLv3</a
+            <header>Won't turn evil</header>
-          >, a strong
+            <p>
-          <a href="https://en.wikipedia.org/wiki/Copyleft">copyleft license</a>,
+              strimertül is licensed under
-          meaning we couldn't close it down even if we wanted!
+              <a
-        </p>
+                href="https://github.com/strimertul/strimertul/blob/master/LICENSE"
+                >AGPLv3</a
+              >, a strong
+              <a href="https://en.wikipedia.org/wiki/Copyleft"
+                >copyleft license</a
+              >, meaning we couldn't close it down even if we wanted!
+            </p>
+          </div>
+        </div>
       </div>
     </article>
   </section>

themes/strimertul/assets/scss/landing.scss

@@ -4,6 +4,22 @@
     margin: 0 auto;
     width: 100%;
   }
+  .flex {
+    display: flex;
+    gap: 30px;
+    padding: 10px 0;
+    .flex-copy {
+      flex: 1;
+    }
+  }
+  .landing-point {
+    width: 300px;
+    opacity: 0.8;
+
+    @media only screen and (max-width: $mobile) {
+      display: none;
+    }
+  }
   .features {
     display: flex;
     flex-direction: column;
@@ -24,8 +40,9 @@
         display: flex;
         align-items: flex-end;
         font-weight: bold;
-        font-size: 18px;
+        font-size: 20px;
         padding-top: 10px;
+        padding-bottom: 5px;
       }
     }
   }