Update styles, add author to featured post

source/_posts/why-use-federated-networks.md

@@ -1,24 +1,26 @@
 
 ---
 layout: "post"
-title: "Why use federated networks (WIP)"
+title: "Why use federated networks (updated)"
 date: 2018-02-27
 tags:
     - fediverse
 preview:
-  "This article is a stub. You can help the Fediverse wiki by expanding it. Anyone welcome to contribute. It may be a less technical article, for your friend and your grandma. Explaining with vivid examples why privacy is important, how corporate entities are misusing their capabilities, etc."
-url: "/en/post/Why-use-federated-networks"
+  "This article is a stub. You can help the Fediverse website by expanding it. Anyone welcome to contribute. It may be a less technical article, for your friend and your grandma. Explaining with examples why privacy is important, how corporate entities are misusing their capabilities, etc."
+url: "/en/post/why-use-federated-networks"
 lang: en
-banner: "banner.jpg"
 featured: true
+banner: "banner.jpg"
+authors:
+  - Jane Doe
 ---
 
-This article is a stub. You can help the Fediverse wiki by expanding it. Anyone welcome to contribute.
+This article is a stub. You can help the Fediverse website by expanding it. Anyone welcome to contribute.
 
 It may be a less technical article, for your friend and your grandma. Explaining with vivid examples why privacy is important, how corporate entities are misusing their capabilities, etc.
 
 See [this article](https://signal.org/blog/the-ecosystem-is-moving) by M. Marlinspike elaborating on why federation *is not* the future.
 
-There are few articles about the strong points of federated / decentralized networks on the net. Some of those are research papers using obscure scientific language. Would be nice to have a thorough writing on why Moxy didn't get the point of federation. May be its point is not about providing same smooth experience for everyone (which, really, is quite hard). May be its point is in promoting a new concept, users expecting to lose certain convenient features of centralized systems in exchange for benefits that a centralized system can not guarantee. Singling out these benefits, as well as describing weak points of centralized systems is desirable. Add facts / links to many recent data breaches, misuse of centralized networks, etc...
+There are few articles about the strong points of federated / decentralized networks on the net. Some of those are research papers using obscure scientific language. Would be nice to have a thorough writing on why Moxy didn't get the point of federation. May be its point is not about providing same smooth experience for everyone (which, really, is quite hard). May be its point is in promoting a new concept, users expecting to lose certain convenient features of centralized systems in exchange for benefits that a centralized system can not guarantee. Singling out these benefits, as well as describing weak points of centralized systems is desirable. Add facts / links to many recent data breaches, misuse of centralized networks, etc.
 
-I'll add some links to research papers on decentralization later. Please, don't hesitate to join and help writing this article.
+Please, join and [contribute](https://gitlab.com/fediverse/fediverse.gitlab.io/blob/master/CONTRIBUTING.md) to complete this article.

themes/starter/layout/_partial/featured.ejs

@@ -1,6 +1,14 @@
 
 <%
   const date = post.date.format(config.date_format).split('-').join('.');
+
+  let avatarPath ="";
+
+  if (page.avatar) {
+    avatarPath = page.avatar;
+  } else {
+    avatarPath = "default-avatar.png";
+  }
 %>
 
 <section class="">
@@ -9,16 +17,15 @@
   </div>
   <a href="<%- post.url %>" class="post__preview featured">
     <img src="/<%- post.path %><%- post.banner%>" alt="featured post image">
+    <img class="post__avatar" src="/img/authors/<%= avatarPath %>" alt="author">
     <div class="post__content">
-      <p class="post__title u-emphasize">
+      <p class="post__title u-emphasize u-center">
         <%- post.title %>
       </p>
       <p class="post__text"><%- post.preview %></p>
       <p class="post__meta u-emphasize">
         <%= date %>
-        <span>
-          <% post.tags.map(function(tag) { %>#<%= tag.name %> <% }) %>
-        </span>
+        <span>by <% post.authors.map(function(author) { %><%= author %> <% }) %></span>
       </p>
     </div>
   </a>

themes/starter/layout/_partial/heroheader.ejs

@@ -1,7 +1,21 @@
 
+<%
+  let avatarPath ="";
+
+  if (page.avatar) {
+    avatarPath = page.avatar;
+  } else {
+    avatarPath = "default-avatar.png";
+  }
+%>
+
 <header class="hero-header" style="background: url('<% if (page.banner) { %> <%= page.banner %> <% } else { %> /img/knowledge-bg.jpg <% } %>') <% if (page.percent) { %> <%= page.percent %> <% } else { %> 50% 50% <% } %> no-repeat;">
   <div class="heading">
     <h1><%= page.title %></h1>
     <h4 class="subheading"><%= page.subtitle || "" %></h4>
+    <% if (page.authors) { %>
+      <h4>Author: <% page.authors.map(function(author) { %><%= author %> <% }) %></h4>
+      <img class="heading__avatar" src="/img/authors/<%= avatarPath %>" alt="author">
+    <% } %>
   </div>
 </header>

themes/starter/source/assets/scss/modules/_chronicles.scss

@@ -11,6 +11,7 @@
 .chronicles .links {
   width: 150px;
   height: 150px;
+  margin-bottom: 2em;
 }
 
 .chronicles .section-title h4 {
@@ -32,7 +33,7 @@
 }
 
 .post__preview {
-  padding: .5em 1.5em;
+  padding: .8em 1.5em;
   border: 1px solid $grey;
   border-radius: 10px;
   position: relative;
@@ -56,7 +57,7 @@
 
 .post__preview:not(.wanted):not(.featured) {
   flex: 32% 0 0;
-  height: 240px;
+  height: 270px;
 }
 
 .post__preview:not(.wanted):not(.featured) .post__meta {
@@ -84,11 +85,16 @@
 .post__preview.featured {
   border: none;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   flex-wrap: wrap;
-  margin: 2em 0 3em;
+  margin: 3em 0;
   max-height: 300px;
-  overflow: hidden;
+    &:hover,
+    &:active,
+    &:focus {
+      color: inherit;
+      opacity: .85;
+    }
 }
 
 .post__preview.featured p {
@@ -99,14 +105,31 @@
   line-height: 1;
 }
 
-.post__preview.featured img,
+.post__preview.featured > img:first-child,
 .post__preview.featured .post__content {
   flex: 45% 0 0;
 }
 
+.post__preview.featured > img:first-child {
+  border-radius: 10px;
+}
+
+.post__avatar {
+  position: absolute;
+  right: 50%;
+  top: -30px;
+  width: 85px;
+  height: 85px;
+  text-align: center;
+  border-radius: 50%;
+  border: 10px solid $white;
+  background: $white;
+}
+
 .post__preview.featured .post__content {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .post__content > .post__text {
@@ -178,7 +201,11 @@ $taglist: (diaspora, $diaspora),
     max-height: inherit;
   }
 
-  .post__preview.featured img,
+  .post__avatar {
+    right: 0%;
+  }
+
+  .post__preview.featured > img:first-child,
   .post__preview.featured .post__content {
     flex: 100% 0 0;
     margin-bottom: 2em;

themes/starter/source/assets/scss/modules/_heroheader.scss

@@ -4,7 +4,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 550px;
+  height: 500px;
   background-size: cover;
   color: $white;
   text-align: center;
@@ -16,3 +16,10 @@
 .hero-header .heading {
   flex: 0 1 auto;
 }
+
+.heading__avatar {
+  margin-top: .5em;
+  border: 2px solid $white;
+  background: $white;
+  border-radius: 50%;
+}

themes/starter/source/assets/scss/modules/_index.scss

@@ -43,6 +43,7 @@
   height: 80px;
   flex: 40% 0 0;
   border: 3px solid $white;
+  background: $white;
   border-radius: 50%;
 }
 

themes/starter/source/assets/scss/partials/_layout.scss

@@ -86,7 +86,7 @@ h6 {
 }
 
 h1 {
-  font-size: 3rem;
+  font-size: 2.5rem;
 }
 
 h3 {