loads of cleanup

_includes/default_head_tags.html

@@ -46,6 +46,7 @@ See: https://developers.google.com/search/docs/advanced/mobile/google-discover?h
 <link rel="stylesheet" href="/assets/css/styles.css">
 <script src="/assets/js/index.js"></script>
 
+{% if page.mathjax %}
 <script>
   MathJax = {
     tex: {
@@ -57,6 +58,7 @@ See: https://developers.google.com/search/docs/advanced/mobile/google-discover?h
   };
   </script>
 <script src="/assets/mathjax/tex-mml-svg.js" id="MathJax-script" async></script>
+{% endif %} 
 
 <!-- RSS feed -->
 {% feed_meta %}

_posts/2021-05-01-custom_ts100_logo.md

@@ -1,12 +1,12 @@
 ---
 title:  Making a custom bootscreen for your TS100 Soldering Iron
 layout: post
+excerpt: |
+    It's a right of passage to add a custom bootscreen to your TS100 soldering iron but it took me a while to figure out how to generate a 1bit per pixel bitmap image.
 image: /assets/blog/TS100/real.jpeg
 alt: An image of a TS100 soldering iron showing a custom bootscreen that says 'solder boy'.
 ---
 
-
-
 There are a bunch of [posts](https://blog.dbrgn.ch/2017/9/5/creating-custom-ts100-logo-with-gimp/) online about how to add a custom bootscreen to a TS100 soldering iron. These things are great, if you get a little USB-C to jack adapter you can run them off a powerbank and they're tiny so you can keep them with you wherever you go. Which of course you should. 
 
 I did have some trouble getting the image into the write format though, after messing around a little I settled on this command using ImageMagick:

_posts/2022-05-15-overleaf.md

@@ -1,6 +1,7 @@
 ---
 title:  Building Overleaf projects locally
 excerpt: I wanted to work on an overleaf project while on the train without reliable internet.
+thumbnail: /assets/blog/overleaf/logo.svg
 date: 2022-02-02
 layout: post
 image: 

_posts/2022-05-20-conda_setup.md

@@ -1,5 +1,6 @@
 ---
-title:  My Jupyter and Conda setup
+title:  My Jupyter and <s>Conda</s> Mamba setup
+thumbnail: /assets/blog/mamba/logos.png
 date: 2022-02-02
 layout: post
 ---

_posts/2022-06-22-Learning-Paths.html

@@ -3,6 +3,7 @@ title: Learning Paths
 excerpt: A small tool to visualise dependencies of courses.
 layout: post
 image: /assets/images/learning_paths.png
+image_class: invertable
 alt: A screenshot of a web app that visualises dependencies between courses by linking them with lines.
 ---
 

_posts/2022-11-10-adding_interactivity_to_svg.md

@@ -3,8 +3,11 @@ title: How to Animate Inkscape SVGs with d3
 excerpt: In which a simple thing turns out to be surprisingly in-depth!
 layout: post
 image: /assets/thesis/intro_chapter/fk_schematic.svg
-social_image: /assets/social/fk_diagram.png
+thumbnail: /assets/blog/interactive_svgs/thumbnail.png
+social_image: /assets/blog/interactive_svgs/fk_diagram.png
+image_class: invertable
 alt: A diagram showing showing circles with arrows in them linked by lines that represents a simple physical model of electron spins interacting.
+mathjax: true
 ---
 
 I wanted my thesis to have a nice HTML version in addition to the mandatory-in-my-field latex/PDF version. Having a HTML version also means I can experiment with a bit of interactivity. I've done some of the diagrams in SVG using Inkscape which is a nice tool for this kind of thing. I wanted to add some interactivity as an easter egg to the SVGs in the HTML version.

_posts/2022-11-22-sensor_watch.md

@@ -1,6 +1,9 @@
 ---
 title:  Sensor Watch
 layout: post
+excerpt: | 
+    I finally got my [Sensor Watch](https://www.oddlyspecificobjects.com/products/sensorwatch/)! It's a replacement logic board for those classic Casio watches you see everywhere.
+
 image: /assets/blog/SensorWatch/watch.svg
 social_image: /assets/social/sensor_watch.svg
 alt: A simple vector image of a classic casio watch.

_posts/2022-11-23-emscripten_arduino.md

@@ -1,6 +1,8 @@
 ---
 title:  Using emscripten to simulate an arduino project
 layout: post
+excerpt: |
+  The [Sensor Watch](https://www.oddlyspecificobjects.com/products/sensorwatch/) project has this nifty JS simulation for testing the firmware. Here I'll go through a toy example of how it glues together the C firmware code and the JS visualisation. 
 image: /assets/blog/emscripten_arduino/arduino.svg
 social_image: /assets/social/arduino.png
 alt: A rendered image of a breadboard with an LED and resistor wired up in series to an arduino.

_posts/2022-11-25-rendering_general_relativity.md

@@ -1,7 +1,8 @@
 ---
 title:  Rendering General Relativity
 layout: post
-image: /assets/images/spinning_earth.gif
+image: /assets/blog/rendering_general_relativity/spinning_earth.gif
+thumbnail: /assets/blog/rendering_general_relativity/thumbnail.gif
 alt: A spinning image of the earth but distorted as if it were a black hole.
 permalink: /blog/rendering_general_relativity
 ---

_posts/2023-02-10-shelves.md

@@ -4,6 +4,8 @@ excerpt: We needed some shelves to fit an odd space under a ladder...
 layout: post
 image: /assets/blog/shelves/thumb.svg
 social_image: /assets/social/shelves.png
+thumbnail: /assets/blog/shelves/thumb.svg
+image_class: invertable
 alt: A 3D render of some shelves fitting into a triangular space under a ladder.
 assets: /assets/blog/shelves
 head: <script type="module" src="/assets/js/model-viewer.js"></script>

_posts/2023-06-20-conda_setup.md

@@ -2,7 +2,7 @@
 title:  Jupyter and Conda setup
 date: 2023-06-20
 layout: post
-image: /assets/blog/mamba/logos.svg
+image: /assets/blog/mamba/logos.png
 social_image: /assets/social/jupyter.png
 alt: The orange, abstract, Jupyter logo and the Mamba logo which is a cute black snake.
 ---

_posts/2023-06-21-my_first_PCB.md

@@ -1,7 +1,7 @@
 ---
 title: My first PCB!
 excerpt: |
-    I've had a longstanding ambition to get a PCB manufactured but I've always put it off. Lately I had a need for a little adapter board to break out these 1.27mm spaced pins to 2.54mm pins that would fit into a breadboard. Feeling like it was a simple enough board I finally decided to fire up KiCad and give it a go.
+    I've always wanted to get a PCB manufactured but only recently found a something that I actually needed and was simple enough for a first attempt.
 layout: post
 commentid: 110810437631337327
 image: /assets/blog/PCB/render.png

_posts/2023-06-22-tqdm_and_printing_in_notebooks.md

@@ -1,12 +1,14 @@
 ---
 title: Progress bars and log output in Jupyter notebooks
-excerpt: 
+excerpt: |
+    How to get an updatable message printing a tqdm progress bar. 
 layout: post
 image: /assets/blog/progress_bars/bar.png
 thumbnail: /assets/blog/progress_bars/thumbnail.png
+image_class: invertable
 alt: An image of a nice animated progress bar in a jupyter notebook output cell.
 ---
-I wanted to have just one updateable line of output that would play nicely with a tqdm progress bar. After playing around with `print(s, end="\r")` I settled on using `Ipython.display` with a handle. The problem with the print approach is that it doesn't work when the output is shorter than the previous line.
+I wanted to have just one updatable line of output that would play nicely with a tqdm progress bar. After playing around with `print(s, end="\r")` I settled on using `Ipython.display` with a handle. The problem with the print approach is that it doesn't work when the output is shorter than the previous line.
 
 ```python
 import time

_posts/2023-07-20-writing_grammars_is_fun.md

@@ -1,13 +1,14 @@
 ---
 title: Parsing is fun!
+layout: post
 excerpt: |
     I came across something I wanted to quickly parse that was too niche to find a ready made parser for. Join me on a quick whip tour of writing a grammar for a PEG parser.
 
 social_image: /assets/social/parsing.png
 image: /assets/social/parsing.png
 thumbnail: /assets/blog/parsing/thumbnail.png
+image_class: invertable
 alt: A screenshot of some python code showing a PEG grammar definition.
-layout: post
 commentid: 110746239432993930
 ---
 

_posts/2023-07-25-interactive-code-snippets.md

@@ -1,13 +1,16 @@
 ---
 title: A little REPL in every blog post
 layout: post
+excerpt: |
+    A JS library to run python snippets in the browser.
 image: /assets/blog/REPL/repl.png
 thumbnail: /assets/blog/REPL/thumbnail.png
+image_class: invertable
 alt: A screenshot of a small javascript widget that lets you evaluate python code. It's showing some numpy code and its evaluated output.
 klipse: True
 ---
 
-On someone else's [excellent personal](http://lambdafunk.com/) site I saw [Klipse](https://github.com/viebel/klipse), a little js library that lets you modify and execute code snippets in blogs. How cute!
+On this excellent [personal site](http://lambdafunk.com/) I saw [Klipse](https://github.com/viebel/klipse), a little js library that lets you modify and execute code snippets in blogs. How cute!
 
 ```klipse-python
 print("Hello, world!")

_posts/2023-07-31-toothbrush-holder.md

@@ -5,6 +5,7 @@ excerpt: |
 layout: post
 hide_image: false # Only use this image for static previews
 image: /assets/blog/toothbrush_shelf/spin.gif
+thumbnail: /assets/blog/toothbrush_shelf/thumbnail.gif
 alt: A render of a 3D printed shelf sitting above a shaver outlet, it spins slowly. 
 head: <script type="module" src="/assets/js/model-viewer.js"></script>
 media: |

_posts/2023-08-10-miniflux-and-rsshub.md

@@ -1,7 +1,9 @@
 ---
 title: "Selfhosting: Miniflux and RSSHub"
 layout: post
-excerpt: Some notes on selfhosting an RSS reader.
+excerpt: Notes to self on selfhosting an RSS reader.
+thumbnail: /assets/blog/miniflux/thumbnail.png
+image_class: invertable
 ---
 
 Like many nerdy, computery types, I like to subscribe to blogs and other content through RSS. RSS is crazy simple, you host a url on a website with a list of posts with titles/URLs/content encoded in XML (I know I know but it only have like 5 tags and is only nested one level deep.) An RSS reader just checks a big list of those URLs every now and then and presents you the latest thing to show up. 

_posts/2023-08-13-half-marathon.md

@@ -1,8 +1,12 @@
 ---
 title: My First Half Marathon!
 layout: post
+excerpt: |
+    I ran my first half marathon! Let's look at the data.
 image: /assets/blog/running/time_vs_distance.svg
 social_image: /assets/blog/running/time_vs_distance.png
+thumbnail: /assets/blog/running/time_vs_distance.svg
+image_class: invertable
 alt: A scatter graph of run time vs run distance for all my runs on strava. It shows that I mainly run between 5 and 6 min per kilometer, regardless of distance 
 ---
 

_posts/2023-08-23-weekend_builds-1.md

@@ -2,7 +2,7 @@
 title: "Weekend builds: Lasercut stool"
 layout: post
 excerpt: |
-    It's nice when a project can be done in just a few days. This is gonna be a little plant pot stand.
+    This little plant pot stand was a nice weekend project.
 
 image: /assets/blog/weekend_builds_1/stool.jpeg
 thumbnail: /assets/blog/weekend_builds_1/stool_thumbnail.jpeg

_posts/2023-09-13-maps-2.md

@@ -2,7 +2,7 @@
 title: "Maps Maps Maps: Part 2"
 layout: post
 excerpt: |
-    I finish my first laser etched map.
+    In which I make my first laser etched map!
 
 image: /assets/blog/maps/after_sanding.jpeg
 thumbnail: /assets/blog/maps/after_sanding_thumbnail.jpeg

_sass/blogroll.scss

@@ -1,5 +1,5 @@
-$image_size: 8em;
-$left_pad: 9em;
+$image_size: clamp(5em, 25vw, 8em);
+$left_pad: calc(clamp(5em, 25vw, 8em) + 1em);
 
 h2.blogroll-title {
     a {
@@ -7,25 +7,37 @@ h2.blogroll-title {
     }
 
 }
-figure.blogroll {
-    img, svg {
-        margin-bottom: 0;
-    }
+
+hr.blogroll {
+    border: 0px solid rgba(128, 128, 128, 0.2);
+    width: 66%;
+    margin-top: 1em;
+    margin-bottom: 1em;
 }
 
 article.blogroll {
+    padding-bottom: 0px;
+    display: flex;
 
-    h2 {margin-top: 0;}
-
-    section.title {
-        padding-left: $left_pad;
+    h2 {margin-top: 0;
+        font-size: 1.3em;
+    }
+    time {
+        display: block;
+        margin-bottom: 0.2em;
+        font-size: 14px;
     }
 
-    summary {padding-left: $left_pad;}
-
-    img {
-        float:left;
+    figure {
         margin-right: 1em;
+        width: $image_size;
+        height: 100%;
+        flex-shrink: 0;
+        margin: 0 1em 0 0;
+        padding: 0;
+    }
+    img {
+        margin: 0;
         max-width: $image_size;
         max-height: $image_size;
         border-radius: 0.5em;
@@ -33,12 +45,11 @@ article.blogroll {
 }
 
 @media 
-    only screen and (max-width: 500px)
+    only screen and (max-width: $horizontal_breakpoint),
+    only screen and (max-height: $vertical_breakpoint)
     {  
+    hr.blogroll {border-width: 1px}
     article.blogroll {
-        summary {
-            padding-left: 0;
-        }
         h2 {
             font-size: 1.2em;
         }

_sass/main.scss

@@ -154,7 +154,8 @@ model-viewer {
         opacity: .75;
         transition: opacity .5s ease-in-out;
     }
-    img.icon {
+    img.icon, img.invertable{
+        opacity: 1;
         filter: invert(1);
     }
   }

assets/blog/overleaf/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 841.89 852.62"><defs><mask id="mask" x="174.51" y="91.03" width="1280.35" height="670.56" maskUnits="userSpaceOnUse"><g id="b"><path id="a" d="M1454.86,761.33H174.77V91H1454.86Z" fill="#fff"/></g></mask></defs><title>stickers alt</title><g mask="url(#mask)"><path d="M753,112C662.45,76.7,334.23,63.65,333.68,259.49,237.92,320.8,174.51,420.79,174.51,527.67c0,129.22,104.74,233.91,234,233.91s234-104.74,234-233.91A233.93,233.93,0,0,0,491.82,309c-16.94-6.55-53.74-18.1-83.13-15.62-41.93,26.66-93.06,81.47-117.24,136.06,35.94-43.13,92.12-62,141.88-53.91A154.17,154.17,0,0,1,562.54,527.63c0,85.15-69.31,154.12-154.46,154.12a153.66,153.66,0,0,1-117.24-54c-41.5-48.86-52.2-101.83-43.64-153.6C276.77,292.65,492,189.4,652,149.74c-52.2,27.64-146.33,73-212.22,122.5C631.9,346.43,663,184.44,753,112Z" fill="#47a141"/></g></svg>

blog-alt.md

@@ -2,21 +2,26 @@
 title: Blog
 layout: default
 permalink: /blog-alt/
-head: <script type="module" src="/assets/js/model-viewer.js"></script>
+mathjax: false
 ---
 {% for post in site.posts %}
 <article class="h-entry blogroll">
 
+<figure>
 <img class="u-photo" 
     src = "{{ post.thumbnail | default: post.image }}"
+    class = "{{ post.image_class }}"
     alt="{{post.alt}}">
+</figure>
 
-<section class="title">
+<section>
   <h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
   <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
+  <summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
 </section>
-
-<summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
-
 </article>
+{% unless forloop.last %}
+  <hr class="blogroll">
+{% endunless %}
+
 {% endfor %}