136 lines
5.0 KiB
HTML
136 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script type="module" src="https://md-block.verou.me/md-block.js"></script>
|
|
<style>
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
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+ */
|
|
}
|
|
|
|
/* 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-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+ */
|
|
}
|
|
|
|
/* 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-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+ */
|
|
}
|
|
|
|
/* 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-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+ */
|
|
}
|
|
html {
|
|
background-color: #181818;
|
|
color: #E9E9E9;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
font-weight: 400;
|
|
margin: 20vw;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<md-block>
|
|
|
|
|
|
|
|
# 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*
|
|
|
|
|
|
</md-block>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|