floating image support

content/thethirdcan.md

@@ -1,5 +1,9 @@
 +++
 title = "the third can"
+
+[extra]
+image = "/ttc_config.png"
+image_desc = "a screenshot of The Third Can's configuration page, v0.2.0"
 +++
 
 i made a browser extension with [theki](https://theki.club) and contributions from [sandvich](https://sandvich.xyz). it adds lots of useful features to [TwoCans](https://twocansandstring.com).

sass/style.scss

@@ -1,6 +1,7 @@
 $fave: #aa71fa;
 $off-dark: #1b181e;
 $body-bg: #d5bbf9;
+$body-bg-light: #e1ccff;
 $code-bg: #baa6d8;
 $code-block-bg: #2b303b;
 
@@ -83,6 +84,19 @@ code {
   border-radius: 0.25em;
 }
 
+#main-image {
+  float: right;
+  border: 0.15em solid $off-dark;
+  border-radius: 0.3em;
+  padding: 0.3em;
+  margin-right: -2em;
+  background-color: $body-bg-light;
+  max-width: 50%;
+  img {
+    width: 100%;
+  }
+}
+
 @font-face {
   font-family: lipamanka;
   src: url(/linjamanka.woff);

templates/base.html

@@ -15,6 +15,13 @@
     <a href="/why-zinc">why zinc</a>
   </div>
   <div class="block">
+    {% if page.extra.image and page.extra.image_desc %}
+    <div id="main-image">
+      <img src="{{ page.extra.image }}" alt="{{ page.extra.image_desc }}">
+      <br>
+      {{ page.extra.image_desc }}
+    </div>
+    {% endif %}
     {% block content %} {% endblock %}
   </div>
   <div class="block" id="footer">