feat: move html to different block to be able to use global css

Signed-off-by: Kevin Bimonte <[email protected]>

Author: kcbimonte

overrides/assets/stylesheets/home.css

@@ -1,64 +1,79 @@
 
 body {
-  background-image: url('../images/concourse-pattern.svg');
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-size: cover;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
+    background-image: url('../images/concourse-pattern.svg');
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
 }
 
 .centered-section {
-  position: relative;
-  /* left: 50%; */
-  top: 30%;
-  width: 90%;
-  /* transform: translate(-50%, -50%); */
-  background-color: rgba(
-    255,
-    255,
-    255,
-    0.2
-  ); 
-  border-radius: 8px; 
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);
-  text-align: center;
-  /* padding: 140px 70px; */
-  margin-top: 200px;
-  padding-left: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
 }
 
 .side-by-side {
+    background-color: rgba(
+            255,
+            255,
+            255,
+            0.2
+    );
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);
+    text-align: center;
     display: grid;
-    margin-bottom: 1em;
+    /*margin-bottom: 1em;*/
     grid-template-columns: 48% 48%;
     grid-gap: 0 4%;
-    padding-top: 140px;
+    /*padding-top: 140px;*/
+    padding: 3em 1.5em;
+    margin-left: 1.5em;
+    margin-right: 1.5em;
 }
 
 .side-by-side .segment {
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-  padding: 10px;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    padding: 10px;
 }
 
 .splash-intro {
-  background-color: aqua;  
+    /*background-color: aqua;*/
+    color: #efeeee;
 }
 
 .splash-intro p {
-  font-size: 1rem;
+    font-size: 1rem;
 }
+
 .splash-intro h1 {
-  font-size: xx-large;
+    font-size: xx-large;
+    color: #efeeee;
+}
+
+.splash-intro a {
+    text-decoration: underline !important;
+    color: #efeeee;
+}
+
+.splash-intro a:hover {
+    color: #efeeee;
 }
 
 .right-flex {
-  background-color: blueviolet;
+    background-color: blueviolet;
 }
 
+.right-flex .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}

overrides/home.html

@@ -1,23 +1,44 @@
-{% extends "main.html" %} {% block tabs %} {{ super() }}
-<link rel="stylesheet" href="assets/stylesheets/home.css" />
+{% extends "main.html" %}
+{% block tabs %}
+{{ super() }}
+
+{% endblock %}
+
+{% block content %}
+
+<link rel="stylesheet" href="assets/stylesheets/home.css"/>
 <div class="centered-section">
-  <div class="side-by-side">
-    <div class="segment splash-intro">
-      <h1>Concourse is an open-source continuous thing-doer.</h1>
-      <p>
-        Centered around the simple mechanics of
-        <a href="https://concourse-ci.org/resources.html">resources</a>,
-        <a href="https://concourse-ci.org/tasks.html">tasks</a>, and
-        <a href="https://concourse-ci.org/jobs.html">jobs</a>, Concourse
-        delivers a versatile approach to automation that excels at
-        <a href="https://en.wikipedia.org/wiki/Continuous_integration">CI</a>/<a
-          href="https://en.wikipedia.org/wiki/Continuous_delivery"
-          >CD</a
-        >.
-      </p>
+    <div class="side-by-side">
+        <div class="segment splash-intro">
+            <h1>Concourse is an open-source continuous thing-doer.</h1>
+            <p>
+                Centered around the simple mechanics of
+                <a href="docs/resources">resources</a>,
+                <a href="docs/tasks">tasks</a>, and
+                <a href="docs/jobs">jobs</a>, Concourse
+                delivers a versatile approach to automation that excels at
+                <a href="https://en.wikipedia.org/wiki/Continuous_integration">CI</a>/<a
+                    href="https://en.wikipedia.org/wiki/Continuous_delivery">CD</a>.
+            </p>
+        </div>
+        <div class="segment right-flex">
+            <div class="grid">
+                <p>Download the Latest Release</p>
+                <button class="md-button md-button--primary"> v7.14.2 </button>
+            </div>
+                <div class="grid">
+                    <div><pre>concourse</pre> cli</div>
+                    <button class="md-button md-button--primary">Button</button>
+                </div>
+                <div class="grid">
+                    <div><pre>concourse</pre> cli</div>
+                    <button class="md-button md-button--primary">Button</button>
+                </div>
+        </div>
     </div>
-    <div class="segment right-flex"><h1>Concourse</h1></div>
-  </div>
 </div>
-{% endblock %} {% block content %}{% endblock %} {% block footer %}{% endblock
-%}
+
+{% endblock %}
+
+{% block footer %}
+{% endblock%}