Update data, fix styles, add screenshots

source/_data/diaspora.json

@@ -29,6 +29,10 @@
       "descr": "The diaspora* project appeared in 2010, when a group of friends decided to create a social network that would return control to users. The project's mascot is dandelion, and diaspora* servers are called \"pods\". Information about the new network spread far and wide like dandelion's seeds in the wind, attracting newcomers, increasing the number of available pods. Today it's a community project with a stable userbase. Many people joined diaspora* in search of a macroblogging platform independent from corporations.",
       "communities": "",
       "connections": ["Friendica", "Hubzilla", "Socialhome", "GangGo"],
+      "screenshots":
+        [
+          {"descr": "diaspora stream", "img": "diaspora-1.png"}
+        ],
       "features":
         [
           "tag subscription",

source/_data/friendica.json

@@ -40,9 +40,17 @@
         ],
       "mascot": [{"item": "Flaxy O'Hare", "imgNum": "1"}],
       "dwellers": "friends",
-      "communities": [{"title": "List of forums", "url": "https://dir.friendica.social/forums"}],
-      "descr": "Friendica aims at being a platform that suits everyone. Newcomers will feel right at home: the network's interface and functionality include common features of a mainstream social network. Being comparatively light on resources makes it attractive for administrators to host (Friendica's servers are called \"nodes\"). The community is good-natured and helpful. Friendica is well connected with the rest of Fediverse — its users can follow friends on most other federated networks.",
+      "communities": [
+        {"title": "List of forums", "url": "https://dir.friendica.social/forums"},
+        {"title": "Nodes by theme", "url": "https://gitlab.com/distributopia/friendica-world-overview"}
+      ],
+      "descr": "Friendica aims at being a platform that suits everyone. Newcomers will feel right at home: the network's interface and functionality include common features of a mainstream social network. Being comparatively light on resources makes it attractive for administrators to host (Friendica servers are called \"nodes\"). The community is good-natured and helpful. Friendica is well connected with the rest of Fediverse — its users can follow friends on most other federated networks.",
       "connections": ["diaspora*", "GangGo", "GNU Social", "Hubzilla", "Mastodon", "Osada", "Pleroma", "postActiv", "Socialhome"],
+      "screenshots":
+        [
+          {"descr": "Default Friendica theme", "img": "friendica-1.png"},
+          {"descr": "Green Friendica theme", "img": "friendica-2.png"}
+        ],
       "tracker": "https://github.com/friendica/friendica/issues",
       "bounty": "",
       "translating": "https://www.transifex.com/Friendica/friendica",

source/_data/gnusocial.json

@@ -37,6 +37,10 @@
       "communities": [{"title": "List of groups", "url": "http://laemeur.sdf.org/gs/group-index.html"}],
       "descr": "GNU Social creators are the founding fathers of free libre microblogging networks. The platform has a significant userbase and multiple plugins.",
       "connections": ["Friendica", "Hubzilla", "Mastodon", "Pleroma", "postActiv"],
+      "screenshots":
+        [
+          {"descr": "GNU Social interface", "img": "gnusocial-1.png"}
+        ],
       "tracker": "https://git.gnu.io/gnu/gnu-social/issues",
       "bounty": "",
       "translating": "https://www.transifex.com/gnu-social/gnu-social",

source/_data/mastodon.json

@@ -61,14 +61,19 @@
           {"id": "1", "url": "https://crossposter.masto.donte.com.br"},
           {"id": "2", "url": "http://www.unmung.com/mastoview"},
 
-          {"id": "4", "url": "https://fed.brid.gy"},
-          {"id": "5", "url": "https://gitlab.com/chaica/feed2toot"}
+          {"id": "3", "url": "https://fed.brid.gy"},
+          {"id": "4", "url": "https://gitlab.com/chaica/feed2toot"}
         ],
       "mascot": [{"item": "mastodon", "imgNum": "1"}, {"item": "trumpet", "imgNum": "2"}],
       "dwellers": "mastonauts",
