Update ignored files

But do add a bit around any ‘.note’ elements.

.gitignore

@@ -6,3 +6,6 @@
 # Added automatically by `eldev init'.
 /.eldev
 /Eldev-local
+
+# Autosave files
+*~

GNUmakefile

@@ -1,4 +1,4 @@
-.PHONY: publish deploy html css help
+.PHONY: publish deploy html css help theme
 
 help:							## Show this help
 	@egrep -h '\s##\s' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}'
@@ -30,3 +30,12 @@ clean:							## Remove all of the build files
 	@rm -rvf *.elc
 	@rm -rvf public
 	@rm -rvf .org-timestamps
+
+serve:						   ## Run a simple web server to look at the results
+	@cd public && php -S localhost:8000
+
+theme:							## Generate the theme CSS
+	eldev emacs --quick --batch --load htmlize --load ox-html \
+	    -eval "(setq org-html-htmlize-output-type 'css)" \
+	    -funcall org-html-htmlize-generate-css \
+	    -eval '(write-file "src/less/yoshi.css")'

README.org

@@ -1,12 +1,24 @@
 #+TITLE: ryuslash.org README
 #+STARTUP: showall
 
-This is the source project of my website [[https://ryuslash.org]]. It
-doesn't contain much for now, but eventually this will be where all my
-stuff lives.
+This is the source project of my website [[https://ryuslash.org]]. It doesn't contain much for now, but eventually this will be where all my stuff lives.
 
 * Compiling
 
-  To compile a local copy from Org-mode files into HTML, use the
-  command ~make~. This will generate a local copy in the ~public_html~
-  directory.
+To work on this project it's recommended that you use Guix Shell.
+
+If you first add the directory containing this project into your =~/.config/guix/shell-authorized-directories=, when you run ~guix shell~ it'll automatically install the necessary dependencies to make sure you can compile and deploy this project:
+
+#+begin_src shell
+  echo "$(pwd)" >> ~/.config/guix/shell-authorized-directories
+#+end_src
+
+And then just run this command to start working:
+
+: guix shell
+
+If you didn't add this directory to your =shell-authorized-directories=, you can accomplish the same thing with:
+
+: guix shell --manifest manifest.scm
+
+To compile a local copy from Org-mode files into HTML, use the command ~make publish~. This will generate a local copy in the ~public_html~ directory. You can also run ~make~ without any arguments to see what available other commands there are.

books/index.org

@@ -0,0 +1,17 @@
+#+TITLE: Books
+#+options: prop:t num:nil
+#+startup: inlineimages
+
+#+begin_note
+This page is likely to go through some major revisions as I'm writing down my thoughts.
+#+end_note
+
+* Getting Things Done
+:PROPERTIES:
+:AUTHOR:   David Allen
+:STARTED:  [2022-01-22]
+:FINISHED: [2022-06-23]
+:END:
+
+#+ATTR_HTML: :alt Cover of the book Getting Things Done by David Allen with the text "Getting Things Done: the art of stress-free-productivity from the New York Times bestselling author David Allen; A brand new edition for 2015." And a picture of David Allen smiling. :class book-cover
+[[file:../assets/getting-things-done-david-allen.jpg]] Great book about organizing the things that you need / want to do. I've been trying to use this method for a long time and finally decided to go to the source material. I'm glad I did. I feel like over all of the blog posts that I read and tips that I'd heard about how GTD actually works, there was a lot that was left out from this book. And I'm sure I've already forgotten a great deal about what's in this book and I expect I'll want to come back to it later, but even the things I have read I think will help me a great deal in organizing my life and feeling like I've done something the day.

config/.gitignore

@@ -0,0 +1 @@
+rincewind.scm

config/rincewind.org

@@ -0,0 +1,121 @@
+#+title: Oni Machine Interface
+#+subtitle: My Literate Machine Configuration
+#+options: num:nil
+
+This is my latest attempt at a literate configuration.
+
+#+begin_note
+This is in the very early stages of an attempt to do this. And usually I get frustrated and give up quite early on. I'll try and get small bits and pieces in here one at a time.
+#+end_note
+
+Here is the command that converts this file into my home configuration. This calls [[file:../guix.org][Guix]] shell with /just/ the =emacs-next= package installed and runs [[file:../emacs.org][Emacs]] to tangle this file. When tangling is done it runs guix home to configure my environment.
+
+#+begin_note
+For the moment this doesn't do ~guix home reconfigure~ but ~guix home build~ instead. I'm still getting this up to the point where I can actually use it.
+#+end_note
+
+#+begin_src sh :results silent
+  guix shell --pure emacs-next -- emacs \
+       -quick -batch \
+       -load ob-tangle \
+       -visit rincewind.org \
+       -funcall org-babel-tangle
+  guix home build rincewind.scm
+#+end_src
+
+* Environment
+
+This is a random assortment of environment variables that I like to have defined for various reasons.
+
+The =LESS= environment variable specifies the default command-line arguments to pass in to =less= whenever it is run. I've gotten quite used to these:
+
+#+ATTR_HTML: :class short-dl
+- =F= :: Causes =less= to exit right away when there is less than one screen of text to display.
+- =X= :: Prevents the screen from being cleared away when =less= exits (it does more, but this is why I use it)
+- =R= :: Displays ANSI color escape sequences to be rendered as normal, instead of as readable characters. In other words it lets =less= display colored text instead of displaying escape sequences.
+- =S= :: Truncates long lines instead of wrapping them. Makes it easier for me to read.
+- =i= :: This causes any searches using =/= to become case-insensitive so that the search term “done” will match “done”, “Done”, “DONE”, and any other combination of upper- and lowercase letters.
+
+#+begin_src scheme :noweb-ref environment-variables
+  ("LESS" . "FXRSi")
+#+end_src
+
+I use the =MY_GUIX_CONFIGURED= just as an indication that [[file:../guix.org][Guix]] home actually configured my user profile. It's not actually necessary for anything.
+
+#+begin_src scheme :noweb-ref environment-variables
+  ("MY_GUIX_CONFIGURED" . "1")
+#+end_src
+
+This opts out of sending any telemetry to Microsoft whenever I play around with any .Net things.
+
+#+begin_src scheme :noweb-ref environment-variables
+  ("DOTNET_CLI_TELEMETRY_OPTOUT" . "1")
+#+end_src
+
+Turn on dark-mode for Calibre. I prefer dark mode everywhere.
+
+#+begin_src scheme :noweb-ref environment-variables
+  ("CALIBRE_USE_DARK_PALETTE" . "1")
+#+end_src
+
+Because I use [[file:../guix.org][Guix]] on top of another distribution, this variable needs to be set in order for locales to work properly for both package installed through Guix and ones installed by the host distribution.
+
+#+begin_src scheme :noweb-ref environment-variables
+  ("GUIX_LOCPATH" . "$HOME/.guix-home/profile/lib/locale")
+#+end_src
+
+Again because I use Guix on top of another distribution this variable ensures that the things I have stored away in my usual data directory get included, not just the ones Guix defines.
+
+#+begin_src scheme :noweb-ref environment-variables
+  ("XDG_DATA_DIRS"
+   . "${XDG_DATA_DIRS}${XDG_DATA_DIRS:+:}/usr/local/share:/usr/share")
+#+end_src
+
+I was working with =git= recently, splitting some utilities out into their own repository from a bigger repository using =filter-branch=. Apparently =filter-branch= has been deprecated because it's easy to make mistakes and there's better alternatives now. But =filter-branch= is what I know and my needs are simple, so I disable that warning.
+
+#+begin_src scheme :noweb-ref environment-variables
+  ("FILTER_BRANCH_SQUELCH_WARNING" . "1")
+#+end_src
+
+Putting it all together to define the service for my home configuration.
+
+#+begin_src scheme :noweb yes :noweb-ref services
+  (define oni-environment-service
+    (simple-service
+     'home-environment-service
+     home-environment-variables-service-type
+     '(
+       <<environment-variables>>)))
+#+end_src
+
+* GTK3
+
+I have a very simple GTK configuration. All I configure is that the applications should prefer a dark theme over a light one.
+
+#+begin_src conf-unix :tangle settings.ini
+  [Settings]
+  gtk-application-prefer-dark-theme=true
+#+end_src
+
+
+
+* Home
+
+This brings it all together. The =<<services>>= is where all the services defined throughout this document are placed, and the last few lines return my home environment.
+
+#+begin_src scheme :tangle rincewind.scm :noweb tangle
+  (use-modules
+   (gnu services)
+   (gnu home services))
+
+  <<services>>
+
+  (home-environment
+   (services
+    (list
+     oni-environment-service)))
+#+end_src
+
+* Changelog
+
+- [2022-11-16 Wed] :: Added a code block that tries to tangle this file and then build the result. And made the output an actual home environment.

emacs.org

@@ -0,0 +1,13 @@
+#+TITLE: Emacs
+#+OPTIONS: toc:nil num:nil
+#+html_link_up: .
+#+html_link_home: /
+
+- Website :: https://gnu.org/software/emacs
+
+
+I write all the content for this site and for [[https://blog.ryuslash.org/][my blog]] in Emacs. I try to do all of my work in it, although it doesn’t always work out. I have a specific [[https://blog.ryuslash.org/tags/emacs][tag]] for it on my blog with a [[https://blog.ryuslash.org/feed/atom?with=emacs][feed]] you can subscribe to in case you don’t care about the rest of it.
+
+As I started reading [[https://blog.calebjay.com/posts/my-emacs-environment/][this post]] I was inspired to write a little more about my own Emacs experience and origins. I had just started using GNU/Linux on my desktop and was looking for a good IDE or text editor. I tried [[https://www.eclipse.org/][Eclipse]], [[https://www.codeblocks.org/][Code::Blocks]], [[https://www.oracle.com/tools/technologies/netbeans-ide.html/][NetBeans]], and of course [[https://www.vim.org/][Vim]]. I was specifically looking for one that worked well from a terminal window and supported nice looking syntax highlighting. So really it ended up being down to either Vim or Emacs. At the time I didn’t really like either much. I would always get stuck in Vim and I couldn’t understand this weird Lisp language that Emacs used for its configuration. And the keybindings were so weird!
+
+

emacs/.gitignore

@@ -0,0 +1 @@
+*.svg

emacs/package-based-configuration.org

@@ -15,7 +15,7 @@ For a long time I was using a git repository that contained all of my configurat
 
 #+begin_src dot :exports results :file git-config-workflow.svg
   digraph {
-    graph [bgcolor="#111114"]
+    graph [bgcolor="#222424"]
     node [color="#bfbfbf", fontcolor="#bfbfbf", fontname="sans-serif"]
     edge [color="#bfbfbf", fontcolor="#bfbfbf", fontname="sans-serif"]
     label="Installing my configuration on a new machine"

guix.org

@@ -0,0 +1,2 @@
+#+title: Guix
+#+subtitle: The Emacs of Distros

index.org

@@ -2,8 +2,18 @@
 #+SUBTITLE: Vae Victis, dood!
 #+OPTIONS: toc:nil num:nil
 #+STARTUP: showall
+#+STARTUP: inlineimages
+
+#+begin_center
+[[https://code.ryuslash.org][my code]] | [[https://blog.ryuslash.org][my blog]]
+#+end_center
+
+#+begin_introduction
+#+ATTR_HTML: :id avatar :alt Angry black prinny (looking like Tux), playing on a PSP
+[[file:assets/avatar-96.png]]
 
 Hi, welcome! This is my website. I'm a software developer. I love Free Software and Open Source Software, and all of my projects are available for anyone to use. I also would love for anyone to contribute to any of them. I can’t promise your contribution will be merged, but I can promise it will be considered and greatly appreciated regardless.
+#+end_introduction
 
 * Gardening
 
@@ -15,4 +25,16 @@ I really want to just write, even if it isn't useful for anyone. I have a [[http
 
 * Emacs
 
-The first topic I pay any attention to of course has to be [[https://gnu.org/software/emacs/][Emacs]]. I write all the content for this site in Emacs, I try to work as much as I can in Emacs, and I have a couple of small contributions to Emacs. My blog features a [[https://blog.ryuslash.org/tags/emacs][tag]] about it, specifically with its own [[https://blog.ryuslash.org/feed/atom?with=emacs][feed]] you can subscribe to, in case that’s the only thing you’re interested in.
+The first topic I pay any attention to of course has to be [[file:emacs.org][Emacs]]. I write all the content for this site in Emacs, I try to work as much as I can in Emacs, and I have a couple of small contributions to Emacs. My blog features a [[https://blog.ryuslash.org/tags/emacs][tag]] about it, specifically with its own [[https://blog.ryuslash.org/feed/atom?with=emacs][feed]] you can subscribe to, in case that’s the only thing you’re interested in.
+
+* My literate configuration
+
+Every so often I get really drawn to remaking my entire configuration into a [[file:literate-programming.org][Literate Programming]] style. See my [[file:config/rincewind.org][latest attempt]].
+
+* Topics
+
+- [[file:projects.org][Projects]]
+- [[file:books/index.org][Books]]
+- [[file:podcasts/index.org][Podcasts]]
+- [[file:software/android-launchers.org][Android Launchers]]
+- [[file:software/ci-cd-pipelines.org][CI/CD Pipelines]]

literate-programming.org

@@ -0,0 +1,15 @@
+#+title: Literate Programming
+
+In literate programming the goal is to write your program as you would write a book. Or to see it another way, you write the documentation first, and then the implementation in it. Or another way, you make your documentation executable. It lets us focus on the /why/ of the code before the what.
+
+The idea is that
+
+Here is a video that talks about what literate programming is:
+
+#+begin_export html
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Av0PQDVTP4A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+#+end_export
+
+Some example projects that do this:
+
+- The books “Implementing Elliptic Curve Cryptography” and “Lisp in Small Pieces” are supposed to have been written as literate programs.

magazines/human-readable-magazine.org

@@ -0,0 +1,8 @@
+#+title: Human Readable Magazine
+#+html_link_up: .
+#+html_link_home: /
+
+- Read Issues :: https://humanreadablemag.com/issues
+
+
+A short-lived magazine about programming.

magazines/linux-voice.org

@@ -0,0 +1,8 @@
+ #+title: Linux Voice
+ #+html_link_up: .
+ #+html_link_home: /
+
+ - Read Issues :: https://archive.org/details/LinuxVoice/
+
+
+ A magazine started by Graham Morrison, Mike Saunders, Andrew Gregory, and Ben Everard about Linux and Free and Open Source Software.

manifest.scm

@@ -1 +1,4 @@
-(specifications->manifest '("emacs-eldev"))
+(packages->manifest
+ (list
+  (specification->package "emacs-eldev")
+  (specification->package "emacs-htmlize")))

podcasts/developer-tea.org

@@ -0,0 +1,22 @@
+#+title: Developer Tea
+#+subtitle: Enjoy Your Tea!
+#+options: num:nil toc:nil
+#+html_link_up: .
+#+html_link_home: /
+
+- Website :: https://developertea.com/
+
+
+Hosted by Jonathan Cutrell. 3 Episodes per week. I was drawn to this podcast because it was supposed to have short (10-15min) episodes. And it does for the most part. He also does a lot of very interesting interviews.
+
+I like this podcast because it doesn't talk about code, it talks about how to be better in a more general way. It'll teach you new perspectives and techniques to work better with yourself and with others.
+
+* Dominik Zane, Founder of Around - Part One
+
+[[https://developertea.com/episodes/80733313-c173-4b6e-bf16-2cfe00e81387][Episode page]]
+
+#+begin_quote
+"The tools that we use can have profound effects on our lives" -- Jonathan Cutrell
+#+end_quote
+
+I know this from [[file:../emacs.org][Emacs]]. Its malleability and the availability and freedom of its source code have allowed me to learn and do things that no other tool has. Every other tool I have frustrates me in that way. Although [[https://guix.gnu.org/][Guix]] is also going in that direction.

podcasts/index.org

@@ -0,0 +1,13 @@
+#+TITLE: Podcasts
+#+html_link_up: ..
+#+html_link_home: /
+
+Here are some of my favorite podcasts that I listen to.
+
+- [[file:late-night-linux.org][Late Night Linux]]
+- [[file:developer-tea.org][Developer Tea]]
+
+
+Here are some of the ones that I used to listen to, but for whatever reason don't anymore.
+
+- [[file:linux-voice.org][Linux Voice]]

podcasts/late-night-linux.org

@@ -0,0 +1,11 @@
+#+title: Late Night Linux
+#+options: num:nil toc:nil
+#+html_link_up: .
+#+html_link_home: /
+
+- Website :: https://latenightlinux.com/
+
+
+4 grumpy old men talking about how excellent linux and open source software are, and how terribly Mozilla is screwing up Firefox.
+
+I started listening to this podcast because I found out Graham Morrison was on it, and I know of him through [[file:linux-voice.org][Linux Voice]]. I really loved listening to the Linux Voice podcast, and was hoping to get a similar experience with this one. And I mostly got that, although these guys are a bit grumpier.

podcasts/linux-voice.org

@@ -0,0 +1,6 @@
+#+title: Linux Voice
+#+options: num:nil toc:nil
+#+html_link_up: .
+#+html_link_home: /
+
+I loved listening to Graham, Mike, Ben, and Andrew chat about Linux and open source software. I used to read Linux Format which they all worked for and when they all left I kept an eye on what they were doing. I started listening to the podcast as soon as I discovered it and I was so excited when they announced their own magazine. I signed up as soon as I could. And I was very sad when they shut it down. Or merged it with Linux Developer, I suppose. I would've gladly payed more or joined another funding drive or bought overpriced merch or whatever, but alas. When the podcast also stopped some time later, it left a bit of a hole in my life.

projects.org

@@ -0,0 +1,13 @@
+#+title: Projects
+#+options: num:nil
+
+Most of my projects end up being for [[file:emacs.org][Emacs]] for some reason. I sometimes have trouble finding the energy to maintain these projects, but I'm trying my best to get back to it.
+
+* Avandu
+
+- Source :: https://github.com/ryuslash/avandu
+
+A package for [[file:emacs.org
+][Emacs]] that connects to [[https://tt-rss.org/][Tiny Tiny RSS]]. I really wanted something that didn't look like all the other RSS readers, meaning it didn't just have a plain table showing all the articles.
+
+I don't use Tiny Tiny RSS anymore, but if problems come up I still try to fix them. For the (perhaps) 2 people that use it.

publish.el

@@ -98,7 +98,7 @@
          :base-directory "."
          :recursive t
          :exclude "^public/"
-         :base-extension "svg"
+         :base-extension "svg\\|png\\|jpg"
          :publishing-function org-publish-attachment
          :publishing-directory "public/")
         ("all" :components ("index" "posts" "assets"))))

software/android-launchers.org

@@ -16,6 +16,7 @@ There seems to be two different types of launchers for Android. Homescreen repla
 - F-Droid page :: https://f-droid.org/en/packages/posidon.launcher/
 - Version tried :: 1.17
 
+
 Posidon is quite different from all the other launchers that I've seen. Instead of a normal desktop with some icons or other means of launching applications it features a list of your notifications and optionally a number of rss feeds.
 
 It does have the usual Dock and App Drawer that many other launchers also have, so you can of course still start any application you want. It seems to be able to handle large folders in the dock well enough, at least for my purposes.
@@ -25,8 +26,31 @@ It does have the usual Dock and App Drawer that many other launchers also have,
 - F-Droid page :: https://f-droid.org/en/packages/ch.deletescape.lawnchair.plah/
 - Version tried :: 1.2.1.2001
 
+
 Lawnchair is a boring launcher, in the sense that it looks like most of the other basic launchers out there. It has plenty of features and customization options. It's got a very usual set-up of desktop and app drawer. It seems to be able to handle folders on the desktop of large-enough sizes (at least for my purposes). It allows you to add multiple widgets to a desktop. You can have multiple desktops. With the right settings you can set up quite interesting combinations of widgets on the desktops.
 
+** launch
+
+- F-Droid page :: https://f-droid.org/packages/org.biotstoiq.launch/
+- Version tried :: 0.908
+
+
+A simple and fast launcher that just shows a simple list of all of your apps. It allows you to find them by typing in their name. This can be done either with the letters shown on the home screen, or using the keyboard. Apps names are matched with substring matching, but not fuzzy, so “Droid” will match “DroidRec”, “F-Droid”, and “Light Android Launcher”, but “fd” will not match “F-Droid”.
+
+Once you've filtered enough out you press the title and it launches. If your search has only a single result launch will run it automatically.
+
+It doesn't show any icons, so apps with the same name are impossible to tell apart (Like “Gallery”, and “Calculator”).
+
+** Pie Launcher
+
+- F-Droid page :: https://f-droid.org/en/packages/de.markusfisch.android.pielauncher/
+- Version tried :: 1.13.0
+
+
+The pie launcher is a great idea. If set up correctly it's very easy to use and it's fun to do. Its features are a bit minimal. There is basically the pie menu, and the big menu with the rest. No widgets can be put up, no icons can be put on the desktop (although I'm sure that's a feature, not a bug). Still, it keeps me from really using it.
+
+There is also the recommendation that the menu will work best if you use ~6 items in your menu. I tried to see what the effect would be if I added more than that. It's fun, but it's not very useful. It becomes harder to select the item that you want to use and moving between the icons starts going /very/ fast.
+
 * Launchers
 
 ** PaperLaunch
@@ -34,6 +58,7 @@ Lawnchair is a boring launcher, in the sense that it looks like most of the othe
 - F-Droid page :: https://f-droid.org/en/packages/de.devmil.paperlaunch/
 - Version tried :: 1.0.10
 
+
 PaperLaunch is a side-launcher. It creates an overlay over any app running and lets you configure which applications are shown in which categories. It handles large folders by adding a "More..." option at the end of the bar and showing more options there like any other folder.
 
 It's a little hard to use it sometimes, because most applications assume they have the entire screen to work, and PaperLaunch does take up /some/ space on the edge of the screen for you to summon it. You can change the width of this area, and whether it shows on the left or right side. I have noticed that it occasionally interferes with the operation of other applications for me because the applications require me to do something too close to the edge and I end up opening PaperLaunch instead.

software/ci-cd-pipelines.org

@@ -4,6 +4,10 @@
 #+HTML_LINK_UP: ..
 #+HTML_LINK_HOME: ..
 
+#+begin_note
+This page is likely to go through some major revisions as I'm writing down my thoughts.
+#+end_note
+
 * Gitlab CI
 
 I've been using GitLab CI for my Emacs configuration for a while, and it's pretty nice. It's all configured through yaml. I won't say that I'm an expert on it so far, but the fact that it's all just yaml does occasionally prevent me from properly abstracting certain actions. My configuration is very repetitive.

src/less/cgit.less

@@ -1,6 +1,10 @@
 @import 'include/common';
 @import 'include/components';
 
+a.button {
+  padding: 0 0.5rem;
+}
+
 .content > table {
   width: 100%;
 }
@@ -19,12 +23,60 @@
   }
 }
 
+.form form {
+  padding: 0 1rem;
+}
+
+.highlight {
+  @media (prefers-color-scheme: dark) {
+    background-color: @dark-background !important;
+  }
+  @media (prefers-color-scheme: light) {
+    background-color: @light-background !important;
+  }
+
+  .nv {
+    color: #bbca82 !important;
+  }
+
+  .nb {
+    color: #90ca82 !important;
+  }
+
+  .k {
+    color: #caad82 !important;
+  }
+
+  .ch, .c1 {
+    color: #f071bd !important;
+    font-style: normal !important;
+  }
+
+  .s2 {
+    color: #82ca9f !important;
+  }
+
+  .m {
+    color: #ca8282 !important;
+  }
+}
+
 .main {
   &:extend(.title-header);
 
   display: block;
 }
 
+.linenumbers, .lines {
+  vertical-align: top;
+
+  pre {
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+}
+
 .logo {
   width: 0;
   padding: 0;
@@ -93,4 +145,14 @@
     margin: 0;
     border: 0;
   }
+
+  .form {
+    padding: 0;
+
+    form {
+      &:extend(.header-block);
+      text-align: right;
+      padding: 0 1rem;
+    }
+  }
 }

src/less/include/common.less

@@ -1,5 +1,13 @@
 @import 'colors';
 
+html {
+  max-width: 70ch;
+  padding: 3em 1em;
+  margin: auto;
+  line-height: 1.75;
+  font-size: 1.25em;
+}
+
 a {
   text-decoration: underline;
 
@@ -28,13 +36,13 @@ a {
   }
 }
 
+blockquote {
+  margin: 0;
+}
+
 body {
   border: 0;
   font-family: "PT Sans", "Liberation Sans", "DejaVu Sans", "Tahoma", "Verdana", "Arial", sans-serif;
-  font-size: 15pt;
-  margin: 0;
-  padding: 0;
-  line-height: 160%;
 
   @media (prefers-color-scheme: dark) {
     background-color: @dark-background;
@@ -47,6 +55,14 @@ body {
   }
 }
 
+figure {
+  margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 3em 0 1em;
+}
+
 h1 {
   font-size: 1.6rem;
 }
@@ -79,3 +95,6 @@ pre {
   font-size: 14pt;
   line-height: 100%;
 }
+
+p { margin: 0; }
+

src/less/include/components.less

@@ -1,5 +1,9 @@
 @import "colors";
 
+pre.src {
+  overflow: auto;
+}
+
 .content-wrapper {
   max-width: 60rem;
   margin: 0 auto;
@@ -9,6 +13,7 @@
   font-size: 0.8rem;
   padding: 10px 0;
   text-align: center;
+  clear: both;
 
   @media (prefers-color-scheme: dark) {
     border-top: 3px @dark-foreground dotted;
@@ -24,6 +29,11 @@
   margin: 0;
 }
 
+.introduction {
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
 .listless-list {
   list-style-type: none;
 
@@ -33,7 +43,7 @@
 }
 
 .note {
-  margin-left: 3rem;
+  margin: 1rem 3rem;
   border-width: 1px;
   border-style: solid;
   padding: 0 1rem;
@@ -48,6 +58,11 @@
   }
 }
 
+.short-dl {
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
 .subtitle {
   font-size: 0.9rem;
   margin: 0;
@@ -63,11 +78,8 @@
   }
 }
 
-.title-header {
-  text-align: center;
-  padding: 20px;
-  margin: 0;
-  font-size: 2.5rem;
+.header-block {
+  box-sizing: border-box;
 
   @media (prefers-color-scheme: dark) {
     color: @dark-primary;
@@ -79,3 +91,12 @@
     background-color: @light-background-highlight;
   }
 }
+
+.title-header {
+  &:extend(.header-block);
+
+  padding: 20px;
+  text-align: center;
+  margin: 0;
+  font-size: 2.5rem;
+}

src/less/main.less

@@ -1,6 +1,15 @@
 @import 'include/components';
 @import 'include/common';
 
+img.book-cover {
+  float: left;
+  margin: 0.5rem 1rem;
+}
+
+.book-info {
+
+}
+
 .title {
   &:extend(.title-header);
 }
@@ -9,6 +18,20 @@
   &:extend(.subtitle);
 }
 
+#avatar {
+  float: left;
+  padding: 0.5rem 1rem;
+}
+
+#org-div-home-and-up {
+  &:extend(.header-block);
+  &:extend(.content-wrapper);
+
+  text-align: right;
+  font-size: 0.8rem;
+  padding-right: 1rem;
+}
+
 #postamble {
   &:extend(.footer);
   &:extend(.content-wrapper);
@@ -43,3 +66,4 @@ pre.src {
 
 .org-src-container { position: relative; }
 .org-svg { width: unset; }
+.org-center { text-align: center; }