From 8ff8ea6095c870ee73983f6935f8640caa1db05e Mon Sep 17 00:00:00 2001 From: Ruben Date: Tue, 13 Aug 2024 23:21:16 -0500 Subject: [PATCH] add dni page --- dni/index.html | 134 ++++++++++ dni/style.css | 686 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 820 insertions(+) create mode 100644 dni/index.html create mode 100644 dni/style.css diff --git a/dni/index.html b/dni/index.html new file mode 100644 index 0000000..e2e8d21 --- /dev/null +++ b/dni/index.html @@ -0,0 +1,134 @@ + + + + + + + sneexy dot pages dot gay + + + + + + + + + + + + + + + + +
+ sneexy dot pages dot gay + s p g +
here
+ +

+
+ + +
+
+ +

~/do-not-interact

+
+
+
+

welcome to my probably not important, but seemingly required:

+

do not interact

+

and other warnings/preferences!

+

frankly i shouldn't need this, but the internet is full of assholes and others who do not seem to understand how to act around others (sorry), so i'm putting this up here for the sake of it.

+

--------

+ to get the basics and hopefully well known out of the way: +
    +
  • homo/trans/queerphobes
    • +
  • nazis
    • +
  • racists
    • +
  • rightoids
    • +
  • pedos/maps
    • +
  • tech/aibros (you know who you are)
    • +
  • police/cops supporters
    • +
  • "i'm not [x] i just simply don't like woke!"/"antiwoke" people
    • +
+

kindly fuck off and get away from me! 💚

+

--------

+

the Other Warnings™ and requests:

+
    +
  • i'm fine with nsfw content/accounts but please don't act lewd or anything of the like with or around me. this also includes stuff like flirting.
    • +
  • virtual interactions such as hugs or pats are usually fine, but you should probably ask me first.
    • +
  • i am horrible at direct messages. just keep that in mind when attempting to private message me for something.
    • +
+
+

~/do-not-interact █

+
+ + +
+
+ +

~/d/fedi

+
+
+
+

fedi

+

and now some dedicated warnings for the fediverse, where i'm usually on.

+

--------

+

instances i tend to vibe check harder and are most likely to pass:

