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

10
src/about.html
View File

@@ -6,8 +6,7 @@
<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">
@@ -16,15 +15,14 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_main"> <main class="pane">
<div class="body"><p>This page has not yet been filled out. Sorry!</p></div> <div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
<include src="includes/tailer.html" /> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

10
src/acknowledgements.html
View File

@@ -6,8 +6,7 @@
<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">
@@ -16,7 +15,7 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_main"> <main class="pane">
<div class="body"> <div class="body">
<p>There are currently no acknowledgements</p> <p>There are currently no acknowledgements</p>
<p>In terms of security, hopefully that means I'm doing a good-ish job.</p> <p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
@@ -26,12 +25,11 @@
</p> </p>
</div> </div>
<include src="includes/tailer.html" /> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

14
src/blog/index.html
View File

@@ -6,8 +6,7 @@
<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">
@@ -16,24 +15,23 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_main"> <main class="pane">
<div class="body"> <div class="body">
<div class="header"> <header>
<h1 class="title">Blog</h1> <h1 class="title">Blog</h1>
<p class="date">Last Edited: 03 August, 2025</p> <p class="date">Last Edited: 03 August, 2025</p>
</div> </header>
<div class="body"> <div class="body">
<h2>I have an RSS feed!</h2> <h2>I have an RSS feed!</h2>
<p>Just look for the RSS Quick Link in the Navigation pane.</p> <p>Just look for the RSS Quick Link in the Navigation pane.</p>
</div> </div>
</div> </div>
<include src="includes/tailer.html" /> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<include src="./includes/blog_recent_posts.html" /> <include src="./includes/blog_recent_posts.html" />
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

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

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

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

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

2
src/blog/style.scss
View File

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

225
src/disclosure.html
View File

