Set up everything

2025-12-06 00:44:39 +01:00 · 2018-12-06 15:38:40 +01:00 · 2018-12-06 15:38:40 +01:00 · f9220ada9b
commit f9220ada9b
24 changed files with 651 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+/_site
+/.jekyll-cache
+/.ruby-version
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -0,0 +1,28 @@
+image: ruby:2.5
+
+cache:
+  paths:
+  - vendor/
+
+before_script:
+  - bundle install --path vendor
+
+pages:
+  stage: deploy
+  script:
+  - bundle exec jekyll build -d public
+  artifacts:
+    paths:
+    - public
+  only:
+  - master
+
+test:
+  stage: test
+  script:
+  - bundle exec jekyll build -d test
+  artifacts:
+    paths:
+    - test
+  except:
+  - master
--- a/1
+++ b/1
@ -0,0 +1 @@
+www.lloeki.dev
--- a/3
+++ b/3
@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gem 'jekyll'
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -0,0 +1,68 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.7.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.7)
+    em-websocket (0.5.2)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    ffi (1.14.2)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.6.0)
+    i18n (1.8.7)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.2.0)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.4.0)
+      pathutil (~> 0.9)
+      rouge (~> 3.0)
+      safe_yaml (~> 1.0)
+      terminal-table (~> 2.0)
+    jekyll-sass-converter (2.1.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.3.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.4.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.6)
+    rb-fsevent (0.10.4)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.4)
+    rouge (3.26.0)
+    safe_yaml (1.0.5)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    terminal-table (2.0.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    unicode-display_width (1.7.0)
+
+PLATFORMS
+  ruby
+  x86_64-darwin-20
+
+DEPENDENCIES
+  jekyll
+
+BUNDLED WITH
+   2.2.3
--- a/_config.yml
+++ b/_config.yml
@ -0,0 +1,6 @@
+exclude:
+  - vendor
+  - Gemfile*
+  - .gitignore
+include:
+  - .well-known
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
+    <title>lloeki - {{ page.title }}</title>
+    <link rel="stylesheet" href="/style.css" />
+  </head>
+  <body lang='en-US'>
+    <main>
+        <h1 class='title'>{{ page.title }}</h1>
+
+        <section class='content'>
+            {{ content }}
+        </section>
+    </main>
+    <footer>
+        <a href="https://www.lloeki.dev">www.lloeki.dev</a> - hack. build. create.
+    </footer>
+  </body>
+</html>
--- a/_posts/2020-01-06-pulling-the-plug-on-archmac.md
+++ b/_posts/2020-01-06-pulling-the-plug-on-archmac.md
@ -0,0 +1,53 @@
+---
+layout: default
+title:  Pulling the plug on ArchMac
+---
+
+Dissatisfied with the then status of macOS package managers, 12 years ago [I kicked off a stupid idea][0].
+
+[0]: https://bbs.archlinux.org/viewtopic.php?pid=410679#p410679 
+
+> Hello again, fellow archers! I've not posted nor monitored arch-related stuff for quite some time, because I moved to MacOSX...
+>
+> *-snip roundup of status-*
+>
+> so I went on a journey to see what I can do about it.
+>
+> *-snip technical details-*
+>
+> on to test the thing:
+>
+> ```
+> $ /opt/arch/usr/bin/pacman -V
+> 
+>  .--.                  Pacman v3.2.0 - libalpm v3.0.0
+> / _.-' .-.  .-.  .-.   Copyright (C) 2006-2008 Dan McGee <dan@archlinux.org>
+> \  '-. '-'  '-'  '-'   Copyright (C) 2002-2006 Judd Vinet <jvinet@zeroflux.org>
+>  '--'
+>                        This program may be freely redistributed under
+>                        the terms of the GNU General Public License.
+> ```
+>
+> woohoo.
+
+A little bit of digging showed my first efforts predate Homebrew’s first commit by a couple of months!
+
+There were ups and downs across the years, especially as the ecosystem evolved, binary hosting went from pricey to cheap, technical hurdles, and outside constraints, up to ultimately getting official approval to use the Arch brand. But mostly I’ve been maintaining it by myself, for my own use. Honestly the biggest project-to-user-base ratio I’ve had to handle.
+
+I learned so much about using simple, boring solutions, automating as much as possible, and using lever effects to decuple developer impact. Computers truly are the bicycle of the mind.
+
+Last March at ParisRB 2020, I had the opportunity to chat with Yurihiko Matsumoto, about the approach to keep the momentum on projects of this size, which boils down to one’s own satisfaction, a.k.a scratch your own itch. As long as it brings you joy, you have no reason to stop.
+
+But maintaining ArchMac has been painful since macOS Catalina. Pacman started having strange hard-to-debug failures. Packages updates fell by the wayside. After a happy time of free CI, things became more difficult on that front, with increasingly limited minutes, pricey bills for overuse, and limited macOS version range for testing. Even going the handmade virtualisation path with custom runners became hard (GitLab Runner itself is still a breeze but VirtualBox is now officially dead on macOS as they will not switch from their virtualisation engine).
+
+Even with outdated packages, ArchMac still was the only one that worked right away on Big Sur, somewhat proving that the model is sound. But now there’s Apple M1 and while I’m confident I could make pacman work there, there’s no CI yet. The time and money cost to me also seems higher than ever. Part of it is my own failing at marketing the thing to potential users, contributors, and sponsors, as the project failed to get traction overall.
+
+Still, I’m happy to see the macOS package manager ecosystem thriving. Now there’s still MacPorts, but also Homebrew, pkgsrc, and Nix. So many alternatives with solid communities! On the flip side it made it really hard to get any mindshare.
+
+Ah, Nix. It has some limitations in my mind, and is quite a bit more complex to build for (ABS is still so dead simple, even compared to Homebrew formulas). Their hydra CI is stellar, and package support is wide, although there can be corner cases where it’s lacking. It solves some limitations of ArchMac, and it’s now my go-to choice.
+
+Recently I also had the opportunity to join a great company and enjoy what I work on a lot, and I also have other fish to fry, like contributing to the Ruby ecosystem. These are areas I want to focus more on, and I realised ArchMac became dead weight onto my mind and wallet. Fighting the urge of sunk cost fallacy, I decided it’s time to pull the plug.
+
+Goodbye [ArchMac][1], we had a good time, I will long for you but I have to move on.
+
+[1]: https://archmac.org
--- a/_posts/2021-04-16-a-survival-guide-to-macos-from-linux.md
+++ b/_posts/2021-04-16-a-survival-guide-to-macos-from-linux.md
@ -0,0 +1,288 @@
+---
+layout: default
+title:  A survival guide to macOS from Linux
+---
+
+Due to MDM requirements in our company, it turns out some team members had to move from Linux machines to macOS. I've been through this transition myself a decade or so ago, and since I was a Linux user first - and still am at heart - with a lot of habits and expectations, I've learned a few tricks along the way. One of my fellows suggested I collate these tips into a blog post, so here it is.
+
+In this guide I cover some areas that make macOS behave a little bit as a Linux user would expect, while not pretending to bend over backwards to make macOS a Linux clone, which would be a doomed strategy (for anything, really).
+
+I'm not going to derail into how this or that is better or worse on one or the other side of the fence, I'm just trying to make the experience a bit smoother when you're used to Linux and have to drop into macOS regularly.
+
+# The dreaded TouchBar
+
+Make sure to tune the TouchBar. You can have the extended control strip by default, pick F1-F12 on fn mod, and make it behave a certain way in specific cases, e.g. display F1-F12 as main per app in the `Shortcuts` tab, `Function Keys` section.
+
+![](/assets/Screenshot 2021-04-08 at 16.34.18.png){: .window }
+
+But also understand that the reduced control strip has some interesting perks: you don't have to touch brightness or volume and then only move to the slider, you can press and slide right away without lifting the finger!
+
+A must have for the Touch Bar is [Haptic Key](https://github.com/niw/HapticKey), which creates haptic feedback on touch. It's a game changer.
+
+You might be interested in remapping `Caps Lock` to `Escape` or `Control`, depending on your habits and favorite editor. You can do so per keyboard in `System Preferences`, `Keyboard`, `Modifier Keys`.
+
+![](/assets/Screenshot 2021-04-08 at 16.52.15.png){: .window }
+
+# Spotlight
+
+I have it bound to `Command`+`Space`, but the default modifier might be different. I mostly start my apps this way, and have the Dock auto-hide.
+
+Using `Command`+`Return` on a search result opens the parent directory in the Finder instead of the search result itself.
+
+# Virtual desktops
+
+Make sure to adjust some settings in `System Settings`, `Mission Control`, for example uncheck `Automatically rearrange spaces based on recent use`, which is a braindead setting, especially with the tip below.
+
+![](/assets/Screenshot 2021-04-08 at 16.35.18.png){: .window }
+
+Indeed, slide up with 3 fingers to enter Mission Control, then move the pointer up and add 10 desktops.
+
+Then in System Preferences, go to the `Shortcuts` tab, and enable `^1` to `^9`, and `^0` (the shortcuts only appear if the desktop have been created, they then stay).
+
+![](/assets/Screenshot 2021-04-08 at 16.37.32.png){: .window }
+
+With the previous tip about disabling automatic ordering, this makes your virtual desktops much more reliable and quick to jump to.
+
+A quick note: spaces are a superset of virtual desktops, and also includes fullscreen apps. This ties in nicely with the `Displays have separate Spaces` options, allowing you to shuffle all of them around independently on multihead setups. But the `^n` shortcuts only jump to numbered virtual desktops, not fullscreen app spaces. For that, you'll need to use relative movement with `Control`+`Left`/`Right`.
+
+# Tiling and snapping
+
+Since a few macOS versions, there is native support for limited tiling and snapping. Tiling works by dedicating a space to one (fullscreen) or two (side by side) apps, while snapping is quick window resizing.
+
+Hover over the green traffic light in the titlebar, and a menu will appear, revealing tiling options. Press option to reveal alternate options for snapping. You can find these options back in the Window menu in the menubar.
+
+![](/assets/Screenshot 2021-04-08 at 16.40.42.png){: .compare }
+![](/assets/Screenshot 2021-04-08 at 16.41.28.png){: .compare }
+![](/assets/Screenshot 2021-04-08 at 16.42.44.png){: .compare }
+![](/assets/Screenshot 2021-04-08 at 16.43.02.png){: .compare }
+
+And since it's up there, you can leverage a really nice feature of macOS, that enables you to assign any menubar entry to any shortcut, in any app, or for all apps.
+
+- Go to `System Preferences`, `Keyboard`, `Shortcuts`
+- Select `App Shortcuts`
+- Click on `+`
+- Select `All Applications` in the dropdown
+- Type the menu entry label EXACTLY (it's case sensitive)
+- Press the desired shortcut in the box below
+
+I use `Control`+`Option`+`Left`/`Right` for `Move Window to Left Side of Screen` and `Move Window to Right Side of Screen`, and `Control`+`Option`+`Return` for `Zoom` (a.k.a maximise)
+
+![](/assets/Screenshot 2021-04-08 at 16.44.24.png){: .window }
+
+For some more advanced snapping I use an app called Magnet. It's simple, works well, and allows for dragging to various parts of the screen to snap in maximised, half, thirds, or quarters.
+
+# Screenshots and screen recording
+
+There are four shortcuts for that:
+
+- `Command`+`Shift`+`3`: instant whole screenshot
+- `Command`+`Shift`+`4` then `drag`: area screenshot, instant upon mouse button release
+- `Command`+`Shift`+`4` then `Space` then `click`: instant window screenshot (as showcased in this very article)
+- `Command`+`Shift`+`5`: advanced screen capture, including screen recording, output location, and delay
+
+If you want to trim and reencode recordings, `Quicktime Player` is your friend.
+
+# Terminals
+
+`Terminal.app` gets a bad rep, but it carries that from early broken versions. Today it's one fo the top contenders in critical areas such as [latency](https://danluu.com/term-latency/), color accuracy, compatibility, and pragmatic featureset. The automatic (magically, on each prompt) and manual (with `Command`+`Return`) line bookmark that you jump to with `Command`+`UP`/`DOWN` is a feature I can hardly live without now.
+
+There's the much touted iTerm 2, with many, many advanced features, but personally I don't have much use for them so it's just dead weight to me.
+
+# The base system
+
+It's based on BSD, so the command line tools are BSD tools. They're not crippled, they're just lacking GNUisms one might have grown accustomed to. Here's an opportunity to learn about portability across unixes.
+
+# The init system
+
+The equivalent of `systemd` is `launchd`, you control it with `launchtl`. There are two modes of operations, as seen is the various `Library` directories:
+
+- `LaunchDaemons`: started at boot, run as `root` unless instructed to drop to another user/group, no access to UI and windowing. More like `systemd/system`.
+- `LaunchAgents`: have access to UI and windowing, started on login, there is one folder per user and one global applying to all users. More like `systemd/user`.
+
+# The dev environemnt
+
+You probably want some source control, compiler, libs, and headers, the Command Line Tools can be quickly made available using `xcode-select --install` instead of reaching for the big Xcode download.
+
+Many things are sandboxed by default, so you may or may not want to enable the following for your terminal app in `System Preferences`, `Security & Privacy`:
+
+- `Full Disk Access`: allows any program called within the terminal to reach anywhere in the filesystem tree
+- `Developer Tools`:` allows to run programs that run afoul of some security policy
+
+Be sensible and use caution when disabling or overriding security features.
+
+# XDG, FHS, and filesystem things
+
+Yes, the filesystem is case insensitive by default.
+
+`xdg-open` has an equivalent, which is simply `open` (frequently used with the `-a` flag).
+
+Like with XDG and the FHS, there's a whole filesystem standard that may seem alien, but it's quite useful and stable. You should quickly get the hang of things like `Library/Caches`.
+
+`/` is not writable anymore. There's `/opt` and `/usr/local` though. If you ever need something at the root, look for `/etc/synthetic.conf` and APFS (which has some btrfs-like features such as subvolumes and snapshots).
+
+`xattrs`, `chflags`, and `ls -l@` may help you reach out to mysterious filesystem metadata.
+
+There's a concept of directories called bundles, that present themselves as a single unit in the UI. Look into a `.app` form the terminal, or see how `.localized` items have different display names in the Finder. You'll get the hang of it quickly.
+
+Finder has the habit to drop some `.DS_Store` files here and there. Ignore them aggressively in `.gitignore`. At least disable them on netowrk shares:
+
+```
+# stop polluting network shares
+defaults write com.apple.desktopservices DSDontWriteNetworkStores -bool true
+# stop polluting USB disks
+defaults write com.apple.desktopservices DSDontWriteUSBStores -bool true
+```
+
+# Package management
+
+I don't like Homebrew (no offense, they're doing great work. I just don't like it). It saves the day once in a while but it's really subpar compared to Linux package managers such as `apt` or `pacman`, with a number of shortcomings I personally find unacceptable.
+
+So I use [nixpkgs](https://nixos.org/guides/install-nix.html) which is a bit scary at first blush but is in fact quite easy to set up and use (really, no harder than Homebrew). You'll find an intro to that on this very blog.
+
+There's also good old [MacPorts](https://www.macports.org) and [pkgsrc](http://pkgsrc.joyent.com/) which I heard good things about.
+
+# Docker, and Linux on macOS
+
+I really don't enjoy Docker for Mac: it's a kitchensink, the new UI is a WebKit mess full of call-to-actions, and even `docker images` is for some reason slower than using a Linux VM in VMware Fusion. The latter really takes the crown in performance and stability.
+
+So get Fusion, and get a VM.
+
+I have a basic one at hand with Docker, X, and the absolute minimal essential things set up to have it behave nicely right away.
+
+```
+curl -o ~/Downloads/ArchVMware.tar.gz http://some.where.undisclosed/ArchVMware.tar.gz
+echo '1bdb49b5f5076be882ed601244f525848ff9fca39b8cbd5d363f606ea78d65f8  ArchVMware.tar.gz' | shasum -c
+tar -C ~/'Virtual Machines.localized' -xvzf ~/Downloads/ArchVMware.tar.gz
+```
+
+`~/'Virtual Machines.localized'` is created by Fusion.
+
+Default auth is `root` / `hunter2` (hehe), so I override that right away.
+
+There's a `.xsession` for root which is `exec i3`
+
+As root:
+
+```
+user='<username>'
+useradd -m "${user}"
+passwd "${user}"
+gpasswd -a "${user}" audio
+gpasswd -a "${user}" video
+gpasswd -a "${user}" docker
+gpasswd -a "${user}" wheel
+cp ~/.xsession /home/"${user}"/.xsession
+chmod 700 /home/"${user}"/.xsession
+chown "${user}":wheel /home/"${user}"/.xsession
+```
+
+And a quick `~/.xsession` for the new user:
+
+```
+xrdb -merge ~/.Xresources
+#export QT_AUTO_SCREEN_SCALE_FACTOR=1
+export QT_AUTO_SCREEN_SCALE_FACTOR=0
+export QT_SCALE_FACTOR=1
+export QT_SCREEN_SCALE_FACTORS=2
+export GDK_SCALE=2
+export GDK_DPI_SCALE=0.5
+picom --daemon --no-dock-shadow --no-dnd-shadow --shadow-radius=0 --shadow-opacity=0 --shadow-offset-x=0 --shadow-offset-y=0 --fade-in-step=0.028 --fade-out-step=0.028 --fade-delta=1 &
+~/.fehbg &
+dunst &
+exec i3
+```
+
+To round up HiDPI, put that in `.Xresources`
+
+```
+Xft.dpi:        192
+!Xft.dpi:        96
+Xft.antialias:  true
+Xft.rgba:       rgb
+Xft.hinting:    true
+Xft.hintstyle:  hintslight
+```
+
+Finally on the macOS side, one can do:
+
+```
+# on macOS
+$ nix-env -iA docker
+$ export DOCKER_HOST="ssh://${user}@172.16.159.5" # look up the VM IP
+$ docker images
+```
+
+`vmhgfs` is set up and mounted at `/mnt/vfhgfs`. I add a symlink at /Users to `/vmhgfs/Users`, so `docker run -v "${PWD}":/somewhere/in/container some:image` just works, even from macOS.
+
+For port forwarding to and from the VM, I suppose one could set up some ports in Fusion, but I just use:
+
+```
+ssh -N -L 127.0.0.1:8080:127.0.0.1:8080 172.16.159.5
+```
+
+Sometimes I get some short stalls once in a while with 3D accel (feels like some garbage collect). If you want to disable 3d acceleration, `alacritty` won't work (it needs 3d accel) so switch terminal:
+
+```
+sudo pacman -S xterm
+# vim ~/.xsession
+export TERMINAL=xterm
+```
+
+And to make xterm palatable, add this to `~/.Xresources`:
+
+```
+!---- xterm ----
+xterm*geometry:           80x24
+xterm*borderWidth:        0
+!xterm*faceName:           terminus:bold:pixelsize=14
+!xterm*faceName:           Menlo:pixelsize=14
+xterm*faceName:           Menlo:pixelsize=24
+!xterm*font:              -*-dina-medium-r-*-*-16-*-*-*-*-*-*-*
+xterm*dynamicColors:      true
+xterm*utf8:               2
+xterm*eightBitInput:      true
+xterm*saveLines:          10240
+xterm*scrollKey:          true
+xterm*scrollTtyOutput:    false
+xterm*scrollBar:          false
+!xterm*scrollBar*thickness: 1
+xterm*rightScrollBar:     true
+xterm*jumpScroll:         true
+xterm*multiScroll:        true
+xterm*toolBar:            false
+xterm*termName:           xterm-256color
+xterm*loginShell:         true
+xterm*selectToClipboard:  true
+xterm*VT100.Translations: #override \
+      Shift Ctrl<Key>V: insert-selection(CLIPBOARD) \n\
+      Shift Ctrl<Key>V: insert-selection(PRIMARY) \n\
+! Zenburn
+!xterm*scrollBar*background:  #3f3f3f
+!xterm*scrollBar*foreground:  #dcdccc
+xterm*background:  #3f3f3f
+xterm*foreground:  #dcdccc
+xterm*color0:      #1E2320
+xterm*color1:      #705050
+xterm*color2:      #60b48a
+xterm*color3:      #dfaf8f
+xterm*color4:      #506070
+xterm*color5:      #dc8cc3
+xterm*color6:      #8cd0d3
+xterm*color7:      #dcdccc
+xterm*color8:      #709080
+xterm*color9:      #dca3a3
+xterm*color10:     #c3bf9f
+xterm*color11:     #f0dfaf
+xterm*color12:     #94bff3
+xterm*color13:     #ec93d3
+xterm*color14:     #93e0e3
+xterm*color15:     #ffffff
+```
+
+For the VM, I disable -all- keyboard shortcuts and mappings. This way entering fullscreen makes it as close to the real deal as possible. The only mandatory shortcut is pressing and releasing CMD+CTRL, which releases input capture from the VM.
+
+Watch out for the default mouse shortcuts as well, especially if you want to use `Option`+`Right Click` in a window quadrant to quickly resize.
+
+# Wrap-up
+
+This is only a basic guide, but dropping all the tips down at once would be a significant undertaking. There's much more to discover, learn, tweak, and adjust to, but I hope this can already be helpful! Darwin can be a great platform if you keep your mind open. Maybe this could be material for a second part.
--- a/assets/Screenshot
+++ b/assets/Screenshot
--- a/assets/Screenshot
+++ b/assets/Screenshot
--- a/assets/Screenshot
+++ b/assets/Screenshot
--- a/assets/Screenshot
+++ b/assets/Screenshot
--- a/assets/Screenshot
+++ b/assets/Screenshot
--- a/assets/Screenshot
+++ b/assets/Screenshot
--- a/assets/Screenshot
+++ b/assets/Screenshot
--- a/assets/Screenshot
+++ b/assets/Screenshot
--- a/assets/Screenshot
+++ b/assets/Screenshot
--- a/assets/Screenshot
+++ b/assets/Screenshot
--- a/assets/Screenshot
+++ b/assets/Screenshot
--- a/assets/Screenshot
+++ b/assets/Screenshot
--- a/assets/Screenshot
+++ b/assets/Screenshot
--- a/index.html
+++ b/index.html
@ -0,0 +1,11 @@
+---
+layout: default
+title: index
+---
+<ul>
+  {% for post in site.posts %}
+    <li>
+      <a href="{{ post.url }}">{{ post.title }}</a>
+    </li>
+  {% endfor %}
+</ul>
--- a/style.css
+++ b/style.css
@ -0,0 +1,169 @@
+/* <reset> */
+
+body { margin: 0 }
+
+h1, h2, h3, h4, h5, h6 { font-weight: normal }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0
+}
+
+th, td {
+  text-align: left;
+  vertical-align: top
+}
+
+img, iframe { border: 0 }
+
+/* </reset> */
+
+html, body {
+  background-color: #FCFCFC;
+  color: #030303;
+}
+
+@media (prefers-color-scheme: dark) {
+  html, body {
+    background-color: #101010;
+    color: #D0D0D0;
+  }
+}
+
+body {
+  text-align: center;
+  height: 100%;
+
+  font-family: Avenir;
+  font-weight: 100;
+}
+
+h1, h2, h3, h4, h5 {
+  font-family: Avenir;
+}
+
+img {
+  margin-top: 30px;
+  height: auto;
+  max-width: 100%;
+
+  box-sizing: border-box;
+  border: 1px solid #7f7f7f;
+  border-radius: 7px;
+}
+
+img.window {
+  border: none;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+
+  width: 75%;
+}
+
+img.compare {
+  width: 49%;
+}
+
+h1 {
+  margin-top: 30px;
+  margin-bottom: 0;
+}
+
+h1 + div {
+  margin-bottom: 30px;
+
+  font-weight: 500;
+}
+
+main {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+section {
+  margin: 0 20px;
+}
+
+section.content {
+  text-align: justify;
+  text-justify: auto;
+  hyphens: auto;
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+}
+
+blockquote {
+  border-left: 1px solid rgba(230, 230, 230, 0.7);
+  border-right: 1px solid rgba(230, 230, 230, 0.7);
+  margin: 0;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+main h1 {
+  text-align: center;
+}
+
+pre {
+  padding: 16px;
+
+  text-align: left;
+  background-color: rgba(230, 230, 230, 0.7);
+  color: #353535;
+  border-radius: 12px;
+
+  overflow: scroll;
+}
+
+code {
+  font-family: monospace;
+}
+
+code.comment {
+  color: #9F9F9F;
+}
+
+div.desc {
+  text-align: left;
+  margin: 20px 0;
+}
+
+div.example {
+  border-top: 1px solid #DDD;
+  margin: 20px 0;
+}
+
+@media (min-width: 768px) {
+  div.desc.code {
+    float: left;
+    width: 38%;
+  }
+
+  div.desc + pre {
+    float: right;
+    width: 56%;
+  }
+
+  div.example, section, footer {
+    clear: both;
+  }
+}
+
+footer {
+  padding: 5px;
+  margin-top: 30px;
+  margin-bottom: 30px;
+
+  font-family: sans-serif;
+  font-size: 10px;
+}
+
+a, a:visited {
+  color: #7F7F7F;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}