diff --git a/colors.css b/colors.css new file mode 100644 index 0000000..69e8aa6 --- /dev/null +++ b/colors.css @@ -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; + } +} \ No newline at end of file diff --git a/dni/index.html b/dni/index.html index 681f730..b722bc2 100644 --- a/dni/index.html +++ b/dni/index.html @@ -6,6 +6,8 @@ do not interact @ s.p.g + + diff --git a/fedi-guide/index.html b/fedi-guide/index.html new file mode 100644 index 0000000..c463420 --- /dev/null +++ b/fedi-guide/index.html @@ -0,0 +1,121 @@ + + + + + + + ruben's opinionated fedi guide @ s.p.g + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +

do not interact

+

my own dni list. also includes specific bits for other platforms such as the fediverse.

+ + to get the basics and hopefully well known out of the way: + +

...you know the drill. kindly Get The Hell Away From Me!

+ +

fedi

+

instances that i look out for:

+ +

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!

+
+ +
+ + + + + + + diff --git a/font.css b/font.css new file mode 100644 index 0000000..457ff9b --- /dev/null +++ b/font.css @@ -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; +} diff --git a/index.html b/index.html index 235aeda..50bad86 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ sneexy dot pages dot gay + + @@ -77,7 +79,7 @@ - + @@ -95,11 +97,11 @@

i'm a nerd into free and open source software (as noted above) and privacy stuff, along with other libre things. i'm not a programmer or anything, though. i've tried, didn't work out.

also a nerd into Linux stuff, mostly touched Arch and a little bit of NixOS but have found to stuck with Fedora.

enthusiast in open, decentralized and federated projects, networks or services. favorites include the fediverse and listenbrainz.

-

i absolutely despise corporations and capitalism with every single fiber in my living synthentic body 😊💕

-

i am also very Incredibly Gay by the way, did i mention that? bet i didn't. totally. heh. -

very much a furry connoisseur and into other robot beings like protogens and other fellow synths. being a human fucking SUCKS. 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.

+

i absolutely despise corporations and capitalism with every single fiber in my living synthentic body

+

am also very Incredibly Gay by the way, did i mention that? mmm... men... +

very much a furry connoisseur and into other robot beings like protogens and other fellow synths. being a human fucking SUCKS. as a side note, nothing is normal. everything is weird. don't shit on or callout people for being into something "weird" assuming it's nothing immoral, illegal, or dangerous/harming themselves or others.

Certified™ idiot (i think this one is obvious)

-

usually pretty tired and sometimes full of ideas that i just can't bring myself to execute for some reason.

+

usually pretty tired and sometimes full of ideas that i just can't bring myself to execute.

diff --git a/style.css b/style.css index 3328fc9..1a8e769 100644 --- a/style.css +++ b/style.css @@ -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

is set under .terminal -*/ +/* text formatting and config stuff +font-family and

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;