@@ -6,8 +6,7 @@
<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">
@@ -16,19 +15,19 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_main"> <main class="pane">
<div class="body"> <div class="body">
<div class="header"> <header>
<h1 class="title">Disclosure</h1> <h1 class="title">Disclosure</h1>
<p class="date">Last Edited: 01 August, 2025</p> <p class="date">Last Edited: 01 August, 2025</p>
</div> </header>
<div class="body"> <div class="body">
<div class="layout_row"> <div class="layout_row">
<div class="item"> <div class="item">
<h2 class="title">Website Security</h2> <h2 class="title">Website Security</h2>
<p> <p>
This website uses a number of security features, most of which This website uses a number of security features, most of which are
are built into your browser, to protect my and your: built into your browser, to protect my and your:
</p> </p>
<ul> <ul>
<li>Infrastructure</li> <li>Infrastructure</li>
@@ -36,80 +35,81 @@
<li>Experience</li> <li>Experience</li>
</ul> </ul>
<p> <p>
You can see some of the main methods that this website uses You can see some of the main methods that this website uses below:
below:
</p> </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> </header>
<div class="body"> <div class="body">
<p> <p>
This website is protected by a screening utility This website is protected by a screening utility known
known as as
<a href="https://anubis.techaro.lol/" class="italic" <a href="https://anubis.techaro.lol/"
>Anubis</a ><cite>Anubis</cite></a
>. You may also have heard of this program as >. You may also have heard of this program as
<span class="italic">BotStopper</span> for those who <cite>BotStopper</cite> for those who purchase a
purchase a commercial license because they somehow commercial license because they somehow can't live with
can't live with a cute anime girl showing up on a cute anime girl showing up on their websites. UNESCO
their websites. UNESCO notably don't have a problem notably don't have a problem with that, and proudly
with that, and proudly present an anime girl as of present an anime girl as of writing this.
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
<a actively fund the project.
href="https://www.youtube.com/watch?v=YisGpdPjYM8"
class="italic"
>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>
<p> <p>
Additionally, if you have concerns about the Despite what some fools at the FSF figure, Anubis IS NOT
legality of my use of Anubis, please see malware. See:
<a <a href="https://www.youtube.com/watch?v=YisGpdPjYM8"
href="https://github.com/TecharoHQ/anubis/issues/50" ><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 >Anubis Issue #50</a
> >
where concerns were looked into. where concerns were looked into.
</p> </p>
<p> <p>
Now, if you have a moral issue with this project, Now, if you have a moral issue with this project, you
you may do one of two things (because adjusting your may do one of two things (because adjusting your UA will
UA will just make me block the UA, or add a complete just make me block the UA, or add a complete catch-all
catch-all rule): rule):
</p> </p>
<ol> <ol>
<li> <li>
Don't allow JavaScript to run. (Have fun making Don't allow JavaScript to run. (Have fun making this
this work) work)
</li> </li>
<li>Just don't use my website.</li> <li>Just don't use my website.</li>
</ol> </ol>
<p> <p>
If you experience issues with Anubis blocking you, If you experience issues with Anubis blocking you, which
which presumably hasn't happened on your way to this presumably hasn't happened on your way to this page, you
page, you can email me with details. DO NOT bother can email me with details. DO NOT bother the main
the main project as it may be an issue with a project as it may be an issue with a screening rule that
screening rule that I've invoked. I've invoked.
</p> </p>
<p> <p>
If you do wish to raise an issue with the Anubis If you do wish to raise an issue with the Anubis dev(s),
dev(s), PLEASE DO NOT DO SOMETHING LIKE THIS: PLEASE DO NOT DO SOMETHING LIKE THIS:
</p> </p>
<ul> <ul>
<li> <li>
@@ -132,20 +132,20 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </section>
<div class="chunk"> <section>
<div class="header"> <header>
<div> <div>
<h3 class="name">Content Security Policy (CSP)</h3> <h3 class="name">Content Security Policy (CSP)</h3>
</div> </div>
</div> </header>
<div class="body"> <div class="body">
<p> <p>
This website, unlike a scary number of sites This website, unlike a scary number of sites (including
(including google.com and microsoft.com as of google.com and microsoft.com as of writing) has a CSP
writing) has a CSP configured. This helps prevent or configured. This helps prevent or mitigate a number of
mitigate a number of possible attacks including possible attacks including cross-site scripting and
cross-site scripting and clickjacking. clickjacking.
</p> </p>
<p> <p>
Further Reading: Further Reading:
@@ -155,26 +155,24 @@
> >
</p> </p>
</div> </div>
</div> </section>
<div class="chunk"> <section>
<div class="header"> <header>
<div> <div>
<h3 class="name"> <h3 class="name">
HTTP Strict Transport Security (HSTS) HTTP Strict Transport Security (HSTS)
</h3> </h3>
</div> </div>
</div> </header>
<div class="body"> <div class="body">
<p> <p>
This website has a HSTS policy which indicates to This website has a HSTS policy which indicates to your
your browser to use a secure connection when browser to use a secure connection when connecting.
connecting.
</p> </p>
<p> <p>
Additionally, the server will force redirect ALL Additionally, the server will force redirect ALL
connections over to HTTPS for any browsers which do connections over to HTTPS for any browsers which do not
not use this header or have a HTTPS-only mode use this header or have a HTTPS-only mode enabled.
enabled.
</p> </p>
<p> <p>
Further Reading: Further Reading:
@@ -184,13 +182,13 @@
> >
</p> </p>
</div> </div>
</div> </section>
<div class="chunk"> <section>
<div class="header"> <header>
<div> <div>
<h3 class="name">Other Security Headers</h3> <h3 class="name">Other Security Headers</h3>
</div> </div>
</div> </header>
<div class="body"> <div class="body">
<p>Some include:</p> <p>Some include:</p>
<ul> <ul>
@@ -201,72 +199,69 @@
<li>Referrer-Policy</li> <li>Referrer-Policy</li>
</ul> </ul>
</div> </div>
</div> </section>
<div class="chunk"> <section>
<div class="header"> <header>
<div> <div>
<h3 class="name">Security.txt</h3> <h3 class="name">Security.txt</h3>
</div> </div>
</div> </header>
<div class="body"> <div class="body">
<p> <p>
This file offers information to security researchers This file offers information to security researchers to
to silently report any issues they find so that I silently report any issues they find so that I can
can resolve them. resolve them.
</p> </p>
</div> </div>
</div> </section>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<h2 class="title">Cookies</h2> <h2 class="title">Cookies</h2>
<p> <p>
This website only leaves cookies that are required for the This website only leaves cookies that are required for the website's
website's functioning. I do not place any trackers on your functioning. I do not place any trackers on your system.
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> </header>
<div class="body"> <div class="body">
<p> <p>
This website does utilize a cookie. This cookie is This website does utilize a cookie. This cookie is made
made by Anubis to keep your system from having to by Anubis to keep your system from having to pass the
pass the proof-of-work check every time you request proof-of-work check every time you request a resource
a resource from this site. from this site.
</p> </p>
<p> <p>
THEORETICALLY, this cookie, as with any JavaScript THEORETICALLY, this cookie, as with any JavaScript
cookie, cookie,
<span class="italic">can</span> be used to track <em>can</em> be used to track you.
you.
</p> </p>
<p> <p>
HOWEVER, I do not use it for tracking, Anubis does HOWEVER, I do not use it for tracking, Anubis does not
not use it for tracking, and there is no evidence use it for tracking, and there is no evidence that 3rd
that 3rd parties are abusing the cookie. There are parties are abusing the cookie. There are far more
far more attractive targets. attractive targets.
</p> </p>
<p> <p>
IF this becomes an issue, until the lead IF this becomes an issue, until the lead developer(s)
developer(s) and/or community can find a solution, and/or community can find a solution, Anubis will be
Anubis will be reconfigured to send out challenges reconfigured to send out challenges even more
even more frequently, and an advisory notice to wipe frequently, and an advisory notice to wipe your browser
your browser cookies at the end of your session will cookies at the end of your session will be made.
be made.
</p> </p>
<p> <p>
Under the current configuration, Anubis' cookies are Under the current configuration, Anubis' cookies are
@@ -274,27 +269,25 @@
necessarily gone from your system. necessarily gone from your system.
</p> </p>
<p> <p>
<a <a href="https://github.com/TecharoHQ/anubis/issues/50"
href="https://github.com/TecharoHQ/anubis/issues/50"
>Anubis Issue #50</a >Anubis Issue #50</a
> >
briefly looked into the possibility of abuse via the briefly looked into the possibility of abuse via the
cookie. cookie.
</p> </p>
</div> </div>
</div> </section>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<include src="includes/tailer.html" /> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

