More styles

styles/base.css

@@ -1,5 +1,6 @@
 :root {
   --color-gray-dark: #475157;
+  --color-gray-normal: #979797;
   --color-gray-light: #7D878D;
   --color-white: #fff;
   --color-green: #5CB449;
@@ -27,7 +28,8 @@ body {
   padding: 0;
   font-family: 'DIN';
   font-weight: normal;
-  font-size: 16px;
+  font-size: 14px;
+  line-height: 1.5;
 
   & h1 {
     color: blue;

styles/components/branding.css

@@ -1,10 +1,11 @@
-.header {
-  margin: 40px 0 60px;
+.branding {
+  margin: 40px 0;
   display: flex;
   align-items: center;
+  justify-content: space-between;
 
   &__logo {
-    flex: 1 0 auto;
+    flex: 0 0 200px;
     & img {
       display: block;
       width: 150px;
@@ -12,8 +13,7 @@
     }
   }
 
-  &__nav {
-    flex: 0 0 auto;
-    height: 20px;
+  &__content {
+    flex: 0 1 auto;
   }
 }

styles/components/footnote.css

@@ -0,0 +1,4 @@
+.footnote {
+  font-size: 12px;
+  color: var(--color-gray-normal);
+}

styles/components/headline.css

@@ -0,0 +1,5 @@
+.headline {
+  color: var(--color-white);
+  font-size: 20px;
+  font-weight: normal;
+}

styles/components/hero-headline.css

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

styles/components/link.css

@@ -0,0 +1,8 @@
+.link {
+  color: var(--color-white);
+  text-decoration: none;
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+}

styles/components/page.css

@@ -1,5 +1,22 @@
 .page {
   width: 1200px;
+  min-height: 100%;
   margin: 0 auto;
   padding: 0 10px;
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    flex: 0 0 auto;
+    margin-bottom: 20px;
+  }
+
+  &__content {
+    flex: 1 1 auto;
+  }
+
+  &__footer {
+    border-top: 1px solid var(--color-gray-normal);
+    flex: 0 0 auto;
+  }
 }

styles/components/quadrant-grid.css

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

styles/components/quadrant-section.css

@@ -1,13 +1,14 @@
 .quadrant-section {
   &__header {
-
+    margin-bottom: 20px;
   }
 
-  &__lists {
+  &__rings {
     display: flex;
   }
-  
-  &__list {
-    flex: 0 0 20%;
+
+  &__ring {
+    padding: 0 8px;
+    flex: 0 0 25%;
   }
 }

styles/components/ring-list.css

@@ -1,10 +1,10 @@
 .ring-list {
   &__header {
-    margin-bottom: 10px;
+    margin-bottom: 20px;
   }
   &__item {
+    font-size: 13px;
     display: block;
-    color: var(--color-white);
     margin-bottom: 10px;
   }
 }