From c5e5b4af211a7aa8375d402d68c6b2541376838f Mon Sep 17 00:00:00 2001
From: Aditya Anand <aditya.anandmc@gmail.com>
Date: Sat, 27 Apr 2019 18:13:40 +0530
Subject: [PATCH] grants/index: clean up landing page

---
 app/assets/v2/css/grants/grant.css     | 70 +++++++++++++++-----
 app/grants/templates/grants/index.html | 89 +++++++++++++-------------
 2 files changed, 99 insertions(+), 60 deletions(-)

diff --git a/app/assets/v2/css/grants/grant.css b/app/assets/v2/css/grants/grant.css
index 5cfcb0c604e..c7ff4b7f8ef 100644
--- a/app/assets/v2/css/grants/grant.css
+++ b/app/assets/v2/css/grants/grant.css
@@ -1,3 +1,14 @@
+.header {
+  background-image: none;
+  background: linear-gradient(to right top, #0fce7c, #00a5a1, #0077b5, #0046a1, #0d0764);
+  animation: gradient 40s ease infinite;
+  background-size: 200% 200% !important;
+}
+
+.header .embed-responsive {
+  border-radius: 3px;
+}
+
 .white-icon {
   width: 14px;
   height: 20px;
@@ -176,6 +187,36 @@
   font-size: 12px;
 }
 
+#grants-details {
+  padding-bottom: 1em;
+}
+
+#grants_nav{
+  border-bottom: 1px solid #333333;
+  text-align: left;
+  width: 100%;
+}
+
+#grants_nav a{
+  color: #333333;
+  margin-right: 30px;
+}
+
+#grants_nav a:hover{
+  font-weight: 700;
+}
+
+#grants_nav .selected{
+  font-weight: 1000;
+  color: #3f24f9;
+}
+
+@media (min-width: 1200px) {
+  .header .container {
+    max-width: 1240px;
+  }
+}
+
 @media (max-width: 767.98px) {
   .search {
     margin-left: 0rem;
@@ -194,23 +235,20 @@
   }
 }
 
-#grants-details {
-  padding-bottom: 1em;
+@-webkit-keyframes gradient {
+  0%{background-position:0% 50%}
+  50%{background-position:100% 50%}
+  100%{background-position:0% 50%}
 }
 
-#grants_nav{
-  border-bottom: 1px solid #333333;
-  text-align: left;
-  width: 100%;
-}
-#grants_nav a{
-  color: #333333;
-  margin-right: 30px;
-}
-#grants_nav a:hover{
-  font-weight: 700;
+@-moz-keyframes gradient {
+  0%{background-position:0% 50%}
+  50%{background-position:100% 50%}
+  100%{background-position:0% 50%}
 }
-#grants_nav .selected{
-  font-weight: 1000;
-  color: #3f24f9;
+
+@keyframes gradient {
+  0%{background-position:0% 50%}
+  50%{background-position:100% 50%}
+  100%{background-position:0% 50%}
 }
diff --git a/app/grants/templates/grants/index.html b/app/grants/templates/grants/index.html
index 6c18449c11e..2edcd71a600 100644
--- a/app/grants/templates/grants/index.html
+++ b/app/grants/templates/grants/index.html
@@ -26,8 +26,8 @@
     <div class="container-fluid header dash">
       {% include 'shared/top_nav.html' with class='d-md-flex' %}
       {% include 'grants/nav.html' %}
-      <div class="container py-5">
-        <div class="grants-hero white">
+      <div class="container py-5 ">
+        <div class="grants-hero white my-5">
           <div class="row">
             <div class="col-12 col-md-6 order-md-last mb-5 mb-md-0">
               <div class="embed-responsive embed-responsive-16by9">
@@ -35,8 +35,8 @@
               </div>
             </div>
             <div class="m-auto col-12 col-md-6 offset-lg-1 col-lg-5">
-              <h1 class="font-title-xl">{% trans 'Provide sustainable funding for Open Source with Gitcoin Grants' %}</h1>
-              <p class="my-4 pt-1 font-subheader">
+              <h1 class="font-title-xl font-weight-semibold">{% trans 'Provide sustainable funding for Open Source with Gitcoin Grants' %}</h1>
+              <p class="my-4 pt-1 font-header">
                 {% blocktrans %}
                 Gitcoin Grants, powered by the <a target="_blank" rel="noopener noreferrer" href="http://1337alliance.com/">EIP 1337 standard</a>
                 , are a fast, easy and secure way to provide recurring token contributions to your favorite OSS maintainers. <br/><br/>
