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

third version

Browse source
This commit is contained in:
Penelope Gwen 2025-02-18 18:28:04 -08:00
parent 10e3198d0c
commit c7683f0e14
5 changed files with 136 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.about.html.swp
View file

Binary file not shown.

20
assets/views/footer.html
View file

@ -1,35 +1,35 @@
<div class="flexrow footer"> <div class="flexrow footer">
<div class="wrapgroup"> <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"> <img src="assets/img/icons/social/home.svg">
</a> </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"> <img src="assets/img/icons/social/mastodon.svg">
</a> </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"> <img alt="pixelfed icon" src="assets/img/icons/social/pixelfed.svg">
</a> </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"> <img src="assets/img/icons/social/peertube.svg">
</a> </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"> <img src="assets/img/icons/social/matrix.svg">
</a> </a>
</div> </div>
<div class="wrapgroup"> <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"> <img src="assets/img/icons/social/gitea.svg">
</a> </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"> <img src="assets/img/icons/social/email.svg">
</a> </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"> <img src="assets/img/icons/social/trakt.svg">
</a> </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"> <img src="assets/img/icons/social/lastfm.svg">
</a> </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"> <img src="assets/img/icons/social/shop.svg">
</a> </a>
</div> </div>

71
assets/views/header.html
View file

@ -1,35 +1,48 @@
<link rel="stylesheet" href="/style/css/style.css">
<div class="flexrow header"> <div class="flexrow header">
<div class="wrapgroup"> <div class="wrapgroup">
<a href="/" class="flexitem"> <div class="flexbutton">
<img alt="account icon" src="/assets/img/icons/header/suite.svg"> <a href="/">
<p>suite</p> <img alt="account icon" src="/assets/img/icons/header/suite.svg">
</a> <p>suite</p>
<a href="https://accounts.pogmom.me" class="flexitem"> </a>
<img alt="account icon" src="/assets/img/icons/header/accounts.svg"> </div>
<p>account</p> <div class="flexbutton">
</a> <a href="https://accounts.pogmom.me">
<a href="https://cloud.pogmom.me/apps/forms/s/wsEkks78nqJEZCkEYpGoMNr5" class="flexitem"> <img alt="account icon" src="/assets/img/icons/header/accounts.svg">
<img src="/assets/img/icons/header/register.svg"> <p>account</p>
<p>register</p> </a>
</a> </div>
<a href="https://requests.pogmom.me/" class="flexitem"> <div class="flexbutton">
<img src="/assets/img/icons/header/request.svg"> <a href="https://cloud.pogmom.me/apps/forms/s/wsEkks78nqJEZCkEYpGoMNr5">
<p>request</p> <img src="/assets/img/icons/header/register.svg">
</a> <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>
<div class="wrapgroup"> <div class="wrapgroup">
<a href="/about.html" class="flexitem"> <div class="flexbutton">
<img src="/assets/img/icons/header/info.svg"> <a href="/about.html">
<p>about</p> <img src="/assets/img/icons/header/info.svg">
</a> <p>about</p>
<a href="https://liberapay.com/pogmommy/donate" class="flexitem"> </a>
<img src="/assets/img/icons/header/donate.svg"> </div>
<p>donate</p> <div class="flexbutton">
</a> <a href="https://liberapay.com/pogmommy/donate">
<a href="https://pogmom.me/status.html" class="flexitem"> <img src="/assets/img/icons/header/donate.svg">
<img src="/assets/img/icons/header/status.svg"> <p>donate</p>
<p>status</p> </a>
</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>
</div> </div>

74
index.html
View file

