add day 17 of devlog

5 files changed, 119 insertions, 46 deletions

diff --git a/docs/index.html b/docs/index.html
index e151847..ef45474 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -42,7 +42,7 @@
     <tr>
         <td class=table-post>
             <div class="date">
-                01/04 — 2021
+                02/04 — 2021
             </div>
             <a href="/posts/SDL2_devlog" class="post-link">
                 <span class="post-link">SDL2 Devlog</span>
@@ -50,7 +50,7 @@
         </td>
         <td class=table-stats>
             <span class="stats-number">
-                7.5
+                8.1
             </span>
             <span class=stats-unit>min</span>
         </td>
diff --git a/docs/index.xml b/docs/index.xml
index e13ccbb..8d876b6 100644
--- a/docs/index.xml
+++ b/docs/index.xml
@@ -14,29 +14,50 @@
       <item>
 <title>SDL2 Devlog</title>
 <description>&lt;p&gt;I have been working on an editor for the &lt;a href="https://git.peppe.rs/graphics/obi/about"&gt;One Bit Image&lt;/a&gt; file format in Rust and SDL2. This entry in my blog follows my progress on the editor. The days are listed in reverse chronological order, begin from the bottom, if this is your first time on this page.&lt;/p&gt;
+&lt;h3 id="day-17"&gt;Day 17&lt;/h3&gt;
+&lt;p&gt;I decided to give the text-only statusline a touch up, by adding a active color and dither level preview. Aligning the “widget” to the right of statusline involved a lot more than I thought, so I created a ghetto CSS-like rectangle placement system to position containers inside containers:&lt;/p&gt;
+&lt;div class="sourceCode" id="cb1"&gt;&lt;pre class="sourceCode rust"&gt;&lt;code class="sourceCode rust"&gt;&lt;span id="cb1-1"&gt;&lt;a href="#cb1-1" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="co"&gt;// roughly something like this&lt;/span&gt;&lt;/span&gt;
+&lt;span id="cb1-2"&gt;&lt;a href="#cb1-2" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="kw"&gt;let&lt;/span&gt; statusline &lt;span class="op"&gt;=&lt;/span&gt; &lt;/span&gt;
+&lt;span id="cb1-3"&gt;&lt;a href="#cb1-3" aria-hidden="true"&gt;&lt;/a&gt;    &lt;span class="pp"&gt;Container::&lt;/span&gt;new(&lt;span class="pp"&gt;Offset::&lt;/span&gt;Left(&lt;span class="dv"&gt;0&lt;/span&gt;)&lt;span class="op"&gt;,&lt;/span&gt; &lt;span class="pp"&gt;Offset::&lt;/span&gt;Bottom(&lt;span class="dv"&gt;40&lt;/span&gt;))&lt;/span&gt;
+&lt;span id="cb1-4"&gt;&lt;a href="#cb1-4" aria-hidden="true"&gt;&lt;/a&gt;    &lt;span class="op"&gt;.&lt;/span&gt;width(&lt;span class="pp"&gt;Size::&lt;/span&gt;Max)&lt;/span&gt;
+&lt;span id="cb1-5"&gt;&lt;a href="#cb1-5" aria-hidden="true"&gt;&lt;/a&gt;    &lt;span class="op"&gt;.&lt;/span&gt;height(&lt;span class="pp"&gt;Size::&lt;/span&gt;Absolute(&lt;span class="dv"&gt;20&lt;/span&gt;))&lt;span class="op"&gt;;&lt;/span&gt;&lt;/span&gt;
+&lt;span id="cb1-6"&gt;&lt;a href="#cb1-6" aria-hidden="true"&gt;&lt;/a&gt;    &lt;/span&gt;
+&lt;span id="cb1-7"&gt;&lt;a href="#cb1-7" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="kw"&gt;let&lt;/span&gt; &lt;span class="kw"&gt;mut&lt;/span&gt; primary &lt;span class="op"&gt;=&lt;/span&gt; &lt;span class="pp"&gt;Container::&lt;/span&gt;uninit()&lt;/span&gt;
+&lt;span id="cb1-8"&gt;&lt;a href="#cb1-8" aria-hidden="true"&gt;&lt;/a&gt;    &lt;span class="op"&gt;.&lt;/span&gt;width(&lt;span class="pp"&gt;Size::&lt;/span&gt;Absolute(&lt;span class="dv"&gt;16&lt;/span&gt;))&lt;/span&gt;
+&lt;span id="cb1-9"&gt;&lt;a href="#cb1-9" aria-hidden="true"&gt;&lt;/a&gt;    &lt;span class="op"&gt;.&lt;/span&gt;height(&lt;span class="pp"&gt;Size::&lt;/span&gt;Absolute(&lt;span class="dv"&gt;16&lt;/span&gt;))&lt;span class="op"&gt;;&lt;/span&gt;&lt;/span&gt;
+&lt;span id="cb1-10"&gt;&lt;a href="#cb1-10" aria-hidden="true"&gt;&lt;/a&gt;&lt;/span&gt;
+&lt;span id="cb1-11"&gt;&lt;a href="#cb1-11" aria-hidden="true"&gt;&lt;/a&gt;container&lt;span class="op"&gt;.&lt;/span&gt;place(&lt;/span&gt;
+&lt;span id="cb1-12"&gt;&lt;a href="#cb1-12" aria-hidden="true"&gt;&lt;/a&gt;    &lt;span class="op"&gt;&amp;amp;&lt;/span&gt;&lt;span class="kw"&gt;mut&lt;/span&gt; padding_box&lt;span class="op"&gt;,&lt;/span&gt;&lt;/span&gt;
+&lt;span id="cb1-13"&gt;&lt;a href="#cb1-13" aria-hidden="true"&gt;&lt;/a&gt;    &lt;span class="pp"&gt;HorAlign::&lt;/span&gt;Right&lt;span class="op"&gt;,&lt;/span&gt;&lt;/span&gt;
+&lt;span id="cb1-14"&gt;&lt;a href="#cb1-14" aria-hidden="true"&gt;&lt;/a&gt;    &lt;span class="pp"&gt;VertAlign::&lt;/span&gt;Center&lt;/span&gt;
+&lt;span id="cb1-15"&gt;&lt;a href="#cb1-15" aria-hidden="true"&gt;&lt;/a&gt;)&lt;span class="op"&gt;;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
+&lt;p&gt;The result (brush preview on the bottom right):&lt;/p&gt;
+&lt;figure&gt;
+&lt;video src="https://u.peppe.rs/OtU.mp4" controls=""&gt;&lt;a href="https://u.peppe.rs/OtU.mp4"&gt;Day 17&lt;/a&gt;&lt;/video&gt;&lt;figcaption aria-hidden="true"&gt;Day 17&lt;/figcaption&gt;
+&lt;/figure&gt;
 &lt;h3 id="day-16"&gt;Day 16&lt;/h3&gt;
 &lt;p&gt;The embedded lisp is coming along nicely, users can load a custom &lt;code&gt;rc.lisp&lt;/code&gt;, which is evaluated on startup. To disable to grid on start, for example:&lt;/p&gt;
