diff --git a/helium/laika-helium.css b/helium/laika-helium.css
index a22ddc2..84dc710 100644
--- a/helium/laika-helium.css
+++ b/helium/laika-helium.css
@@ -7,10 +7,11 @@
   --bg-color: #ffffff;
   --gradient-top: #095269;
   --gradient-bottom: #007c99;
-  --top-color: var(--primary-color);
-  --top-bg: var(--primary-light);
-  --top-hover: var(--secondary-color);
-  --top-border: var(--primary-medium);
+  --component-color: var(--primary-color);
+  --component-area-bg: var(--primary-light);
+  --component-hover: var(--secondary-color);
+  --component-border: var(--primary-medium);
+  --subtle-highlight: rgba(0, 0, 0, 0.05);
   --messages-info: #007c99;
   --messages-info-light: #ebf6f7;
   --messages-warning: #b1a400;
@@ -29,9 +30,9 @@
   --syntax-wheel5: #4dbed4;
   --body-font: "Lato", sans-serif;
   --header-font: "Lato", sans-serif;
-  --code-font: "Fira Code", monospace;
+  --code-font: "Fira Mono", monospace;
   --body-font-size: 15px;
-  --code-font-size: 14px;
+  --code-font-size: 0.9em;
   --small-font-size: 12px;
   --title-font-size: 34px;
   --header2-font-size: 28px;
@@ -44,6 +45,14 @@
   --top-bar-height: 35px;
 }
 
+.light-inverted {
+  --component-color: var(--primary-medium);
+  --component-area-bg: var(--primary-color);
+  --component-hover: var(--bg-color);
+  --component-border: var(--primary-light);
+  --subtle-highlight: rgba(255, 255, 255, 0.15);
+}
+
 *, :after, :before {
   box-sizing: border-box;
 }
