diff --git a/CREDITS.md b/CREDITS.md new file mode 100644 index 0000000..4e53fb7 --- /dev/null +++ b/CREDITS.md @@ -0,0 +1 @@ +* [Animated underline for links (modified)](https://web.archive.org/web/20220124071638/https://lolcow.crd.co/#codes) \ No newline at end of file diff --git a/TODO.html b/TODO.html new file mode 100644 index 0000000..b3f019f --- /dev/null +++ b/TODO.html @@ -0,0 +1,135 @@ + + + + + + + + + + + + + + # TODOs and IDEAS Scrapbook + + --- + --- + ## Make a "template" webpage + ### What do we want on here from the main page? + * ✔ list of local links + * ? socials + * ✘ status (lastfm, time, music) + + ### How do we dynamically update all pages when any "shared" blocks change? (prevent desync when I change a re-used block basically) + * Is this even possible without a framework (thinking of astro, but "compiled" or "processed" web sounds like a chore) + * How badly do we need this? - maybe 5 or 6 main pages, blocks etc won't be visible (probably), but still requires re-use. Do we even want blogs? Also, this seems better left alone, to be implemented later(tm) when needed + + --- + ## File browser-esque horizontal directory indicator + * /home/links with each being clickable etc as navigation back "up" + * If tux is clicked, change to win7 icon "change filepaths too w/ regex :3" + * Maybe multiple clicks, tux "falling off" + + --- + ## Make a "links" page + Like a collection of bookmarks, possibly organized, realistically not really. Just add a short description to the href or as subscript ig + + --- + ## Make a blog page + ANY stories, text, ramblings, whatever. Probably very infrequent. + + --- + ## Make a short bio (scary!) + + --- + ## Add fun animations to the background + Comets, twinkling stars, other animated pixel dithering waves or something idk! + [maybe like this?](https://github.com/tsparticles/presets/tree/main/presets/stars#readme) + + --- + ## Change background + To allow the idea above here, and because it fucks your eyesight and doesnt render suuuper well + + --- + ## Make website more 'alive' + * Add animations, transitions (dont make em obnoxious, maybe only add them on optional / for fun interactions) + * More "always moving" things, incl add fun animations to bg 2 ideas above + + --- + ## Add fancy borders, see bookmark + + + --- + ## Layout changes to the base website + + ### Seperate on-website links (onlinks) from offlinks + * Make onlinks prioritized + * Put offlinks in a seperate, smaller, visually deprioritized box + * Move this box to the side, as sidebar? -> say goodbye to mobile 4ever :sob: + + ### Make socials into a vertical element, billboard style, hanging off to the side of a box element + * Very annoying, will have to re-think main element flexbox layout + * What do we even do on mobile? A billboard like this is straight up impossible and i DONT want two different layouts depending on device size. + + | What do other people do? | | + | ------------------------ | -- | + | https://melankorin.net/about/ | set min page width in px -> mobile has to scroll across | + | https://niatsuki.neocities.org/ | broken | + | https://status.cafe/users/ctrl64 | broken | + | https://hacktivis.me/bookmarks | broken | + | https://tweakers.net/ | completely different layout | + + -> Is this problem REALLY unsolved? *sigh* + + + + + + + + + + diff --git a/assets/buttons/css2_banner.gif b/assets/buttons/css2_banner.gif new file mode 100644 index 0000000..8dcff0b Binary files /dev/null and b/assets/buttons/css2_banner.gif differ diff --git a/assets/buttons/evilchrome.gif b/assets/buttons/evilchrome.gif new file mode 100644 index 0000000..fd9f066 Binary files /dev/null and b/assets/buttons/evilchrome.gif differ diff --git a/assets/buttons/idiot.gif b/assets/buttons/idiot.gif new file mode 100644 index 0000000..382f735 Binary files /dev/null and b/assets/buttons/idiot.gif differ diff --git a/assets/buttons/made-with-windows.gif b/assets/buttons/made-with-windows.gif new file mode 100644 index 0000000..aef46dd Binary files /dev/null and b/assets/buttons/made-with-windows.gif differ diff --git a/assets/buttons/nofuckingthanks.gif b/assets/buttons/nofuckingthanks.gif new file mode 100644 index 0000000..addc153 Binary files /dev/null and b/assets/buttons/nofuckingthanks.gif differ diff --git a/assets/buttons/penis.jpg b/assets/buttons/penis.jpg new file mode 100644 index 0000000..510c359 Binary files /dev/null and b/assets/buttons/penis.jpg differ diff --git a/assets/buttons/stop-dreaming.gif b/assets/buttons/stop-dreaming.gif new file mode 100644 index 0000000..0bcd88d Binary files /dev/null and b/assets/buttons/stop-dreaming.gif differ diff --git a/assets/icons/Start Buttons.zip b/assets/icons/Start Buttons.zip new file mode 100644 index 0000000..19b69f1 Binary files /dev/null and b/assets/icons/Start Buttons.zip differ diff --git a/assets/icons/WindowsStartButtonExtraLarge (Thick taskbar).png b/assets/icons/WindowsStartButtonExtraLarge (Thick taskbar).png new file mode 100644 index 0000000..f0a4f5c Binary files /dev/null and b/assets/icons/WindowsStartButtonExtraLarge (Thick taskbar).png differ diff --git a/assets/icons/refresh.svg b/assets/icons/refresh.svg new file mode 100644 index 0000000..88d5aa4 --- /dev/null +++ b/assets/icons/refresh.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/tux.svg b/assets/icons/tux.svg new file mode 100644 index 0000000..0d22eba --- /dev/null +++ b/assets/icons/tux.svg @@ -0,0 +1,366 @@ + + + Tux + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/icons/win7button.png b/assets/icons/win7button.png new file mode 100644 index 0000000..ac50808 Binary files /dev/null and b/assets/icons/win7button.png differ diff --git a/stripes.svg b/assets/stripes.svg similarity index 100% rename from stripes.svg rename to assets/stripes.svg diff --git a/index.html b/index.html index 2feb18b..befecb3 100644 --- a/index.html +++ b/index.html @@ -6,97 +6,129 @@ - - - - -
-
-

Quinten's Outpost

- +
+
-
- -
-

Status

: 

-

     

-
-
- - -
- -
- + + + + + + \ No newline at end of file diff --git a/links.html b/links.html new file mode 100644 index 0000000..187fd63 --- /dev/null +++ b/links.html @@ -0,0 +1,446 @@ + + + + + Quintens Outpost + + + + + + + + + +
+ + +
+ + +
+

Quinten's Outpost

+ +
+ +
+ +
+

Status

: 

+

     

+
+
+ +
+ +
Current directory:
+

+ /home/quinten/links +

+
+ + +
+

Links

+

An ever-growing collection of links to other places on the internet, loosely sorted and vaguely described. Featuring relatively unknown and/or super useful links. Just give them a try!

+

+

Feel free to request more links, just email me!.

+


+
Directory
+ +
+ + + +
+ +

Tools

+
Windows
+ ! = official, from Microsoft. Does not mean better! + + +
Miscellaneous
+
    +

  • Cobalt

     +
    >> media downloader for social media, no ads
    • + +

  • Serverhunter

     +
    >> find the cheapest VPS
    • + +

  • ZoomEye

    , +

    Shodan

    , +

    Censys

     +
    >> search engines for internet-connected devices - fun to find exposed webcams, databases, etc
    • + +

  • cable.arya.ch

     +
    >> useful web tools
    • + + +

  • Canarytokens

     +
    >> "data leak detector": drop a token among important files, get notified if someone opens/triggers them
    • + + +

  • Joesandbox

    , +

    Hybrid Analysis

    , +

    any.run

    , +
    >> malware analysis
    • + +

  • Oneplus community server

     +
    >> recover tools for Oneplus devices
    • + +

  • Ventoy

    , +
    >> what if: bootable USB but with multiple ISOs and a nice gui. +
        Medicat for a ready-to-go version.
    • + + + +

  • ImgOps

     +
    >> anything images: host, reverse search, inspect, edit, add effects
    • + +

  • DeHashed

     +
    >> data leak search (paid)
    • + +

  • malwarewatch

    , + +
    >> malware repositories
    • + +

  • ffmpeg.guide

     +
    >> visual node editor for ffmpeg filters
    • + +

  • Unlighthouse

     +
    >> like google lighthouse website performance tests, but for all pages and not by Google™
    • + +

  • +
    >>
    • + +
+ + + +

Astrophotography

+ + + +

Fun

+ + + +

Archive

+
    +

  • Anna's Archive

     +
    >> sci-hub, libgen, zlib, archive.org books and more
    • + +

  • UUP dump

     +
    >> easy downloads for modern windows builds
    • + +

  • Files by Microsoft®

     +
    >> software and ISOs, Microsoft/Windows related
    • + +

  • STC Nexus

     +
    >> similar to Anna's archive, has future potential but not complete (or online) very often
    • + +

  • VP-sheets

     +
    >> free piano sheets
    • + +

  • Omniarchive

     +
    >> all minecraft java edition versions
    • + +

  • The Eye

     +
    >> "digital heritage, obscura and ideas"
    • + +

  • +
    >>
    • +
+ + +

Educational

+ +
    +

  • Repair Wiki

     +
    >> high-quality (very) low-quantity resource for tech repairs
    • + +

  • Opinionated Guides

     +
    >> engineering, music, philosophy. not my opinions, but good objective content
    • + +

  • cpu.land

     +
    >> how do CPUs work, but like, really?
    • + +

  • +
    >>
    • +
+ + +

Electronics

+
    +

  • airgradient

     +
    >> air quality monitors, CC-BY-SA "open source"
    • + +

  • Input Labs: Alpakka

     +
    >> fully open-source controller with good gyro controls, go make your own!
    • + +

  • Token2

     +
    >> relatively cheap FIDO2 security keys, upgrade your 2FA
    • + +

  • rpilocator

     +
    >> find Raspberry Pi's in stock
    • + + +

  • adafruit

     +
    >> components for projects
    • + +

  • +
    >>
    • + +
+ + +

Games

+ +
    +

  • OptiFine Alternatives

     +
    >> minecraft mods, modern OptiFine alternatives
    • + +

  • Nodus

     +
    >> minecraft exploits centered around the controversial chat reporting "feature"
    • + +

  • Drehmal: Apotheosis

     +
    >> massive minecraft adventure map; "if minecraft was more like BotW"
    • + +

  • +
    >>
    • + +
+ + +

Piracy

+ + +

Homelab

+
    +

  • noted.lol

     +
    >> shortform articles on new apps to self-host
    • + + +

  • +
    >>
    • + + +
+ +
+ + + + + + + + + + + + + +
+ +
+ +
+
+ + +
+
+ +
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css index 1eabaeb..e57bffb 100644 --- a/style.css +++ b/style.css @@ -1,37 +1,37 @@ /* ibm-plex-mono-regular - latin */ @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-display: swap; font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; - src: url('/assets/fonts/ibm-plex-mono-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + src: url('/assets/fonts/ibm-plex-mono-v19-latin-regular.woff2') format('woff2'); } /* ibm-plex-mono-italic - latin */ @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-display: swap; font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 400; - src: url('/assets/fonts/ibm-plex-mono-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + src: url('/assets/fonts/ibm-plex-mono-v19-latin-italic.woff2') format('woff2'); } /* ibm-plex-mono-500 - latin */ @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-display: swap; font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; - src: url('/assets/fonts/ibm-plex-mono-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + src: url('/assets/fonts/ibm-plex-mono-v19-latin-500.woff2') format('woff2'); } /* ibm-plex-mono-500italic - latin */ @font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-display: swap; font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 500; - src: url('/assets/fonts/ibm-plex-mono-v19-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + src: url('/assets/fonts/ibm-plex-mono-v19-latin-500italic.woff2') format('woff2'); } @@ -54,17 +54,10 @@ html { font-size: 12px; } - #subtitlebox{ - height: 6rem !important; - } - #lastfm-box, #links { - flex: 25 !important; - } - #heartbeatbox, #clock-box { - flex: 13 !important; - } - } +} + + /* @@ -76,21 +69,6 @@ 3rem vertical space between standard boxes (split into 1.5rem top and bottom) */ -/* - ideas - * navbar as vertical element on left side - * status bar under title for lastfm, mood?, misc - * services uptime - uptime kuma integration ---- sad, no api or anything for kuma... NVM WE DID IT LMFAO - * socials/links/platforms in first right-aligned box - ** wont work well on mobile, instead just attach it under title within same box? - * left side of that box as bio - * current weather widget to right of lastfm status -- naur, too much effort and weird? - * comets and blinking stars in background - * more animation in general - make this mf ALIVE!!!! - * fancy borders see bookmark - * make a little place for the kitty in top left (or right?) -*/ - /* The container query length units are: @@ -118,8 +96,10 @@ html { font-style: normal; color: #E9E9E9; font-weight: 400; + min-width: calc(min(900px, 92vw) + 300px); + /* min-width: 1000px; /* probably play with this to DECIMATE mobile and get consistent layout at the cost of horizontal scroll on mobile */ } - + body { margin: 0px; border: 0px; @@ -128,12 +108,30 @@ body { } - .container { - width: min(900px,92vw); - margin: auto; + display: flex; + justify-content: center; + align-items: flex-start; + gap: 10px; + } + +.container-main { + width: min(900px,92vw); + min-height: 85vh; + +} + +.sidebar { + max-width: 250px; + overflow: hidden; + text-wrap: wrap; /* set explicitly */ + flex-shrink: 0; + flex: 1; +} + + .link { color: #E9E9E9; text-decoration: none; @@ -191,7 +189,6 @@ body { } - .box:last-child { margin-bottom: 3rem; } @@ -219,6 +216,7 @@ body { } + #subtitlebox { display: flex; justify-content: stretch; @@ -226,7 +224,7 @@ body { height: 4rem; margin: 0; padding: 0; - margin-bottom: 1.5rem; + } #links { @@ -262,6 +260,12 @@ body { } + #directory-icon { + height: 1.5rem; + vertical-align: middle; + + } + #header { @@ -292,7 +296,7 @@ body { line-height: 1.8; font-size: min(1rem, 2.2cm); overflow: hidden; - max-height: 100%; /* Adjusted to 100% */ + max-height: 100%; padding: 1rem; padding-top: 0.5rem; display: block; @@ -395,35 +399,6 @@ body { border-left: 1px solid #E9E9E9; } -/* #uptime-name, #uptime-status { - align-items: center; - height: 100%; - margin: 0; - - } - .uptime-name-element, .uptime-status-element { - height: 2rem; - padding: 0; - margin: 0; - border: 0; - } - .uptime-name-element { - font-style: bold; - border-bottom: 1px solid #E9E9E9; - } - .uptime-name-element:last-of-type { - border-bottom: 0; - } - .uptime-box { - background: #000; - border: 1px solid #E9E9E9; - margin-top: 1.5rem; - margin-bottom: 1.5rem; - padding: 1rem; - max-height: 100%; - } -*/ - @@ -443,10 +418,18 @@ h3 { padding-bottom: 0.2rem; text-align: left; } +h4 { + font-weight: 400; + font-size: 1.8rem; + margin: 0; + padding: 0; + text-align: left; +} h5 { font-size: 1.2rem; font-style: italic; + font-weight: 500; margin: 0; padding: 0; padding-bottom: 1.2rem; @@ -466,4 +449,23 @@ button { #stripes { width: 100vw; height: max(16vh, 176px); -} \ No newline at end of file + margin-top: auto; + left: 0; + bottom: 0; +} + + + + +@media (max-width: 700px) { + #subtitlebox{ + height: 6rem; + } + #lastfm-box, #links { + flex: 25; + } + #heartbeatbox, #clock-box { + flex: 13; + } + +} diff --git a/template.html b/template.html new file mode 100644 index 0000000..2a7538c --- /dev/null +++ b/template.html @@ -0,0 +1,96 @@ + + + + + Quintens Outpost + + + + + + + +
+ +
+
+
+ +
+

Quinten's Outpost

+ +
+ +
+ +
+

Status

: 

+

     

+
+
+ +
+ +
Current directory:
+

+ /home/quinten/template +

+
+ + + + + + + + + + + + + + + +
+ +
+ +
+
+ + +
+
+ +
+ + + + + + + + + + + + + \ No newline at end of file