20
src/errors/400.html
View File

@@ -6,8 +6,7 @@
<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">
@@ -16,23 +15,24 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_error"> <main class="pane error">
<div class="body"> <div class="body">
<h1>400</h1> <header>
<h1 class="title">400</h1>
<h2>Bad Request!</h2> <h2>Bad Request!</h2>
</header>
<hr /> <hr />
<p> <p>
The server cannot or will not process this request due to apparent The server cannot or will not process this request due to apparent client-side
client-side error or deception. error or deception.
</p> </p>
</div> </div>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

16
src/errors/401.html
View File

@@ -6,8 +6,7 @@
<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">
@@ -16,18 +15,19 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_error"> <main class="pane error">
<div class="body"> <div class="body">
<h1>401</h1> <header>
<h1 class="title">401</h1>
<h2>Unauthorized!</h2> <h2>Unauthorized!</h2>
</header>
</div> </div>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

16
src/errors/403.html
View File

@@ -6,8 +6,7 @@
<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">
@@ -16,20 +15,21 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_error"> <main class="pane error">
<div class="body"> <div class="body">
<h1>403</h1> <header>
<h1 class="title">403</h1>
<h2>Forbidden!</h2> <h2>Forbidden!</h2>
</header>
<hr /> <hr />
<p>The server is refusing to act upon your request.</p> <p>The server is refusing to act upon your request.</p>
</div> </div>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

16
src/errors/404.html
View File

@@ -6,8 +6,7 @@
<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">
@@ -16,18 +15,19 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_error"> <main class="pane error">
<div class="body"> <div class="body">
<h1>404</h1> <header>
<h1 class="title">404</h1>
<h2>Page not found!</h2> <h2>Page not found!</h2>
</header>
</div> </div>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

16
src/errors/500.html
View File

@@ -6,8 +6,7 @@
<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">
@@ -16,20 +15,21 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_error"> <main class="pane error">
<div class="body"> <div class="body">
<h1>500</h1> <header>
<h1 class="title">500</h1>
<h2>Internal Server Error!</h2> <h2>Internal Server Error!</h2>
</header>
<hr /> <hr />
<p>The server has no clue WTF happened here.</p> <p>The server has no clue WTF happened here.</p>
</div> </div>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