@@ -157,7 +166,7 @@ h1.title {
   padding-top: calc(40px + var(--top-bar-height));
   padding-bottom: 10px;
   margin-bottom: calc(var(--block-spacing) * 3);
-  border-bottom: 1px solid var(--primary-medium);
+  border-bottom: 1px solid var(--component-border);
 }
 h2 {
   font-size: var(--header2-font-size);
@@ -311,7 +320,7 @@ ul.tab-group {
 }
 li.tab {
   display: inline-block;
-  border: 1px solid var(--primary-medium);
+  border: 1px solid var(--component-border);
   border-radius: 5px 5px 0 0;
   background-color: var(--primary-light);
   padding: 2px 5px;
@@ -332,7 +341,7 @@ li.tab.active {
 .tab-content {
   display: none;
   padding: 12px 5px 5px;
-  border: 1px solid var(--primary-medium);
+  border: 1px solid var(--component-border);
   border-radius: 0 5px 5px 5px;
   margin-top: 0 !important;
 }
@@ -344,11 +353,11 @@ li.tab.active {
 
 table {
   margin: calc(var(--block-spacing) * 2) 0;
-  border: 1px solid var(--primary-medium);
+  border: 1px solid var(--component-border);
   border-collapse: collapse;
 }
 thead > tr {
-  border-bottom: 1px solid var(--primary-medium);
+  border-bottom: 1px solid var(--component-border);
 }
 td, th {
   padding: 5px 8px;
@@ -374,11 +383,11 @@ tbody > tr:nth-child(odd) {
 }
 
 .svg-shape {
-  fill: var(--primary-color);
+  fill: var(--component-color);
 }
 
 a:hover .svg-shape {
-  fill: var(--secondary-color);
+  fill: var(--component-hover);
 }
 
 /* footer ========================================== */
@@ -423,7 +432,7 @@ p.title {
 header {
   display: flex;
   justify-content: space-between;
-  background-color: var(--top-bg);
+  background-color: var(--component-area-bg);
   margin: 0;
   position: fixed;
   top: 0;
@@ -433,15 +442,15 @@ header {
   width: 100%;
   align-items: center;
   padding: 0 45px 0 20px;
-  border-bottom: 1px solid var(--top-border);
+  border-bottom: 1px solid var(--component-border);
 }
 header a, nav .row a {
-  color: var(--top-color);
+  color: var(--component-color);
 }
 header a:hover, nav .row a:hover {
   text-decoration: none;
   cursor: pointer;
-  color: var(--top-hover)
+  color: var(--component-hover)
 }
 
 header .image-link {
@@ -464,7 +473,7 @@ header .row.links {
 nav .row {
   margin: 10px 15px 3px 25px;
   padding-bottom: 7px;
-  border-bottom: 1px solid var(--top-border);
+  border-bottom: 1px solid var(--component-border);
 }
 
 #nav-icon {
@@ -484,24 +493,29 @@ nav .row {
   }
 }
 
+header .row.links .row.links {
+  display: inline-block;
+}
+
 .text-link {
   position: relative;
   bottom: 2px;
 }
 
-.button-link, #header-left .menu-toggle {
+.button-link, #header-right .button-link, #header-left .menu-toggle, nav .row a.button-link {
   position: relative;
   bottom: 2px;
   display: inline-block;
   border-radius: 9px;
   padding: 0 7px;
-  background-color: var(--top-color);
-  color: var(--top-bg);
+  background-color: var(--component-color);
+  color: var(--component-area-bg);
   font-size: 0.9em;
 }
-.button-link:hover {
-  background-color: var(--top-hover);
-  color: var(--top-bg);
+.button-link:hover, #header-right .button-link:hover {
+  background-color: var(--component-hover);
+  color: var(--component-area-bg);
+  text-decoration: none;
 }
 
 /* menus =================================================== */
@@ -515,11 +529,11 @@ nav .row {
   margin-bottom: 0.1em;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
-  border-top: 8px solid var(--primary-color);
+  border-top: 8px solid var(--component-color);
 }
 
 .menu-toggle:hover:after {
-  border-top: 8px solid var(--secondary-color);
+  border-top: 8px solid var(--component-hover);
 }
 
 .menu-container {
@@ -534,7 +548,7 @@ nav .row {
   left: 20px;
   top: calc(var(--top-bar-height) - 10px);
   background-color: white;
-  border: 1px solid var(--primary-medium);
+  border: 1px solid var(--component-border);
   border-radius: 5px;
   white-space: nowrap;
 }
@@ -711,7 +725,7 @@ ul.nav-list, #page-nav ul {
   background-color: var(--primary-color);
 }
 #page-nav .footer {
-  border-top: 1px solid var(--primary-medium);
+  border-top: 1px solid var(--component-border);
 }
 
 #page-nav ul.nav-list {
@@ -772,6 +786,18 @@ ul.nav-list, #page-nav ul {
     display: inline-block;
   }
 }
+@media (max-width: 1450px) {
+  #page-nav.all-screens {
+    display: block;
+    position: static;
+    width: 100%;
+    max-width: var(--content-width);
+    background-color: transparent;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 75px 45px 10px 45px;
+  }
+}
 
 .icofont-laika {
   font-size: 1.75em;
@@ -783,8 +809,7 @@ pre {
   border-radius: 5px;
   padding: 12px 9px 9px 15px;
   margin: 0 0 var(--block-spacing);
-  font-size: var(--code-font-size);
-  line-height: 21px;
+  line-height: 1.4;
   word-break: break-all;
   word-wrap: break-word;
   white-space: pre-wrap;
@@ -798,7 +823,6 @@ code {
   padding: 0 0.1em;
 }
 pre code {
-  font-size: var(--code-font-size);
   color: var(--syntax-base5);
   background-color: transparent;
   padding: 0;
diff --git a/helium/landing.page.css b/helium/landing.page.css
index a6c22a1..5365542 100644
--- a/helium/landing.page.css
+++ b/helium/landing.page.css
@@ -15,7 +15,11 @@ body {
 }
 
 #header a, #header a:hover {
-  color: var(--primary-medium);
+  color: var(--component-color);
+}
+#header a.icon-link:hover {
+  color: var(--component-hover);
+  text-decoration: none;
 }
 #header #docs a {
   font-weight: normal;
@@ -46,11 +50,11 @@ body {
 }
 
 #header-left {
-  color: var(--primary-medium);
+  color: var(--component-color);
   margin: 0 auto;
 }
 #header-right {
-  color: var(--primary-medium);
+  color: var(--component-color);
   padding: 0 20px;
   text-align: left;
   margin: 35px auto 0;
@@ -66,7 +70,7 @@ ul {
 }
 #docs {
   font-size: 17px;
-  border: 1px solid var(--primary-medium);
+  border: 1px solid var(--component-color);
   border-radius: 5px;
   margin-bottom: 15px;
   margin-top: 18px;
@@ -74,8 +78,8 @@ ul {
 }
 #docs p {
   padding: 6px 10px 6px 10px;
-  border-bottom: 1px solid var(--primary-medium);
-  background-color: rgba(255, 255, 255, 0.15);
+  border-bottom: 1px solid var(--component-color);
+  background-color: var(--subtle-highlight);
   margin-bottom: 5px;
 }
 li {
@@ -94,7 +98,7 @@ li {
   margin-bottom: 12px;
 }
 #header-left h1, #header-left h2 {
-  color: var(--primary-medium);
+  color: var(--component-color);
   line-height: 1.5;
   margin-bottom: 5px;
 }
@@ -176,8 +180,8 @@ li {
 
 /* link group ===================================================== */
 
-#header-left div.row.links > .row.links {
-  border: 1px solid var(--primary-medium);
+#header-left div.row.links > .row.links, #header-right .row.links {
+  border: 1px solid var(--component-color);
   border-radius: 8px;
   height: 100%;
   padding-top: 2px;
@@ -187,6 +191,15 @@ li {
   vertical-align: middle;
 }
 
+#header-right .row.links {
+  border: none;
+  justify-content: left;
+}
+
+#header-right .row.links > * {
+  margin-right: 25px;
+}
+
 #header-left .row.links a.icon-link:hover {
   text-decoration: none;
   color: var(--secondary-color);
@@ -204,10 +217,6 @@ li {
   padding-bottom: 4px;
 }
 
-.svg-shape {
-  fill: var(--primary-medium);
-}
-
 /* menus + button link ======================================================= */
 
 #header-left .menu-container, #header-left .button-link {
@@ -231,7 +240,7 @@ li {
   fill: white;
 }
 #header-left .button-link:hover .svg-shape {
-  fill: var(--primary-medium);
+  fill: var(--component-color);
 }
 
 #header-left a.menu-toggle, #header-left .button-link {
diff --git a/index.html b/index.html
index ccd0ba1..5e97543 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="generator" content="Laika 0.19.0 + Helium Theme" />
+  <meta name="generator" content="Typelevel Laika + Helium Theme" />
   <title>lucille</title>
   
   <meta name="author" content="Andrew Valencik"/>
@@ -20,7 +20,7 @@
   
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700">
   
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.207/distr/fira_code.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Mono:500">
   
   <link rel="stylesheet" type="text/css" href="helium/icofont.min.css" />
     <link rel="stylesheet" type="text/css" href="helium/laika-helium.css" />
@@ -32,7 +32,7 @@
 
   <body>
 
-    <header id="top-bar">
+    <header id="top-bar" class="light-default dark-default">
 
   <div class="row">
     <a id="nav-icon">
@@ -46,7 +46,7 @@
 
   <div class="row links">
     
-    <a class="icon-link svg-link" href="https://github.com/cozydev-pink/lucille"><span class="github" title="Source Code"><svg class="svg-icon" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <a class="icon-link svg-link" href="https://github.com/cozydev-pink/lucille"><span class="github" title="Source Code"><svg class="svg-icon" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
   <g class="svg-shape">
     <path d="M49.995,1c-27.609,-0 -49.995,22.386 -49.995,50.002c-0,22.09 14.325,40.83 34.194,47.444c2.501,0.458 3.413,-1.086 3.413,-2.412c0,-1.185 -0.043,-4.331 -0.067,-8.503c-13.908,3.021 -16.843,-6.704 -16.843,-6.704c-2.274,-5.773 -5.552,-7.311 -5.552,-7.311c-4.54,-3.103 0.344,-3.042 0.344,-3.042c5.018,0.356 7.658,5.154 7.658,5.154c4.46,7.64 11.704,5.433 14.552,4.156c0.454,-3.232 1.744,-5.436 3.174,-6.685c-11.102,-1.262 -22.775,-5.553 -22.775,-24.713c-0,-5.457 1.949,-9.92 5.147,-13.416c-0.516,-1.265 -2.231,-6.348 0.488,-13.233c0,0 4.199,-1.344 13.751,5.126c3.988,-1.108 8.266,-1.663 12.518,-1.682c4.245,0.019 8.523,0.574 12.517,1.682c9.546,-6.47 13.736,-5.126 13.736,-5.126c2.728,6.885 1.013,11.968 0.497,13.233c3.204,3.496 5.141,7.959 5.141,13.416c0,19.209 -11.691,23.436 -22.83,24.673c1.795,1.544 3.394,4.595 3.394,9.26c0,6.682 -0.061,12.076 -0.061,13.715c0,1.338 0.899,2.894 3.438,2.406c19.853,-6.627 34.166,-25.354 34.166,-47.438c-0,-27.616 -22.389,-50.002 -50.005,-50.002"/>
   </g>
@@ -60,7 +60,7 @@
 
   <div class="row">
     