-&lt;div class="sourceCode" id="cb1"&gt;&lt;pre class="sourceCode scheme"&gt;&lt;code class="sourceCode scheme"&gt;&lt;span id="cb1-1"&gt;&lt;a href="#cb1-1" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="co"&gt;;;; rc.lisp&lt;/span&gt;&lt;/span&gt;
-&lt;span id="cb1-2"&gt;&lt;a href="#cb1-2" aria-hidden="true"&gt;&lt;/a&gt;(toggle-grid)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
-&lt;p&gt;Some aliases to switch between brushes:&lt;/p&gt;
 &lt;div class="sourceCode" id="cb2"&gt;&lt;pre class="sourceCode scheme"&gt;&lt;code class="sourceCode scheme"&gt;&lt;span id="cb2-1"&gt;&lt;a href="#cb2-1" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="co"&gt;;;; rc.lisp&lt;/span&gt;&lt;/span&gt;
-&lt;span id="cb2-2"&gt;&lt;a href="#cb2-2" aria-hidden="true"&gt;&lt;/a&gt;(&lt;span class="ex"&gt;define&lt;/span&gt;&lt;span class="fu"&gt; &lt;/span&gt;(brush kind)&lt;/span&gt;
-&lt;span id="cb2-3"&gt;&lt;a href="#cb2-3" aria-hidden="true"&gt;&lt;/a&gt;  (&lt;span class="kw"&gt;cond&lt;/span&gt;&lt;/span&gt;
-&lt;span id="cb2-4"&gt;&lt;a href="#cb2-4" aria-hidden="true"&gt;&lt;/a&gt;    ((&lt;span class="kw"&gt;eq?&lt;/span&gt; kind &amp;#39;f) (brush-fill))&lt;/span&gt;
-&lt;span id="cb2-5"&gt;&lt;a href="#cb2-5" aria-hidden="true"&gt;&lt;/a&gt;    ((&lt;span class="kw"&gt;eq?&lt;/span&gt; kind &amp;#39;c) (brush-circle))&lt;/span&gt;
-&lt;span id="cb2-6"&gt;&lt;a href="#cb2-6" aria-hidden="true"&gt;&lt;/a&gt;    ((&lt;span class="kw"&gt;eq?&lt;/span&gt; kind &amp;#39;l) (brush-line))&lt;/span&gt;
-&lt;span id="cb2-7"&gt;&lt;a href="#cb2-7" aria-hidden="true"&gt;&lt;/a&gt;    ((&lt;span class="kw"&gt;eq?&lt;/span&gt; kind &amp;#39;l+) (brush-line-extend))&lt;/span&gt;
-&lt;span id="cb2-8"&gt;&lt;a href="#cb2-8" aria-hidden="true"&gt;&lt;/a&gt;    (&lt;span class="kw"&gt;else&lt;/span&gt; (brush-circle))))&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
+&lt;span id="cb2-2"&gt;&lt;a href="#cb2-2" aria-hidden="true"&gt;&lt;/a&gt;(toggle-grid)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
+&lt;p&gt;Some aliases to switch between brushes:&lt;/p&gt;
+&lt;div class="sourceCode" id="cb3"&gt;&lt;pre class="sourceCode scheme"&gt;&lt;code class="sourceCode scheme"&gt;&lt;span id="cb3-1"&gt;&lt;a href="#cb3-1" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="co"&gt;;;; rc.lisp&lt;/span&gt;&lt;/span&gt;
+&lt;span id="cb3-2"&gt;&lt;a href="#cb3-2" aria-hidden="true"&gt;&lt;/a&gt;(&lt;span class="ex"&gt;define&lt;/span&gt;&lt;span class="fu"&gt; &lt;/span&gt;(brush kind)&lt;/span&gt;
+&lt;span id="cb3-3"&gt;&lt;a href="#cb3-3" aria-hidden="true"&gt;&lt;/a&gt;  (&lt;span class="kw"&gt;cond&lt;/span&gt;&lt;/span&gt;
+&lt;span id="cb3-4"&gt;&lt;a href="#cb3-4" aria-hidden="true"&gt;&lt;/a&gt;    ((&lt;span class="kw"&gt;eq?&lt;/span&gt; kind &amp;#39;f) (brush-fill))&lt;/span&gt;
+&lt;span id="cb3-5"&gt;&lt;a href="#cb3-5" aria-hidden="true"&gt;&lt;/a&gt;    ((&lt;span class="kw"&gt;eq?&lt;/span&gt; kind &amp;#39;c) (brush-circle))&lt;/span&gt;
+&lt;span id="cb3-6"&gt;&lt;a href="#cb3-6" aria-hidden="true"&gt;&lt;/a&gt;    ((&lt;span class="kw"&gt;eq?&lt;/span&gt; kind &amp;#39;l) (brush-line))&lt;/span&gt;
+&lt;span id="cb3-7"&gt;&lt;a href="#cb3-7" aria-hidden="true"&gt;&lt;/a&gt;    ((&lt;span class="kw"&gt;eq?&lt;/span&gt; kind &amp;#39;l+) (brush-line-extend))&lt;/span&gt;
+&lt;span id="cb3-8"&gt;&lt;a href="#cb3-8" aria-hidden="true"&gt;&lt;/a&gt;    (&lt;span class="kw"&gt;else&lt;/span&gt; (brush-circle))))&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
 &lt;p&gt;The following script draws a straight line along a given axis, at a given distance from the canvas boundary:&lt;/p&gt;
 &lt;figure&gt;
 &lt;video src="https://u.peppe.rs/b3i.mp4" controls=""&gt;&lt;a href="https://u.peppe.rs/b3i.mp4"&gt;Day 16&lt;/a&gt;&lt;/video&gt;&lt;figcaption aria-hidden="true"&gt;Day 16&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;h3 id="day-15"&gt;Day 15&lt;/h3&gt;
 &lt;p&gt;I began writing a standard library for the lisp, in lisp. It includes basic list operations: &lt;code&gt;car&lt;/code&gt;, &lt;code&gt;cdr&lt;/code&gt;, &lt;code&gt;null?&lt;/code&gt;, &lt;code&gt;list&lt;/code&gt;, higher order functions: &lt;code&gt;map&lt;/code&gt;, &lt;code&gt;filter&lt;/code&gt;, &lt;code&gt;fold&lt;/code&gt;:&lt;/p&gt;
-&lt;div class="sourceCode" id="cb3"&gt;&lt;pre class="sourceCode lisp"&gt;&lt;code class="sourceCode commonlisp"&gt;&lt;span id="cb3-1"&gt;&lt;a href="#cb3-1" aria-hidden="true"&gt;&lt;/a&gt;(define (member? item ls)&lt;/span&gt;
-&lt;span id="cb3-2"&gt;&lt;a href="#cb3-2" aria-hidden="true"&gt;&lt;/a&gt;  (fold &lt;span class="dv"&gt;#f&lt;/span&gt;&lt;/span&gt;
-&lt;span id="cb3-3"&gt;&lt;a href="#cb3-3" aria-hidden="true"&gt;&lt;/a&gt;        (&lt;span class="kw"&gt;lambda&lt;/span&gt; (acc x) (&lt;span class="kw"&gt;or&lt;/span&gt; acc (eq? item x)))&lt;/span&gt;
-&lt;span id="cb3-4"&gt;&lt;a href="#cb3-4" aria-hidden="true"&gt;&lt;/a&gt;        ls))&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
+&lt;div class="sourceCode" id="cb4"&gt;&lt;pre class="sourceCode lisp"&gt;&lt;code class="sourceCode commonlisp"&gt;&lt;span id="cb4-1"&gt;&lt;a href="#cb4-1" aria-hidden="true"&gt;&lt;/a&gt;(define (member? item ls)&lt;/span&gt;
+&lt;span id="cb4-2"&gt;&lt;a href="#cb4-2" aria-hidden="true"&gt;&lt;/a&gt;  (fold &lt;span class="dv"&gt;#f&lt;/span&gt;&lt;/span&gt;
+&lt;span id="cb4-3"&gt;&lt;a href="#cb4-3" aria-hidden="true"&gt;&lt;/a&gt;        (&lt;span class="kw"&gt;lambda&lt;/span&gt; (acc x) (&lt;span class="kw"&gt;or&lt;/span&gt; acc (eq? item x)))&lt;/span&gt;
+&lt;span id="cb4-4"&gt;&lt;a href="#cb4-4" aria-hidden="true"&gt;&lt;/a&gt;        ls))&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
 &lt;h3 id="day-14"&gt;Day 14&lt;/h3&gt;
 &lt;p&gt;I attempted a &lt;a href="https://peppe.rs/art/ramen_noodles.png"&gt;small art piece&lt;/a&gt; using the editor, while it was largely usable, I felt a certain lack of feedback. The brushes just didn’t relay as much info as I’d have liked, for example, the approximate points of the line or the angle made by the line against the x-axis. Unfortunately, the existing infrastructure around brushes and line drawing didn’t easily allow for this either. I went ahead and reimplemented brushes, and added a new flood fill brush too:&lt;/p&gt;
 &lt;figure&gt;
@@ -69,11 +90,11 @@
 &lt;/figure&gt;
 &lt;h3 id="day-8"&gt;Day 8&lt;/h3&gt;
 &lt;p&gt;One of my favourite features of GIMP was symmetric editing. I added some coordinate geometry primitives to my pixmap abstraction, allowing for mirroring and reflecting figures about lines or points. The result was an ergonomic function that applies symmetry to any painting operation, (undo/redo works as expected):&lt;/p&gt;
-&lt;div class="sourceCode" id="cb4"&gt;&lt;pre class="sourceCode rust"&gt;&lt;code class="sourceCode rust"&gt;&lt;span id="cb4-1"&gt;&lt;a href="#cb4-1" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="kw"&gt;let&lt;/span&gt; line &lt;span class="op"&gt;=&lt;/span&gt; &lt;span class="kw"&gt;self&lt;/span&gt;&lt;span class="op"&gt;.&lt;/span&gt;pixmap&lt;span class="op"&gt;.&lt;/span&gt;get_line(start&lt;span class="op"&gt;,&lt;/span&gt; end)&lt;span class="op"&gt;;&lt;/span&gt;&lt;/span&gt;
-&lt;span id="cb4-2"&gt;&lt;a href="#cb4-2" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="kw"&gt;let&lt;/span&gt; sym_line &lt;span class="op"&gt;=&lt;/span&gt; &lt;span class="kw"&gt;self&lt;/span&gt;&lt;span class="op"&gt;.&lt;/span&gt;symmetry&lt;span class="op"&gt;.&lt;/span&gt;apply(&lt;span class="op"&gt;&amp;amp;&lt;/span&gt;line)&lt;span class="op"&gt;;&lt;/span&gt;&lt;/span&gt;
-&lt;span id="cb4-3"&gt;&lt;a href="#cb4-3" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="kw"&gt;for&lt;/span&gt; point on line&lt;span class="op"&gt;.&lt;/span&gt;extend(sym_line) &lt;span class="op"&gt;{&lt;/span&gt;&lt;/span&gt;
-&lt;span id="cb4-4"&gt;&lt;a href="#cb4-4" aria-hidden="true"&gt;&lt;/a&gt;    &lt;span class="co"&gt;// draw to window&lt;/span&gt;&lt;/span&gt;
-&lt;span id="cb4-5"&gt;&lt;a href="#cb4-5" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="op"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
+&lt;div class="sourceCode" id="cb5"&gt;&lt;pre class="sourceCode rust"&gt;&lt;code class="sourceCode rust"&gt;&lt;span id="cb5-1"&gt;&lt;a href="#cb5-1" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="kw"&gt;let&lt;/span&gt; line &lt;span class="op"&gt;=&lt;/span&gt; &lt;span class="kw"&gt;self&lt;/span&gt;&lt;span class="op"&gt;.&lt;/span&gt;pixmap&lt;span class="op"&gt;.&lt;/span&gt;get_line(start&lt;span class="op"&gt;,&lt;/span&gt; end)&lt;span class="op"&gt;;&lt;/span&gt;&lt;/span&gt;
+&lt;span id="cb5-2"&gt;&lt;a href="#cb5-2" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="kw"&gt;let&lt;/span&gt; sym_line &lt;span class="op"&gt;=&lt;/span&gt; &lt;span class="kw"&gt;self&lt;/span&gt;&lt;span class="op"&gt;.&lt;/span&gt;symmetry&lt;span class="op"&gt;.&lt;/span&gt;apply(&lt;span class="op"&gt;&amp;amp;&lt;/span&gt;line)&lt;span class="op"&gt;;&lt;/span&gt;&lt;/span&gt;
+&lt;span id="cb5-3"&gt;&lt;a href="#cb5-3" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="kw"&gt;for&lt;/span&gt; point on line&lt;span class="op"&gt;.&lt;/span&gt;extend(sym_line) &lt;span class="op"&gt;{&lt;/span&gt;&lt;/span&gt;
+&lt;span id="cb5-4"&gt;&lt;a href="#cb5-4" aria-hidden="true"&gt;&lt;/a&gt;    &lt;span class="co"&gt;// draw to window&lt;/span&gt;&lt;/span&gt;
+&lt;span id="cb5-5"&gt;&lt;a href="#cb5-5" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="op"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
 &lt;figure&gt;
 &lt;video src="https://u.peppe.rs/B1.mp4" controls=""&gt;&lt;a href="https://u.peppe.rs/B1.mp4"&gt;Day 8&lt;/a&gt;&lt;/video&gt;&lt;figcaption aria-hidden="true"&gt;Day 8&lt;/figcaption&gt;
 &lt;/figure&gt;
@@ -113,7 +134,7 @@
 &lt;img src="https://u.peppe.rs/Ma.png" alt="Day 1" /&gt;&lt;figcaption aria-hidden="true"&gt;Day 1&lt;/figcaption&gt;
 &lt;/figure&gt;</description>
 <link>https://peppe.rs/posts/SDL2_devlog/</link>
-<pubDate>Thu, 01 Apr 2021 04:11:00 +0000</pubDate>
+<pubDate>Fri, 02 Apr 2021 05:01:00 +0000</pubDate>
 <guid>https://peppe.rs/posts/SDL2_devlog/</guid>
 </item>
 <item>
diff --git a/docs/posts/SDL2_devlog/index.html b/docs/posts/SDL2_devlog/index.html
index 80cb297..6b5fd96 100644
--- a/docs/posts/SDL2_devlog/index.html
+++ b/docs/posts/SDL2_devlog/index.html
@@ -25,15 +25,15 @@
 ">View Raw</a>
           <div class="separator"></div>
           <div class="date">
-            01/04 — 2021
+            02/04 — 2021
             <div class="stats">
               <span class="stats-number">
-                93.51
+                105.89
               </span>
               <span class="stats-unit">cm</span>
               &nbsp
               <span class="stats-number">
-                7.5
+                8.1
               </span>
               <span class="stats-unit">min</span>
             </div>
@@ -43,29 +43,50 @@
           </h1>
           <div class="post-text">
             <p>I have been working on an editor for the <a href="https://git.peppe.rs/graphics/obi/about">One Bit Image</a> file format in Rust and SDL2. This entry in my blog follows my progress on the editor. The days are listed in reverse chronological order, begin from the bottom, if this is your first time on this page.</p>
+<h3 id="day-17">Day 17</h3>
+<p>I decided to give the text-only statusline a touch up, by adding a active color and dither level preview. Aligning the “widget” to the right of statusline involved a lot more than I thought, so I created a ghetto CSS-like rectangle placement system to position containers inside containers:</p>
+<div class="sourceCode" id="cb1"><pre class="sourceCode rust"><code class="sourceCode rust"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true"></a><span class="co">// roughly something like this</span></span>
+<span id="cb1-2"><a href="#cb1-2" aria-hidden="true"></a><span class="kw">let</span> statusline <span class="op">=</span> </span>
+<span id="cb1-3"><a href="#cb1-3" aria-hidden="true"></a>    <span class="pp">Container::</span>new(<span class="pp">Offset::</span>Left(<span class="dv">0</span>)<span class="op">,</span> <span class="pp">Offset::</span>Bottom(<span class="dv">40</span>))</span>
+<span id="cb1-4"><a href="#cb1-4" aria-hidden="true"></a>    <span class="op">.</span>width(<span class="pp">Size::</span>Max)</span>
+<span id="cb1-5"><a href="#cb1-5" aria-hidden="true"></a>    <span class="op">.</span>height(<span class="pp">Size::</span>Absolute(<span class="dv">20</span>))<span class="op">;</span></span>
+<span id="cb1-6"><a href="#cb1-6" aria-hidden="true"></a>    </span>
+<span id="cb1-7"><a href="#cb1-7" aria-hidden="true"></a><span class="kw">let</span> <span class="kw">mut</span> primary <span class="op">=</span> <span class="pp">Container::</span>uninit()</span>
+<span id="cb1-8"><a href="#cb1-8" aria-hidden="true"></a>    <span class="op">.</span>width(<span class="pp">Size::</span>Absolute(<span class="dv">16</span>))</span>
+<span id="cb1-9"><a href="#cb1-9" aria-hidden="true"></a>    <span class="op">.</span>height(<span class="pp">Size::</span>Absolute(<span class="dv">16</span>))<span class="op">;</span></span>
+<span id="cb1-10"><a href="#cb1-10" aria-hidden="true"></a></span>
+<span id="cb1-11"><a href="#cb1-11" aria-hidden="true"></a>container<span class="op">.</span>place(</span>
+<span id="cb1-12"><a href="#cb1-12" aria-hidden="true"></a>    <span class="op">&amp;</span><span class="kw">mut</span> padding_box<span class="op">,</span></span>
+<span id="cb1-13"><a href="#cb1-13" aria-hidden="true"></a>    <span class="pp">HorAlign::</span>Right<span class="op">,</span></span>
+<span id="cb1-14"><a href="#cb1-14" aria-hidden="true"></a>    <span class="pp">VertAlign::</span>Center</span>
+<span id="cb1-15"><a href="#cb1-15" aria-hidden="true"></a>)<span class="op">;</span></span></code></pre></div>
+<p>The result (brush preview on the bottom right):</p>
+<figure>
+<video src="https://u.peppe.rs/OtU.mp4" controls=""><a href="https://u.peppe.rs/OtU.mp4">Day 17</a></video><figcaption aria-hidden="true">Day 17</figcaption>
+</figure>
 <h3 id="day-16">Day 16</h3>
 <p>The embedded lisp is coming along nicely, users can load a custom <code>rc.lisp</code>, which is evaluated on startup. To disable to grid on start, for example:</p>
-<div class="sourceCode" id="cb1"><pre class="sourceCode scheme"><code class="sourceCode scheme"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true"></a><span class="co">;;; rc.lisp</span></span>
-<span id="cb1-2"><a href="#cb1-2" aria-hidden="true"></a>(toggle-grid)</span></code></pre></div>
-<p>Some aliases to switch between brushes:</p>
 <div class="sourceCode" id="cb2"><pre class="sourceCode scheme"><code class="sourceCode scheme"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true"></a><span class="co">;;; rc.lisp</span></span>
-<span id="cb2-2"><a href="#cb2-2" aria-hidden="true"></a>(<span class="ex">define</span><span class="fu"> </span>(brush kind)</span>
-<span id="cb2-3"><a href="#cb2-3" aria-hidden="true"></a>  (<span class="kw">cond</span></span>
-<span id="cb2-4"><a href="#cb2-4" aria-hidden="true"></a>    ((<span class="kw">eq?</span> kind &#39;f) (brush-fill))</span>
-<span id="cb2-5"><a href="#cb2-5" aria-hidden="true"></a>    ((<span class="kw">eq?</span> kind &#39;c) (brush-circle))</span>
-<span id="cb2-6"><a href="#cb2-6" aria-hidden="true"></a>    ((<span class="kw">eq?</span> kind &#39;l) (brush-line))</span>
-<span id="cb2-7"><a href="#cb2-7" aria-hidden="true"></a>    ((<span class="kw">eq?</span> kind &#39;l+) (brush-line-extend))</span>
-<span id="cb2-8"><a href="#cb2-8" aria-hidden="true"></a>    (<span class="kw">else</span> (brush-circle))))</span></code></pre></div>
+<span id="cb2-2"><a href="#cb2-2" aria-hidden="true"></a>(toggle-grid)</span></code></pre></div>
+<p>Some aliases to switch between brushes:</p>
+<div class="sourceCode" id="cb3"><pre class="sourceCode scheme"><code class="sourceCode scheme"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true"></a><span class="co">;;; rc.lisp</span></span>
+<span id="cb3-2"><a href="#cb3-2" aria-hidden="true"></a>(<span class="ex">define</span><span class="fu"> </span>(brush kind)</span>
+<span id="cb3-3"><a href="#cb3-3" aria-hidden="true"></a>  (<span class="kw">cond</span></span>
+<span id="cb3-4"><a href="#cb3-4" aria-hidden="true"></a>    ((<span class="kw">eq?</span> kind &#39;f) (brush-fill))</span>
+<span id="cb3-5"><a href="#cb3-5" aria-hidden="true"></a>    ((<span class="kw">eq?</span> kind &#39;c) (brush-circle))</span>
+<span id="cb3-6"><a href="#cb3-6" aria-hidden="true"></a>    ((<span class="kw">eq?</span> kind &#39;l) (brush-line))</span>
+<span id="cb3-7"><a href="#cb3-7" aria-hidden="true"></a>    ((<span class="kw">eq?</span> kind &#39;l+) (brush-line-extend))</span>
+<span id="cb3-8"><a href="#cb3-8" aria-hidden="true"></a>    (<span class="kw">else</span> (brush-circle))))</span></code></pre></div>
 <p>The following script draws a straight line along a given axis, at a given distance from the canvas boundary:</p>
 <figure>
 <video src="https://u.peppe.rs/b3i.mp4" controls=""><a href="https://u.peppe.rs/b3i.mp4">Day 16</a></video><figcaption aria-hidden="true">Day 16</figcaption>
 </figure>
 <h3 id="day-15">Day 15</h3>
 <p>I began writing a standard library for the lisp, in lisp. It includes basic list operations: <code>car</code>, <code>cdr</code>, <code>null?</code>, <code>list</code>, higher order functions: <code>map</code>, <code>filter</code>, <code>fold</code>:</p>
-<div class="sourceCode" id="cb3"><pre class="sourceCode lisp"><code class="sourceCode commonlisp"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true"></a>(define (member? item ls)</span>
-<span id="cb3-2"><a href="#cb3-2" aria-hidden="true"></a>  (fold <span class="dv">#f</span></span>
-<span id="cb3-3"><a href="#cb3-3" aria-hidden="true"></a>        (<span class="kw">lambda</span> (acc x) (<span class="kw">or</span> acc (eq? item x)))</span>
-<span id="cb3-4"><a href="#cb3-4" aria-hidden="true"></a>        ls))</span></code></pre></div>
+<div class="sourceCode" id="cb4"><pre class="sourceCode lisp"><code class="sourceCode commonlisp"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true"></a>(define (member? item ls)</span>
+<span id="cb4-2"><a href="#cb4-2" aria-hidden="true"></a>  (fold <span class="dv">#f</span></span>
+<span id="cb4-3"><a href="#cb4-3" aria-hidden="true"></a>        (<span class="kw">lambda</span> (acc x) (<span class="kw">or</span> acc (eq? item x)))</span>
+<span id="cb4-4"><a href="#cb4-4" aria-hidden="true"></a>        ls))</span></code></pre></div>
 <h3 id="day-14">Day 14</h3>
 <p>I attempted a <a href="https://peppe.rs/art/ramen_noodles.png">small art piece</a> using the editor, while it was largely usable, I felt a certain lack of feedback. The brushes just didn’t relay as much info as I’d have liked, for example, the approximate points of the line or the angle made by the line against the x-axis. Unfortunately, the existing infrastructure around brushes and line drawing didn’t easily allow for this either. I went ahead and reimplemented brushes, and added a new flood fill brush too:</p>
 <figure>
@@ -98,11 +119,11 @@
 </figure>
 <h3 id="day-8">Day 8</h3>
 <p>One of my favourite features of GIMP was symmetric editing. I added some coordinate geometry primitives to my pixmap abstraction, allowing for mirroring and reflecting figures about lines or points. The result was an ergonomic function that applies symmetry to any painting operation, (undo/redo works as expected):</p>
-<div class="sourceCode" id="cb4"><pre class="sourceCode rust"><code class="sourceCode rust"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true"></a><span class="kw">let</span> line <span class="op">=</span> <span class="kw">self</span><span class="op">.</span>pixmap<span class="op">.</span>get_line(start<span class="op">,</span> end)<span class="op">;</span></span>
-<span id="cb4-2"><a href="#cb4-2" aria-hidden="true"></a><span class="kw">let</span> sym_line <span class="op">=</span> <span class="kw">self</span><span class="op">.</span>symmetry<span class="op">.</span>apply(<span class="op">&amp;</span>line)<span class="op">;</span></span>
-<span id="cb4-3"><a href="#cb4-3" aria-hidden="true"></a><span class="kw">for</span> point on line<span class="op">.</span>extend(sym_line) <span class="op">{</span></span>
-<span id="cb4-4"><a href="#cb4-4" aria-hidden="true"></a>    <span class="co">// draw to window</span></span>
-<span id="cb4-5"><a href="#cb4-5" aria-hidden="true"></a><span class="op">}</span></span></code></pre></div>
+<div class="sourceCode" id="cb5"><pre class="sourceCode rust"><code class="sourceCode rust"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true"></a><span class="kw">let</span> line <span class="op">=</span> <span class="kw">self</span><span class="op">.</span>pixmap<span class="op">.</span>get_line(start<span class="op">,</span> end)<span class="op">;</span></span>
+<span id="cb5-2"><a href="#cb5-2" aria-hidden="true"></a><span class="kw">let</span> sym_line <span class="op">=</span> <span class="kw">self</span><span class="op">.</span>symmetry<span class="op">.</span>apply(<span class="op">&amp;</span>line)<span class="op">;</span></span>
+<span id="cb5-3"><a href="#cb5-3" aria-hidden="true"></a><span class="kw">for</span> point on line<span class="op">.</span>extend(sym_line) <span class="op">{</span></span>
+<span id="cb5-4"><a href="#cb5-4" aria-hidden="true"></a>    <span class="co">// draw to window</span></span>
+<span id="cb5-5"><a href="#cb5-5" aria-hidden="true"></a><span class="op">}</span></span></code></pre></div>
 <figure>
 <video src="https://u.peppe.rs/B1.mp4" controls=""><a href="https://u.peppe.rs/B1.mp4">Day 8</a></video><figcaption aria-hidden="true">Day 8</figcaption>
 </figure>
diff --git a/docs/posts/index.html b/docs/posts/index.html
index 697b522..8dcf25c 100644
--- a/docs/posts/index.html
+++ b/docs/posts/index.html
@@ -27,7 +27,7 @@
     <tr>
         <td class=table-post>
             <div class="date">
-                01/04 — 2021
+                02/04 — 2021
             </div>
             <a href="/posts/SDL2_devlog" class="post-link">
                 <span class="post-link">SDL2 Devlog</span>
@@ -35,7 +35,7 @@
         </td>
         <td class=table-stats>
             <span class="stats-number">
-                7.5
+                8.1
             </span>
             <span class=stats-unit>min</span>
         </td>
diff --git a/posts/SDL2_devlog.md b/posts/SDL2_devlog.md
index 991a246..eb11de8 100644
--- a/posts/SDL2_devlog.md
+++ b/posts/SDL2_devlog.md
@@ -5,6 +5,37 @@ on the editor. The days are listed in reverse chronological
 order, begin from the bottom, if this is your first time on
 this page.
 
+### Day 17
+
+I decided to give the text-only statusline a touch up, by
+adding a active color and dither level preview. Aligning the
+"widget" to the right of statusline involved a lot more than
+I thought, so I created a ghetto CSS-like rectangle
+placement system to position containers inside containers:
+
+```rust
+// roughly something like this
+let statusline = 
+    Container::new(Offset::Left(0), Offset::Bottom(40))
+    .width(Size::Max)
+    .height(Size::Absolute(20));
+    
+let mut primary = Container::uninit()
+    .width(Size::Absolute(16))
+    .height(Size::Absolute(16));
+
+container.place(
+    &mut padding_box,
+    HorAlign::Right,
+    VertAlign::Center
+);
+```
+
+The result (brush preview on the bottom right):
+
+![Day 17](https://u.peppe.rs/OtU.mp4)
+
+
 ### Day 16
 
 The embedded lisp is coming along nicely, users can load