Merge pull request #38 from keitaroinc/style-improvments-ckan

Style improvments ckan

ckanext/alisea/assets/css/alisea.css

@@ -42,17 +42,22 @@
 .masthead .main-navbar ul {
     flex-wrap: wrap;
     justify-content: center;
-    gap: 12px;
 }
 
 .masthead .main-navbar ul li a {
     text-transform: uppercase;
     color: #41A7D4;
     font-size: 1rem;
+    padding: 8px !important;
     border-radius: 0 !important;
 
 }
 
+.hero-conatiner {
+    min-height: 500px;
+    height: 100%;
+}
+
 .masthead .main-navbar ul li:focus a, .masthead .main-navbar ul li.active a {
     background-color: transparent !important;
     font-weight: 900;
@@ -135,7 +140,7 @@ a.tag:hover {
 
 .logo {
     width: 100%;
-    max-width: 350px;
+    max-width: 300px;
 }
 
 .logo img {
@@ -226,13 +231,13 @@ a.tag:hover {
     max-width: 300px;
     font-weight: 900 !important;
     margin-bottom: 2rem;
-    color:#2D7C3D;
+    color:#ffff;
 }
 
 .hero-section-description {
     font-size: 1.2rem;
     font-weight: 600;
-    color: #2D7C3D;
+    color: #ffff;
     max-width: 350px;
 }
 

ckanext/alisea/templates/page.html

@@ -18,11 +18,10 @@
   {# The content block allows you to replace the content of the page if needed #}
   {%- block content %}
     {% block maintag %}<div class="main">{% endblock %}
-      <div class="d-flex flex-wrap offset-xl-1 align-items-center">
+      <!-- <div class="d-flex flex-wrap offset-xl-1 align-items-center">
         {% if (request.path == "/dataset") or (request.path == "/dataset/") %}
           <div class="col-md-3 col-sm-12 col-xs-12 title-container p-2">
-            <h1 class="hero-section-title">Agroecology Library</h1>
-            <p class="hero-section-description">Our repository of literature on agroecology on Southeast Asia includes more than 750 documents.</p>
+            
           </div>
           <div class="col-md-9 col-sm-12 map-conatiner">
             {# Uncoment this section to add spatial query map search on frontpage
@@ -31,7 +30,18 @@ <h1 class="hero-section-title">Agroecology Library</h1>
             <img src="/images/library_frontpage.jpeg" alt="Frontpage Alisea dataset library image" width="100%">
           </div>
           {% endif %}
+      </div> -->
+      {% if (request.path == "/dataset") or (request.path == "/dataset/") %}
+      <header class="font-page-header" style="background-image: url('/images/library_frontpage.png');background-size: cover;background-position: center; min-height: 500px;">
+        <div class="offset-xl-1">    
+            <div class="d-flex align-items-center text-white header-home px-3 w-100 hero-conatiner">
+              <div class="hero-title-container text-white">
+                <h1 class="hero-section-title">Agroecology Library</h1>
+                <p class="hero-section-description">Our repository of literature on agroecology on Southeast Asia includes more than 750 documents.</p>                </div>
+            </div>
         </div>
+      </header>
+      {% endif %}
       <div id="content" class="container-fluid col-xl-10 offset-xl-1 pt-4">
         {% block main_content %}
           {% block flash %}