Move move code into common 'margin node' mixin.

content/blog/00_compiler_intro.md

@@ -144,3 +144,5 @@ Here are the posts that I've written so far for this series:
 * [Garbage Collection]({{< relref "09_compiler_garbage_collection.md" >}})
 * [Polymorphism]({{< relref "10_compiler_polymorphism.md" >}})
 * [Polymorphic Data Types]({{< relref "11_compiler_polymorphic_data_types.md" >}})
+* [Let/In and Lambdas]({{< relref "12_compiler_let_in_lambda/index.md" >}})
+

content/blog/11_compiler_polymorphic_data_types.md

@@ -396,4 +396,5 @@ Result: 4
 
 This looks good! We have added support for polymorphic data types to our compiler.
 We are now free to move on to `let/in` expressions, __lambda functions__, and __Input/Output__,
-as promised! I'll see you then!
+as promised, starting with [part 12]({{< relref "12_compiler_let_in_lambda/index.md" >}}) - `let/in`
+and lambdas!

content/blog/12_compiler_let_in_lambda/index.md

@@ -1,9 +1,8 @@
 ---
 title: Compiling a Functional Language Using C++, Part 12 - Let/In and Lambdas
-date: 2020-04-20T20:15:16-07:00
+date: 2020-06-21T00:50:07-07:00
 tags: ["C and C++", "Functional Languages", "Compilers"]
 description: "In this post, we extend our language with let/in expressions and lambda functions."
-draft: true
 ---
 
 Now that our language's type system is more fleshed out and pleasant to use, it's time to shift our focus to the ergonomics of the language itself. I've been mentioning `let/in` and __lambda__ expressions for a while now. The former will let us create names for expressions that are limited to a certain scope (without having to create global variable bindings), while the latter will allow us to create functions without giving them any name at all.

themes/vanilla/assets/scss/margin.scss

@@ -0,0 +1,38 @@
+@import "variables.scss";
+@import "mixins.scss";
+
+$margin-width: 30rem;
+$margin-offset: 1.5rem;
+
+@mixin below-two-margins {
+    @media screen and
+        (max-width: $container-width +
+            2 * ($margin-width + 2 * $margin-offset)) {
+        @content;
+    }
+}
+
+@mixin below-one-margin {
+    @media screen and
+        (max-width: $container-width +
+            ($margin-width + 3 * $margin-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 + $margin-offset);
+}
+
+@mixin margin-content-right {
+    right: 0;
+    margin-right: -($margin-width + $margin-offset);
+}

themes/vanilla/assets/scss/sidenotes.scss

@@ -1,28 +1,12 @@
 @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 +32,19 @@ $sidenote-highlight-border-width: .2rem;
 }
 
 .sidenote-content {
-    display: block;
+    @include margin-content;
-    position: absolute;
+    @include bordered-block;
-    width: $sidenote-width;
     margin-top: -1.5rem;
+    padding: $sidenote-padding;
+    text-align: left;
 
     &.sidenote-right {
-        right: 0;
+        @include margin-content-right;
-        margin-right: -($sidenote-width + $sidenote-offset);
     }
 
     &.sidenote-left {
-        left: 0;
+        @include margin-content-left;
-        margin-left: -($sidenote-width + $sidenote-offset);
     }
-
-    @include bordered-block;
-    padding: $sidenote-padding;
-    box-sizing: border-box;
-    text-align: left;
 }
 
 .sidenote-delimiter {
@@ -85,18 +63,14 @@ $sidenote-highlight-border-width: .2rem;
     }
 }
 
-@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 {
+@include below-one-margin {
     .post-content {
         max-width: 100%;
     }
@@ -105,9 +79,4 @@ $sidenote-highlight-border-width: .2rem;
         @include hidden-sidenote;
         margin-right: 0rem;
     }
-
-    .container {
-        position: initial;
 }
-}
-

themes/vanilla/assets/scss/style.scss

@@ -1,5 +1,6 @@
 @import "variables.scss";
 @import "mixins.scss";
+@import "margin.scss";
 
 body {
   font-family: $font-body;
@@ -55,6 +56,14 @@ div.highlight table pre {
   @include below-container-width {
       padding: 0rem 1rem 0rem 1rem;
   }
+
+  @include below-two-margins {
+      left: -($margin-width + $margin-offset)/2;
+  }
+
+  @include below-one-margin {
+      position: initial;
+  }
 }
 
 .button, input[type="submit"] {