Add blog to website.
This commit is contained in:
35
src/blog.html
Normal file
35
src/blog.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en-ca">
|
||||
<head>
|
||||
<title>Blog | Cutieguwu</title>
|
||||
<include src="includes/meta.html" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="viewport">
|
||||
<nav class="pane_nav">
|
||||
<include src="includes/nav_logo.html" />
|
||||
<include src="includes/nav_menu.html" />
|
||||
<div class="location">
|
||||
<h4 class="location_header">You are here:</h4>
|
||||
<h5 class="location_page">Blog</h5>
|
||||
</div>
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_main">
|
||||
<div class="main_body">
|
||||
<h1>Blog</h1>
|
||||
<h2>I have an RSS feed!</h2>
|
||||
<p>Just look for the RSS Quick Link in the Navigation pane.</p>
|
||||
</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>
|
||||
126
src/blog/0_divergent_pathways.html
Normal file
126
src/blog/0_divergent_pathways.html
Normal file
@@ -0,0 +1,126 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en-ca">
|
||||
<head>
|
||||
<title>Divergent Pathways | Cutieguwu</title>
|
||||
<include src="includes/meta.html" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="viewport">
|
||||
<nav class="pane_nav">
|
||||
<include src="includes/nav_logo.html" />
|
||||
<include src="includes/nav_menu.html" />
|
||||
<div class="location">
|
||||
<h4 class="location_header">You are here:</h4>
|
||||
<h5 class="location_page">Blog - Divergent Pathways</h5>
|
||||
</div>
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_blog">
|
||||
<div class="blog_body">
|
||||
<div class="header">
|
||||
<h1 class="title">Divergent Pathways</h1>
|
||||
<p class="date">Posted: 29 July, 2025</p>
|
||||
<p class="date">Last Edited: 29 July, 2025</p>
|
||||
</div>
|
||||
<div class="body">
|
||||
<p>I can't say that this is how I wanted to start my blog.</p>
|
||||
<p>
|
||||
Although, in all honesty, I didn't really have an idea for how I wanted
|
||||
it 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
|
||||
that inevitably would never come to light was something I knew I didn't
|
||||
want. I figured it more likely for me to have a semi-respectful rant
|
||||
about whatever's causing me to 'crash out' on that particular day. That
|
||||
would certainly be in character for me.
|
||||
</p>
|
||||
<p>
|
||||
But no. Instead, I'm starting my blog on one of the last things I ever
|
||||
expected to write about.
|
||||
</p>
|
||||
<p>Love.</p>
|
||||
<p>Or rather, the passing of it due to life.</p>
|
||||
<p>
|
||||
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
|
||||
of things, and we understood that we couldn't sustain our lives
|
||||
together. We're all still friends at the end.
|
||||
</p>
|
||||
<p>
|
||||
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;
|
||||
we went to the same school. The distance came more from our schedules
|
||||
and pathways. I have always been a relatively heavy academic. My parents
|
||||
and teachers certainly made sure of that, and ultimately helped lead me
|
||||
down a path of being the teacher's pet. Maybe I'll talk about my
|
||||
experiences and struggles related to that another time, but the short of
|
||||
it is that I am a high-acheiving workaholic as a result. My ex-boyfriend
|
||||
on the other hand, didn't have that kind of an experience, and
|
||||
ultimately was led down the college-level course stream in high school.
|
||||
</p>
|
||||
<p>
|
||||
Now, as I began to struggle in my fourth year, particularly with my
|
||||
mathematics continuing their downwards trend, I decided that the life of
|
||||
a software engineer wasn't for me. I turned around, almost on a dime,
|
||||
and set myself towards a career in Psychology. Now, on the surface, this
|
||||
may look like it would help with our scheduling issues, but no. While I
|
||||
was studying at school, and desperately trying to keep up my grades, my
|
||||
boyfriend would be doing a co-op elsewhere. Even when that ended at the
|
||||
end of the term, the problem remained. I was too much of a workaholic.
|
||||
</p>
|
||||
<p>
|
||||
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
|
||||
place for about a week. This time, we both kind of saw this coming.
|
||||
Perhaps that makes it easier, but it still sucks for both of us. And,
|
||||
why squander the motivation I have to better my self care, my habits,
|
||||
and thus myself? I'm about to go into my first year of university.
|
||||
Normally, I'm either scared of my inevitable death, or some past regret
|
||||
of my life that chooses to grip me. But now, I'm also anxious for the
|
||||
life ahead.
|
||||
</p>
|
||||
<p>
|
||||
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
|
||||
alone. I'm at a point in my life where dating is probably not a great
|
||||
idea for me. I struggle enough with burnout spells that adding
|
||||
heartbreak on top would likely kill my education.
|
||||
</p>
|
||||
<p>
|
||||
On top of that are my concerns with online dating. Aside from data
|
||||
privacy, breaches, and otherwise disgusting people who can't leave these
|
||||
projects to be a good part of the internet, are the risks with being
|
||||
trans. There are far too many stories, even if most of them are probably
|
||||
from the US, of people 'trying it out' with a trans person. Ignoring how
|
||||
slimy and disgusting you have to be to even do that without considering
|
||||
the effects of those actions, the point of dating is for love (and to
|
||||
meet societal expectations while seeking a dual income for the
|
||||
household, among other things).
|
||||
</p>
|
||||
<p>
|
||||
To make it extra clear, love != sex. The point at the end of it isn't so
|
||||
you can run home and shag every night--this isn't some 1960s Bond film.
|
||||
</p>
|
||||
<p>
|
||||
If you want to have kids, some trans people who are on HRT, may still be
|
||||
able to if they've gone to the really awkward and expensive effort of
|
||||
cryopreservation.
|
||||
</p>
|
||||
<p>
|
||||
Anyway, being someone who was a 'test run' is crushing. I certainly
|
||||
don't want to run that risk, and other people are in the same boat.
|
||||
</p>
|
||||
<p>Given all this, I'll probably tough it out on my own for a while.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
3
src/blog/style.scss
Normal file
3
src/blog/style.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@use "../partials/a_common";
|
||||
|
||||
@use "../partials/pane_blog";
|
||||
21
src/feed/rss.xml
Normal file
21
src/feed/rss.xml
Normal file
@@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<rss version="2.0">
|
||||
|
||||
<channel>
|
||||
<title>Cutieguwu Yaps</title>
|
||||
<link>https://www.cutieguwu.ca/</link>
|
||||
<description
|
||||
>Cutieguwu's blog where she discusses various things.</description>
|
||||
<language>en-ca</language>
|
||||
<category>Technology/IT/Life/Mental Health/Health</category>
|
||||
<item>
|
||||
<title>Splitting Pathways</title>
|
||||
<link>https://blog.cutieguwu.ca/0_divergent_pathways.html</link>
|
||||
<description>Discussing my struggles in love.</description>
|
||||
<category>Life</category>
|
||||
<category>Mental Health</category>
|
||||
<category>Health</category>
|
||||
</item>
|
||||
</channel>
|
||||
|
||||
</rss>
|
||||
14
src/includes/blog_recent_posts.html
Normal file
14
src/includes/blog_recent_posts.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<div class="spacer_container spacer_posts">
|
||||
<h2>Recent</h2>
|
||||
<div class="chunk_list recent_posts">
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">Divergent Pathways</h3>
|
||||
<span class="subtitle">29 July, 2025</span>
|
||||
</div>
|
||||
<a href="./blog/0_diverging_pathways.html" class="status"> View </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,34 +1,18 @@
|
||||
<div class="quick_links">
|
||||
<a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site" title="Website Source">
|
||||
<ion-icon
|
||||
name="git-branch-outline"
|
||||
alt="(Gitea) Website Source"
|
||||
style="color: var(--accent-green)"
|
||||
></ion-icon>
|
||||
</a>
|
||||
<a href="https://github.com/Cutieguwu/cutieguwu-site" title="(Mirror) Website Source">
|
||||
<ion-icon
|
||||
name="logo-github"
|
||||
alt="(Mirror) Website Source"
|
||||
style="color: var(--accent-blue)"
|
||||
></ion-icon>
|
||||
<ion-icon name="git-branch-outline" alt="(Gitea) Website Source" class="gitea"></ion-icon>
|
||||
</a>
|
||||
<a
|
||||
href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/src/branch/main/LICENSE"
|
||||
title="MIT License"
|
||||
>
|
||||
<ion-icon
|
||||
name="book-outline"
|
||||
alt="MIT License"
|
||||
style="color: var(--accent-indigo)"
|
||||
></ion-icon>
|
||||
<ion-icon name="book-outline" alt="MIT License" class="license"></ion-icon>
|
||||
</a>
|
||||
<a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/issues" title="Report Issues">
|
||||
<ion-icon
|
||||
name="alert-circle-outline"
|
||||
alt="Report Issues"
|
||||
style="color: var(--accent-magenta)"
|
||||
></ion-icon>
|
||||
<ion-icon name="alert-circle-outline" alt="Report Issues" class="issue_tracker"></ion-icon>
|
||||
</a>
|
||||
<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>
|
||||
</a>
|
||||
<a class="phantom"></a>
|
||||
</div>
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
.status {
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
margin-left: var(--spacing-horizontal);
|
||||
margin-left: calc(var(--spacing-horizontal) * 2);
|
||||
|
||||
text-decoration: none;
|
||||
font-size: 1.17rem;
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
@use "a_chunk_list";
|
||||
@use "a_footer";
|
||||
@use "a_layouts";
|
||||
@use "a_quick_links";
|
||||
@use "a_pages";
|
||||
|
||||
@use "pane_main";
|
||||
@use "pane_nav";
|
||||
@@ -13,7 +16,6 @@
|
||||
|
||||
Odd numbers should be used as intermediate colours between the fore and back elements. Excepting white--white's special.
|
||||
Eg. Current dropdown menu.
|
||||
|
||||
*/
|
||||
font-size: var(--font-size-generic);
|
||||
|
||||
|
||||
@@ -1 +1,3 @@
|
||||
@use "blog_recent_posts";
|
||||
|
||||
@use "page_resume";
|
||||
|
||||
@@ -3,17 +3,15 @@
|
||||
--item-size: calc(1rem + var(--item-padding));
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
a {
|
||||
height: var(--item-size);
|
||||
|
||||
display: grid;
|
||||
|
||||
background-color: var(--background-1);
|
||||
background-color: var(--background-3);
|
||||
border-radius: var(--border-radius-leaf);
|
||||
|
||||
margin: 0.5rem;
|
||||
@@ -34,6 +32,8 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-size: var(--font-size-generic);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,4 +4,10 @@
|
||||
|
||||
font-size: 1.65vh;
|
||||
white-space: nowrap;
|
||||
|
||||
background-color: var(--background-2);
|
||||
border-radius: var(--border-radius-leaf);
|
||||
padding: var(--spacing-horizontal);
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
7
src/partials/_blog_recent_posts.scss
Normal file
7
src/partials/_blog_recent_posts.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.spacer_posts {
|
||||
justify-content: start !important;
|
||||
|
||||
.recent_posts .chunk .header {
|
||||
background-color: var(--background-1);
|
||||
}
|
||||
}
|
||||
@@ -15,6 +15,11 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
transition: var(--transition-cut);
|
||||
transform: var(--transform-scale-x) var(--transform-scale-y);
|
||||
}
|
||||
|
||||
.phantom {
|
||||
width: var(--item-size);
|
||||
height: var(--item-size);
|
||||
@@ -25,12 +30,32 @@
|
||||
Due to how flexboxes function, settings `display: none`
|
||||
will result in the box just scaling as if the element
|
||||
never existed.
|
||||
|
||||
phantom needs to sit beside a element in hierarchy, otherwise
|
||||
phantom will inherit from a like this:
|
||||
|
||||
.pane_nav > .quick_links > a > .phantom
|
||||
*/
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
transition: var(--transition-cut);
|
||||
transform: var(--transform-scale-x) var(--transform-scale-y);
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
52
src/partials/_pane_blog.scss
Normal file
52
src/partials/_pane_blog.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
@use "a_tailer";
|
||||
|
||||
.pane_blog {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
|
||||
margin: var(--margin-pane);
|
||||
|
||||
justify-content: center;
|
||||
|
||||
.blog_body {
|
||||
background-color: var(--background-2);
|
||||
border-radius: var(--border-radius-leaf);
|
||||
padding-top: var(--spacing-horizontal);
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: var(--spacing-horizontal);
|
||||
width: min-content;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
.title {
|
||||
background-color: var(--background-1);
|
||||
border-radius: var(--border-radius-leaf);
|
||||
padding: var(--spacing-horizontal);
|
||||
}
|
||||
|
||||
.date {
|
||||
display: block;
|
||||
|
||||
font-size: 0.85rem;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-family: var(--font-family-generic);
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
text-align: start;
|
||||
|
||||
padding: 0 calc(var(--margin-pane) * 4)
|
||||
calc(var(--margin-pane) * 4);
|
||||
|
||||
p {
|
||||
color: var(--white-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -8,8 +8,7 @@
|
||||
|
||||
justify-content: center;
|
||||
|
||||
.main_body,
|
||||
.tailer {
|
||||
.main_body {
|
||||
background-color: var(--background-2);
|
||||
border-radius: var(--border-radius-leaf);
|
||||
padding: var(--spacing-horizontal);
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
margin: var(--margin-pane);
|
||||
padding: 0;
|
||||
|
||||
width: 10vw;
|
||||
width: min-content;
|
||||
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
@@ -22,11 +22,10 @@
|
||||
var(--spacing-menu-gap) / 2
|
||||
) - calc(var(--spacing-horizontal) * 2)
|
||||
);
|
||||
flex: 1;
|
||||
border-radius: var(--border-radius-leaf);
|
||||
|
||||
/* Vertical Text Align */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
40
src/templates/blog_post.html
Normal file
40
src/templates/blog_post.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!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_logo.html" />
|
||||
<include src="includes/nav_menu.html" />
|
||||
<div class="location">
|
||||
<h4 class="location_header">You are here:</h4>
|
||||
<h5 class="location_page">Blog - Blog Post Template</h5>
|
||||
</div>
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_blog">
|
||||
<div class="blog_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>
|
||||
Reference in New Issue
Block a user