Added a more pretty organizations.

_data/organizations.yml

@@ -0,0 +1,50 @@
+- name: ANCIR
+  description: ANCIR strengthens African investigative journalism by improving the expertise, sustainability and production capacity in muckraking newsrooms.
+  img: /img/logos/ancir-small.jpg
+  url: https://investigativecenters.org/
+  dc_group: ancir
+- name: Mail & Guardian
+  description: The Mail & Guardian is South Africa's oldest quality news source on the web and Africa's first online newspaper, offering breaking news, and is reputed internationally for its quality content.
+  img: /img/logos/orgs/mg.png
+  url: http://mg.co.za
+  dc_group: mail-guardian
+- name: Oxpeckers
+  description: Oxpeckers is Africa’s first journalistic investigation unit focusing on environmental issues.
+  img: /img/logos/orgs/oxpeckers.png
+  url: http://oxpeckers.org
+  dc_group: oxpeckers
+- name: Daily Trust
+  description: Our Vision is to be a world class media company that earns public trust. Our mission is to disseminate credible information for the good of all stakeholders.
+  img: /img/logos/orgs/daily-trust.png
+  url: http://dailytrust.com.ng/
+  dc_group: daily-trust
+- name: Sahara Reporters
+  description: Sahara Reporters is an outstanding, groundbreaking website that encourages citizen journalists to report ongoing corruption and government malfeasance in Africa.
+  img: /img/logos/orgs/sr.png
+  url: http://oxpeckers.org
+  dc_group: sahara-reporters
+- name: PesaCheck
+  description: Decoding the numbers that shape our world. Citizens need accurate information to make decisions. PesaCheck is a fact-checking initiative to verify often confusing numbers quoted by public figures across East Africa, supported by International Budget Partnership and Code for Africa affiliates in Kenya, Tanzania & Uganda.
+  img: /img/logos/orgs/pesacheck.png
+  url: https://pesacheck.org
+  dc_group: pesacheck
+- name: Ndifuna Ukwazi
+  description: We are a group of activists that use research and strategic litigation to campaign for justice and equality in poor and working class communities. We contribute to building a movement in South Africa by supporting new organisations, mentoring young leaders and teaching activists.
+  img: /img/logos/orgs/nu.jpg
+  url: http://nu.org.za
+  dc_group: ndifuna-ukwazi
+- name: Code for South Africa
+  description: Code for South Africa is a non-profit civic technology lab. We use data and technology to promote informed decision-making that drives social change. Our base of operations is Codebridge in Cape Town where we are helping to create a civic technology movement.
+  img: /img/logos/orgs/code4sa.png
+  url: http://code4sa.org
+  dc_group: code4sa
+- name: Carte Blanche
+  description: Carte Blanche is a South African investigative journalism television series that airs on M-Net during prime time viewing on Sunday nights, currently at 19:00.
+  img: /img/logos/orgs/carteblanche.jpg
+  url: https://carteblanche.dstv.com
+  dc_group: carteblanche
+- name: Parliamentary Monitoring Group
+  description: PMG provides accurate, objective, and current info on all parliamentary committee proceedings & general parliamentary activity.
+  img: /img/logos/orgs/pmg-za.png
+  url: https://pmg.org.za
+  dc_group: pmg-za

_layouts/default.html

@@ -7,8 +7,8 @@
         <meta name="description" content="{{ site.description }}">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <link rel="apple-touch-icon" href="apple-touch-icon.png">
-        <link rel="icon" href="favicon.png" type="image/png">
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+        <link rel="icon" href="/favicon.png" type="image/png">
         <!-- Place favicon.ico in the root directory -->
 
         <script type="text/javascript">
@@ -33,14 +33,14 @@
         <meta property="og:description" content="{{ site.description }}" />
 
 
-        <link rel="stylesheet" href="css/normalize.css">
-        <link rel="stylesheet" href="css/main.css">
+        <link rel="stylesheet" href="/css/normalize.css">
+        <link rel="stylesheet" href="/css/main.css">
 
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/css/vendor/bootstrap/css/bootstrap.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/css/flat-ui.css">
-        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css">
+        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
 
-        <link rel="stylesheet" type="text/css" href="css/style.css">
+        <link rel="stylesheet" type="text/css" href="/css/style.css">
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
     </head>
@@ -57,15 +57,15 @@
         {% include footer.html %}
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/js/vendor/jquery.min.js"></script>
-        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
+        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.4.min.js"><\/script>')</script>
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
 
-        <script type="text/javascript" src="js/briefcase/briefcase.js"></script>
-        <script type="text/javascript" src="js/briefcase/search-bar.js"></script>
-        <script type="text/javascript" src="js/briefcase/search.js"></script>
+        <script type="text/javascript" src="/js/briefcase/briefcase.js"></script>
+        <script type="text/javascript" src="/js/briefcase/search-bar.js"></script>
+        <script type="text/javascript" src="/js/briefcase/search.js"></script>
 
         <script type="text/javascript">
             {% if site.dc_url %}

css/style.scss

