From 31f5d80ab5e80cd549b7a37fba5ce59c6cb292a2 Mon Sep 17 00:00:00 2001
From: lostinlight <hello@libenter.win>
Date: Tue, 25 Aug 2020 04:37:38 +0300
Subject: [PATCH] Move About to front card, closes #29

---
 CONTRIBUTING.md                               | 16 ++++--
 source/_data/miscellaneous.json               | 54 +++++++++----------
 source/_data/tools.json                       | 12 ++---
 themes/starter/layout/miscellaneous.ejs       | 16 +++---
 themes/starter/layout/tools.ejs               | 18 +++----
 .../source/assets/scss/modules/_misc.scss     | 34 ++++++------
 6 files changed, 76 insertions(+), 74 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 8c85815..63ebf40 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -17,15 +17,15 @@ Software submitted to **ALL APPS** website page **must be**:
 
 Fork this repository. Add your project data to `./source/_data/miscellaneous.json` file.
 
-A project **must have** *title, source, protocols (1 string, comma separated), license, categories* and appropriate protocol classes marked as `true`.
+A project **must have** *title, source, protocols (1 string, comma separated), license, categories* and appropriate protocol classes marked as `true`. Project's description (`about`) shouldn't excede 200 characters limit.
 
-Please, choose no more than **2 categories** (array of strings) for the software. The ones it was initially designed for.
+Please, choose no more than **3 categories** (array of strings) for the software. The ones it was initially designed for.
 
 #### Software categories (WIP, may change in the future)
 * `SN-ma` (social network: macroblogging)
 * `SN-mi` (social network: microblogging)
 * `Blog-Pub` (blog and publishing software)
-* `Media` (media sharing: images, audio, etc)
+* `Media` (media sharing: images, audio, video, etc)
 * `Links` (link sharing)
 * `Ev-Meet` (events, meetups, calendars)
 * `Files` (file hosting software)
@@ -33,23 +33,29 @@ Please, choose no more than **2 categories** (array of strings) for the software
 * `Open data` (dataset / corpora exchange)
 * `Reviews` (networks whose main purpose is reviewing stuff)
 * `Games` (gaming servers and apps)
+* `Develop` (software development applications)
 
 A project may have a logo / image (45x45px), placed in `./source/img/misc` folder.
 
 ### [Submitting tools](#submitting-tools)
 Fork this repository. Add your project data to `./source/_data/tools.json` file.
 
+A project **must have** *title, source, protocols (1 string, comma separated), license, categories* and appropriate protocol classes marked as `true`. Project's description (`about`) shouldn't excede 200 characters limit.
+
+Please, choose no more than **2 categories** (array of strings) for the software. The ones it was initially designed for.
+
 #### Tools categories (WIP, may change in the future)
 * `Libs` (frameworks, libraries, reference implementations in particular code language)
 * `Specs` (Fediverse protocol specifications)
