better buttons, a bit of copy

newsappsio · Jan 15, 2016 · db40ce4 · db40ce4
1 parent 8f37b3c
commit db40ce4
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 53 deletions.
diff --git a/_data/projects.yml b/_data/projects.yml
@@ -1,43 +1,17 @@
-- name: spam.js
-  client: <a href="https://github.com/newsappsio/spam">Open source</a>
-  code: newsappsio/spam
-  date: 24th December 2015
-  separator: true
-  description: >
-    Unleash the cartographical power of D3. <br />
-    Create complex maps within minutes with SVG and canvas.
-  showcase: >
-    <div class="row collage">
-        <div class="col-sm-8">
-            <img class="img-fluid projectImg m-b-1" data-action="zoom" data-src="/img/project3.jpg" alt="spam.js">
-        </div>
-        <div class="col-sm-4 u-zeroPadding">
-            <div class="col-xs-12">
-                <img class="img-fluid projectImg m-b-1" data-action="zoom" data-src="/img/project2.jpg" alt="spam.js"">
-            </div>
-            <div class="col-xs-12">
-                <img class="img-fluid projectImg m-b-1" data-action="zoom" data-src="/img/project1.jpg" alt="spam.js"">
-            </div>
-        </div>
-    </div>
-
 - name: Spain General Election Results
   client: <a href="http://www.elespanol.com">EL ESPAÑOL</a>
   page: /spain-general-election-results/
   url: http://datos.elespanol.com/elecciones-generales/resultados/congreso
   date: 20th December 2015
   separator: true
   description: >
-    Custom web app for <a href="http://www.elespanol.com">EL ESPAÑOL</a> to host the live results of the Spain general elections. <br />
-    We iterated on the map design and a simple interface.
+    Carefully designed, this is our best newsapp to date. <br />
+    <i>Stack: d3.js, Canvas, Protobuf, TopoJSON and Bootstrap.</i>
   showcase: >
     <div class="row collage">
-        <div class="col-sm-6">
+        <div class="col-sm-12">
             <img class="img-fluid projectImg m-b-1" data-action="zoom" data-src="/img/project3.jpg" alt="spam.js">
         </div>
-        <div class="col-sm-6">
-            <img class="img-fluid projectImg m-b-1" data-action="zoom" data-src="/img/project2.jpg" alt="spam.js">
-        </div>
         <div class="col-sm-6">
             <img class="img-fluid projectImg m-b-1" data-action="zoom" data-src="/img/project1.jpg" alt="spam.js">
         </div>
@@ -48,37 +22,34 @@
 
 - name: Catalan Election Results
   client: <a href="http://www.elespanol.com">EL ESPAÑOL</a>
-  page: /spain-general-election-results/
-  url: http://datos.elespanol.com/elecciones-generales/resultados/congreso
+  url: http://resultados27s.elespanol.com/
   date: 27th September 2015
   separator: true
   description: >
-    Custom web app for <a href="http://www.elespanol.com">EL ESPAÑOL</a> to host the live results of the Spain general elections. <br />
-    We iterated on the map design and a simple interface.
+    A change on the rendering code allowed us to make a more detailed map. <br />
+    <i>Stack: d3.js, Canvas, TopoJSON and Bootstrap.</i>
   showcase: >
     <div class="row collage">
-        <div class="col-sm-6">
+        <div class="col-sm-8">
             <img class="img-fluid projectImg m-b-1" data-action="zoom" data-src="/img/project3.jpg" alt="spam.js">
         </div>