-    <a class="icon-link svg-link" href="https://github.com/cozydev-pink/lucille"><span class="github" title="Source Code"><svg class="svg-icon" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <a class="icon-link svg-link" href="https://github.com/cozydev-pink/lucille"><span class="github" title="Source Code"><svg class="svg-icon" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
   <g class="svg-shape">
     <path d="M49.995,1c-27.609,-0 -49.995,22.386 -49.995,50.002c-0,22.09 14.325,40.83 34.194,47.444c2.501,0.458 3.413,-1.086 3.413,-2.412c0,-1.185 -0.043,-4.331 -0.067,-8.503c-13.908,3.021 -16.843,-6.704 -16.843,-6.704c-2.274,-5.773 -5.552,-7.311 -5.552,-7.311c-4.54,-3.103 0.344,-3.042 0.344,-3.042c5.018,0.356 7.658,5.154 7.658,5.154c4.46,7.64 11.704,5.433 14.552,4.156c0.454,-3.232 1.744,-5.436 3.174,-6.685c-11.102,-1.262 -22.775,-5.553 -22.775,-24.713c-0,-5.457 1.949,-9.92 5.147,-13.416c-0.516,-1.265 -2.231,-6.348 0.488,-13.233c0,0 4.199,-1.344 13.751,5.126c3.988,-1.108 8.266,-1.663 12.518,-1.682c4.245,0.019 8.523,0.574 12.517,1.682c9.546,-6.47 13.736,-5.126 13.736,-5.126c2.728,6.885 1.013,11.968 0.497,13.233c3.204,3.496 5.141,7.959 5.141,13.416c0,19.209 -11.691,23.436 -22.83,24.673c1.795,1.544 3.394,4.595 3.394,9.26c0,6.682 -0.061,12.076 -0.061,13.715c0,1.338 0.899,2.894 3.438,2.406c19.853,-6.627 34.166,-25.354 34.166,-47.438c-0,-27.616 -22.389,-50.002 -50.005,-50.002"/>
   </g>
@@ -103,10 +103,10 @@ <h3 id="usage" class="section"><a class="anchor-link left" href="#usage"><i clas
         <p>Additionally, it&#39;s available for the JVM, Scala.js, and Scala Native.</p>
         <p>To use the latest version, include the following in your <code>build.sbt</code>:</p>
         <pre class="keep-together pdf epub"><code class="nohighlight"><span class="comment">// use this snippet for the JVM
-</span><span class="identifier">libraryDependencies</span><span> += </span><span class="string-literal">&quot;pink.cozydev&quot;</span><span> %% </span><span class="string-literal">&quot;lucille&quot;</span><span> % </span><span class="string-literal">&quot;0.0-10917d9-SNAPSHOT&quot;</span><span>
+</span><span class="identifier">libraryDependencies</span><span> += </span><span class="string-literal">&quot;pink.cozydev&quot;</span><span> %% </span><span class="string-literal">&quot;lucille&quot;</span><span> % </span><span class="string-literal">&quot;0.0-f5bc4f7-SNAPSHOT&quot;</span><span>
 
 </span><span class="comment">// use this snippet for JS, Native, or cross-building
-</span><span class="identifier">libraryDependencies</span><span> += </span><span class="string-literal">&quot;pink.cozydev&quot;</span><span> %%% </span><span class="string-literal">&quot;lucille&quot;</span><span> % </span><span class="string-literal">&quot;0.0-10917d9-SNAPSHOT&quot;</span></code></pre>
+</span><span class="identifier">libraryDependencies</span><span> += </span><span class="string-literal">&quot;pink.cozydev&quot;</span><span> %%% </span><span class="string-literal">&quot;lucille&quot;</span><span> % </span><span class="string-literal">&quot;0.0-f5bc4f7-SNAPSHOT&quot;</span></code></pre>
         
         <h3 id="parsing" class="section"><a class="anchor-link left" href="#parsing"><i class="icofont-laika link">&#xef71;</i></a>Parsing</h3>
         <p>Lucille offers a <code>parseQ</code> function to parse all of a string into a Lucille <code>MultiQuery</code> structure:</p>
@@ -183,7 +183,7 @@ <h3 id="last-query-rewriting" class="section"><a class="anchor-link left" href="
         
 <hr class="footer-rule"/>
 <footer>
-  Site generated by <a href="https://planet42.github.io/Laika/">Laika</a> with the Helium theme.
+  Site generated by <a href="https://typelevel.org/Laika/">Laika</a> with the Helium theme.
 </footer>