-* `Tools` (for developer and geeky tools, like pastebins, git systems, pads, etc)
-* `Utils` (daemons, bots, resharers, and other such services for Fediverse)
+* `Utils` (Utilities: daemons, bots, resharers)
 * `Relays` (Fediverse relays)
 * `Bridges` (bridging other stuff to fediverse networks)
 * `Tests` (any kind of test tools)
 * `Plugins` (CMS plugins, apps to be installed inside other systems connecting to Fediverse)
 * `Other` (everything that doesn't quite fit into the above categories)
 
+A project may have a logo / image (45x45px), placed in `./source/img/misc` folder.
+
 ### [Submitting news](#submitting-news)
 
 Please, read our [guidelines](./GUIDELINES.md) for guest authors.
diff --git a/source/_data/miscellaneous.json b/source/_data/miscellaneous.json
index 2b64787..2bc6a63 100644
--- a/source/_data/miscellaneous.json
+++ b/source/_data/miscellaneous.json
@@ -12,7 +12,7 @@
         "codeLanguage": "Go",
         "techStack": "Node.js, LESS",
         "license": "AGPL-3.0",
-        "FediAccount": "https://writing.exchange/@write_as",
+        "FediAccount": "@write_as@writing.exchange",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -30,7 +30,7 @@
         "codeLanguage": "Rust",
         "techStack": "Rocket, Diesel, Ructe templates, WASM, SCSS",
         "license": "AGPL-3.0",
-        "FediAccount": "https://fediverse.blog/~/PlumeDev",
+        "FediAccount": "@PlumeDev@fediverse.blog",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -62,7 +62,7 @@
         "site": "https://epicyon.net",
         "logo": "/img/misc/epicyon.png",
         "servers": "https://the-federation.info/epicyon",
-        "description": "ActivityPub server implementing S2S and C2S protocols, suitable for single board computers. Includes features such as moderation tools, post expiry, content warnings, and image descriptions.",
+        "description": "ActivityPub server implementing S2S and C2S protocols, suitable for single board computers. Provides moderation tools, post expiry, content warnings, and image descriptions.",
         "codeLanguage": "Python",
         "techStack": "",
         "license": "AGPL-3.0",
@@ -84,7 +84,7 @@
         "codeLanguage": "Ruby",
         "techStack": "Node.js",
         "license": "AGPL-3.0",
-        "FediAccount": "https://mastodon.social/@prismo",
+        "FediAccount": "@prismo@mastodon.social",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -174,7 +174,7 @@
         "codeLanguage": "PHP",
         "techStack": "",
         "license": "GPL-3.0",
-        "FediAccount": "https://mastodon.xyz/@David",
+        "FediAccount": "@David@mastodon.xyz",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -192,7 +192,7 @@
         "codeLanguage": "Python",
         "techStack": "Tornado, peewee",
         "license": "AGPL-3.0",
-        "FediAccount": "https://mastodon.social/@anfora",
+        "FediAccount": "@anfora@mastodon.social",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -228,7 +228,7 @@
         "codeLanguage": "Rust",
         "techStack": "Actix, Diesel, Inferno, TypeScript",
         "license": "AGPL-3.0",
-        "FediAccount": "https://mastodon.social/@LemmyDev",
+        "FediAccount": "@LemmyDev@mastodon.social",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -264,7 +264,7 @@
         "codeLanguage": "Elixir",
         "techStack": "Vue, TypeScript",
         "license": "AGPL-3.0",
-        "FediAccount": "https://framapiaf.org/@mobilizon",
+        "FediAccount": "@mobilizon@ramapiaf.org",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -354,7 +354,7 @@
         "codeLanguage": "Go",
         "techStack": "",
         "license": "MIT",
-        "FediAccount": "https://metalhead.club/@mariusor",
+        "FediAccount": "@mariusor@metalhead.club",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -408,7 +408,7 @@
         "codeLanguage": "Go",
         "techStack": "",
         "license": "ISC",
-        "FediAccount": "https://honk.tedunangst.com/u/tedu",
+        "FediAccount": "@tedu@honk.tedunangst.com",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -426,7 +426,7 @@
         "codeLanguage": "Java",
         "techStack": "",
         "license": "Unlicense (public domain)",
-        "FediAccount": "https://mastodon.social/@grishka",
+        "FediAccount": "@grishka@mastodon.social",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -606,7 +606,7 @@
         "codeLanguage": "Go",
         "techStack": "",
         "license": "MIT",
-        "FediAccount": "https://mastodon.social/@ngerakines",
+        "FediAccount": "@ngerakines@mastodon.social",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -624,7 +624,7 @@
         "codeLanguage": "Python",
         "techStack": "Django, Vue, Nuxt, Spectre.css, Zutre",
         "license": "AGPL-3.0",
-        "FediAccount": "https://mastodon.etalab.gouv.fr/@scifed",
+        "FediAccount": "@scifed@mastodon.etalab.gouv.fr",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -656,7 +656,7 @@
         "site": "https://skohub.io",
         "logo": "",
         "servers": "",
-        "description": "SkoHub extends Knowledge Organization Systems (KOS) to create a publication / subscription infrastructure for Open Educational Resources. It allows to follow specific subjects and to be notified when new content about that subject is published.",
+        "description": "SkoHub creates a publication / subscription infrastructure for Open Educational Resources. It allows to follow specific subjects and to be notified when new content about that subject is published.",
         "codeLanguage": "Javascript",
         "techStack": "",
         "license": "Apache-2.0",
@@ -732,7 +732,7 @@
         "codeLanguage": "Go",
         "techStack": "",
         "license": "-",
-        "FediAccount": "https://mastodon.lubar.me/@ben",
+        "FediAccount": "@ben@mastodon.lubar.me",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -750,7 +750,7 @@
         "codeLanguage": "TypeScript",
         "techStack": "Node.js",
         "license": "MIT",
-        "FediAccount": "https://mastodon.social/@kosinus",
+        "FediAccount": "@kosinus@mastodon.social",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -804,7 +804,7 @@
         "codeLanguage": "Javascript",
         "techStack": "Node.js",
         "license": "AGPL-3.0",
-        "FediAccount": "https://floss.social/@Readlebee",
+        "FediAccount": "@Readlebee@floss.social",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -894,7 +894,7 @@
         "codeLanguage": "Python",
         "techStack": "",
         "license": "AGPL-3.0",
-        "FediAccount": "https://mastodon.technology/@agateblue",
+        "FediAccount": "@agateblue@mastodon.technology",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -948,7 +948,7 @@
         "codeLanguage": "Javascript",
         "techStack": "Node.js, Vue",
         "license": "AGPL-3.0",
-        "FediAccount": "https://misskey.io/@syuilo",
+        "FediAccount": "@syuilo@misskey.io",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -984,7 +984,7 @@
         "codeLanguage": "PHP",
         "techStack": "",
         "license": "AGPL-3.0",
-        "FediAccount": "https://mastodon.social/@pixelfed",
+        "FediAccount": "@pixelfed@mastodon.social",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -1002,7 +1002,7 @@
         "codeLanguage": "Elixir",
         "techStack": "Vue",
         "license": "AGPL-3.0",
-        "FediAccount": "https://pleroma.soykaf.com/lain",
+        "FediAccount": "@lain@pleroma.soykaf.com",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -1016,11 +1016,11 @@
         "site": "https://socialhome.network",
         "logo": "/img/misc/socialhome.svg",
         "servers": "https://the-federation.info/socialhome",
-        "description": "Personal webpage with social networking functionality. Column grid layout makes it a perfect network for sharing image content or creating personal portfolio",
+        "description": "Personal webpage with social networking functionality. Column grid layout makes it a perfect network for sharing image content or creating personal portfolio.",
         "codeLanguage": "Python",
         "techStack": "Django, Vue",
         "license": "AGPL-3.0",
-        "FediAccount": "https://jasonrobinson.me/p/da323072-e566-4b6e-a8b6-b2bda0c6ace4",
+        "FediAccount": "@jaywink@jasonrobinson.me",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": true,
@@ -1038,7 +1038,7 @@
         "codeLanguage": "Ruby",
         "techStack": "React, SASS, Node.js",
         "license": "AGPL-3.0",
-        "FediAccount": "https://mastodon.social/@gargron",
+        "FediAccount": "@gargron@mastodon.social",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -1056,7 +1056,7 @@
         "codeLanguage": "",
         "techStack": "",
         "license": "",
-        "FediAccount": "https://chaos.social/@redaktor",
+        "FediAccount": "@redaktor@chaos.social",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -1074,7 +1074,7 @@
         "codeLanguage": "",
         "techStack": "",
         "license": "-",
-        "FediAccount": "https://bitcoinhackers.org@berkes",
+        "FediAccount": "@berkes@bitcoinhackers.org",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -1092,7 +1092,7 @@
         "codeLanguage": "C",
         "techStack": "Elm",
         "license": "CNPL",
-        "FediAccount": "https://octodon.social/@parastat",
+        "FediAccount": "@parastat@octodon.social",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
diff --git a/source/_data/tools.json b/source/_data/tools.json
index e3aa92f..021af1e 100644
--- a/source/_data/tools.json
+++ b/source/_data/tools.json
@@ -30,7 +30,7 @@
         "codeLanguage": "",
         "techStack": "",
         "license": "CC-1.0",
-        "FediAccount": "https://floss.social/@forgefed",
+        "FediAccount": "@forgefed@floss.social",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -174,7 +174,7 @@
         "codeLanguage": "PHP",
         "techStack": "",
         "license": "MIT",
-        "FediAccount": "https://mastodon.technology/@jdormit",
+        "FediAccount": "@jdormit@mastodon.technology",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -372,7 +372,7 @@
         "codeLanguage": "PHP",
         "techStack": "",
         "license": "MIT",
-        "FediAccount": "https://mastodon.technology/@jdormit",
+        "FediAccount": "@jdormit@mastodon.technology",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -426,7 +426,7 @@
         "codeLanguage": "PHP",
         "techStack": "",
         "license": "MIT",
-        "FediAccount": "https://cybre.space/@landrok",
+        "FediAccount": "@landrok@cybre.space",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -444,7 +444,7 @@
         "codeLanguage": "Go",
         "techStack": "",
         "license": "AGPL-3.0",
-        "FediAccount": "https://social.matej-lach.me/@MatejLach",
+        "FediAccount": "@MatejLach@social.matej-lach.me",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
@@ -570,7 +570,7 @@
         "codeLanguage": "Go",
         "techStack": "",
         "license": "MIT",
-        "FediAccount": "https://metalhead.club/@mariusor",
+        "FediAccount": "@mariusor@metalhead.club",
         "apClass": true,
         "zotClass": false,
         "diasporaClass": false,
diff --git a/themes/starter/layout/miscellaneous.ejs b/themes/starter/layout/miscellaneous.ejs
index c960830..2cab741 100644
--- a/themes/starter/layout/miscellaneous.ejs
+++ b/themes/starter/layout/miscellaneous.ejs
@@ -74,9 +74,11 @@ layout: layout
               <h4 class="card__subtitle">Servers</h4>
               <p><a href="<%= apps[item].servers %>">list</a> <svg role="img"><title>remote link</title><use xlink:href="#icon-link"></use></svg></p>
             <% } %>
