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

Tons of changes, all of which I've forgotten. A number of refactors

Browse Source 
exist. Nav menu partly operational on mobile.
This commit is contained in:
Cutieguwu
2025-08-16 15:02:54 -04:00
parent 4bd5c25a72
commit b4906abd19
46 changed files with 318 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/about.html
View File

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">About</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">About</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

6
src/acknowledgements.html
View File

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">Acknowledgements</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">Acknowledgements</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

6
src/blog/index.html
View File

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">Blog</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">Blog</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

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

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.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>
<h4 class="header">You are here:</h4>
<h5 class="page">Blog - Divergent Pathways</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

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

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">Blog - Unsure U.</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">Blog - Unsure U.</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

6
src/disclosure.html
View File

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">Disclosure</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">Disclosure</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

6
src/errors/400.html
View File

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">400</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">400</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

6
src/errors/401.html
View File

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">401</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">401</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

6
src/errors/403.html
View File

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">403</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">403</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

6
src/errors/404.html
View File

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">404</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">404</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

6
src/errors/500.html
View File

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">500</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">500</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

6
src/errors/501.html
View File

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">501</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">501</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

6
src/errors/502.html
View File

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">502</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">502</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

6
src/errors/503.html
View File

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">503</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">503</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

6
src/errors/504.html
View File

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">Error Template</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">Error Template</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

4
src/includes/_unused_menu_entries.html
View File

@@ -1,10 +1,10 @@
<!-- Minecraft -->
<li class="nav_dropdown">
<div class="dropdown_header nav_item">
<div class="header nav_item">
<a class="nav_title" href="/minecraft/">Minecraft</a>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<div class="body">
<a class="nav_title" href="/minecraft/bearock/">Bearock SMP</a>
<a class="nav_title" href="/minecraft/rebirth/">Rebirth SMP</a>
</div>

5
src/includes/nav_header.html Normal file
View File

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

1
src/includes/nav_logo.html
View File

@@ -1 +0,0 @@
<h2 class="nav_logo">Cutieguwu</h2>

16
src/includes/nav_menu.html
View File

@@ -15,11 +15,11 @@
<!-- Pronoun Pages -->
<li class="nav_dropdown">
<a class="dropdown_header nav_item" href="https://pronouns.page/@Cutieguwu">
<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="dropdown_body">
<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>
@@ -27,11 +27,11 @@
<!-- External Links -->
<li class="nav_dropdown">
<div class="dropdown_header nav_item">
<div class="header nav_item">
<p class="nav_title">External Links</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<div class="body">
<a class="nav_title" href="https://github.com/Cutieguwu">Github (Mirror)</a>
<a class="nav_title" href="https://www.twitch.tv/cutieguwu">Twitch</a>
<a class="nav_title" href="https://www.youtube.com/@Cutieguwu">YouTube</a>
@@ -42,22 +42,22 @@
<!-- Public Services -->
<li class="nav_dropdown">
<div class="dropdown_header nav_item">
<div class="header nav_item">
<p class="nav_title">Public Services</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<div class="body">
<a class="nav_title" href="https://webcheck.cutieguwu.ca">Web Check</a>
</div>
</li>
<!-- Services -->
<li class="nav_dropdown">
<div class="dropdown_header nav_item">
<div class="header nav_item">
<p class="nav_title">Services</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<div class="body">
<a class="nav_title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a>
</div>
</li>

21
src/index.html
View File

@@ -8,11 +8,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">Home</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">Home</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
@@ -31,20 +31,7 @@
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis
massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper
vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing
elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id
cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam
urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut
hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent
per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Quisque faucibus ex sapien vitae
pellentesque sem placerat. In id cursus mi pretium tellus duis
convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus
fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada
lacinia integer nunc posuere. Ut hendrerit semper vel class aptent
taciti sociosqu. Ad litora torquent per conubia nostra inceptos
himenaeos.
inceptos himenaeos.
</p>
</div>
</div>

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

