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 @@
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: +a community that says they're aiming to make the fediverse "safer" by "fighting racism, queerphobia, harassment" and all that stuff, yet have posted blatent transphobia, spam moderation tags with useless information/ranting, do targeted harassment, literally doxx people, will say you're the harasser for asking them to stop, and show lack of respect to anyone outside of their group. yeah. no fucking thanks.
+...you know the drill. kindly Get The Hell Away From Me!
+ +instances that i look out for:
+these instances contain a bunch 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. you don't have to listen to me, i'm just text.
+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.
+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.
+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.
+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'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 andis 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;