@@ -21,6 +21,8 @@ a, .btn-link {
   }
 }
 
+img { max-width: 100%; }
+
 .btn-link.disabled, .btn-link[disabled] {
   background-color: transparent;
   color: #bdc3c7;
@@ -82,6 +84,64 @@ a, .btn-link {
 }
 
 
+footer {
+  a {
+    &:hover, &:focus {
+      color: #D61E1E;
+    }
+  }
+  .ancir-footer {
+    background: #303030 url("/img/bg/ancir.jpg") no-repeat top left;
+    background-size: auto 500px;
+    background-color: #303030;
+    background-position: -20px;
+    padding-top: 100px;
+    padding-bottom: 100px;
+    .sociallinks {
+      text-decoration: none;
+    }
+    .col-md-2, .col-md-3, .col-md-4 {
+      background-color: rgba(48,48,48,0.7);
+      h1, h2, h3, h4 {
+        margin-top: 0;
+      }
+    }
+
+    .btn {
+      background-color: #9aa4af;
+      &:hover, &:focus {
+        background-color: #D61E1E;
+      }
+    }
+  }
+
+  .credit {
+    padding-top: 30px;
+    padding-bottom: 20px;
+
+    .logos {
+      img {
+        height: 50px;
+        margin: 10px;
+        -webkit-filter: grayscale(100%);
+        -o-filter: grayscale(100%);
+        filter: grayscale(100%);
+      }
+    }
+  }
+
+  .footer-links {
+    margin-bottom: 20px;
+    a {
+      margin: 0 10px;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+
 
 /* -----------------------------------------------------------------------------
  * Home Page
@@ -223,65 +283,23 @@ a, .btn-link {
   padding-top: 71px;
 }
 
-
 /* -----------------------------------------------------------------------------
- * Footer
+ * Page: Organizations
  * -----------------------------------------------------------------------------
  */
 
-footer {
-  a {
-    &:hover, &:focus {
-      color: #D61E1E;
-    }
+.page.organizations{
+  section.content {
+    padding-bottom: 50px;
   }
-  .ancir-footer {
-    background: #303030 url("/img/bg/ancir.jpg") no-repeat top left;
-    background-size: auto 500px;
-    background-color: #303030;
-    background-position: -20px;
-    padding-top: 100px;
-    padding-bottom: 100px;
-    .sociallinks {
-      text-decoration: none;
-    }
-    .col-md-2, .col-md-3, .col-md-4 {
-      background-color: rgba(48,48,48,0.7);
-      h1, h2, h3, h4 {
-        margin-top: 0;
-      }
-    }
 
-    .btn {
-      background-color: #9aa4af;
-      &:hover, &:focus {
-        background-color: #D61E1E;
-      }
+  .org {
+    img.media-object.logo {
+      max-width: 100px;
     }
-  }
-
-  .credit {
-    padding-top: 30px;
-    padding-bottom: 20px;
-
-    .logos {
-      img {
-        height: 50px;
-        margin: 10px;
-        -webkit-filter: grayscale(100%);
-        -o-filter: grayscale(100%);
-        filter: grayscale(100%);
-      }
+    .links span {
+      margin: 0 5px;
     }
   }
 
-  .footer-links {
-    margin-bottom: 20px;
-    a {
-      margin: 0 10px;
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-  }
 }

index.html

@@ -39,9 +39,9 @@ <h1>{{ site.sub_title }}</h1>
   <div class="row callout-boxes">
     <div class="col-sm-6 first bg-primary">
       <p>PUBLIC DOCUMENTS FROM</p>
-      <h3>47 Organisations</h3>
+      <h3>47 Organizations</h3>
       <p><small>No. of Contributors:</small> 137</p>
-      <a href="/search.html" class="btn btn-sm btn-default">View all Organisations <i class="fui-arrow-right"></i></a>
+      <a href="/organizations.html" class="btn btn-sm btn-default">View all Organizations <i class="fui-arrow-right"></i></a>
     </div>
     <div class="col-sm-6 second">
       <p>COLLECTION OF</p>

organizations.html

@@ -0,0 +1,29 @@
+---
+layout:     page
+body-class: page organizations
+
+title: Organizations
+---
+
+<section class="content">
+  {% for org in site.data.organizations %}
+    <div class="row org">
+      <div class="col-sm-2">
+        <a href="{{ org.url }}">
+          <img class="media-object logo" src="{{ org.img }} " alt="{{ org.name }}">
+        </a>
+      </div>
+      <div class="col-sm-10 description">
+        <h4>{{ org.name }}</h4>
+        <p>{{ org.description }}</p>
+        <p class="links">
+          <a href="https://dc.sourceafrica.net/search/Group:%20{{ org.dc_group }}" target="_blank" rel="noopener"><i class="fa fa-caret-right"></i> Documents on sourceAFRICA</a>
+          <br/>
+          <a href="{{ org.url }}" target="_blank" rel="noopener"><i class="fa fa-caret-right"></i> Organization website</i></a>
+        </p>
+        <hr/>
+      </div>
+    </div>
+  {% endfor %}
+</section>
+