Basic customisations

blog-index.twig

+{% for page in pages("blog")|sort_by("time")|reverse if not page.hidden %}
+<div class="post">
+    <h3><a href="{{ page.url }}">{{ page.title }}</a></h3>
+    <p class="date">{{ page.date_formatted }}</p>
+    <p class="excerpt">{{ page.description }}</p>
+</div>
+{% endfor %}

css/style.css

@@ -63,9 +63,12 @@ body { display: flex; flex-direction: column; }
 
 /*** BASIC LAYOUT: HEADER ***/
 
-#header { background: #2EAE9B; }
+#header {
+  background-image: linear-gradient(to right, #F8F9FA, #5A8264);
+}
 
 #title, #logo {
+    font-family: Revalia;
     float: left;
     padding: 3em 3em 3em 0;
 }
@@ -172,11 +175,23 @@ body { display: flex; flex-direction: column; }
 
 /*** TYPOGRAPHY ***/
 
+@font-face{
+    font-family: Revalia;
+    src: url(font/Revalia/Revalia-Regular.ttf)
+}
+@font-face{
+    font-family: Cabin;
+    src: url(font/Cabin/Cabin-Medium.ttf)
+}
+@font-face{
+    font-family: Cabin-Bold;
+    src: url(font/Cabin/Cabin-Bold.ttf)
+}
+
 html { font-size: 16px; }
 
 body {
-    font-family: 'Droid Sans', 'Helvetica', 'Arial', sans-serif;
-    font-size: 1rem;
+    font: 17px/26px Cabin;
     line-height: 1.6;
     font-variant-ligatures: common-ligatures;
     text-rendering: optimizeLegibility;
@@ -203,6 +218,7 @@ a {
 a:hover { color: #444; }
 
 h1, h2, h3, h4, h5, h6 {
+    font-family: Cabin-bold;
     margin-bottom: 0.6em;
     font-weight: bold;
     color: #333;

feed.twig

@@ -9,6 +9,7 @@
     <pubDate>{{ "now" | date(RFC822) }}</pubDate>
     <lastBuildDate>{{ "now" | date(RFC822) }}</lastBuildDate>
     <generator>Pico</generator>
+    <!-- todo : limit to blog -->
     {% for page in pages if page.id not in ['index','feed'] and not end %}
       <item>
         <title>{{ page.title | e }}</title>