continue setting up of the other pages..

backend/api/domain/models/domain.settings.json

@@ -33,6 +33,17 @@
     },
     "excerpt": {
       "type": "richtext"
+    },
+    "image": {
+      "model": "file",
+      "via": "related",
+      "allowedTypes": [
+        "images",
+        "files",
+        "videos"
+      ],
+      "plugin": "upload",
+      "required": false
     }
   }
 }

frontend/gatsby-config.js

@@ -42,8 +42,19 @@ module.exports = {
         queryLimit: 1000
       }
     },
+
     `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-plugin-sharp`,
+      options: {
+        // Available options and their defaults:
+        base64Width: 20,
+        forceBase64Format: ``, // valid formats: png,jpg,webp
+        useMozJpeg: process.env.GATSBY_JPEG_ENCODER === `MOZJPEG`,
+        stripMetadata: true,
+        defaultQuality: 60,
+      }
+    },
 
     {
       resolve: `gatsby-plugin-manifest`,

frontend/gatsby-node.js

@@ -45,7 +45,7 @@ exports.createPages = ({ actions, graphql }) => {
   `).then(result => {
     result.data.allStrapiDomain.edges.forEach(({ node }) => {
       createPage({
-        path: `/domain/${node.slug}`,
+        path: `/domains/${node.slug}`,
         component: path.resolve(`src/templates/domain.js`),
         context: {
           id: node.id,
@@ -54,7 +54,7 @@ exports.createPages = ({ actions, graphql }) => {
     })
     result.data.allStrapiUseCase.edges.forEach(({ node }) => {
       createPage({
-        path: `/use-case/${node.slug}`,
+        path: `/use-cases/${node.slug}`,
         component: path.resolve(`src/templates/use-case.js`),
         context: {
           id: node.id,

frontend/src/components/alternatives.js

@@ -16,7 +16,7 @@ const Alternatives = ({ alternatives }) => {
           <div dangerouslySetInnerHTML={{__html:alternative.description }} />
           { (alternative.domains || []).length > 0 &&
             <p className="meta">
-              Domain{ alternative.domains.length > 1 ? "s" : "" }: { alternative.domains.map(domain => <Link key={domain.slug} to={`/domain/${domain.slug}`}>{ domain.title}</Link>) }
+              Domain{ alternative.domains.length > 1 ? "s" : "" }: { alternative.domains.map(domain => <Link key={domain.slug} to={`/domains/${domain.slug}`}>{ domain.title}</Link>) }
             </p>
           }
           { (alternative.layers || []).length > 0 && 

frontend/src/pages/domains.js

@@ -2,9 +2,11 @@ import React from "react"
 import { Link, graphql } from "gatsby"
 import clip from "text-clipper"
 
+import Img from 'gatsby-image'
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 
+
 const DomainsPage = ({ data }) => {
   return (
     <Layout>
@@ -13,14 +15,17 @@ const DomainsPage = ({ data }) => {
         <div className="row">
           <div className="page-introduction" dangerouslySetInnerHTML={{ __html: data.strapiDomainsPage.introduction }}></div>
           <div className="domains">
-            { data.allStrapiDomain.nodes.map(node => {
-              const excerpt = node.excerpt ? node.excerpt : clip(node.description, 150, { html: true })
+            { data.allStrapiDomain.nodes.map(domain => {
+              const excerpt = domain.excerpt ? domain.excerpt : clip(domain.description, 150, { html: true })
 
               return (
-                <Link to={`/domain/${node.slug}`} key={node.id} className="domain">
-                  <h3>{ node.title }</h3>
-                  <p dangerouslySetInnerHTML={{ __html: excerpt }} />
-                  { node.order }
+                <Link to={`/domains/${domain.slug}`} key={domain.id} className="domain">
+                  { domain.image && <div className="image"><Img fluid={ domain.image.childImageSharp.fluid } fadeIn={false} /></div> }
+                  <div className="text">
+                    <h2>{ domain.title }</h2>
+                    <div className="content" dangerouslySetInnerHTML={{ __html: excerpt }} />
+                    { domain.order }
+                  </div>
                 </Link>
               )
             })}
@@ -45,6 +50,14 @@ export const pageQuery = graphql`
         title
         excerpt
         description
+        image {
+          #publicURL
+          childImageSharp {
+            fluid(maxWidth: 400, pngQuality: 80) {
+              ...GatsbyImageSharpFluid_noBase64
+            }
+          }
+        }
       }
     }
   }

frontend/src/pages/use-cases.js

@@ -16,8 +16,8 @@ const UseCasesPage = ({ data }) => {
             const excerpt = node.excerpt ? node.excerpt : clip(node.description, 150, { html: true })
 
             return (
-              <Link key={node.id} className="item" to={`/use-case/${node.slug}`}>
-                <h3>{ node.title }</h3>
+              <Link key={node.id} className="item" to={`/use-cases/${node.slug}`}>
+                <h2>{ node.title }</h2>
                 <div dangerouslySetInnerHTML={{ __html: excerpt }} />
               </Link>
             )
@@ -37,6 +37,7 @@ export const pageQuery = graphql`
         id
         slug
         title
+        excerpt
         description
       }
     }

frontend/src/styles/_domains.scss

-.domains {    
+.domains {
 
   a.domain {
-    display: block;
+    display: flex;
+    align-items: center;
     text-decoration: none;
     margin-bottom: 2rem;
+
+    @media (max-width: 480px) {
+      flex-direction: column;
+      
+    }
+
+    .image {
+      width: 260px;
+    }
+
+    .text {
+      padding: 2rem;
+    }
   }
 
+
+
 }
\ No newline at end of file

frontend/src/styles/_page-index.scss

@@ -6,6 +6,7 @@
   h1 {
     font-size: 5rem;
     line-height: 1em;
+    word-break: keep-all;
 
   }
   h2 {
@@ -44,9 +45,15 @@
 
 
   @media (min-width: 481px) {
+    h3 {
+      font-size: 1.25rem;
+    }
+
+
     p {
       font-size: 1.25rem;
     }
+
   }
 
   #phone {

frontend/src/styles/_typography.scss

 
 @import url("https://assets.waag.org/fonts/maax/font.css");
 
+
+::-moz-selection { background: #2FB6BC; color: #FFF; }
+     ::selection { background: #2FB6BC; ; color: #FFF; }
+
 body {
   font-family: maax, sans-serif;
 }
@@ -17,6 +21,10 @@ h1 {
 h2 {
   font-size: 1.5rem;
   margin: 0 0 2rem 0;
+
+  p + & {
+    margin-top: 4rem;
+  }
 }
 
 h3 {
@@ -52,8 +60,9 @@ a.back {
 }
 
 .page-introduction {
+  max-width: 720px;
   font-size: 1.2em;
-  margin-bottom: 4rem;
+  margin-bottom: 6rem;
 }
 
 .content {