16
src/errors/501.html
View File

@@ -6,8 +6,7 @@
<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">
@@ -16,20 +15,21 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_error"> <main class="pane error">
<div class="body"> <div class="body">
<h1>501</h1> <header>
<h1 class="title">501</h1>
<h2>Not Implemented!</h2> <h2>Not Implemented!</h2>
</header>
<hr /> <hr />
<p>Whatever you just tried doing, the server doesn't know how to handle it.</p> <p>Whatever you just tried doing, the server doesn't know how to handle it.</p>
</div> </div>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

16
src/errors/502.html
View File

@@ -6,8 +6,7 @@
<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">
@@ -16,20 +15,21 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_error"> <main class="pane error">
<div class="body"> <div class="body">
<h1>502</h1> <header>
<h1 class="title">502</h1>
<h2>Bad Gateway!</h2> <h2>Bad Gateway!</h2>
</header>
<hr /> <hr />
<p>This service may be offline.</p> <p>This service may be offline.</p>
</div> </div>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

16
src/errors/503.html
View File

@@ -6,8 +6,7 @@
<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">
@@ -16,20 +15,21 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_error"> <main class="pane error">
<div class="body"> <div class="body">
<h1>503</h1> <header>
<h1 class="title">503</h1>
<h2>Service Unavailable!</h2> <h2>Service Unavailable!</h2>
</header>
<hr /> <hr />
<p>The server may be overloaded or down for maintenance.</p> <p>The server may be overloaded or down for maintenance.</p>
</div> </div>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

16
src/errors/504.html
View File

@@ -6,8 +6,7 @@
<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">
@@ -16,23 +15,24 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_error"> <main class="pane error">
<div class="body"> <div class="body">
<h1>504</h1> <header>
<h1 class="title">504</h1>
<h2>Gateway Timeout!</h2> <h2>Gateway Timeout!</h2>
</header>
<hr /> <hr />
<p> <p>
The server acted as a proxy and didn't receive a timely response from the The server acted as a proxy and didn't receive a timely response from the
upstream server. upstream server.
</p> </p>
</div> </div>
<p class="tailer">Copyright (c) 2025 Olivia Brooks</p> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

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>

27
src/index.html
View File

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

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

@@ -6,8 +6,7 @@
<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">
@@ -16,15 +15,14 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_main"> <main class="pane">
<div class="body"><p>This page has not yet been filled out. Sorry!</p></div> <div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
<include src="includes/tailer.html" /> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

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

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

10
src/minecraft/index.html
View File

@@ -6,8 +6,7 @@
<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">
@@ -16,15 +15,14 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_main"> <main class="pane">
<div class="body"><p>This page has not yet been filled out. Sorry!</p></div> <div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
<include src="includes/tailer.html" /> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

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

@@ -6,8 +6,7 @@
<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">
@@ -16,15 +15,14 @@
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_main"> <main class="pane">
<div class="body"><p>This page has not yet been filled out. Sorry!</p></div> <div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
<include src="includes/tailer.html" /> <include src="includes/tailer.html" />
</div> </main>
<div class="pane_spacer"> <div class="pane spacer">
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div> <div class="spacer_container"><p>#AD</p></div>
</div> </div>
</div>
<include src="includes/footer.html" /> <include src="includes/footer.html" />
<include src="includes/scripts.html" /> <include src="includes/scripts.html" />
</body> </body>

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);

22
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,7 +20,8 @@
} }
} }
.nav_item { .menu {
.item {
// 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;
@@ -31,28 +32,31 @@
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); transition: var(--transition-cut);
.nav_title, .title,
ion-icon { ion-icon {
color: var(--highlight-hover); color: var(--highlight-hover);
transition: var(--transition-cut); transition: var(--transition-cut);
} }
}
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.nav_item { .menu {
.item {
padding: var(--padding-mobile); padding: var(--padding-mobile);
background-color: var(--background-1); 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,

45
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%;
.body > .body {
padding: var(--spacing-small); padding: var(--spacing-small);
} }
}
} }

17
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,
.tailer {
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
padding: var(--spacing-small);
text-align: center; 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 {
color: var(--white-1);
} }
} }
> footer {
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%;
}
} }

341
src/resume.html
View File

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