-            <% if (apps[item].FediAccount) { %>
-              <h4 class="card__subtitle">Contact</h4>
-              <p><a href="<%= apps[item].FediAccount %>">account</a> <svg role="img"><title>remote link</title><use xlink:href="#icon-link"></use></svg></p>
+            <% if (apps[item].description) { %>
+              <h4 class="card__subtitle">About</h4>
+              <p class="card__about">
+              <%- truncate( (apps[item].description), {length: 200, omission: '...'}) %>
+            </p>
             <% } %>
             <span class="card__more u-emphasize">more info<i>▶</i</span>
           </div>
@@ -91,11 +93,9 @@ layout: layout
             <% } %>
               <h4 class="card__subtitle">Protocols</h4>
               <p><%= apps[item].protocols %></p>
-            <% if (apps[item].description) { %>
-              <h4 class="card__subtitle">About</h4>
-              <p class="card__about">
-              <%- truncate( (apps[item].description), {length: 250, omission: '...'}) %>
-            </p>
+            <% if (apps[item].FediAccount) { %>
+              <h4 class="card__subtitle">Contact</h4>
+              <p><%= apps[item].FediAccount %></p>
             <% } %>
           </div>
         </div>
diff --git a/themes/starter/layout/tools.ejs b/themes/starter/layout/tools.ejs
index 917dd77..638b691 100644
--- a/themes/starter/layout/tools.ejs
+++ b/themes/starter/layout/tools.ejs
@@ -23,7 +23,7 @@ layout: layout
 
   const apps = site.data.tools.apps;
   const langList = langCount(apps).sort((a,b) => b.count - a.count);
-  const byCategory = [['libs', 'Libraries'], ['specs', 'Specifications'], ['utils', 'Utilities (bots, daemons, federators)'], ['relays', 'Relays'], ['bridges', 'Bridges'], ['plugins', 'Plugins (addon apps)'], ['tests', 'Testing'], ['other', 'Other']];
+  const byCategory = [['libs', 'Libraries'], ['specs', 'Specifications'], ['utils', 'Utilities (bots, daemons, federators)'], ['relays', 'Relays'], ['bridges', 'Bridges'], ['plugins', 'Plugins (addons)'], ['tests', 'Testing'], ['other', 'Other']];
   const byProtocol = [['sortDiaspora', 'diaspora'], ['sortAP', 'ActivityPub'], ['sortOstatus', 'OStatus'], ['sortZot', 'Zot']];
 %>
 
@@ -73,9 +73,11 @@ layout: layout
               <h4 class="card__subtitle">Servers</h4>
               <p><a href="<%= apps[item].servers %>">list</a> <svg role="img"><title>remote link</title><use xlink:href="#icon-link"></use></svg></p>
             <% } %>
