pogmommy/pogmomme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update style + content

Browse source
This commit is contained in:
Penelope Gwen 2025-03-07 15:21:10 -08:00
parent 483f26b15a
commit f5922ffe0d
6 changed files with 174 additions and 238 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/cdn/pdf/archive-feudalism-and-digital-literacy_penelope-gomez.pdf Normal file
View file

Binary file not shown.

26
index.html
View file

@ -5,27 +5,27 @@
<title>Penelope Gwen</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/style/css/style-large.css">
<link rel="stylesheet" type="text/css" href="/style/css/toots.css">
<link rel="stylesheet" type="text/css" href="/style/css/lastfm-nowplaying.css">
<script src="/style/js/lastfm-nowplaying.js"></script>
</head>
<body>
<h1 class="title">Penelope Gwen</h1>
<h2 class="title">Software development & Sociology</h2>
<h1>Penelope Gwen</h1>
<h2>Software development & Sociology</h2>
<hr>
<div class="pagelayout">
<div class="pinkborder sidebar">
<div>
<img class="sidebar-image" src="/assets/img/rattos/test.webp"></img>
<img class="sidebar-image" alt="seven rats on two foot by two foot section of leather couch, walled in together by cardboard barricades on the left and right. Five rats are cuddling in back-right corner. One rat is laying toward the front-left corner, staring outward away from couch. One Rat is standing upright at front-right corner, feet facing the back of couch with torso turned to look outward from couch." src="/assets/img/rattos/test.webp"></img>
<p class="sidebar-caption">Please enjoy a picture of my sons :)</p>
</div>
<div id="nowplaying-placeholder"></div>
<hr>
<a class="mastodon-feed" href="https://masto.pogmom.me/@pogmommy" data-toot-limit="3" data-exclude-reblogs="true"><p class="sidebar-caption">Enable javascript to load mastodon posts</p></a>
<a class="mastodon-feed" href="https://masto.pogmom.me/@pogmommy" data-toot-limit="3" data-toot-account-id="110533482420174821" data-exclude-replies="true" data-exclude-reblogs="true"><p id="emfed-placeholder" class="sidebar-caption">Enable javascript to load mastodon posts</p></a>
</div>
<script type="module" src="https://esm.sh/emfed@1"></script>
<script>
document.getElementById("emfed-placeholder").innerHTML = ""
</script>
<div class="pagecontent">
<h2>About</h2>
<div class="bubble">
<p>I'm Penelope/pogmommy (it/its/she/her), a queer rat mom with a background in sociology, software development, and archivism.</p>
<p></p>
@ -33,26 +33,28 @@
<h2>Projects</h2>
<div class="bubble">
<h2>Pogmom Suite</h2>
<p>In an effort to combat the predatory data collection, hostile platform siezure, and <a href="https://media.defcon.org/DEF%20CON%2031/DEF%20CON%2031%20video%20and%20slides/An%20Audacious%20Plan%20to%20Halt%20the%20Internet%27s%20Enshittification%20-%20Cory%20Doctorow.mp4">enshittification</a> of the centralized internet experienced by myself and those close to me, I host a collection of online services dubbed the 'Pogmom Suite'.</p>
<p>In an effort to avoid predatory data collection, hostile platform siezure, and <a href="https://media.defcon.org/DEF%20CON%2031/DEF%20CON%2031%20video%20and%20slides/An%20Audacious%20Plan%20to%20Halt%20the%20Internet%27s%20Enshittification%20-%20Cory%20Doctorow.mp4">enshittification</a> of the centralized internet, I host a collection of online services dubbed the 'Pogmom Suite'.</p>
<p>These services utilize federated social networking standards and rely on free and open source software as exclusively as possible.</p>
<p>While security and practicality require that registration not be open to the general public, I am more than happy to offer advice and guidance to those interested in pursuing similar projects.</p>
<p><a href="https://suite.pogmom.me">Learn More</a></p>
</div>
<div class="bubble">
<h2>MusicBrainz Artist Monitoring</h2>
<p>I do my best to honor the importance of the art and artists in my life by documenting their work on MusicBrainz, an open music encyclopedia.</p>
<p>To see the statuses of my actively-monitored artists, please see the public spreadsheet <a href="https://cloud.pogmom.me/s/b8CSpAPNs8GwtWn">here</a>.</p>
<p>If you would like me to consider taking on an artist to maintain on MusicBrainz, please fill out the form <a href="#">here</a>.</p>
<p>If you would like me to consider adding an artist to the above spreadsheet, please fill out the form <a href="#">here</a>.</p>
</div>
<div class="bubble">
<h2>Software</h2>
<p></p>
<p>My current software development projects are oriented around my own Linux server and desktop usage. In the past, I have developed software for Pebble smartwatches and Apple devices, both jailbroken and stock.</p>
<p>Most of my software can be found at my <a href="https://git.pogmom.me/pogmommy/">Gitea</a>, or at its mirror on my <a href="https://github.com/pogmommy/">Github</a>.</p>
<p>I also package software for the Debian operating system, which I host on my <a href="https://apt.pogmom.me">apt repository</a>.</p>
<p>I also package software for the Debian operating system, which I distribute on my <a href="https://apt.pogmom.me">apt repository</a>.</p>
</div>
<div class="bubble">
<h2>Archives, Feudalism, and Digital Literacy</h2>
<p>My undergraduate thesis synthesized my sociological studies with my aptitude for technology. Inspired by my work with my mentor, I spend the final year of my studies articulating the failure our our academic and employment infrastucture to foster digital literacy in the public.</p>
<p>My undergraduate thesis synthesized my sociological studies with my aptitude for technology. Inspired by my work with my mentor, I spent the final year of my studies articulating the failure our our academic and employment infrastucture to foster digital literacy in the public.</p>
<p>While I consider my work on the topic far from finished, the version published here represents the spirit of my work and captures the motivation behind much of my other work.</p>
<p><a href="/assets/cdn/pdf/archive-feudalism-and-digital-literacy_penelope-gomez.pdf">Click to download</a></p>
</div>
</div>
</div>

77
style/css/lastfm-nowplaying.css
View file

@ -1,77 +0,0 @@
/*.now-playing {
position: absolute;
right: 20px;
top: 0px;
top: calc(50vh - (min(20vw, calc(100vh - 30px)) / 2, 400px));
z-index: 1001;
}*/
a.now-playing {
opacity: 1;
border: 0;
text-decoration: none;
}
/*a.now-playing:hover img {
transform: scale(1.02) translateX(-0.2vw) perspective(500px) rotate3d(0, -1, 0.01, 6deg);
}*/
.now-playing .np-metadata > span {
display: block;
font-size: 14px;
letter-spacing: -0.01em;
font-weight: 500;
line-height: 180%;
}
.now-playing .np-metadata {
margin: auto 1vw auto;
height: fit-content;
opacity: 0;
transition: opacity 0.4s ease-out;
transition-delay: 0.5s;
}
.now-playing.loaded .np-metadata {
opacity: 1;
}
.now-playing img {
/* opacity: 0;
transform: scale(0.97) translateX(10px) perspective(500px);*/
display: block;
margin: auto 0;
border-radius: 8px;
width: 25%;
box-shadow: 0 0 25px rgba(0,0,0,0.2);
transition: all 1s cubic-bezier(0.13, 0.95, 0, 1), transform 2s cubic-bezier(0.13, 0.95, 0, 1);
}
.now-playing.loaded img {
opacity: 1;
/* transform: perspective(500px) rotate3d(0, -1, 0, 4deg);*/
}
.now-playing .np-metadata .np-heading {
font-size: 11px;
font-weight: 900;
opacity: 0.5;
text-transform: uppercase;
letter-spacing: 0.11em;
}
.now-playing .np-metadata .np-roon {
width: 10px;
opacity: 0.5;
}
.now-playing .np-metadata .breather {
margin-right: 8px;
display: inline-block;
animation: pulsate 5s linear 0s infinite;
}
@keyframes pulsate {
0% { transform: scale(0.2, 0.2) rotate(0deg); opacity: 0.0; }
50% { transform: scale(1, 1) rotate(50deg); opacity: 1; }
80% { transform: scale(1.8, 1.8) rotate(80deg); opacity: 0.2; }
100% { transform: scale(4, 4) rotate(100deg); opacity: 0; }
}

187
style/css/style-large.css
View file

@ -1,12 +1,15 @@
body {
background-color: #000000;
margin: 0 5vw;
& > hr {
margin: 2vh 0;
}
}
.pagelayout{
display: flex;
justify-content: center;
flex-wrap: wrap-reverse;
margin: 0 5vw;
margin: 0 2vw;
}
.sidebar {
max-width: 400px;
@ -14,31 +17,13 @@ body {
background-color: #da75ed33;
height: fit-content;
width: fit-content;
margin: 2vh 1vw auto;
/* animation: .25s;
animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) both;
transform: rotateX(-90deg);
transform-origin: top center;*/
margin: 0 1vw auto;
}
/*@keyframes show {
100% {
opacity: 1;
transform: none;
}
}*/
.pagecontent {
min-width: 50%;
flex: 1 1 0;
margin: 2vh 1vw;
margin: 0 1vw;
}
/*.rat-album {
img {
}
p {
}
}*/
.sidebar-image {
width: 75%;
margin: 1vh auto 0;
@ -55,17 +40,19 @@ h1,h2,h3,p,a{
font-family: 'Overpass', sans-serif;
font-weight: 50;
margin-bottom: 0;
/* text-decoration: none;*/
}
h1 {
font-size: 3em;
text-align: center;
}
h2 {
font-size: 1.75em;
text-align: center;
margin-top: 0;
}
p {
font-size: 1.05em;
}
.title {
text-align: center;
}
.button {
margin: 1vh 1vw;
transition: 0.5s;
@ -113,14 +100,17 @@ p {
border-width: 3px;
border-radius: 8px;
}
.bubble:first-child {
margin-top: 0;
}
.bubble {
/* background-color: #da75ed44;*/
background-color: #da75ed22;
border-radius: 8px;
padding: 1vmax;
margin: 1vmax 0;
& > h2,& > p {
margin-top: 0;
& > p {
margin-left: 5vmin;
margin-right: 5vmin;
}
}
.flexobject {
@ -149,3 +139,144 @@ p {
src: url(/style/fonts/overpass/latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*LASTFM NOWPLAYING*/
a.now-playing {
opacity: 1;
text-decoration: none;
}
.now-playing .np-metadata > span {
display: block;
font-size: 14px;
line-height: 180%;
}
.now-playing .np-metadata {
margin: auto 1vw auto;
height: fit-content;
opacity: 0;
transition: opacity 0.4s ease-out;
transition-delay: 0.5s;
}
.now-playing.loaded .np-metadata,.now-playing.loaded img {
opacity: 1;
}
.now-playing img {
border-radius: 8px;
width: 25%;
}
.now-playing .np-metadata .np-heading {
font-size: 11px;
font-weight: 900;
opacity: 0.5;
text-transform: uppercase;
letter-spacing: 0.11em;
}
.now-playing .np-metadata .breather {
margin-right: 8px;
display: inline-block;
animation: pulsate 5s linear 0s infinite;
}
@keyframes pulsate {
0% { transform: scale(0.2, 0.2) rotate(0deg); opacity: 0.0; }
50% { transform: scale(1, 1) rotate(50deg); opacity: 1; }
80% { transform: scale(1.8, 1.8) rotate(80deg); opacity: 0.2; }
100% { transform: scale(4, 4) rotate(100deg); opacity: 0; }
}
/*EMFED*/
.toots {
max-width: 400px;
list-style: none;
padding: 0;
margin: 0;
animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) both;
height: 0;
transform: rotateX(-90deg);
transform-origin: top center;
}
.toot {
padding: 1rem;
}
@keyframes show {
100% {
height: auto;
transform: none;
}
}
.toot .user {
display: flex;
flex-flow: column wrap;
justify-content: space-evenly;
align-content: flex-start;
height: 46px;
column-gap: 0.5rem;
text-decoration: none;
}
.toot .avatar {
border-radius: 4px;
}
.toot .display-name {
font-weight: bold;
display: block;
}
.toot .user:hover .display-name {
text-decoration: underline;
}
.toot .username {
display: block;
margin-right: 1em;
color: #999;
}
.toot .boost {
height: 23px;
margin-bottom: 0.25rem;
column-gap: 0.25rem;
}
.toot .boost:before {
content: "♺";
font-size: 140%;
}
.toot .boost .username {
display: none;
}
.toot .permalink {
text-decoration: none;
display: block;
color: #999;
float: right;
}
.toot .permalink:hover {
text-decoration: underline;
}
.toot .body {
clear: both;
margin-top: 1em;
}
.toot .body a {
overflow-wrap: anywhere;
}
.toot .body .invisible {
display: inline-block;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
position: absolute;
}
.toot .body .ellipsis::after {
content: "…";
}
.toot .attachment {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 4px;
}
.toot .attachment img {
width: 100%;
height: 100%;
object-fit: cover;
}

2
style/css/style.css
View file

@ -1 +1 @@
body{background-color:#000;margin:0 5vw}h1,h2,h3,p,a,hr{color:#da74e5}h1,h2,h3,p,a{text-align:center;margin-bottom:0;font-family:Overpass,sans-serif;font-weight:50;text-decoration:none}h1{font-size:3em}.button{margin:1vh 1vw;transition:all .5s;display:block}.button>p{margin:1vh 0}.button:hover{transition:all .25s;box-shadow:0 0 30px rgba(218,117,229,.867)}.flexrow,.wrapgroup{flex-flow:wrap;justify-content:center;display:flex}.flexrow{margin:1vh 0}.wrapgroup{flex-wrap:nowrap;flex:0 1 0}.header .wrapgroup>.flexobject a{min-width:45px}.header .wrapgroup>.flexobject a img{width:auto}.header .wrapgroup>.flexobject a p{font-size:.75em}.footer .wrapgroup>.flexobject>a{min-width:35px}.flexobject,.flexobject>a{flex-direction:column;justify-content:center;display:flex}.pinkborder{border:3px solid #da74e5;border-radius:8px}.warning{border:3px solid red;border-radius:8px;width:fit-content;margin:0 1vmin;padding:.5vh 1vh}.warning>p{color:red;margin:auto 0}.warning>h2{margin:auto 0}.warning>img{height:1em;margin:auto 1vh auto 0}.flexobject>a{min-width:75px;padding:1.5vh;text-decoration:none}.flexobject>a>p{margin-bottom:0;font-size:1em}.flexobject>.buttondetails{flex-direction:row;justify-content:space-evenly;width:100%;display:flex}.flexobject>.buttondetails>a{width:50%;padding:10px 0}.flexobject>.buttondetails>a>img{margin:0 auto;display:block}.flexobject>.buttondetails>a:hover{opacity:.5}.platformicon{margin:0 0 7px .75vmin}h2:has(+.platformicon){margin:auto 0}.textsection{max-width:600px;margin:2vh auto}.textsection>.groupcontent{margin-top:3vh}.clientgroup{flex-wrap:wrap;flex:1 1 0;min-width:40vh;height:fit-content;margin:2vh 2vw}:is(.clientgroup,.textsection)>.groupheader{color:#000;background-color:#da74e5;margin-top:0}:is(.clientgroup,.textsection)>.groupcontent{padding:0 2vw 2vh}:is(.clientgroup,.textsection)>.groupcontent>.flexrow:has(h2){margin-top:3vh}.termtext{color:#000;background-color:#da75e5;padding:0 3px;font-family:monospace}:target{background-color:rgba(218,117,229,.133);border-radius:13px;padding:2vh 0}@font-face{font-family:Overpass;font-style:normal;font-weight:400;src:url(/style/fonts/overpass/latin-ext.woff2)format("woff2");unicode-range:U+100-2AF,U+304,U+308,U+329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Overpass;font-style:normal;font-weight:400;src:url(/style/fonts/overpass/latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body{background-color:#000;margin:0 5vw}body>hr{margin:2vh 0}.pagelayout{flex-wrap:wrap-reverse;justify-content:center;margin:0 2vw;display:flex}.sidebar{background-color:#da75ed33;flex-grow:1;width:fit-content;max-width:400px;height:fit-content;margin:0 1vw auto}.pagecontent{flex:1 1 0;min-width:50%;margin:0 1vw}.sidebar-image{border-radius:8px;width:75%;margin:1vh auto 0;display:block}.sidebar-caption{text-align:center}h1,h2,h3,p,a,hr{color:#da74e5}h1,h2,h3,p,a{margin-bottom:0;font-family:Overpass,sans-serif;font-weight:50}h1{text-align:center;font-size:3em}h2{text-align:center;margin-top:0;font-size:1.75em}p{font-size:1.05em}.button{margin:1vh 1vw;transition:all .5s;display:block}.button>p{margin:1vh 0}.button:hover{transition:all .25s;box-shadow:0 0 30px #da75e5dd}.flexrow,.wrapgroup{flex-flow:wrap;justify-content:center;display:flex}.flexrow{margin:1vh 0}.wrapgroup{flex-wrap:nowrap;flex:0 1 0}.footer .wrapgroup>.flexobject>a{min-width:35px}#footer{margin-bottom:1vw}#footer>p{text-align:center}.flexobject,.flexobject>a{flex-direction:column;justify-content:center;display:flex}.pinkborder{border:3px solid #da74e5;border-radius:8px}.bubble:first-child{margin-top:0}.bubble{background-color:#da75ed22;border-radius:8px;margin:1vmax 0;padding:1vmax}.bubble>p{margin-left:5vmin;margin-right:5vmin}.flexobject>a{min-width:75px;padding:1.5vh;text-decoration:none}.flexobject>a>p{margin-bottom:0;font-size:1em}@font-face{font-family:Overpass;font-style:normal;font-weight:400;src:url(/style/fonts/overpass/latin-ext.woff2)format("woff2");unicode-range:U+100-2AF,U+304,U+308,U+329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Overpass;font-style:normal;font-weight:400;src:url(/style/fonts/overpass/latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}a.now-playing{opacity:1;text-decoration:none}.now-playing .np-metadata>span{font-size:14px;line-height:180%;display:block}.now-playing .np-metadata{opacity:0;height:fit-content;margin:auto 1vw;transition:opacity .4s ease-out .5s}.now-playing.loaded .np-metadata,.now-playing.loaded img{opacity:1}.now-playing img{border-radius:8px;width:25%}.now-playing .np-metadata .np-heading{opacity:.5;text-transform:uppercase;letter-spacing:.11em;font-size:11px;font-weight:900}.now-playing .np-metadata .breather{margin-right:8px;animation:5s linear infinite pulsate;display:inline-block}@keyframes pulsate{0%{opacity:0;transform:scale(.2)rotate(0)}50%{opacity:1;transform:scale(1)rotate(50deg)}80%{opacity:.2;transform:scale(1.8)rotate(80deg)}to{opacity:0;transform:scale(4)rotate(100deg)}}.toots{transform-origin:top;max-width:400px;height:0;margin:0;padding:0;list-style:none;animation:.6s cubic-bezier(.38,.97,.56,.76) .1s both show;transform:rotateX(-90deg)}.toot{padding:1rem}@keyframes show{to{height:auto;transform:none}}.toot .user{flex-flow:column wrap;place-content:flex-start space-evenly;column-gap:.5rem;height:46px;text-decoration:none;display:flex}.toot .avatar{border-radius:4px}.toot .display-name{font-weight:700;display:block}.toot .user:hover .display-name{text-decoration:underline}.toot .username{color:#999;margin-right:1em;display:block}.toot .boost{column-gap:.25rem;height:23px;margin-bottom:.25rem}.toot .boost:before{content:"♺";font-size:140%}.toot .boost .username{display:none}.toot .permalink{color:#999;float:right;text-decoration:none;display:block}.toot .permalink:hover{text-decoration:underline}.toot .body{clear:both;margin-top:1em}.toot .body a{overflow-wrap:anywhere}.toot .body .invisible{width:0;height:0;font-size:0;line-height:0;display:inline-block;position:absolute}.toot .body .ellipsis:after{content:"…"}.toot .attachment{aspect-ratio:16/9;border-radius:4px;width:100%;display:block}.toot .attachment img{object-fit:cover;width:100%;height:100%}

120
style/css/toots.css
View file

@ -1,120 +0,0 @@
.toots {
max-width: 400px;
list-style: none;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
margin: 0;
animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) both;
height: 0;
transform: rotateX(-90deg);
transform-origin: top center;
}
.toot {
/* border-bottom: 1px solid #ccc;*/
padding: 1rem;
/* animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;*/
}
@keyframes show {
100% {
height: auto;
transform: none;
}
}
/* Posting user. */
.toot .user {
display: flex;
flex-flow: column wrap;
justify-content: space-evenly;
align-content: flex-start;
height: 46px; /* Avatar height. */
column-gap: 0.5rem;
text-decoration: none;
color: inherit;
}
.toot .avatar {
border-radius: 4px;
}
.toot .display-name {
font-weight: bold;
display: block;
}
.toot .user:hover .display-name {
text-decoration: underline;
}
.toot .username {
display: block;
margin-right: 1em;
color: #999;
}
/* Boosting user is smaller and above the posting user. */
.toot .boost {
height: 23px;
margin-bottom: 0.25rem;
column-gap: 0.25rem;
}
.toot .boost:before {
content: "♺";
font-size: 140%;
}
.toot .boost .username {
display: none;
}
.toot .permalink {
text-decoration: none;
display: block;
color: #999;
float: right;
}
.toot .permalink:hover {
text-decoration: underline;
}
.toot .body {
clear: both;
margin-top: 1em;
}
.toot .body a {
overflow-wrap: anywhere;
}
/* Weird trick to keep the text in the page but not display it. */
.toot .body .invisible {
display: inline-block;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
position: absolute;
}
.toot .body .ellipsis::after {
content: "…";
}
.toot .attachment {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 4px;
}
.toot .attachment img {
width: 100%;
height: 100%;
object-fit: cover;
}