From c7683f0e14e0fc8c1a9eaf296384e0e2b94c1306 Mon Sep 17 00:00:00 2001
From: Penelope Gwen <support@pogmom.me>
Date: Tue, 18 Feb 2025 18:28:04 -0800
Subject: [PATCH] third version

---
 .about.html.swp          | Bin 1024 -> 0 bytes
 assets/views/footer.html |  20 +++++-----
 assets/views/header.html |  71 +++++++++++++++++++++---------------
 index.html               |  74 ++++++++++++++++++++++++-------------
 style/css/style.css      |  77 ++++++++++++++++++---------------------
 5 files changed, 136 insertions(+), 106 deletions(-)
 delete mode 100644 .about.html.swp

diff --git a/.about.html.swp b/.about.html.swp
deleted file mode 100644
index 9c05af85c650f9829dea7b9e1b6d8715562b3a46..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1024
zcmYc?$V<%2SFq4CW<UW`422mA^3!wkb8{<EB(QK`>U8sSQ}c9<jVuZb6BDthOH9fy
aEz!#;$<4tcIVv<70;3^7>ktS<w*UZrOcNFW

diff --git a/assets/views/footer.html b/assets/views/footer.html
index 4e1183c..34204b3 100644
--- a/assets/views/footer.html
+++ b/assets/views/footer.html
@@ -1,35 +1,35 @@
 <div class="flexrow footer">
     <div class="wrapgroup">
-      <a href="https://pogmom.me" class="flexitem">
+      <a href="https://pogmom.me" class="flexbutton">
         <img src="assets/img/icons/social/home.svg">
       </a>
-      <a href="https://masto.pogmom.me/@pogmommy" class="flexitem">
+      <a href="https://masto.pogmom.me/@pogmommy" class="flexbutton">
         <img src="assets/img/icons/social/mastodon.svg">
       </a>
-      <a href="http://pixel.pogmom.me/pogmommy" class="flexitem">
+      <a href="http://pixel.pogmom.me/pogmommy" class="flexbutton">
         <img alt="pixelfed icon" src="assets/img/icons/social/pixelfed.svg">
       </a>
-      <a href="https://peertube.pogmom.me/a/pogmommy" class="flexitem">
+      <a href="https://peertube.pogmom.me/a/pogmommy" class="flexbutton">
         <img src="assets/img/icons/social/peertube.svg">
       </a>
-      <a href="https://matrix.to/#/@pogmommy:matrix.pogmom.me" class="flexitem">
+      <a href="https://matrix.to/#/@pogmommy:matrix.pogmom.me" class="flexbutton">
         <img src="assets/img/icons/social/matrix.svg">
       </a>
     </div>
     <div class="wrapgroup">
-      <a href="https://git.pogmom.me/pogmommy" class="flexitem">
+      <a href="https://git.pogmom.me/pogmommy" class="flexbutton">
         <img src="assets/img/icons/social/gitea.svg">
       </a>
-      <a href="mailto:penelope@pogmom.me" class="flexitem">
+      <a href="mailto:penelope@pogmom.me" class="flexbutton">
         <img src="assets/img/icons/social/email.svg">
       </a>
-      <a href="https://trakt.tv/users/pogmommy" class="flexitem">
+      <a href="https://trakt.tv/users/pogmommy" class="flexbutton">
         <img src="assets/img/icons/social/trakt.svg">
       </a>
-      <a href="https://www.last.fm/user/Pogmommy" class="flexitem">
+      <a href="https://www.last.fm/user/Pogmommy" class="flexbutton">
         <img src="assets/img/icons/social/lastfm.svg">
       </a>
-      <a href="https://merch.pogmom.me" class="flexitem">
+      <a href="https://merch.pogmom.me" class="flexbutton">
         <img src="assets/img/icons/social/shop.svg">
       </a>
     </div>
diff --git a/assets/views/header.html b/assets/views/header.html
index 5e03bc2..8840e53 100644
--- a/assets/views/header.html
+++ b/assets/views/header.html
@@ -1,35 +1,48 @@
-<link rel="stylesheet" href="/style/css/style.css">
 <div class="flexrow header">
     <div class="wrapgroup">
