center settings page and fix text colors

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;
   }

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;
+}

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;

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;

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.