diff --git a/index.html b/index.html index fd99427..6802ad8 100644 --- a/index.html +++ b/index.html @@ -14,278 +14,84 @@ href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css" /> + - -
-

who am i?

-
+
+ + +
- - hiiii!! my name is Niko, this is my lil corner of the web (waow)!

- im a biromantic, asexual, genderfluid individual who likes computer-adjecent things and i also like to do video editing and VFX stuff (every once in a blue moon) !! -

im autistic as Fuck!!! so communication *might* be hard, please keep that in mind if u ever choose to talk to me, its not that i dont care!! - + hiiii!! my name is Niko, this is my lil corner of the web (waow)!

+ im a biromantic, asexual, genderfluid individual who likes computer-adjecent things and i also like to do video editing and VFX stuff (every once in a blue moon) !! +
+
+ contact:
 + xmpp
 + signal
 + discord + email +
+
+ links:
 + bluesky
 + fediverse
 + forgejo
 + youtube
-
-

pronouns

-
- it/its
they/them
she/her
he/him, or anything else
 -
-
-
-

what do u use for video editing?

-
- - adobe premiere pro (SORRY) - - - - - adobe after effects (SORRY) - - , - - sometimes davinci resolve when on linux - -
-

what about photo editing?

-
- - adobe photoshop (SORRY) - - , - - sometimes gimp when on linux - -
-

what about audio stuff?

