From c2e5e1c3cd4fa03324da2c323d3bdd5ed9619df8 Mon Sep 17 00:00:00 2001 From: will Date: Sun, 26 Feb 2023 22:36:33 -0700 Subject: [PATCH] Overhaul /stuff/ + webring styling I've overhauled /stuff/ to be in line with the rest of the site and moved some of the things on it to places I consider to be more appropriate. I've also made some more minor styling changes, as well as giving each webring on the landing page its own custom CSS flair. --- chromealert.php | 2 +- etc/index.php | 8 +-- index.php | 81 ++++++++++++++++++++++++---- links/index.php | 19 +++++++ stuff/index.php | 138 +++++++++++++----------------------------------- style.css | 14 +++-- 6 files changed, 142 insertions(+), 120 deletions(-) diff --git a/chromealert.php b/chromealert.php index 267564b..3aac1d6 100644 --- a/chromealert.php +++ b/chromealert.php @@ -16,6 +16,6 @@ if($_GET['donotsee'] === 'yes') { die(); } else if (preg_match('/(chrome|opera|edge|brave)/i', $_SERVER['HTTP_USER_AGENT']) && !preg_match('/(headlesschrome)/i', $_SERVER['HTTP_USER_AGENT']) && $_COOKIE['niceopodNoChromiumWarning'] !== "true") { $ogpg = $_SERVER['REQUEST_URI']; - echo "
It seems you're using a browser based on Google Chrome. Chrome itself is effectively spyware, but even if you're using something else Google still controls the engine and there are various compelling reasons to avoid that. I recommend switching to Firefox.
Do not see this again (sets a cookie)
"; + echo "
It seems you're using a browser based on Google Chrome. Chrome itself is effectively spyware, but even if you're using something else Google still controls the engine and there are various compelling reasons to avoid that. I recommend switching to Firefox.
Do not see this again (sets a cookie)
"; } ?> \ No newline at end of file diff --git a/etc/index.php b/etc/index.php index 21967d4..5d44966 100644 --- a/etc/index.php +++ b/etc/index.php @@ -25,6 +25,9 @@ +

Time warp

+

v1 - Old, slow, basically just a carrd page on steroids. Made heavy use of float initially. Ugh.

+

v2 - Slick as hell but entirely Javascript-dependent. This is where my webpage became a website.

Buttons

Piracy Now! @@ -74,14 +77,11 @@
  • Add a changelog to this page by parsing the atom feed
  • Make a cool 404 page
  • Add my CD collection to the music page
  • -
  • [In progress] Optimize this thing for mobile displays
  • Make a page for games I like
  • -
  • Update the navigation on the landing page to a vertical layout
  • Write another blog post
  • Update privacy policy
  • -
    +
    diff --git a/index.php b/index.php index 1c11131..5f3a0c2 100644 --- a/index.php +++ b/index.php @@ -47,10 +47,55 @@ margin: 0 1rem; white-space: nowrap; } + + #bucketfish, .bflink { + --red: #ffcaca; + --orange: #ffedc1; + --yellow: #feffb8; + --green: #c4ffcb; + --blue: #add8ff; + --purple: #ccafe9; + --darkgreen: #3E885B; + --darkblue: #7fb4f5; + --background: #454545; + --rainbowright: linear-gradient(to right, var(--red) 0%, var(--orange) 20%, var(--yellow) 40%, var(--green) 60%, var(--blue) 80%, var(--purple) 100%); + + color: var(--purple); + display: inline-block; + position: relative; + text-decoration: none; + transition: linear .2s; + } + #bucketfish:before, .bflink:before { + background: var(--rainbowright); + content: ''; + height: 2px; + position: absolute; + bottom: -1.5px; + width: 100%; + left: 50%; + transform: translateX(-50%); + transition: width 0.2s ease-in-out; + } + .bflink:hover { + color: var(--purple); + } + #bucketfish:hover:before, .bflink:hover:before { + width: 0; + } + #bucketfish span { + animation-delay: var(--n); + animation: wave 1.5s linear var(--n) infinite forwards running, rainbow 3s linear var(--n) infinite forwards running; + position: relative; + } + @media (prefers-reduced-motion) { #bubblecolumn { display: none; } + #bucketfish span { + animation: none; + } } @media only screen and (hover: none) { #rightsidebg { @@ -68,6 +113,24 @@ } } } + + @keyframes wave{ + 0% {top: 0px;} + 25% {top: -1px;} + 50% {top: 0px;} + 75% {top: 1px;} + 100% {top: 0px;} + } + + @keyframes rainbow{ + 0% {color: var(--red);} + 17% {color: var(--orange);} + 33% {color: var(--yellow);} + 50% {color: var(--green);} + 67% {color: var(--blue);} + 83% {color: var(--purple);} + 100% {color: var(--red);} + }
    diff --git a/links/index.php b/links/index.php index 72eb42c..29fe6a2 100644 --- a/links/index.php +++ b/links/index.php @@ -83,6 +83,25 @@ deeptwisty.itch.io My itch.io page + +

    Services

    + + + social.isopod.cool + My personal fediverse instance. Open for registrations, if I know you. + + + search.isopod.cool + My personal SearXNG instance. Feel free to use it. + + + rss-bridge.isopod.cool + An rss-bridge instance. Feel free to use this too. + + + git.isopod.cool + A Forgejo instance with the source code to this website. +

    Others

    diff --git a/stuff/index.php b/stuff/index.php index 8575afb..63ee431 100644 --- a/stuff/index.php +++ b/stuff/index.php @@ -4,124 +4,56 @@ Items - -

    Services

    +

    stuff

    +

    things too!

    - - - - - - - - - - + - + - - - - - - + + - - - -
    social.isopod.coolMy personal Akkoma instance. Run by me, for me. Feel free to register for an account if we know each other, though.
    search.isopod.coolAn instance of SearXNG, a metasearch engine that aggregates results from several other search engines.
    rss-bridge.isopod.coolAn rss-bridge instance. Generates RSS feeds for websites that don't have them.

    Utilities

    rssfilter.phpA basic RSS feed filtering tool. Works on RSS and Atom feeds and can take both plain text and regex.Basic RSS and Atom feed filtering utility. Accepts regex.
    firefoxrss/An RSS bridge for Firefox release notes
    feed.phpDownload the source codefirefoxrssRSS bridge for Firefox release notes.
    git.isopod.coolMy personal Forgejo instance. The source code for my websites is on there.
    -

    Items

    - - - - + - - - - - - - - - - - - - - + + - + @@ -129,29 +61,33 @@ - + - + + + + + + + + - - - - - +
    ../Go back

    Downloads

    EnchantedToolsPack v1.zipA custom resource pack I made for Minecraft that uses the Optifine mod's custom texture functionality to add custom textures for enchanted tools and weapons. Works as of 1.19.
    ../old/Previous iterations of my website
    1The final form of the first iteration. Little more than a glorified link directory.
    2The final form of the second iteration. Scrapped mainly because it was too dependent on Javascript.EnchantedToolsPack_v1.zipCustom resourcepack for Minecraft that uses functionality from Optifine to add custom textures for enchanted tools and weapons. Confirmed working with 1.19.
    webpkiller/Various scripts I've written to intercept .webp images on opening and replace them with a superior format, because fuck webp. Use by setting them as the default program for opening .webp files. They'll make a copy of the image converted to .png, delete the original, and open the new one in your default program. Untested with animated webp files. These are all open source, so feel free to edit and redistribute.Various scripts intended for use as the default program for opening .webp files. They automatically replace the .webp image with a .png one and open that instead. Incompatible with animated .webp images.
    webpkiller.sh
    webpkiller.cmdBatch script for Windows. Only works on .webp files. Requires ImageMagick to be installed. Replaces every instance of ".webp" in the filepath because I couldn't figure out how to do string manipulation properly in Windows batch language, so watch out for that.Batch script for Windows. Only works on .webp files. Requires ImageMagick. Replaces every instance of ".webp" in the filepath because Windows batch language is hard.
    webpkiller.pyPlatform-agnostic Python script. Requires Python 3 and the pillow library to be installed. Works on any image format supported by pillow.Platform-agnostic Python script. Requires Python 3 and the pillow library to be installed, supports anything they do.
    webpkiller_win.zip webpkiller.py, but compiled for Windows with pyinstaller.
    dirtomp3.shBash script for Linux to copy my entire music library including album covers, using ffmpeg to convert all the audio to mp3s.

    Other

    neon_boost_times.html A table of my level times in the game Neon Boost, in case you care.
    userstyles.world/style/5238
    /status-cafe-latte
    Stylus theme I made for status.cafe, the site behind the little status widget on my blog.
    dirtomp3.shLinux Bash script I wrote to recursively convert my entire music library to mp3s to reduce the amount of space it takes up on my phone. Copies the entire directory structure, keeping images, converting audio if needed, and discarding everything else. Requires ffmpeg.Stylus theme I made for status.cafe, the site behind the little status widget on my blog, and the attached forum.
    +
    diff --git a/style.css b/style.css index 5fc2cb4..e2ef4e5 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,10 @@ :root { --stdfont: mono, monospace; --bgcolor: #222222; + --fontcolor: gainsboro; + --linkcolor: #df1955; + --linkhover: #00ffd5; + --bodywidth: min(90vw, 43rem); --stddropshadow: 4px 4px 8px black; --navbarheight: 2.5rem; @@ -12,7 +16,7 @@ html, body { body { font-family: var(--stdfont); background-color: var(--bgcolor); - color: gainsboro; + color: var(--fontcolor); max-width: var(--bodywidth); margin: auto; padding-top: var(--navbarheight); @@ -45,7 +49,7 @@ header { box-shadow: var(--shadowsize) 0 var(--shadowsize) calc(0rem - var(--shadowsize)) black inset; } h1 { - font-size: 4.4em; + font-size: 4.3em; margin: 0; padding: 0 3rem 3rem 3rem; background-image: url(images/isopod.php); @@ -105,10 +109,10 @@ nav > * { padding: 0 .5em; } a { - color: #df1955; + color: var(--linkcolor); } a:hover { - color: #00ffd5; + color: var(--linkhover); } input#navtoggle { display: none; @@ -316,7 +320,7 @@ blockquote .attr { right: 0; top: calc(-.2rem - (3rem * var(--rowcount))); z-index: 75; - background-color: #222222; + background-color: var(--bgcolor); transition-duration: .5s; box-shadow: none; height: fit-content;