From 4329f38b28a641bf2323fb96890b297d9bd33db1 Mon Sep 17 00:00:00 2001 From: Penelope Gwen Date: Sat, 29 Mar 2025 22:34:57 -0700 Subject: [PATCH] webring prep, no longer minify css --- index.html | 22 +++ style/css/style-large.css | 318 ------------------------------------- style/css/style.css | 320 +++++++++++++++++++++++++++++++++++++- 3 files changed, 341 insertions(+), 319 deletions(-) delete mode 100644 style/css/style-large.css diff --git a/index.html b/index.html index 7205c16..d6c8f53 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,28 @@ Cassie Candles website icon +
+

Webrings

+
+ +
+ +
+ the no ai webring
+ « + random + » +
+
+ Fediring
+ « + random + » +
diff --git a/style/css/style-large.css b/style/css/style-large.css deleted file mode 100644 index a7dca35..0000000 --- a/style/css/style-large.css +++ /dev/null @@ -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; -} diff --git a/style/css/style.css b/style/css/style.css index 1fa78bf..bf3b3d0 100644 --- a/style/css/style.css +++ b/style/css/style.css @@ -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%} \ No newline at end of file +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; +}