@@ -8,16 +8,16 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">Bearock SMP</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">Bearock SMP</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<div class="main_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" />
</div>
<div class="pane_spacer">

8
src/minecraft/index.html
View File

@@ -8,16 +8,16 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">Minecraft</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">Minecraft</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<div class="main_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" />
</div>
<div class="pane_spacer">

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

@@ -8,16 +8,16 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">Rebirth SMP</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">Rebirth SMP</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<div class="main_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" />
</div>
<div class="pane_spacer">

10
src/partials/_a_chunk_list.scss
View File

@@ -10,7 +10,7 @@ Hopefully, I will attempt to clean up this steaming pile of shit so that I don't
width: 100%;
.chunk + .chunk {
margin-top: var(--spacing-horizontal);
margin-top: var(--spacing-small);
}
.chunk {
@@ -21,12 +21,12 @@ Hopefully, I will attempt to clean up this steaming pile of shit so that I don't
grid-auto-flow: row;
grid-template-columns: 1fr min-content;
column-gap: calc(var(--spacing-horizontal) * 2);
column-gap: calc(var(--spacing-small) * 2);
background-color: var(--background-3);
border-radius: var(--border-radius-leaf);
padding: var(--spacing-horizontal);
padding: var(--spacing-small);
text-align: start;
@@ -58,7 +58,7 @@ Hopefully, I will attempt to clean up this steaming pile of shit so that I don't
}
> .body {
padding: 0 calc(var(--spacing-horizontal) * 2);
padding: 0 calc(var(--spacing-small) * 2);
ul {
font-family: var(--font-family-generic);
@@ -74,7 +74,7 @@ Hopefully, I will attempt to clean up this steaming pile of shit so that I don't
@media only screen and (max-width: 500px) {
.chunk_list .chunk {
> .header {
column-gap: var(--spacing-horizontal);
column-gap: var(--spacing-small);
}
> .body {

48
src/partials/_a_common.scss
View File

@@ -8,15 +8,15 @@
@use "pane_spacer";
:root {
/*
0: Base of an element. Example: the viewport class.
The higher the integer, the lighter the colour, the higher it should be visually, meaning more nested in the cascade.
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);
// 0: Base of an element. Example: the viewport class.
//
// The higher the integer, the lighter the colour, the higher
// it should be visually, meaning more nested in the cascade.
//
// Odd numbers should be used as intermediate colours between the
// fore and back elements. Excepting white--white's special.
//
// Eg. Current dropdown menu.
--accent-red: #cb4c4cff;
--accent-orange: #e18142ff;
@@ -56,11 +56,10 @@
--border-radius-leaf: var(--border-radius-small)
var(--border-radius-large);
--margin-pane: 1.5rem;
--spacing-horizontal: 0.75rem;
--spacing-menu-gap: 1rem;
--spacing-thicc: calc(var(--margin-pane) * 4);
--spacing-small: 0.75rem; // Previously: --spacing-horizontal
--spacing-medium: 1rem; // Previously: --spacing-menu-gap
--spacing-large: 1.5rem; // Previously: --margin-pane
--spacing-thicc: calc(var(--spacing-large) * 4);
--transition-fade: 0.4s ease-out;
--transition-cut: none;
@@ -68,6 +67,8 @@
--transform-scale-x: scaleX(1.15);
--transform-scale-y: scaleY(1.15);
font-size: var(--font-size-generic);
body {
background-color: var(--background-0);
margin: 0;
@@ -101,31 +102,31 @@ a {
font-family: var(--font-family-generic);
}
ion-icon {
width: 1rem;
height: 1rem;
}
.viewport {
/* Adds a margin otherwise for some reason. */
// 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) {
:root {
--spacing-large: var(--spacing-small);
}
.viewport {
grid-auto-flow: row;
grid-template-columns: none;
grid-template-areas: "nav" "main" "spacer";
/* Compress spacings to maximize useable area. */
padding: var(--spacing-horizontal);
// Compress spacings to maximize useable area.
padding: var(--spacing-small);
justify-items: center;
}
.pane_nav,
.pane_spacer,
.footer {
position: static;
@@ -134,7 +135,6 @@ ion-icon {
right: auto;
}
.pane_nav,
.pane_main,
.pane_blog,
.pane_error,

2
src/partials/_a_footer.scss
View File

@@ -1,6 +1,6 @@
.footer {
margin: 0;
padding: var(--spacing-horizontal);
padding: var(--spacing-small);
width: min-content;
background-color: var(--background-2);

6
src/partials/_a_layouts.scss
View File

@@ -1,10 +1,10 @@
.layout_row {
display: grid;
grid-auto-flow: column;
gap: var(--spacing-horizontal);
gap: var(--spacing-small);
.item {
padding: calc(var(--spacing-horizontal) * 2);
padding: calc(var(--spacing-small) * 2);
background-color: var(--background-1);
border-radius: var(--border-radius-leaf);
@@ -16,7 +16,7 @@
}
.layout_row + .layout_row {
margin-top: var(--spacing-horizontal);
margin-top: var(--spacing-small);
}
@media only screen and (max-width: 500px) {

4
src/partials/_a_tailer.scss
View File

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

19
src/partials/_nav_dropdown.scss
View File

@@ -1,21 +1,16 @@
.nav_dropdown {
.dropdown_header {
> .header {
display: grid;
grid-template-columns: 1fr min-content;
align-items: center;
ion-icon {
/*
This one aligns visually odd if trying to use the same margins as it's neighbouring nav_title class.
*/
margin-right: 0.5rem;
align-self: center;
transition-duration: 0.25s;
}
}
.dropdown_body {
> .body {
display: none;
border-bottom-left-radius: var(--border-radius-small);
border-bottom-right-radius: var(--border-radius-small);
@@ -24,7 +19,7 @@
}
.nav_dropdown:hover {
.dropdown_header {
> .header {
transform: var(--transform-scale-x);
ion-icon {
@@ -33,7 +28,13 @@
}
}
.dropdown_body {
> .body {
display: grid;
}
}
@media only screen and (max-width: 500px) {
.nav_dropdown > .header ion-icon {
margin-right: var(--padding-mobile);
}
}

36
src/partials/_nav_header.scss Normal file
View File

@@ -0,0 +1,36 @@
.pane_nav > .header {
display: grid;
grid-template-columns: none;
grid-template-areas: "logo";
ion-icon {
grid-area: hamburger;
display: none;
align-self: center;
justify-self: center;
width: 2rem;
height: 2rem;
}
}
@media only screen and (max-width: 500px) {
.pane_nav > .header {
grid-template-columns: min-content 1fr min-content;
grid-template-areas: "logo blank hamburger";
ion-icon {
display: block;
}
}
}
.nav_logo {
grid-area: logo;
font-family: var(--font-family-generic);
text-align: center;
margin: var(--spacing-small) 0;
}

8
src/partials/_nav_location.scss
View File

@@ -1,16 +1,18 @@
.location {
grid-area: location;
margin: 0;
padding: var(--spacing-horizontal);
padding: var(--spacing-small);
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
text-align: center;
.location_header {
> .header {
font-weight: bold;
margin: 0 0 0.5rem;
}
.location_page {
.page {
margin: 0;
}
}

5
src/partials/_nav_logo.scss
View File

@@ -1,5 +0,0 @@
.nav_logo {
font-family: var(--font-family-generic);
text-align: center;
margin: 0;
}

29
src/partials/_nav_menu.scss
View File

@@ -2,31 +2,32 @@
@use "nav_title";
.nav_menu {
/*
Remove default padding and style applied to ul for bullets.
*/
grid-area: menu;
// Remove default padding and style applied to ul for bullets.
padding: 0;
list-style: none;
display: grid;
grid-auto-flow: row;
gap: var(--spacing-menu-gap);
gap: var(--spacing-medium);
align-self: center;
margin: 0;
hr {
border-color: var(--accent-pink);
margin: 0 var(--spacing-horizontal);
margin: 0 var(--spacing-small);
}
}
.nav_item {
/*
Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element.
*/
// Need to force inheritence, otherwise <a> would require
// overrides for all color states from base styling for element.
color: inherit;
text-decoration: none;
padding: 0 var(--spacing-small);
background-color: var(--background-2);
border-radius: var(--border-radius-small);
transition: var(--transition-fade);
@@ -43,3 +44,15 @@
transition: var(--transition-cut);
}
}
@media only screen and (max-width: 500px) {
.nav_item {
padding: var(--padding-mobile);
background-color: var(--background-1);
}
.nav_item:hover,
.nav_dropdown:hover .nav_item {
transform: none;
}
}

44
src/partials/_nav_quick_links.scss
View File

@@ -1,12 +1,10 @@
.pane_nav .quick_links {
grid-area: quick_links;
--item-padding: 0.25rem;
justify-content: space-between;
/*
To colour the icons, apply inline styling.
*/
a {
background-color: var(--background-2);
@@ -25,18 +23,16 @@
.phantom {
width: calc(var(--item-size) + calc(var(--item-padding) * 2));
/*
Fake hiding the element.
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
*/
// Fake hiding the element.
//
// 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;
}
}
@@ -60,3 +56,19 @@
.rss {
color: var(--accent-orange);
}
@media only screen and (max-width: 500px) {
.pane_nav .quick_links {
margin-bottom: var(--spacing-small);
--item-padding: var(--padding-mobile);
> a {
background-color: var(--background-1);
}
> .phantom {
background-color: inherit;
}
}
}

13
src/partials/_nav_title.scss
View File

@@ -1,5 +1,6 @@
.nav_title {
/* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
// Need to force inheritence, otherwise <a> would require
// overrides for all color states from base styling for element.
color: inherit;
text-decoration: inherit;
@@ -7,7 +8,7 @@
font-weight: bold;
white-space: nowrap;
margin: inherit;
padding: 0 var(--spacing-horizontal);
// padding: 0 var(--spacing-small);
transition: var(--transition-fade);
display: block;
}
@@ -16,3 +17,11 @@
color: var(--highlight-hover);
transition: var(--transition-cut);
}
/*
@media only screen and (max-width: 500px) {
.nav_title {
padding: var(--padding-mobile);
}
}
*/

2
src/partials/_page_resume.scss
View File

@@ -23,7 +23,7 @@
}
.about_me {
padding: 0 var(--spacing-thicc) var(--spacing-horizontal);
padding: 0 var(--spacing-thicc) var(--spacing-small);
}
.early_history {

12
src/partials/_pane_blog.scss
View File

@@ -1,21 +1,23 @@
@use "a_tailer";
.pane_blog {
grid-area: main;
flex: 1;
flex-direction: column;
margin: var(--margin-pane);
margin: var(--spacing-large);
justify-content: center;
> .body {
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
padding-top: var(--spacing-horizontal);
padding-top: var(--spacing-small);
> .header {
text-align: center;
padding: var(--spacing-horizontal);
padding: var(--spacing-small);
width: min-content;
white-space: nowrap;
@@ -25,7 +27,7 @@
.title {
background-color: var(--background-1);
border-radius: var(--border-radius-leaf);
padding: var(--spacing-horizontal);
padding: var(--spacing-small);
}
.date {
@@ -63,7 +65,7 @@
width: 100%;
.body > .body {
padding: var(--spacing-horizontal);
padding: var(--spacing-small);
}
}
}

11
src/partials/_pane_error.scss
View File

@@ -1,15 +1,16 @@
@use "a_tailer";
.pane_error {
width: max-content;
grid-area: main;
margin: auto; /* center object */
width: max-content;
margin: auto;
> .body,
.tailer {
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
padding: var(--spacing-horizontal);
padding: var(--spacing-small);
text-align: center;
}
@@ -19,7 +20,7 @@
.pane_error {
width: 100%;
margin-top: var(--margin-pane);
margin-bottom: var(--margin-pane);
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-large);
}
}

10
src/partials/_pane_main.scss
View File

@@ -1,16 +1,18 @@
@use "a_tailer";
.pane_main {
margin: var(--margin-pane);
grid-area: main;
margin: var(--spacing-large);
> .body {
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
padding: var(--spacing-horizontal);
padding: var(--spacing-small);
> .header {
text-align: center;
padding: var(--spacing-horizontal);
padding: var(--spacing-small);
width: max-content;
margin: 0 auto;
@@ -18,7 +20,7 @@
.title {
background-color: var(--background-1);
border-radius: var(--border-radius-leaf);
padding: var(--spacing-horizontal);
padding: var(--spacing-small);
}
.date {

55
src/partials/_pane_nav.scss
View File

@@ -1,29 +1,64 @@
@use "nav_logo";
@use "nav_header";
@use "nav_menu";
@use "nav_location";
@use "nav_quick_links";
.pane_nav {
margin: var(--margin-pane);
--padding-mobile: 0.35rem;
margin: var(--spacing-large);
width: min-content;
height: min-content;
display: grid;
grid-auto-flow: row;
grid-template-rows: repeat(4, min-content);
gap: var(--spacing-menu-gap);
align-content: start;
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
position: sticky;
top: var(--margin-pane);
left: var(--margin-pane);
top: var(--spacing-large);
left: var(--spacing-large);
color: var(--accent-pink);
input[type="checkbox"] {
display: none;
}
}
@media only screen and (max-width: 500px) {
.pane_nav {
width: 75%;
width: calc(
calc(50% - var(--spacing-large) + var(--spacing-small)) *
2
);
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
padding: 0 var(--spacing-small);
.nav_menu,
.quick_links,
.location {
display: none;
}
> * {
width: 100%;
}
}
.pane_nav > #toggle:checked {
+ .header {
color: var(--highlight-hover);
+ .nav_menu {
display: grid;
+ .location + .quick_links {
display: flex;
}
}
}
}
}

14
src/partials/_pane_spacer.scss
View File

@@ -1,19 +1,21 @@
.pane_spacer {
margin: var(--margin-pane);
grid-area: spacer;
margin: var(--spacing-large);
width: min-content;
height: calc(100vh - calc(var(--margin-pane) * 2));
height: calc(100vh - calc(var(--spacing-large) * 2));
display: grid;
grid-auto-flow: row dense;
gap: var(--spacing-menu-gap);
gap: var(--spacing-medium);
position: sticky;
top: var(--margin-pane);
right: var(--margin-pane);
top: var(--spacing-large);
right: var(--spacing-large);
.spacer_container {
padding: var(--spacing-horizontal);
padding: var(--spacing-small);
background-color: var(--background-2);
height: 100%;
border-radius: var(--border-radius-leaf);

6
src/resume.html
View File

@@ -9,11 +9,11 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">Resume</h5>
<h4 class="header">You are here:</h4>
<h5 class="page">Resume</h5>
</div>
<include src="includes/nav_quick_links.html" />
</nav>

8
src/templates/blog_post.html
View File

@@ -8,16 +8,16 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.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>
<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="blog_body">
<div class="body">
<div class="header">
<h1 class="title">Blog Post Template</h1>
<p class="date">Posted: 01 January, 2025</p>

8
src/templates/error.html
View File

@@ -8,16 +8,16 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">Error Template</h5>
<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="error_body">
<div class="body">
<h1>Error Code</h1>
<h2>Error Title</h2>
<hr />

8
src/templates/main.html
View File

@@ -8,16 +8,16 @@
<body>
<div class="viewport">
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<h4 class="location_header">You are here:</h4>
<h5 class="location_page">Main Template</h5>
<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="main_body"></div>
<div class="body"></div>
<include src="includes/tailer.html" />
</div>
<div class="pane_spacer">