Add more styles for overview page

static-pages/index.pug

@@ -18,7 +18,11 @@ block content
       .quadrant-grid__quadrant
         .quadrant-section
           .quadrant-section__header
-            h4.headline= translate(quadrantName)
+            .split
+              .split__left
+                h4.headline= translate(quadrantName)
+              .split__right
+                a.icon-link(href='/') Quadrant Overview
           .quadrant-section__rings
             each items, ringName in quadrant
               .quadrant-section__ring

styles/components/badge.css

@@ -3,10 +3,10 @@
   display: inline-block;
   padding: 0 15px;
   text-transform: uppercase;
-  border-radius: 15px;
-  font-size: 14px;
-  line-height: 30px;
-  height: 30px;
+  border-radius: 13px;
+  font-size: 12px;
+  line-height: 25px;
+  height: 25px;
   overflow: hidden;
 
   &--adopt {

styles/components/headline.css

@@ -1,4 +1,6 @@
 .headline {
+  margin: 0;
+  padding: 0;
   color: var(--color-white);
   font-size: 20px;
   font-weight: normal;

styles/components/hero-headline.css

@@ -1,8 +1,9 @@
 .hero-headline {
-  font-size: 40px;
+  font-size: 38px;
   font-weight: 300;
   color: var(--color-white);
-  margin-bottom: 70px;
+  margin: 0 0 60px;
+  padding: 0;
 
   &__alt {
     color: var(--color-gray-light);

styles/components/icon-link.css

@@ -0,0 +1,26 @@
+.icon-link {
+  display: inline-block;
+  position: relative;
+  text-decoration: none;
+  padding-left: 30px;
+  height: 25px;
+  font-size: 14px;
+  line-height: 25px;
+  color: var(--color-gray-normal);
+
+  &:hover {
+    color: var(--color-white);
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 25px;
+    height: 25px;
+    /* TODO icon*/
+    background: var(--color-gray-normal);
+    border-radius: 50%;
+  }
+}

styles/components/nav.css

@@ -0,0 +1,8 @@
+.nav {
+  &__item {
+    display: inline-block;
+    & + .nav__item {
+      margin-left: 20px;
+    }
+  }
+}

styles/components/quadrant-grid.css

@@ -1,9 +1,10 @@
 .quadrant-grid {
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-between;
 
   &__quadrant {
-    flex: 0 0 50%;
+    flex: 0 0 45%;
     margin-bottom: 40px;
   }
 }

styles/components/ring-list.css

@@ -5,6 +5,6 @@
   &__item {
     font-size: 13px;
     display: block;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
   }
 }

styles/components/split.css

@@ -0,0 +1,13 @@
+.split {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  
+  &__left {
+    flex: 0 1 auto;
+  }
+
+  &__right {
+    flex: 0 1 auto;
+  }
+}

templates/layout.pug

@@ -10,7 +10,11 @@ html
           a.branding__logo(href='/')
             img(src='/assets/logo.svg')
           .branding__content
-            | How to Use Technology Radar?
+            .nav
+              .nav__item
+                a.icon-link(href='/') How to Use Technology Radar?
+              .nav__item
+                a.icon-link(href='/') Technologies Overview
       .page__content
         block content
         block scripts