Add resume link.

config.toml

@@ -5,3 +5,9 @@ theme = "vanilla"
 pygmentsCodeFences = true
 pygmentsStyle = "github"
 summaryLength = 20
+
+[markup]
+  [markup.tableOfContents]
+    endLevel = 4
+    ordered = false
+    startLevel = 3

content/blog/starbound.md

@@ -12,7 +12,7 @@ __py-starbound__, nicely enough, actually has a file named `FORMATS.md`. This fi
 > This section will contain information on how to retrieve a value from a BTreeDB5 database.
 
 Not very helpful. Before I go into what I managed to determine from the code, we may first take a look at one thing that we already know about the world format - it is a [B-Tree](https://en.wikipedia.org/wiki/B-tree).
-## Binary Search Trees
+### Binary Search Trees
 The B-Tree is a generalization of a Binary Search Tree, or BST for short. Binary Search trees (and B-Trees in general) operate on data that can be ordered consistently, the simplest example being numbers. For instance, as an example, I'll be using a BST that holds integers. A BST is made up of nodes, objects that actually hold the pieces of data that the tree itself organizes.
 
 In a BST, the nodes are organized in a simple way. Each node can have up to two _children_ (sub-nodes), and each of those can have up to two children, etc. The children are generally classified as _right_ and _left_. Conventionally, left children always have a value that is below (or comes before) the value of the node whose child they are (their _parent_), and right children have a bigger value.
@@ -45,7 +45,7 @@ __Although the average efficiency of a Binary Search Tree is \\(O(\log n)\\), me
 
 This isn't good enough, and many clever algorithms have been invented to speed up the lookup of the tree by making sure that it remains _balanced_ - that is, it _isn't_ arranged like a simple list. Some of these algorithms include [Red-Black Trees](https://en.wikipedia.org/wiki/Red%E2%80%93black_tree), [AVL Trees](https://en.wikipedia.org/wiki/AVL_tree), and, of course, B-Trees.
 
-## B-Trees
+### B-Trees
 B-Trees are a generalization of Binary Search Trees. That means that every Binary Search Tree is a B-Tree, but not all B-Trees are BSTs. The key difference lies in the fact that B-Trees' nodes aren't limited to having only two child nodes, and can also have more than one value.
 
 Each B-Tree node is a sorted array of values. That is, instead of a single number like the BST that we've looked at, it has multiple, and these numbers _must_ be sorted. Below are some examples of B-Tree nodes:
@@ -64,7 +64,7 @@ This is solved using another property of B-Trees - the number of children of a n
 
 If we were looking for the number 15, we'd look between the 10 and the 20, examining the 2nd node, and if we were looking for 45 we'd look past the 30, at the 4th node.
 
-## Starbound B-Trees and BTreeDB5
+### Starbound B-Trees and BTreeDB5
 The BTreeDB5 data structure uses something other than integers for its keys - it uses sequences of bytes. These bytes are compared in a very similar fashion to integers. The game first looks at the first number in the sequence of bytes (like the largest digit in an integer), and if that's the same, moves on to the next one. Also, Starbound B-Trees not only have the values, or _keys_, that they use to find data, but the data itself.
 
 The "nodes" in the BTreeDB are called "blocks" and are one of three types - "index", "leaf", and "free" nodes. "Index" nodes are like the `(10, 20, 30)` node in the above example - they point to other nodes, but actually store no data themselves. The "leaf" nodes actually contain the data, and, if that data is longer than the maximum block size, "leaf" nodes contain the index of the next leaf node where the user might continue to read the data. The "free" nodes are simply free data, empty and ready for Starbound to fill them with something useful.

themes/vanilla/assets/scss/margin.scss

@@ -0,0 +1,47 @@
+@import "variables.scss";
+@import "mixins.scss";
+
+$margin-width: 30rem;
+$margin-inner-offset: 0.5rem;
+$margin-outer-offset: 1rem;
+
+@mixin below-two-margins {
+    @media screen and
+        (max-width: $container-width-threshold +
+            2 * ($margin-width + $margin-inner-offset + $margin-outer-offset)) {
+        @content;
+    }
+}
+
+@mixin below-one-margin {
+    @media screen and
+        (max-width: $container-width-threshold +
+            ($margin-width + $margin-inner-offset + $margin-outer-offset)) {
+        @content;
+    }
+}
+
+@mixin margin-content {
+    display: block;
+    position: absolute;
+    width: $margin-width;
+    box-sizing: border-box;
+}
+
+@mixin margin-content-left {
+    left: 0;
+    margin-left: -($margin-width + $container-min-padding + $margin-inner-offset);
+
+    @include below-two-margins {
+        display: none;
+    }
+}
+
+@mixin margin-content-right {
+    right: 0;
+    margin-right: -($margin-width + $container-min-padding + $margin-inner-offset);
+
+    @include below-one-margin {
+        display: none;
+    }
+}

themes/vanilla/assets/scss/mixins.scss

@@ -6,7 +6,7 @@
 }
 
 @mixin below-container-width {
-    @media screen and (max-width: $container-width){
+    @media screen and (max-width: $container-width-threshold){
         @content;
     }
 }

themes/vanilla/assets/scss/sidenotes.scss

@@ -1,28 +1,10 @@
 @import "variables.scss";
 @import "mixins.scss";
+@import "margin.scss";
 
-$sidenote-accommodate-shrink: 10rem;
-$sidenote-width: 30rem;
-$sidenote-offset: 1.5rem;
 $sidenote-padding: 1rem;
 $sidenote-highlight-border-width: .2rem;
 
-@mixin below-two-sidenotes {
-    @media screen and
-        (max-width: $container-width +
-            2 * ($sidenote-width + 2 * $sidenote-offset)) {
-        @content;
-    }
-}
-
-@mixin below-one-sidenote {
-    @media screen and
-        (max-width: $container-width +
-            ($sidenote-width + 3 * $sidenote-offset)) {
-        @content;
-    }
-}
-
 .sidenote {
     &:hover {
         .sidenote-label {
@@ -48,25 +30,19 @@ $sidenote-highlight-border-width: .2rem;
 }
 
 .sidenote-content {
-    display: block;
-    position: absolute;
-    width: $sidenote-width;
+    @include margin-content;
+    @include bordered-block;
     margin-top: -1.5rem;
+    padding: $sidenote-padding;
+    text-align: left;
 
     &.sidenote-right {
-        right: 0;
-        margin-right: -($sidenote-width + $sidenote-offset);
+        @include margin-content-right;
     }
 
     &.sidenote-left {
-        left: 0;
-        margin-left: -($sidenote-width + $sidenote-offset);
+        @include margin-content-left;
     }
-
-    @include bordered-block;
-    padding: $sidenote-padding;
-    box-sizing: border-box;
-    text-align: left;
 }
 
 .sidenote-delimiter {
@@ -78,36 +54,22 @@ $sidenote-highlight-border-width: .2rem;
     margin-top: 1rem;
     margin-bottom: 1rem;
     width: 100%;
-    display: none;
 
     .sidenote-checkbox:checked ~ & {
         display: block;
     }
 }
 
-@include below-two-sidenotes {
+@include below-two-margins {
     .sidenote-content.sidenote-left {
         @include hidden-sidenote;
         margin-left: 0rem;
     }
-
-    .container {
-        left: -$sidenote-width/2
-    }
 }
 
-@include below-one-sidenote {
-    .post-content {
-        max-width: 100%;
-    }
-
+@include below-one-margin {
     .sidenote-content.sidenote-right {
         @include hidden-sidenote;
         margin-right: 0rem;
     }
-
-    .container {
-        position: initial;
-    }
 }
-

themes/vanilla/assets/scss/style.scss

@@ -1,5 +1,7 @@
 @import "variables.scss";
 @import "mixins.scss";
+@import "margin.scss";
+@import "toc.scss";
 
 body {
   font-family: $font-body;
@@ -38,11 +40,20 @@ pre code {
     display: block;
     padding: 0.5rem;
     overflow-x: auto;
-    background-color: $code-color;
+    border: $code-border;
 }
 
-div.highlight table pre {
-    margin: 0;
+div.highlight table {
+    border: $code-border !important;
+    border-radius: 0px;
+
+    pre {
+        margin: 0;
+    }
+
+    code {
+        border: none;
+    }
 }
 
 .container {
@@ -53,7 +64,17 @@ div.highlight table pre {
   box-sizing: border-box;
 
   @include below-container-width {
-      padding: 0rem 1rem 0rem 1rem;
+      padding: 0 $container-min-padding 0 $container-min-padding;
+      margin: 0;
+      max-width: $container-width + 2 * $container-min-padding;
+  }
+
+  @include below-two-margins {
+      left: -($margin-width + $margin-inner-offset + $margin-outer-offset)/2;
+  }
+
+  @include below-one-margin {
+      left: 0;
   }
 }
 
@@ -62,8 +83,7 @@ div.highlight table pre {
   background-color: $primary-color;
   border: none;
   color: white;
-  transition: color 0.25s;
-  transition: background-color 0.25s;
+  transition: color 0.25s, background-color 0.25s;
   text-align: left;
 
   &:focus {

themes/vanilla/assets/scss/toc.scss

@@ -0,0 +1,49 @@
+@import "variables.scss";
+@import "mixins.scss";
+
+$toc-color: $code-color;
+$toc-border-color: $code-border-color;
+
+.table-of-contents {
+    @include margin-content;
+    @include margin-content-left;
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    margin-bottom: 1rem;
+
+    em {
+        font-style: normal;
+        font-weight: bold;
+        font-size: 1.2em;
+        display: block;
+        margin-bottom: 0.5rem;
+    }
+
+    #TableOfContents > ul {
+        padding-left: 0;
+    }
+
+    nav {
+        margin: 0px;
+    }
+
+    ul {
+        list-style: none;
+        padding-left: 2rem;
+        margin: 0px;
+    }
+
+    a {
+        padding: 0;
+    }
+
+    div.wrapper {
+        @include bordered-block;
+        padding: 1rem;
+        background-color: $toc-color;
+        border-color: $toc-border-color;
+        box-sizing: border-box;
+        max-width: 100%;
+    }
+}

themes/vanilla/assets/scss/variables.scss

@@ -1,14 +1,16 @@
 $container-width: 45rem;
+$container-min-padding: 1rem;
+$container-width-threshold: $container-width + 2 * $container-min-padding;
 $standard-border-width: .075rem;
 
 $primary-color: #36e281;
-$primary-color-dark: darken($primary-color, 10%);
-$code-color: #f0f0f0;
-$code-color-dark: darken($code-color, 10%);
 $border-color: #bfbfbf;
+$code-color: #f0f0f0;
+$code-border-color: darken($code-color, 10%);
 
 $font-heading: "Lora", serif;
 $font-body: "Raleway", serif;
 $font-code: "Inconsolata", monospace;
 
 $standard-border: $standard-border-width solid $border-color;
+$code-border: $standard-border-width solid $code-border-color;

themes/vanilla/layouts/blog/single.html

@@ -10,6 +10,14 @@
 </div>
 
 <div class="post-content">
+    {{ if not (eq .TableOfContents "<nav id=\"TableOfContents\"></nav>") }}
+    <div class="table-of-contents">
+        <div class="wrapper">
+            <em>Table of Contents</em>
+            {{ .TableOfContents }}
+        </div>
+    </div>
+    {{ end }}
     {{ .Content }}
 </div>
 {{ end }}

themes/vanilla/layouts/partials/header.html

@@ -4,8 +4,9 @@
 <nav>
     <div class="container">
         <a href="/">Home</a>
-        <a href="https://github.com/DanilaFe">GitHub</a>
         <a href="/about">About</a>
+        <a href="https://github.com/DanilaFe">GitHub</a>
+        <a href="/Resume-Danila-Fedorin.pdf">Resume</a>
         <a href="/tags">Tags</a>
         <a href="/blog">All Posts</a>
     </div>