[LIGO-95] I AM A CSS GENIUS\!\!

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="sample-code-container">
-        <div className="tabs">
+        <div className="sample-code">
-          <div className="nav-tabs">
+          <div className="tabs">
-            <div
+            <div className="nav-tabs">
-              id="tab-group-3-tab-4"
+              <div
-              className="nav-link active"
+                id="tab-group-3-tab-4"
-              data-group="group_3"
+                className="nav-link active"
-              data-tab="tab-group-3-content-4"
+                data-group="group_3"
-            >
+                data-tab="tab-group-3-content-4"
-              PascaLIGO
+              >
+                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
+            <div className="tab-content">
-              className="nav-link"
+              {PascalLIGOTab()}
-              data-group="group_3"
+              {CamelLIGOTab()}
-              data-tab="tab-group-3-content-5"
-            >
-              CameLIGO
             </div>
-            <div className="disabled">ReasonLIGO (coming soon) </div>
-          </div>
-          <div className="tab-content">
-            {PascalLIGOTab()}
-            {CamelLIGOTab()}
           </div>
         </div>
       </div>

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 {
+.sample-code-container {
-  max-width: 55%;
+  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;
   }

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>