Cutieguwu/cutieguwu-site
1
0
Fork 0
Code Issues 10 Pull Requests Projects 1 Releases Activity

Complete #52, Optimize CSS, Reduce code duplication, Scrap templates; Massive refactor.

Browse Source
This commit is contained in:
Cutieguwu
2025-08-20 16:08:41 -04:00
parent 04a4adb4d4
commit d1e06b432d
55 changed files with 1533 additions and 1896 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/about.html
View File

@@ -6,24 +6,22 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">About</h5>
<h5 class="page">About</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
<include src="includes/tailer.html" />
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<main class="pane">
<div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

44
src/acknowledgements.html
View File

@@ -6,31 +6,29 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">Acknowledgements</h5>
<h5 class="page">Acknowledgements</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<div class="body">
<p>There are currently no acknowledgements</p>
<p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
<p>
I will get my thanks to various open projects in here in time, but I'm still
busy getting the basics handled.
</p>
</div>
<include src="includes/tailer.html" />
</div> </div>
<div class="pane_spacer"> <include src="includes/nav_quick_links.html" />
<div class="spacer_container"><p>#AD</p></div> </nav>
<div class="spacer_container"><p>#AD</p></div> <main class="pane">
<div class="body">
<p>There are currently no acknowledgements</p>
<p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
<p>
I will get my thanks to various open projects in here in time, but I'm still
busy getting the basics handled.
</p>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

46
src/blog/index.html
View File

@@ -6,33 +6,31 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">Blog</h5>
<h5 class="page">Blog</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane">
<div class="pane_main"> <div class="body">
<header>
<h1 class="title">Blog</h1>
<p class="date">Last Edited: 03 August, 2025</p>
</header>
<div class="body"> <div class="body">
<div class="header"> <h2>I have an RSS feed!</h2>
<h1 class="title">Blog</h1> <p>Just look for the RSS Quick Link in the Navigation pane.</p>
<p class="date">Last Edited: 03 August, 2025</p>
</div>
<div class="body">
<h2>I have an RSS feed!</h2>
<p>Just look for the RSS Quick Link in the Navigation pane.</p>
</div>
</div> </div>
<include src="includes/tailer.html" />
</div>
<div class="pane_spacer">
<include src="./includes/blog_recent_posts.html" />
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<include src="./includes/blog_recent_posts.html" />
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

217
src/blog/posts/0_divergent_pathways.html
View File

