[#1017] Add discuss button to homepage

okfn · Apr 20, 2017 · 5eab492 · 5eab492
1 parent 56cbb22
commit 5eab492
Show file tree

Hide file tree

Showing 4 changed files with 191 additions and 18 deletions.
diff --git a/census/static/css/styles.css b/census/static/css/styles.css
diff --git a/census/static/css/styles.css.map b/census/static/css/styles.css.map
diff --git a/census/static/scss/_home.scss b/census/static/scss/_home.scss
@@ -1,4 +1,13 @@
 .home {
+  #header {
+    @media (min-width: $screen-sm-min) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 1;
+    }
+  }
   #home-about {
     $banner-bg-colour: $brand-primary;
     $banner-text-colour: $gray-dark;
@@ -8,16 +17,22 @@
     background-position: center top;
     background-size: 350px auto;
     margin-top: -5px;
-    padding: 20px 0 $grid-gutter-width 0;
+    padding-bottom: $grid-gutter-width;
     text-align: center;
     position: relative;
 
     @media (min-width: $screen-sm-min) {
+      min-height: 101vh;
+      padding-top: 100px;
       padding-bottom: 40px;
-    }
+      display: table;
+      width: 100%;
 
-    @media (min-width: $screen-md-min) {
-      margin-top: -20px;
+      .container {
+        display: table-cell;
+        vertical-align: middle;
+        width: auto;
+      }
     }
 
     &:before {
@@ -42,6 +57,13 @@
       @media (min-width: $screen-sm-min) {
         margin-top: 50px;
       }
+      @media (min-width: $screen-lg-min) {
+        font-size: 3.2em;
+      }
+    }
+
+    a {
+      color: inherit;
     }
 
     .btn {
@@ -69,6 +91,73 @@
       margin-right: auto;
       display: block;
       font-size: 1.1em;
+
+      @media (min-width: $screen-md-min) {
+        font-size: 1.4em;
+        max-width: 910px;
+      }
+      @media (min-width: $screen-lg-min) {
+        font-size: 1.6em;
+      }
+    }
+
+    .actions {
+      margin-top: $grid-gutter-width;
+
+      p {
+        font-size: 1.1em;
+      }
+
+      a {
+        padding: $grid-gutter-width/2;
+        margin: $grid-gutter-width/2;
+        display: block;
+        text-decoration: none;
+        border-radius: $border-radius-small;
+        border: solid 2px $gray-dark;
+        line-height: 1.2;
+
+        i {
+          float: left;
+          font-size: 36px;
+          width: 36px;
+          text-align: center;
+        }
+        .title,
+        .description {
+          margin: 0 0 0 50px;
+          display: block;
+          text-align: left;
+        }
+        .title {
+          font-weight: 700;
+          margin-bottom: 0.2em;
+        }
+        .description {
+          font-size: 0.8em;
+        }
+
+        &:hover {
+          background-color: $gray-dark;
+          color: #fff;
+        }
+      }
+      @media (min-width: $screen-sm-min) {
+        display: table;
+        width: 100%;
+        max-width: 910px;
+        margin-left: auto;
+        margin-right: auto;
+        table-layout: fixed;
+
+        p {
+          display: table-cell;
+          vertical-align: top;
+        }
+      }
+      @media (min-width: $screen-md-min) {
+        margin-top: $grid-gutter-width*2;
+      }
     }
   }
 

diff --git a/census/views/includes/godi-home.html b/census/views/includes/godi-home.html
@@ -1,16 +1,32 @@
 <section id="home-about">
   <div class="container">
     <h1>{{ gettext("Tracking the state of government open data.") }}</h1>
+    <p>
+      {{ gettext("The first initiative of its kind, the Global Open Data Index provides the most comprehensive snapshot available of the global state of open data.") }}
+    </p>
+    <div class="actions">
       <p>
-        {{ gettext("The first initiative of its kind, the Global Open Data Index provides the most comprehensive snapshot available of the global state of open data.") }}
+        <a href="{{ SITEURL }}/place/">
+          <i class="fa fa-table" aria-hidden="true"></i>
+          <span class="title">Compare countries</span>
+          <span class="description">Ranked table and map views of participating countries.</span>
+        </a>
       </p>
-      <a class="btn" href="{{ SITEURL }}/place/">
-        {{ gettext("Compare countries") }}
-      </a>
-
-      <a class="btn" href="{{ SITEURL }}/insights/">
-        {{ gettext("See insights") }}
-      </a>
+      <p>
+        <a href="https://discuss.okfn.org/c/open-data-index" rel="external">
+          <i class="fa fa-comments" aria-hidden="true"></i>
+          <span class="title">Discuss findings</span>
+          <span class="description">Discuss your findings in our forum.</span>
+        </a>
+      </p>
+      <p>
+        <a href="{{ SITEURL }}/insights/">
+          <i class="fa fa-lightbulb-o" aria-hidden="true"></i>
+          <span class="title">Get the insights</span>
+          <span class="description">Insights from local and thematic perspectives.</span>
+        </a>
+      </p>
+    </div>
   </div>
 </section>