Merge pull request #173 from kellydesent/homepage-styling

homepage styling changes

ckanext/ioos_theme/public/ioos_theme.css

@@ -1,26 +1,38 @@
 .account-masthead {
-    background-color: #007396;
+    background-color: #ffffff;
+}
+
+body {
+  background: none !important;
 }
 
 .header-image .logo img {
-  max-height: 55px;
+  max-height: 45px;
+  margin-top: 5px;
 }
 
 .masthead { 
-  background: #ffffff;
-  color: #003087;
+  background: #003087;
+  color: #55D6F8;
 }
 
 .masthead .nav > li > a, .masthead .nav > li > a:focus, .masthead .nav > li > a:hover, .masthead .nav > .active > a, .masthead .nav > .active > a:hover, .masthead .nav > .active > a:focus {
-  color: #003087;
+  color: #55D6F8;
+  font-size: 18px;
+  text-transform: uppercase;
 }
 
 .masthead .navigation .nav-pills li a:hover, .masthead .navigation .nav-pills li.active a {
-  background-color: #D1DEE2;
+  background-color: #122b4d;
 }
 
 .site-footer {
-  background: #007396;
+  background: url(img/footer.png) !important;
+  padding: 56px 0px !important;
+  /* right: 0;
+  left: 0;
+  bottom: 0;
+  position: absolute; */
 }
 
 
