Merge pull request #3 from keitaroinc/create-hero-section

Create design for hero section

ckanext/kepa/assets/scss/_variables.scss

@@ -1,8 +1,11 @@
 $primary-color: #1C768F;
 $secondary-color: #FA991C;
+$tertiary-color: #FAF3F1;
 $text-primary: #032539;
 $neutral: #FBF3F2;
 $white: white;
 
 $bold: bolder;
-$bold-size: larger;
+$bold-size: larger;
+$xxl-size: xx-large;
+$xxxl-size: xxx-large;

ckanext/kepa/assets/scss/kepa.scss

@@ -1,5 +1,11 @@
 @import "variables";
 
+.center-flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .masthead {
     padding: 0 !important;
     background-color: $primary-color;
@@ -32,4 +38,112 @@
 }
 .navbar-nav.ms-auto.mb-2.mb-lg-0 li {
     text-transform: capitalize;
-  }
+}
+
+.homepage .hero {
+    min-height: 400px;
+    background: url(/main-kepa-img.jpg) center/cover no-repeat;
+}
+
+.homepage .hero-placeholder .container{
+    min-height: 600px;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.homepage .hero-placeholder .container img{
+    max-height: 300px;
+}
+
+.heading {
+    color: $white;
+    font-size: $xxl-size;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.search-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+}
+
+.btn-main-search {
+    background-color: $primary-color !important;
+    margin: 0 !important;
+    top: 0 !important;
+    height: 55px !important;
+    width: 55px;
+    padding: 0 !important;
+    right: 0 !important;
+    border: none;
+    border-radius: 0;
+}
+
+.search-form{
+    margin-bottom: 0;
+    padding: 0;
+}
+
+.form-control {
+    border: none;
+    border-radius: 0;
+}
+
+.tags{
+    background-color: $white;
+    height: 55px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+}
+
+.tags h4{
+    margin: 0 !important;
+    padding-left: 10px;
+}
+
+.tags a{
+    margin-bottom: 0 !important;
+    margin-left: 10px;
+}
+
+.card{
+    width: 200px;
+    align-items: center;
+    text-align: center;
+    background-color: $secondary-color;
+}
+
+.card a{
+    color: $white;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;;
+    text-decoration: none;
+}
+
+.card a h1{
+    font-size: $xxxl-size;
+    margin-bottom: 0;
+}
+
+.module-stats-center-flex {
+    display: flex;
+    justify-content: space-evenly;
+    height: 100%;
+}
+
+.module-feeds {
+    min-height: 300px;
+    background-color: $tertiary-color !important;
+}
+
+.module-feeds .container{
+    height: 200px;
+}

ckanext/kepa/templates/home/about.html

@@ -0,0 +1,24 @@
+{% extends "page.html" %}
+
+{% block subtitle %}{{ _('About') }}{% endblock %}
+
+{% block breadcrumb_content %}
+  <li class="active">{% link_for _('About'), named_route='home.about' %}</li>
+{% endblock %}
+
+{% block primary %}
+  <article class="module" role="main">
+    <div class="module-content">
+      {% block about %}
+        {% if g.site_about %}
+          {{ h.render_markdown(g.site_about) }}
+        {% else %}
+          <h1 class="page-heading">{{ _('About') }}</h1>
+          {% snippet 'home/snippets/about_text.html' %}
+        {% endif %}
+      {% endblock %}
+    </div>
+  </article>
+{% endblock %}
+
+{% block secondary %}{% endblock %}

ckanext/kepa/templates/home/index.html

@@ -0,0 +1,18 @@
+{% extends "page.html" %}
+{% set homepage_style = ( g.homepage_style or '1' ) %}
+
+{% block subtitle %}{{ _("Welcome") }}{% endblock %}
+
+{% block maintag %}{% endblock %}
+{% block toolbar %}{% endblock %}
+
+{% block content %}
+  <div class="homepage layout-{{ homepage_style }}">
+    <div id="content" class="container">
+      {{ self.flash() }}
+    </div>
+    {% block primary_content %}
+      {% snippet "home/layout{0}.html".format(homepage_style), search_facets=search_facets %}
+    {% endblock %}
+  </div>
+{% endblock %}

ckanext/kepa/templates/home/layout1.html

@@ -0,0 +1,40 @@
+<div role="main">
+  <div class="main hero">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6">
+          {% block promoted %}
+            {% snippet 'home/snippets/promoted.html' %}
+          {% endblock %}
+        </div>
+        <div class="col-md-6">
+          {% block search %}
+            {% snippet 'home/snippets/search.html', search_facets=search_facets %}
+          {% endblock %}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="main module-feeds">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6">
+          {# Note: this featured_group block is used as an example in the theming
+             tutorial in the docs! If you change this code, be sure to check
+             whether you need to update the docs. #}
+          {# Start template block example. #}
+          {% block featured_group %}
+            {% snippet 'home/snippets/featured_group.html' %}
+          {% endblock %}
+          {# End template block example. #}
+        </div>
+        <div class="col-md-6">
+          {% block featured_organization %}
+            {% snippet 'home/snippets/featured_organization.html' %}
+          {% endblock %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>