From 9487d21536036171c8beb3358531ec2d979cda50 Mon Sep 17 00:00:00 2001
From: Sander Spies <sandermail@gmail.com>
Date: Sat, 28 Sep 2019 10:19:22 +0200
Subject: [PATCH] - Prevent jumping around of elements. - Set a maximum width
 for the content. - Enlarge certain elements for mobile

---
 gitlab-pages/website/static/css/custom.css | 59 +++++++++++++++-------
 1 file changed, 42 insertions(+), 17 deletions(-)

diff --git a/gitlab-pages/website/static/css/custom.css b/gitlab-pages/website/static/css/custom.css
index 5a41e4e9f..d05420da8 100644
--- a/gitlab-pages/website/static/css/custom.css
+++ b/gitlab-pages/website/static/css/custom.css
@@ -109,6 +109,10 @@ footnote {
   display: none;
 }
 
+.fixedHeaderContainer {
+  left: 0;
+}
+
 .nav-footer {
   background: var(--color-primary-text);
 }
@@ -122,11 +126,10 @@ footnote {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  padding: var(--padding-level-3);
 }
 
 .home-text {
-  width: 35%;
+  flex: 1;
 }
 
 .sample-code-container {
@@ -194,6 +197,11 @@ blockquote {
   color: rgba(255, 255, 255, 1);
 }
 
+.tab-pane {
+  height: 550px;
+  overflow-x: auto;
+}
+
 blockquote code {
   opacity: 0.5;
 }
@@ -261,6 +269,11 @@ html {
   background: white;
 }
 
+body {
+  margin: 0 auto;
+  max-width: 1500px;
+}
+
 .copyright a {
   color: #b2210c;
 }
@@ -563,33 +576,45 @@ body
   }
 }
 
-@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
-}
-
-@media only screen and (max-width: 1023px) {
+@media only screen and (min-device-width: 360px){
   .home-container {
-    flex-direction: column-reverse;
-    margin-top: var(--padding-level-1);
-  }
-  .home-text {
+    flex-direction: column;
     align-content: center;
-    text-align: center;
-    width: 90%;
-    padding-top: var(--padding-level-2);
   }
+
+  .home-text {
+    text-align: center;
+    padding: var(--padding-level-2) 0;
+  }
+
   .sample-code-container {
     width: 90%;
   }
+  
+  .sample-code {
+    padding: 0;
+    width: 100%;
+  }
 }
 
 @media only screen and (min-width: 1280px) {
-}
+  .home-container {
+    flex-direction: row;
+    margin: var(--padding-level-1);    
+    max-width: 90%;
+    padding: var(--padding-level-3);
+  }
 
-@media only screen and (min-width: 1440px) {
   .landing h4.tagline-text {
     font-size: 2.25rem;
   }
-}
 
-@media only screen and (min-width: 1500px) {
+  .sample-code-container {
+    max-width: 60%;
+  }
+
+  .sample-code {
+    padding: 25px;
+    width: 80%;    
+  }
 }