diff --git a/layout.scss b/layout.scss
new file mode 100644
index 0000000000..7027786f24
--- /dev/null
+++ b/layout.scss
@@ -0,0 +1,562 @@
+@import "variables";
+@import "mixins";
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
+  color: var(--font-color);
+  background: var(--bg-color);
+}
+
+// windows chrome makes a mess of Adelle web font
+.windows.chrome body,
+.windows.ie8 body {
+  font-family: $base-font-family-fallback !important;
+}
+
+// High level structure
+.inner {
+  @include clearfix;
+  position: relative;
+  width: $page-width;
+  margin: 0 auto;
+  overflow: visible;
+}
+
+aside {
+  float: left;
+  width: 218px;
+  margin-bottom: 35px;
+}
+
+#content {
+  float: right;
+  width: 702px;
+}
+
+#main {
+  padding: 22px;
+  margin-bottom: 35px;
+  background-color: var(--main-bg);
+  border: solid 1px var(--main-border);
+  @include border-radius(5px);
+
+  .two-column {
+    @include clearfix;
+
+    .column-left {
+      width: 47%;
+      float: left;
+    }
+
+    .column-right {
+      width: 47%;
+      float: right;
+    }
+  }
+
+  .callout {
+    background-color: var(--callout-color);
+    @include border-radius(3px);
+    padding: 8px 14px 4px;
+    margin-bottom: 1.4em;
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+#masthead {
+  height: 295px;
+  margin-bottom: 2em;
+  @include background-image-2x($baseurl + "images/bg/isometric-grid", 35px, 21px, top right, repeat);
+
+  .inner {
+    padding-top: 20px;
+
+    p {
+      width: 558px;
+      margin-bottom: 1.2em;
+      font-size: 18px;
+      line-height: $base-line-height * 1.2;
+    }
+
+    .promo {
+      font-weight: bold;
+
+      img {
+        position: relative;
+        top: -6px;
+      }
+    }
+
+    img.illustration {
+      position: absolute;
+      right: -30px;
+      top: 24px;
+    }
+  }
+}
+
+// Header
+header {
+  padding: 1rem 0;
+
+  display: grid;
+  grid-template-areas:  "logo tagline search dark";
+  grid-template-columns: auto 1fr     auto   auto;
+  align-items: center;
+
+  #logo {
+    grid-area: logo;
+    display: flex;
+  }
+
+  #tagline {
+    grid-area: tagline;
+    margin-left: 0.8em;
+    font-size: clamp(0.8rem, 2vw, 1.3rem);
+    color: var(--light-font-color);
+
+    em {
+      letter-spacing: 1px;
+    }
+  }
+}
+
+// Navigation
+aside nav ul {
+  margin-bottom: 1.4em;
+  margin-left: 0;
+  font-size: 16px;
+  font-weight: bold;
+  list-style: none;
+
+  li {
+    margin-bottom: 0.5em;
+
+    a {
+      color: var(--nav-link-color);
+
+      &.active, &:hover {
+        color: var(--orange);
+      }
+    }
+
+    ul {
+      display: none;
+      margin-top: 0.3em;
+      margin-left: 20px;
+      font-size: 13px;
+      font-weight: normal;
+
+      li {
+        margin-bottom: 0;
+
+        a.active {
+          font-weight: bold;
+        }
+      }
+
+      &.expanded {
+        display: block;
+      }
+    }
+  }
+}
+
+.bottom-nav {
+  @extend .callout;
+  @include clearfix;
+  margin-top: 2em;
+  font-weight: bold;
+
+  .previous {
+    float: left;
+  }
+
+  .next {
+    float: right;
+  }
+}
+
+section.about {
+  &.current {
+    display: block;
+  }
+
+  .bottom-nav {
+    display: none;
+  }
+}
+
+p.center {
+  text-align: center;
+}
+
+#logo-license {
+  @extend .callout;
+  padding: 20px !important;
+  margin-top: 2em;
+
+  p {
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--light-font-color);
+  }
+
+  p + p {
+    margin-top: 14px;
+  }
+
+  img {
+    float: left;
+    margin-right: 20px;
+  }
+}
+
+.callout.downloading {
+  background: var(--callout-color) url($baseurl + "images/icons/download.png") 24px 24px no-repeat;
+  padding: 20px 30px 20px 100px !important;
+
+  h3 {
+    font-size: 18px;
+    color: var(--orange);
+  }
+
+  p {
+    margin-bottom: 15px !important;
+    font-size: 15px;
+    line-height: 1.3em;
+  }
+
+  p.small {
+    margin-bottom: 0 !important;
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--light-font-color);
+  }
+}
+
+.section-nav-container {
+  @extend .unstyled !optional;
+  position: relative;
+  background-color: #ebe9e1;
+  background-color: rgba(223, 221, 213, 0.33);
+  @include border-radius(3px);
+  padding: 8px 12px 6px;
+  margin-bottom: 10px;
+  font-size: 13px;
+  font-weight: bold;
+
+  .light {
+    font-weight: normal;
+  }
+
+  a {
+    font-weight: bold;
+    position: relative;
+  }
+
+  .dropdown-panel {
+    top: 33px;
+
+    .three-column {
+      @include clearfix;
+
+      .column-left {
+        float: left;
+        width: 31%;
+        padding-right: 3%;
+      }
+
+      .column-middle {
+        float: left;
+        width: 31%;
+        padding-right: 3%;
+      }
+
+      .column-right {
+        float: left;
+        width: 31%;
+      }
+    }
+  }
+}
+
+// Dropdowns
+a.dropdown-trigger {
+  padding: 4px 5px;
+  border: solid 1px transparent;
+
+  &.active {
+    position: relative;
+    z-index: 200;
+    background-color: var(--dropdown-active-bg-color) !important;
+    @include border-top-left-radius(3px);
+    @include border-top-right-radius(3px);
+    border: solid 1px var(--base-border-color-darker-8);
+    border-bottom: 0;
+  }
+}
+
+.dropdown-panel {
+  position: absolute;
+  z-index: 199;
+  display: none;
+  background-color: var(--main-bg);
+  border: solid 1px var(--base-border-color-darker-8);
+  @include border-radius(3px);
+  @include box-shadow(0 1px 2px #ccc);
+
+  &.left {
+    @include border-top-left-radius(0);
+  }
+
+  &.right {
+    @include border-top-right-radius(0);
+  }
+}
+
+// Footer
+footer {
+  padding: 20px 0 40px;
+  margin-top: 35px;
+  clear: both;
+  font-size: 12px;
+  line-height: $base-line-height * 0.7;
+  color: var(--light-font-color);
+  border-top: solid 1px var(--base-border-color);
+
+  &:before {
+    content: "</>";
+    color: var(--light-font-color);
+    float: left;
+    font-family: monospace;
+    font-size: 24px;
+    letter-spacing: -4px;
+    padding: 5px;
+  }
+
+  a {
+    color: var(--light-font-color-darker-35);
+
+    &:hover {
+      color: var(--orange);
+    }
+  }
+
+  .site-source {
+    float: left;
+  }
+
+  .sfc-member {
+    float: right;
+    text-align: right;
+  }
+}
+
+table.benchmarks {
+  width: 100%;
+  padding: 20px;
+  margin-bottom: 20px;
+
+  tr {
+    th.right {
+      text-align: center;
+    }
+
+    td.desc {
+      font-size: 0.8em;
+      color: #888;
+    }
+
+    td.number {
+      font-family:monospace;
+      text-align: right;
+    }
+
+    td {
+      padding: 0 10px;
+    }
+  }
+}
+// scrollToTop
+.scrollToTop {
+  @include border-radius(50px);
+  display: none;
+  position: fixed;
+  background-color: var(--button-bg-color);
+  right: 20px;
+  bottom: 6.25rem;
+  padding: 0.8rem;
+  height: 20px;
+  transition: background-color 0.2s;
+  width: 20px;
+  &:hover{
+    background-color: var(--button-bg-hover-color);
+    @include box-shadow(2px);
+    &::before {
+      @include center-transformX;
+      width: 0;
+      height: 0;
+      color: var(--color-neutral-emphasis-plus);
+      content: "";
+      border: 6px solid transparent;
+      border-color:var(--black-3) transparent transparent;
+      top: -0.55rem;
+      position: absolute;
+    }
+    &::after {
+      @include center-transformX;
+      top: -2rem;
+      border-radius: 4px;
+      position: absolute;
+      content: attr(data-label);
+      word-wrap: break-word;
+      white-space: pre;
+      padding: .5em .75em;
+      color:var(--callout-color);
+      background-color:var(--black-3);
+      font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+    }
+  }
+}
+.no-js{
+  &.scrollToTop {
+    display: block;
+  }
+}
+
+// Breakpoint ----------------
+@media (max-width: $default) {
+  .responsive-table { overflow-x: auto; }
+  .center img { height: 100%; }
+  header{
+    padding: 1rem;
+  }
+  #content { width: 100%; }
+  .inner { width: 100%; }
+  #content-wrapper { padding: 0.8rem; }
+
+  #masthead {
+    height: unset;
+    .inner {
+      display: flex;
+      div:first-of-type {
+        padding:1rem;
+      }
+      .illustration-wrapper {
+        display: flex;
+        align-items: center;
+      }
+      p { width: unset; }
+      img.illustration {
+        position: unset;
+        right: unset;
+        top: unset;
+        max-height: 100%;
+      }
+    }
+  }
+  footer {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+// Mobile
+@media (max-width: $mobile-m) {
+  header {
+    grid-template-areas: "logo   tagline dark"
+                         "search search  search";
+    #tagline {
+      font-size: clamp(0.8rem, 3vw, 1.3rem);
+    }
+  }
+  #masthead {
+    .inner { flex-direction: column-reverse; }
+    .illustration-wrapper {
+      @include flex-center;
+      overflow: hidden;
+      .illustration {
+        width: 80%;
+        height: 100%;
+      }
+    }
+  }
+  #main {
+    >.two-column {
+      .column-right {
+        position: relative;
+        @include flex-center;
+      }
+    }
+    .two-column {
+      @include flex-column;
+      .column-left, .column-right {
+        width: 100%;
+      }
+    }
+  }
+  // Topics dropdown
+  #book-chapters,
+  #reference-version {
+    .dropdown-panel {
+      width: unset;
+      .three-column {
+        @include flex-column;
+        height: 70vh;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        .column-left,
+        .column-middle,
+        .column-right {
+          width: 100%;
+          max-width: 300px;
+        }
+        .unstyled {
+          a {
+          padding: 0.15rem 0;
+          display: block;
+          }
+        }
+        .chapter{
+          h2 {
+            display: flex;
+            align-items: center;
+            a { padding-left: 5px; }
+          }
+          ol {
+            li {
+              display: flex;
+              align-items: center;
+              margin-bottom: 6px;
+              padding: 0.45rem 0;
+               a { padding-left: 5px;}
+            }
+          }
+        }
+      }
+    }
+  }
+  footer {
+    @include flex-center;
+    flex-direction: column;
+    align-items: center;
+    .site-source {
+      margin-bottom: 1rem;
+    }
+  }
+  .scrollToTop {
+    bottom: 6rem;
+  }
+}