pogmommy/pogmom-suite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

filling out clients.html

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

20
assets/views/footer.html
View file

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

14
assets/views/header.html
View file

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

21
clients.html
View file

@ -16,14 +16,14 @@
<div class="flexrow"> <div class="flexrow">
<div class="clientgroup pinkborder"> <div class="clientgroup pinkborder">
<h2>Desktop</h2> <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>
<div class="clientgroup pinkborder"> <div class="clientgroup pinkborder">
<h2>Mobile</h2> <h2>Mobile</h2>
<h3>Android</h3> <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> <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>
</div> </div>
</h2> </h2>
@ -33,15 +33,15 @@
<div class="flexrow"> <div class="flexrow">
<div class="clientgroup pinkborder"> <div class="clientgroup pinkborder">
<h2>Desktop</h2> <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>
<div class="clientgroup pinkborder"> <div class="clientgroup pinkborder">
<h2>Mobile</h2> <h2>Mobile</h2>
<h3>Android</h3> <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>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<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>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> <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> </div>
</div> </div>
@ -61,9 +61,12 @@
<div class="flexrow"> <div class="flexrow">
<div class="clientgroup pinkborder"> <div class="clientgroup pinkborder">
<h2>Desktop</h2> <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>
<div class="clientgroup pinkborder"> <div class="clientgroup pinkborder">
<h2>Mobile</h2> <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> </div>
</div> </div>
@ -127,6 +130,10 @@
<div class="flexrow"> <div class="flexrow">
<div class="clientgroup pinkborder"> <div class="clientgroup pinkborder">
<h2>Desktop</h2> <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>
<div class="clientgroup pinkborder"> <div class="clientgroup pinkborder">
<h2>Mobile</h2> <h2>Mobile</h2>

20
index.html
View file

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

29
style/css/style.css
View file

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