+
    +
  • transfem.social 💛
    • +
      +
    • personally quite tired of the culture surrounding the instances (i'm not saying i'm transphobic here or anything or the sort, i'm just really tired of seeing the same estrogen or egg joke for like the 15th time now) and the community to me personally seems to have traits and behaviors that i feel uncomfortable with to be around.
      • +
    +
  • woem.men 💛❤️
    • +
      +
    • (see above reason, plus) multiple dramas and alligations with the instance administrator, stuff i'm really not comfortable with. would recommend that you follow from another instance, but i'm just text.
      • +
    +
+

you can send a follow request! it just may take a while for me to get around to accepting it.

+

--------

+

if you're following from:

+
    +
  • mas/todon.* (mastodon.social, mastodon.world, mastodon.online, mas.to etc) ❌
    • +
      +
    • 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.
      • +
    +
  • hachyderm.io, fosstodon.org, floss.social 🟡
    • +
      +
    • mixed bag. its either people who assume they have privilege to talk about things how they want, or just complete assholes/fossoids who assume they know everything tech and will kill you for disagreeing about something.
      • +
    +
+

+ you will be going through much harder vibe checking, or outright denied. its for the sake of my own sanity.

+
+

~/d/fedi █

+
+ + + + + + + diff --git a/dni/style.css b/dni/style.css new file mode 100644 index 0000000..3ceaaf1 --- /dev/null +++ b/dni/style.css @@ -0,0 +1,686 @@ +/* +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; + } +} + +/* +shell aliasing ass +*/ +:root { + --bg: var(--base); + --fg: var(--text); + --accent: var(--green); +} + +/* +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 +*/ +body { + background: linear-gradient( + 125deg, + var(--pink), + var(--mauve), + var(--maroon), + var(--peach), + var(--teal) + ); + background-size: 1000% 1000%; + animation: bg-gradient 10s ease infinite; + -moz-animation: bg-gradient 10s ease infinite; + -webkit-animation: bg-gradient 10s ease infinite; + font-family: "JetBrains Mono"; + font-size: 18px; + margin: unset !important; /* idk why it does that */ +} + +/* +styling of the terminal windows +*/ +.terminal { + /* the titlebar of the terminals */ + .term-titlebar { + display: grid; + grid-template-columns: 2fr auto 2fr; + grid-template-areas: "term-icon term-title term-buttons"; + + margin: -10px 0px -20px; + + /* terminal icon */ + .ph-terminal { + font-size: 25px; + align-self: center; + } + + /* title text */ + p, + a { + font-family: "Lexend Deca"; + font-size: 16px; + + color: var(--text); + text-decoration: none; + + grid-column: 2; + } + + /* window buttons */ + div { + display: flex; + + height: 22px; + align-self: center; + margin-left: auto; + + #minimize-btn { + width: 22px; + height: 22px; + + background: var(--surface2); + border-radius: 50%; + + transition: 0.2s background; + } + + #maximize-btn { + width: 22px; + height: 22px; + + background: var(--surface2); + border-radius: 50%; + margin-left: 10px; + + transition: 0.2s background; + } + + #close-btn { + width: 22px; + height: 22px; + + background: var(--surface2); + border-radius: 50%; + margin-left: 10px; + + transition: 0.2s background; + } + } + } + /* the prompt */ + .term-input { + .folder { + color: var(--sapphire); + background-color: var(--crust); + border-radius: 3em; + padding: 0px 12px 0px 12px; + } + .status { + color: var(--green); + font-size: 24px; + margin-left: 3px; + margin-right: -8px; + vertical-align: middle; + } + .blink { + display: none; + color: var(--text); + margin-left: 3px; + padding-bottom: 4px; + animation: blink 0.8s linear infinite; + -moz-animation: blink 0.8s linear infinite; + -webkit-animation: blink 0.8s linear infinite; + } + } + + background-color: var(--base); + color: var(--text); + + border: var(--mantle) solid 3px; + border-radius: 20px; + + max-width: 48em; + padding: 14px 24px; + + margin-left: auto; + margin-right: auto; + margin-bottom: 3.4em; + + transition: 0.2s border-color; + + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; +} + +.terminal:hover { + .term-titlebar { + div { + #minimize-btn { + background: var(--yellow); + transition: 0.2s background; + } + + #maximize-btn { + background: var(--green); + transition: 0.2s background; + } + + #close-btn { + background: var(--red); + transition: 0.2s background; + } + } + } + .term-input { + .blink { + display: unset; + } + } + border-color: var(--green); + + transition: 0.2s border-color; +} +.terminal > .term-titlebar > p:hover, +a:hover { + text-decoration: underline; +} + +/* +top navbar styling. attempts to look like a desktop panel/window manager bar +*/ +.navbar { + display: flex; + flex-direction: row; + position: fixed; + top: 0 !important; + z-index: 10; + min-width: 100%; + max-width: 100%; + min-height: 1.8em !important; + max-height: 1.8em !important; + margin-top: 0.5em; + + font-family: "Lexend Deca"; + align-content: center; + vertical-align: middle; + color: var(--text); + + .nav-base { + padding: 0px 0.2em !important; + border-radius: 8px; + box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px; + max-width: fit-content; + align-content: center; + } + .nav-baselink { + background-color: var(--green); + text-decoration: unset !important; + color: var(--crust); + margin-left: 0.5em !important; + } + .nav-baselink-mobile { + display: none; + } + .hover-tip { + display: none; + } + .nav-links { + background-color: var(--base); + color: var(--text); + padding: 0px 5px 0px; + margin-left: 0.5em !important; + } + .nav-links a { + color: var(--text); + text-decoration: unset !important; + } + .nav-links a:hover { + color: var(--green); + text-decoration: underline !important; + } + .nav-systray { + background-color: var(--crust); + color: var(--text); + margin-left: auto !important; + margin-right: 0.5em !important; + i { + padding: 0px 2px 0px 2px; + } + } + + a, + p { + margin: unset !important; + } + small { + opacity: 0.7; + } +} + +/* +text formatting and config stuff +font-family and

is set under .terminal +*/ + +/* the only headings i use */ +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 { + color: var(--text); + font-size: 32px; + text-decoration: none; +} +h3 { + font-size: 20px; +} +/* TEXT */ +p, +li { + font-size: 18px; +} +/* 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; +} + +/* +about me section/terminal +*/ +.terminal:nth-child(2) { + margin-top: 3.8em; +} + +/* +footer/credits +*/ +footer { + p, + a { + text-align: center; + font-size: 15px; + margin: 0.2em 0px 0.2em; + text-decoration: none; + } + img { + max-width: 30%; + display: flex; + margin-left: auto; + margin-right: auto; + } +} + +/* +animations +*/ +@keyframes blink { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes blink-navbar-text { + 0% { + opacity: 0; + } + 50% { + opacity: 0.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; + } + 100% { + opacity: 0; + } +} +@-moz-keyframes blink-navbar-text { + 0% { + opacity: 0; + } + 50% { + opacity: 0.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; + } + 100% { + opacity: 0; + } +} +@-webkit-keyframes blink-navbar-text { + 0% { + opacity: 0; + } + 50% { + opacity: 0.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 +*/ +@media screen and (max-width: 59em) { + .navbar { + min-height: 1.8em !important; + max-height: 1.8em !important; + flex-wrap: wrap; + + .nav-base { + padding: 0.27em 0.2em !important; + } + .nav-baselink { + display: none !important; + } + .nav-baselink-mobile { + display: unset !important; + background-color: var(--green); + text-decoration: unset !important; + color: var(--crust); + margin-left: 0.4em !important; + i:not(:first-child) { + margin-left: -0.5em; + margin-right: -0.5em; + opacity: 0.6; + } + } + .hover-tip { + display: unset !important; + background-color: var(--base); + margin-left: 0.5em !important; + animation: blink 3s ease-inr-out infinite; + -moz-animation: blink 3s ease-in-out infinite; + -webkit-animation: blink 3s ease-in-out infinite; + } + .nav-links { + display: none !important; + order: 1; + margin-top: 0.5em; + } + } + .navbar:hover { + min-height: 4.06em !important; + .hover-tip { + display: none !important; + } + .nav-links { + display: unset !important; + padding: 0.2em; + margin-left: 0.4em !important; + } + .nav-baselink-mobile { + padding: 0.2em !important; + } + .nav-systray { + margin-left: auto !important; + } + } + + .terminal:nth-child(2) { + margin-top: 2.8em; + } + + .terminal { + .term-titlebar { + margin: -16px 0px -24px; + } + margin: 0px 0.7em 0.7em; + padding: 10px 16px; + } +}