-      "communities": [{"title": "List of servers by theme", "url": "https://github.com/distributopia/masto-world-overview"}],
-      "descr": "Mastodon network grew quickly and its development is still speedy. You'll find everything you want of a microblogging platform, and much more. There are numerous Mastodon servers (called \"instances\") created specifically for certain communities and dedicated to various interests, spheres of knowledge, regions and activities.",
+      "communities": [{"title": "List of servers by theme", "url": "https://gitlab.com/distributopia/masto-world-overview"}],
+      "descr": "Mastodon network grew quickly. You'll find everything you want of a microblogging platform, and much more. There are numerous Mastodon servers (called \"instances\") created specifically for certain communities and dedicated to various interests, spheres of knowledge, regions and activities.",
       "connections": ["Friendica", "GNU Social", "Hubzilla", "Misskey", "Osada", "PeerTube", "Pleroma", "postActiv"],
+      "screenshots":
+        [
+          {"descr": "Default tweetdeck layout", "img": "mastodon-1.png"},
+          {"descr": "Alternative Pinafore layout", "img": "mastodon-2.png"}
+        ],
       "features":
         [
           "contact lists",
@@ -82,7 +87,7 @@
         ],
       "information":
         [
-          "Direct messages (\"private messages\") will be delivered with limited visibility (non public) only between Mastodon users. Friends from other networks may get such \"direct messages\" as public (visible to all) because some networks (GNU Social) don't support DMs, and other projects don't know how to handle them and by default make them public (Friendica, Hubzilla, Osada). Keep that in mind when sharing something private via a DM."
+          "Direct messages (\"private messages\") are delivered with limited visibility (non public) only between Mastodon users. Friends from other networks may get such \"direct messages\" as public (visible to all) because some networks (GNU Social) don't support DMs, and other projects (Friendica, Hubzilla, Osada) by default make them public. Keep that in mind when sharing something private via a DM."
         ],
       "donate": "https://patreon.com/mastodon",
       "tracker": "https://github.com/tootsuite/mastodon/issues",

source/_data/misskey.json

@@ -27,6 +27,10 @@
       "communities": "",
       "descr": "Apart from mainstream microblogging features, this network has many nice additions. User profile can be customized to show less or more available widgets. The project is in active development, parts of its interface have not been fully translated to other languages (main language is Japanese) — anyone can contribute translations and improve the network.",
       "connections": ["Mastodon", "Pleroma"],
+      "screenshots":
+        [
+          {"descr": "Misskey interface", "img": "misskey-1.png"}
+        ],
       "features":
         [
           "polls",

source/_data/peertube.json

@@ -40,6 +40,10 @@
       "communities": "",
       "descr": "Unlike centralized video platforms, PeerTube considers each user as a person, and not as a product to track and sell advertisements. PeerTube's goal is to create a network of small interconnected video hosting providers. Users are free to choose the hoster of their videos according to terms of service and moderation policy. There are no recommendation algorithms and no need to give away extended copyright to your work. PeerTube video broadcasting is peer-to-peer (through WebRTC): when other people watch a PeerTube video at the same time as you, as long as your tab remains open, your browser shares bits of that video and you participate in a healthier use of the Internet. Videos hosted on PeerTube can be viewed directly from Mastodon and (soon) other Fediverse networks.",
       "connections": ["Friendica", "Mastodon", "Pleroma"],
+      "screenshots":
+        [
+          {"descr": "PeerTube interface", "img": "peertube-1.png"}
+        ],
       "donate": "https://soutenir.framasoft.org/en",
       "tracker": "https://github.com/Chocobozzz/PeerTube/issues",
       "bounty": "",

source/_data/pixelfed.json

@@ -28,6 +28,11 @@
       "communities": "",
       "descr": "Pixelfed is an image sharing platform with modern user interface.",
       "connections": ["Friendica", "Mastodon", "Misskey", "Pleroma"],
+      "screenshots":
+        [
+          {"descr": "Pixelfed interface", "img": "pixelfed-1.png"},
+          {"descr": "Alternative MicroUI", "img": "pixelfed-2.png"}
+        ],
       "donate": "https://www.patreon.com/dansup",
       "tracker": "https://github.com/dansup/pixelfed/issues",
       "bounty": "",

source/_data/pleroma.json

@@ -39,6 +39,10 @@
       "communities": "",
       "descr": "Pleroma microblogging platform was quickly appreciated by the community for its low resource consumption. If you have a Raspberry Pi or similar single-board computer you can use it as Pleroma server for family and friends.",
       "connections": ["Friendica", "GNU Social", "Hubzilla", "Mastodon", "microblog.pub", "Misskey", "Peertube", "Pleroma", "Plume", "postActiv", "WriteFreely"],
+      "screenshots":
+        [
+          {"descr": "Default Pleroma layout", "img": "pleroma-1.png"}
+        ],
       "tracker": "https://git.pleroma.social/pleroma/pleroma/issues",
       "bounty": "",
       "translating": "https://l10n.swecha.org/projects/pleroma/pleroma-fe",

source/_data/socialhome.json

@@ -28,6 +28,10 @@
       "communities": "",
       "descr": "Socialhome's column grid layout makes it a perfect network for sharing image content or creating personal portfolio and delivering new posts to friends from other Fediverse platforms.",
       "connections": ["diaspora*", "Friendica", "Hubzilla", "GangGo"],
+      "screenshots":
+        [
+          {"descr": "Socialhome grid layout", "img": "socialhome-1.png"}
+        ],
       "features":
         [
           "pinned posts"

themes/starter/.stylelintrc.json

@@ -34,7 +34,6 @@
     "selector-pseudo-element-colon-notation": "single",
     "string-no-newline": true,
     "string-quotes": "double",
-    "value-keyword-case": "lower",
     "value-no-vendor-prefix": true
   }
 }