@@ -6,119 +6,116 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">Blog - Divergent Pathways</h5>
<h5 class="page">Blog - Divergent Pathways</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane blog">
<div class="pane_blog"> <div class="body">
<header>
<h1 class="title">Divergent Pathways</h1>
<p class="date">Posted: 29 July, 2025</p>
<p class="date">Last Edited: 29 July, 2025</p>
</header>
<div class="body"> <div class="body">
<div class="header"> <p>I can't say that this is how I wanted to start my blog.</p>
<h1 class="title">Divergent Pathways</h1> <p>
<p class="date">Posted: 29 July, 2025</p> Although, in all honesty, I didn't really have an idea for how I wanted it
<p class="date">Last Edited: 29 July, 2025</p> to start. That's not to say I didn't know what I *didn't* want. A
</div> meaningless 'Welcome to my Blog' filled with my hopes and aspirations that
<div class="body"> inevitably would never come to light was something I knew I didn't want. I
<p>I can't say that this is how I wanted to start my blog.</p> figured it more likely for me to have a semi-respectful rant about
<p> whatever's causing me to 'crash out' on that particular day. That would
Although, in all honesty, I didn't really have an idea for how I wanted certainly be in character for me.
it to start. That's not to say I didn't know what I *didn't* want. A </p>
meaningless 'Welcome to my Blog' filled with my hopes and aspirations <p>
that inevitably would never come to light was something I knew I didn't But no. Instead, I'm starting my blog on one of the last things I ever
want. I figured it more likely for me to have a semi-respectful rant expected to write about.
about whatever's causing me to 'crash out' on that particular day. That </p>
would certainly be in character for me. <p>Love.</p>
</p> <p>Or rather, the passing of it due to life.</p>
<p> <p>
But no. Instead, I'm starting my blog on one of the last things I ever I've been in two relationships now. Both ended mutually, although what I
expected to write about. consider mutual may not be everyone else's. We came to see the same side of
</p> things, and we understood that we couldn't sustain our lives together. We're
<p>Love.</p> all still friends at the end.
<p>Or rather, the passing of it due to life.</p> </p>
<p> <p>
I've been in two relationships now. Both ended mutually, although what I Me and my ex-boyfriend were struggling a lot with being able to see each
consider mutual may not be everyone else's. We came to see the same side other. It's not like this relationship was geographically long distance; we
of things, and we understood that we couldn't sustain our lives went to the same school. The distance came more from our schedules and
together. We're all still friends at the end. pathways. I have always been a relatively heavy academic. My parents and
</p> teachers certainly made sure of that, and ultimately helped lead me down a
<p> path of being the teacher's pet. Maybe I'll talk about my experiences and
Me and my ex-boyfriend were struggling a lot with being able to see each struggles related to that another time, but the short of it is that I am a
other. It's not like this relationship was geographically long distance; high-acheiving workaholic as a result. My ex-boyfriend on the other hand,
we went to the same school. The distance came more from our schedules didn't have that kind of an experience, and ultimately was led down the
and pathways. I have always been a relatively heavy academic. My parents college-level course stream in high school.
and teachers certainly made sure of that, and ultimately helped lead me </p>
down a path of being the teacher's pet. Maybe I'll talk about my <p>
experiences and struggles related to that another time, but the short of Now, as I began to struggle in my fourth year, particularly with my
it is that I am a high-acheiving workaholic as a result. My ex-boyfriend mathematics continuing their downwards trend, I decided that the life of a
on the other hand, didn't have that kind of an experience, and software engineer wasn't for me. I turned around, almost on a dime, and set
ultimately was led down the college-level course stream in high school. myself towards a career in Psychology. Now, on the surface, this may look
</p> like it would help with our scheduling issues, but no. While I was studying
<p> at school, and desperately trying to keep up my grades, my boyfriend would
Now, as I began to struggle in my fourth year, particularly with my be doing a co-op elsewhere. Even when that ended at the end of the term, the
mathematics continuing their downwards trend, I decided that the life of problem remained. I was too much of a workaholic.
a software engineer wasn't for me. I turned around, almost on a dime, </p>
and set myself towards a career in Psychology. Now, on the surface, this <p>
may look like it would help with our scheduling issues, but no. While I Ultimately, the break-up that I've just had has left me intent on not
was studying at school, and desperately trying to keep up my grades, my spiralling downward. My first was rough on me, and I was not in a good place
boyfriend would be doing a co-op elsewhere. Even when that ended at the for about a week. This time, we both kind of saw this coming. Perhaps that
end of the term, the problem remained. I was too much of a workaholic. makes it easier, but it still sucks for both of us. And, why squander the
</p> motivation I have to better my self care, my habits, and thus myself? I'm
<p> about to go into my first year of university. Normally, I'm either scared of
Ultimately, the break-up that I've just had has left me intent on not my inevitable death, or some past regret of my life that chooses to grip me.
spiralling downward. My first was rough on me, and I was not in a good But now, I'm also anxious for the life ahead.
place for about a week. This time, we both kind of saw this coming. </p>
Perhaps that makes it easier, but it still sucks for both of us. And, <p>
why squander the motivation I have to better my self care, my habits, So what does this all mean in terms of dating for me? Well, it leaves me
and thus myself? I'm about to go into my first year of university. considering the idea that some people are meant to walk through life alone.
Normally, I'm either scared of my inevitable death, or some past regret I'm at a point in my life where dating is probably not a great idea for me.
of my life that chooses to grip me. But now, I'm also anxious for the I struggle enough with burnout spells that adding heartbreak on top would
life ahead. likely kill my education.
</p> </p>
<p> <p>
So what does this all mean in terms of dating for me? Well, it leaves me On top of that are my concerns with online dating. Aside from data privacy,
considering the idea that some people are meant to walk through life breaches, and otherwise disgusting people who can't leave these projects to
alone. I'm at a point in my life where dating is probably not a great be a good part of the internet, are the risks with being trans. There are
idea for me. I struggle enough with burnout spells that adding far too many stories, even if most of them are probably from the US, of
heartbreak on top would likely kill my education. people 'trying it out' with a trans person. Ignoring how slimy and
</p> disgusting you have to be to even do that without considering the effects of
<p> those actions, the point of dating is for love (and to meet societal
On top of that are my concerns with online dating. Aside from data expectations while seeking a dual income for the household, among other
privacy, breaches, and otherwise disgusting people who can't leave these things).
projects to be a good part of the internet, are the risks with being </p>
trans. There are far too many stories, even if most of them are probably <p>
from the US, of people 'trying it out' with a trans person. Ignoring how To make it extra clear, love != sex. The point at the end of it isn't so you
slimy and disgusting you have to be to even do that without considering can run home and shag every night--this isn't some 1960s Bond film.
the effects of those actions, the point of dating is for love (and to </p>
meet societal expectations while seeking a dual income for the <p>
household, among other things). If you want to have kids, some trans people who are on HRT, may still be
</p> able to if they've gone to the really awkward and expensive effort of
<p> cryopreservation.
To make it extra clear, love != sex. The point at the end of it isn't so </p>
you can run home and shag every night--this isn't some 1960s Bond film. <p>
</p> Anyway, being someone who was a 'test run' is crushing. I certainly don't
<p> want to run that risk, and other people are in the same boat.
If you want to have kids, some trans people who are on HRT, may still be </p>
able to if they've gone to the really awkward and expensive effort of <p>Given all this, I'll probably tough it out on my own for a while.</p>
cryopreservation.
</p>
<p>
Anyway, being someone who was a 'test run' is crushing. I certainly
don't want to run that risk, and other people are in the same boat.
</p>
<p>Given all this, I'll probably tough it out on my own for a while.</p>
</div>
</div> </div>
<include src="includes/tailer.html" />
</div>
<div class="pane_spacer">
<include src="./includes/blog_recent_posts.html" />
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<include src="./includes/blog_recent_posts.html" />
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

214
src/blog/posts/1_unsure_u.html
View File

@@ -6,118 +6,114 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">Blog - Unsure U.</h5>
<h5 class="page">Blog - Unsure U.</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane blog">
<div class="pane_blog"> <div class="body">
<header>
<h1 class="title">Unsure U.</h1>
<p class="date">Posted: 09 August, 2025</p>
<p class="date">Last Edited: 09 August, 2025</p>
</header>
<div class="body"> <div class="body">
<div class="header"> <img
<h1 class="title">Unsure U.</h1> alt="A Coaster which reads 'focus on the good,' placed in front of a window."
<p class="date">Posted: 09 August, 2025</p> src="/img/blog/posts/1_unsure_u.webp"
<p class="date">Last Edited: 09 August, 2025</p> />
</div> <p>The little things, it's the little things that count.</p>
<div class="body"> <p>Or so I'm told.</p>
<img <p>
alt="A Coaster which reads 'focus on the good,' placed in front of a window." All around me, all my friends are super excited for university, or college,
src="/img/blog/posts/1_unsure_u.webp" or appreticeship, or--post-secondary in general. They're excited about
/> meeting new [like-minded] people, clubs, increased autonomy, the future
<p>The little things, it's the little things that count.</p> promises of post-secondary education, and of course, parties (within
<p>Or so I'm told.</p> reason). They look to the hopeful side of things.
<p> </p>
All around me, all my friends are super excited for university, or <p>
college, or appreticeship, or--post-secondary in general. They're Now, I have this set of coasters which I got a year or so ago at a local
excited about meeting new [like-minded] people, clubs, increased market. They're meant to keep me in a more positive headspace, but half the
autonomy, the future promises of post-secondary education, and of time they're covered up by drinks... Anyway, one of them advises me to
course, parties (within reason). They look to the hopeful side of "focus on the good".
things. </p>
</p> <p>
<p> And boy, do I try hard to do that. But without a job, I'm left to my
Now, I have this set of coasters which I got a year or so ago at a local hyperfixation and burnout routine. If I'm lucky, I just start going a bit
market. They're meant to keep me in a more positive headspace, but half stir-crazy from sitting in my room, doing things that I consider productive,
the time they're covered up by drinks... Anyway, one of them advises me with only the occasional break for the loo and another cup of bean juice.
to "focus on the good". Then, it's back to work, dawn until dinner, then maybe I'll play a game
</p> briefly, but not until working some more.
<p> </p>
And boy, do I try hard to do that. But without a job, I'm left to my <p>
hyperfixation and burnout routine. If I'm lucky, I just start going a There are of course plenty of things that I'd like to blame for why I'm like
bit stir-crazy from sitting in my room, doing things that I consider this, but that's not the purpose of this post, nor more than speculation.
productive, with only the occasional break for the loo and another cup </p>
of bean juice. Then, it's back to work, dawn until dinner, then maybe <p>
I'll play a game briefly, but not until working some more. Anyway, I'm currently writing this in a cheerful little café after an
</p> appointment so that I take a break to process, and perhaps understand, some
<p> emotions, while taking in this little thing. So, back to university, since
There are of course plenty of things that I'd like to blame for why I'm that's my academic trajectory.
like this, but that's not the purpose of this post, nor more than </p>
speculation. <p>I'm terrified.</p>
</p> <p>
<p> I've struggled a lot to plan and get course selections which will allow me
Anyway, I'm currently writing this in a cheerful little café after an to fulfill my degree, only to fail rather badly. Seriously, I will probably
appointment so that I take a break to process, and perhaps understand, do poorly in philosophy, and it doesn't help me with just about any of my
some emotions, while taking in this little thing. So, back to requirements. On top of that, I'm worried about the teachers that I'll get.
university, since that's my academic trajectory. It was bad enough in grade 5, and I'd had a few years to anticipate that
</p> teacher. In university, I have no knowledge going into first year. The best
<p>I'm terrified.</p> resource I have is something like RateMyProf which honestly kinda sucks and
<p> probably makes things worse unless there's a resoundingly poor overall
I've struggled a lot to plan and get course selections which will allow rating.
me to fulfill my degree, only to fail rather badly. Seriously, I will </p>
probably do poorly in philosophy, and it doesn't help me with just about <p>
any of my requirements. On top of that, I'm worried about the teachers That's not to say that all of my course selections are bad; I still have the
that I'll get. It was bad enough in grade 5, and I'd had a few years to ones within the interest of my degree and some in my hobbies, that also
anticipate that teacher. In university, I have no knowledge going into contribute directly to the degree. One friend and I were also able to get
first year. The best resource I have is something like RateMyProf which some courses together since I had to take them, and they wanted to. This may
honestly kinda sucks and probably makes things worse unless there's a sound silly given the struggles with course availabilities, but I promise
resoundingly poor overall rating. these decisions were made following a lot of logical consideration of both
</p> of our degrees' completion.
<p> </p>
That's not to say that all of my course selections are bad; I still have <p>
the ones within the interest of my degree and some in my hobbies, that Another concern is the fact that I know so little, and I get my orientation
also contribute directly to the degree. One friend and I were also able the day before I need to use it... that's not a lot of time to figure out if
to get some courses together since I had to take them, and they wanted you're missing something. That then contributes to my concerns about being
to. This may sound silly given the struggles with course availabilities, able to move around campus fast enough to not miss classes, on top of the
but I promise these decisions were made following a lot of logical fatigue that I'll have from waking up at 5h30.
consideration of both of our degrees' completion. </p>
</p> <p>
<p> Finally, because otherwise I could keep going on, are my concerns regarding
Another concern is the fact that I know so little, and I get my the ever-shoved-down-our-gullets AIs. I write oddly. This blog, my poetry,
orientation the day before I need to use it... that's not a lot of time and all of my past essays and analyses. My teachers can attest, especially
to figure out if you're missing something. That then contributes to my my grade 9 & 12 English teacher who had to consult two other teachers and
concerns about being able to move around campus fast enough to not miss myself to fully understand
classes, on top of the fatigue that I'll have from waking up at 5h30. <a href="https://gitea.cutieguwu.ca/cutieguwu/falling_down_building_up"
</p> >Building Up</a
<p> >, a poem I wrote with the rust programming language for symbology.
Finally, because otherwise I could keep going on, are my concerns </p>
regarding the ever-shoved-down-our-gullets AIs. I write oddly. This <p>
blog, my poetry, and all of my past essays and analyses. My teachers can The concerns about having to prove that I don't use AI were bad enough in
attest, especially my grade 9 & 12 English teacher who had to consult High School. Universities have far more strict policies, which likely
two other teachers and myself to fully understand utilize a guilty until proven innocent model.
<a href="https://gitea.cutieguwu.ca/cutieguwu/falling_down_building_up" </p>
>Building Up</a <p>
>, a poem I wrote with the rust programming language for symbology. At the end of the day, I'm trying to take in the little things and not worry
</p> too much.
<p> </p>
The concerns about having to prove that I don't use AI were bad enough
in High School. Universities have far more strict policies, which likely
utilize a guilty until proven innocent model.
</p>
<p>
At the end of the day, I'm trying to take in the little things and not
worry too much.
</p>
</div>
</div> </div>
<include src="includes/tailer.html" />
</div>
<div class="pane_spacer">
<include src="./includes/blog_recent_posts.html" />
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<include src="./includes/blog_recent_posts.html" />
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

2
src/blog/style.scss
View File

@@ -1,3 +1 @@
@use "../partials/a_common"; @use "../partials/a_common";
@use "../partials/pane_main";

527
src/disclosure.html
View File

@@ -6,294 +6,287 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">Disclosure</h5>
<h5 class="page">Disclosure</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane">
<div class="pane_main"> <div class="body">
<header>
<h1 class="title">Disclosure</h1>
<p class="date">Last Edited: 01 August, 2025</p>
</header>
<div class="body"> <div class="body">
<div class="header"> <div class="layout_row">
<h1 class="title">Disclosure</h1> <div class="item">
<p class="date">Last Edited: 01 August, 2025</p> <h2 class="title">Website Security</h2>
</div> <p>
<div class="body"> This website uses a number of security features, most of which are
<div class="layout_row"> built into your browser, to protect my and your:
<div class="item"> </p>
<h2 class="title">Website Security</h2> <ul>
<p> <li>Infrastructure</li>
This website uses a number of security features, most of which <li>Data, and</li>
are built into your browser, to protect my and your: <li>Experience</li>
</p> </ul>
<ul> <p>
<li>Infrastructure</li> You can see some of the main methods that this website uses below:
<li>Data, and</li> </p>
<li>Experience</li> <div class="section_list">
</ul> <section>
<p> <header>
You can see some of the main methods that this website uses <div>
below: <h3 class="name">Anubis</h3>
</p> <span class="subtitle"
<div class="chunk_list"> >AI Scraper Screening Utility</span
<div class="chunk"> >
<div class="header">
<div>
<h3 class="name">Anubis</h3>
<span class="subtitle"
>AI Scraper Screening Utility</span
>
</div>
</div> </div>
<div class="body"> </header>
<p> <div class="body">
This website is protected by a screening utility <p>
known as This website is protected by a screening utility known
<a href="https://anubis.techaro.lol/" class="italic" as
>Anubis</a <a href="https://anubis.techaro.lol/"
>. You may also have heard of this program as ><cite>Anubis</cite></a
<span class="italic">BotStopper</span> for those who >. You may also have heard of this program as
purchase a commercial license because they somehow <cite>BotStopper</cite> for those who purchase a
can't live with a cute anime girl showing up on commercial license because they somehow can't live with
their websites. UNESCO notably don't have a problem a cute anime girl showing up on their websites. UNESCO
with that, and proudly present an anime girl as of notably don't have a problem with that, and proudly
writing this. present an anime girl as of writing this.
</p> </p>
<p> <p>
Despite what some fools at the FSF figure, Anubis IS I do not have a commercial license and do not pay in any
NOT malware. See: way for Anubis. If I had money to spare, I would
actively fund the project.
</p>
<p>
Despite what some fools at the FSF figure, Anubis IS NOT
malware. See:
<a href="https://www.youtube.com/watch?v=YisGpdPjYM8"
><cite
>I Platformed A Linux "Cyber Criminal"</cite
></a
>. It does have <em>similar</em> behaviour due to its
proof-of-work scheme, which asks your browser to run a
throwaway calculation in an effort to block or dissuade
AI scrapers. Many, if not nearly all clients, are
subject to screening based on various filters around
your browser's user agent string.
</p>
<p>
Additionally, if you have concerns about the legality of
my use of Anubis, please see
<a href="https://github.com/TecharoHQ/anubis/issues/50"
>Anubis Issue #50</a
>
where concerns were looked into.
</p>
<p>
Now, if you have a moral issue with this project, you
may do one of two things (because adjusting your UA will
just make me block the UA, or add a complete catch-all
rule):
</p>
<ol>
<li>
Don't allow JavaScript to run. (Have fun making this
work)
</li>
<li>Just don't use my website.</li>
</ol>
<p>
If you experience issues with Anubis blocking you, which
presumably hasn't happened on your way to this page, you
can email me with details. DO NOT bother the main
project as it may be an issue with a screening rule that
I've invoked.
</p>
<p>
If you do wish to raise an issue with the Anubis dev(s),
PLEASE DO NOT DO SOMETHING LIKE THIS:
</p>
<ul>
<li>
<a <a
href="https://www.youtube.com/watch?v=YisGpdPjYM8" href="https://github.com/TecharoHQ/anubis/issues/113"
class="italic" >Anubis Issue #113</a
>I Platformed A Linux "Cyber Criminal"</a
>. It does have
<span class="italic">similar</span> behaviour due to
its proof-of-work scheme, which asks your browser to
run a throwaway calculation in an effort to block or
dissuade AI scrapers. Many, if not nearly all
clients, are subject to screening based on various
filters around your browser's user agent string.
</p>
<p>
Additionally, if you have concerns about the
legality of my use of Anubis, please see
<a
href="https://github.com/TecharoHQ/anubis/issues/50"
>Anubis Issue #50</a
> >
where concerns were looked into. </li>
</p> <li>
<p>
Now, if you have a moral issue with this project,
you may do one of two things (because adjusting your
UA will just make me block the UA, or add a complete
catch-all rule):
</p>
<ol>
<li>
Don't allow JavaScript to run. (Have fun making
this work)
</li>
<li>Just don't use my website.</li>
</ol>
<p>
If you experience issues with Anubis blocking you,
which presumably hasn't happened on your way to this
page, you can email me with details. DO NOT bother
the main project as it may be an issue with a
screening rule that I've invoked.
</p>
<p>
If you do wish to raise an issue with the Anubis
dev(s), PLEASE DO NOT DO SOMETHING LIKE THIS:
</p>
<ul>
<li>
<a
href="https://github.com/TecharoHQ/anubis/issues/113"
>Anubis Issue #113</a
>
</li>
<li>
<a
href="https://github.com/TecharoHQ/anubis/discussions/114"
>Anubis Discussion #114</a
>
</li>
<li>
<a
href="https://github.com/TecharoHQ/anubis/discussions/117"
>Anubis Discussion #117</a
>
</li>
</ul>
</div>
</div>
<div class="chunk">
<div class="header">
<div>
<h3 class="name">Content Security Policy (CSP)</h3>
</div>
</div>
<div class="body">
<p>
This website, unlike a scary number of sites
(including google.com and microsoft.com as of
writing) has a CSP configured. This helps prevent or
mitigate a number of possible attacks including
cross-site scripting and clickjacking.
</p>
<p>
Further Reading:
<a <a
href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP" href="https://github.com/TecharoHQ/anubis/discussions/114"
>https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP</a >Anubis Discussion #114</a
> >
</p> </li>
</div> <li>
</div>
<div class="chunk">
<div class="header">
<div>
<h3 class="name">
HTTP Strict Transport Security (HSTS)
</h3>
</div>
</div>
<div class="body">
<p>
This website has a HSTS policy which indicates to
your browser to use a secure connection when
connecting.
</p>
<p>
Additionally, the server will force redirect ALL
connections over to HTTPS for any browsers which do
not use this header or have a HTTPS-only mode
enabled.
</p>
<p>
Further Reading:
<a <a
href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Strict-Transport-Security" href="https://github.com/TecharoHQ/anubis/discussions/117"
>https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Strict-Transport-Security</a >Anubis Discussion #117</a
> >
</p> </li>
</div> </ul>
</div> </div>
<div class="chunk"> </section>
<div class="header"> <section>
<div> <header>
<h3 class="name">Other Security Headers</h3> <div>
</div> <h3 class="name">Content Security Policy (CSP)</h3>
</div>
<div class="body">
<p>Some include:</p>
<ul>
<li>X-Content-Type-Options</li>
<li>X-Frame-Options</li>
<li>X-XSS-Protection</li>
<li>Permissions-Policy</li>
<li>Referrer-Policy</li>
</ul>
</div> </div>
</header>
<div class="body">
<p>
This website, unlike a scary number of sites (including
google.com and microsoft.com as of writing) has a CSP
configured. This helps prevent or mitigate a number of
possible attacks including cross-site scripting and
clickjacking.
</p>
<p>
Further Reading:
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP"
>https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP</a
>
</p>
</div> </div>
<div class="chunk"> </section>
<div class="header"> <section>
<div> <header>
<h3 class="name">Security.txt</h3> <div>
</div> <h3 class="name">
</div> HTTP Strict Transport Security (HSTS)
<div class="body"> </h3>
<p>
This file offers information to security researchers
to silently report any issues they find so that I
can resolve them.
</p>
</div> </div>
</header>
<div class="body">
<p>
This website has a HSTS policy which indicates to your
browser to use a secure connection when connecting.
</p>
<p>
Additionally, the server will force redirect ALL
connections over to HTTPS for any browsers which do not
use this header or have a HTTPS-only mode enabled.
</p>
<p>
Further Reading:
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Strict-Transport-Security"
>https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Strict-Transport-Security</a
>
</p>
</div> </div>
</div> </section>
<section>
<header>
<div>
<h3 class="name">Other Security Headers</h3>
</div>
</header>
<div class="body">
<p>Some include:</p>
<ul>
<li>X-Content-Type-Options</li>
<li>X-Frame-Options</li>
<li>X-XSS-Protection</li>
<li>Permissions-Policy</li>
<li>Referrer-Policy</li>
</ul>
</div>
</section>
<section>
<header>
<div>
<h3 class="name">Security.txt</h3>
</div>
</header>
<div class="body">
<p>
This file offers information to security researchers to
silently report any issues they find so that I can
resolve them.
</p>
</div>
</section>
</div> </div>
<div class="item"> </div>
<h2 class="title">Cookies</h2> <div class="item">
<p> <h2 class="title">Cookies</h2>
This website only leaves cookies that are required for the <p>
website's functioning. I do not place any trackers on your This website only leaves cookies that are required for the website's
system. functioning. I do not place any trackers on your system.
</p> </p>
<p> <p>
Note: I cannot say what cookies may be left by services that I Note: I cannot say what cookies may be left by services that I host
host (such as Gitea and Web Check). For more details, please see (such as Gitea and Web Check). For more details, please see those
those projects' documentation. projects' documentation.
</p> </p>
<p>You can see all cookies that this website uses below:</p> <p>You can see all cookies that this website uses below:</p>
<div class="chunk_list"> <div class="section_list">
<div class="chunk"> <section>
<div class="header"> <header>
<div> <div>
<h3 class="name">Anubis</h3> <h3 class="name">Anubis</h3>
<span class="subtitle" <span class="subtitle"
>AI Scraper Screening Utility</span >AI Scraper Screening Utility</span
> >
</div>
</div>
<div class="body">
<p>
This website does utilize a cookie. This cookie is
made by Anubis to keep your system from having to
pass the proof-of-work check every time you request
a resource from this site.
</p>
<p>
THEORETICALLY, this cookie, as with any JavaScript
cookie,
<span class="italic">can</span> be used to track
you.
</p>
<p>
HOWEVER, I do not use it for tracking, Anubis does
not use it for tracking, and there is no evidence
that 3rd parties are abusing the cookie. There are
far more attractive targets.
</p>
<p>
IF this becomes an issue, until the lead
developer(s) and/or community can find a solution,
Anubis will be reconfigured to send out challenges
even more frequently, and an advisory notice to wipe
your browser cookies at the end of your session will
be made.
</p>
<p>
Under the current configuration, Anubis' cookies are
valid for 24h. This does not mean that the cookie is
necessarily gone from your system.
</p>
<p>
<a
href="https://github.com/TecharoHQ/anubis/issues/50"
>Anubis Issue #50</a
>
briefly looked into the possibility of abuse via the
cookie.
</p>
</div> </div>
</header>
<div class="body">
<p>
This website does utilize a cookie. This cookie is made
by Anubis to keep your system from having to pass the
proof-of-work check every time you request a resource
from this site.
</p>
<p>
THEORETICALLY, this cookie, as with any JavaScript
cookie,
<em>can</em> be used to track you.
</p>
<p>
HOWEVER, I do not use it for tracking, Anubis does not
use it for tracking, and there is no evidence that 3rd
parties are abusing the cookie. There are far more
attractive targets.
</p>
<p>
IF this becomes an issue, until the lead developer(s)
and/or community can find a solution, Anubis will be
reconfigured to send out challenges even more
frequently, and an advisory notice to wipe your browser
cookies at the end of your session will be made.
</p>
<p>
Under the current configuration, Anubis' cookies are
valid for 24h. This does not mean that the cookie is
necessarily gone from your system.
</p>
<p>
<a href="https://github.com/TecharoHQ/anubis/issues/50"
>Anubis Issue #50</a
>
briefly looked into the possibility of abuse via the
cookie.
</p>
</div> </div>
</div> </section>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<include src="includes/tailer.html" />
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

