Add styles for quadrant pages

styles/base.css

@@ -1,6 +1,7 @@
 :root {
   --color-gray-dark: #475157;
   --color-gray-dark-alt: #4F585E;
+  --color-gray-dark-alt2: #525C63;
   --color-gray-normal: #979797;
   --color-gray-light: #7D878D;
 

styles/components/branding.css

@@ -3,6 +3,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: 60px;
+
+  &__backlink {
+    flex: 0 0 auto;
+  }
 
   &__logo {
     flex: 0 0 200px;

styles/components/headline-group.css

@@ -0,0 +1,3 @@
+.headline-group {
+  margin-bottom: 60px;
+}

styles/components/item-page.css

@@ -1,32 +1,39 @@
 .item-page {
   display: flex;
-  height: 100vh;
+  min-height: 100vh;
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+
   &__nav,
   &__content {
-    height: 100%;
+    box-sizing: border-box;
+    padding-top: 150px;
+    height: 100vh;
+    position: relative;
   }
 
   &__header {
     min-height: 40px;
-    margin: 50px 0 25px;
+    margin: 0 0 25px;
   }
 
   &__nav {
-    flex: 0 0 30%;
-    background: var(--color-gray-dark);
+    flex: 0 0 37%;
     &__inner {
       float: right;
       width: 375px;
-      margin: 60px 40px 0 0;
+      margin: 0 40px 0 0;
     }
   }
 
   &__content {
-    flex: 0 0 70%;
+    flex: 0 0 63%;
     background: var(--color-white);
     &__inner {
       width: 680px;
-      margin: 60px 0 0 110px;
+      margin: 0 0 0 100px;
     }
   }
 }

styles/components/item.css

@@ -3,15 +3,26 @@
   border-bottom: 1px solid var(--color-gray-normal);
   display: block;
   text-decoration: none;
+  transition: background 200ms ease-out;
 
   &.is-active {
     background: var(--color-gray-dark-alt);
   }
 
+  &:hover {
+    background: var(--color-gray-dark-alt2);
+  }
+
   &:first-child {
     border-top: 1px solid var(--color-gray-normal);
   }
 
+  &--no-leading-border {
+    &:first-child {
+      border-top: none;
+    }
+  }
+
   &__title {
     font-size: 16px;
     color: var(--color-white);

styles/components/page.css

@@ -9,6 +9,8 @@
   &__header {
     flex: 0 0 auto;
     margin-bottom: 20px;
+    position: relative;
+    z-index: 100;
   }
 
   &__content {

styles/components/quadrant-grid.css

@@ -2,7 +2,6 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  margin-top: 60px;
 
   &__quadrant {
     flex: 0 0 45%;

styles/components/quadrant-section.css

@@ -8,6 +8,7 @@
   }
 
   &__ring {
+    box-sizing: border-box;
     padding: 0 8px;
     flex: 0 0 25%;
   }