@@ -53,27 +53,32 @@ <h1 class="font-title-xl">{% trans 'Provide sustainable funding for Open Source
       </div>
     </div>
 
-      <div class="container-fluid py-5 grants-matching">
-        <div class="container">
-          <div class="row">
+    <div class="container-fluid py-5 grants-matching">
+      <div class="container">
+        <div class="row">
           <div class="col-md-6">
-            <h2>Round 2 of Matching is now closed! Round 3 details coming soon.</h2>
-            <h5>We will be announcing the match amounts soon..</h5>
-            <p>A special thanks to the following partners who have offered to match contributions to Gitcoin Grants.  <a href="https://medium.com/gitcoin/gitcoin-grants-50k-oss-fund-e20e09dc2110">(Read Announcement Here)</a></p>
-
-              {% if not user.is_authenticated %}
-                <a class="btn btn-gc-blue" href="{% url 'social:begin' 'github' %}?next={{ request.get_full_path }}">{% trans 'Become a Matching Partner' %}</a>
-              {% else %}
-                <div class="btn btn-gc-blue" onclick="processPayment()">
-                  {% trans 'Become a Matching Partner' %}
-                </div>
-              {% endif %}
-
+            <h2 class="mb-1">Round 3 details coming soon.</h2>
+            <h3 class="mb-3 font-header">We will be announcing the match amounts soon!</h5>
+            <h2 class="mb-3 font-title">Round 2 of Matching is now closed!</h2>
+            <p class="mb-4">
+              A special thanks to the following partners who have offered to match contributions to Gitcoin Grants.
+              <a href="https://medium.com/gitcoin/gitcoin-grants-50k-oss-fund-e20e09dc2110">(Read Announcement Here)
+              </a>
+            </p>
 
-            </div>
-          <div class="col-md-6"><img src="{% static 'v2/images/grants/robots.png' %}" class="rounded mx-auto d-block"/></div>
+            {% if not user.is_authenticated %}
+              <a class="btn btn-gc-blue" href="{% url 'social:begin' 'github' %}?next={{ request.get_full_path }}">{% trans 'Become a Matching Partner' %}</a>
+            {% else %}
+              <div class="btn btn-gc-blue" onclick="processPayment()">
+                {% trans 'Become a Matching Partner' %}
+              </div>
+            {% endif %}
           </div>
-          {% if current_partners or past_partners %}
+          <div class="col-md-6">
+            <img src="{% static 'v2/images/grants/robots.png' %}" class="rounded mx-auto d-block"/>
+          </div>
+        </div>
+        {% if current_partners or past_partners %}
           <ul class="nav nav-tabs my-5" role="tablist">
             <li class="nav-item">
               <a class="nav-link nav-line active" id="currentpartners-tab" data-toggle="tab" href="#currentpartners" role="tab" aria-controls="currentpartners" aria-selected="true">Current Partners</a>
@@ -85,26 +90,23 @@ <h5>We will be announcing the match amounts soon..</h5>
             </li>
           </ul>
 
-
           <div class="tab-content">
-              <div class="tab-pane fade show active" id="currentpartners" role="tabpanel" aria-labelledby="currentpartners-tab">
-                {% if current_partners|length == 0 %}
-                  No current partners.
-                {% endif %}
-                {% for current_partner in current_partners %}
-                  <div style="text-align:center; display: inline-block; padding: 10px;">
-                    <h5>
-                      <a href="/profile/{{current_partner.profile.handle}}">
-                        @{{current_partner.profile.handle}}
-                      </a>
-                    </h5>
-                      <a href="/profile/{{current_partner.profile.handle}}">
-                        <img style="max-width:100px; border-radius: 50px;" src="/dynamic/avatar/{{current_partner.profile.handle}}">
-                      </a>
-                    <p>${{current_partner.amount|floatformat}}</p>
-                  </div>
-                {% endfor %}
-              </div>
+            <div class="tab-pane fade show active" id="currentpartners" role="tabpanel" aria-labelledby="currentpartners-tab">
+              {% if current_partners|length == 0 %} No current partners.{% endif %}
+              {% for current_partner in current_partners %}
+                <div style="text-align:center; display: inline-block; padding: 10px;">
+                  <h5>
+                    <a href="/profile/{{current_partner.profile.handle}}">
+                      @{{current_partner.profile.handle}}
+                    </a>
+                  </h5>
+                    <a href="/profile/{{current_partner.profile.handle}}">
+                      <img style="max-width:100px; border-radius: 50px;" src="/dynamic/avatar/{{current_partner.profile.handle}}">
+                    </a>
+                  <p>${{current_partner.amount|floatformat}}</p>
+                </div>
+              {% endfor %}
+            </div>
 
             <div class="tab-pane fade" id="pastpartners" role="tabpanel" aria-labelledby="pastpartners-tab">
               {% for past_partner in past_partners %}
@@ -116,10 +118,9 @@ <h5>@{{past_partner.profile.handle}}</h5>
               {% endfor %}
             </div>
           </div>
-          {% endif %}
-        </div>
+        {% endif %}
       </div>
-
+    </div>
 
     <div class="container-fluid py-5 grants-search">
       <div class="container">