48
src/errors/400.html
View File

@@ -6,32 +6,32 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">400</h5>
<h5 class="page">400</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane error">
<div class="pane_error"> <div class="body">
<div class="body"> <header>
<h1>400</h1> <h1 class="title">400</h1>
<h2>Bad Request!</h2> <h2>Bad Request!</h2>
<hr /> </header>
<p> <hr />
The server cannot or will not process this request due to apparent <p>
client-side error or deception. The server cannot or will not process this request due to apparent client-side
</p> error or deception.
</div> </p>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

38
src/errors/401.html
View File

@@ -6,27 +6,27 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">401</h5>
<h5 class="page">401</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane error">
<div class="pane_error"> <div class="body">
<div class="body"> <header>
<h1>401</h1> <h1 class="title">401</h1>
<h2>Unauthorized!</h2> <h2>Unauthorized!</h2>
</div> </header>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

42
src/errors/403.html
View File

@@ -6,29 +6,29 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">403</h5>
<h5 class="page">403</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane error">
<div class="pane_error"> <div class="body">
<div class="body"> <header>
<h1>403</h1> <h1 class="title">403</h1>
<h2>Forbidden!</h2> <h2>Forbidden!</h2>
<hr /> </header>
<p>The server is refusing to act upon your request.</p> <hr />
</div> <p>The server is refusing to act upon your request.</p>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

38
src/errors/404.html
View File

@@ -6,27 +6,27 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">404</h5>
<h5 class="page">404</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane error">
<div class="pane_error"> <div class="body">
<div class="body"> <header>
<h1>404</h1> <h1 class="title">404</h1>
<h2>Page not found!</h2> <h2>Page not found!</h2>
</div> </header>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

42
src/errors/500.html
View File

@@ -6,29 +6,29 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">500</h5>
<h5 class="page">500</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane error">
<div class="pane_error"> <div class="body">
<div class="body"> <header>
<h1>500</h1> <h1 class="title">500</h1>
<h2>Internal Server Error!</h2> <h2>Internal Server Error!</h2>
<hr /> </header>
<p>The server has no clue WTF happened here.</p> <hr />
</div> <p>The server has no clue WTF happened here.</p>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

42
src/errors/501.html
View File

@@ -6,29 +6,29 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">501</h5>
<h5 class="page">501</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane error">
<div class="pane_error"> <div class="body">
<div class="body"> <header>
<h1>501</h1> <h1 class="title">501</h1>
<h2>Not Implemented!</h2> <h2>Not Implemented!</h2>
<hr /> </header>
<p>Whatever you just tried doing, the server doesn't know how to handle it.</p> <hr />
</div> <p>Whatever you just tried doing, the server doesn't know how to handle it.</p>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

42
src/errors/502.html
View File

@@ -6,29 +6,29 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">502</h5>
<h5 class="page">502</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane error">
<div class="pane_error"> <div class="body">
<div class="body"> <header>
<h1>502</h1> <h1 class="title">502</h1>
<h2>Bad Gateway!</h2> <h2>Bad Gateway!</h2>
<hr /> </header>
<p>This service may be offline.</p> <hr />
</div> <p>This service may be offline.</p>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

42
src/errors/503.html
View File

@@ -6,29 +6,29 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">503</h5>
<h5 class="page">503</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane error">
<div class="pane_error"> <div class="body">
<div class="body"> <header>
<h1>503</h1> <h1 class="title">503</h1>
<h2>Service Unavailable!</h2> <h2>Service Unavailable!</h2>
<hr /> </header>
<p>The server may be overloaded or down for maintenance.</p> <hr />
</div> <p>The server may be overloaded or down for maintenance.</p>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

48
src/errors/504.html
View File

@@ -6,32 +6,32 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">Error Template</h5>
<h5 class="page">Error Template</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane error">
<div class="pane_error"> <div class="body">
<div class="body"> <header>
<h1>504</h1> <h1 class="title">504</h1>
<h2>Gateway Timeout!</h2> <h2>Gateway Timeout!</h2>
<hr /> </header>
<p> <hr />
The server acted as a proxy and didn't receive a timely response from the <p>
upstream server. The server acted as a proxy and didn't receive a timely response from the
</p> upstream server.
</div> </p>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

14
src/includes/_unused_menu_entries.html
View File

@@ -9,3 +9,17 @@
<a class="nav_title" href="/minecraft/rebirth/">Rebirth SMP</a> <a class="nav_title" href="/minecraft/rebirth/">Rebirth SMP</a>
</div> </div>
</li> </li>
<!-- Dropdown Pronoun Pages -->
<li class="dropdown">
<header>
<a class="header item" href="https://pronouns.page/@Cutieguwu">
<p class="title">Pronoun Pages</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</a>
</header>
<div class="body">
<a class="title" href="https://en.pronouns.page/@Cutieguwu">English</a>
<a class="title" href="https://pronoms.fr/@Cutieguwu">French</a>
</div>
</li>

22
src/includes/blog_recent_posts.html
View File

