Card-like pattern on homepage. refs #1

WeAreFairphone · Nov 25, 2017 · 4f74d6c · 4f74d6c
1 parent 552991f
commit 4f74d6c
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 8 deletions.
diff --git a/_i18n/de.yml b/_i18n/de.yml
@@ -1,4 +1,5 @@
 page:
+  heading: "Willkommen auf "
   title: "WeAreFairphone"
 
 pages:

diff --git a/_i18n/en.yml b/_i18n/en.yml
@@ -1,4 +1,5 @@
 page:
+  heading: "Welcome to "
   title: "WeAreFairphone"
 
 pages:

diff --git a/_includes/head.html b/_includes/head.html
@@ -6,6 +6,7 @@
   {% seo title=false %}
   <link rel="shortcut icon" href="/favicon.ico" />
   <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}" />
+  <link rel="stylesheet" href="{{ "/assets/styles.css" | relative_url }}" />
   <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}" />
   {% if jekyll.environment == 'production' and site.google_analytics %}
     {% include google-analytics.html %}

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -0,0 +1,28 @@
+---
+layout: default
+---
+
+<div class="home">
+
+  {{ content }}
+
+  <h1 class="page-heading">{% translate page.heading %}{{ site.title }}</h1>
+
+  <ul class="page-list">
+    {% for page in site.pages %}
+      {% if page.layout == 'page' %}
+        <li class="page-list-item">
+          <h2>
+            <a class="page-link" href="{{ page.url | relative_url }}">
+              {% translate page.title %}
+            </a>
+          </h2>
+          <div class="page-content">
+            {{ page.content }}
+          </div>
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+
+</div>
diff --git a/about.md b/about.md
diff --git a/assets/styles.scss b/assets/styles.scss
@@ -0,0 +1,21 @@
+---
+---
+.page-list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin-left: 0;
+
+  &-item {
+    border: 1px solid lightgray;
+    border-radius: 2%;
+    box-sizing: border-box;
+    flex: 1 0 45%;
+    margin: 0.5em;
+    padding: 0.5em;
+  }
+
+  .page-content {
+    padding-bottom: 0;
+  }
+}
diff --git a/installation.md b/installation.md
@@ -1,5 +1,5 @@
 ---
-layout: default
+layout: page
 title:  pages.installation.title
 permalink: /installation/
 ---