feat: use more of the wiki-style

9 files changed, 31 insertions, 26 deletions

diff --git a/blog/2021-07-02.md b/blog/2021-07-02.md
index 02f912d..48ef972 100644
--- a/blog/2021-07-02.md
+++ b/blog/2021-07-02.md
@@ -9,7 +9,7 @@ Welcome to [eug-vs.xyz](https://eug-vs.xyz)! This is my personal website where I
 I decided that I will write content for this website in `Markdown`, since it's the way of writing I am already so used to.
 I use [vimwiki](https://github.com/vimwiki/vimwiki) for writing and then I just pipe my `.md` files into `pandoc` which gives me nice static web pages. No bullshit, ads, trackers or client-side JavaScript here.
 
-## Structure
+# Structure
 Vimwiki provides a very good notes structure out of the box: you have your **main wiki** and **diary**:
  - **Main wiki** will be represented as a knowledge base, where I'll put things that I consider important and worth being indexed
  - **Diary** will form this blog - where I'll put everything that does not fit into the main wiki but still worth sharing
diff --git a/blog/2021-07-15.md b/blog/2021-07-15.md
index 45f9f37..2ea0bd5 100644
--- a/blog/2021-07-15.md
+++ b/blog/2021-07-15.md
@@ -18,7 +18,7 @@ so I had to do something about it.
 
 ![stickerpicker](/public/stickerpicker.png)
 
-### Matrix Stickerpicker
+# Matrix Stickerpicker
 Stickers work in a slightly weird way in **Matrix**.  Basically you have to deploy your own sticker "server"
 (*don't worry, it's just a static site*) where you can add your stickers - it will be used as a widget inside your client.
 
@@ -42,7 +42,7 @@ There are two problems of running this `Python` script automatically:
  - You have to log into your `Matrix` account
  - You have to log into your `Telegram` account
 
-### Config
+## Config
 Here's my fork of the repo: https://github.com/eug-vs/stickerpicker
 
 `CircleCI` is fully controlled by a config file `.circleci/config.yml`. It uses `YAML` which is really picky about indentation, so be careful with that.
diff --git a/blog/2021-08-14.md b/blog/2021-08-14.md
index a49aad5..e98d78f 100644
--- a/blog/2021-08-14.md
+++ b/blog/2021-08-14.md
@@ -2,7 +2,7 @@
 I'm pretty sure everyone knows that sometimes finding a good **PNG**  can be very hard, while there's always a bunch of the same **JPEG** images with the white background.
 After searching for 10 minutes, you decide to remove background yourself - using [GIMP](https://gimp.org) or something like `Photoshop` or `PAINT.NET` if you are on Windows. **Forget about it!** I'm gonna show you how you can use [imagemagick](https://imagemagick.org/) to automate basic tasks like removing background and cropping images.
 
-## Telegram sticker pack
+# Telegram sticker pack
 Every time I use Telegram stickers, I feel tired scrolling through many different packs trying to find the sticker I want. Sometimes, you just want them all to be in one place. That's why I created **Based Wojak** - a sticker pack which is automatically generated from random source images that I find on the internet.
 
 ![based-wojak](https://user-images.githubusercontent.com/51545008/129426994-2a787714-772d-4010-b295-6ae00346bdbc.png)
@@ -16,7 +16,7 @@ The collection itself is very small right now as you can see, but I plan to exte
 https://t.me/addstickers/BasedWojak
 
 
-## Imagemagick
+# Imagemagick
 Now, let's see how I've done that. Here's the GitHub :github: repo so you can follow:
 
 https://github.com/eug-vs/telegram-based-wojak
@@ -62,7 +62,7 @@ Now let's have a closer look at the recipe for creating `out/%.png` from `src/%.
 ![imagemagick-logo](/public/emoji/imagemagick.png)
 
 
-### Removing the background
+## Removing the background
 To remove background, I use `-floodfill`, here's how [imagemagick wiki](https://imagemagick.org/script/command-line-options.php) describes it:
 > -floodfill {+-}x{+-}y color
 >
@@ -72,9 +72,9 @@ To remove background, I use `-floodfill`, here's how [imagemagick wiki](https://
 
 I use it two times: one in the top-left corner and one in the top-right. Top-left corner pixel obviously has a coordinate `+0+0`. To get the X coordinate of right-most pixel I have to use this expression: `+%[fx:w-1]`, Y coordinate stays at `0` of course. Since I already supplied `-fuzz` and `-fill none`, both operations will replace the white background with `none`, starting from two top corners of the image using the supplied fuzziness value.
 
-### Cropping the image
+## Cropping the image
 After we removed background, most of the time we can trim a lot of extra space so that our image size corresponds to its content. Simple `-trim +repage` does the trick.
 
-### Adjusting the size
+## Adjusting the size
 All we have to do now is to make sure the sticker respects the size with `-resize` option. It will resize it in a way so it fits into `512x512` box without changing the aspect ratio (largest side will always be `512px`).
 
diff --git a/blog/2021-08-18.md b/blog/2021-08-18.md
index 6655824..f048106 100644
--- a/blog/2021-08-18.md
+++ b/blog/2021-08-18.md
@@ -68,7 +68,7 @@ Which will produce a nice output in less then **0.03** seconds:
 
 Notice that the only list stored in memory was the original one. Each combination only appeared in memory when it was needed to calculate the sum, and immediately disappeared after that. That's why it's (relatively) fast!
 
-## Takeaway
+# Takeaway
 Of course this script isn't by any means optimal! Essentially it's a brute force, we are just checking all the possible combinations. But we are doing it in a **clean and efficient way** (credit to generators).
 
 When you are solving real-life problems, you are not in algorithms class and you don't have to write a hardcore algo, you just have to correctly utilize amazing toolkit that this language has. I've spend no more than 5 minutes writing this and I already have the answer to my problem - that's the beauty of Python :python:!
diff --git a/blog/2021-10-27.md b/blog/2021-10-27.md
index abd0a02..06b9a0d 100644
--- a/blog/2021-10-27.md
+++ b/blog/2021-10-27.md
@@ -5,7 +5,7 @@ I'm currently learning Rust for fun and re-writing my [ascii-renderer](https://g
 
 You can see that Ray Marching allows for some cool stuff like smooth surface blending and proper shadowing.
 
-## Ray marching
+# Ray marching
 Usually 3d renderers use a triangular mesh to describe objects in a scene. In Python version of `ascii-renderer` I defined each object as a set of points
 (i.e object is defined by a function `__contains__` that determines whether the given point is in this object). It allowed me for some cool Ray Tracing stuff, but that was just me toying around.
 
@@ -25,7 +25,7 @@ My goal is to render 8 shapes at 24 FPS:
  - 8 distinct shapes is usually enough to create a complex scene (ray marching allows for cool tricks that can multiply amount of your shapes without performance decrease)
 
 
-## Plans
+# Plans
  - Cleanup the code and increase performance
  - Build an actually usable API
  - Use `ncurses` instead of just printing to `STDOUT`
diff --git a/blog/2021-10-28.md b/blog/2021-10-28.md
index 152aede..aece45f 100644
--- a/blog/2021-10-28.md
+++ b/blog/2021-10-28.md
@@ -7,5 +7,5 @@ Thanks to `NCurses` it supports camera navigation using `VIM`-keys. Here's how i
 
 [![asciicast](https://asciinema.org/a/Wo3mWNQUTYAeZkAYob2gKzv4h.svg)](https://asciinema.org/a/Wo3mWNQUTYAeZkAYob2gKzv4h)
 
-## Source code
+# Source code
 Project source is now available [on GitHub](https://github.com/eug-vs/pistol) :github:
diff --git a/blog/2022-03-26.md b/blog/2022-03-26.md
index f782bbb..1bc09b2 100644
--- a/blog/2022-03-26.md
+++ b/blog/2022-03-26.md
@@ -1,7 +1,7 @@
 # Agent-less infrastructure management with Ansible :ansible:
 As I explore new things and grow my homelab :raspberry-pi: infrastructure things start to get a little messy. I've reached the point where I should start using more advanced deployment strategy than just manually setting up servers via SSH or `rsync`-ing a bunch of files into them. The goal is to reach [Infrastructure as Code](https://en.wikipedia.org/wiki/Infrastructure_as_code).
 
-## But what about Docker? :whale:
+# But what about Docker? :whale:
 [Docker](https://www.docker.com/) is an amazing tool that solves particularly nasty problem - isolating your application from environment and **reliably** running it on any platform. You just pack your application into the container and ship it anywhere you want! It makes your app **scalable**!
 
 I use Docker on my daily job and I can't imagine it otherwise. But here, in my tiny homelab (which is just one RaspberryPI :raspberry-pi: at this point), this is not world-class production problems, so it might be an overkill.
@@ -10,14 +10,14 @@ Docker requires your servers to run a *daemon* - e.g extra software layer (and i
 
 ![meme](/public/docker-on-rpi.jpg)
 
-## Introducting Ansible :ansible:
+# Introducting Ansible :ansible:
 [Here it comes](https://ansible.com) - **agent-less** deployment tool that doesn't require your server to run anymore bullshit than good old Python :python: and open SSH port.
 
 In Ansible you define so called playbooks - `YAML` specs of your tasks. Then you just feed the `YAML` to `ansible-playbook` and voila! It's already SSHing into your machines and doing your job now!
 
 Ansible is not the tool you should learn, it's so simple that you can use it right away!
 
-## Examples from my infrastructure :raspberry-pi:
+# Examples from my infrastructure :raspberry-pi:
 Ansible has a bunch of built-in convenience commands that make your life even more enjoyable.
 
 ![meme](/public/pepe-smug.png)
diff --git a/blog/2022-04-17.md b/blog/2022-04-17.md
index b7c1150..d6ca637 100644
--- a/blog/2022-04-17.md
+++ b/blog/2022-04-17.md
@@ -7,7 +7,7 @@ I always wanted to do that, but there was a fear of unknown:
 
 Of course, none of that shit can stop me!
 
-## My CPU is weak :cry:
+# My CPU is weak :cry:
 My laptop has a pretty weak CPU (**Intel i3**) compared to flagship models. My PC has **Intel i5**, so obviously compiling packages on laptop will be even slower. That is definitely gonna be a problem...
 
 But wait, why don't we use **both CPU's** for compilation? :thinking:
@@ -25,12 +25,12 @@ Basically my PC runs a `distccd` server in my **LAN** and my laptop connects to
  - I can setup [ccache](https://wiki.gentoo.org/wiki/Ccache) and share compilation cache within my network, making heavy package updates finish in seconds
 
 
-## What if I'm outside and don't have time for compilation? :scream:
+# What if I'm outside and don't have time for compilation? :scream:
 Actually turns out it's a very hypothetical situation. Most of the time you already have your toolkit installed anyway. It's only annoying if you want to try something new - for that I recommend remote or virtual machines (yes, `docker` still exists).
 
 In any case, if such an urgent situation occurs, **you can just get a binary!** There are also ways to setup your own [binary package server](https://wiki.gentoo.org/wiki/Binary_package_guide).
 
-## Managing portage configuration across workstations :hammer_and_wrench:
+# Managing portage configuration across workstations :hammer_and_wrench:
 [Portage](https://wiki.gentoo.org/wiki/Portage) is **the best** package manager I ever used. The obvious benefit is an ability to split your packages into [sets](https://wiki.gentoo.org/wiki/Package_sets). I can define as many sets as I want, for example here's my `/etc/portage/sets/base`:
 ```bash
 app-admin/doas
diff --git a/style.css b/style.css
index 2ec5a34..72b0700 100644
--- a/style.css
+++ b/style.css
@@ -5,7 +5,7 @@ html {
 }
 body {
   margin: 0 auto;
-  max-width: 50em;
+  max-width: 1100px;
   padding-left: 50px;
   padding-right: 50px;
   padding-top: 50px;
@@ -13,6 +13,7 @@ body {
   word-wrap: break-word;
   text-rendering: optimizeLegibility;
   font-kerning: normal;
+  font-size: 16px;
 }
 @media (max-width: 600px) {
   body {
@@ -30,16 +31,20 @@ a {
 img {
   max-width: 100%;
 }
-h1, h2, h3, h4, h5, h6 {
+h1 {
   font-weight: normal;
+}
+h2, h3, h4, h5, h6 {
+  font-family: "Bitter", serif;
+  font-weight: normal;
+  line-height: 1.1;
   margin-top: 1.4em;
 }
-h5, h6 {
-  font-size: 1em;
-  font-style: italic;
+h2 {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
 }
-h6 {
-  font-weight: normal;
+h3 {
+  font-size: 21px;
 }
 ol, ul {
   padding-left: 1.7em;
@@ -57,7 +62,7 @@ blockquote {
 }
 code {
   font-family: monospace;
-  font-size: 130%;
+  font-size: 90%;
   margin: 0;
   padding: 2px;
   background: #1d2021;