nat/webbed-site
1
0
Fork 3
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

apply new style to all non-blog files barring site-info.html

Browse Source
This commit is contained in:
gnat 2024-07-27 12:31:33 -07:00
parent a59e0d8adb
commit 9bfa93d8c6
18 changed files with 686 additions and 525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -4,5 +4,5 @@ test.sh
log
graph*
__pycache__/
/files/stats/song
/files/home_visit_counter
files/stats/song
files/home_visit_counter

4
changelog
View File

@ -16,6 +16,10 @@
2024-07-24: updated wording in site-info.html, add /stats/ routes, update home.html to make filetree hidden by default because it is big
2024-07-25: rewrite css because winter told me to. Now has dark mode based on a media query.
2024-07-25: add subdomain proxying with nginx.
<<<<<<< Updated upstream
2024-07-26: add <a href='git.natalieee.net'>git.natalieee.net</a>
=======
2024-07-26: add <a href='https://git.natalieee.net'>git.natalieee.net</a>
>>>>>>> Stashed changes
2024-07-26: update site-info.html
2024-07-26: I have a dns server now. oops. there go my sleeping plans. email me if you want to use it for some insane reason.

5
dir_index.html
View File

@ -2,6 +2,7 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"> <!-- lol -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index of {path}</title>
<link href="data:text/css,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ddg-runtime-checks%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20" rel="stylesheet" type="text/css">
<style>
@ -10,6 +11,8 @@
</head>
<body>
$[python3 -u -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<h1>Index of {path}</h1>
<table>
<tbody><tr><th><p>Name</p></th><th><p>Last modified</p></th><th><p>Creation Date</p></th><th><p>Size</p></th></tr>
@ -18,5 +21,7 @@
<tr><th colspan="4"><hr></th></tr>
</tbody>
</table>
</section>
</main>
</body>
</html>

43
home.html
View File

@ -3,6 +3,7 @@ $[echo visit >> files/home_visit_counter]
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
$[cat style.css]
/* appended to maintain html spec compliance while maintaining the consequences of albert's hack */
@ -34,6 +35,8 @@ $[echo visit >> files/home_visit_counter]
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<p>
I'm Natalie[ee].<br>
$[find files/homepage-statements/* | shuf -n1 | xargs -I % cat %]<br>
@ -41,40 +44,52 @@ $[echo visit >> files/home_visit_counter]
I am not sure what I am going to use this site for, it only exists because I was <del>procrastinating my calculus homework</del> bored one day.<br>
Website homepage visit counter: $[cat files/home_visit_counter | wc -l]
</p>
<a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fnatalieee.net%2F" class="nostyle" rel="nofollow">
<a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fnatalieee.net%2F" class="88x31" rel="nofollow">
<img alt="W3C HTML5" src="/files/html5.png" width="88" height="31">
</a>
<hr>
</section>
<section>
<h2>Particularly noteable pages</h2>
<a href='/html/site-info.html'>Information about this website</a><br>
<a href='/html/natalie-info.html'>Information about me</a><br>
<a href='/html/blog/index.html'>There is also a blog. I do not use it frequently.</a><br>
<a href='/html/site-info.html'>Information about this website</a>
<a href='/html/natalie-info.html'>Information about me</a>
<a href='/html/blog/index.html'>There is also a blog. I do not use it frequently.</a>
<a href='/html/random-thoughts.html'>There are also random natalie thoughts. sometimes they might be interesting</a>
<hr>
</section>
<section>
<h2>Directories</h2>
$[find -maxdepth 1 -type d | sed 1d | xargs -I% echo '<a href=%>%</a>' | sed 's/\.\///g' | grep -v pycache | grep -v .git]
<hr>
<span>$[find -maxdepth 1 -type d | sed 1d | xargs -I% echo '<a href=%>%</a>' | sed 's/\.\///g' | grep -v pycache | grep -v .git]</span>
</section>
<section>
<h2>Changelog</h2>
<pre>$[cat changelog]</pre>
<hr>
</section>
<section>
<h2>Site file tree</h2>
<details>
<summary>File tree hidden for brevity</summary>
$[tree . | sed 's/^\./site/; s/─/-/g; s/├/|/g; s/└/\\/g; s/│/|/g' | sed '1i\<pre>' | sed '$a\</pre>']
</details>
<hr>
</section>
<section>
<h2>Autistic collection of 88x31s</h2>
$[for file in ./files/88x31/*; do (file -i "$file" | grep -qE 'image/') && echo "<img src=\"$file\" width=\"88\" height=\"31\"/>" || cat "$file"; done | shuf]
<hr>
<span>$[for file in ./files/88x31/*; do (file -i "$file" | grep -qE 'image/') && echo "<img src=\"$file\" width=\"88\" height=\"31\"/>" || cat "$file"; done | shuf]</span>
</section>
<section>
<h2>Post arbitrary data to my website to be displayed here</h2>
Yes, I do sanitize this. <a href='/html/albert-hack-1.html' ><del>(No you don't --sanitization tester)</del></a> Yes, I do.
</section>
<section class='ignore-section'>
<form action="#" method="post">
<label for="postText">post text: </label>
<input type="text" id="postText" name="text" required>
<label for="postName">name to be displayed with post: </label>
<label for="postName">username: </label>
<input type="text" id="postName" name="name" required>
<button type="submit">Submit</button>
</form>
$[ls -r ./files/posts-to-homepage/* | xargs cat]
<div>
$[ls -r ./files/posts-to-homepage/* | while read -r file; do echo "<div class=post>$(cat $file)</div>"; done ]
</div>
</section>
</main>
</body>
</html>

15
html/I-dont-like-IT.html
View File

@ -4,13 +4,17 @@
<style>
$[cat style.css]
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<h1>My school district's IT is mean :(</h1>
My school district has a very silly IT department. I am reasonably annoyed by this and have thus decided to tell whoever looks at my website about it.<br>
I-dont-like-IT.html was last modified on $[stat -c %y ./html/I-dont-like-IT.html | head -c 10].<hr>
</section>
<section>
<h2>"""Cuban malware""" incident</h2>
<p>
It is really going to sound like I am exaggerating or making things up here. I am not, PPS IT is really like this.
@ -54,7 +58,8 @@
While I would never think to record conversations with someone without their consent of course, failing to file paperwork that is arguably required for my safety and then denying the meeting in which one stated they would file paperwork is certainly the sort of thing that would prompt me to begin recording all conversations I had with someone, were I the type of person to break the law of course.<br>
I really wish I had a recording of the IT security lady saying the cuban malware line. alas.
</p>
<hr>
</section>
<section>
<h2>Leaking the wifi creds</h2>
<p>
To be fair, this one is my fault.
@ -100,12 +105,14 @@
</ul>
Ridiculous email, 10/10, made me laugh.<br><br>
</p>
<hr>
</section>
<section>
<h2>Misc</h2>
<ul>
<li>Freshman year, I gained access to multiple staff member's credentials. Given that I am not a particularly malicious person and only did this out of boredom, I did not do anything bad with them and instead reported the means by which I got them to IT.
I will leave guessing whether or not they fixed the issue I exploited as an exercise for the reader.</li>
</ul>
</div>
</section>
</main>
</body>
</html>

12
html/albert-hack-1.html
View File

@ -1,16 +1,19 @@
<html>
<head>
<title>Not a fan of IT</title>
<title>Albert</title>
<style>
$[cat style.css]
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<div>
<main>
<section>
<h1>Friend hacked my website lol</h1>
<p>But how?</p>
<hr>
</section>
<section>
<p>
Prior to me rewriting the backend of my website, there was a bug that would allow a bash command in a comment inside $[echo \$\[\]] and not containing &lt; or &rt; to be executed if you querried the url /html/%2e%2e/files/posts-to-homepage/{post file}.
This was due to any url beginning with '/html/' being unconditionally put through parse_file(), which generates static content from the embedded bash in the html (see <a href='/html/site-info.html'></a>).
@ -22,6 +25,7 @@
Amazingly, at the same time that they did this, my other friend's girlfriend (appearing in the comments as gexfan) was halfheartedly trying to mess with my site.
This ended with around 15 messages on discord telling me my site had been hacked, only around two of which were from albert.
</p>
</div>
</section>
</main>
</body>
</html>

7
html/blog/index.html
View File

@ -4,9 +4,12 @@
</style>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<h1>Blog? Thing</h1>
<p>I don't know if I will use this, but I am bored and thus making a blog system.</p>
<hr>
</section>
<section>
<h2>Posts</h2>
<table>
<tbody><tr><th><p>Title</p></th><th><p>Editted</p></th><th><p>Posted</p></th><th><p>Size</p></th></tr>
@ -15,5 +18,7 @@
<tr><th colspan="4"><hr></th></tr>
</tbody>
</table>
</section>
<main>
</body>
</html>

16
html/cool-sites.html
View File

@ -4,12 +4,13 @@
$[cat style.css]
</style>
<title>Neat/odd/cool/relatively unknown/other adjective websites</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<h1>Websites that I think are interesting or just odd, with varying obscurity and in no particular order</h1>
<hr>
<div>
<ul>
<li><a href='https://eightyeightthirty.one/'>eightyeightthirty.one</a> A graph of website badges.</li>
<li><a href='http://lena.kiev.ua/'>lena.kiev.ua</a> Cool transgender ukranian lady who makes bathtub estrogen.</li>
@ -28,12 +29,15 @@
<li><a href='https://eda.gay'>eday.gay</a> She owns less thinkpads than I do. Brainwormed.</li>
<li><a href='https://www.yourworldoftext.com/apionet'>https://www.yourworldoftext.com/apionet</a> buzzzzzzzzzzzzzzzzzzz</li>
</ul>
</div>
This web page compelled me to put it somewhere:
<a href="https://citrons.xyz/a/memetic-apioform-page.html"><img src="https://citrons.xyz/a/static/apiopage.png"/></a>
</section>
<section>
<h1>entities I sometimes interact with physically</h1>
winter: <a href='https://bunbun.dev'>bunbun.dev</a><br>
odette: <a href='https://puppygirl.systems'>puppygirl.systems</a> (nothing is there yet)<br>
albert: <a href='https://iso-9995-9.com'>iso-9995-9.com</a> (down? dns issue maybe)<br
<span>winter: <a href='https://bunbun.dev'>bunbun.dev</a></span>
<span>odette: <a href='https://puppygirl.systems'>puppygirl.systems</a> (nothing is there yet)</span>
<span>albert: <a href='https://iso-9995-9.com'>iso-9995-9.com</a> (down? dns issue maybe)</span>
</section>
</main>
</body>
</html>

7
html/discord.html
View File

@ -1,15 +1,20 @@
<html>
<head>
<title>Natalie information</title>
<title>Discord</title>
<style>
$[cat style.css]
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<h1>Discord</h1>
As one who is not particularly partial to internet centralization, and seeing as I have had discord accounts get banned for seemingly nothing in the past, I am not particularly fond of using discord.
Unfortunately, humans that I like speaking to use discord in large enough volumes that it is likely to be rather challenging to convince all of the ones I particularly care about to migrate to some other platform.
This is not a very nice state of things.
</section>
<main>
</body>
</html>

2
html/footer.html Normal file
View File

@ -0,0 +1,2 @@
<footer>
</footer>

17
html/header.html
View File

@ -1,8 +1,11 @@
<header class='container'>
<h1>$[(for i in {0..10}; do echo Natalieee.net; done; echo Catalieee.net) | shuf -n1]<h1>
<a href='/'>home</a>
<a href=$PREV_URL$>back</a>
<a href='/html/site-info.html'>site info</a>
<a href='/html/natalie-info.html'>natalie info</a>
<hr>
<header>
<nav>
<ul>
<li><h1>$[(for i in {0..10}; do echo Natalieee.net; done; echo Catalieee.net) | shuf -n1]<h1></li>
<li><a href='/'>home</a></li>
<li><a href=$PREV_URL$>back</a>
<li><a href='/html/site-info.html'>site info</a></li>
<li><a href='/html/natalie-info.html'>natalie info</a></li>
</ul>
</nav>
</header>

75
html/my-laptop.html
View File

@ -1,37 +1,15 @@
<html>
<head>
<title>laptop</title>
<style>
$[cat style.css]
.code-container {
display: flex;
flex-direction: column;
}
.io-container {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-right: 25px;
}
.arrow {
margin: 50px;
align-items: center;
font-size: 50px;
}
pre {
width: 100%;
border: 1px dashed #000;
padding: 10px;
overflow-x: auto;
}
</style>
</head>
<body>
<head>
<title>laptop</title>
<style>
$[cat style.css]
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<div>
<main>
<section>
<h1>DEPRECATED My laptop</h1>
<p>see <a href='/html/blog/posts/new-laptop.html'>blog post</a>
<p>
@ -40,26 +18,28 @@ pre {
I have preordered a Framework 16 because I am the definition of their target audience.
Since W530s and T530s are basically identical baring the mainboard, there is no external difference between my W530 and T530 because I just yoinked all the parts from the W530.<br>
my-laptop.html was last modified on $[stat -c %y ./html/my-laptop.html | head -c 10].<br>
</p><hr>
</p>
</section>
<section>
<image-column-container>
<image-container style='min-width: 33%'>
<flex-column style='max-width: 100%'>
<captioned-image>
<div class=captioned-image>
<img src="/files/laptop-keyboard.png" alt="photograph of my laptops keyboard, which is blank because I sanded it.">
<p>photograph of my laptops keyboard, which is blank because I sanded it.</p>
</captioned-image>
<captioned-image>
</div>
<div class=captioned-image>
<img src="/files/laptop-radio.jpg" alt="The software defined radio that goes in my laptop's disc drive.">
<p>The software defined radio that goes in my laptop's disc drive.</p>
</captioned-image>
<captioned-image>
</div>
<div class=captioned-image>
<img src="/files/keybinds_graph.png" alt="Graph of my keybindings (good luck).">
<p>Graph of my keybinds (good luck).</p>
</captioned-image>
<captioned-image>
</div>
<div class=captioned-image>
<img src="/files/laptop-charger-barrel.jpg" alt="charger bodge.">
<p>charger bodge.</p>
</captioned-image>
</div>
<flex-column>
</image-container>
<text-column>
@ -75,10 +55,10 @@ pre {
</ul>
Additionally, I have written a custom xkb file. Unfortunately the geometry file hasn't been updated since I modded in the new keyboard, but here it is anyways: <br>
</p>
<captioned-image style='max-width: 100%'>
<div class=captioned-image style='max-width: 100%'>
<img src='/files/laptop-xkb-geometry.png'/><br>
<p>my xkb geometry file compiled to a pdf</p>
</captioned-image>
</div>
<p>
Disregard the fucked up escape key, I was messing with it earlier. My keyboard isn't that notable beyond binding control to caps lock and binding the old control key to mode_switch.
Additionally, when mode_switch is pressed while an alphabetic key is pressed, it types a greek letter instead.
@ -108,11 +88,11 @@ a: !Mode
<h3>Output (i3config):</h3>
<pre><code>
mode a {
bindsym b mode b
bindsym b mode b
}
mode b {
bindsym ... ...
bindsym ... ...
}
bindsym a mode a
@ -131,6 +111,7 @@ bindsym a mode a
</p>
</text-column>
</image-column-container>
</div>
</body>
</section>
</main>
</body>
</html>

33
html/natalie-info.html
View File

@ -4,22 +4,30 @@
<style>
$[cat style.css]
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<div>
<main>
<section>
<h1>What is a "natalie?"</h1>
<a href='/html/natalie-sightings.html'>natalie</a> is an entity that has been observed to be called natalie.<br>
it is known to be referred to as a "she" or an "it."<br>
it is frequently told it is "cat brained" by humans it associates with.<br>
natalie-info.html was last modified on $[stat -c %y ./html/natalie-info.html | head -c 10].<hr>
<span><a href='/html/natalie-sightings.html'>natalie</a> is an entity that has been observed to be called natalie.</span>
it is known to be referred to as a "she" or an "it."
it is frequently told it is "cat brained" by humans it associates with.
natalie-info.html was last modified on $[stat -c %y ./html/natalie-info.html | head -c 10].
</section>
<section>
<h2>Timezone (this is currently broken? I don't know why. The correct time is PDT or the other one)</h2>
its really quite odd, the commands run to generate this section are just date "+%Z (UTC%z)" and date +%T. When I run these in an ssh session, they give expected output, but when the server executes them, it thinks its in UTC. baffling.
Timezone I am in: $[date "+%Z (UTC%z)"]<br>
The local time as of this page being requested was: $[date +%T]<hr>
The local time as of this page being requested was: $[date +%T]
</section>
<section>
<h2>Other online presence</h2>
<a href='/html/discord.html'>Discord: _natalieeee_</a><br>
Email: natalie@natalieee.net<hr>
<a href='/html/discord.html'>Discord: _natalieeee_</a>
Email: natalie@natalieee.net
</section>
<section>
<h2>Other things</h2>
I will probably include information about myself that is vaguely identifiable.
This is a bad idea, but I don't think anyone actually cares about messing with me enough to do anything bad with whatever information is available here.
@ -32,13 +40,15 @@
<li>I own twelve lenovo thinkpads manufactured between 2010 and 2014.</li>
<li><del>My laptop which I use as my main computer is a modified lenovo thinkpad T530 <a href=/html/my-laptop.html>which is pretty neat.</a> </del><a href=/html/blog/posts/new-laptop.html>refer to this</a></li>
</ul>
<hr>
</section>
<section>
<h2>Vaguely funny things I have done (Don't read this if you are employed by Portland public schools)</h2>
<ul>
<li>Nearly gotten suspended for allegedly installing (The IT department genuinely said this) """Cuban malware""" on the school network. This was entirely not grounded in reality, IT is just insane. (<a href='/html/I-dont-like-IT.html'>Minor tangent</a>)</li>
<li>Gotten suspended for exactly one day for posting the school district's wifi password on discord (stupid, but I was bored. Also, IT was mean to me, see tangent linked above.)</li>
</ul>
<hr>
</section>
<section>
<h2>Music I listen to (you should too)</h2>
I am going to use this as a means by which I can impose music recommendations upon whoever reads this page.
According to a hacky script I wrote that tracks what songs I listen to with mpd, here are artists I like:<br>
@ -63,6 +73,7 @@
18 60 Seas on the Moon<br>
19 52 girl in red<br>
20 50 Cassyette<br>
</div>
</section>
</main>
</body>
</html>

8
html/natalie-sightings.html
View File

@ -4,12 +4,18 @@
$[cat style.css]
</style>
<title>Natalie sightings</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<h1>Natalie Sightings</h1>
<p>They are reasonably rare. <br>These photographs are uneditted, my various cameras are just fucked up. Ignore the annoying aspect ratio.</p>
<hr>
</section>
<section>
<flex-grid>$[for file in files/natalie-sightings/*; do echo "<flex-grid-item><img src=\"/$file\" width=\"250\"/></flex-grid-item>"; done]</flex-grid>
</section>
</main>
</body>
</html>

37
html/random-thoughts.html
View File

@ -3,42 +3,17 @@
<title>Natalie information</title>
<style>
$[cat style.css]
details {
border: 2px dashed #ccc;
padding: 10px;
width: 90%;
margin-bottom: 10px;
}
summary {
cursor: pointer;
}
summary::-webkit-details-marker {
display: none;
}
div {
position: relative;
padding-top: 30px;
padding-bottom: 50%;
height: fit-content;
}
div iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<h1>arbitrary thoughts generated by natalie</h1>
I am bad at thinking of things to make blog posts for. this webpage might contain things that I would put in a blog post if I was more proficient at writing filler. It might also contain other things.
<hr>
$[stat -c "%W %n" ./html/thoughts/* | sort -n --reverse | cut -d ' ' -f2- | while read -r file; do echo "<details><summary>$(stat -c'%w' $file | cut -d '.' -f1): $(grep '^<!-- TITLE:' $file | sed 's/^<!-- TITLE: //; s/-->$//')</summary><div><iframe src=.$file></iframe></div></details>"; done]
</section>
$[stat -c "%W %n" ./html/thoughts/* | sort -n --reverse | cut -d ' ' -f2- | while read -r file; do echo "<section><details><summary>$(stat -c'%w' $file | cut -d '.' -f1): $(grep '^<!-- TITLE:' $file | sed 's/^<!-- TITLE: //; s/-->$//')</summary><div>$(python -c "import utils; print(utils.parse_file('$file'))")</details></section>"; done]
</main>
</body>
</html>

16
html/server-migration.html
View File

@ -4,19 +4,25 @@
<style>
$[cat style.css]
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<h1>This website runs on a big server now.</h1>
<p>It used to run on a dell optiplex 3040 I had laying around, but I got a server from the school basement (you can just take them, apparently).</p>
<hr>
</section>
<section>
<image-column-container>
<image-container>
<captioned-image>
<flex-column>
<div class=captioned-image>
<img src="/files/natalie-holding-server.png" alt="me holding a server">
<p>The server in question.</p>
</captioned-image>
<image-container>
</div>
</flex-column>
</image-container>
<text-column>
<h2>Why do I have a server from my schools basement?</h2>
<p>
@ -35,5 +41,7 @@
</p>
</text-column>
</image-column-container>
</section>
</main>
</body>
</html>

7
html/stats.html
View File

@ -5,11 +5,16 @@
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\\$PREV_URL\\$/".."/']
<main>
<section>
<h1>Stats! Data! Wow!</h1>
Boring information about me and my computers, delivered right to your web browser (or terminal)!<br>
Why collect information about your users when your users could collect information about you?
<hr>
</section>
<section>
<h2>Currently available information:</h2>
$[for line in $(cat main.py | grep Route -A1 | grep '/stats/' | sed "s/'//g; s/,//g"); do echo "$(make-link $line)<br>"; done]
</section>
</main>
<body>
</html>

273
style.css
View File

@ -8,71 +8,86 @@
src: url('/font/MapleMonoItalic.ttf') format('truetype');
}
@media (max-width: 615px) {
body {
margin: 0;
}
/* @media (max-width: 615px) { */
/* body { */
/* margin: 0; */
/* } */
header {
display: block;
/* header { */
/* display: block; */
/* } */
/* } */
/* @media (max-width: 615px) { */
/* body { */
/* margin: 0; */
/* } */
/* header { */
/* display: none; */
/* } */
/* } */
/* @media (min-width: 730px) and (max-width: 799px) { */
/* body { */
/* margin: 0 0; */
/* min-width: 100% */
/* } */
/* header { */
/* display: flex; */
/* } */
/* } */
/* @media (min-width: 1000px) and (max-width: 1299px) { */
/* body { */
/* margin: 0 10%; */
/* min-width: 80% */
/* } */
/* li > p { */
/* width: 70%; */
/* } */
/* header { */
/* display: flex; */
/* } */
/* } */
/* @media (min-width: 1300px) { */
/* body { */
/* margin: 0 20%; */
/* min-width: 60%; */
/* } */
/* li > p { */
/* width: 60%; */
/* } */
/* header { */
/* display: flex; */
/* } */
/* } */
@media (max-width: 1400px) {
body {
margin: 0%;
width: 100%
}
}
@media (max-width: 615px) {
body {
margin: 0;
}
header {
display: none;
}
}
@media (min-width: 730px) and (max-width: 799px) {
body {
margin: 0 0;
min-width: 100%
}
header {
display: block;
}
}
@media (min-width: 1000px) and (max-width: 1299px) {
body {
margin: 0 10%;
min-width: 80%
}
li > p {
width: 70%;
}
header {
display: block;
}
}
@media (min-width: 1300px) {
@media (min-width: 1400px) {
body {
margin: 0 20%;
min-width: 60%;
}
li > p {
width: 60%;
}
header {
display: block;
}
}
:root {
--bg: #F2F4F8;
--alt-bg: #dde1e6;
--fg: #161616;
--hl: #33b1ff;
--link: #0f62fe;
--visited-link: #673ab7;
--highlight: #0f62fe;
@ -90,10 +105,11 @@
--bg: #161616;
--alt-bg: #262626;
--fg: #f2f4f8;
--hl: #0f62fe;
--link: #33b1ff;
--visited-link: #be95ff;
--highlight: #33b1ff;
--gray: #393939;
--gray: #202020;
}
}
@ -106,26 +122,46 @@ body {
overflow: auto;
word-wrap: break-word;
overflow-wrap: break-word;
padding: 0 10px;
padding-bottom: 10px;
}
main {
display: flex;
flex-direction: column;
}
header {
padding-top: 10px;
position: -webkit-sticky;
position: sticky;
background-color: var(--bg);
top: 0;
transform: translateX(-10px);
display: absolute;
width: calc(100% + 20px);
width: 100%;
z-index: 100000;
display: flex;
align-items: flex-start;
overflow: clip;
h1 {
background: var(--bg);
padding-left: 10px;
display: inline;
font-size: 26px;
> nav {
border-bottom: 1px solid var(--fg);
width: 100%;
> ul {
margin: 0;
padding: 0;
display: flex;
align-items: baseline;
justify-content: flex-start;
list-style-type: none;
> li {
padding: 10px;
> h1 {
display: inline
}
}
}
}
}
@ -135,6 +171,66 @@ header {
text-wrap: wrap;
}
form {
background: var(--alt-bg);
display: flex;
flex-direction: column;
width: clamp(300px, 500px, 50%);
padding: 20px;
margin: 15px 0;
box-shadow: 10px 10px var(--gray);
> button {
margin: 10px;
padding: 10px;
border: none;
color: var(--fg);
background: var(--bg);
}
> button:hover {
background: var(--hl);
}
> input {
color: var(--fg);
margin: 10px;
border: none;
background: var(--bg)
}
> input:focus {
outline: none;
}
}
section {
display: flex;
flex-direction: column;
justify-content: center;
background: var(--alt-bg);
box-shadow: 10px 10px var(--gray);
margin: 15px 30px;
padding: 20px;
/* border-bottom: 1px solid var(--fg); */
> p {
margin: 5px 0;
}
> h1, h2, h3 {
margin: 10px 0;
}
}
.ignore-section {
background: var(--bg);
box-shadow: none;
margin: none;
padding: 5px 10px;
}
table {
width: auto;
border-collapse: collapse;
@ -187,6 +283,19 @@ img {
height: auto;
}
summary {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.post {
background: var(--alt-bg);
box-shadow: 10px 10px var(--gray);
margin: 30px;
padding: 20px;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
@ -197,7 +306,14 @@ img {
}
code, pre {
background: var(--alt-bg)
background: var(--bg);
margin: 10px;
padding: 5px;
overflow: clip;
}
xmp {
margin: 20px;
}
a {
@ -212,28 +328,27 @@ a:visited {
background: var(--highlight)
}
captioned-image {
max-width: 33%;
.captioned-image {
display: flex;
flex-direction: column;
justify-content: flex-start;
max-width: 100%;
background: var(--bg);
margin-bottom: 15px;
margin-right: 10px;
> img {
height: auto;
}
> * {
width: 100%;
border: 5px solid var(--alt-bg);
background: var(--alt-bg);
padding: 10px;
}
> p {
display: flex;
justify-content: center;
text-align: center;
position: relative;
top: -20px;
padding: 5px;
margin: 0;
}
margin-right: 15px;
}
image-column-container {
@ -251,6 +366,7 @@ image-container {
}
flex-column {
width: 100%;
display: flex;
flex-direction: column;
@ -264,6 +380,10 @@ image-column img {
height: auto;
}
text-column {
max-width: 66%
}
flex-grid {
display: flex;
flex-wrap: wrap;
@ -284,7 +404,8 @@ flex-grid-item > img {
@media (max-width: 700px) {
image-container {display: inline-block; min-width: 100% !important}
captioned-image {min-width: 100%; margin-right: 0;}
text-column {display: inline-block}
div.captioned-image {min-width: 100%; margin-right: 0;}
text-column {display: inline-block; max-width: 100%;}
image-column-container {flex-direction: column;}
header > nav > ul > li > h1 { display: none};
}