-        <div class="col-sm-6">
-            <img class="img-fluid projectImg m-b-1" data-action="zoom" data-src="/img/project2.jpg" alt="spam.js">
-        </div>
-        <div class="col-sm-6">
-            <img class="img-fluid projectImg m-b-1" data-action="zoom" data-src="/img/project1.jpg" alt="spam.js">
-        </div>
-        <div class="col-sm-6">
-            <img class="img-fluid projectImg m-b-1" data-action="zoom" data-src="/img/project3.jpg" alt="spam.js">
+        <div class="col-sm-4 u-zeroPadding">
+            <div class="col-xs-12">
+                <img class="img-fluid projectImg m-b-1" data-action="zoom" data-src="/img/project2.jpg" alt="spam.js"">
+            </div>
+            <div class="col-xs-12">
+                <img class="img-fluid projectImg m-b-1" data-action="zoom" data-src="/img/project1.jpg" alt="spam.js"">
+            </div>
         </div>
     </div>
 
-- name: Spain Municipal Election Results
+- name: Spain Local Election Results
   client: <a href="http://www.elespanol.com">EL ESPAÑOL</a>
-  page: /spain-general-election-results/
-  url: http://datos.elespanol.com/elecciones-generales/resultados/congreso
+  url: http://resultados24m.elespanol.com/
   date: 20th May 2015
   description: >
-    Custom web app for <a href="http://www.elespanol.com">EL ESPAÑOL</a> to host the live results of the Spain general elections. <br />
-    We iterated on the map design and a simple interface.
+    We wanted to change the look of the Spanish elections. And we got 150.000<span class="plus">+</span> visits. <br />
+    <i>Stack: d3.js, SVG, TopoJSON and Bootstrap.</i>
   showcase: >
     <div class="row collage">
         <div class="col-sm-6">

diff --git a/_includes/projects.html b/_includes/projects.html
@@ -13,7 +13,7 @@ <h2 class="projectTitle">{{ project.name }}</h2>
                         {% if project.page %}
                             <a href="{{ project.page }}">
                                 <svg class="svg--page" viewBox="0 0 32 32" style="fill:currentcolor">
-                                    <path d="M0 10 C0 6, 3 2, 8 2 C12 2, 15 5, 16 6 C17 5, 20 2, 24 2 C30 2, 32 6, 32 10 C32 18, 18 29, 16 30 C14 29, 0 18, 0 10"></path>
+                                    <path d="M4 4 L16 4 L16 8 L8 8 L8 24 L24 24 L24 16 L28 16 L28 28 L4 28 z M26 2 L30 6 L16 20 L12 20 L12 16 z"></path>
                                 </svg>
                             </a>
                         {% endif %}
@@ -46,9 +46,9 @@ <h2 class="projectTitle">{{ project.name }}</h2>
                 {% if project.page %}
                     <a href="{{ project.page }}" class="btn btn-primary-outline">
                         <svg class="svgButton--page" viewBox="0 0 32 32" style="fill:currentcolor">
-                            <path d="M0 10 C0 6, 3 2, 8 2 C12 2, 15 5, 16 6 C17 5, 20 2, 24 2 C30 2, 32 6, 32 10 C32 18, 18 29, 16 30 C14 29, 0 18, 0 10"></path>
+                            <path d="M4 4 L16 4 L16 8 L8 8 L8 24 L24 24 L24 16 L28 16 L28 28 L4 28 z M26 2 L30 6 L16 20 L12 20 L12 16 z"></path>
                         </svg>
-                        Case study
+                        Read more
                     </a>
                 {% endif %}
                 {% if project.url %}

diff --git a/_sass/_projects.scss b/_sass/_projects.scss
@@ -5,8 +5,7 @@
     margin-bottom: 3rem;
 }
 .project:nth-child(2),
-.project:nth-child(3),
-.project:nth-child(4) {
+.project:nth-child(3) {
     margin-bottom: 5rem;
 }
 .project:nth-child(3),
@@ -53,7 +52,6 @@
     height: 1rem;
 }
 .svg--page {
-    height: 1rem;
     margin-right: 0.2rem;
 }
 .martgnz a:nth-child(3) svg {
@@ -79,6 +77,9 @@
     color: $brand-primary;
     font-size: 3rem;
 }
+.plus {
+    font-size: 80%;
+}
 
 // Medium devices (tablets, 48em and up)
 @media (min-width: $sm) {