webring prep, no longer minify css
This commit is contained in:
Penelope Gwen
parent
e171bb38dc
commit
4329f38b28
3 changed files with 341 additions and 319 deletions
22
index.html
22
index.html
|
|
@ -23,6 +23,28 @@
|
|||
<a href="https://cassiecandles.net/">
|
||||
<img class="sidebar-webring" alt="Cassie Candles website icon" src="/assets/img/webring/cassie_candles.webp"></img>
|
||||
</a>
|
||||
<hr>
|
||||
<h3 class="sidebar-caption">Webrings</h3>
|
||||
<div class="sidebar-webring">
|
||||
<script src="https://transring.neocities.org/ring.js"></script>
|
||||
</div>
|
||||
<!-- <link rel="stylesheet" href="https://teethinvitro.neocities.org/webring/linuxring/script/onionring.css">
|
||||
<div id='linuxring'>
|
||||
<script type="text/javascript" src="https://teethinvitro.neocities.org/webring/linuxring/script/onionring-variables.js"></script>
|
||||
<script type="text/javascript" src="https://teethinvitro.neocities.org/webring/linuxring/script/onionring-widget.js"></script>
|
||||
</div>-->
|
||||
<div class="sidebar-webring pinkborder">
|
||||
<a href="https://baccyflap.com/noai" target="_blank">the no ai webring</a><br>
|
||||
<a href="https://baccyflap.com/noai/?prv&s=mom" target="_top" title="previous">«</a>
|
||||
<a href="https://baccyflap.com/noai/?rnd" target="_top" title="random">random</a>
|
||||
<a href="https://baccyflap.com/noai/?nxt&s=mom" target="_top" title="next">»</a>
|
||||
</div>
|
||||
<div class="sidebar-webring pinkborder">
|
||||
<a href="https://fediring.net" target="_blank">Fediring</a><br>
|
||||
<a href="https://fediring.net/previous?host=pogmom.me" target="_top" title="previous">«</a>
|
||||
<a href="https://fediring.net/random" target="_top" title="random">random</a>
|
||||
<a href="https://fediring.net/next?host=pogmom.me" target="_top" title="next">»</a>
|
||||
</div>
|
||||
<hr>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,318 +0,0 @@
|
|||
body {
|
||||
background-color: #000000;
|
||||
margin: 0 5vw;
|
||||
& > hr {
|
||||
margin: 2vh 0;
|
||||
}
|
||||
}
|
||||
.pagelayout{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap-reverse;
|
||||
margin: 0 2vw;
|
||||
}
|
||||
.sidebar {
|
||||
max-width: 400px;
|
||||
flex-grow: 1;
|
||||
background-color: #da75ed33;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
margin: 0 1vw auto;
|
||||
}
|
||||
.pagecontent {
|
||||
min-width: 50%;
|
||||
flex: 1 1 0;
|
||||
margin: 0 1vw;
|
||||
}
|
||||
.sidebar-image {
|
||||
width: 75%;
|
||||
margin: 1vmax auto;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.sidebar-webring {
|
||||
width: 40%;
|
||||
margin: 1vmax auto;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.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{
|
||||
font-family: 'Overpass', sans-serif;
|
||||
font-weight: 50;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.75em;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
p {
|
||||
font-size: 1.05em;
|
||||
}
|
||||
.button {
|
||||
margin: 1vh 1vw;
|
||||
transition: 0.5s;
|
||||
display:block;
|
||||
& > p {
|
||||
margin: 1vh 0vw;
|
||||
}
|
||||
&:hover{
|
||||
box-shadow: 0px 0px 30px #da75e5dd;
|
||||
transition: 0.25s;
|
||||
}
|
||||
}
|
||||
.flexrow,.wrapgroup{
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flexrow {
|
||||
margin: 1vh 0;
|
||||
}
|
||||
.wrapgroup {
|
||||
flex-wrap: nowrap;
|
||||
flex: 0 1 0px;
|
||||
}
|
||||
.footer {
|
||||
.wrapgroup > .flexobject > a {
|
||||
min-width: 35px;
|
||||
}
|
||||
}
|
||||
.hiddentext {
|
||||
color: #000;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
#footer {
|
||||
margin-bottom: 1vw;
|
||||
& > p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.flexobject,.flexobject > a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.pinkborder {
|
||||
border-style: solid;
|
||||
border-color: #da74e5;
|
||||
border-width: 3px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.bubble:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.bubble {
|
||||
background-color: #da75ed22;
|
||||
border-radius: 8px;
|
||||
padding: 1vmax;
|
||||
margin: 1vmax 0;
|
||||
& > p {
|
||||
margin-left: 5vmin;
|
||||
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;
|
||||
text-decoration: none;
|
||||
padding: 1.5vh;
|
||||
& > p {
|
||||
font-size: 1em;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(/style/fonts/overpass/latin-ext.woff2) format('woff2');
|
||||
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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+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;
|
||||
}
|
||||
|
|
@ -1 +1,319 @@
|
|||
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%}
|
||||
body {
|
||||
background-color: #000000;
|
||||
margin: 0 5vw;
|
||||
& > hr {
|
||||
margin: 2vh 0;
|
||||
}
|
||||
}
|
||||
.pagelayout{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap-reverse;
|
||||
margin: 0 2vw;
|
||||
}
|
||||
.sidebar {
|
||||
max-width: 400px;
|
||||
flex-grow: 1;
|
||||
background-color: #da75ed33;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
margin: 0 1vw auto;
|
||||
}
|
||||
.pagecontent {
|
||||
min-width: 50%;
|
||||
flex: 1 1 0;
|
||||
margin: 0 1vw;
|
||||
}
|
||||
.sidebar-image {
|
||||
width: 75%;
|
||||
margin: 1vmax auto;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.sidebar-webring {
|
||||
width: 40%;
|
||||
margin: 1vmax auto;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
.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{
|
||||
font-family: 'Overpass', sans-serif;
|
||||
font-weight: 50;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.75em;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
p {
|
||||
font-size: 1.05em;
|
||||
}
|
||||
.button {
|
||||
margin: 1vh 1vw;
|
||||
transition: 0.5s;
|
||||
display:block;
|
||||
& > p {
|
||||
margin: 1vh 0vw;
|
||||
}
|
||||
&:hover{
|
||||
box-shadow: 0px 0px 30px #da75e5dd;
|
||||
transition: 0.25s;
|
||||
}
|
||||
}
|
||||
.flexrow,.wrapgroup{
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flexrow {
|
||||
margin: 1vh 0;
|
||||
}
|
||||
.wrapgroup {
|
||||
flex-wrap: nowrap;
|
||||
flex: 0 1 0px;
|
||||
}
|
||||
.footer {
|
||||
.wrapgroup > .flexobject > a {
|
||||
min-width: 35px;
|
||||
}
|
||||
}
|
||||
.hiddentext {
|
||||
color: #000;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
#footer {
|
||||
margin-bottom: 1vw;
|
||||
& > p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.flexobject,.flexobject > a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.pinkborder {
|
||||
border-style: solid;
|
||||
border-color: #da74e5;
|
||||
border-width: 3px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.bubble:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.bubble {
|
||||
background-color: #da75ed22;
|
||||
border-radius: 8px;
|
||||
padding: 1vmax;
|
||||
margin: 1vmax 0;
|
||||
& > p {
|
||||
margin-left: 5vmin;
|
||||
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;
|
||||
text-decoration: none;
|
||||
padding: 1.5vh;
|
||||
& > p {
|
||||
font-size: 1em;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(/style/fonts/overpass/latin-ext.woff2) format('woff2');
|
||||
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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+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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue