2025-03-17 10:47 update
This commit is contained in:
Penelope Gwen
parent
7873a3674b
commit
3ad35ee798
6 changed files with 200 additions and 14 deletions
81
assets/img/icons/social/listenbrainz.svg
Normal file
81
assets/img/icons/social/listenbrainz.svg
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
id="svg1591"
|
||||
viewBox="9 0 24 24"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
sodipodi:docname="listenbrainz.svg"
|
||||
version="1.1"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<defs
|
||||
id="defs1552">
|
||||
<path
|
||||
id="a"
|
||||
d="m 75.354,33.239 h 51.433 v 90.792 H 75.354 Z" />
|
||||
<clipPath
|
||||
id="b">
|
||||
<use
|
||||
id="use1554"
|
||||
xlink:href="#a" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<metadata
|
||||
id="metadata1597">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title>ListenBrainz 2020 logo (version 2)</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:current-layer="svg1591"
|
||||
inkscape:cx="9.3921335"
|
||||
inkscape:cy="11.799762"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-height="1358"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:window-width="3410"
|
||||
inkscape:window-x="2185"
|
||||
inkscape:window-y="1867"
|
||||
inkscape:zoom="20.975"
|
||||
objecttolerance="10"
|
||||
pagecolor="#ffffff"
|
||||
showgrid="false"
|
||||
id="namedview203"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pagecheckerboard="1"
|
||||
inkscape:deskcolor="#d1d1d1" />
|
||||
<title
|
||||
id="title1547">ListenBrainz 2020 logo (version 2)</title>
|
||||
<g
|
||||
id="g940"
|
||||
transform="matrix(0.16666667,0,0,0.16666667,8.8576664,-1.3038336)">
|
||||
<path
|
||||
id="path1545"
|
||||
d="m 75.354,7.823 v 144 l 61,-35 v -74 z"
|
||||
fill="#eb743b"
|
||||
style="fill:#da75ed;fill-opacity:1" />
|
||||
<path
|
||||
id="path1549"
|
||||
d="m 70.354,7.823 -61,35 v 74 l 61,35 z"
|
||||
fill="#353070"
|
||||
style="fill:#da75ed;fill-opacity:1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -2,54 +2,54 @@
|
|||
<div class="wrapgroup">
|
||||
<div class="flexobject button pinkborder">
|
||||
<a href="https://pogmom.me">
|
||||
<img src="assets/img/icons/social/home.svg">
|
||||
<img title="Home Button" alt="Home icon" src="/assets/img/icons/social/home.svg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="flexobject button pinkborder">
|
||||
<a href="https://masto.pogmom.me/@pogmommy">
|
||||
<img src="assets/img/icons/social/mastodon.svg">
|
||||
<img title="Mastodon Button" alt="Mastodon icon" src="/assets/img/icons/social/mastodon.svg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="flexobject button pinkborder">
|
||||
<a href="http://pixel.pogmom.me/pogmommy">
|
||||
<img alt="pixelfed icon" src="assets/img/icons/social/pixelfed.svg">
|
||||
<img title="Pixelfed Button" alt="Pixelfed icon" src="/assets/img/icons/social/pixelfed.svg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="flexobject button pinkborder">
|
||||
<a href="https://peertube.pogmom.me/a/pogmommy">
|
||||
<img src="assets/img/icons/social/peertube.svg">
|
||||
<img title="Peertube Button" alt="Peertube icon" src="/assets/img/icons/social/peertube.svg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="flexobject button pinkborder">
|
||||
<a href="https://matrix.to/#/@pogmommy:matrix.pogmom.me">
|
||||
<img src="assets/img/icons/social/matrix.svg">
|
||||
<img title="Matrix Button" alt="Matrix icon" src="/assets/img/icons/social/matrix.svg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapgroup">
|
||||
<div class="flexobject button pinkborder">
|
||||
<a href="https://git.pogmom.me/pogmommy">
|
||||
<img src="assets/img/icons/social/gitea.svg">
|
||||
<img title="Gitea Button" alt="Gitea icon" src="/assets/img/icons/social/gitea.svg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="flexobject button pinkborder">
|
||||
<a href="mailto:penelope@pogmom.me">
|
||||
<img src="assets/img/icons/social/email.svg">
|
||||
<img title="Email Button" alt="Email icon" src="/assets/img/icons/social/email.svg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="flexobject button pinkborder">
|
||||
<a href="https://trakt.tv/users/pogmommy">
|
||||
<img src="assets/img/icons/social/trakt.svg">
|
||||
<img title="Trakt Button" alt="Trakt icon" src="/assets/img/icons/social/trakt.svg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="flexobject button pinkborder">
|
||||
<a href="https://www.last.fm/user/Pogmommy">
|
||||
<img src="assets/img/icons/social/lastfm.svg">
|
||||
<a href="https://listenbrainz.org/user/pogmommy/">
|
||||
<img title="ListenBrainz Button" alt="Listenbrainz icon" src="/assets/img/icons/social/listenbrainz.svg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="flexobject button pinkborder">
|
||||
<a href="https://merch.pogmom.me">
|
||||
<img src="assets/img/icons/social/shop.svg">
|
||||
<img title="Merch Store Button" alt="Shop icon" src="/assets/img/icons/social/shop.svg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
</div>
|
||||
|
||||
<hr>
|
||||
<div id="footer"><p>Enable javascript to view footer</p></div>
|
||||
<div id="footer"><p>Click <a href="https://pogmom.me/links.html">here</a> to view my social links</p></div>
|
||||
<script src="/style/js/views.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
82
links/index.html
Normal file
82
links/index.html
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Penelope Gwen</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="/style/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Penelope Gwen</h1>
|
||||
<h2>Social & Other Links</h2>
|
||||
<hr>
|
||||
<div class="pagelayout">
|
||||
<div class="pagecontent">
|
||||
<a href="https://pogmom.me" class="sociallist">
|
||||
<div class="bubble flexrow button">
|
||||
<img src="/assets/img/icons/social/home.svg">
|
||||
<h2>Homepage</h2>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://masto.pogmom.me/@pogmommy" class="sociallist">
|
||||
<div class="bubble flexrow button">
|
||||
<img src="/assets/img/icons/social/mastodon.svg">
|
||||
<h2>Mastodon</h2>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://pixel.pogmom.me/pogmommy" class="sociallist">
|
||||
<div class="bubble flexrow button">
|
||||
<img src="/assets/img/icons/social/pixelfed.svg">
|
||||
<h2>Pixelfed</h2>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://peertube.pogmom.me/a/pogmommy" class="sociallist">
|
||||
<div class="bubble flexrow button">
|
||||
<img src="/assets/img/icons/social/peertube.svg">
|
||||
<h2>Peertube</h2>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://matrix.to/#/@pogmommy:matrix.pogmom.me" class="sociallist">
|
||||
<div class="bubble flexrow button">
|
||||
<img src="/assets/img/icons/social/matrix.svg">
|
||||
<h2>Matrix</h2>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://git.pogmom.me/pogmommy" class="sociallist">
|
||||
<div class="bubble flexrow button">
|
||||
<img src="/assets/img/icons/social/gitea.svg">
|
||||
<h2>Gitea</h2>
|
||||
</div>
|
||||
</a>
|
||||
<a href="mailto:penelope@pogmom.me" class="sociallist">
|
||||
<div class="bubble flexrow button">
|
||||
<img src="/assets/img/icons/social/email.svg">
|
||||
<h2>Email</h2>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://trakt.tv/users/pogmommy" class="sociallist">
|
||||
<div class="bubble flexrow button">
|
||||
<img src="/assets/img/icons/social/peertube.svg">
|
||||
<h2>Trakt</h2>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://listenbrainz.org/user/pogmommy/" class="sociallist">
|
||||
<div class="bubble flexrow button">
|
||||
<img src="/assets/img/icons/social/listenbrainz.svg">
|
||||
<h2>ListenBrainz</h2>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://merch.pogmom.me" class="sociallist">
|
||||
<div class="bubble flexrow button">
|
||||
<img src="/assets/img/icons/social/shop.svg">
|
||||
<h2>Merch Store</h2>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div id="footer"><p>Click <a href="https://pogmom.me/links.html">here</a> to view my social links</p></div>
|
||||
<script src="/style/js/views.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -31,7 +31,7 @@ body {
|
|||
border-radius: 8px;
|
||||
}
|
||||
.sidebar-webring {
|
||||
width: 50%;
|
||||
width: 40%;
|
||||
margin: 1vmax auto;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
|
|
@ -126,6 +126,29 @@ p {
|
|||
margin-right: 5vmin;
|
||||
}
|
||||
}
|
||||
.sociallist {
|
||||
text-decoration: none;
|
||||
}
|
||||
.sociallist > div {
|
||||
width: fit-content;
|
||||
@media screen and (orientation:landscape) {
|
||||
min-width: 300px;
|
||||
margin: 2vmax auto;
|
||||
}
|
||||
@media screen and (orientation:portrait) {
|
||||
min-width: 80%;
|
||||
margin: 2vmax auto;
|
||||
}
|
||||
img,h2 {
|
||||
padding: 0 1vmax;
|
||||
}
|
||||
img {
|
||||
width: 4em;
|
||||
}
|
||||
h2 {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.flexobject {
|
||||
& > a {
|
||||
min-width: 75px;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
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:1vmax auto;display:block}.sidebar-webring{border-radius:4px;width:50%;margin:1vmax auto;display:block}.sidebar-caption{text-align:center}p.sidebar-caption,h3.sidebar-caption{margin:1vmax auto}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}.hiddentext{color:#000;font-size:.5em}#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%}
|
||||
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:1vmax auto;display:block}.sidebar-webring{border-radius:4px;width:40%;margin:1vmax auto;display:block}.sidebar-caption{text-align:center}p.sidebar-caption,h3.sidebar-caption{margin:1vmax auto}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}.hiddentext{color:#000;font-size:.5em}#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}.sociallist{text-decoration:none}.sociallist>div{width:fit-content}@media screen and (orientation:landscape){.sociallist>div{min-width:300px;margin:2vmax auto}}@media screen and (orientation:portrait){.sociallist>div{min-width:80%;margin:2vmax auto}}.sociallist>div img,.sociallist>div h2{padding:0 1vmax}.sociallist>div img{width:4em}.sociallist>div h2{margin:auto}.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%}
|
||||
Loading…
Add table
Reference in a new issue