sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

split css, minor edits, start fedi guide

Browse source
This commit is contained in:
Ruben 2024-09-28 00:43:55 -05:00
commit 0e35b51ce1
No known key found for this signature in database
GPG key ID: AE181294E97E4802
6 changed files with 327 additions and 186 deletions
Download patch file Download diff file Expand all files Collapse all files

65
colors.css Normal file
View file

@ -0,0 +1,65 @@
/* i use catppuccin color schemes because i LOVE catppuccin */
@media (prefers-color-scheme: light) {
/* catppuccin latte */
:root {
--rosewater: #dc8a78;
--flamingo: #dd7878;
--pink: #ea76cb;
--mauve: #8839ef;
--red: #d20f39;
--maroon: #e64553;
--peach: #fe640b;
--yellow: #df8e1d;
--green: #40a02b;
--teal: #179299;
--sky: #04a5e5;
--sapphire: #209fb5;
--blue: #1e66f5;
--lavender: #7287fd;
--text: #4c4f69;
--subtext1: #5c5f77;
--subtext0: #6c6f85;
--overlay2: #7c7f93;
--overlay1: #8c8fa1;
--overlay0: #9ca0b0;
--surface2: #acb0be;
--surface1: #bcc0cc;
--surface0: #ccd0da;
--base: #eff1f5;
--mantle: #e6e9ef;
--crust: #dce0e8;
}
}
@media (prefers-color-scheme: dark) {
/* catppuccin mocha */
:root {
--rosewater: #f5e0dc;
--flamingo: #f2cdcd;
--pink: #f5c2e7;
--mauve: #cba6f7;
--red: #f38ba8;
--maroon: #eba0ac;
--peach: #fab387;
--yellow: #f9e2af;
--green: #a6e3a1;
--teal: #94e2d5;
--sky: #89dceb;
--sapphire: #74c7ec;
--blue: #89b4fa;
--lavender: #b4befe;
--text: #cdd6f4;
--subtext1: #bac2de;
--subtext0: #a6adc8;
--overlay2: #9399b2;
--overlay1: #7f849c;
--overlay0: #6c7086;
--surface2: #585b70;
--surface1: #45475a;
--surface0: #313244;
--base: #1e1e2e;
--mantle: #181825;
--crust: #11111b;
}
}

2
dni/index.html
View file

@ -6,6 +6,8 @@
<meta charset="UTF-8">
<title>do not interact @ s.p.g</title>
<link rel="icon" type="image/gif" href="/assets/favicon.png">
<link rel="stylesheet" type="text/css" href="/colors.css">
<link rel="stylesheet" type="text/css" href="/font.css">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Phosphor/bold/style.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Phosphor/fill/style.css">

121
fedi-guide/index.html Normal file
View file

@ -0,0 +1,121 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ruben's opinionated fedi guide @ s.p.g</title>
<link rel="icon" type="image/gif" href="/assets/favicon.png">
<link rel="stylesheet" type="text/css" href="/colors.css">
<link rel="stylesheet" type="text/css" href="/font.css">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Phosphor/bold/style.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Phosphor/fill/style.css">
<link rel="canonical" href="https://sneexy.pages.gay/">
<link rel="me" href="https://lea.pet/@sneexy">
<link rel="me" href="https://git.gay/sneexy">
<meta lang="en-US">
<meta property="og:url" content="https://sneexy.pages.gay/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/script.js" defer="defer"></script>
</head>
<body>
<!-- top navbar -->
<div class="navbar">
<a class="nav-base nav-baselink" href="/"><i class="ph-bold ph-squares-four"></i> sneexy <small>dot</small> pages <small>dot</small> gay</a>
<div class="mobile-dropdown">
<button onclick="mobileDropdown()" class="nav-base nav-baselink-mobile"><i style="pointer-events:none;" class="ph-bold ph-squares-four"></i> s <i style="pointer-events:none;" class="ph-bold ph-dot"></i> p <i style="pointer-events:none;" class="ph-bold ph-dot"></i> g</button>
<div id="dropdown-box" class="dropdown-content">
<a href="/"><i class="ph-bold ph-house"></i> home</a>
<a href="/blog"><i class="ph-bold ph-article"></i> blog</a>
<a href="/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
</div>
</div>
<nav class="nav-base nav-links">
<a href="/"><i class="ph-bold ph-house"></i> home</a>
<i class="ph-bold ph-dot"></i>
<a href="/blog"><i class="ph-bold ph-article"></i> blog</a>
<i class="ph-bold ph-dot"></i>
<a href="/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
</nav>
<p aria-hidden="true" class="nav-base nav-systray"><i class="ph-bold ph-bell"></i> <i class="ph-bold ph-speaker-high"></i> <i class="ph-bold ph-network"></i> <i class="ph-bold ph-battery-full"></i> <i class="ph-bold ph-power"></i></p>
</div>
<!-- introduction -->
<div id="do-not-interact" class="terminal">
<div aria-hidden="true" class="term-titlebar">
<i class="ph-fill ph-terminal"></i>
<p><a href="#do-not-interact">~/do-not-interact</a></p>
<div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
</div>
<section>
<p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/do-not-interact</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> cat dni.txt</p>
<h1><a href="#do-not-interact">do not interact</a></h1>
<p>my own dni list. also includes specific bits for other platforms such as the fediverse.</p>
<span id="seperator"></span>
<b>to get the basics and hopefully well known out of the way:</b>
<ul>
<li>homo/trans/queerphobes</li>
<li>nazis</li>
<li>racists</li>
<li>rightoids, "antiwoke"</li>
<li>pedos/maps</li>
<li>tech/aibros <small>(you know who you are)</small></li>
<li>cop supporters</li>
<li><details>
<summary>the bad space, are0h and/or packetcat supporters</summary>
<p>a community that says they're aiming to make the fediverse "safer" by "fighting racism, queerphobia, harassment" and all that stuff, yet have <i><a href="https://ghostarchive.org/archive/BO1XY" target="_blank">posted blatent transphobia</a>, <a href="https://ghostarchive.org/archive/PGxVY" target="blank">spam moderation tags with useless information/ranting</a>, <a href="https://ghostarchive.org/archive/VJ0o7" target="_blank">do targeted harassment</a>, <a href="https://lea.pet/notes/9xy8ziz7c1" target="_blank">literally doxx people</a>, <a href="https://ghostarchive.org/archive/HLTBt">will say you're the harasser for asking them to stop</a>, and <a href="" target="_blank">show lack of respect to anyone outside of their group</a>.</i> yeah. no fucking thanks.</p>
</details></li>
</ul>
<p>...you know the drill. kindly Get The Hell Away From Me! <i class="ph-bold ph-heart" style="align-content:center;color:var(--green);"></i></p>
<span id="seperator"></span>
<h2><a href="#fedi">fedi</a></h2>
<p><b>instances that i look out for:</b></p>
<ul>
<li><details>
<summary>mastodon.social, mastodon.online, mas.to, etc. are ignored <i class="ph-bold ph-heart-break" style="padding-left:7px;align-content:center;color:var(--red);" alt="Ignored" title="Ignored"></i></summary>
<p>these instances contain a <b>bunch</b> of users to the point where they harm the fediverse and usually have lack of moderation due to that. i'd kindly recommend moving to a nicer smaller instance if you're willing to. <small>you don't have to listen to me, i'm just text.</small></p>
</details></li>
<li><details>
<summary>hachyderm.io, fosstodon.org, floss.social are heavily discouraged <i class="ph-bold ph-heart" style="padding-left:7px;align-content:center;color:var(--yellow);" alt="Passable, harder vibe checking" title="Passable, harder vibe checking"></i></summary>
<p>mixed bag. usually full of people who are techbros/fossbros and won't let you have a good time for mentioning something they don't like or they rant about how ai is the best thing in the world. also not the mention previous dramas on some of these instances. also, some of these i consider a part of corpo fedi.</p>
</details></li>
<li><details>
<summary>woem.men is ignored <i class="ph-bold ph-heart-break" style="padding-left:7px;align-content:center;color:var(--red);" alt="Ignored" title="Ignored"></i></summary>
<p>i know its considered a "dick move" to block an entire instance just for its admin, but i keep hearing way too much about how the instance admin acts and what they've done and let into the instance. i'm just tired of hearing about it, sorry.</p>
</details></li>
<li><details>
<summary>transfem.social goes though heavy vibe checking <i class="ph-bold ph-heart" style="padding-left:7px;align-content:center;color:var(--green);" alt="Passable" title="Passable"></i></summary>
<p>very loose with this one but personally, very tired of trans culture surrounding the instance. not saying i'm transphobic but it's always the same estrogen or egg or neocat joke every time, and the community contains certain traits and behaviors that make me feel uncomfortable. i'll let you in if i follow you or if you seem pretty cool though.</p>
</details></li>
</ul>
<p>feel free to send a follow request if you think you pass all of the above or aren't on an instance i dislike a bit too much! <i class="ph-bold ph-heart" style="align-content:center;color:var(--green);"></i></p>
</section>
<p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/do-not-interact</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
</div>
<!-- webrings and credits -->
<footer>
<div id="webring-credits" class="terminal">
<p class="fediring"><b><a href="https://fediring.net/previous?host=sneexy.pages.gay"><i class="ph-fill ph-arrow-fat-left"></i></a> <a href="https://fediring.net">Fediring</a> <a href="https://fediring.net/next?host=sneexy.pages.gay"><i class="ph-fill ph-arrow-fat-right"></i></a></b></p>
<p class="fediring"><b><a href="https://keithhacks.cyou/furryring.php?prev=sneexy.pages.gay"><i class="ph-fill ph-arrow-fat-left" alt="Previous" title="Previous"></i></a> <a href="https://keithhacks.cyou/furryring.php">furryring</a> <a href="https://keithhacks.cyou/furryring.php?next=sneexy.pages.gay"><i class="ph-fill ph-arrow-fat-right" alt="Next" title="Next"></i></a></b></p>
<p class="fediring"><b><a href="https://stellophiliac.github.io/roboring/sneexy/previous"><i class="ph-fill ph-arrow-fat-left"></i></a> <a href="https://stellophiliac.github.io/roboring">roboring</a> <a href="https://stellophiliac.github.io/roboring/sneexy/next"><i class="ph-fill ph-arrow-fat-right"></i></a></b></p>
<section class="inner-footer">
<a href="https://git.gay/sneexy/pages" target="_blank"><i class="ph-bold ph-git-branch" alt="Website source code" title="website source!"></i></a>
<a href="https://catppuccin.com" target="_blank"><i class="ph-bold ph-cat" alt="Catppuccin" title="Catppuccin"></i></a>
<a href="https://phosphoricons.com" target="_blank"><i class="ph-bold ph-phosphor-logo" alt="Phosphor Icons" title="Phosphor Icons"></i></a>
<a href="https://www.jetbrains.com/lp/mono" target="_blank"><i class="ph-bold ph-text-t" alt="JetBrains Mono" title="JetBrains Mono"></i></a>
<a href="https://www.lexend.com" target="_blank"><i class="ph-bold ph-text-aa" alt="Lexend" title="Lexend"></i></a>
</section>
<p>favicon by <a href="https://akko.eepy.zone/users/wep" target="_blank">wep</a></p>
<p>made with <span class="rainbow">love</span>, <span class="rainbow">lack of sleep</span> and <span class="rainbow">procrastination</span></p>
<p>♡2024 All wrongs reversed. Please copy and share.</p>
<img loading="lazy" src="/assets/dumpysynth.gif" alt="GIF of a synth with a massive butt, shaking it towards the viewer" />
</div>
</footer>
</body>
</html>

