site/_includes/styles/pages/sneexy.css

115 lines
No EOL
3.7 KiB
CSS

/* ╭─────────────────────────────────────╮
/ │ /\/| │
/ │ |/\/___ _ __ ___ _____ ___ _ │
/ │ / __| '_ \ / _ \/ _ \ \/ / | | | │
/ │ \__ \ | | | __/ __/> <| |_| | │
/ │ |___/_| |_|\___|\___/_/\_\\__, | │
/ │ |___/ │
/ ╰─────────────────────────────────────╯
/ ~sneexy - breeeep! my page! slooosh~ */
/* my page has goop in html to set goopy colors */
html:has([sneexy-page]) {
--accent: light-dark(#00d131, #65ff88) !important;
article#sneexy window-contents {
text-align: center;
#logo {
min-width: 3rem;
max-width: 100%;
max-height: 13rem;
}
h1 {
border-bottom: unset;
margin-bottom: unset;
& #pfp {
height: 6rem;
transition: .2s;
vertical-align: middle;
width: auto;
&:hover {
transform: scale(2);
}
}
}
card-container[selfinfo] {
text-align: start;
margin-top: .8rem;
ul {
margin-top: 0;
margin-bottom: 0;
li {
margin-left: -1rem;
&::marker { content: ""; }
}
}
}
}
/* socials and links sections */
article#links {
window-contents {
.container {
display: flex;
flex-flow: row wrap;
gap: 1rem;
socials-links {
display: flex;
flex-flow: column wrap;
flex: content;
gap: .8rem;
min-width: 10rem;
[button] {
height: fit-content;
padding: .4rem .8rem;
small[username] {
float: right;
margin-left: 2rem;
}
&[fedi] { --accent: var(--yellow); }
&[bsky] { --accent: var(--blue); }
&[listenbrainz] { --accent: var(--purple); }
&[lastfm] {
--accent: var(--red);
&:hover { color: var(--background); }
}
&[gitgay] { --accent: var(--green); }
&[github] { --accent: light-dark(color-mix(in srgb, var(--white) 10%, var(--black)), var(--white)); }
&[archive] {
--accent: light-dark(color-mix(in srgb, var(--dark-white) 30%, var(--black)), color-mix(in srgb, var(--dark-white) 15%, var(--black)));
&:hover { color: light-dark(var(--foreground), var(--foreground)); }
}
}
}
socials-fedi {
margin-left: auto;
margin-right: auto;
height: 27rem;
overflow-y: scroll;
width: 25rem;
border-radius: .5rem;
border: solid .15rem var(--border);
}
}
}
}
/* enable nsfw window on nsfw page when checkbox is toggled */
&:has(input[type="checkbox"]#view-nsfw-page:checked) {
article#nsfw {
display: block !important;
}
}
}