Add item detail page

styles/base.css

@@ -1,12 +1,15 @@
 :root {
   --color-gray-dark: #475157;
+  --color-gray-dark-alt: #4F585E;
   --color-gray-normal: #979797;
   --color-gray-light: #7D878D;
+
   --color-white: #fff;
   --color-green: #5CB449;
   --color-orange: #FAA03D;
   --color-blue: #40A7D1;
   --color-marine: #688190;
+  --color-brand: #F59134;
 }
 
 @font-face {

styles/components/badge.css

@@ -9,6 +9,14 @@
   height: 25px;
   overflow: hidden;
 
+  &--big {
+    border-radius: 15px;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding: 0 20px;
+  }
+
   &--adopt {
     background: var(--color-green);
   }
@@ -21,4 +29,5 @@
   &--hold {
     background: var(--color-marine);
   }
+
 }

styles/components/hero-headline.css

@@ -1,11 +1,16 @@
 .hero-headline {
   font-size: 38px;
   font-weight: 300;
+  line-height: 1.2;
   color: var(--color-white);
-  margin: 0 0 60px;
   padding: 0;
+  margin: 0;
 
   &__alt {
     color: var(--color-gray-light);
   }
+
+  &--inverse {
+    color: var(--color-gray-light);
+  }
 }

styles/components/icon-link.css

@@ -8,8 +8,16 @@
   line-height: 25px;
   color: var(--color-gray-normal);
 
+  &--primary {
+    color: var(--color-brand);
+  }
+
+  &--big {
+    font-size: 16px;
+  }
+
   &:hover {
-    color: var(--color-white);
+    text-decoration: underline;
   }
 
   &:before {

styles/components/item-details.css

@@ -0,0 +1,41 @@
+.item-details {
+  color: var(--color-gray-normal);
+  font-size: 16px;
+
+  & p {
+    margin: 20px 0;
+  }
+
+  & a {
+    color: var(--color-gray-normal);
+    text-decoration: underline;
+    &:hover {
+      color: var(--color-gray-dark);
+    }
+  }
+
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6 {
+    color: var(--color-gray-normal);
+  }
+
+  & h1 {
+    font-size: 2em;
+    margin: 1em 0;
+    font-weight: 300;
+  }
+
+  & h2 {
+    font-size: 1.5em;
+    margin: 1em 0;
+  }
+
+  & h3 {
+    font-size: 1.2em;
+    margin: 1em 0;
+  }
+}

styles/components/item-list.css

@@ -0,0 +1,8 @@
+.item-list {
+  &__header {
+    margin-bottom: 20px;
+  }
+  &__list {
+    
+  }
+}

styles/components/item-page.css

@@ -0,0 +1,32 @@
+.item-page {
+  display: flex;
+  height: 100vh;
+  &__nav,
+  &__content {
+    height: 100%;
+  }
+
+  &__header {
+    min-height: 40px;
+    margin: 50px 0 25px;
+  }
+
+  &__nav {
+    flex: 0 0 30%;
+    background: var(--color-gray-dark);
+    &__inner {
+      float: right;
+      width: 375px;
+      margin: 60px 40px 0 0;
+    }
+  }
+
+  &__content {
+    flex: 0 0 70%;
+    background: var(--color-white);
+    &__inner {
+      width: 680px;
+      margin: 60px 0 0 110px;
+    }
+  }
+}

styles/components/item.css

@@ -0,0 +1,25 @@
+.item {
+  padding: 10px;
+  border-bottom: 1px solid var(--color-gray-normal);
+  display: block;
+  text-decoration: none;
+
+  &.is-active {
+    background: var(--color-gray-dark-alt);
+  }
+
+  &:first-child {
+    border-top: 1px solid var(--color-gray-normal);
+  }
+
+  &__title {
+    font-size: 16px;
+    color: var(--color-white);
+  }
+
+  &__info {
+    margin-top: 5px;
+    font-size: 12px;
+    color: var(--color-gray-normal);
+  }
+}

styles/components/quadrant-grid.css

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