Rework the design of the landing page

Signed-off-by: Max Magorsch <arzano@gentoo.org>

3 files changed, 59 insertions, 69 deletions

diff --git a/web/packs/src/stylesheets/index.scss b/web/packs/src/stylesheets/index.scss
index 00db929..7bf9384 100644
--- a/web/packs/src/stylesheets/index.scss
+++ b/web/packs/src/stylesheets/index.scss
@@ -1,7 +1,7 @@
 .site-welcome {
-  font-size: 2.5em;
+  font-size: 3.25em;
   text-align: center;
-  margin-bottom: 1em;
+  margin-bottom: 0.75em;
 
   @media screen and (max-width: 767px) {
     font-size: 1.75em;
diff --git a/web/templates/index/show.tmpl b/web/templates/index/show.tmpl
index 99ed026..2598cd7 100644
--- a/web/templates/index/show.tmpl
+++ b/web/templates/index/show.tmpl
@@ -9,76 +9,60 @@
         <div class="col-12">
 
 
-<div class="jumbotron">
-    <h2 class="site-welcome stick-top">Welcome to the Home of <span class="text-primary"> {{.PackageCount}} </span> Gentoo Packages</h2>
+            <div class="jumbotron mb-3" style="background: none!important;">
+                <h2 class="site-welcome stick-top">Welcome to the Home <br/>
+                    of <span class="text-primary"> {{.PackageCount}} </span> Gentoo Packages</h2>
+
+                <form action="/packages/search" method="get">
+                    <div class="typeahead-container px-5">
+                        <div class="typeahead-field">
+                    <span class="typeahead-query" style="font-size: 1.1em; height: 2.3em;">
+                      <input class="rounded-left" style="font-size: 1.1em; height: 2.3em;border-right: 0px;" id="q" name="q" type="search" autocomplete="off" placeholder="Find Packages" aria-label="Find Packages" autofocus>
+                    </span>
+
+                            <span class="typeahead-button" style="font-size: 1.1em!important; height: 2.3em!important;border-left: 0px;">
+                      <button style="border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; font-size: 1.1em!important; height: 2.3em!important;border-left: 0px;box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);!important;" type="submit" title="Find" aria-label="Find">
+                        <span class="typeahead-search-icon"></span><span class="sr-only">Find</span>
+                      </button>
+                    </span>
+                        </div>
+                    </div>
+                </form>
+                <br/>
+                <small class="mt-4 px-5 text-muted" style="font-size: 12px;">This is the new packages.gentoo.org site. If anything isn't working as expected, <a href="mailto:gpackages@gentoo.org">contact us</a>.</small><br>
+                <small class="px-5 text-muted" style="font-size: 12px;">You can search by <a href="/packages/search?q=sys-kernel/gentoo-sources">atom</a>, <a href="/packages/search?q=sys-kernel">category</a>, <a href="/packages/search?q=gentoo-sources">name</a>, <a href="/packages/search?q=kernel@gentoo.org">maintainer</a> or <a href="/packages/search?q=x11-wm%20haskell@gentoo.org">combine</a> queries. Results similar to your query will be found as well.</small>
 
-    <form action="/packages/search" method="get">
-        <div class="typeahead-container">
-            <div class="typeahead-field">
-        <span class="typeahead-query">
-          <input id="q" name="q" type="search" autocomplete="off" placeholder="Find Packages" aria-label="Find Packages" autofocus>
-        </span>
-
-                <span class="typeahead-button">
-          <button type="button" onclick="$('#searchHelp').modal('show')" title="Help" aria-label="Help">
-            <span class="fa fa-question" style="font-size: 15px;"></span><span class="sr-only">Help</span>
-                    </button>
-        </span>
-                <span class="typeahead-button">
-          <button type="submit" title="Find" aria-label="Find">
-            <span class="typeahead-search-icon"></span><span class="sr-only">Find</span>
-          </button>
-        </span>
             </div>
-        </div>
-    </form>
-    <br/>
-    <small class="mt-4 text-muted" style="font-size: 12px;">This is the new packages.gentoo.org site. If anything isn't working as expected, <a href="mailto:gpackages@gentoo.org">contact us</a>.<br>
-        You can search by <a href="/packages/search?q=sys-kernel/gentoo-sources">atom</a>, <a href="/packages/search?q=sys-kernel">category</a>, <a href="/packages/search?q=gentoo-sources">name</a>, <a href="/packages/search?q=kernel@gentoo.org">maintainer</a> or <a href="/packages/search?q=x11-wm%20haskell@gentoo.org">combine</a> queries. Results similar to your query will be found as well.</small>
-
-</div>
-
-
-<div class="card mb-4">
-    <div class="card-header">
-        <h4 class="mb-0">
-            <span class="fa fa-fw fa-history"></span>
-            <a class="text-dark" href="/packages/added">Added Packages</a>
-        </h4>
-    </div>
-    <div class="table-responsive">
-        <table class="table table-striped mb-0">
-        <tbody>
-        {{range .AddedPackages}}
-            <tr>
-                <td>
-                    <a href="/packages/{{.Atom}}">
-                        <span class="text-muted">{{.Category}}</span>/<strong>{{.Name}}</strong>
-                    </a>
-                </td>
-                <td>{{(index .Versions 0).Description}}</td>
-            </tr>
-        {{end}}
-        </tbody>
-        </table>
-    </div>
-</div>
 
+            <h3 class="mb-2"><span class="fa fa-fw fa-history"></span>
+                <a class="text-dark" href="/packages/added">Added Packages</a></h3>
+            <div class="card mb-4">
+                <div class="table-responsive">
+                    <table class="table table-striped mb-0">
+                    <tbody>
+                    {{range .AddedPackages}}
+                        <tr>
+                            <td>
+                                <a href="/packages/{{.Atom}}">
+                                    <span class="text-muted">{{.Category}}</span>/<strong>{{.Name}}</strong>
+                                </a>
+                            </td>
+                            <td>{{(index .Versions 0).Description}}</td>
+                        </tr>
+                    {{end}}
+                    </tbody>
+                    </table>
+                </div>
+            </div>
 
 
-<div class="card mb-4">
-    <div class="card-header">
-        <h4 class="mb-0">
-            <span class="fa fa-fw fa-asterisk"></span>
-            <a class="text-dark" href="/packages/updated">Updated Packages</a>
-        </h4>
-    </div>
-    <ul class="list-group">
-        {{range .UpdatedPackages}}
-            {{template "changedversion" .}}
-        {{end}}
-    </ul>
-</div>
+            <h3 class="pt-3 mb-2"><span class="fa fa-fw fa-asterisk"></span>
+            <a class="text-dark" href="/packages/updated">Updated Packages</a></h3>
+            <ul class="list-group">
+                {{range .UpdatedPackages}}
+                    {{template "changedversion" .}}
+                {{end}}
+            </ul>
 
         </div>
     </div>
diff --git a/web/templates/layout/footer.tmpl b/web/templates/layout/footer.tmpl
index e527e47..280d137 100644
--- a/web/templates/layout/footer.tmpl
+++ b/web/templates/layout/footer.tmpl
@@ -21,14 +21,14 @@
                 </div>
             </div>
             <div class="row">
-                <div class="col-2 col-sm-3 col-md-2">
+                <div class="col-2 col-sm-2 col-md-2">
                     <ul class="footerlinks three-icons">
                         <li><a href="https://twitter.com/gentoo" title="@Gentoo on Twitter"><span class="fa fa-twitter fa-fw"></span></a></li>
                         <li><a href="https://www.facebook.com/gentoo.org" title="Gentoo on Facebook"><span class="fa fa-facebook fa-fw"></span></a></li>
                         <li><a href="https://www.reddit.com/r/Gentoo/" title="Gentoo on Reddit"><span class="fa fa-reddit-alien fa-fw"></span></a></li>
                     </ul>
                 </div>
-                <div class="col-10 col-sm-9 col-md-10">
+                <div class="col-8 col-sm-8 col-md-8">
                     <strong>&copy; 2001&ndash;2020 Gentoo Foundation, Inc.</strong><br>
                     <small>
                         Gentoo is a trademark of the Gentoo Foundation, Inc.
@@ -37,6 +37,12 @@
                         The <a href="https://www.gentoo.org/inside-gentoo/foundation/name-logo-guidelines.html">Gentoo Name and Logo Usage Guidelines</a> apply.
                     </small>
                 </div>
+                <div class="col-2 col-sm-2 col-md-2 text-right">
+                    <strong><a class="text-dark" href="https://www.gentoo.org/inside-gentoo/contact/">Contact</a></strong><br>
+                    <small>
+                        {{ .Version }}
+                    </small>
+                </div>
             </div>
         </div>
     </footer>