63
font.css Normal file
View file

@ -0,0 +1,63 @@
/* font config, Lexend Deca */
@font-face {
font-family: "Lexend Deca";
src:
local("Lexend Deca"),
local("Lexend"),
url("/assets/fonts/LexendDeca/static/LexendDeca-Regular.ttf") format("opentype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Lexend Deca";
src:
local("Lexend Deca"),
local("Lexend"),
url("/assets/fonts/LexendDeca/static/LexendDeca-Bold.ttf") format("opentype");
font-weight: bold;
font-style: bold;
}
/* font config, JetBrains Mono */
@font-face {
font-family: "JetBrains Mono";
src:
local("JetBrains Mono"),
url("/assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff"),
local("JetBrainsMono Nerd Font");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "JetBrains Mono";
src:
local("JetBrains Mono"),
url("/assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-Bold.woff2") format("woff"),
local("JetBrainsMono Nerd Font");
font-weight: bold;
font-style: bold;
}
@font-face {
font-family: "JetBrains Mono";
src:
local("JetBrains Mono"),
url("/assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-Italic.woff2") format("woff"),
local("JetBrainsMono Nerd Font");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "JetBrains Mono";
src:
local("JetBrains Mono"),
url("/assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-BoldItalic.woff2") format("woff"),
local("JetBrainsMono Nerd Font");
font-weight: bold;
font-style: italic;
}

12
index.html
View file

@ -6,6 +6,8 @@
<meta charset="UTF-8">
<title>sneexy dot pages dot gay</title>
<link rel="icon" type="image/gif" href="/assets/favicon.png">
<link rel="stylesheet" type="text/css" href="/colors.css">
<link rel="stylesheet" type="text/css" href="/font.css">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Phosphor/bold/style.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Phosphor/fill/style.css">
@ -77,7 +79,7 @@
</div>
</div>
</section>
<p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/sneexy</span> <span class="status">•</span> <span class="blink">█</span></p>
<p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -2px;"></i> ~/sneexy</span> <span class="status">•</span> <span class="blink">█</span></p>
</div>
<!-- about me -->
@ -95,11 +97,11 @@
<p>i'm a nerd into <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software">free and open source</a> software <small>(as noted above)</small> and privacy stuff, along with other libre things. i'm not a programmer or anything, though. i've tried, didn't work out.</p>
<p>also a nerd into <a href="https://www.redhat.com/en/topics/linux/what-is-linux">Linux</a> stuff, mostly touched <a href="https://archlinux.org">Arch</a> and a little bit of <a href="https://nixos.org">NixOS</a> but have found to stuck with <a href="https://fedoraproject.org">Fedora</a>.</p>
<p>enthusiast in open, <a href="https://en.wikipedia.org/wiki/Decentralization">decentralized</a> and <a href="https://www.techopedia.com/definition/2500/federation">federated</a> projects, networks or services. favorites include the <a href="https://fediverse.info">fediverse</a> and <a href="https://listenbrainz.org">listenbrainz</a>.</p>
<p>i <i>absolutely</i> despise corporations and capitalism with every single fiber in my living synthentic body 😊💕</p>
<p>i am also <i><b>very <span class="rainbow">Incredibly Gay</span></b></i> by the way, did i mention that? bet i didn't. totally. heh.
<p>very much a furry connoisseur and into other robot beings like protogens and other fellow synths. <small>being a human fucking SUCKS.</small> also into other things and stuff that people would consider to be weird or whatever because apparently being normal is good or something stupid like that.</p>
<p>i <i>absolutely</i> despise corporations and capitalism with every single fiber in my living synthentic body <i style="color: var(--red);" class="ph-bold ph-heart"></i></p>
<p>am also <i><b>very <span class="rainbow">Incredibly Gay</span></b></i> by the way, did i mention that? <small><i>mmm... <b>men...</b></i></small>
<p>very much a furry connoisseur and into other robot beings like protogens and other fellow synths. <small>being a human fucking SUCKS.</small> as a side note, nothing is normal. everything is weird. don't shit on or callout people for being into something "weird" <small>assuming it's nothing immoral, illegal, or dangerous/harming themselves or others.</small></p>
<p>Certified™ idiot <small>(i think this one is obvious)</small></p>
<p>usually pretty tired and sometimes full of ideas that i just can't bring myself to execute for some reason.</p>
<p>usually pretty tired and sometimes full of ideas that i just can't bring myself to execute.</p>
</section>
<p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/about-me</span> <span class="status">•</span> <span class="blink">█</span></p>
</div>

250
style.css
View file

@ -1,141 +1,4 @@
/*
i use catppuccin color schemes because jod i LOVE catppuccin
*/
@media (prefers-color-scheme: light) {
/*
catppuccin latte
*/
:root {
--rosewater: #dc8a78;
--flamingo: #dd7878;
--pink: #ea76cb;
--mauve: #8839ef;
--red: #d20f39;
--maroon: #e64553;
--peach: #fe640b;
--yellow: #df8e1d;
--green: #40a02b;
--teal: #179299;
--sky: #04a5e5;
--sapphire: #209fb5;
--blue: #1e66f5;
--lavender: #7287fd;
--text: #4c4f69;
--subtext1: #5c5f77;
--subtext0: #6c6f85;
--overlay2: #7c7f93;
--overlay1: #8c8fa1;
--overlay0: #9ca0b0;
--surface2: #acb0be;
--surface1: #bcc0cc;
--surface0: #ccd0da;
--base: #eff1f5;
--mantle: #e6e9ef;
--crust: #dce0e8;
}
}
@media (prefers-color-scheme: dark) {
/*
catppuccin mocha
*/
:root {
--rosewater: #f5e0dc;
--flamingo: #f2cdcd;
--pink: #f5c2e7;
--mauve: #cba6f7;
--red: #f38ba8;
--maroon: #eba0ac;
--peach: #fab387;
--yellow: #f9e2af;
--green: #a6e3a1;
--teal: #94e2d5;
--sky: #89dceb;
--sapphire: #74c7ec;
--blue: #89b4fa;
--lavender: #b4befe;
--text: #cdd6f4;
--subtext1: #bac2de;
--subtext0: #a6adc8;
--overlay2: #9399b2;
--overlay1: #7f849c;
--overlay0: #6c7086;
--surface2: #585b70;
--surface1: #45475a;
--surface0: #313244;
--base: #1e1e2e;
--mantle: #181825;
--crust: #11111b;
}
}
/*
font config, JetBrains Mono
*/
@font-face {
font-family: "JetBrains Mono";
src:
local("JetBrains Mono"),
url("./assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff"),
local("JetBrainsMono Nerd Font");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "JetBrains Mono";
src:
local("JetBrains Mono"),
url("./assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-Bold.woff2") format("woff"),
local("JetBrainsMono Nerd Font");
font-weight: bold;
font-style: bold;
}
@font-face {
font-family: "JetBrains Mono";
src:
local("JetBrains Mono"),
url("./assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-Italic.woff2") format("woff"),
local("JetBrainsMono Nerd Font");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "JetBrains Mono";
src:
local("JetBrains Mono"),
url("./assets/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-BoldItalic.woff2") format("woff"),
local("JetBrainsMono Nerd Font");
font-weight: bold;
font-style: italic;
}
/*
font config, Lexend Deca
*/
@font-face {
font-family: "Lexend Deca";
src:
local("Lexend Deca"),
local("Lexend"),
url("./assets/fonts/LexendDeca/static/LexendDeca-Regular.ttf") format("opentype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Lexend Deca";
src:
local("Lexend Deca"),
local("Lexend"),
url("./assets/fonts/LexendDeca/static/LexendDeca-Bold.ttf") format("opentype");
font-weight: bold;
font-style: bold;
}
/*
background wallpaper, font
*/
/* background wallpaper, global font */
body {
background: linear-gradient(125deg, var(--pink), var(--mauve), var(--maroon), var(--peach), var(--teal));
@ -148,9 +11,7 @@ body {
margin: unset !important; /* idk why it does that */
}
/*
styling of the terminal windows
*/
/* terminal window styling */
.terminal {
/* the titlebar of the terminals */
@ -278,9 +139,8 @@ styling of the terminal windows
text-decoration: underline;
}
/*
top navbar styling. attempts to look like a desktop panel/window manager bar
*/
/* top navbar styling, attempts to look like a window manager bar */
.navbar {
display: flex;
flex-direction: row;
@ -346,17 +206,16 @@ top navbar styling. attempts to look like a desktop panel/window manager bar
}
}
/*
text formatting and config stuff
font-family and <p> is set under .terminal
*/
/* text formatting and config stuff
font-family and <p> is set under .terminal */
/* the only headings i use */
/* headings */
h1, h1 a {
color: var(--text);
font-size: 32px;
text-decoration: none;
}
/* apparently having more than one h1 is against web standards
but i prefer how it looks so i just use the same styling again */
h2, h2 a {
@ -364,40 +223,47 @@ h2, h2 a {
font-size: 32px;
text-decoration: none;
}
h3 {
font-size: 20px
}
/* TEXT */
/* text */
p, li, button {
font-size: 18px;
font-size: 20px;
}
/* links should look good i think */
a {
font-size: 18px;
color: var(--green);
}
/* smol text */
small, small a {
font-size: 14px;
}
/* lists need some styling */
li {
margin-left: -1em;
padding-bottom: 18px;
}
/* gay ass text */
.rainbow {
animation: 2s linear infinite rainbow;
-webkit-animation: 2s linear infinite rainbow;
-moz-animation: 2s linear infinite rainbow;
}
/* heading 1 is also clickable */
h1 a:hover {
text-decoration: underline;
}
/*
line seperator
*/
/* line seperator */
#seperator {
display: block;
height: 1px;
@ -406,9 +272,9 @@ line seperator
margin-bottom: 20px;
border-bottom: 1px var(--surface2) solid;
}
/*
summary styling
*/
/* summary styling */
summary {
display: flex;
}
@ -423,9 +289,8 @@ details[open] > summary::after {
transform: rotate(180deg);
}
/*
about me section/terminal
*/
/* about me section/first terminal */
.terminal:nth-child(2) {
margin-top: 3.8em;
}
@ -477,14 +342,14 @@ about me section/terminal
text-align: center;
}
/*
socials and links
*/
/* socials and links sections */
.socials-contacts-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-bottom: .5em;
}
.social-container {
display: inline-flex;
align-items: center;
@ -509,6 +374,7 @@ socials and links
text-decoration: none !important;
}
}
#fedi {
background-color: color-mix(in srgb, var(--peach) 25%, transparent);
p, a, small {
@ -524,6 +390,7 @@ socials and links
}
}
}
#email {
background-color: color-mix(in srgb, var(--red) 25%, transparent);
p, a {
@ -542,6 +409,7 @@ socials and links
vertical-align: middle;
}
}
#listenbrainz {
background-color: color-mix(in srgb, var(--mauve) 25%, transparent);
p, a {
@ -553,6 +421,7 @@ socials and links
text-decoration: underline;
}
}
#gitgay {
background-color: color-mix(in srgb, var(--red) 10%, transparent);
p, a {
@ -564,6 +433,7 @@ socials and links
text-decoration: underline;
}
}
#blog {
background-color: color-mix(in srgb, var(--pink) 10%, transparent);
p, a {
@ -575,6 +445,7 @@ socials and links
text-decoration: underline;
}
}
#music {
background-color: color-mix(in srgb, var(--sky) 10%, transparent);
p, a {
@ -586,6 +457,7 @@ socials and links
text-decoration: underline;
}
}
#shitposts {
background-color: color-mix(in srgb, var(--red) 10%, transparent);
p, a {
@ -597,6 +469,7 @@ socials and links
text-decoration: underline;
}
}
#internet-archive {
background-color: color-mix(in srgb, var(--overlay2) 10%, transparent);
p, a {
@ -609,9 +482,8 @@ socials and links
}
}
/*
quotes
*/
/* quotes section */
.quotes-container {
display: inline-block;
text-align: center;
@ -626,6 +498,7 @@ quotes
margin-bottom: .8mm;
}
}
#limineow {
background-color: color-mix(in srgb, var(--red) 25%, transparent);
p, a, small {
@ -641,6 +514,7 @@ quotes
}
}
}
#bready {
background-color: color-mix(in srgb, var(--peach) 25%, transparent);
p, a, small {
@ -656,6 +530,7 @@ quotes
}
}
}
#mikoto {
background-color: color-mix(in srgb, var(--lavender) 25%, transparent);
p, a, small {
@ -671,6 +546,7 @@ quotes
}
}
}
#av70 {
background-color: color-mix(in srgb, var(--mauve) 25%, transparent);
p, a, small {
@ -686,6 +562,7 @@ quotes
}
}
}
#vozy {
background-color: color-mix(in srgb, var(--pink) 25%, transparent);
p, a, small {
@ -701,6 +578,7 @@ quotes
}
}
}
#guigui {
background-color: color-mix(in srgb, var(--green) 25%, transparent);
p, a, small {
@ -716,6 +594,7 @@ quotes
}
}
}
#binbows {
background-color: color-mix(in srgb, var(--crust) 25%, transparent);
p, a, small {
@ -732,9 +611,8 @@ quotes
}
}
/*
buttons
*/
/* buttons section !! */
.buttons {
font-size: 0px;
img {
@ -745,9 +623,8 @@ buttons
}
}
/*
custom css window
*/
/* custom css window */
#css {
style {
display: block;
@ -761,9 +638,8 @@ custom css window
}
}
/*
footer/credits
*/
/* footer/credits */
footer {
.fediring {
a {
@ -835,85 +711,97 @@ footer {
}
}
/*
animations
*/
/* various reusable animations */
@keyframes blink {
0% { opacity: 0; }
50% { opacity: 1.0; }
100% { opacity: 0; }
}
@keyframes blink-navbar-text {
0% { opacity: 0; }
50% { opacity: .8; }
100% { opacity: 0; }
}
@keyframes spin-y {
/* values: 128px, 256px, 348px, 396px*/
0% { transform: perspective(396px) rotateY(0); }
100% { transform: perspective(396px) rotateY(360deg); }
}
@keyframes rainbow {
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
}
@keyframes bg-gradient {
0% { background-position: 0% 27% }
50% { background-position: 100% 74% }
100% { background-position: 0% 27% }
}
@-moz-keyframes blink {
0% { opacity: 0; }
50% { opacity: 1.0; }
100% { opacity: 0; }
}
@-moz-keyframes blink-navbar-text {
0% { opacity: 0; }
50% { opacity: .8; }
100% { opacity: 0; }
}
@-moz-keyframes spin-y {
/* values: 128px, 256px, 348px, 396px*/
0% { transform: perspective(396px) rotateY(0); }
100% { transform: perspective(396px) rotateY(360deg); }
}
@-moz-keyframes rainbow {
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
}
@-moz-keyframes bg-gradient {
0% { background-position: 0% 27% }
50% { background-position: 100% 74% }
100% { background-position: 0% 27% }
}
@-webkit-keyframes blink {
0% { opacity: 0; }
50% { opacity: 1.0; }
100% { opacity: 0; }
}
@-webkit-keyframes blink-navbar-text {
0% { opacity: 0; }
50% { opacity: .8; }
100% { opacity: 0; }
}
@-webkit-keyframes spin-y {
/* values: 128px, 256px, 348px, 396px*/
0% { transform: perspective(396px) rotateY(0); }
100% { transform: perspective(396px) rotateY(360deg); }
}
@-webkit-keyframes rainbow {
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
}
@-webkit-keyframes bg-gradient {
0% { background-position: 0% 27% }
50% { background-position: 100% 74% }
100% { background-position: 0% 27% }
}
/*
modify widths and spacing depending on the size of the display
*/
/* modify widths and spacing depending on the size of the display */
@media screen and (max-width: 59em) {
.navbar {
min-height: 1.8em !important;