-      <a href="/" class="flexitem">
-        <img alt="account icon" src="/assets/img/icons/header/suite.svg">
-        <p>suite</p>
-      </a>
-      <a href="https://accounts.pogmom.me" class="flexitem">
-        <img alt="account icon" src="/assets/img/icons/header/accounts.svg">
-        <p>account</p>
-      </a>
-      <a href="https://cloud.pogmom.me/apps/forms/s/wsEkks78nqJEZCkEYpGoMNr5" class="flexitem">
-        <img src="/assets/img/icons/header/register.svg">
-        <p>register</p>
-      </a>
-      <a href="https://requests.pogmom.me/" class="flexitem">
-        <img src="/assets/img/icons/header/request.svg">
-        <p>request</p>
-      </a>
+      <div class="flexbutton">
+        <a href="/">
+          <img alt="account icon" src="/assets/img/icons/header/suite.svg">
+          <p>suite</p>
+        </a>
+      </div>
+      <div class="flexbutton">
+        <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">
+        <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">
+        <a href="https://requests.pogmom.me/">
+          <img src="/assets/img/icons/header/request.svg">
+          <p>request</p>
+        </a>
+      </div>
     </div>
     <div class="wrapgroup">
-      <a href="/about.html" class="flexitem">
-        <img src="/assets/img/icons/header/info.svg">
-        <p>about</p>
-      </a>
-      <a href="https://liberapay.com/pogmommy/donate" class="flexitem">
-        <img src="/assets/img/icons/header/donate.svg">
-        <p>donate</p>
-      </a>
-      <a href="https://pogmom.me/status.html" class="flexitem">
-        <img src="/assets/img/icons/header/status.svg">
-        <p>status</p>
-      </a>
+      <div class="flexbutton">
+        <a href="/about.html">
+          <img src="/assets/img/icons/header/info.svg">
+          <p>about</p>
+        </a>
+      </div>
+      <div class="flexbutton">
+        <a href="https://liberapay.com/pogmommy/donate">
+          <img src="/assets/img/icons/header/donate.svg">
+          <p>donate</p>
+        </a>
+      </div>
+      <div class="flexbutton">
+        <a  href="https://pogmom.me/status.html">
+          <img src="/assets/img/icons/header/status.svg">
+          <p>status</p>
+        </a>
+      </div>
     </div>
   </div>
diff --git a/index.html b/index.html
index 5619f58..f95320f 100644
--- a/index.html
+++ b/index.html
@@ -9,67 +9,89 @@
 <body>
   <h1>Pogmom Suite</h1>
   <h2>An Archival & Decentralization Project</h2>
-  <div id="header"></div>
+  <div id="header"><p>Enable javascript to view header</p></div>
   <hr>
   <h2>Social</h2>
   <div class="flexrow">
     <div class="wrapgroup">
-      <a href="https://cloud.pogmom.me" class="flexitem">
-        <img src="assets/img/icons/suite/nextcloud.svg">
-        <p>Nextcloud</p>
-      </a>  
-      <a href="https://masto.pogmom.me" class="flexitem">
+      <div class="flexbutton">
+        <a href="https://cloud.pogmom.me">
+          <img src="assets/img/icons/suite/nextcloud.svg">
+          <p>Nextcloud</p>
+        </a>
+      </div>  
+      <div class="flexbutton">
+        <a href="https://masto.pogmom.me">
         <img src="assets/img/icons/suite/mastodon.svg">
         <p>Mastodon</p>
-      </a>
+        </a>
+      </div>
     </div>
     <div class="wrapgroup">
-      <a href="https://pixel.pogmom.me" class="flexitem">
+      <div class="flexbutton">
+        <a href="https://pixel.pogmom.me">
         <img src="assets/img/icons/suite/pixelfed.svg">
         <p>Pixelfed</p>
-      </a>
-      <a href="https://peertube.pogmom.me" class="flexitem">
+        </a>
+      </div>
+      <div class="flexbutton">
+        <a href="https://peertube.pogmom.me">
         <img src="assets/img/icons/suite/peertube.svg">
         <p>Peertube</p>
-      </a>
-      <a href="https://chat.pogmom.me" class="flexitem">
+        </a>
+      </div>
+      <div class="flexbutton">
+        <a href="https://chat.pogmom.me">
         <img src="assets/img/icons/suite/element.svg">
         <p>Element</p>
-      </a>
+        </a>
+      </div>
     </div>
   </div>
   <h2>Multimedia</h2>
   <div class="flexrow">
     <div class="wrapgroup">
-      <a href="https://listen.pogmom.me" class="flexitem">
+      <div class="flexbutton">
+        <a href="https://listen.pogmom.me">
         <img src="assets/img/icons/suite/calibre.svg">
         <p>Calibre</p>
-      </a>
-      <a href="https://listen.pogmom.me" class="flexitem">
+        </a>
+      </div>
+      <div class="flexbutton">
+        <a href="https://listen.pogmom.me">
         <img src="assets/img/icons/suite/jellyfin.svg">
         <p>Jellyfin</p>
