From f542cde28322d24f5d6874c485deb5677c060e85 Mon Sep 17 00:00:00 2001
From: Sarah Fowler <sarah.fowler73@gmail.com>
Date: Wed, 25 Sep 2019 17:36:43 -0400
Subject: [PATCH] [LIGO-95] I AM A CSS GENIUS\!\!

---
 gitlab-pages/website/pages/en/index.js     | 44 +++++++++++-----------
 gitlab-pages/website/static/css/custom.css | 33 ++++++++++++++--
 gitlab-pages/website/static/img/geo.svg    | 11 ++++++
 3 files changed, 63 insertions(+), 25 deletions(-)
 create mode 100644 gitlab-pages/website/static/img/geo.svg

diff --git a/gitlab-pages/website/pages/en/index.js b/gitlab-pages/website/pages/en/index.js
index 3bd5004a3..8c9cac7de 100644
--- a/gitlab-pages/website/pages/en/index.js
+++ b/gitlab-pages/website/pages/en/index.js
@@ -107,29 +107,31 @@ class HomeSplash extends React.Component {
     const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
 
     const SampleCode = props => (
-      <div className="sample-code">
-        <div className="tabs">
-          <div className="nav-tabs">
-            <div
-              id="tab-group-3-tab-4"
-              className="nav-link active"
-              data-group="group_3"
-              data-tab="tab-group-3-content-4"
-            >
-              PascaLIGO
+      <div className="sample-code-container">
+        <div className="sample-code">
+          <div className="tabs">
+            <div className="nav-tabs">
+              <div
+                id="tab-group-3-tab-4"
+                className="nav-link active"
+                data-group="group_3"
+                data-tab="tab-group-3-content-4"
+              >
+                PascaLIGO
+              </div>
+              <div
+                className="nav-link"
+                data-group="group_3"
+                data-tab="tab-group-3-content-5"
+              >
+                CameLIGO
+              </div>
+              <div className="disabled">ReasonLIGO (coming soon) </div>
             </div>
-            <div
-              className="nav-link"
-              data-group="group_3"
-              data-tab="tab-group-3-content-5"
-            >
-              CameLIGO
+            <div className="tab-content">
+              {PascalLIGOTab()}
+              {CamelLIGOTab()}
             </div>
-            <div className="disabled">ReasonLIGO (coming soon) </div>
-          </div>
-          <div className="tab-content">
-            {PascalLIGOTab()}
-            {CamelLIGOTab()}
           </div>
         </div>
       </div>
diff --git a/gitlab-pages/website/static/css/custom.css b/gitlab-pages/website/static/css/custom.css
index c5250c0e3..0167f638e 100644
--- a/gitlab-pages/website/static/css/custom.css
+++ b/gitlab-pages/website/static/css/custom.css
@@ -159,15 +159,27 @@ footnote {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--padding-level-4);
+  padding: var(--padding-level-3);
 }
 
 .home-text {
   max-width: 40%;
 }
 
-.code-sample {
-  max-width: 55%;
+.sample-code-container {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  max-width: 60%;
+  background: url("/img/geo.svg") top right/140px 140px no-repeat,
+    url("/img/geo.svg") bottom left/200px 200px no-repeat;
+}
+
+.sample-code {
+  max-width: 80%;
+  padding: 25px;
+  box-shadow: 0px 0px 70px rgba(13, 15, 51, 0.06);
+  background-color: white;
 }
 
 blockquote {
@@ -555,12 +567,25 @@ body
 }
 
 @media only screen and (max-width: 1023px) {
+  .home-container {
+    flex-direction: column-reverse;
+    margin-top: var(--padding-level-1);
+  }
+  .home-text {
+    align-content: center;
+    text-align: center;
+    max-width: 90%;
+    padding-top: var(--padding-level-2);
+  }
+  .sample-code-container {
+    max-width: 100%;
+  }
 }
 
 @media only screen and (min-width: 1280px) {
 }
 
-@media only screen and (min-width: 1400px) {
+@media only screen and (min-width: 1440px) {
   .landing h4.tagline-text {
     font-size: 2.25rem;
   }
diff --git a/gitlab-pages/website/static/img/geo.svg b/gitlab-pages/website/static/img/geo.svg
new file mode 100644
index 000000000..4def0999c
--- /dev/null
+++ b/gitlab-pages/website/static/img/geo.svg
@@ -0,0 +1,11 @@
+<svg width="283" height="293" viewBox="0 0 283 293" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5493 9.85961L22.8389 40.1643L44.2426 17.8585L14.5493 9.85961Z" fill="#FC683A"/>
+<path d="M256.608 227L215 282.348L282.301 293L256.608 227Z" fill="#EFEFEF"/>
+<circle cx="100" cy="154" r="74" stroke="url(#paint0_linear)" stroke-width="52"/>
+<defs>
+<linearGradient id="paint0_linear" x1="100" y1="54.0002" x2="100" y2="254" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3AA0FF"/>
+<stop offset="1" stop-color="#0072DC"/>
+</linearGradient>
+</defs>
+</svg>