Add styles for quadrant pages

static-pages/index.pug

@@ -4,6 +4,7 @@ block vars
   - var title='Overview'
 
 block content
+  .headline-group
     .hero-headline
       | Technology Radar
       span.hero-headline__alt

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%;
+    flex: 0 0 37%;
-    background: var(--color-gray-dark);
     &__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%;
   }

templates/default-page.pug

@@ -4,6 +4,10 @@ block body
   .page
     .page__header
       .branding
+        if noLogo
+          .branding__backlink
+            a.icon-link(href='/') AOE Technology Radar
+        if !noLogo
           a.branding__logo(href='/')
             img(src='/assets/logo.svg')
         .branding__content
@@ -14,6 +18,7 @@ block body
               a.icon-link(href='/') Technologies Overview
     .page__content
       block content
+    if !noFooter
       .page__footer
         .branding
           span.branding__logo

templates/item-page.pug

@@ -1,16 +1,14 @@
-extends layout.pug
+extends default-page.pug
 
 block vars
-  //-
+  - var noLogo=true
+  - var noFooter=true
   - var title=item.attributes.title
 
-block body
+block content
   .item-page
     .item-page__nav
       .item-page__nav__inner
-        .nav
-          .nav__item
-            a.icon-link.icon-link--primary.icon-link--big(href='/') AOE Technology Radar
         .item-page__header
           h3.headline
             = translate(item.quadrant)
@@ -30,14 +28,6 @@ block body
                   .item__info= ringItem.attributes.info
     .item-page__content
       .item-page__content__inner
-        .split
-          .split__left
-          .split__right
-            .nav
-              .nav__item
-                a.icon-link(href='/') How to Use Technology Radar?
-              .nav__item
-                a.icon-link(href='/') Technologies Overview
         .item-page__header
           .split
             .split__left

templates/quadrant-page.pug

@@ -1,13 +1,24 @@
 extends default-page.pug
 
 block vars
-  - var title='Quadrant'
+  - var noLogo=true
+  - var title=`${translate(quadrantName)}`
 
 block content
-  //
+  .headline-group
-    h1
+    h1.hero-headline
       = translate(quadrantName)
-    ul
+  .quadrant-section
-      each radarItem, itemName in quadrant
+    .quadrant-section__rings
-        li
+      each items, ringName in quadrant
-          a(href='/' + quadrantName + '/' + itemName + '.html')= radarItem.attributes.title
+        .quadrant-section__ring
+          .item-list
+            .item-list__header
+              span(class=`badge badge--big badge--${ringName}`)
+                = ringName
+            .item-list__list
+              each ringItem in items
+                a.item.item--no-leading-border(href=`/${ringItem.quadrant}/${ringItem.name}.html`)
+                  .item__title= ringItem.attributes.title
+                  if ringItem.attributes.info
+                    .item__info= ringItem.attributes.info