add posts

_data/navigation.yml

@@ -13,6 +13,10 @@
 - name: Current work
   link: "/current-work.html"
   description: The current focus of the working group, in particular the special interest groups and projects.
+
+- name: Posts
+  link: "/posts.html"
+  description: News or blog posts from our members.
   
 - name: Funding
   link: "/funding.html"

_layouts/post.html

+---
+layout: default
+---
+
+<h1>{{ page.title }}</h1>
+<p><b>{{ page.date | date_to_string }}</b></p>
+<p>{{ page.excerpt }}</p>
+<a href="{{ page.link }}"><img src='{{ page.pic | relative_url }}' alt="pic missing" class="hundred"></a>
+
+{{ content }}
\ No newline at end of file

_sass/main.scss

@@ -37,11 +37,6 @@ h1, th, strong, .focus {
 h1 {
   padding-top: $padding-big;
   font-size: $big-font-size;
-  a {
-    color: inherit;
-    font-size: inherit;
-    text-decoration: none;
-  }
 }
 
 h2 {
@@ -65,7 +60,13 @@ p, td {
 // links
 a:hover {
   color: $color-strong;
-  text-decoration: underline;
+  text-decoration: inherit;
+}
+
+h1 a, h2 a {
+  color: inherit;
+  font-size: inherit;
+  text-decoration: none;
 }
 
 // images
@@ -92,6 +93,10 @@ img.inline-orcid {
   width: 16px;
 }
 
+img.hundred {
+  width: 100%;
+}
+
 // boxes
 .container {
   display: flex;
@@ -99,7 +104,7 @@ img.inline-orcid {
   justify-content: center;
 }
 
-.page-box, .member-box {
+.page-box, .member-box, .post-box {
   border: $border-std solid $color-strong;
   border-radius: $padding-big;
   box-sizing: border-box;
@@ -107,11 +112,20 @@ img.inline-orcid {
   margin: $padding-std;
 }
 
+.page-box, .post-box {
+  text-decoration: none;
+  transition: background-color 0.3s ease;
+  :first-child {
+    margin-top: 0;
+  }
+  :last-child {
+    margin-bottom: 0;
+  }
+}
+
 .page-box {
   width: $box-size;
   box-shadow: $padding-std $padding-std $color-fade;
-  text-decoration: none;
-  transition: background-color 0.3s ease;
   .box-title {
     margin-left: 0;
     text-align: center;
@@ -120,7 +134,17 @@ img.inline-orcid {
   }
 }
 
-.page-box:hover, .member-box {
+.post-box {
+  h2 {
+    margin-top: $padding-std;
+    margin-bottom: $padding-std;
+  }
+  .sticker {
+    float: right;
+  }
+}
+
+.page-box:hover, .member-box, .post-box:hover {
   background-color: $color-fade;
   text-decoration: none;
 }

posts.html

+---
+title: Posts
+---
+<h1>Latest posts from our members</h1>
+
+<div class="container">
+{% for post in site.posts %}
+  <a href="{{ post.url }}" class="post-box">
+    <p>{{ post.date | date_to_string }} <span class="sticker">{{ post.category }}</span></p>
+    <h2>{{ post.title }}</h2>
+    <p>{{ post.excerpt }} <b>Read more...</b></p>
+  </a>
+{% endfor %}
+</div>
\ No newline at end of file