@@ -137,3 +149,129 @@ section.browse-graphic img.browse-graphic-img {
 .below-search {
   padding-top: 50px;
 }
+
+.hero {
+  background: #ffffff !important;
+}
+
+.masthead .debug {
+  display: none !important;
+}
+
+.homepage .module-search .module-content {
+  background-color: #003087;
+}
+
+.homepage .module-search .tags {
+  background-color: #0084B6;
+}
+
+.account-masthead .account ul li a {
+  color: #003087 !important;
+}
+
+.account-masthead .account ul li {
+  border-left: 1px solid #ffffff;
+}
+
+.account-masthead .account ul li a:hover {
+  background-color: #003087 !important;
+  color: #ffffff !important;
+}
+
+.footer-title {
+  color: #ffffff;
+  padding-bottom: 2px;
+  font-size: 24px;
+  font-weight: 600;
+  font-family: 'Roboto Slab',Times,serif!important;
+}
+
+.footer-links a {
+  color: #55D6F8;
+  text-decoration: none;
+}
+
+.footer-links a:hover {
+  color: #ffffff;
+}
+
+.contact-us {
+  border: 1px solid #55D6F8;
+  border-radius: 0!important;
+  padding: 8px 23px!important;
+}
+
+.footer-links p {
+  color: #ffffff;
+}
+
+[role=main] {
+  background: -moz-linear-gradient(#ffffff80, #fff), url(img/glider-underwater2.jpg) !important; 
+  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgb(255, 255, 255)), url(img/glider-underwater2.jpg) !important;
+  background-position: center !important;
+  background-repeat: no-repeat !important;
+  background-size: 100% 100% !important;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+.homepage .links ul {
+  display: inline;
+  margin: 0px;
+}
+
+.homepage .links li {
+  display: inline;
+  padding: 0px 5px;
+  border-right: solid 1px #ccc;
+}
+
+.homepage .links li:first-child {
+  border-left: solid 1px #ccc;
+}
+
+.homepage-table {
+  font-size: 14px;
+  text-align: left;
+  margin-bottom: 35px;
+}
+
+.homepage-table td, th {
+  max-width: 110px;
+  padding-right: 23px;
+}
+
+.links-img {
+  padding: 5px 0px;
+}
+
+/* @media (min-width: 768px) {
+  .homepage [role=main] {
+      padding: 0px !important;
+  }
+} */
+
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+[role=main] {
+  position: initial !important;
+  padding-bottom: 0px !important;
+  min-height: 75%;
+}
+.footer,
+.push {
+  height: 276px;
+}
+
+.homepage [role="main"] {
+  padding: 20px 0;
+  padding-bottom: 20px;
+  margin-bottom: 96px;
+}

ckanext/ioos_theme/templates/footer.html

@@ -0,0 +1,42 @@
+<footer class="site-footer">
+    <div class="container">
+      {% block footer_content %}
+      <div class="row">
+        <div class="footer-links">
+          {% block footer_nav %}
+            <div class="span4">
+                <h1 class="footer-title">Useful Links</h1>
+                <ul class="unstyled">
+                    {% block footer_links %}
+                      <li><a href="{{ h.url_for(controller='home', action='about') }}">{{ _('About {0}').format(g.site_title) }}</a></li>
+                      <li><a href="https://ioos.noaa.gov/">ioos.noaa.gov</a></li>
+                    {% endblock %}
+                    {% block footer_debug %}
+                        {% if g.debug %}
+                        {% include 'snippets/debug.html' %}
+                        {% endif %}
+                    {% endblock %}
+                </ul>
+            </div>
+            <div class="span4">
+                <h1 class="footer-title">Our Social Ocean</h1>
+                <ul class="unstyled">
+                    <li><a href="https://www.facebook.com/usioosgov">facebook.com/usioosgov</a></li>
+                    <li><a href="https://twitter.com/usioosgov">twitter.com/usioosgov</a></li>
+                </ul>
+            </div>
+            <div class="span4">
+                <img style="float: left;padding-right: 20px;padding-top: 5px;" src="../img/footer-img.png" alt="footer logo">
+                <p>U.S. Integrated Ocean Observing System Program</p>
+                <p>1315 East-West Highway,
+                        2nd Floor
+                        Silver Spring, MD 20910</p>
+                <a href="tel:301713-3290"> (301) 713-3290</a><br><br>
+                <a class="contact-us" href="mailto:ioos.catalog@noaa.gov" itemprop="email">Contact Us</a>
+            </div>
+
+          {% endblock %}
+      </div>
+      {% endblock %}
+    </div>
+  </footer>

ckanext/ioos_theme/templates/header.html

@@ -1,4 +1,5 @@
 {% ckan_extends %}
+<a href="https://ioos.us"><img src="img/IOOS.png" alt="IOOS logo"></a>
 {% block header_site_navigation %}
   <nav class="section navigation">
     <ul class="nav nav-pills">

ckanext/ioos_theme/templates/home/layout-ioos.html

@@ -1,9 +1,4 @@
 <div role="main" class="hero">
-  <div class="container">
-    {% block search %}
-      {% snippet 'home/snippets/search.html' %}
-    {% endblock %}
-  </div>
   <div class="container below-search">
     <div class="row row2">
       <div class="span6 col2">
@@ -15,7 +10,35 @@
         {% block stats %}
           {% snippet 'home/snippets/stats.html' %}
         {% endblock %}
+        <br>
+        <div class="box links">
+          <div class="inner">
+            <h3>Resources</h3>
+            <table class="homepage-table">
+              <tr>
+                <th>Service Type<br></th>
+                <th>Service URL<br></th>
+                <th>Documentation</th>
+              </tr>
+              <tr>
+                <td>OGC CS-W<br><img class="links-img" src="img/ogc.png"></td>
+                <td><a href="https://data.ioos.us?csw">https://data.ioos.us?csw</a></td>
+                <td><a href="http://docs.pycsw.org/en/latest/csw-support.html">http://docs.pycsw.org/en/latest/csw-support.html</a></td>
+              </tr>
+              <tr>
+                <br>
+                <td>CKAN API<br><img class="links-img" src="img/ckan_logo.png"></td>
+                <td><a href="https://data.ioos.us/api/3/">https://data.ioos.us/api/3/</a></td>
+                <td><a href="http://docs.ckan.org/en/latest/api/">http://docs.ckan.org/en/latest/api/</a></td>
+              </tr>
+            </table>
+          </Div>
       </div>
     </div>
   </div>
+  <div class="container">
+    {% block search %}
+      {% snippet 'home/snippets/search.html' %}
+    {% endblock %}
+  </div>
 </div>