From 17b52868e262b9197ee79f29f1e49d9ce7f5ccc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= <benedikt@contentful.com>
Date: Thu, 5 Oct 2017 09:34:18 +0200
Subject: [PATCH] center settings page and fix text colors

---
 assets/stylesheets/base/typography.css        |  5 ++++
 assets/stylesheets/layout/layout-centered.css |  8 +++++++
 assets/stylesheets/variables.css              |  3 ++-
 public/stylesheets/style.css                  | 23 +++++++++++++++----
 views/settings.pug                            |  2 +-
 5 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/assets/stylesheets/base/typography.css b/assets/stylesheets/base/typography.css
index 401cf8f..5625aef 100644
--- a/assets/stylesheets/base/typography.css
+++ b/assets/stylesheets/base/typography.css
@@ -1,4 +1,9 @@
 h1, h2, h3, h4, h5, h6 {
+  font-family: 'robotomedium', 'Arial Black', sans-serif;
+  font-weight: normal;
+  line-height: 1.31;
+  color: var(--color-text-headlines);
+
   &:first-child {
     margin-top: 0;
   }
diff --git a/assets/stylesheets/layout/layout-centered.css b/assets/stylesheets/layout/layout-centered.css
index d8fc6a5..9aef39b 100644
--- a/assets/stylesheets/layout/layout-centered.css
+++ b/assets/stylesheets/layout/layout-centered.css
@@ -1,5 +1,13 @@
 @block layout-centered {
+  width: 100%;
   max-width: var(--content-max-width);
   margin: 0 auto;
   padding: 0 2vw;
 }
+
+@block layout-centered-small {
+  width: 100%;
+  max-width: calc(var(--content-max-width) - 360px);
+  margin: 0 auto;
+  padding: 0 2vw;
+}
diff --git a/assets/stylesheets/variables.css b/assets/stylesheets/variables.css
index 2ef850b..706bd17 100644
--- a/assets/stylesheets/variables.css
+++ b/assets/stylesheets/variables.css
@@ -15,7 +15,8 @@
   --color-palette-blue-dark: #3072be;
   --color-palette-red: #cd3f39;
 
-  --color-text-default: #2a3039;
+  --color-text-default: #536171;
+  --color-text-headlines: #2a3039;
   --color-text-grey: #8091a5;
   --color-text-dark-bg: #fff;
   --color-text-dark-bg-grey: #a9b9c0;
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 1a70fb5..06954bb 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -498,6 +498,13 @@ template {
     font-style: italic;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'robotomedium', 'Arial Black', sans-serif;
+  font-weight: normal;
+  line-height: 1.31;
+  color: #2a3039
+}
+
 h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
   margin-top: 0;
 }
@@ -821,11 +828,19 @@ input[type="reset"]:focus,
 }
 
 .layout-centered {
+  width: 100%;
   max-width: 980px;
   margin: 0 auto;
   padding: 0 2vw;
 }
 
+.layout-centered-small {
+  width: 100%;
+  max-width: 620px;
+  margin: 0 auto;
+  padding: 0 2vw;
+}
+
 .layout-sidebar {
   padding: 0 2vw;
   max-width: 980px;
@@ -1260,7 +1275,7 @@ display: flex;
 .table-of-contents__link:hover,
     .table-of-contents__link.active {
   font-family: 'robotomedium', Helvetica, sans-serif;
-  color: #2a3039;
+  color: #536171;
 }
 
 .table-of-contents__link.active {
@@ -1326,7 +1341,7 @@ display: flex;
 
 .sidebar-menu__link.active {
   font-family: 'robotomedium', Helvetica, sans-serif;
-  color: #2a3039;
+  color: #536171;
 }
 
 .main-navigation ul {
@@ -1375,12 +1390,12 @@ display: flex;
 }
 
 .main-navigation ul li a.active {
-  color: #2a3039;
+  color: #536171;
 }
 
 body {
   background-color: #fff;
-  color: #2a3039;
+  color: #536171;
   font-family: 'roboto', Helvetica, sans-serif;
   font-size: 16px;
   font-size: 1rem;
diff --git a/views/settings.pug b/views/settings.pug
index a92bbe2..ef5c8a1 100644
--- a/views/settings.pug
+++ b/views/settings.pug
@@ -1,7 +1,7 @@
 extends layout
 
 block content
-  .layout-centered
+  .layout-centered-small
     h1= title
     p To query and get content using the APIs, client applications need to authenticate with both the Space ID and an access token.