@ -9,67 +9,89 @@
<body> <body>
<h1>Pogmom Suite</h1> <h1>Pogmom Suite</h1>
<h2>An Archival & Decentralization Project</h2> <h2>An Archival & Decentralization Project</h2>
<div id="header"></div> <div id="header"><p>Enable javascript to view header</p></div>
<hr> <hr>
<h2>Social</h2> <h2>Social</h2>
<div class="flexrow"> <div class="flexrow">
<div class="wrapgroup"> <div class="wrapgroup">
<a href="https://cloud.pogmom.me" class="flexitem"> <div class="flexbutton">
<img src="assets/img/icons/suite/nextcloud.svg"> <a href="https://cloud.pogmom.me">
<p>Nextcloud</p> <img src="assets/img/icons/suite/nextcloud.svg">
</a> <p>Nextcloud</p>
<a href="https://masto.pogmom.me" class="flexitem"> </a>
</div>
<div class="flexbutton">
<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>
</a> </a>
</div>
</div> </div>
<div class="wrapgroup"> <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"> <img src="assets/img/icons/suite/pixelfed.svg">
<p>Pixelfed</p> <p>Pixelfed</p>
</a> </a>
<a href="https://peertube.pogmom.me" class="flexitem"> </div>
<div class="flexbutton">
<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>
</a> </a>
<a href="https://chat.pogmom.me" class="flexitem"> </div>
<div class="flexbutton">
<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>
</a> </a>
</div>
</div> </div>
</div> </div>
<h2>Multimedia</h2> <h2>Multimedia</h2>
<div class="flexrow"> <div class="flexrow">
<div class="wrapgroup"> <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"> <img src="assets/img/icons/suite/calibre.svg">
<p>Calibre</p> <p>Calibre</p>
</a> </a>
<a href="https://listen.pogmom.me" class="flexitem"> </div>
<div class="flexbutton">
<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>
</a> </a>
<a href="https://listen.pogmom.me" class="flexitem"> </div>
<div class="flexbutton">
<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>
</a> </a>
</div>
</div> </div>
</div> </div>
<h2>Games</h2> <h2>Games</h2>
<div class="flexrow"> <div class="flexrow">
<div class="wrapgroup"> <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"> <img src="assets/img/icons/suite/emulatorjs.svg">
<p>EmulatorJS</p> <p>EmulatorJS</p>
</a> </a>
<a href="https://mc.pogmom.me" class="flexitem"> </div>
<img src="assets/img/icons/suite/minecraft.svg"> <div class="flexbutton">
<p>Minecraft</p> <a href="https://mc.pogmom.me">
</a> <img src="assets/img/icons/suite/minecraft.svg">
<p>Minecraft</p>
</a>
<p>about</p>
<p>clients</p>
</div>
</div> </div>
</div> </div>
<hr> <hr>
<div id="footer"></div> <div id="footer"><p>Enable javascript to view footer</p></div>
<script src="/style/js/views.js"></script> <script src="/style/js/views.js"></script>
</body> </body>
</html> </html>

77
style/css/style.css
View file

@ -1,25 +1,24 @@
body { body {
background-color: #000000; background-color: #000000;
margin-left: 5vw; margin: 0 5vw;
margin-right: 5vw; }
h1,h2,p,hr {
color: #da74e5;
} }
h1,h2,p{ h1,h2,p{
color: #da74e5;
font-family: 'Overpass', sans-serif; font-family: 'Overpass', sans-serif;
font-weight: 50; font-weight: 50;
text-align: center; text-align: center;
margin-bottom: 0;
} }
h1 { h1 {
font-size: 3em; font-size: 3em;
margin-bottom: 0px;
} }
hr { .flexrow {
color: #da74e5; margin: 2vmax 0;
margin: 2vmax 0px;
} }
.flexrow,.wrapgroup{ .flexrow,.wrapgroup{
display:flex; display:flex;
width: 100%;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
@ -28,55 +27,51 @@ hr {
flex-wrap: nowrap; flex-wrap: nowrap;
flex: 0 1 0px; 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 { .header {
margin: auto 10%; .wrapgroup > .flexbutton {
width: 80%; a {
} min-width: 45px;
.footer > .wrapgroup > .flexitem { img {
min-width: 40px; width: auto;
max-width: 70px; }
padding: 1vmax; p {
font-size: 0.75em;
}
}
}
} }
.footer { .footer {
margin-bottom: 2vmax; .wrapgroup > .flexbutton {
min-width: 5vmin;
padding: 1vmax;
}
} }
.flexitem { .flexbutton,.flexbutton > a {
min-width: 75px;
max-width: 200px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
}
.flexbutton {
border-style: solid; border-style: solid;
border-color: #da74e5; border-color: #da74e5;
border-width: 3px; border-width: 3px;
border-radius: 10px; border-radius: 8px;
padding: 2vh;
margin: 1vh 1vw; margin: 1vh 1vw;
text-decoration: none;
transition: 0.5s; 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; box-shadow: 0px 0px 30px #da75e5dd;
transition: 0.25s; transition: 0.25s;
} }
.flexitem > p {
margin-bottom: 0px;
/* font-size: 10pt;*/
}
/* latin-ext */ /* latin-ext */
@font-face { @font-face {
font-family: 'Overpass'; font-family: 'Overpass';