-      </a>
-      <a href="https://listen.pogmom.me" class="flexitem">
+        </a>
+      </div>
+      <div class="flexbutton">
+        <a href="https://listen.pogmom.me">
         <img src="assets/img/icons/suite/airsonic.svg">
         <p>Airsonic</p>
-      </a>  
+        </a>
+      </div>  
     </div>
   </div>
   <h2>Games</h2>
   <div class="flexrow">
     <div class="wrapgroup">
-      <a href="https://mc.pogmom.me" class="flexitem">
+      <div class="flexbutton">
+        <a href="https://mc.pogmom.me">
         <img src="assets/img/icons/suite/emulatorjs.svg">
         <p>EmulatorJS</p>
-      </a>
-      <a href="https://mc.pogmom.me" class="flexitem">
-        <img src="assets/img/icons/suite/minecraft.svg">
-        <p>Minecraft</p>
-      </a>
+        </a>
+      </div>
+      <div class="flexbutton">
+        <a href="https://mc.pogmom.me">
+          <img src="assets/img/icons/suite/minecraft.svg">
+          <p>Minecraft</p>
+        </a>
+        <p>about</p>
+        <p>clients</p>
+      </div>
     </div>
   </div>
   <hr>
-  <div id="footer"></div>
+  <div id="footer"><p>Enable javascript to view footer</p></div>
   <script src="/style/js/views.js"></script>
 </body>
 </html>
diff --git a/style/css/style.css b/style/css/style.css
index 20bcd4b..e5581fd 100644
--- a/style/css/style.css
+++ b/style/css/style.css
@@ -1,25 +1,24 @@
 body {
   background-color: #000000;
-  margin-left: 5vw;
-  margin-right: 5vw;
+  margin: 0 5vw;
+}
+h1,h2,p,hr {
+  color: #da74e5;
 }
 h1,h2,p{
-  color: #da74e5;
   font-family: 'Overpass', sans-serif;
   font-weight: 50;
   text-align: center;
+  margin-bottom: 0;
 }
 h1 {
   font-size: 3em;
-  margin-bottom: 0px;
 }
-hr {
-  color: #da74e5;
-  margin: 2vmax 0px;
+.flexrow {
+  margin: 2vmax 0;
 }
 .flexrow,.wrapgroup{
   display:flex;
-  width: 100%;
   flex-direction: row;
   justify-content: center;
   flex-wrap: wrap;
@@ -28,55 +27,51 @@ hr {
   flex-wrap: nowrap;
   flex: 0 1 0px;
 }
-.header > .wrapgroup > .flexitem > img {
-  width: auto;
-}
-.header > .wrapgroup > .flexitem > p {
-  font-size: 10pt;
-}
-.header > .wrapgroup > .flexitem {
-  min-width: 50px;
-  max-width: 100px;
-}
-/*.header > .wrapgroup,.footer > .wrapgroup {
-  flex-grow: 1;
-  justify-content: space-around;
-}*/
 .header {
-  margin: auto 10%;
-  width: 80%;
-}
-.footer > .wrapgroup > .flexitem {
-  min-width: 40px;
-  max-width: 70px;
-  padding: 1vmax;
+  .wrapgroup > .flexbutton {
+    a {
+      min-width: 45px;
+      img {
+        width: auto;
+      }
+      p {
+        font-size: 0.75em;
+      }
+    }
+  }
 }
 .footer {
-  margin-bottom: 2vmax;
+  .wrapgroup > .flexbutton {
+    min-width: 5vmin;
+    padding: 1vmax;
+  }
 }
-.flexitem {
-  min-width: 75px;
-  max-width: 200px;
+.flexbutton,.flexbutton > a {
   display: flex;
   flex-direction: column;
   justify-content: center;
+}
+.flexbutton {
   border-style: solid;
   border-color: #da74e5;
   border-width: 3px;
-  border-radius: 10px;
-  padding: 2vh;
+  border-radius: 8px;
   margin: 1vh 1vw;
-  text-decoration: none;
   transition: 0.5s;
+  a {
+    min-width: 75px;
+    text-decoration: none;
+    padding: 1.5vh;
+    p {
+      font-size: 1em;
+      margin-bottom: 0px;
+    }
+  }
 }
-.flexitem:hover {
+.flexbutton:hover {
   box-shadow: 0px 0px 30px #da75e5dd;
   transition: 0.25s;
 }
-.flexitem > p {
-  margin-bottom: 0px;
-/*  font-size: 10pt;*/
-}
 /* latin-ext */
 @font-face {
   font-family: 'Overpass';