@@ -1,23 +1,23 @@
<div class="spacer_container spacer_posts"> <div class="spacer_container blog_recent_posts">
<h2>Recent</h2> <h2>Recent Posts</h2>
<div class="chunk_list recent_posts"> <div class="section_list">
<div class="chunk"> <section>
<div class="header"> <header>
<div> <div>
<h3 class="name">Unsure U.</h3> <h3 class="name">Unsure U.</h3>
<span class="subtitle">09 August, 2025</span> <span class="subtitle">09 August, 2025</span>
</div> </div>
<a href="/blog/posts/1_unsure_u.html" class="status"> View </a> <a href="/blog/posts/1_unsure_u.html" class="status"> View </a>
</div> </header>
</div> </section>
<div class="chunk"> <section>
<div class="header"> <header>
<div> <div>
<h3 class="name">Divergent Pathways</h3> <h3 class="name">Divergent Pathways</h3>
<span class="subtitle">29 July, 2025</span> <span class="subtitle">29 July, 2025</span>
</div> </div>
<a href="/blog/posts/0_divergent_pathways.html" class="status"> View </a> <a href="/blog/posts/0_divergent_pathways.html" class="status"> View </a>
</div> </header>
</div> </section>
</div> </div>
</div> </div>

4
src/includes/footer.html
View File

@@ -1 +1,3 @@
<p class="footer">Made with love in Canada 🇨🇦</p> <footer>
<p>Made with love in Canada 🇨🇦</p>
</footer>

4
src/includes/nav_header.html
View File

@@ -1,5 +1,5 @@
<input type="checkbox" id="toggle" /> <input type="checkbox" id="toggle" />
<label for="toggle" class="header"> <label for="toggle" class="nav_header">
<h2 class="nav_logo">Cutieguwu</h2> <h2 class="logo">Cutieguwu</h2>
<ion-icon name="menu-outline"></ion-icon> <ion-icon name="menu-outline"></ion-icon>
</label> </label>

83
src/includes/nav_menu.html
View File

@@ -1,74 +1,65 @@
<ul class="nav_menu"> <ul class="menu">
<!-- Home --> <!-- Home -->
<li class="nav_item"> <li class="item">
<a class="nav_title" href="/">Home</a> <a class="title" href="/">Home</a>
</li> </li>
<li class="nav_item"> <li class="item">
<a class="nav_title" href="/blog/">Blog</a> <a class="title" href="/blog/">Blog</a>
</li> </li>
<hr /> <li><hr /></li>
<!-- About --> <!-- About -->
<li class="nav_item"><a class="nav_title" href="/about.html">About</a></li> <li class="item"><a class="title" href="/about.html">About</a></li>
<!-- Pronoun Pages --> <!-- Pronoun Pages -->
<li class="nav_dropdown"> <li class="item"><a class="title" href="https://pronouns.page/@Cutieguwu">Pronoun Pages</a></li>
<a class="header nav_item" href="https://pronouns.page/@Cutieguwu">
<p class="nav_title">Pronoun Pages</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</a>
<div class="body">
<a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
<a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
</div>
</li>
<!-- External Links --> <!-- External Links -->
<li class="nav_dropdown"> <li class="dropdown">
<div class="header nav_item"> <header class="item">
<p class="nav_title">External Links</p> <p class="title">External Links</p>
<ion-icon name="chevron-forward-outline"></ion-icon> <ion-icon name="chevron-forward-outline"></ion-icon>
</div> </header>
<div class="body"> <ul>
<a class="nav_title" href="https://github.com/Cutieguwu">Github (Mirror)</a> <li><a class="title" href="https://github.com/Cutieguwu">Github (Mirror)</a></li>
<a class="nav_title" href="https://www.twitch.tv/cutieguwu">Twitch</a> <li><a class="title" href="https://www.twitch.tv/cutieguwu">Twitch</a></li>
<a class="nav_title" href="https://www.youtube.com/@Cutieguwu">YouTube</a> <li><a class="title" href="https://www.youtube.com/@Cutieguwu">YouTube</a></li>
</div> </ul>
</li> </li>
<hr /> <li><hr /></li>
<!-- Public Services --> <!-- Public Services -->
<li class="nav_dropdown"> <li class="dropdown">
<div class="header nav_item"> <header class="item">
<p class="nav_title">Public Services</p> <p class="title">Public Services</p>
<ion-icon name="chevron-forward-outline"></ion-icon> <ion-icon name="chevron-forward-outline"></ion-icon>
</div> </header>
<div class="body"> <ul>
<a class="nav_title" href="https://webcheck.cutieguwu.ca">Web Check</a> <li><a class="title" href="https://webcheck.cutieguwu.ca">Web Check</a></li>
</div> </ul>
</li> </li>
<!-- Services --> <!-- Services -->
<li class="nav_dropdown"> <li class="dropdown">
<div class="header nav_item"> <header class="item">
<p class="nav_title">Services</p> <p class="title">Services</p>
<ion-icon name="chevron-forward-outline"></ion-icon> <ion-icon name="chevron-forward-outline"></ion-icon>
</div> </header>
<div class="body"> <ul>
<a class="nav_title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a> <li><a class="title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a></li>
</div> </ul>
</li> </li>
<hr /> <li><hr /></li>
<!-- Website Disclosure --> <!-- Website Disclosure -->
<li class="nav_item"> <li class="item">
<a class="nav_title" href="/disclosure.html">Disclosure</a> <a class="title" href="/disclosure.html">Disclosure</a>
</li> </li>
<li class="nav_item"> <li class="item">
<a class="nav_title" href="/acknowledgements.html">Acknowledgements</a> <a class="title" href="/acknowledgements.html">Acknowledgements</a>
</li> </li>
</ul> </ul>

8
src/includes/nav_quick_links.html
View File

@@ -1,18 +1,18 @@
<div class="quick_links"> <div class="quick_links">
<a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site" title="Website Source"> <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site" title="Website Source">
<ion-icon name="git-branch-outline" alt="(Gitea) Website Source" class="gitea"></ion-icon> <ion-icon name="git-branch-outline" alt="(Gitea) Website Source" class="green"></ion-icon>
</a> </a>
<a <a
href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/src/branch/main/LICENSE" href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/src/branch/main/LICENSE"
title="MIT License" title="MIT License"
> >
<ion-icon name="book-outline" alt="MIT License" class="license"></ion-icon> <ion-icon name="book-outline" alt="MIT License" class="indigo"></ion-icon>
</a> </a>
<a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/issues" title="Report Issues"> <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/issues" title="Report Issues">
<ion-icon name="alert-circle-outline" alt="Report Issues" class="issue_tracker"></ion-icon> <ion-icon name="alert-circle-outline" alt="Report Issues" class="magenta"></ion-icon>
</a> </a>
<a href="https://www.cutieguwu.ca/feed/rss.xml" title="RSS Feed" download> <a href="https://www.cutieguwu.ca/feed/rss.xml" title="RSS Feed" download>
<ion-icon name="logo-rss" alt="RSS Feed" class="rss"></ion-icon> <ion-icon name="logo-rss" alt="RSS Feed" class="orange"></ion-icon>
</a> </a>
<a class="phantom"></a> <a class="phantom"></a>
</div> </div>

2
src/includes/tailer.html
View File

@@ -1 +1 @@
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p> <footer><p class="tailer">Copyright (c) 2025 Olivia Brooks</p></footer>

61
src/index.html
View File

@@ -6,41 +6,38 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">Home</h5>
<h5 class="page">Home</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane">
<div class="pane_main"> <div class="body">
<header>
<h1 class="title">Home</h1>
<p class="date">Last Edited: 03 August, 2025</p>
</header>
<div class="body"> <div class="body">
<div class="header"> <p>lorem ipsum idk what else there is in this latin phrase</p>
<h1 class="title">Home</h1> <p>
<p class="date">Last Edited: 03 August, 2025</p> Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex
</div> sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis
<div class="body"> convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus
<p>lorem ipsum idk what else there is in this latin phrase</p> fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada
<p> lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
ex sapien vitae pellentesque sem placerat. In id cursus mi pretium </p>
tellus duis convallis. Tempus leo eu aenean sed diam urna tempor.
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis
massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper
vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos.
</p>
</div>
</div> </div>
<include src="includes/tailer.html" />
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

32
src/minecraft/bearock/index.html
View File

@@ -6,24 +6,22 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">Bearock SMP</h5>
<h5 class="page">Bearock SMP</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
<include src="includes/tailer.html" />
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<main class="pane">
<div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

2
src/minecraft/bearock/style.scss
View File

@@ -1,3 +1 @@
@use "../../partials/a_common"; @use "../../partials/a_common";
@use "../../partials/pane_main";

32
src/minecraft/index.html
View File

@@ -6,24 +6,22 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">Minecraft</h5>
<h5 class="page">Minecraft</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
<include src="includes/tailer.html" />
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<main class="pane">
<div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

32
src/minecraft/rebirth/index.html
View File

@@ -6,24 +6,22 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">Rebirth SMP</h5>
<h5 class="page">Rebirth SMP</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
<include src="includes/tailer.html" />
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/nav_quick_links.html" />
</nav>
<main class="pane">
<div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
<include src="includes/tailer.html" />
</main>
<div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div> </div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />

2
src/minecraft/rebirth/style.scss
View File

@@ -1,3 +1 @@
@use "../../partials/a_common"; @use "../../partials/a_common";
@use "../../partials/pane_main";

2
src/minecraft/style.scss
View File

@@ -1,3 +1 @@
@use "../partials/a_common"; @use "../partials/a_common";
@use "../partials/pane_main";

22
src/partials/_a_chunk_list.scss
View File

