devol
/
guida-fediverso
mirror of https://git.feneas.org/feneas/fediverse.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Move About to front card, closes #29

This commit is contained in:
lostinlight 2020-08-25 04:37:38 +03:00
parent d8d803f283
commit 31f5d80ab5
6 changed files with 76 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
CONTRIBUTING.md
View File

@ -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. 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) #### Software categories (WIP, may change in the future)
* `SN-ma` (social network: macroblogging) * `SN-ma` (social network: macroblogging)
* `SN-mi` (social network: microblogging) * `SN-mi` (social network: microblogging)
* `Blog-Pub` (blog and publishing software) * `Blog-Pub` (blog and publishing software)
* `Media` (media sharing: images, audio, etc) * `Media` (media sharing: images, audio, video, etc)
* `Links` (link sharing) * `Links` (link sharing)
* `Ev-Meet` (events, meetups, calendars) * `Ev-Meet` (events, meetups, calendars)
* `Files` (file hosting software) * `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) * `Open data` (dataset / corpora exchange)
* `Reviews` (networks whose main purpose is reviewing stuff) * `Reviews` (networks whose main purpose is reviewing stuff)
* `Games` (gaming servers and apps) * `Games` (gaming servers and apps)
* `Develop` (software development applications)
A project may have a logo / image (45x45px), placed in `./source/img/misc` folder. A project may have a logo / image (45x45px), placed in `./source/img/misc` folder.
### [Submitting tools](#submitting-tools) ### [Submitting tools](#submitting-tools)
Fork this repository. Add your project data to `./source/_data/tools.json` file. 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) #### Tools categories (WIP, may change in the future)
* `Libs` (frameworks, libraries, reference implementations in particular code language) * `Libs` (frameworks, libraries, reference implementations in particular code language)
* `Specs` (Fediverse protocol specifications) * `Specs` (Fediverse protocol specifications)
* `Tools` (for developer and geeky tools, like pastebins, git systems, pads, etc) * `Utils` (Utilities: daemons, bots, resharers)
* `Utils` (daemons, bots, resharers, and other such services for Fediverse)
* `Relays` (Fediverse relays) * `Relays` (Fediverse relays)
* `Bridges` (bridging other stuff to fediverse networks) * `Bridges` (bridging other stuff to fediverse networks)
* `Tests` (any kind of test tools) * `Tests` (any kind of test tools)
* `Plugins` (CMS plugins, apps to be installed inside other systems connecting to Fediverse) * `Plugins` (CMS plugins, apps to be installed inside other systems connecting to Fediverse)
* `Other` (everything that doesn't quite fit into the above categories) * `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) ### [Submitting news](#submitting-news)
Please, read our [guidelines](./GUIDELINES.md) for guest authors. Please, read our [guidelines](./GUIDELINES.md) for guest authors.

54
source/_data/miscellaneous.json
View File