-            <% if (apps[item].FediAccount) { %>
-              <h4 class="card__subtitle">Contact</h4>
-              <p><a href="<%= apps[item].FediAccount %>">account</a> <svg role="img"><title>remote link</title><use xlink:href="#icon-link"></use></svg></p>
+            <% if (apps[item].description) { %>
+              <h4 class="card__subtitle">About</h4>
+              <p class="card__about">
+              <%- truncate( (apps[item].description), {length: 200, omission: '...'}) %>
+            </p>
             <% } %>
             <span class="card__more u-emphasize">more info<i>▶</i</span>
           </div>
@@ -90,11 +92,9 @@ layout: layout
             <% } %>
               <h4 class="card__subtitle">Protocols</h4>
               <p><%= apps[item].protocols %></p>
-            <% if (apps[item].description) { %>
-              <h4 class="card__subtitle">About</h4>
-              <p class="card__about">
-              <%- truncate( (apps[item].description), {length: 250, omission: '...'}) %>
-            </p>
+            <% if (apps[item].FediAccount) { %>
+              <h4 class="card__subtitle">Contact</h4>
+              <p><%= apps[item].FediAccount %></p>
             <% } %>
           </div>
         </div>
diff --git a/themes/starter/source/assets/scss/modules/_misc.scss b/themes/starter/source/assets/scss/modules/_misc.scss
index 2532116..faf9117 100644
--- a/themes/starter/source/assets/scss/modules/_misc.scss
+++ b/themes/starter/source/assets/scss/modules/_misc.scss
@@ -98,7 +98,7 @@
 }
 
 .card__body {
-  padding: 2em;
+  padding: 1.5em;
 }
 
 .card__subtitle {
@@ -141,20 +141,20 @@
   position: relative;
   background: $white;
   border-radius: inherit;
-  width: 270px;
-  height: 360px;
+  width: 300px;
+  height: 420px;
   transition: .3s cubic-bezier(.175, .885, .32, 1.275);
 }
 
 .card__extra {
   position: absolute;
-  width: 350px;
-  height: 360px;
+  width: 300px;
+  height: 420px;
   left: 0;
   top: 0;
   border-radius: 0 8px 8px 0;
   transition: .15s cubic-bezier(.175, .885, .32, 1);
-  transform: translateX(70%) rotateX(90deg);
+  transform: translateX(90%) rotateX(90deg);
   opacity: 0;
   transform-origin: top;
   overflow: hidden;
@@ -183,13 +183,13 @@
   border-radius: 20%;
   background: linear-gradient(45deg, rgba(255, 255, 255, 1.0e-05) calc(50% - 2px), #fff calc(50% - 2px), #fff calc(50% + 2px), rgba(255, 255, 255, 1.0e-05) calc(50% + 2px)), linear-gradient(-45deg, rgba(255, 255, 255, 1.0e-05) calc(50% - 2px), #fff calc(50% - 2px), #fff calc(50% + 2px), rgba(255, 255, 255, 1.0e-05) calc(50% + 2px)), $golden;
   top: -30px;
-  right: -360px;
+  right: -290px;
   box-shadow: inset 0 0 0 5px $golden;
   z-index: $zIndex--5;
 }
 
 .card__content:before {
-  width: 660px;
+  width: 625px;
   height: 30px;
   top: -35px;
   left: -20px;
@@ -212,8 +212,8 @@
 .card:focus:before {
   content: "";
   position: absolute;
-  min-width: 660px;
-  min-height: 395px;
+  min-width: 625px;
+  min-height: 455px;
   top: -15px;
   left: -100px;
   background-color: rgba(0, 0, 0, .9);
@@ -229,7 +229,7 @@
   background: inherit;
   transition: opacity 0s ease-in, transform .2s ease-in;
   transition-delay: .1s;
-  transform: translateX(77%) rotateX(0deg);
+  transform: translateX(95%) rotateX(0deg);
   opacity: 1;
 }
 
@@ -295,6 +295,7 @@
   .card {
     flex: 95% 0 0;
     outline: none;
+    cursor: default;
   }
 
   .card:focus {
@@ -306,7 +307,6 @@
     flex-wrap: wrap;
     height: auto;
     width: 100%;
-    border-radius: 8px;
   }
 
   .card__content:before,
@@ -318,6 +318,7 @@
 
   .card:focus .card__content {
     transform: none;
+    border-radius: 8px;
   }
 
   .card:focus .card__extra {
@@ -335,7 +336,7 @@
 
   .card__extra {
     position: static;
-    flex: 60% 0 0;
+    flex: 50% 0 0;
     background: inherit;
     transition: opacity 0s ease-in, transform .2s ease-in;
     transition-delay: .1s;
@@ -361,17 +362,12 @@
 @media screen and (max-width: $mq-small) {
   .card {
     flex: 100% 0 0;
+    font-size: 95%;
   }
 
   .card__body,
   .card__extra {
     padding: 1.3em;
-  }
-}
-
-@media screen and (max-width: $mq-xsmall) {
-  .card__body,
-  .card__extra {
     flex: 100% 0 0;
   }