themes/starter/layout/_partial/world.ejs

@@ -77,12 +77,23 @@
 
 <p class="description u-nomargin"><%= data.descr %></p>
 
+<% if (data.screenshots) { %>
+<div class="screens">
+  <% for (item in data.screenshots) { %>
+  <div class="screen">
+    <figcaption><%= data.screenshots[item].descr %></figcaption>
+    <img alt="<%= data.screenshots[item].descr %>" src="/img/screenshots/<%= data.screenshots[item].img %>">
+  </div>
+   <% } %>
+</div>
+<% } %>
+
 <% if (data.features) { %>
 <div class="section u-block">
   <h4><%- __('features') %></h4>
-  <ul class="section-list article-list">
+  <ul class="section-list article-list features">
     <% for (item in data.features) { %>
-    <li>
+    <li class="<%= network %>">
       <%= data.features[item] %>
     </li>
     <% } %>
@@ -116,7 +127,6 @@
 </div>
 <% } %>
 
-<br>
 <%- partial('_partial/join') %>
 <br>
 
@@ -125,7 +135,7 @@
   <h4><%- __('reading') %></h4>
   <ul class="article-list">
     <% for (item in data.reading) { %>
-      <li><a href="<%= data.reading[item].url %>"><%= data.reading[item].title %></a></li>
+      <li class="<%= network %>"><a href="<%= data.reading[item].url %>"><%= data.reading[item].title %></a></li>
     <% } %>
   </ul>
 </div>

themes/starter/layout/crystalball.ejs

@@ -3,7 +3,7 @@
 layout: layout
 ---
 
-<main class="contents u-center ball">
+<main class="contents u-center u-height">
   <img src="/img/ball.jpg" alt="crystall ball" style="width: 200px; height: auto;">
   <h2>Hello, I'm Fediverse Crystal Ball</h2>
   <span class="u-temp u-block">I can do one thing and do it well</span>

themes/starter/layout/tag.ejs

@@ -9,7 +9,7 @@
   }
 %>
 
