From 17fac8b7902adc8bf89d88a518a1e3950e6228fd Mon Sep 17 00:00:00 2001
From: Penelope Gwen <support@pogmom.me>
Date: Wed, 19 Feb 2025 16:53:05 -0800
Subject: [PATCH] filling out clients.html

---
 assets/views/footer.html | 20 ++++++++++----------
 assets/views/header.html | 14 +++++++-------
 clients.html             | 21 ++++++++++++++-------
 index.html               | 20 ++++++++++----------
 style/css/style.css      | 29 ++++++++++++++++++-----------
 5 files changed, 59 insertions(+), 45 deletions(-)

diff --git a/assets/views/footer.html b/assets/views/footer.html
index d2aa1db..5d9d0c5 100644
--- a/assets/views/footer.html
+++ b/assets/views/footer.html
@@ -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>
diff --git a/assets/views/header.html b/assets/views/header.html
index cd0d857..7717866 100644
--- a/assets/views/header.html
+++ b/assets/views/header.html
@@ -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>
diff --git a/clients.html b/clients.html
index 09ac95a..0543155 100644
--- a/clients.html
+++ b/clients.html
@@ -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>
diff --git a/index.html b/index.html
index a2b36b8..898e478 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/style/css/style.css b/style/css/style.css
index 5cf77bc..45f0c8d 100644
--- a/style/css/style.css
+++ b/style/css/style.css
@@ -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;*/