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 log
graph* graph*
__pycache__/ __pycache__/
/files/stats/song files/stats/song
/files/home_visit_counter 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-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: rewrite css because winter told me to. Now has dark mode based on a media query.
2024-07-25: add subdomain proxying with nginx. 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='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: 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. 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> <html>
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"> <!-- lol --> <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> <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"> <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> <style>
@ -10,6 +11,8 @@
</head> </head>
<body> <body>
$[python3 -u -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/'] $[python3 -u -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<h1>Index of {path}</h1> <h1>Index of {path}</h1>
<table> <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> <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> <tr><th colspan="4"><hr></th></tr>
</tbody> </tbody>
</table> </table>
</section>
</main>
</body> </body>
</html> </html>

43
home.html
View File

@ -3,6 +3,7 @@ $[echo visit >> files/home_visit_counter]
<html lang="en"> <html lang="en">
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> <style>
$[cat style.css] $[cat style.css]
/* appended to maintain html spec compliance while maintaining the consequences of albert's hack */ /* 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> </head>
<body> <body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/'] $[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<p> <p>
I'm Natalie[ee].<br> I'm Natalie[ee].<br>
$[find files/homepage-statements/* | shuf -n1 | xargs -I % cat %]<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> 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] Website homepage visit counter: $[cat files/home_visit_counter | wc -l]
</p> </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"> <img alt="W3C HTML5" src="/files/html5.png" width="88" height="31">
</a> </a>
<hr> </section>
<section>
<h2>Particularly noteable pages</h2> <h2>Particularly noteable pages</h2>
<a href='/html/site-info.html'>Information about this website</a><br> <a href='/html/site-info.html'>Information about this website</a>
<a href='/html/natalie-info.html'>Information about me</a><br> <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><br> <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> <a href='/html/random-thoughts.html'>There are also random natalie thoughts. sometimes they might be interesting</a>
<hr> </section>
<section>
<h2>Directories</h2> <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] <span>$[find -maxdepth 1 -type d | sed 1d | xargs -I% echo '<a href=%>%</a>' | sed 's/\.\///g' | grep -v pycache | grep -v .git]</span>
<hr> </section>
<section>
<h2>Changelog</h2> <h2>Changelog</h2>
<pre>$[cat changelog]</pre> <pre>$[cat changelog]</pre>
<hr> </section>
<section>
<h2>Site file tree</h2> <h2>Site file tree</h2>
<details> <details>
<summary>File tree hidden for brevity</summary> <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>'] $[tree . | sed 's/^\./site/; s/─/-/g; s/├/|/g; s/└/\\/g; s/│/|/g' | sed '1i\<pre>' | sed '$a\</pre>']
</details> </details>
<hr> </section>
<section>
<h2>Autistic collection of 88x31s</h2> <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] <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>
<hr> </section>
<section>
<h2>Post arbitrary data to my website to be displayed here</h2> <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. 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"> <form action="#" method="post">
<label for="postText">post text: </label> <label for="postText">post text: </label>
<input type="text" id="postText" name="text" required> <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> <input type="text" id="postName" name="name" required>
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </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> </body>
</html> </html>

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

@ -4,13 +4,17 @@
<style> <style>
$[cat style.css] $[cat style.css]
</style> </style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<div>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/'] $[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> <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> 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> 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> <h2>"""Cuban malware""" incident</h2>
<p> <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. 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> 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. I really wish I had a recording of the IT security lady saying the cuban malware line. alas.
</p> </p>
<hr> </section>
<section>
<h2>Leaking the wifi creds</h2> <h2>Leaking the wifi creds</h2>
<p> <p>
To be fair, this one is my fault. To be fair, this one is my fault.
@ -100,12 +105,14 @@
</ul> </ul>
Ridiculous email, 10/10, made me laugh.<br><br> Ridiculous email, 10/10, made me laugh.<br><br>
</p> </p>
<hr> </section>
<section>
<h2>Misc</h2> <h2>Misc</h2>
<ul> <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. <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> I will leave guessing whether or not they fixed the issue I exploited as an exercise for the reader.</li>
</ul> </ul>
</div> </section>
</main>
</body> </body>
</html> </html>

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

@ -1,16 +1,19 @@
<html> <html>
<head> <head>
<title>Not a fan of IT</title> <title>Albert</title>
<style> <style>
$[cat style.css] $[cat style.css]
</style> </style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/'] $[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> <h1>Friend hacked my website lol</h1>
<p>But how?</p> <p>But how?</p>
<hr> </section>
<section>
<p> <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}. 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>). 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. 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. This ended with around 15 messages on discord telling me my site had been hacked, only around two of which were from albert.
</p> </p>
</div> </section>
</main>
</body> </body>
</html> </html>

7
html/blog/index.html
View File

@ -4,9 +4,12 @@
</style> </style>
<body> <body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/'] $[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<h1>Blog? Thing</h1> <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> <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> <h2>Posts</h2>
<table> <table>
<tbody><tr><th><p>Title</p></th><th><p>Editted</p></th><th><p>Posted</p></th><th><p>Size</p></th></tr> <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> <tr><th colspan="4"><hr></th></tr>
</tbody> </tbody>
</table> </table>
</section>
<main>
</body> </body>
</html> </html>

16
html/cool-sites.html
View File

@ -4,12 +4,13 @@
$[cat style.css] $[cat style.css]
</style> </style>
<title>Neat/odd/cool/relatively unknown/other adjective websites</title> <title>Neat/odd/cool/relatively unknown/other adjective websites</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/'] $[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> <h1>Websites that I think are interesting or just odd, with varying obscurity and in no particular order</h1>
<hr>
<div>
<ul> <ul>
<li><a href='https://eightyeightthirty.one/'>eightyeightthirty.one</a> A graph of website badges.</li> <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> <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://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> <li><a href='https://www.yourworldoftext.com/apionet'>https://www.yourworldoftext.com/apionet</a> buzzzzzzzzzzzzzzzzzzz</li>
</ul> </ul>
</div>
This web page compelled me to put it somewhere: 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> <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> <h1>entities I sometimes interact with physically</h1>
winter: <a href='https://bunbun.dev'>bunbun.dev</a><br> <span>winter: <a href='https://bunbun.dev'>bunbun.dev</a></span>
odette: <a href='https://puppygirl.systems'>puppygirl.systems</a> (nothing is there yet)<br> <span>odette: <a href='https://puppygirl.systems'>puppygirl.systems</a> (nothing is there yet)</span>
albert: <a href='https://iso-9995-9.com'>iso-9995-9.com</a> (down? dns issue maybe)<br <span>albert: <a href='https://iso-9995-9.com'>iso-9995-9.com</a> (down? dns issue maybe)</span>
</section>
</main>
</body> </body>
</html> </html>

7
html/discord.html
View File

@ -1,15 +1,20 @@
<html> <html>
<head> <head>
<title>Natalie information</title> <title>Discord</title>
<style> <style>
$[cat style.css] $[cat style.css]
</style> </style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/'] $[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<h1>Discord</h1> <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. 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. 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. This is not a very nice state of things.
</section>
<main>
</body> </body>
</html> </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'> <header>
<h1>$[(for i in {0..10}; do echo Natalieee.net; done; echo Catalieee.net) | shuf -n1]<h1> <nav>
<a href='/'>home</a> <ul>
<a href=$PREV_URL$>back</a> <li><h1>$[(for i in {0..10}; do echo Natalieee.net; done; echo Catalieee.net) | shuf -n1]<h1></li>
<a href='/html/site-info.html'>site info</a> <li><a href='/'>home</a></li>
<a href='/html/natalie-info.html'>natalie info</a> <li><a href=$PREV_URL$>back</a>
<hr> <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> </header>

55
html/my-laptop.html
View File

@ -3,35 +3,13 @@
<title>laptop</title> <title>laptop</title>
<style> <style>
$[cat style.css] $[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> </style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/'] $[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<div> <main>
<section>
<h1>DEPRECATED My laptop</h1> <h1>DEPRECATED My laptop</h1>
<p>see <a href='/html/blog/posts/new-laptop.html'>blog post</a> <p>see <a href='/html/blog/posts/new-laptop.html'>blog post</a>
<p> <p>
@ -40,26 +18,28 @@ pre {
I have preordered a Framework 16 because I am the definition of their target audience. 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> 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> 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-column-container>
<image-container style='min-width: 33%'> <image-container style='min-width: 33%'>
<flex-column style='max-width: 100%'> <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."> <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> <p>photograph of my laptops keyboard, which is blank because I sanded it.</p>
</captioned-image> </div>
<captioned-image> <div class=captioned-image>
<img src="/files/laptop-radio.jpg" alt="The software defined radio that goes in my laptop's disc drive."> <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> <p>The software defined radio that goes in my laptop's disc drive.</p>
</captioned-image> </div>
<captioned-image> <div class=captioned-image>
<img src="/files/keybinds_graph.png" alt="Graph of my keybindings (good luck)."> <img src="/files/keybinds_graph.png" alt="Graph of my keybindings (good luck).">
<p>Graph of my keybinds (good luck).</p> <p>Graph of my keybinds (good luck).</p>
</captioned-image> </div>
<captioned-image> <div class=captioned-image>
<img src="/files/laptop-charger-barrel.jpg" alt="charger bodge."> <img src="/files/laptop-charger-barrel.jpg" alt="charger bodge.">
<p>charger bodge.</p> <p>charger bodge.</p>
</captioned-image> </div>
<flex-column> <flex-column>
</image-container> </image-container>
<text-column> <text-column>
@ -75,10 +55,10 @@ pre {
</ul> </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> 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> </p>
<captioned-image style='max-width: 100%'> <div class=captioned-image style='max-width: 100%'>
<img src='/files/laptop-xkb-geometry.png'/><br> <img src='/files/laptop-xkb-geometry.png'/><br>
<p>my xkb geometry file compiled to a pdf</p> <p>my xkb geometry file compiled to a pdf</p>
</captioned-image> </div>
<p> <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. 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. Additionally, when mode_switch is pressed while an alphabetic key is pressed, it types a greek letter instead.
@ -131,6 +111,7 @@ bindsym a mode a
</p> </p>
</text-column> </text-column>
</image-column-container> </image-column-container>
</div> </section>
</main>
</body> </body>
</html> </html>

33
html/natalie-info.html
View File

@ -4,22 +4,30 @@
<style> <style>
$[cat style.css] $[cat style.css]
</style> </style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/'] $[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> <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> <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."<br> 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.<br> 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].<hr> 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> <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. 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> 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> <h2>Other online presence</h2>
<a href='/html/discord.html'>Discord: _natalieeee_</a><br> <a href='/html/discord.html'>Discord: _natalieeee_</a>
Email: natalie@natalieee.net<hr> Email: natalie@natalieee.net
</section>
<section>
<h2>Other things</h2> <h2>Other things</h2>
I will probably include information about myself that is vaguely identifiable. 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. 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>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> <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> </ul>
<hr> </section>
<section>
<h2>Vaguely funny things I have done (Don't read this if you are employed by Portland public schools)</h2> <h2>Vaguely funny things I have done (Don't read this if you are employed by Portland public schools)</h2>
<ul> <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>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> <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> </ul>
<hr> </section>
<section>
<h2>Music I listen to (you should too)</h2> <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. 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> 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> 18 60 Seas on the Moon<br>
19 52 girl in red<br> 19 52 girl in red<br>
20 50 Cassyette<br> 20 50 Cassyette<br>
</div> </section>
</main>
</body> </body>
</html> </html>

8
html/natalie-sightings.html
View File

@ -4,12 +4,18 @@
$[cat style.css] $[cat style.css]
</style> </style>
<title>Natalie sightings</title> <title>Natalie sightings</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/'] $[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<h1>Natalie Sightings</h1> <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> <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> <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> </body>
</html> </html>

37
html/random-thoughts.html
View File

@ -3,42 +3,17 @@
<title>Natalie information</title> <title>Natalie information</title>
<style> <style>
$[cat style.css] $[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> </style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/'] $[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> <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. 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> </section>
$[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] $[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> </body>
</html> </html>

16
html/server-migration.html
View File

@ -4,19 +4,25 @@
<style> <style>
$[cat style.css] $[cat style.css]
</style> </style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/'] $[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> <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> <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-column-container>
<image-container> <image-container>
<captioned-image> <flex-column>
<div class=captioned-image>
<img src="/files/natalie-holding-server.png" alt="me holding a server"> <img src="/files/natalie-holding-server.png" alt="me holding a server">
<p>The server in question.</p> <p>The server in question.</p>
</captioned-image> </div>
<image-container> </flex-column>
</image-container>
<text-column> <text-column>
<h2>Why do I have a server from my schools basement?</h2> <h2>Why do I have a server from my schools basement?</h2>
<p> <p>
@ -35,5 +41,7 @@
</p> </p>
</text-column> </text-column>
</image-column-container> </image-column-container>
</section>
</main>
</body> </body>
</html> </html>

7
html/stats.html
View File

@ -5,11 +5,16 @@
</head> </head>
<body> <body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\\$PREV_URL\\$/".."/'] $[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\\$PREV_URL\\$/".."/']
<main>
<section>
<h1>Stats! Data! Wow!</h1> <h1>Stats! Data! Wow!</h1>
Boring information about me and my computers, delivered right to your web browser (or terminal)!<br> 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? Why collect information about your users when your users could collect information about you?
<hr> </section>
<section>
<h2>Currently available information:</h2> <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] $[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> <body>
</html> </html>

273
style.css
View File

@ -8,71 +8,86 @@
src: url('/font/MapleMonoItalic.ttf') format('truetype'); src: url('/font/MapleMonoItalic.ttf') format('truetype');
} }
@media (max-width: 615px) { /* @media (max-width: 615px) { */
/* body { */
/* margin: 0; */
/* } */
/* 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 { body {
margin: 0; margin: 0%;
} width: 100%
header {
display: block;
} }
} }
@media (max-width: 615px) { @media (min-width: 1400px) {
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) {
body { body {
margin: 0 20%; margin: 0 20%;
min-width: 60%;
}
li > p {
width: 60%; width: 60%;
} }
header {
display: block;
}
} }
:root { :root {
--bg: #F2F4F8; --bg: #F2F4F8;
--alt-bg: #dde1e6; --alt-bg: #dde1e6;
--fg: #161616; --fg: #161616;
--hl: #33b1ff;
--link: #0f62fe; --link: #0f62fe;
--visited-link: #673ab7; --visited-link: #673ab7;
--highlight: #0f62fe; --highlight: #0f62fe;
@ -90,10 +105,11 @@
--bg: #161616; --bg: #161616;
--alt-bg: #262626; --alt-bg: #262626;
--fg: #f2f4f8; --fg: #f2f4f8;
--hl: #0f62fe;
--link: #33b1ff; --link: #33b1ff;
--visited-link: #be95ff; --visited-link: #be95ff;
--highlight: #33b1ff; --highlight: #33b1ff;
--gray: #393939; --gray: #202020;
} }
} }
@ -106,26 +122,46 @@ body {
overflow: auto; overflow: auto;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
padding: 0 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
main {
display: flex;
flex-direction: column;
}
header { header {
padding-top: 10px; padding-top: 10px;
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
background-color: var(--bg); background-color: var(--bg);
top: 0; top: 0;
transform: translateX(-10px); width: 100%;
display: absolute;
width: calc(100% + 20px);
z-index: 100000; z-index: 100000;
display: flex;
align-items: flex-start;
overflow: clip;
h1 { > nav {
background: var(--bg); border-bottom: 1px solid var(--fg);
padding-left: 10px; width: 100%;
display: inline;
font-size: 26px; > 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; 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 { table {
width: auto; width: auto;
border-collapse: collapse; border-collapse: collapse;
@ -187,6 +283,19 @@ img {
height: auto; 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 { ::-webkit-scrollbar {
width: 0px; width: 0px;
height: 0px; height: 0px;
@ -197,7 +306,14 @@ img {
} }
code, pre { code, pre {
background: var(--alt-bg) background: var(--bg);
margin: 10px;
padding: 5px;
overflow: clip;
}
xmp {
margin: 20px;
} }
a { a {
@ -212,28 +328,27 @@ a:visited {
background: var(--highlight) background: var(--highlight)
} }
captioned-image { .captioned-image {
max-width: 33%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start;
max-width: 100%;
background: var(--bg);
margin-bottom: 15px;
margin-right: 10px;
> img { > img {
height: auto; height: auto;
} padding: 10px;
> * {
width: 100%;
border: 5px solid var(--alt-bg);
background: var(--alt-bg);
} }
> p { > p {
display: flex;
justify-content: center;
text-align: center; text-align: center;
position: relative; padding: 5px;
top: -20px; margin: 0;
} }
margin-right: 15px;
} }
image-column-container { image-column-container {
@ -251,6 +366,7 @@ image-container {
} }
flex-column { flex-column {
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -264,6 +380,10 @@ image-column img {
height: auto; height: auto;
} }
text-column {
max-width: 66%
}
flex-grid { flex-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -284,7 +404,8 @@ flex-grid-item > img {
@media (max-width: 700px) { @media (max-width: 700px) {
image-container {display: inline-block; min-width: 100% !important} image-container {display: inline-block; min-width: 100% !important}
captioned-image {min-width: 100%; margin-right: 0;} div.captioned-image {min-width: 100%; margin-right: 0;}
text-column {display: inline-block} text-column {display: inline-block; max-width: 100%;}
image-column-container {flex-direction: column;} image-column-container {flex-direction: column;}
header > nav > ul > li > h1 { display: none};
} }