@@ -4,19 +4,19 @@ All specificities to do with Chunk Lists are a disaster.
Hopefully, I will attempt to clean up this steaming pile of shit so that I don't have to deal with conflicts (.main_body .body vs. .chunk .body in particular), but we'll see. Hopefully, I will attempt to clean up this steaming pile of shit so that I don't have to deal with conflicts (.main_body .body vs. .chunk .body in particular), but we'll see.
*/ */
.chunk_list { .section_list {
display: grid; display: grid;
width: 100%; width: 100%;
.chunk + .chunk { > section + section {
margin-top: var(--spacing-small); margin-top: var(--spacing-small);
} }
.chunk { > section {
width: inherit; width: inherit;
> .header { > header {
display: grid; display: grid;
grid-auto-flow: row; grid-auto-flow: row;
grid-template-columns: 1fr min-content; grid-template-columns: 1fr min-content;
@@ -71,9 +71,19 @@ Hopefully, I will attempt to clean up this steaming pile of shit so that I don't
} }
} }
.spacer_container {
justify-content: start;
.section_list > section > header {
background-color: var(--background-1);
white-space: nowrap;
}
}
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.chunk_list .chunk { .section_list section {
> .header { > header {
column-gap: var(--spacing-small); column-gap: var(--spacing-small);
} }

52
src/partials/_a_colours.scss Normal file
View File

@@ -0,0 +1,52 @@
.red {
color: var(--accent-red);
}
.orange {
color: var(--accent-orange);
}
.yellow {
color: var(--accent-yellow);
}
.green {
color: var(--accent-green);
}
.cyan {
color: var(--accent-cyan);
}
.blue {
color: var(--accent-blue);
}
.indigo {
color: var(--accent-indigo);
}
.purple {
color: var(--accent-purple);
}
.magenta {
color: var(--accent-magenta);
}
.pink {
color: var(--accent-pink);
}
.white {
color: var(--white-0);
}
.docker {
/*
Docker is protective of their colours.
https://www.docker.com/company/newsroom/media-resources/
*/
color: #1d63edff;
}

45
src/partials/_a_common.scss
View File

@@ -1,11 +1,9 @@
@use "a_chunk_list"; @use "a_chunk_list";
@use "a_colours";
@use "a_footer"; @use "a_footer";
@use "a_layouts"; @use "a_layouts";
@use "a_pane";
@use "a_quick_links"; @use "a_quick_links";
@use "a_pages";
@use "pane_nav";
@use "pane_spacer";
:root { :root {
// 0: Base of an element. Example: the viewport class. // 0: Base of an element. Example: the viewport class.
@@ -53,8 +51,7 @@
--border-radius-small: calc(var(--border-radius-large) / 2); --border-radius-small: calc(var(--border-radius-large) / 2);
--border-radius-large: 1rem; --border-radius-large: 1rem;
--border-radius-leaf: var(--border-radius-small) --border-radius-leaf: var(--border-radius-small) var(--border-radius-large);
var(--border-radius-large);
--spacing-small: 0.75rem; // Previously: --spacing-horizontal --spacing-small: 0.75rem; // Previously: --spacing-horizontal
--spacing-medium: 1rem; // Previously: --spacing-menu-gap --spacing-medium: 1rem; // Previously: --spacing-menu-gap
@@ -68,11 +65,18 @@
--transform-scale-y: scaleY(1.15); --transform-scale-y: scaleY(1.15);
font-size: var(--font-size-generic); font-size: var(--font-size-generic);
color: var(--white-1);
body { body {
background-color: var(--background-0); background-color: var(--background-0);
// Adds a margin otherwise for some reason.
margin: 0; margin: 0;
color: var(--white-3);
display: grid;
grid-auto-flow: column dense;
grid-template-columns: min-content 1fr min-content;
grid-template-areas: "nav main spacer";
} }
} }
@@ -102,47 +106,26 @@ a {
font-family: var(--font-family-generic); font-family: var(--font-family-generic);
} }
.viewport {
// Adds a margin otherwise for some reason.
margin: inherit;
display: grid;
grid-auto-flow: column dense;
grid-template-columns: min-content 1fr min-content;
grid-template-areas: "nav main spacer";
}
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
:root { :root {
--spacing-large: var(--spacing-small); --spacing-large: var(--spacing-small);
} }
.viewport { body {
grid-auto-flow: row; grid-auto-flow: row;
grid-template-columns: none; grid-template-columns: none;
grid-template-areas: "nav" "main" "spacer"; grid-template-areas: "nav" "main" "spacer";
// Compress spacings to maximize useable area. // Compress spacings to maximize useable area.
padding: var(--spacing-small); // padding: var(--spacing-small);
justify-items: center; justify-items: center;
} }
.pane_spacer, .pane.spacer,
.footer { .footer {
position: static; position: static;
top: auto; top: auto;
left: auto; left: auto;
right: auto; right: auto;
} }
.pane_main,
.pane_blog,
.pane_error,
.pane_spacer {
margin: 0;
}
}
.italic {
font-style: italic;
} }

9
src/partials/_a_footer.scss
View File

@@ -1,14 +1,17 @@
.footer { body > footer {
margin: 0;
padding: var(--spacing-small); padding: var(--spacing-small);
width: min-content; width: min-content;
background-color: var(--background-2); background-color: var(--background-2);
border-top-right-radius: var(--border-radius-large); border-radius: 0 var(--border-radius-large) 0 0;
font-size: 1.65vh; font-size: 1.65vh;
white-space: nowrap; white-space: nowrap;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
> p {
margin: 0;
}
} }

2
src/partials/_a_layouts.scss
View File

@@ -3,7 +3,7 @@
grid-auto-flow: column; grid-auto-flow: column;
gap: var(--spacing-small); gap: var(--spacing-small);
.item { > .item {
padding: calc(var(--spacing-small) * 2); padding: calc(var(--spacing-small) * 2);
background-color: var(--background-1); background-color: var(--background-1);

3
src/partials/_a_pages.scss
View File

@@ -1,3 +0,0 @@
@use "blog_recent_posts";
@use "page_resume";

23
src/partials/_a_pane.scss Normal file
View File

@@ -0,0 +1,23 @@
@use "pane_main";
@use "pane_nav";
@use "pane_spacer";
.pane {
margin: var(--spacing-large);
}
@media only screen and (max-width: 500px) {
.pane {
width: 100%;
}
}
nav.pane,
.pane.spacer {
width: min-content;
gap: var(--spacing-medium);
position: sticky;
top: var(--spacing-large);
right: var(--spacing-large);
}

13
src/partials/_a_tailer.scss
View File

@@ -1,13 +0,0 @@
.tailer {
margin: var(--spacing-large) auto 0;
width: min-content;
font-size: 1.65vh;
white-space: nowrap;
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
padding: var(--spacing-small);
text-align: center;
}

8
src/partials/_blog_recent_posts.scss
View File

@@ -1,8 +0,0 @@
.spacer_posts {
justify-content: start !important;
.recent_posts .chunk .header {
background-color: var(--background-1);
white-space: nowrap;
}
}

22
src/partials/_nav_dropdown.scss
View File

@@ -1,40 +1,44 @@
.nav_dropdown { .dropdown {
> .header { > header {
display: grid; display: grid;
grid-template-columns: 1fr min-content; grid-template-columns: 1fr min-content;
align-items: center; align-items: center;
ion-icon { > ion-icon {
align-self: center; align-self: center;
transition-duration: 0.25s; transition-duration: 0.25s;
} }
} }
> .body { > ul {
display: none; display: none;
border-bottom-left-radius: var(--border-radius-small); border-bottom-left-radius: var(--border-radius-small);
border-bottom-right-radius: var(--border-radius-small); border-bottom-right-radius: var(--border-radius-small);
background-color: var(--background-1); background-color: var(--background-1);
// Remove default padding and style applied to ul for bullets.
padding: 0 var(--spacing-small);
list-style: none;
} }
} }
.nav_dropdown:hover { .dropdown:hover {
> .header { > header {
transform: var(--transform-scale-x); transform: var(--transform-scale-x);
ion-icon { > ion-icon {
rotate: 90deg; rotate: 90deg;
transition-duration: 0.25s; transition-duration: 0.25s;
} }
} }
> .body { > ul {
display: grid; display: grid;
} }
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.nav_dropdown > .header ion-icon { .dropdown > header > ion-icon {
margin-right: var(--padding-mobile); margin-right: var(--padding-mobile);
} }
} }

6
src/partials/_nav_header.scss
View File

@@ -1,4 +1,4 @@
.pane_nav > .header { nav.pane > .nav_header {
display: grid; display: grid;
grid-template-columns: none; grid-template-columns: none;
grid-template-areas: "logo"; grid-template-areas: "logo";
@@ -17,7 +17,7 @@
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.pane_nav > .header { nav.pane > .nav_header {
grid-template-columns: min-content 1fr min-content; grid-template-columns: min-content 1fr min-content;
grid-template-areas: "logo blank hamburger"; grid-template-areas: "logo blank hamburger";
@@ -27,7 +27,7 @@
} }
} }
.nav_logo { nav .logo {
grid-area: logo; grid-area: logo;
font-family: var(--font-family-generic); font-family: var(--font-family-generic);

56
src/partials/_nav_menu.scss
View File

@@ -1,7 +1,7 @@
@use "nav_dropdown"; @use "nav_dropdown";
@use "nav_title"; @use "nav_title";
.nav_menu { nav .menu {
grid-area: menu; grid-area: menu;
// Remove default padding and style applied to ul for bullets. // Remove default padding and style applied to ul for bullets.
@@ -20,39 +20,43 @@
} }
} }
.nav_item { .menu {
// Need to force inheritence, otherwise <a> would require .item {
// overrides for all color states from base styling for element. // Need to force inheritence, otherwise <a> would require
color: inherit; // overrides for all color states from base styling for element.
text-decoration: none; color: inherit;
text-decoration: none;
padding: 0 var(--spacing-small); padding: 0 var(--spacing-small);
background-color: var(--background-2); background-color: var(--background-2);
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
transition: var(--transition-fade); transition: var(--transition-fade);
} }
.nav_item:hover, .item:hover,
.nav_dropdown:hover .nav_item { .dropdown:hover .item {
transform: var(--transform-scale-x); transform: var(--transform-scale-x);
transition: var(--transition-cut);
.nav_title,
ion-icon {
color: var(--highlight-hover);
transition: var(--transition-cut); transition: var(--transition-cut);
.title,
ion-icon {
color: var(--highlight-hover);
transition: var(--transition-cut);
}
} }
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.nav_item { .menu {
padding: var(--padding-mobile); .item {
background-color: var(--background-1); padding: var(--padding-mobile);
} background-color: var(--background-1);
}
.nav_item:hover, .item:hover,
.nav_dropdown:hover .nav_item { .dropdown:hover .item {
transform: none; transform: none;
}
} }
} }

24
src/partials/_nav_quick_links.scss
View File

@@ -1,4 +1,4 @@
.pane_nav .quick_links { nav.pane .quick_links {
grid-area: quick_links; grid-area: quick_links;
--item-padding: 0.25rem; --item-padding: 0.25rem;
@@ -37,28 +37,8 @@
} }
} }
.gitea {
color: var(--accent-green);
}
.github {
color: var(--accent-blue);
}
.license {
color: var(--accent-indigo);
}
.issue_tracker {
color: var(--accent-magenta);
}
.rss {
color: var(--accent-orange);
}
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.pane_nav .quick_links { nav.pane .quick_links {
margin-bottom: var(--spacing-small); margin-bottom: var(--spacing-small);
--item-padding: var(--padding-mobile); --item-padding: var(--padding-mobile);

4
src/partials/_nav_title.scss
View File

@@ -1,4 +1,4 @@
.nav_title { .menu .title {
// Need to force inheritence, otherwise <a> would require // Need to force inheritence, otherwise <a> would require
// overrides for all color states from base styling for element. // overrides for all color states from base styling for element.
color: inherit; color: inherit;
@@ -13,7 +13,7 @@
display: block; display: block;
} }
.nav_title:hover { .menu .title:hover {
color: var(--highlight-hover); color: var(--highlight-hover);
transition: var(--transition-cut); transition: var(--transition-cut);
} }

174
src/partials/_page_resume.scss
View File

@@ -1,3 +1,7 @@
.r90 {
rotate: 90deg;
}
.pane_details { .pane_details {
display: flex !important; display: flex !important;
flex-direction: column; flex-direction: column;
@@ -11,17 +15,6 @@
} }
} }
.spacer_contact {
justify-content: start !important;
.contact_info .chunk .header {
background-color: var(--background-1);
white-space: nowrap;
text-align: justify;
}
}
.about_me { .about_me {
padding: 0 var(--spacing-thicc) var(--spacing-small); padding: 0 var(--spacing-thicc) var(--spacing-small);
} }
@@ -41,165 +34,6 @@
grid-template-columns: 60% auto; grid-template-columns: 60% auto;
} }
.software {
.three_dimensional_printing {
color: var(--accent-magenta);
}
.android {
color: var(--accent-green);
}
.anubis {
color: var(--accent-green);
}
.blender {
color: var(--accent-orange);
}
.davinci_resolve {
color: var(--accent-blue);
}
.gimp {
color: var(--accent-magenta);
}
.git {
color: var(--accent-orange);
}
.ios {
color: var(--white-0);
}
.libreoffice {
color: var(--accent-green);
}
.linux {
color: var(--white-0);
}
.macos {
color: var(--white-0);
}
.ms_office {
color: var(--accent-orange);
}
.ms_windows {
color: var(--accent-blue);
}
.musescore {
color: var(--accent-cyan);
}
.nextcloud {
color: var(--accent-cyan);
}
.nginx {
color: var(--accent-green);
}
.obs {
color: var(--white-0);
}
.photoshop {
color: var(--accent-blue);
}
.premiere_pro {
color: var(--accent-purple);
}
.prusaslicer {
color: var(--accent-orange);
}
.shopbot_control_software {
color: var(--accent-blue);
}
.cnc_machining,
.vectric_aspire {
color: var(--accent-red);
rotate: 90deg;
}
.zotero {
color: var(--accent-orange);
}
}
.prog_languages {
.asciidoc {
color: var(--accent-cyan);
}
.css {
color: var(--accent-purple);
}
.html {
color: var(--accent-orange);
}
.json {
color: var(--accent-cyan);
}
.markdown {
color: var(--accent-indigo);
}
.nginx {
color: var(--accent-green);
}
.python {
color: var(--accent-blue);
}
.ron {
color: var(--accent-orange);
}
.rust {
color: var(--accent-orange);
}
.scss {
color: var(--accent-magenta);
}
.toml {
color: var(--accent-orange);
}
.shell {
color: var(--accent-green);
}
.yaml {
color: var(--accent-yellow);
}
}
.docker {
/*
Docker is protective of their colours.
https://www.docker.com/company/newsroom/media-resources/
*/
color: #1d63edff;
}
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.awards, .awards,
.certifications, .certifications,