- just reaper... -
-
-
- a collections of buttons! - sorted alphabetically by domain name -
-
-
- friends - let me know if you want urs added here! -
-
- aquamarine.gay - atapi.space - byespace - daniela.lol - doskel.net - a cropped rotated fox face emoji, in shades of gray, meant to looks like a platinum fox - - F0URST4R - ielenia.lgbt - invoxiplaygames.uk - jack.cab - jb's site - notfire.cc - microspinny.zip - potatoe.ca - shiver j. - Sneexy - reimu.info - rodents.rodeo - ry.cd-rom.net - thxdeeply.com - w.on-t.work - witchfuneral.quest - zenfyr -
-
- others -
-
- epicblazed +
+ friends +
+
+ aquamarine.gay + atapi.space + byespace + daniela.lol + doskel.net + a cropped rotated fox face emoji, in shades of gray, meant to looks like a platinum fox + + F0URST4R + ielenia.lgbt + invoxiplaygames.uk + jack.cab + jb's site + notfire.cc + microspinny.zip + potatoe.ca + shiver j. + Sneexy + reimu.info + rodents.rodeo + ry.cd-rom.net + thxdeeply.com + w.on-t.work + witchfuneral.quest + zenfyr +
+
+ others +
+
+ epicblazed i dont give a FUCK about safari - googleballs.com - smokepowered.com - The Starlight Network - Synth.Download! -
-
- and here is mine! - feel free to add mine (hotlinking is ok!, click the button to copy the html) -
-
- my cool ass button -
+ googleballs.com + smokepowered.com + The Starlight Network + Synth.Download! +
+
+ and here is mine! + feel free to add mine (hotlinking is ok!, click the button to copy the html) +
+
+ my cool ass button +
- website source! - last modified: 2026-04-18T23:45:53Z - copied to clipboard! - - - - + - - diff --git a/styles.css b/styles.css index 3f054b5..9a93133 100644 --- a/styles.css +++ b/styles.css @@ -37,12 +37,9 @@ } } input[type="checkbox"] { - /* Add if not using autoprefixer */ -webkit-appearance: none; appearance: none; - /* For iOS < 15 to remove gradient background */ background-color: #fff; - /* Not removed via appearance */ margin: 0; font: inherit; color: var(--crust); @@ -140,7 +137,46 @@ height: 100%!important; inset: 0 !important; } + .tab { + overflow: hidden; + } + .tab button { + background-color: inherit; + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 8px 10px; + transition: 0.3s; + border: 2px solid var(--accent); + border-radius: 12px 12px 0 0; + background-color: var(--background); + border-bottom: none; + margin-right: 5px; + font-family: inherit; + position: relative; + display: inline-block; + } + .tab button:hover { + background-color: rgba(0,0,0,0.15); + } + .tab button.active { + background-color: rgba(0,0,0,0.15); + } + + /* Style the tab content */ + .tabcontent { + display: none; + padding: 3px 10px; + background-color: var(--background); + border: 2px solid var(--accent); + border-top: none; + border-radius: 0 0 12px 12px; + position: absolute; + transform: translate(0, -36px); + } :root { + font-family: "Sour Gummy", monospace; color-scheme: light dark; &:has(#theme-light:checked) { color-scheme: light; @@ -230,8 +266,6 @@ position: fixed; opacity: 0.8; } - - /* This will be activated when the snackbar's class is 'show' which will be added through JS */ #copy-toast.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; @@ -287,209 +321,54 @@ opacity: 0; } } - button { - font-family: "Iosevka Aile", monospace; - font-size: 17px; - border-radius: 10px; + .settings-button { + background-color: var(--background); + outline: 2px dashed var(--accent); + border-radius: 12px; + padding: 10px; + transform: translate(10px, 0); } body { - display: table; background-color: var(--background); color: var(--foreground); - font-family: "Iosevka Aile", monospace; margin: 10px auto; max-width: 1200px; min-width: 400px; } .divider { - border-top: 2px dashed; - border-color: var(--divider-color); + border-top: 2px dashed var(--divider-color); margin: 20px auto; } .main { - background-color: light-dark(#dce0e880, #11111b80); - &:has(#theme-catppuccin:checked) { - background-color: light-dark(#f1f3f280, #30303080); - } - &:has(#theme-newpaper:checked) { - background-color: light-dark(#eff1f580, #1e1e2e80); - } - &:has(#theme-dracula:checked) { - background-color: light-dark(#FFFBEB80, #282A3680); - } + background-color: var(--background); margin-top: 20px; outline: 2px solid; outline-color: var(--accent); - border-radius: 25px; + border-radius: 12px; padding: 20px; box-shadow: inset 0px 0px 0px 0px var(--accent); + position: fixed; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 900px; + padding-top: 0; } - .main a { - font-size: 13px; + .main .tab { + transform: translate(0, -36px); } .main .about { - text-align: "left"; - margin-top: 10px; - width: 50%; + text-align: left; + width: 60%; display: inline-block; } .main .pronouns-box { - background-color: light-dark(#dce0e880, #11111b80); - &:has(#theme-dracula:checked) { - background-color: light-dark(#FFFBEB80, #282A3680); - } - margin-top: 20px; - outline: 2px solid; - outline-color: var(--accent); - border-radius: 25px; - padding: 20px; - width: 35%; + width: 15%; display: inline-block; - margin-left: 100px; - } - .main:hover { - outline: 5px dashed; - outline-color: var(--accent); - background-color: var(--crust); - transform: scale(1.01, 1.01); - transition: ease-in-out 0.3s; - box-shadow: inset 0px 0px 25px 0px var(--accent); - } - .pronouns-box:hover { - outline: 5px dashed; - outline-color: var(--accent); - opacity: 1; - background-color: var(--crust); - transform: scale(1.01, 1.01); - transition: ease-in-out 0.3s; - box-shadow: inset 0px 0px 25px 0px var(--accent); - } - footer { - font-family: "Iosevka Aile", monospace; - color: var(--foreground); - font-size: 20px; - background-color: var(--crust); - padding: 15px; - outline: 2px solid; - outline-color: var(--accent); - border-radius: 25px; - margin-top: 10px; - opacity: 0.7; - width: 1200px; - box-shadow: 10px 5px 10px var(--crust); - } - footer:hover { - outline: 5px dashed; - outline-color: var(--accent); - opacity: 1; - transform: scale(1.01, 1.01); - transition: ease-in-out 0.3s; - } - - .form-input { - margin-bottom: 11px; - } - - .form-input_message { - display: block; - margin-top: 10px; - color: var(--accent); - border: 1px solid; - border-color: var(--accent); - border-radius: 10px; - background: var(--background); - padding: 10px; - resize: both; - overflow: hidden; - font-family: "Iosevka Aile", monospace; - } - - /* dd container */ - .dropdown { - display: inline-block; - position: relative; - outline: none; - } - .dropdown a { - border: 0px soild transparent; - border-radius: 20px; - } - - /* button */ - .dropbtn { - color: var(--accent); - border: 2px dashed; - border-color: var(--accent); - border-radius: 15px; - background: var(--background); - padding: 8px; - } - .input { - color: var(--accent); - border: 1px solid; - border-color: var(--accent); - border-radius: 10px; - background: var(--background); - padding: 7px; - font-family: "Iosevka Aile", monospace; - } - - .guest { - border: 2px dashed; - border-color: var(--accent); - padding: 10px; - color: var(--accent); - background: var(--background); - font-family: "Iosevka Aile", monospace; - } - - /* dd content */ - .dropdown .dropdown-content { - position: absolute; - top: 50%; - margin-top: 8px; - border: 2px solid; - border-color: var(--accent); - border-radius: 15px; - background-color: var(--background); - min-width: 100%; - padding: 5px; - box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); - visibility: hidden; - opacity: 0; - transition: 0.2s ease-in-out; - } - .dropdown-content a { - color: var(--background); - padding: 8px 0; - display: block; - text-decoration: none; - transition: 0.2s ease-in-out; - text-align: center; - } - .dropdown-content a:hover { - background-color: var(--foreground); - } - .dropdown .settings-popup { - position: absolute; - top: 50%; - margin-top: 8px; - border: 2px solid; - border-color: var(--accent); - border-radius: 15px; - background-color: var(--background); - min-width: 100%; - padding: 5px; - box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); - visibility: hidden; - opacity: 0; - transition: 0.2s ease-in-out; - } - .settings-popup a { - color: var(--background); - display: block; - text-decoration: none; - text-align: center; + margin-bottom: 20px; + text-align: left; + margin-left: 40px; } .web-buttons:hover .web-button { transition: ease-in-out 0.2s; @@ -499,12 +378,11 @@ .web-buttons .web-button:hover { transition: ease-in-out 0.3s; outline: solid 2px; - border-radius: 10px; + border-radius: 5px; outline-color: var(--accent); filter: blur(0); box-shadow: 0px 0px 10px var(--foreground); transform: scale(1.3, 1.3) translateX(-10px) translateY(-2px); - display: inline-block; } .other-web-buttons:hover .web-button { transition: ease-in-out 0.2s; @@ -531,83 +409,3 @@ transform: scale(1.4, 1.4); display: inline-block; } - - .alt-popup { - background-color: color-mix(in srgb, var(--background) 85%, transparent); - backdrop-filter: blur(.5rem); - color: var(--foreground); - border: solid 2px var(--accent); - z-index: 1000; - pointer-events: none; - opacity: 0; - border-radius: .5rem; - max-width: 30rem; - padding: .5rem; - font-size: 1rem; - transition: opacity .4s; - position: fixed - } - .pfp { - border-radius: 15px; - border: 2px solid; - border-color: var(--accent); - width: 70px; - height: auto; - } - .pfp:hover { - transition: ease-in-out 0.45s; - height: auto; - transform: scale(1.45, 1.45); - } - - /* show dd content */ - .dropdown:focus .dropdown-content { - outline: none; - transform: translateY(18px); - visibility: visible; - z-index: 100 !important; - opacity: 0.9 !important; - } - .dropdown:focus .settings-popup { - outline: none; - transform: translateX(-40%) translateY(0px); - visibility: visible; - z-index: 100 !important; - opacity: 0.9 !important; - } - - .dropbtn:hover, .dropdown:focus .dropbtn { - background-color: var(--accent); - color: var(--background); - border-color: var(--background); - transition: ease-in-out 0.5s; - position: relative; - padding: 10px; - box-shadow: inset 0px 0px 25px 0px var(--crust); - } - - /* mask to close menu by clicking on the button */ - .dropdown .db2 { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - opacity: 0; - cursor: pointer; - z-index: 10; - display: none; - } - .dropdown:focus .db2 { - display: inline-block; - } - .dropdown .db2:focus .dropdown-content { - outline: none; - visibility: hidden; - opacity: 0; - } - .dropdown .db2:focus .settings-popup { - outline: none; - visibility: hidden; - opacity: 0; - }