-<div class="contents">
+<div class="contents u-height">
   <div class="tags__cloud">
     <% site.tags.map(function(tag) {  %>
       <%- partial('_partial/snowflake') %><a href="/tags/<%= tag.name %>" <% if (page.path === "tags/" + tag.name + "/index.html") { %>  class="tag--current" <% } %> ><%= tag.name %></a>

themes/starter/layout/tags.ejs

@@ -3,7 +3,7 @@
 layout: layout
 ---
 
-<div class="contents">
+<div class="contents u-height">
   <div class="tags__cloud">
     <% site.tags.map(function(tag) { %>
       <%- partial('_partial/snowflake') %><a href="/tags/<%= tag.name %>"><%= tag.name %></a> &nbsp;

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

@@ -144,15 +144,6 @@
   justify-content: space-between;
 }
 
-svg.f-tag {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  right: .5em;
-  top: .5em;
-  fill: $golden;
-}
-
 .post__preview .oneliner:hover,
 .post__preview .oneliner:focus,
 .post__preview .oneliner:active {
@@ -172,27 +163,6 @@ svg.f-tag {
   color: $golden;
 }
 
-$taglist: (diaspora, $diaspora),
-          (friendica, $friendica),
-          (hubzilla, $hubzilla),
-          (gnusocial, $gnusocial),
-          (mastodon, $mastodon),
-          (socialhome, $socialhome),
-          (pleroma, $pleroma),
-          (ganggo, $ganggo),
-          (aardwolf, $aardwolf),
-          (postactiv, $postactiv),
-          (peertube, $peertube),
-          (misskey, $misskey),
-          (osada, $osada),
-          (pixelfed, $pixelfed);
-
-@each $tag, $color in $taglist {
-  svg.#{$tag} {
-      fill: $color;
-    }
-}
-
 @media screen and (max-width: $mq-large) {
   .chronicles .urgent {
     right: 9em;

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

@@ -1,8 +1,4 @@
 
-.ball {
-  min-height: 100vh;
-}
-
 .question {
   margin-top: 1em;
 }

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

@@ -40,13 +40,49 @@ img.mascot {
   margin: 0 .2em;
 }
 
+.screens {
+  display: flex;
+  flex-direction: column;
+  margin: .4em 0;
+}
 
+.screen {
+  flex: 100% 0 0;
+  margin: .3em;
+}
+
+.screen > img {
+  width: 70%;
+  border: 1px solid $grey;
+}
+
+.screen figcaption {
+  text-align: center;
+  font-size: .85rem;
+  color: $asphalt;
+  opacity: .7;
+  margin-bottom: .7em;
+}
+
+.features {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.features > li {
+  flex: 50% 0 0;
+  padding: 0;
+}
 
 @media screen and (max-width: $mq-small) {
   .network aside {
     display: none;
   }
 
+  .features > li {
+    flex: 100% 0 0;
+  }
+
   .network .connections li:first-of-type {
     margin-top: 1em;
   }

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

@@ -1,5 +1,5 @@
 
-$font-primary: "primary", "Open Sans", "Helvetica Neue", "Roboto", sans-serif;
+$font-primary: "primary", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Lato", "Aria", sans-serif;
 $font-secondary: "secondary", "Georgia", sans-serif;
 
 [class^="icon-"],

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

@@ -26,8 +26,8 @@ html {
 
 body {
   font-size: 1.05rem;
-  font-family: $font-primary, "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  line-height: 1.7;
+  font-family: $font-primary;
+  line-height: 1.6;
   overflow-x: hidden;
   color: $black;
   background-color: $black;
@@ -350,8 +350,40 @@ dfn {
   border-radius: 50%;
 }
 
-.article-list li:before {
-  background: $golden;
+svg.f-tag {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  right: .5em;
+  top: .5em;
+  fill: $golden;
+}
+
+$list:  (diaspora, $diaspora),
+        (friendica, $friendica),
+        (hubzilla, $hubzilla),
+        (gnusocial, $gnusocial),
+        (mastodon, $mastodon),
+        (socialhome, $socialhome),
+        (pleroma, $pleroma),
+        (ganggo, $ganggo),
+        (aardwolf, $aardwolf),
+        (postactiv, $postactiv),
+        (peertube, $peertube),
+        (misskey, $misskey),
+        (osada, $osada),
+        (pixelfed, $pixelfed);
+
+@each $tag, $color in $list {
+  svg.#{$tag} {
+      fill: $color;
+    }
+}
+
+@each $network, $color in $list {
+  .article-list > li.#{$network}:before {
+      background: $color;
+    }
 }
 
 .warning-list li:before {

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

@@ -37,3 +37,7 @@
 .u-center {
   text-align: center;
 }
+
+.u-height {
+  min-height: 100vh;
+}