@ -12,7 +12,7 @@
"codeLanguage": "Go", "codeLanguage": "Go",
"techStack": "Node.js, LESS", "techStack": "Node.js, LESS",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://writing.exchange/@write_as", "FediAccount": "@write_as@writing.exchange",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -30,7 +30,7 @@
"codeLanguage": "Rust", "codeLanguage": "Rust",
"techStack": "Rocket, Diesel, Ructe templates, WASM, SCSS", "techStack": "Rocket, Diesel, Ructe templates, WASM, SCSS",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://fediverse.blog/~/PlumeDev", "FediAccount": "@PlumeDev@fediverse.blog",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -62,7 +62,7 @@
"site": "https://epicyon.net", "site": "https://epicyon.net",
"logo": "/img/misc/epicyon.png", "logo": "/img/misc/epicyon.png",
"servers": "https://the-federation.info/epicyon", "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", "codeLanguage": "Python",
"techStack": "", "techStack": "",
"license": "AGPL-3.0", "license": "AGPL-3.0",
@ -84,7 +84,7 @@
"codeLanguage": "Ruby", "codeLanguage": "Ruby",
"techStack": "Node.js", "techStack": "Node.js",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://mastodon.social/@prismo", "FediAccount": "@prismo@mastodon.social",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -174,7 +174,7 @@
"codeLanguage": "PHP", "codeLanguage": "PHP",
"techStack": "", "techStack": "",
"license": "GPL-3.0", "license": "GPL-3.0",
"FediAccount": "https://mastodon.xyz/@David", "FediAccount": "@David@mastodon.xyz",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -192,7 +192,7 @@
"codeLanguage": "Python", "codeLanguage": "Python",
"techStack": "Tornado, peewee", "techStack": "Tornado, peewee",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://mastodon.social/@anfora", "FediAccount": "@anfora@mastodon.social",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -228,7 +228,7 @@
"codeLanguage": "Rust", "codeLanguage": "Rust",
"techStack": "Actix, Diesel, Inferno, TypeScript", "techStack": "Actix, Diesel, Inferno, TypeScript",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://mastodon.social/@LemmyDev", "FediAccount": "@LemmyDev@mastodon.social",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -264,7 +264,7 @@
"codeLanguage": "Elixir", "codeLanguage": "Elixir",
"techStack": "Vue, TypeScript", "techStack": "Vue, TypeScript",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://framapiaf.org/@mobilizon", "FediAccount": "@mobilizon@ramapiaf.org",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -354,7 +354,7 @@
"codeLanguage": "Go", "codeLanguage": "Go",
"techStack": "", "techStack": "",
"license": "MIT", "license": "MIT",
"FediAccount": "https://metalhead.club/@mariusor", "FediAccount": "@mariusor@metalhead.club",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -408,7 +408,7 @@
"codeLanguage": "Go", "codeLanguage": "Go",
"techStack": "", "techStack": "",
"license": "ISC", "license": "ISC",
"FediAccount": "https://honk.tedunangst.com/u/tedu", "FediAccount": "@tedu@honk.tedunangst.com",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -426,7 +426,7 @@
"codeLanguage": "Java", "codeLanguage": "Java",
"techStack": "", "techStack": "",
"license": "Unlicense (public domain)", "license": "Unlicense (public domain)",
"FediAccount": "https://mastodon.social/@grishka", "FediAccount": "@grishka@mastodon.social",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -606,7 +606,7 @@
"codeLanguage": "Go", "codeLanguage": "Go",
"techStack": "", "techStack": "",
"license": "MIT", "license": "MIT",
"FediAccount": "https://mastodon.social/@ngerakines", "FediAccount": "@ngerakines@mastodon.social",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -624,7 +624,7 @@
"codeLanguage": "Python", "codeLanguage": "Python",
"techStack": "Django, Vue, Nuxt, Spectre.css, Zutre", "techStack": "Django, Vue, Nuxt, Spectre.css, Zutre",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://mastodon.etalab.gouv.fr/@scifed", "FediAccount": "@scifed@mastodon.etalab.gouv.fr",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -656,7 +656,7 @@
"site": "https://skohub.io", "site": "https://skohub.io",
"logo": "", "logo": "",
"servers": "", "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", "codeLanguage": "Javascript",
"techStack": "", "techStack": "",
"license": "Apache-2.0", "license": "Apache-2.0",
@ -732,7 +732,7 @@
"codeLanguage": "Go", "codeLanguage": "Go",
"techStack": "", "techStack": "",
"license": "-", "license": "-",
"FediAccount": "https://mastodon.lubar.me/@ben", "FediAccount": "@ben@mastodon.lubar.me",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -750,7 +750,7 @@
"codeLanguage": "TypeScript", "codeLanguage": "TypeScript",
"techStack": "Node.js", "techStack": "Node.js",
"license": "MIT", "license": "MIT",
"FediAccount": "https://mastodon.social/@kosinus", "FediAccount": "@kosinus@mastodon.social",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -804,7 +804,7 @@
"codeLanguage": "Javascript", "codeLanguage": "Javascript",
"techStack": "Node.js", "techStack": "Node.js",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://floss.social/@Readlebee", "FediAccount": "@Readlebee@floss.social",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -894,7 +894,7 @@
"codeLanguage": "Python", "codeLanguage": "Python",
"techStack": "", "techStack": "",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://mastodon.technology/@agateblue", "FediAccount": "@agateblue@mastodon.technology",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -948,7 +948,7 @@
"codeLanguage": "Javascript", "codeLanguage": "Javascript",
"techStack": "Node.js, Vue", "techStack": "Node.js, Vue",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://misskey.io/@syuilo", "FediAccount": "@syuilo@misskey.io",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -984,7 +984,7 @@
"codeLanguage": "PHP", "codeLanguage": "PHP",
"techStack": "", "techStack": "",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://mastodon.social/@pixelfed", "FediAccount": "@pixelfed@mastodon.social",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -1002,7 +1002,7 @@
"codeLanguage": "Elixir", "codeLanguage": "Elixir",
"techStack": "Vue", "techStack": "Vue",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://pleroma.soykaf.com/lain", "FediAccount": "@lain@pleroma.soykaf.com",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -1016,11 +1016,11 @@
"site": "https://socialhome.network", "site": "https://socialhome.network",
"logo": "/img/misc/socialhome.svg", "logo": "/img/misc/socialhome.svg",
"servers": "https://the-federation.info/socialhome", "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", "codeLanguage": "Python",
"techStack": "Django, Vue", "techStack": "Django, Vue",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://jasonrobinson.me/p/da323072-e566-4b6e-a8b6-b2bda0c6ace4", "FediAccount": "@jaywink@jasonrobinson.me",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": true, "diasporaClass": true,
@ -1038,7 +1038,7 @@
"codeLanguage": "Ruby", "codeLanguage": "Ruby",
"techStack": "React, SASS, Node.js", "techStack": "React, SASS, Node.js",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://mastodon.social/@gargron", "FediAccount": "@gargron@mastodon.social",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -1056,7 +1056,7 @@
"codeLanguage": "", "codeLanguage": "",
"techStack": "", "techStack": "",
"license": "", "license": "",
"FediAccount": "https://chaos.social/@redaktor", "FediAccount": "@redaktor@chaos.social",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -1074,7 +1074,7 @@
"codeLanguage": "", "codeLanguage": "",
"techStack": "", "techStack": "",
"license": "-", "license": "-",
"FediAccount": "https://bitcoinhackers.org@berkes", "FediAccount": "@berkes@bitcoinhackers.org",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -1092,7 +1092,7 @@
"codeLanguage": "C", "codeLanguage": "C",
"techStack": "Elm", "techStack": "Elm",
"license": "CNPL", "license": "CNPL",
"FediAccount": "https://octodon.social/@parastat", "FediAccount": "@parastat@octodon.social",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,

12
source/_data/tools.json
View File

@ -30,7 +30,7 @@
"codeLanguage": "", "codeLanguage": "",
"techStack": "", "techStack": "",
"license": "CC-1.0", "license": "CC-1.0",
"FediAccount": "https://floss.social/@forgefed", "FediAccount": "@forgefed@floss.social",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -174,7 +174,7 @@
"codeLanguage": "PHP", "codeLanguage": "PHP",
"techStack": "", "techStack": "",
"license": "MIT", "license": "MIT",
"FediAccount": "https://mastodon.technology/@jdormit", "FediAccount": "@jdormit@mastodon.technology",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -372,7 +372,7 @@
"codeLanguage": "PHP", "codeLanguage": "PHP",
"techStack": "", "techStack": "",
"license": "MIT", "license": "MIT",
"FediAccount": "https://mastodon.technology/@jdormit", "FediAccount": "@jdormit@mastodon.technology",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -426,7 +426,7 @@
"codeLanguage": "PHP", "codeLanguage": "PHP",
"techStack": "", "techStack": "",
"license": "MIT", "license": "MIT",
"FediAccount": "https://cybre.space/@landrok", "FediAccount": "@landrok@cybre.space",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -444,7 +444,7 @@
"codeLanguage": "Go", "codeLanguage": "Go",
"techStack": "", "techStack": "",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"FediAccount": "https://social.matej-lach.me/@MatejLach", "FediAccount": "@MatejLach@social.matej-lach.me",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,
@ -570,7 +570,7 @@
"codeLanguage": "Go", "codeLanguage": "Go",
"techStack": "", "techStack": "",
"license": "MIT", "license": "MIT",
"FediAccount": "https://metalhead.club/@mariusor", "FediAccount": "@mariusor@metalhead.club",
"apClass": true, "apClass": true,
"zotClass": false, "zotClass": false,
"diasporaClass": false, "diasporaClass": false,

16
themes/starter/layout/miscellaneous.ejs
View File

@ -74,9 +74,11 @@ layout: layout
<h4 class="card__subtitle">Servers</h4> <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> <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) { %> <% if (apps[item].description) { %>
<h4 class="card__subtitle">Contact</h4> <h4 class="card__subtitle">About</h4>
<p><a href="<%= apps[item].FediAccount %>">account</a> <svg role="img"><title>remote link</title><use xlink:href="#icon-link"></use></svg></p> <p class="card__about">
<%- truncate( (apps[item].description), {length: 200, omission: '...'}) %>
</p>
<% } %> <% } %>
<span class="card__more u-emphasize">more info<i>▶</i</span> <span class="card__more u-emphasize">more info<i>▶</i</span>
</div> </div>
@ -91,11 +93,9 @@ layout: layout
<% } %> <% } %>
<h4 class="card__subtitle">Protocols</h4> <h4 class="card__subtitle">Protocols</h4>
<p><%= apps[item].protocols %></p> <p><%= apps[item].protocols %></p>
<% if (apps[item].description) { %> <% if (apps[item].FediAccount) { %>
<h4 class="card__subtitle">About</h4> <h4 class="card__subtitle">Contact</h4>
<p class="card__about"> <p><%= apps[item].FediAccount %></p>
<%- truncate( (apps[item].description), {length: 250, omission: '...'}) %>
</p>
<% } %> <% } %>
</div> </div>
</div> </div>

18
themes/starter/layout/tools.ejs
View File

@ -23,7 +23,7 @@ layout: layout
const apps = site.data.tools.apps; const apps = site.data.tools.apps;
const langList = langCount(apps).sort((a,b) => b.count - a.count); 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']]; const byProtocol = [['sortDiaspora', 'diaspora'], ['sortAP', 'ActivityPub'], ['sortOstatus', 'OStatus'], ['sortZot', 'Zot']];
%> %>
@ -73,9 +73,11 @@ layout: layout
<h4 class="card__subtitle">Servers</h4> <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> <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) { %> <% if (apps[item].description) { %>
<h4 class="card__subtitle">Contact</h4> <h4 class="card__subtitle">About</h4>
<p><a href="<%= apps[item].FediAccount %>">account</a> <svg role="img"><title>remote link</title><use xlink:href="#icon-link"></use></svg></p> <p class="card__about">
<%- truncate( (apps[item].description), {length: 200, omission: '...'}) %>
</p>
<% } %> <% } %>
<span class="card__more u-emphasize">more info<i>▶</i</span> <span class="card__more u-emphasize">more info<i>▶</i</span>
</div> </div>
@ -90,11 +92,9 @@ layout: layout
<% } %> <% } %>
<h4 class="card__subtitle">Protocols</h4> <h4 class="card__subtitle">Protocols</h4>
<p><%= apps[item].protocols %></p> <p><%= apps[item].protocols %></p>
<% if (apps[item].description) { %> <% if (apps[item].FediAccount) { %>
<h4 class="card__subtitle">About</h4> <h4 class="card__subtitle">Contact</h4>
<p class="card__about"> <p><%= apps[item].FediAccount %></p>
<%- truncate( (apps[item].description), {length: 250, omission: '...'}) %>
</p>
<% } %> <% } %>
</div> </div>
</div> </div>

34
themes/starter/source/assets/scss/modules/_misc.scss
View File

@ -98,7 +98,7 @@
} }
.card__body { .card__body {
padding: 2em; padding: 1.5em;
} }
.card__subtitle { .card__subtitle {
@ -141,20 +141,20 @@
position: relative; position: relative;
background: $white; background: $white;
border-radius: inherit; border-radius: inherit;
width: 270px; width: 300px;
height: 360px; height: 420px;
transition: .3s cubic-bezier(.175, .885, .32, 1.275); transition: .3s cubic-bezier(.175, .885, .32, 1.275);
} }
.card__extra { .card__extra {
position: absolute; position: absolute;
width: 350px; width: 300px;
height: 360px; height: 420px;
left: 0; left: 0;
top: 0; top: 0;
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
transition: .15s cubic-bezier(.175, .885, .32, 1); transition: .15s cubic-bezier(.175, .885, .32, 1);
transform: translateX(70%) rotateX(90deg); transform: translateX(90%) rotateX(90deg);
opacity: 0; opacity: 0;
transform-origin: top; transform-origin: top;
overflow: hidden; overflow: hidden;
@ -183,13 +183,13 @@
border-radius: 20%; 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; 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; top: -30px;
right: -360px; right: -290px;
box-shadow: inset 0 0 0 5px $golden; box-shadow: inset 0 0 0 5px $golden;
z-index: $zIndex--5; z-index: $zIndex--5;
} }
.card__content:before { .card__content:before {
width: 660px; width: 625px;
height: 30px; height: 30px;
top: -35px; top: -35px;
left: -20px; left: -20px;
@ -212,8 +212,8 @@
.card:focus:before { .card:focus:before {
content: ""; content: "";
position: absolute; position: absolute;
min-width: 660px; min-width: 625px;
min-height: 395px; min-height: 455px;
top: -15px; top: -15px;
left: -100px; left: -100px;
background-color: rgba(0, 0, 0, .9); background-color: rgba(0, 0, 0, .9);
@ -229,7 +229,7 @@
background: inherit; background: inherit;
transition: opacity 0s ease-in, transform .2s ease-in; transition: opacity 0s ease-in, transform .2s ease-in;
transition-delay: .1s; transition-delay: .1s;
transform: translateX(77%) rotateX(0deg); transform: translateX(95%) rotateX(0deg);
opacity: 1; opacity: 1;
} }
@ -295,6 +295,7 @@
.card { .card {
flex: 95% 0 0; flex: 95% 0 0;
outline: none; outline: none;
cursor: default;
} }
.card:focus { .card:focus {
@ -306,7 +307,6 @@
flex-wrap: wrap; flex-wrap: wrap;
height: auto; height: auto;
width: 100%; width: 100%;
border-radius: 8px;
} }
.card__content:before, .card__content:before,
@ -318,6 +318,7 @@
.card:focus .card__content { .card:focus .card__content {
transform: none; transform: none;
border-radius: 8px;
} }
.card:focus .card__extra { .card:focus .card__extra {
@ -335,7 +336,7 @@
.card__extra { .card__extra {
position: static; position: static;
flex: 60% 0 0; flex: 50% 0 0;
background: inherit; background: inherit;
transition: opacity 0s ease-in, transform .2s ease-in; transition: opacity 0s ease-in, transform .2s ease-in;
transition-delay: .1s; transition-delay: .1s;
@ -361,17 +362,12 @@
@media screen and (max-width: $mq-small) { @media screen and (max-width: $mq-small) {
.card { .card {
flex: 100% 0 0; flex: 100% 0 0;
font-size: 95%;
} }
.card__body, .card__body,
.card__extra { .card__extra {
padding: 1.3em; padding: 1.3em;
}
}
@media screen and (max-width: $mq-xsmall) {
.card__body,
.card__extra {
flex: 100% 0 0; flex: 100% 0 0;
} }