filling out clients.html

This commit is contained in:
Penelope Gwen 2025-02-19 16:53:05 -08:00
parent 597e9f98c1
commit 17fac8b790
5 changed files with 59 additions and 45 deletions

View file

@ -1,53 +1,53 @@
<div class="flexrow footer">
<div class="wrapgroup">
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://pogmom.me">
<img src="assets/img/icons/social/home.svg">
</a>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://masto.pogmom.me/@pogmommy">
<img src="assets/img/icons/social/mastodon.svg">
</a>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="http://pixel.pogmom.me/pogmommy">
<img alt="pixelfed icon" src="assets/img/icons/social/pixelfed.svg">
</a>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://peertube.pogmom.me/a/pogmommy">
<img src="assets/img/icons/social/peertube.svg">
</a>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://matrix.to/#/@pogmommy:matrix.pogmom.me">
<img src="assets/img/icons/social/matrix.svg">
</a>
</div>
</div>
<div class="wrapgroup">
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://git.pogmom.me/pogmommy">
<img src="assets/img/icons/social/gitea.svg">
</a>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="mailto:penelope@pogmom.me">
<img src="assets/img/icons/social/email.svg">
</a>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://trakt.tv/users/pogmommy">
<img src="assets/img/icons/social/trakt.svg">
</a>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://www.last.fm/user/Pogmommy">
<img src="assets/img/icons/social/lastfm.svg">
</a>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://merch.pogmom.me">
<img src="assets/img/icons/social/shop.svg">
</a>

View file

@ -1,24 +1,24 @@
<div class="flexrow header">
<div class="wrapgroup">
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="/">
<img alt="account icon" src="/assets/img/icons/header/suite.svg">
<p>suite</p>
</a>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://accounts.pogmom.me">
<img alt="account icon" src="/assets/img/icons/header/accounts.svg">
<p>account</p>
</a>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://cloud.pogmom.me/apps/forms/s/wsEkks78nqJEZCkEYpGoMNr5">
<img src="/assets/img/icons/header/register.svg">
<p>register</p>
</a>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://requests.pogmom.me/">
<img src="/assets/img/icons/header/request.svg">
<p>request</p>
@ -26,19 +26,19 @@
</div>
</div>
<div class="wrapgroup">
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="/about.html">
<img src="/assets/img/icons/header/info.svg">
<p>about</p>
</a>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://liberapay.com/pogmommy/donate">
<img src="/assets/img/icons/header/donate.svg">
<p>donate</p>
</a>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://pogmom.me/status.html">
<img src="/assets/img/icons/header/status.svg">
<p>status</p>

View file

@ -16,14 +16,14 @@
<div class="flexrow">
<div class="clientgroup pinkborder">
<h2>Desktop</h2>
<p>Visit the <a href="https://nextcloud.com/install/#desktop-files">Nextcloud website</a> to download the desktop client for your system.</p>
<p>Visit the Nextcloud website to download the desktop client for your system.</p><a class="button pinkborder" href="https://nextcloud.com/install/#desktop-files">Visit Now &gt;</a>
</div>
<div class="clientgroup pinkborder">
<h2>Mobile</h2>
<h3>Android</h3>
<p>Nextcloud<br>Official Nextcloud client for Android<br><a href="https://f-droid.org/packages/com.nextcloud.client/">F-Droid &gt;</a><br><a href="https://play.google.com/store/apps/details?id=com.nextcloud.client">Google Play Store &gt;</a></p>
<p>Nextcloud<br>Official Nextcloud client for Android</p><a class="button pinkborder" href="https://f-droid.org/packages/com.nextcloud.client/">F-Droid &gt;</a><a class="button pinkborder" href="https://play.google.com/store/apps/details?id=com.nextcloud.client">Google Play Store &gt;</a>
<h3>iOS</h3>
<p>Nextcloud<br>Official Nextcloud client for iOS<br><a href="https://itunes.apple.com/us/app/nextcloud/id1125420102">App Store &gt;</a></p>
<p>Nextcloud<br>Official Nextcloud client for iOS</p><a class="button pinkborder" href="https://itunes.apple.com/us/app/nextcloud/id1125420102">App Store &gt;</a>
</div>
</div>
</h2>
@ -33,15 +33,15 @@
<div class="flexrow">
<div class="clientgroup pinkborder">
<h2>Desktop</h2>
<p>It is recommended to use your browser to interface with Mastodon on desktop platforms</p>
<p>It is recommended to use your browser to interface with Mastodon on desktop platforms</p><a class="button pinkborder" href="https://masto.pogmom.me/">Visit Now &gt;</a>
</div>
<div class="clientgroup pinkborder">
<h2>Mobile</h2>
<h3>Android</h3>
<p>Fedilab<br>A multifunctional Android client to access the distributed Fediverse<br><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/">F-Droid &gt;</a><br><a href="https://play.google.com/store/apps/details?id=app.fedilab.android">Google Play Store &gt;</a></p>
<p>Mastodon<br>Official Mastodon client for Android<br><a href="https://f-droid.org/packages/org.joinmastodon.android/">F-Droid &gt;</a><br><a href="https://play.google.com/store/apps/details?id=org.joinmastodon.android">Google Play Store &gt;</a></p>
<p>Fedilab<br>A multifunctional Android client to access the distributed Fediverse</p><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/">F-Droid &gt;</a><br><a class="button pinkborder" href="https://play.google.com/store/apps/details?id=app.fedilab.android">Google Play Store &gt;</a>
<p>Mastodon<br>Official Mastodon client for Android</p><a class="button pinkborder" href="https://f-droid.org/packages/org.joinmastodon.android/">F-Droid &gt;</a><a class="button pinkborder" href="https://play.google.com/store/apps/details?id=org.joinmastodon.android">Google Play Store &gt;</a>
<h3>iOS</h3>
<p>Mastodon<br>Official Mastodon client for iOS<br><a href="https://apps.apple.com/us/app/mastodon-for-iphone/id1571998974">App Store &gt;</a></p>
<p>Mastodon<br>Official Mastodon client for iOS</p><a class="button pinkborder" href="https://apps.apple.com/us/app/mastodon-for-iphone/id1571998974">App Store &gt;</a>
</div>
</div>
</div>
@ -61,9 +61,12 @@
<div class="flexrow">
<div class="clientgroup pinkborder">
<h2>Desktop</h2>
<p>It is recommended to use your browser to interface with Mastodon on desktop platforms</p><a class="button pinkborder" href="https://masto.pogmom.me/">Visit Now &gt;</a>
</div>
<div class="clientgroup pinkborder">
<h2>Mobile</h2>
<h3>Android</h3>
<p>Fedilab<br>A multifunctional Android client to access the distributed Fediverse<br><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/">F-Droid &gt;</a><br><a class="button pinkborder" href="https://play.google.com/store/apps/details?id=app.fedilab.android">Google Play Store &gt;</a></p>
</div>
</div>
</div>
@ -127,6 +130,10 @@
<div class="flexrow">
<div class="clientgroup pinkborder">
<h2>Desktop</h2>
<h3>Prism Launcher</h3>
<p>Linux | MacOS | Windows</p>
<p>A fully-featured Minecraft Java Edition Launcher</p>
<a class="button pinkborder" href="https://prismlauncher.org/">Download &gt;</a>
</div>
<div class="clientgroup pinkborder">
<h2>Mobile</h2>

