Website styles (#1607)

* Update .gitignore

* Fix color issues in phone breakpoint

* Fix layout issues and add new heading styles

website/.gitignore

@@ -1,11 +1,10 @@
-node_modules
 .DS_Store
+
+build/
+node_modules/
+
+i18n/*
+!i18n/en.json
+
 lib/core/metadata.js
 lib/core/MetadataBlog.js
-website/translated_docs
-website/build/
-website/yarn.lock
-website/node_modules
-
-website/i18n/*
-!website/i18n/en.json

website/siteConfig.js

@@ -20,8 +20,8 @@ const siteConfig = {
   favicon: 'docs/assets/DigbyScene2Flat.png',
   /* colors for website */
   colors: {
-    secondaryColor: '#E0EBF5',
-    primaryColor: '#375EAB',
+    secondaryColor: '#243f75',
+    primaryColor: '#375eab',
   },
   //algolia: {
     //apiKey: "f2e26cf744b3d81c7e57499075753104",

website/static/css/custom.css

@@ -1,11 +1,44 @@
-/* your custom css */
+/* 
+Contains custom styles for whole site.
+*/
 
-.homeContainer {
-    flex: 1 0 auto;
-    padding-bottom: 1em;
+html {
+    box-sizing: border-box;
 }
 
-.docMainWrapper {
+*, *:before, *:after {
+    box-sizing: inherit;
+}
+
+body {
+    min-height: 100vh;
+}
+
+.navPusher {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    justify-content: space-between;
+    min-height: 100%;
+    /* Resets default height: 100% */
+    height: auto;
+}
+
+.footer-logo {
+    padding-top: 1em;
+    display: flex;
+    justify-content: center;
+}
+
+/* Reset .navToggle box-sizing */
+.navToggle {
+    box-sizing: content-box;
+}
+
+
+/* HOME _____________________________________________________________________________________________________________ */
+
+.homeContainer {
     flex: 1 0 auto;
     padding-bottom: 1em;
 }
@@ -20,20 +53,59 @@
     max-height: 360px;
 }
 
-body {
-    display: flex;
-    flex-direction: column;
+
+/* DOCS _____________________________________________________________________________________________________________ */
+
+.docMainWrapper {
+    width: 100%;
 }
 
-div.navPusher {
-    display: flex;
-    flex-direction: column;
+
+/* HEADINGS _________________________________________________________________________________________________________ */
+
+.mainContainer .wrapper .post h2,
+.mainContainer .wrapper .post h3,
+.mainContainer .wrapper .post h4,
+.mainContainer .wrapper .post h5,
+.mainContainer .wrapper .post h6 {
+    margin-top: 2.5rem;
 }
 
-.footer-logo {
-    padding-top: 1em;
-    display: flex;
-    justify-content: center;
+.mainContainer .wrapper .post .postHeader h1 {
+    font-size: 2.909rem;
+}
+
+.mainContainer .wrapper .post h2 {
+    font-size: 2.218rem;
+}
+
+.mainContainer .wrapper .post h3 {
+    font-size: 1.798rem;
+    color: #a6a6a6;
+}
+
+.mainContainer .wrapper .post h4 {
+    font-size: 1.618rem;
+    color: #a6a6a6;
+    font-weight: 300;
+    line-height: 1.5;
+    padding: 10px 0;
+}
+
+.mainContainer .wrapper .post h5 {
+    font-size: 1.111rem;
+    color: #a6a6a6;
+    font-weight: 300;
+    line-height: 1.5;
+    padding: 10px 0;
+}
+
+.mainContainer .wrapper .post h6 {
+    font-size: 1rem;
+    color: #a6a6a6;
+    font-weight: 300;
+    line-height: 1.5;
+    padding: 10px 0;
 }
 
 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {