-
- <% if (apps[item].logo) { %>
<% } %>
-
+
<% } %>
+
<%= apps[item].title %>
+Something's missing? Add it.
Software no longer maintained, renamed, broken link? Please, let us know.
Special thanks to @strypey - for curating this list.
-Other sources: spreadsheet by @mayel, implementation report on activitypub.rocks website.
+Other sources: implementation report on activitypub.rocks website.
+ diff --git a/themes/starter/source/assets/scss/modules/_misc.scss b/themes/starter/source/assets/scss/modules/_misc.scss index f3857f1..aba46b0 100644 --- a/themes/starter/source/assets/scss/modules/_misc.scss +++ b/themes/starter/source/assets/scss/modules/_misc.scss @@ -1,5 +1,4 @@ - .miscellaneous .hero-header { max-height: 350px; box-shadow: 1px 1px 4px 2px $black; @@ -9,6 +8,7 @@ background: $asphalt; color: $white; min-height: 90%; + padding: 2em 13% 3em; } .misc svg { @@ -37,27 +37,32 @@ margin: 0 1em 0 .2em; } -.misc p:nth-of-type(n+5):nth-of-type(-n+16) { +.misc p:nth-of-type(n+5):nth-of-type(-n+15) { color: $white; } .misc__grid { display: flex; flex-wrap: wrap; - justify-content: space-between; - margin: 1.2em 0; + margin: 3em 0 0; } .misc__grid a { border: 0; } -.misc__grid .card { - background-color: $white; +.card { + background-color: transparent; color: $black; border-radius: 8px; - flex: 30% 0 0; - margin-bottom: 2em; + border-color: transparent; + flex: 33% 0 0; + margin-bottom: 3em; + font-size: inherit; + text-align: left; + transition: .2s ease; + cursor: pointer; + z-index: 1; } .card p { @@ -67,14 +72,10 @@ } .card__title { - margin-top: 1.2em; + padding-top: 1.2em; height: 45px; } -.card__title p { - color: $black; -} - .misc .title { float: right; width: 65%; @@ -85,7 +86,7 @@ } .card__body { - padding: 1em 2em 2em; + padding: 2em; } .card__subtitle { @@ -99,6 +100,131 @@ width: 45px; } +.card__about, +.card__more { + line-height: 1.1; +} + +.card__more { + position: absolute; + right: 20px; + bottom: 20px; + margin-top: .8em; + font-size: .95rem; +} + +.card__more i { + display: inline-block; + vertical-align: middle; + height: 13px; + margin-left: 2px; + font-size: .7rem; +} + +.card:focus .card__more { + display: none; +} + +.card__content { + position: relative; + background: $white; + border-radius: inherit; + width: 270px; + height: 360px; + transition: .3s cubic-bezier(.175, .885, .32, 1.275); +} + +.card__extra { + position: absolute; + width: 350px; + height: 360px; + left: 0; + top: 0; + border-radius: 0 8px 8px 0; + transition: .15s cubic-bezier(.175, .885, .32, 1); + transform: translateX(70%) rotateX(90deg); + opacity: 0; + transform-origin: top; + overflow: hidden; + padding: 1.5em; +} + +.card__extra p { + transition: opacity .3s ease; + transition-delay: .2s; + opacity: 0; +} + +.card__content:before, +.card__content:after { + content: ""; + position: absolute; + opacity: 0; + cursor: pointer; + transition: .1s ease; + pointer-events: none; +} + +.card__content:after { + width: 25px; + height: 25px; + 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; + box-shadow: inset 0 0 0 5px $golden; + z-index: $zIndex--5; +} + +.card__content:before { + width: 660px; + height: 30px; + top: -35px; + left: -20px; + background: rgba(0, 0, 0, .9); + border-radius: 16px 16px 0 0; + z-index: $zIndex--5; +} + +.card:focus { + outline: none; + transform: translateY(-10px) translateX(-80px); + z-index: $zIndex--4; +} + +.card:focus > .card__content:before, +.card:focus > .card__content:after { + opacity: 1; +} + +.card:focus:before { + content: ""; + position: absolute; + min-width: 660px; + min-height: 395px; + top: -15px; + left: -100px; + background-color: rgba(0, 0, 0, .9); + border-radius: 0 0 16px 16px; +} + +.card:focus .card__content { + transform: translateY(-10px) translateX(-80px); + border-radius: 8px 0 0 8px; +} + +.card:focus .card__extra { + background: inherit; + transition: opacity 0s ease-in, transform .2s ease-in; + transition-delay: .1s; + transform: translateX(77%) rotateX(0deg); + opacity: 1; +} + +.card:focus .card__extra p { + opacity: 1; +} + .option { display: inline-block; } @@ -115,7 +241,6 @@ .option + #evMeet:checked ~ .misc__grid .card:not(.Ev-Meet), .option + #files:checked ~ .misc__grid .card:not(.Files), .option + #dev:checked ~ .misc__grid .card:not(.DevTools), -.option + #econ:checked ~ .misc__grid .card:not(.Econ), .option + #coop:checked ~ .misc__grid .card:not(.Coop), .option + #plugins:checked ~ .misc__grid .card:not(.Plugins), .option + #relays:checked ~ .misc__grid .card:not(.Relays) { @@ -123,25 +248,92 @@ } @media screen and (max-width: $mq-large) { - .misc__grid .card { - flex: 32% 0 0; + .misc__grid { + justify-content: flex-end; } -} -@media screen and (max-width: $mq-medium) { - .misc__grid .card { + .card { flex: 45% 0 0; } } +@media screen and (max-width: $mq-medium) { + .misc__grid { + justify-content: flex-start; + } + + .card { + flex: 95% 0 0; + outline: none; + cursor: default; + pointer-events: none; + } + + .card__content { + display: flex; + flex-wrap: wrap; + height: auto; + width: 100%; + border-radius: 8px; + } + + .card__title { + flex: 100% 0 0; + padding-top: .5em; + } + + .card__body { + flex: 40% 0 0; + } + + .card__extra { + position: static; + flex: 60% 0 0; + background: inherit; + transition: opacity 0s ease-in, transform .2s ease-in; + transition-delay: .1s; + transform: translateX(77%) rotateX(0deg); + opacity: 1; + width: inherit; + height: inherit; + transform: none; + } + + .card__extra p { + opacity: 1; + } + + .card__more { + display: none; + } + + .misc .title { + width: 45%; + } +} + @media screen and (max-width: $mq-small) { - .misc__grid .card { - flex: 49% 0 0; + .card { + flex: 100% 0 0; + } + + .card__body, + .card__extra { + padding: 1.3em; } } @media screen and (max-width: $mq-xsmall) { - .misc__grid .card { + .card__body, + .card__extra { flex: 100% 0 0; } + + .card__body { + padding-bottom: 0; + } + + .card__extra { + padding-top: 0; + } } diff --git a/themes/starter/source/assets/scss/modules/_navbar.scss b/themes/starter/source/assets/scss/modules/_navbar.scss index b28e901..7250600 100644 --- a/themes/starter/source/assets/scss/modules/_navbar.scss +++ b/themes/starter/source/assets/scss/modules/_navbar.scss @@ -226,7 +226,7 @@ .revealer__toggle:focus ~ .u-hidden { opacity: 1; - visibility:visible; + visibility: visible; transform: matrix(1, 0, 0, 1, 0, -35); } diff --git a/themes/starter/source/assets/scss/partials/_colors.scss b/themes/starter/source/assets/scss/partials/_colors.scss index 69923b7..80c4796 100644 --- a/themes/starter/source/assets/scss/partials/_colors.scss +++ b/themes/starter/source/assets/scss/partials/_colors.scss @@ -3,7 +3,6 @@ $white: #ffffff; $golden: #fecb52; $coral: #e93a32; - $black: #0e0a0c; $asphalt: #171014; $grey: #b9b9b9; diff --git a/themes/starter/source/assets/scss/partials/_variables.scss b/themes/starter/source/assets/scss/partials/_variables.scss index 8648d14..dbb1cfb 100644 --- a/themes/starter/source/assets/scss/partials/_variables.scss +++ b/themes/starter/source/assets/scss/partials/_variables.scss @@ -1,3 +1,4 @@ + $mq-xsmall: 33.9em; // max-width 542px, xxSmall devices (portrait phones) $mq-small: 51em; // max-width 816px, small devices (landscape phones) $mq-medium: 64em; // max-width 1024px, medium devices (tablets) diff --git a/themes/starter/source/assets/scss/partials/_z-index.scss b/themes/starter/source/assets/scss/partials/_z-index.scss index 72a1656..d25fe46 100644 --- a/themes/starter/source/assets/scss/partials/_z-index.scss +++ b/themes/starter/source/assets/scss/partials/_z-index.scss @@ -1,7 +1,8 @@ // $zIndex-1: -1; -$zIndex--1: 1; // footer +$zIndex--1: 1; // footer, .card $zIndex--2: 2; // .main__container:after $zIndex--3: 3; // .grid, no-js -$zIndex--4: 4; // navbar, trigger, aside +$zIndex--4: 4; // navbar, trigger, aside, .card:focus +$zIndex--5: 5; // .card__content:before, .card__content:after