View file

@ -14,7 +14,7 @@
<h2>Social</h2>
<div class="flexrow">
<div class="wrapgroup">
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://cloud.pogmom.me">
<img src="assets/img/icons/suite/nextcloud.svg">
<p>Nextcloud</p>
@ -28,7 +28,7 @@
</a>
</div>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://masto.pogmom.me">
<img src="assets/img/icons/suite/mastodon.svg">
<p>Mastodon</p>
@ -44,7 +44,7 @@
</div>
</div>
<div class="wrapgroup">
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://pixel.pogmom.me">
<img src="assets/img/icons/suite/pixelfed.svg">
<p>Pixelfed</p>
@ -58,7 +58,7 @@
</a>
</div>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://peertube.pogmom.me">
<img src="assets/img/icons/suite/peertube.svg">
<p>Peertube</p>
@ -72,7 +72,7 @@
</a>
</div>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://chat.pogmom.me">
<img src="assets/img/icons/suite/element.svg">
<p>Element</p>
@ -91,7 +91,7 @@
<h2>Multimedia</h2>
<div class="flexrow">
<div class="wrapgroup">
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://listen.pogmom.me">
<img src="assets/img/icons/suite/jellyfin.svg">
<p>Jellyfin</p>
@ -105,7 +105,7 @@
</a>
</div>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://listen.pogmom.me">
<img src="assets/img/icons/suite/airsonic.svg">
<p>Airsonic</p>
@ -119,7 +119,7 @@
</a>
</div>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://listen.pogmom.me">
<img src="assets/img/icons/suite/calibre.svg">
<p>Calibre</p>
@ -138,7 +138,7 @@
<h2>Games</h2>
<div class="flexrow">
<div class="wrapgroup">
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://mc.pogmom.me">
<img src="assets/img/icons/suite/emulatorjs.svg">
<p>EmuJS</p>
@ -152,7 +152,7 @@
</a>
</div>
</div>
<div class="flexbutton pinkborder">
<div class="flexobject button pinkborder">
<a href="https://mc.pogmom.me">
<img src="assets/img/icons/suite/minecraft.svg">
<p>Minecraft</p>

View file

@ -29,7 +29,7 @@ h1 {
flex: 0 1 0px;
}
.header {
.wrapgroup > .flexbutton {
.wrapgroup > .flexobject {
a {
min-width: 45px;
img {
@ -42,12 +42,12 @@ h1 {
}
}
.footer {
.wrapgroup > .flexbutton > a {
.wrapgroup > .flexobject > a {
min-width: 35px;
/* padding: 1vmax;*/
}
}
.flexbutton,.flexbutton > a {
.flexobject,.flexobject > a {
display: flex;
flex-direction: column;
justify-content: center;
@ -58,9 +58,18 @@ h1 {
border-width: 3px;
border-radius: 8px;
}
.flexbutton {
.button {
margin: 1vh 1vw;
transition: 0.5s;
display:block;
}
.button:hover {
box-shadow: 0px 0px 30px #da75e5dd;
transition: 0.25s;
}
.flexobject {
/* margin: 1vh 1vw;
transition: 0.5s;*/
> a {
min-width: 75px;
text-decoration: none;
@ -88,19 +97,17 @@ h1 {
}
}
}
.flexbutton:hover {
box-shadow: 0px 0px 30px #da75e5dd;
transition: 0.25s;
}
.textsection {
padding: 0 2vw 2vh;
margin: 2vh 10vw;
}
.clientgroup{
width: 40%;
flex: 1 1 0px;
flex-wrap: wrap;
min-width: 30vh;
/* flex-grow:1;*/
margin: 0vh 2vw;
padding: 0 2vw 2vh;
margin: 2vh 2vw;
}
:target {
/* box-shadow: 0px 0px 30px #da75e5dd;*/