diff --git a/_includes/default_head_tags.html b/_includes/default_head_tags.html index 7e86403..dbdb0b9 100644 --- a/_includes/default_head_tags.html +++ b/_includes/default_head_tags.html @@ -46,6 +46,7 @@ See: https://developers.google.com/search/docs/advanced/mobile/google-discover?h +{% if page.mathjax %} +{% endif %} {% feed_meta %} diff --git a/_posts/2021-05-01-custom_ts100_logo.md b/_posts/2021-05-01-custom_ts100_logo.md index ecc09f1..af38264 100644 --- a/_posts/2021-05-01-custom_ts100_logo.md +++ b/_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: diff --git a/_posts/2022-05-15-overleaf.md b/_posts/2022-05-15-overleaf.md index c148bd7..9fe33d5 100644 --- a/_posts/2022-05-15-overleaf.md +++ b/_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: diff --git a/_posts/2022-05-20-conda_setup.md b/_posts/2022-05-20-conda_setup.md index 00b4e5d..c144975 100644 --- a/_posts/2022-05-20-conda_setup.md +++ b/_posts/2022-05-20-conda_setup.md @@ -1,5 +1,6 @@ --- -title: My Jupyter and Conda setup +title: My Jupyter and Conda Mamba setup +thumbnail: /assets/blog/mamba/logos.png date: 2022-02-02 layout: post --- diff --git a/_posts/2022-06-22-Learning-Paths.html b/_posts/2022-06-22-Learning-Paths.html index 6bc5fbf..d123d89 100644 --- a/_posts/2022-06-22-Learning-Paths.html +++ b/_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. --- diff --git a/_posts/2022-11-10-adding_interactivity_to_svg.md b/_posts/2022-11-10-adding_interactivity_to_svg.md index 23a5cc0..c116959 100644 --- a/_posts/2022-11-10-adding_interactivity_to_svg.md +++ b/_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. diff --git a/_posts/2022-11-22-sensor_watch.md b/_posts/2022-11-22-sensor_watch.md index eb08e61..bc09e33 100644 --- a/_posts/2022-11-22-sensor_watch.md +++ b/_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. diff --git a/_posts/2022-11-23-emscripten_arduino.md b/_posts/2022-11-23-emscripten_arduino.md index 38e35d7..8abd9ac 100644 --- a/_posts/2022-11-23-emscripten_arduino.md +++ b/_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. diff --git a/_posts/2022-11-25-rendering_general_relativity.md b/_posts/2022-11-25-rendering_general_relativity.md index 674da5d..362bc63 100644 --- a/_posts/2022-11-25-rendering_general_relativity.md +++ b/_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 --- diff --git a/_posts/2023-02-10-shelves.md b/_posts/2023-02-10-shelves.md index 9af3b70..d0dae7d 100644 --- a/_posts/2023-02-10-shelves.md +++ b/_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: diff --git a/_posts/2023-06-20-conda_setup.md b/_posts/2023-06-20-conda_setup.md index bd7f485..4381337 100644 --- a/_posts/2023-06-20-conda_setup.md +++ b/_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. --- diff --git a/_posts/2023-06-21-my_first_PCB.md b/_posts/2023-06-21-my_first_PCB.md index b220749..3437ac7 100644 --- a/_posts/2023-06-21-my_first_PCB.md +++ b/_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 diff --git a/_posts/2023-06-22-tqdm_and_printing_in_notebooks.md b/_posts/2023-06-22-tqdm_and_printing_in_notebooks.md index 9500bca..86bd5be 100644 --- a/_posts/2023-06-22-tqdm_and_printing_in_notebooks.md +++ b/_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 diff --git a/_posts/2023-07-20-writing_grammars_is_fun.md b/_posts/2023-07-20-writing_grammars_is_fun.md index cea5813..7ffd6f6 100644 --- a/_posts/2023-07-20-writing_grammars_is_fun.md +++ b/_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 --- diff --git a/_posts/2023-07-25-interactive-code-snippets.md b/_posts/2023-07-25-interactive-code-snippets.md index d5ceb34..2e8e51d 100644 --- a/_posts/2023-07-25-interactive-code-snippets.md +++ b/_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!") diff --git a/_posts/2023-07-31-toothbrush-holder.md b/_posts/2023-07-31-toothbrush-holder.md index ee77e00..cdbc57c 100644 --- a/_posts/2023-07-31-toothbrush-holder.md +++ b/_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: media: | diff --git a/_posts/2023-08-10-miniflux-and-rsshub.md b/_posts/2023-08-10-miniflux-and-rsshub.md index c2f781c..efc3def 100644 --- a/_posts/2023-08-10-miniflux-and-rsshub.md +++ b/_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. diff --git a/_posts/2023-08-13-half-marathon.md b/_posts/2023-08-13-half-marathon.md index b43606f..0735c16 100644 --- a/_posts/2023-08-13-half-marathon.md +++ b/_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 --- diff --git a/_posts/2023-08-23-weekend_builds-1.md b/_posts/2023-08-23-weekend_builds-1.md index 10f46e9..24dc74a 100644 --- a/_posts/2023-08-23-weekend_builds-1.md +++ b/_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 diff --git a/_posts/2023-09-13-maps-2.md b/_posts/2023-09-13-maps-2.md index a248ea2..7923e5a 100644 --- a/_posts/2023-09-13-maps-2.md +++ b/_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 diff --git a/_sass/blogroll.scss b/_sass/blogroll.scss index 494c935..4253309 100644 --- a/_sass/blogroll.scss +++ b/_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; } diff --git a/_sass/main.scss b/_sass/main.scss index e806aaa..51fbd25 100644 --- a/_sass/main.scss +++ b/_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); } } \ No newline at end of file diff --git a/assets/social/fk_diagram.png b/assets/blog/interactive_svgs/fk_diagram.png similarity index 100% rename from assets/social/fk_diagram.png rename to assets/blog/interactive_svgs/fk_diagram.png diff --git a/assets/blog/interactive_svgs/thumbnail.png b/assets/blog/interactive_svgs/thumbnail.png new file mode 100644 index 0000000..ac96210 Binary files /dev/null and b/assets/blog/interactive_svgs/thumbnail.png differ diff --git a/assets/blog/mamba/logos.png b/assets/blog/mamba/logos.png new file mode 100644 index 0000000..cdf4aaa Binary files /dev/null and b/assets/blog/mamba/logos.png differ diff --git a/assets/blog/mamba/logos.svg b/assets/blog/mamba/logos.svg index 913c62a..4d80363 100644 --- a/assets/blog/mamba/logos.svg +++ b/assets/blog/mamba/logos.svg @@ -2,14 +2,17 @@ + x="24.786839" + y="17.980272" /> diff --git a/assets/blog/miniflux/thumbnail.png b/assets/blog/miniflux/thumbnail.png new file mode 100644 index 0000000..68bc205 Binary files /dev/null and b/assets/blog/miniflux/thumbnail.png differ diff --git a/assets/blog/overleaf/logo.svg b/assets/blog/overleaf/logo.svg new file mode 100644 index 0000000..4f2058b --- /dev/null +++ b/assets/blog/overleaf/logo.svg @@ -0,0 +1 @@ +stickers alt \ No newline at end of file diff --git a/assets/blog/rendering_general_relativity/spinning_earth.gif b/assets/blog/rendering_general_relativity/spinning_earth.gif new file mode 100644 index 0000000..dea603a Binary files /dev/null and b/assets/blog/rendering_general_relativity/spinning_earth.gif differ diff --git a/assets/blog/rendering_general_relativity/thumbnail.gif b/assets/blog/rendering_general_relativity/thumbnail.gif new file mode 100644 index 0000000..67e45eb Binary files /dev/null and b/assets/blog/rendering_general_relativity/thumbnail.gif differ diff --git a/assets/blog/running/thumbnail.png b/assets/blog/running/thumbnail.png new file mode 100644 index 0000000..a74be73 Binary files /dev/null and b/assets/blog/running/thumbnail.png differ diff --git a/assets/blog/shelves/thumbnail.png b/assets/blog/shelves/thumbnail.png new file mode 100644 index 0000000..6244070 Binary files /dev/null and b/assets/blog/shelves/thumbnail.png differ diff --git a/assets/blog/toothbrush_shelf/thumbnail.gif b/assets/blog/toothbrush_shelf/thumbnail.gif new file mode 100644 index 0000000..1ef9625 Binary files /dev/null and b/assets/blog/toothbrush_shelf/thumbnail.gif differ diff --git a/blog-alt.md b/blog-alt.md index 5444519..e73e136 100644 --- a/blog-alt.md +++ b/blog-alt.md @@ -2,21 +2,26 @@ title: Blog layout: default permalink: /blog-alt/ -head: +mathjax: false --- {% for post in site.posts %}
+
{{post.alt}} + class = "{{ post.image_class }}" + alt="{{post.alt}}"> +
-
+

{{ post.title }}

+ {{ post.excerpt | markdownify | remove: '

' | remove: '

' }}
- -{{ post.excerpt | markdownify | remove: '

' | remove: '

' }} -
+{% unless forloop.last %} +
+{% endunless %} + {% endfor %} \ No newline at end of file