Improve styling of landing page

themes/Loopp/static/css/style.css

@@ -39,27 +39,34 @@ a.pure-button-primary {
     font-size: 120%;
 }
 
-.splash {
+.lp-box {
     background: #000000;
     border: 2px solid #ff9900;
+    text-align: center;
+    padding: 50px;
 }
 
-.splash-head {
+.lp-box-head {
     border: 0;
     letter-spacing: 1em;
     margin-left: 1em;
+    color: #fff;
 }
 
-.splash-head {
-    border-radius: 0px;
-}
-
-.splash-container {
+.lp-box-wrapper {
     background-color: black;
     background-image: url("../images/header.png");
     background-repeat: repeat-x;
     background-position-y: 100px;
     background-position-x: 0px;
+    padding-top: 17vh;
+    z-index: 1;
+    overflow: hidden;
+    width: 100%;
+    height: 88%;
+    top: 0;
+    left: 0;
+    position: fixed !important;
 }
 
 .ribbon, .home-menu {

themes/Loopp/templates/landing_page.html

@@ -1,18 +1,21 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="splash-container">
-    <div class="splash">
-        <h1 class="splash-head">{{ SPLASH_HEADING }}</h1>
-        <p class="splash-subhead">
-            {{ SPLASH_SUBHEADING }}
-        </p>
-        <p>
-            <a href="#GetLuppp" class="pure-button pure-button-primary">
-                <span class="icon"></span>
-                <span class="button-text">{{ SPLASH_BUTTON_TEXT }}</span>
-            </a>
-        </p>
+<div class="lp-box-wrapper">
+    <div class="pure-g">
+        <div class="pure-u-1 pure-u-lg-1-4"></div>
+        <div class="lp-box pure-u-1 pure-u-lg-1-2">
+            <h1 class="lp-box-head">{{ SPLASH_HEADING }}</h1>
+            <p class="">
+                {{ SPLASH_SUBHEADING }}
+            </p>
+            <p>
+                <a href="#GetLuppp" class="pure-button pure-button-primary">
+                    <span class="icon"></span>
+                    <span class="button-text">{{ SPLASH_BUTTON_TEXT }}</span>
+                </a>
+            </p>
+        </div>
     </div>
 </div>