47
src/partials/_pane_blog.scss
View File

@@ -1,43 +1,14 @@
@use "a_tailer"; .pane.blog {
.pane_blog {
grid-area: main;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
margin: var(--spacing-large);
justify-content: center; justify-content: center;
> .body { > .body {
background-color: var(--background-2); padding: var(--spacing-small) 0 0;
border-radius: var(--border-radius-leaf);
padding-top: var(--spacing-small);
> .header {
text-align: center;
padding: var(--spacing-small);
width: min-content;
> header {
white-space: nowrap; white-space: nowrap;
margin: 0 auto;
.title {
background-color: var(--background-1);
border-radius: var(--border-radius-leaf);
padding: var(--spacing-small);
}
.date {
display: block;
font-size: 0.85rem;
font-weight: normal;
font-style: italic;
font-family: var(--font-family-generic);
}
} }
> .body { > .body {
@@ -45,10 +16,6 @@
padding: 0 var(--spacing-thicc) var(--spacing-thicc); padding: 0 var(--spacing-thicc) var(--spacing-thicc);
p {
color: var(--white-1);
}
img { img {
max-width: 100%; max-width: 100%;
max-height: 65vh; max-height: 65vh;
@@ -61,11 +28,7 @@
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.pane_blog { .pane.blog .body > .body {
width: 100%; padding: var(--spacing-small);
.body > .body {
padding: var(--spacing-small);
}
} }
} }

19
src/partials/_pane_error.scss
View File

@@ -1,25 +1,12 @@
@use "a_tailer"; .pane.error {
.pane_error {
grid-area: main;
width: max-content; width: max-content;
margin: auto; margin: auto;
> .body, text-align: center;
.tailer {
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
padding: var(--spacing-small);
text-align: center;
}
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.pane_error { .pane.error {
width: 100%;
margin-top: var(--spacing-large); margin-top: var(--spacing-large);
margin-bottom: var(--spacing-large); margin-bottom: var(--spacing-large);
} }

38
src/partials/_pane_main.scss
View File

@@ -1,16 +1,16 @@
@use "a_tailer"; main.pane {
.pane_main {
grid-area: main; grid-area: main;
margin: var(--spacing-large); > .body,
> footer {
> .body {
background-color: var(--background-2); background-color: var(--background-2);
border-radius: var(--border-radius-leaf); border-radius: var(--border-radius-leaf);
}
> .body {
padding: var(--spacing-small); padding: var(--spacing-small);
> .header { > header {
text-align: center; text-align: center;
padding: var(--spacing-small); padding: var(--spacing-small);
width: max-content; width: max-content;
@@ -35,16 +35,22 @@
> .body { > .body {
text-align: start; text-align: start;
}
}
p { > footer {
color: var(--white-1); margin: var(--spacing-large) auto 0;
} width: min-content;
font-size: 1.65vh;
white-space: nowrap;
padding: var(--spacing-small);
text-align: center;
> p {
margin: 0;
} }
} }
} }
@media only screen and (max-width: 500px) {
.pane_main {
width: 100%;
}
}

20
src/partials/_pane_nav.scss
View File

@@ -3,17 +3,15 @@
@use "nav_location"; @use "nav_location";
@use "nav_quick_links"; @use "nav_quick_links";
.pane_nav { nav.pane {
grid-area: nav;
--padding-mobile: 0.35rem; --padding-mobile: 0.35rem;
margin: var(--spacing-large);
width: min-content;
height: min-content; height: min-content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-medium);
position: sticky; position: sticky;
top: var(--spacing-large); top: var(--spacing-large);
@@ -27,14 +25,12 @@
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.pane_nav { nav.pane {
width: calc( width: calc(
calc(50% - var(--spacing-large) + var(--spacing-small)) * calc(50% - var(--spacing-large) + var(--spacing-small)) * 2
2
); );
background-color: var(--background-2); background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
padding: 0 var(--spacing-small); padding: 0 var(--spacing-small);
.nav_menu, .nav_menu,
@@ -48,11 +44,11 @@
} }
} }
.pane_nav > #toggle:checked { nav.pane > #toggle:checked {
+ .header { + .nav_header {
color: var(--highlight-hover); color: var(--highlight-hover);
+ .nav_menu { + .menu {
display: grid; display: grid;
+ .location + .quick_links { + .location + .quick_links {

16
src/partials/_pane_spacer.scss
View File

@@ -1,18 +1,10 @@
.pane_spacer { .pane.spacer {
grid-area: spacer; grid-area: spacer;
margin: var(--spacing-large);
width: min-content;
height: calc(100vh - calc(var(--spacing-large) * 2)); height: calc(100vh - calc(var(--spacing-large) * 2));
display: grid; display: grid;
grid-auto-flow: row dense; grid-auto-flow: row dense;
gap: var(--spacing-medium);
position: sticky;
top: var(--spacing-large);
right: var(--spacing-large);
.spacer_container { .spacer_container {
padding: var(--spacing-small); padding: var(--spacing-small);
@@ -32,8 +24,6 @@
} }
} }
@media only screen and (max-width: 500px) { .spacer_container.blog_recent_posts {
.pane_spacer { justify-content: start !important;
width: 100%;
}
} }

953
src/resume.html
View File

@@ -7,535 +7,498 @@
<include src="includes/meta.html" /> <include src="includes/meta.html" />
</head> </head>
<body> <body>
<div class="viewport"> <nav class="pane">
<nav class="pane_nav"> <include src="includes/nav_header.html" />
<include src="includes/nav_header.html" /> <include src="includes/nav_menu.html" />
<include src="includes/nav_menu.html" /> <div class="location">
<div class="location"> <h4 class="header">You are here:</h4>
<h4 class="header">You are here:</h4> <h5 class="page">Resume</h5>
<h5 class="page">Resume</h5> </div>
</div> <include src="includes/nav_quick_links.html" />
<include src="includes/nav_quick_links.html" /> </nav>
</nav> <main class="pane">
<div class="pane_main"> <div class="body">
<header>
<h1 class="title">Olivia Brooks</h1>
<p class="date">Last Edited: 08 August, 2025</p>
</header>
<div class="body"> <div class="body">
<div class="header"> <div class="about_me">
<h1 class="title">Olivia Brooks</h1> <p>
<p class="date">Last Edited: 08 August, 2025</p> Hello, I'm Olivia Brooks. I am a passionate, hard-working, and
dependable individual with an inate interest in sharing and expanding my
knowledge and expertise.
</p>
<p>
For the better part of a decade, I've specced, built, identified and
removed bottlenecks, and breathed new life into both desktops and
laptops. I have experience with all major operating systems including
Linux (which I've daily-driven for 5 years), Windows, MacOS, Android,
and iOS.
</p>
<p>
Over the years, my technical skills have branched to 3D printing, CNC
machining, basic CAD modelling, programming, and homelabbing. These
interests have garnered me experience with hardware and software from a
variety of vendors, architectures, and ecosystems, big and niche.
</p>
<p>
I have extensive experience in both leadership and non-leadership
positions across a variety of contexts. This has allowed me to develop a
wide range of skills which I draw upon daily to rapidly develop new
understandings. This additionally gives me the capacity to interact and
excel in unfamiliar situations and novel endeavours.
</p>
<p>
I am always willing to lend a hand where I can, no matter the learning
curve ahead.
</p>
<p>
I sincerely appreciate your consideration of me as a candidate, and look
forward to hearing from you.
</p>
</div> </div>
<div class="body"> <!--
<div class="about_me">
<p>
Hello, I'm Olivia Brooks. I am a passionate, hard-working, and
dependable individual with an inate interest in sharing and
expanding my knowledge and expertise.
</p>
<p>
For the better part of a decade, I've specced, built, identified and
removed bottlenecks, and breathed new life into both desktops and
laptops. I have experience with all major operating systems
including Linux (which I've daily-driven for 5 years), Windows,
MacOS, Android, and iOS.
</p>
<p>
Over the years, my technical skills have branched to 3D printing,
CNC machining, basic CAD modelling, programming, and homelabbing.
These interests have garnered me experience with hardware and
software from a variety of vendors, architectures, and ecosystems,
big and niche.
</p>
<p>
I have extensive experience in both leadership and non-leadership
positions across a variety of contexts. This has allowed me to
develop a wide range of skills which I draw upon daily to rapidly
develop new understandings. This additionally gives me the capacity
to interact and excel in unfamiliar situations and novel endeavours.
</p>
<p>
I am always willing to lend a hand where I can, no matter the
learning curve ahead.
</p>
<p>
I sincerely appreciate your consideration of me as a candidate, and
look forward to hearing from you.
</p>
</div>
<!--
Add a table of contents?... or just one disguised as a few shortcuts. Add a table of contents?... or just one disguised as a few shortcuts.
Also make this look less long by making chunks into dropdowns. Also make this look less long by making chunks into dropdowns.
--> -->
<div class="layout_row"> <div class="layout_row">
<div class="item work_history"> <div class="item work_history">
<h2 class="title">Work History</h2> <h2 class="title">Work History</h2>
<div class="chunk_list"> <div class="section_list">
<div class="chunk"> <section>
<div class="header"> <header>
<div> <div>
<h3 class="name">OTHS Tech Crew</h3> <h3 class="name">OTHS Tech Crew</h3>
<span class="subtitle" <span class="subtitle">September 2024 - June 2025</span>
>September 2024 - June 2025</span
>
</div>
</div>
<div class="body">
<p>Project Manager</p>
<ul>
<li>
First year that the crew was entirely
student-led.
</li>
<li>Identified project scope and requirements.</li>
<li>Ensured timely completion of tasks.</li>
<li>
Coordinated crew setup and take-down efforts.
</li>
<li>
Effectively worked around live program changes
and weather patterns.
</li>
<li>Additionally handled equipment maintenance.</li>
<li>Acted as administrative liason.</li>
</ul>
</div> </div>
</header>
<div class="body">
<p>Project Manager</p>
<ul>
<li>
First year that the crew was entirely student-led.
</li>
<li>Identified project scope and requirements.</li>
<li>Ensured timely completion of tasks.</li>
<li>Coordinated crew setup and take-down efforts.</li>
<li>
Effectively worked around live program changes and
weather patterns.
</li>
<li>Additionally handled equipment maintenance.</li>
<li>Acted as administrative liason.</li>
</ul>
</div> </div>
<div class="chunk"> </section>
<div class="header"> <section>
<div> <header>
<h3 class="name">Farmers' Market</h3> <div>
<span class="subtitle" <h3 class="name">Farmers' Market</h3>
>Wee Youngn' - 2020, Summer 2023</span <span class="subtitle"
> >Wee Youngn' - 2020, Summer 2023</span
</div> >
</div>
<div class="body">
<p>Volunteer - Various Roles</p>
<ul>
<li>
Started as a young child attracting customers to
a fudge stall by looking cute with divine,
glorious red hair.
</li>
<li>Handled the sale of goods.</li>
<li>
Handled the preparation of farm-grown goods.
</li>
<li>Stocked the displays.</li>
<li>
Ran the Kids' Corner activities. (Summer 2023)
</li>
</ul>
</div> </div>
</header>
<div class="body">
<p>Volunteer - Various Roles</p>
<ul>
<li>
Started as a young child attracting customers to a
fudge stall by looking cute with divine, glorious
red hair.
</li>
<li>Handled the sale of goods.</li>
<li>Handled the preparation of farm-grown goods.</li>
<li>Stocked the displays.</li>
<li>Ran the Kids' Corner activities. (Summer 2023)</li>
</ul>
</div> </div>
<div class="chunk"> </section>
<div class="header"> <section>
<div> <header>
<h3 class="name">MPS Audio-Visual Club</h3> <div>
<span class="subtitle">September 2018 - 2020</span> <h3 class="name">MPS Audio-Visual Club</h3>
</div> <span class="subtitle">September 2018 - 2020</span>
</div>
<div class="body">
<p>Supervisor</p>
<ul>
<li>Identified project scope and requirements.</li>
<li>Ensured timely completion of tasks.</li>
<li>
Coordinated crew setup and take-down efforts.
</li>
</ul>
</div> </div>
</header>
<div class="body">
<p>Supervisor</p>
<ul>
<li>Identified project scope and requirements.</li>
<li>Ensured timely completion of tasks.</li>
<li>Coordinated crew setup and take-down efforts.</li>
</ul>
</div> </div>
</div> </section>
</div>
<!-- Education -->
<div class="item education">
<h2 class="title">Education</h2>
<div class="chunk_list">
<div class="chunk">
<div class="header">
<div>
<h3 class="name">Carleton University</h3>
<span class="subtitle"
>September 2025 to Present - Ottawa, ON</span
>
</div>
<h3 class="status">IN PROGRESS</h3>
</div>
<div class="body">
<p>Bachelor of Arts (Honours)</p>
<ul>
<li>Major in Psychology</li>
<li>
[Intended] Minor in Women's and Gender Studies
</li>
<li>
Concentration in Social/Personality Psychology
</li>
</ul>
</div>
</div>
<div class="chunk">
<div class="header">
<div>
<h3 class="name">Osgoode Township High School</h3>
<span class="subtitle"
>September 2021 to 2025 - Ottawa, ON</span
>
</div>
</div>
<div class="body">
<p>Gr. 9 to 12</p>
<ul>
<li>French Immersion Studies</li>
</ul>
</div>
</div>
<div class="chunk">
<div class="header">
<div>
<h3 class="name">Air Cadets, Squadron 742</h3>
<span class="subtitle"
>November 2019 to September 2022 - Ottawa,
ON</span
>
</div>
</div>
<div class="body">
<p>Sergeant</p>
<ul>
<li>Drone Pilot Training Course (August 2022)</li>
<li>Cadet Actitivy Program (August 2022)</li>
<li>Poppy Drive (November 2021)</li>
<li>Music (June - July 2021)</li>
<li>Music (March 2021)</li>
<li>Music (August 2020)</li>
<li>Web Programming (April 2020)</li>
<li>Advanced Cybertraining Course (August 2020)</li>
<li>
Cadet Band Member (September 2020 - February
2022)
</li>
</ul>
</div>
</div>
<h3 class="early_history">
Earlier history available by request.
</h3>
</div>
</div> </div>
</div> </div>
<div class="layout_row"> <!-- Education -->
<!-- Awards --> <div class="item education">
<div class="item awards"> <h2 class="title">Education</h2>
<h2 class="title">Awards</h2> <div class="section_list">
<div class="chunk_list"> <section>
<div class="chunk"> <header>
<div class="header"> <div>
<div> <h3 class="name">Carleton University</h3>
<h3 class="name">Ontario Scholar</h3> <span class="subtitle"
<span class="subtitle" >September 2025 to Present - Ottawa, ON</span
>Obtained an average of at least eighty percent >
in any six applicable Grade 12 courses.</span
>
</div>
</div> </div>
<h3 class="status">IN PROGRESS</h3>
</header>
<div class="body">
<p>Bachelor of Arts (Honours)</p>
<ul>
<li>Major in Psychology</li>
<li>[Intended] Minor in Women's and Gender Studies</li>
<li>Concentration in Social/Personality Psychology</li>
</ul>
</div> </div>
<div class="chunk"> </section>
<div class="header"> <section>
<div> <header>
<h3 class="name">Silver Medalist</h3> <div>
<span class="subtitle">Average over 90%</span> <h3 class="name">Osgoode Township High School</h3>
</div> <span class="subtitle"
<h3 class="status">x2</h3> >September 2021 to 2025 - Ottawa, ON</span
>
</div> </div>
</header>
<div class="body">
<p>Gr. 9 to 12</p>
<ul>
<li>French Immersion Studies</li>
</ul>
</div> </div>
<h3 class="early_history"> </section>
Queries about other awards available by request. <section>
</h3> <header>
</div> <div>
</div> <h3 class="name">Air Cadets, Squadron 742</h3>
<!-- Certifications --> <span class="subtitle"
<div class="item certifications"> >November 2019 to September 2022 - Ottawa, ON</span
<h2 class="title">Certifications and Diplomas</h2> >
<div class="chunk_list">
<div class="chunk">
<div class="header">
<h3 class="name">Ontario Secondary School Diploma</h3>
</div> </div>
</header>
<div class="body">
<p>Sergeant</p>
<ul>
<li>Drone Pilot Training Course (August 2022)</li>
<li>Cadet Actitivy Program (August 2022)</li>
<li>Poppy Drive (November 2021)</li>
<li>Music (June - July 2021)</li>
<li>Music (March 2021)</li>
<li>Music (August 2020)</li>
<li>Web Programming (April 2020)</li>
<li>Advanced Cybertraining Course (August 2020)</li>
<li>
Cadet Band Member (September 2020 - February 2022)
</li>
</ul>
</div> </div>
<div class="chunk"> </section>
<div class="header"> <h3 class="early_history">Earlier history available by request.</h3>
<h3 class="name">DELF</h3>
<h3 class="status">Niveau B2</h3>
</div>
</div>
<div class="chunk">
<div class="header">
<h3 class="name">Red Cross Swimming</h3>
<h3 class="status">Level 10</h3>
</div>
</div>
<div class="chunk">
<div class="header">
<h3 class="name">Canadian Firearms Safety Course</h3>
<h3 class="status">PAL</h3>
</div>
</div>
<h3 class="early_history">
Queries about certifications available by request.
</h3>
</div>
</div> </div>
</div> </div>
<div class="layout_row software_row"> </div>
<!-- Software and Prog. Languages --> <div class="layout_row">
<!-- Software --> <!-- Awards -->
<div class="item software"> <div class="item awards">
<h2 class="title">Software</h2> <h2 class="title">Awards</h2>
<div class="quick_links"> <div class="section_list">
<div> <section>
<ion-icon <header>
name="cube-outline" <div>
class="three_dimensional_printing" <h3 class="name">Ontario Scholar</h3>
></ion-icon> <span class="subtitle"
<p>3D Printing</p> >Obtained an average of at least eighty percent in
</div> any six applicable Grade 12 courses.</span
<div> >
<ion-icon name="logo-android" class="android"></ion-icon> </div>
<p>Android</p> </header>
</div> </section>
<a href="https://anubis.techaro.lol/"> <section>
<ion-icon name="globe-outline" class="anubis"></ion-icon> <header>
<p>Anubis</p> <div>
</a> <h3 class="name">Silver Medalist</h3>
<a href="https://www.blender.org/"> <span class="subtitle">Average over 90%</span>
<ion-icon name="cube-outline" class="blender"></ion-icon> </div>
<p>Blender</p> <h3 class="status">x2</h3>
</a> </header>
<div> </section>
<ion-icon <h3 class="early_history">
name="play-skip-forward-outline" Queries about other awards available by request.
class="vectric_aspire" </h3>
></ion-icon> </div>
<p>CNC Machining</p> </div>
</div> <!-- Certifications -->
<div class="item certifications">
<h2 class="title">Certifications and Diplomas</h2>
<div class="section_list">
<section>
<header>
<h3 class="name">Ontario Secondary School Diploma</h3>
</header>
</section>
<section>
<header>
<h3 class="name">DELF</h3>
<h3 class="status">Niveau B2</h3>
</header>
</section>
<section>
<header>
<h3 class="name">Red Cross Swimming</h3>
<h3 class="status">Level 10</h3>
</header>
</section>
<section>
<header>
<h3 class="name">Canadian Firearms Safety Course</h3>
<h3 class="status">PAL</h3>
</header>
</section>
<h3 class="early_history">
Queries about certifications available by request.
</h3>
</div>
</div>
</div>
<div class="layout_row software_row">
<!-- Software and Prog. Languages -->
<!-- Software -->
<div class="item software">
<h2 class="title">Software</h2>
<div class="quick_links">
<div>
<ion-icon name="cube-outline" class="magenta"></ion-icon>
<p>3D Printing</p>
</div>
<div>
<ion-icon name="logo-android" class="green"></ion-icon>
<p>Android</p>
</div>
<a href="https://anubis.techaro.lol/">
<ion-icon name="globe-outline" class="green"></ion-icon>
<p>Anubis</p>
</a>
<a href="https://www.blender.org/">
<ion-icon name="cube-outline" class="orange"></ion-icon>
<p>Blender</p>
</a>
<div>
<ion-icon
name="play-skip-forward-outline"
class="red r90"
></ion-icon>
<p>CNC Machining</p>
</div>
<a href="https://www.docker.com/"> <a href="https://www.docker.com/">
<ion-icon name="logo-docker" class="docker"></ion-icon> <ion-icon name="logo-docker" class="docker"></ion-icon>
<p>Docker</p> <p>Docker</p>
</a> </a>
<a href="https://www.gimp.org/"> <a href="https://www.gimp.org/">
<ion-icon name="image-outline" class="gimp"></ion-icon> <ion-icon name="image-outline" class="magenta"></ion-icon>
<p>GIMP</p> <p>GIMP</p>
</a> </a>
<a href="https://git-scm.com/"> <a href="https://git-scm.com/">
<ion-icon name="git-branch-outline" class="git"></ion-icon> <ion-icon name="git-branch-outline" class="orange"></ion-icon>
<p>Git</p> <p>Git</p>
</a> </a>
<a href="https://gitea.cutieguwu.ca"> <a href="https://gitea.cutieguwu.ca">
<ion-icon name="cafe-outline" class="gitea"></ion-icon> <ion-icon name="cafe-outline" class="green"></ion-icon>
<p>Gitea</p> <p>Gitea</p>
</a> </a>
<a href="https://github.com/Cutieguwu"> <a href="https://github.com/Cutieguwu">
<ion-icon name="logo-github" class="github"></ion-icon> <ion-icon name="logo-github" class="blue"></ion-icon>
<p>Github</p> <p>Github</p>
</a> </a>
<a href="https://www.apple.com/ca/os/ios/"> <a href="https://www.apple.com/ca/os/ios/">
<ion-icon name="logo-apple" class="ios"></ion-icon> <ion-icon name="logo-apple" class="white"></ion-icon>
<p>iOS</p> <p>iOS</p>
</a> </a>
<a href="https://www.libreoffice.org/"> <a href="https://www.libreoffice.org/">
<ion-icon <ion-icon name="document-outline" class="green"></ion-icon>
name="document-outline" <p>LibreOffice</p>
class="libreoffice" </a>
></ion-icon> <a href="https://www.kernel.org/category/about.html">
<p>LibreOffice</p> <ion-icon name="logo-tux" class="white"></ion-icon>
</a> <p>Linux</p>
<a href="https://www.kernel.org/category/about.html"> </a>
<ion-icon name="logo-tux" class="linux"></ion-icon> <a href="https://www.apple.com/ca/os/macos/">
<p>Linux</p> <ion-icon name="logo-apple" class="white"></ion-icon>
</a> <p>MacOS</p>
<a href="https://www.apple.com/ca/os/macos/"> </a>
<ion-icon name="logo-apple" class="macos"></ion-icon> <a href="https://www.office.com/">
<p>MacOS</p> <ion-icon name="apps-outline" class="orange"></ion-icon>
</a> <p>MS Office</p>
<a href="https://www.office.com/"> </a>
<ion-icon name="apps-outline" class="ms_office"></ion-icon> <a href="https://www.microsoft.com/en-ca/windows">
<p>MS Office</p> <ion-icon name="logo-windows" class="blue"></ion-icon>
</a> <p>MS Windows</p>
<a href="https://www.microsoft.com/en-ca/windows"> </a>
<ion-icon name="logo-windows" class="ms_windows"></ion-icon> <a href="https://musescore.org/en">
<p>MS Windows</p> <ion-icon name="musical-notes" class="cyan"></ion-icon>
</a> <p>MuseScore Studio</p>
<a href="https://musescore.org/en"> </a>
<ion-icon name="musical-notes" class="musescore"></ion-icon> <a href="https://nextcloud.com/">
<p>MuseScore Studio</p> <ion-icon name="apps-outline" class="cyan"></ion-icon>
</a> <p>Nextcloud</p>
<a href="https://nextcloud.com/"> </a>
<ion-icon name="apps-outline" class="nextcloud"></ion-icon> <a href="https://nginx.org/en/">
<p>Nextcloud</p> <ion-icon name="globe-outline" class="green"></ion-icon>
</a> <p>Nginx</p>
<a href="https://nginx.org/en/"> </a>
<ion-icon name="globe-outline" class="nginx"></ion-icon> <a href="https://obsproject.com/">
<p>Nginx</p> <ion-icon name="aperture-outline" class="white"></ion-icon>
</a> <p>OBS</p>
<a href="https://obsproject.com/"> </a>
<ion-icon name="aperture-outline" class="obs"></ion-icon> <a href="https://www.adobe.com/ca/products/photoshop.html">
<p>OBS</p> <ion-icon name="image-outline" class="blue"></ion-icon>
</a> <p>Photoshop</p>
<a href="https://www.adobe.com/ca/products/photoshop.html"> </a>
<ion-icon name="image-outline" class="photoshop"></ion-icon> <a href="https://www.prusa3d.com/page/prusaslicer_424/">
<p>Photoshop</p> <ion-icon name="layers-outline" class="orange"></ion-icon>
</a> <p>PrusaSlicer</p>
<a href="https://www.prusa3d.com/page/prusaslicer_424/"> </a>
<ion-icon <a
name="layers-outline" href="https://shopbottools.com/support-resources/control-software/"
class="prusaslicer" >
></ion-icon> <ion-icon name="keypad-outline" class="blue"></ion-icon>
<p>PrusaSlicer</p> <p>ShopBot Control Software</p>
</a> </a>
<a <a href="https://www.vectric.com/products/aspire/">
href="https://shopbottools.com/support-resources/control-software/" <ion-icon
> name="play-skip-forward-outline"
<ion-icon class="red r90"
name="keypad-outline" ></ion-icon>
class="shopbot_control_software" <p>Vectric Aspire</p>
></ion-icon> </a>
<p>ShopBot Control Software</p> <a href="https://www.zotero.org/">
</a> <ion-icon
<a href="https://www.vectric.com/products/aspire/"> name="document-attach-outline"
<ion-icon class="orange"
name="play-skip-forward-outline" ></ion-icon>
class="vectric_aspire" <p>Zotero</p>
></ion-icon> </a>
<p>Vectric Aspire</p>
</a>
<a href="https://www.zotero.org/">
<ion-icon
name="document-attach-outline"
class="zotero"
></ion-icon>
<p>Zotero</p>
</a>
</div>
</div> </div>
<!-- Prog. Languages --> </div>
<div class="item prog_languages"> <!-- Prog. Languages -->
<h2 class="title">Prog. Languages</h2> <div class="item prog_languages">
<div class="quick_links"> <h2 class="title">Prog. Languages</h2>
<a href="https://asciidoc.org/"> <div class="quick_links">
<ion-icon <a href="https://asciidoc.org/">
name="document-text-outline" <ion-icon name="document-text-outline" class="cyan"></ion-icon>
class="asciidoc" <p>AsciiDoc</p>
></ion-icon> </a>
<p>AsciiDoc</p> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">
</a> <ion-icon name="logo-css3" class="purple"></ion-icon>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS"> <p>CSS</p>
<ion-icon name="logo-css3" class="css"></ion-icon> </a>
<p>CSS</p> <a href="https://docs.docker.com/compose/">
</a> <ion-icon name="logo-docker" class="docker"></ion-icon>
<a href="https://docs.docker.com/compose/"> <p>Docker Compose</p>
<ion-icon name="logo-docker" class="docker"></ion-icon> </a>
<p>Docker Compose</p> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">
</a> <ion-icon name="logo-html5" class="orange"></ion-icon>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML"> <p>HTML</p>
<ion-icon name="logo-html5" class="html"></ion-icon> </a>
<p>HTML</p> <a href="https://www.json.org/json-en.html">
</a> <ion-icon name="shapes-outline" class="cyan"></ion-icon>
<a href="https://www.json.org/json-en.html"> <p>JSON</p>
<ion-icon name="shapes-outline" class="json"></ion-icon> </a>
<p>JSON</p> <a href="https://www.markdownguide.org/">
</a> <ion-icon name="logo-markdown" class="indigo"></ion-icon>
<a href="https://www.markdownguide.org/"> <p>Markdown</p>
<ion-icon name="logo-markdown" class="markdown"></ion-icon> </a>
<p>Markdown</p> <a href="https://nginx.org/en/docs/">
</a> <ion-icon name="globe-outline" class="green"></ion-icon>
<a href="https://nginx.org/en/docs/"> <p>Nginx</p>
<ion-icon name="globe-outline" class="nginx"></ion-icon> </a>
<p>Nginx</p> <a href="https://www.python.org/">
</a> <ion-icon name="logo-python" class="blue"></ion-icon>
<a href="https://www.python.org/"> <p>Python</p>
<ion-icon name="logo-python" class="python"></ion-icon> </a>
<p>Python</p> <a href="https://github.com/ron-rs/ron">
</a> <ion-icon name="shapes-outline" class="orange"></ion-icon>
<a href="https://github.com/ron-rs/ron"> <p>RON</p>
<ion-icon name="shapes-outline" class="ron"></ion-icon> </a>
<p>RON</p> <a href="https://www.rust-lang.org/">
</a> <ion-icon name="cog-outline" class="orange"></ion-icon>
<a href="https://www.rust-lang.org/"> <p>Rust</p>
<ion-icon name="cog-outline" class="rust"></ion-icon> </a>
<p>Rust</p> <a href="https://sass-lang.com/">
</a> <ion-icon name="logo-sass" class="magenta"></ion-icon>
<a href="https://sass-lang.com/"> <p>SCSS</p>
<ion-icon name="logo-sass" class="scss"></ion-icon> </a>
<p>SCSS</p> <a href="https://toml.io/en/">
</a> <ion-icon name="shapes-outline" class="orange"></ion-icon>
<a href="https://toml.io/en/"> <p>TOML</p>
<ion-icon name="shapes-outline" class="toml"></ion-icon> </a>
<p>TOML</p> <a href="https://www.gnu.org/software/bash/manual/bash.html">
</a> <ion-icon name="terminal-outline" class="green"></ion-icon>
<a href="https://www.gnu.org/software/bash/manual/bash.html"> <p>[Bash] Shell</p>
<ion-icon name="terminal-outline" class="shell"></ion-icon> </a>
<p>[Bash] Shell</p> <a href="https://yaml.org/">
</a> <ion-icon name="shapes-outline" class="yellow"></ion-icon>
<a href="https://yaml.org/"> <p>YAML</p>
<ion-icon name="shapes-outline" class="yaml"></ion-icon> </a>
<p>YAML</p>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<include src="includes/tailer.html" />
</div> </div>
<div class="pane_spacer pane_details"> <include src="includes/tailer.html" />
<div class="spacer_container spacer_contact"> </main>
<h2>Contact Info</h2> <div class="pane spacer pane_details">
<div class="chunk_list contact_info"> <div class="spacer_container">
<div class="chunk"> <h2>Contact Info</h2>
<div class="header"> <div class="section_list">
<div> <section>
<h3 class="name"> <header>
<a href="mailto:olivia.a.brooks77@gmail.com"> Email </a> <div>
</h3> <h3 class="name">
<span class="subtitle">olivia.a.brooks77@gmail.com</span> <a href="mailto:olivia.a.brooks77@gmail.com"> Email </a>
</div> </h3>
<span class="subtitle">olivia.a.brooks77@gmail.com</span>
</div> </div>
</div> </header>
</div> </section>
</div> </div>
<div class="spacer_container spacer_contact"> </div>
<h2>Spoken Languages</h2> <div class="spacer_container">
<div class="chunk_list contact_info"> <h2>Spoken Languages</h2>
<div class="chunk"> <div class="section_list">
<div class="header"> <section>
<div> <header>
<h3 class="name">English</h3> <div>
<span class="subtitle">Fluent</span> <h3 class="name">English</h3>
</div> <span class="subtitle">Fluent</span>
</div> </div>
</div> </header>
<div class="chunk"> </section>
<div class="header"> <section>
<div> <header>
<h3 class="name">Français</h3> <div>
<span class="subtitle">DELF B2</span> <h3 class="name">Français</h3>
</div> <span class="subtitle">DELF B2</span>
</div> </div>
</div> </header>
</div> </section>
</div> </div>
<div class="spacer_container spacer_contact"> </div>
<h2>References</h2> <div class="spacer_container">
<div class="chunk_list contact_info"> <h2>References</h2>
<div class="chunk"> <div class="section_list">
<div class="header"> <section>
<div> <header>
<h3 class="name">By Request</h3> <div>
</div> <h3 class="name">By Request</h3>
</div> </div>
</div> </header>
</div> </section>
</div> </div>
</div> </div>
</div> </div>

2
src/style.scss
View File

@@ -1,3 +1,3 @@
@use "partials/a_common"; @use "partials/a_common";
@use "partials/pane_main"; @use "partials/page_resume";

40
src/templates/blog_post.html
View File

@@ -1,40 +0,0 @@
<!doctype html>
<html lang="en-ca">
<head>
<title>Blog Post Template | Cutieguwu</title>
<include src="includes/meta.html" />
</head>
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="header">You are here:</h4>
<h5 class="page">Blog - Blog Post Template</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_blog">
<div class="body">
<div class="header">
<h1 class="title">Blog Post Template</h1>
<p class="date">Posted: 01 January, 2025</p>
<p class="date">Last Edited: 01 January, 2025</p>
</div>
<div class="body">
<p>Blog Post Content</p>
</div>
</div>
<include src="includes/tailer.html" />
</div>
<div class="pane_spacer">
<include src="./includes/blog_recent_posts.html" />
<div class="spacer_container"><p>#AD</p></div>
</div>
</div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" />
</body>
</html>

36
src/templates/error.html
View File

@@ -1,36 +0,0 @@
<!doctype html>
<html lang="en-ca">
<head>
<title>Error Template | Cutieguwu</title>
<include src="includes/meta.html" />
</head>
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="header">You are here:</h4>
<h5 class="page">Error Template</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_error">
<div class="body">
<h1>Error Code</h1>
<h2>Error Title</h2>
<hr />
<p>Error details and explaination.</p>
</div>
<include src="includes/tailer.html" />
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div>
</div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" />
</body>
</html>

31
src/templates/main.html
View File

@@ -1,31 +0,0 @@
<!doctype html>
<html lang="en-ca">
<head>
<title>Main Template | Cutieguwu</title>
<include src="includes/meta.html" />
</head>
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="header">You are here:</h4>
<h5 class="page">Main Template</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<div class="body"></div>
<include src="includes/tailer.html" />
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div>
</div>
<include src="includes/footer.html" />
<include src="includes/scripts.html" />
</body>
</html>