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

Compare commits

base: Cutieguwu:3948bdd8d21f9b8ea649e711b34a02fec48c15c0
Branches Tags
Cutieguwu:v2.0.0-alpha Cutieguwu:main
..
compare: Cutieguwu:b4906abd19070b3454434370c95612d8fbd1eb50
Branches Tags
Cutieguwu:v2.0.0-alpha Cutieguwu:main

3 Commits
3948bdd8d2 ... b4906abd19

Author SHA1 Message Date
Cutieguwu
b4906abd19 Tons of changes, all of which I've forgotten. A number of refactors 
exist. Nav menu partly operational on mobile.
 2025-08-16 15:02:54 -04:00
Cutieguwu
4bd5c25a72 Update index.html 2025-08-10 18:05:17 -04:00
Cutieguwu
28701d89c7 Make clean verbose. 2025-08-10 17:39:28 -04:00
46 changed files with 319 additions and 448 deletions
Expand all files Collapse all files

14
build.sh
View File

@@ -57,7 +57,7 @@ do
elif [ "$x" == 'style' ] elif [ "$x" == 'style' ]
then then
cmd='sass' cmd='sass --update'
files=(` files=(`
find src -not\ find src -not\
@@ -107,13 +107,13 @@ do
mkdir -p target/img/blog/posts mkdir -p target/img/blog/posts
action='Converting and Copying Images...' action='Converting Images...'
elif [ "$x" == 'clean' ] elif [ "$x" == 'clean' ]
then then
echo -e "$green"Cleaning... echo -e "$green"Cleaning...
rm -R target rm -Rv target
break break
@@ -123,11 +123,15 @@ do
echo -e "$green"Options:"$cyan" echo -e "$green"Options:"$cyan"
echo ' -h, --help Print help' echo ' -h, --help Print help'
echo echo
echo
echo -e "$green"Commands:"$cyan" echo -e "$green"Commands:"$cyan"
echo ' conv-img Convert images to target'
echo ' copy Copy assets to target'
echo ' inflate Inflate the HTML source' echo ' inflate Inflate the HTML source'
echo ' style Compile SCSS to CSS' echo ' style Compile SCSS to CSS'
echo ' copy Copy assets to target'
echo ' clean Wipe the target dir' echo
echo ' clean Wipe the target directory'
break break
fi fi

6
src/about.html
View File

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

6
src/acknowledgements.html
View File

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

6
src/blog/index.html
View File

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

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

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

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

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

6
src/disclosure.html
View File

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

6
src/errors/400.html
View File

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

6
src/errors/401.html
View File

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

6
src/errors/403.html
View File

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

6
src/errors/404.html
View File

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

6
src/errors/500.html
View File

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

6
src/errors/501.html
View File

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

6
src/errors/502.html
View File

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

6
src/errors/503.html
View File

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

6
src/errors/504.html
View File

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

4
src/includes/_unused_menu_entries.html
View File

@@ -1,10 +1,10 @@
<!-- Minecraft --> <!-- Minecraft -->
<li class="nav_dropdown"> <li class="nav_dropdown">
<div class="dropdown_header nav_item"> <div class="header nav_item">
<a class="nav_title" href="/minecraft/">Minecraft</a> <a class="nav_title" href="/minecraft/">Minecraft</a>
<ion-icon name="chevron-forward-outline"></ion-icon> <ion-icon name="chevron-forward-outline"></ion-icon>
</div> </div>
<div class="dropdown_body"> <div class="body">
<a class="nav_title" href="/minecraft/bearock/">Bearock SMP</a> <a class="nav_title" href="/minecraft/bearock/">Bearock SMP</a>
<a class="nav_title" href="/minecraft/rebirth/">Rebirth SMP</a> <a class="nav_title" href="/minecraft/rebirth/">Rebirth SMP</a>
</div> </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 --> <!-- Pronoun Pages -->
<li class="nav_dropdown"> <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> <p class="nav_title">Pronoun Pages</p>
<ion-icon name="chevron-forward-outline"></ion-icon> <ion-icon name="chevron-forward-outline"></ion-icon>
</a> </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://en.pronouns.page/@Cutieguwu">English</a>
<a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a> <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
</div> </div>
@@ -27,11 +27,11 @@
<!-- External Links --> <!-- External Links -->
<li class="nav_dropdown"> <li class="nav_dropdown">
<div class="dropdown_header nav_item"> <div class="header nav_item">
<p class="nav_title">External Links</p> <p class="nav_title">External Links</p>
<ion-icon name="chevron-forward-outline"></ion-icon> <ion-icon name="chevron-forward-outline"></ion-icon>
</div> </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://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.twitch.tv/cutieguwu">Twitch</a>
<a class="nav_title" href="https://www.youtube.com/@Cutieguwu">YouTube</a> <a class="nav_title" href="https://www.youtube.com/@Cutieguwu">YouTube</a>
@@ -42,22 +42,22 @@
<!-- Public Services --> <!-- Public Services -->
<li class="nav_dropdown"> <li class="nav_dropdown">
<div class="dropdown_header nav_item"> <div class="header nav_item">
<p class="nav_title">Public Services</p> <p class="nav_title">Public Services</p>
<ion-icon name="chevron-forward-outline"></ion-icon> <ion-icon name="chevron-forward-outline"></ion-icon>
</div> </div>
<div class="dropdown_body"> <div class="body">
<a class="nav_title" href="https://webcheck.cutieguwu.ca">Web Check</a> <a class="nav_title" href="https://webcheck.cutieguwu.ca">Web Check</a>
</div> </div>
</li> </li>
<!-- Services --> <!-- Services -->
<li class="nav_dropdown"> <li class="nav_dropdown">
<div class="dropdown_header nav_item"> <div class="header nav_item">
<p class="nav_title">Services</p> <p class="nav_title">Services</p>
<ion-icon name="chevron-forward-outline"></ion-icon> <ion-icon name="chevron-forward-outline"></ion-icon>
</div> </div>
<div class="dropdown_body"> <div class="body">
<a class="nav_title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a> <a class="nav_title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a>
</div> </div>
</li> </li>

255
src/index.html
View File

@@ -8,11 +8,11 @@
<body> <body>
<div class="viewport"> <div class="viewport">
<nav class="pane_nav"> <nav class="pane_nav">
<include src="includes/nav_logo.html" /> <include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" /> <include src="includes/nav_menu.html" />
<div class="location"> <div class="location">
<h4 class="location_header">You are here:</h4> <h4 class="header">You are here:</h4>
<h5 class="location_page">Home</h5> <h5 class="page">Home</h5>
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
@@ -31,254 +31,7 @@
Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis
massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper
vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra
inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing inceptos himenaeos.
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.
</p> </p>
</div> </div>
</div> </div>

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

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

8
src/minecraft/index.html
View File

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

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

@@ -8,16 +8,16 @@
<body> <body>
<div class="viewport"> <div class="viewport">
<nav class="pane_nav"> <nav class="pane_nav">
<include src="includes/nav_logo.html" /> <include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" /> <include src="includes/nav_menu.html" />
<div class="location"> <div class="location">
<h4 class="location_header">You are here:</h4> <h4 class="header">You are here:</h4>
<h5 class="location_page">Rebirth SMP</h5> <h5 class="page">Rebirth SMP</h5>
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_main"> <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" /> <include src="includes/tailer.html" />
</div> </div>
<div class="pane_spacer"> <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%; width: 100%;
.chunk + .chunk { .chunk + .chunk {
margin-top: var(--spacing-horizontal); margin-top: var(--spacing-small);
} }
.chunk { .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-auto-flow: row;
grid-template-columns: 1fr min-content; 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); background-color: var(--background-3);
border-radius: var(--border-radius-leaf); border-radius: var(--border-radius-leaf);
padding: var(--spacing-horizontal); padding: var(--spacing-small);
text-align: start; 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 { > .body {
padding: 0 calc(var(--spacing-horizontal) * 2); padding: 0 calc(var(--spacing-small) * 2);
ul { ul {
font-family: var(--font-family-generic); 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) { @media only screen and (max-width: 500px) {
.chunk_list .chunk { .chunk_list .chunk {
> .header { > .header {
column-gap: var(--spacing-horizontal); column-gap: var(--spacing-small);
} }
> .body { > .body {

48
src/partials/_a_common.scss
View File

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

2
src/partials/_a_footer.scss
View File

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

6
src/partials/_a_layouts.scss
View File

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

4
src/partials/_a_tailer.scss
View File

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

19
src/partials/_nav_dropdown.scss
View File

@@ -1,21 +1,16 @@
.nav_dropdown { .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 {
/*
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; align-self: center;
transition-duration: 0.25s; transition-duration: 0.25s;
} }
} }
.dropdown_body { > .body {
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);
@@ -24,7 +19,7 @@
} }
.nav_dropdown:hover { .nav_dropdown:hover {
.dropdown_header { > .header {
transform: var(--transform-scale-x); transform: var(--transform-scale-x);
ion-icon { ion-icon {
@@ -33,7 +28,13 @@
} }
} }
.dropdown_body { > .body {
display: grid; 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 { .location {
grid-area: location;
margin: 0; margin: 0;
padding: var(--spacing-horizontal); padding: var(--spacing-small);
background-color: var(--background-2); background-color: var(--background-2);
border-radius: var(--border-radius-leaf); border-radius: var(--border-radius-leaf);
text-align: center; text-align: center;
.location_header { > .header {
font-weight: bold; font-weight: bold;
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
} }
.location_page { .page {
margin: 0; 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"; @use "nav_title";
.nav_menu { .nav_menu {
/* grid-area: menu;
Remove default padding and style applied to ul for bullets.
*/ // Remove default padding and style applied to ul for bullets.
padding: 0; padding: 0;
list-style: none; list-style: none;
display: grid; display: grid;
grid-auto-flow: row; grid-auto-flow: row;
gap: var(--spacing-menu-gap); gap: var(--spacing-medium);
align-self: center; align-self: center;
margin: 0; margin: 0;
hr { hr {
border-color: var(--accent-pink); border-color: var(--accent-pink);
margin: 0 var(--spacing-horizontal); margin: 0 var(--spacing-small);
} }
} }
.nav_item { .nav_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;
text-decoration: none; text-decoration: none;
padding: 0 var(--spacing-small);
background-color: var(--background-2); background-color: var(--background-2);
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
transition: var(--transition-fade); transition: var(--transition-fade);
@@ -43,3 +44,15 @@
transition: var(--transition-cut); 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 { .pane_nav .quick_links {
grid-area: quick_links;
--item-padding: 0.25rem; --item-padding: 0.25rem;
justify-content: space-between; justify-content: space-between;
/*
To colour the icons, apply inline styling.
*/
a { a {
background-color: var(--background-2); background-color: var(--background-2);
@@ -25,18 +23,16 @@
.phantom { .phantom {
width: calc(var(--item-size) + calc(var(--item-padding) * 2)); width: calc(var(--item-size) + calc(var(--item-padding) * 2));
/* // Fake hiding the element.
Fake hiding the element. //
// Due to how flexboxes function, settings `display: none`
Due to how flexboxes function, settings `display: none` // will result in the box just scaling as if the element
will result in the box just scaling as if the element // never existed.
never existed. //
// phantom needs to sit beside a element in hierarchy,
phantom needs to sit beside a element in hierarchy, otherwise // otherwise phantom will inherit from <a> like this:
phantom will inherit from a like this: //
// .pane_nav > .quick_links > a > .phantom
.pane_nav > .quick_links > a > .phantom
*/
background-color: inherit; background-color: inherit;
} }
} }
@@ -60,3 +56,19 @@
.rss { .rss {
color: var(--accent-orange); 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 { .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; color: inherit;
text-decoration: inherit; text-decoration: inherit;
@@ -7,7 +8,7 @@
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
margin: inherit; margin: inherit;
padding: 0 var(--spacing-horizontal); // padding: 0 var(--spacing-small);
transition: var(--transition-fade); transition: var(--transition-fade);
display: block; display: block;
} }
@@ -16,3 +17,11 @@
color: var(--highlight-hover); color: var(--highlight-hover);
transition: var(--transition-cut); 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 { .about_me {
padding: 0 var(--spacing-thicc) var(--spacing-horizontal); padding: 0 var(--spacing-thicc) var(--spacing-small);
} }
.early_history { .early_history {

12
src/partials/_pane_blog.scss
View File

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

10
src/partials/_pane_main.scss
View File

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

55
src/partials/_pane_nav.scss
View File

@@ -1,29 +1,64 @@
@use "nav_logo"; @use "nav_header";
@use "nav_menu"; @use "nav_menu";
@use "nav_location"; @use "nav_location";
@use "nav_quick_links"; @use "nav_quick_links";
.pane_nav { .pane_nav {
margin: var(--margin-pane); --padding-mobile: 0.35rem;
margin: var(--spacing-large);
width: min-content; width: min-content;
height: min-content; height: min-content;
display: grid; display: flex;
grid-auto-flow: row; flex-direction: column;
grid-template-rows: repeat(4, min-content); gap: var(--spacing-medium);
gap: var(--spacing-menu-gap);
align-content: start;
position: sticky; position: sticky;
top: var(--margin-pane); top: var(--spacing-large);
left: var(--margin-pane); left: var(--spacing-large);
color: var(--accent-pink); color: var(--accent-pink);
input[type="checkbox"] {
display: none;
}
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.pane_nav { .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 { .pane_spacer {
margin: var(--margin-pane); grid-area: spacer;
margin: var(--spacing-large);
width: min-content; width: min-content;
height: calc(100vh - calc(var(--margin-pane) * 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-menu-gap); gap: var(--spacing-medium);
position: sticky; position: sticky;
top: var(--margin-pane); top: var(--spacing-large);
right: var(--margin-pane); right: var(--spacing-large);
.spacer_container { .spacer_container {
padding: var(--spacing-horizontal); padding: var(--spacing-small);
background-color: var(--background-2); background-color: var(--background-2);
height: 100%; height: 100%;
border-radius: var(--border-radius-leaf); border-radius: var(--border-radius-leaf);

6
src/resume.html
View File

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

8
src/templates/blog_post.html
View File

@@ -8,16 +8,16 @@
<body> <body>
<div class="viewport"> <div class="viewport">
<nav class="pane_nav"> <nav class="pane_nav">
<include src="includes/nav_logo.html" /> <include src="includes/nav_header.html" />
<include src="includes/nav_menu.html" /> <include src="includes/nav_menu.html" />
<div class="location"> <div class="location">
<h4 class="location_header">You are here:</h4> <h4 class="header">You are here:</h4>
<h5 class="location_page">Blog - Blog Post Template</h5> <h5 class="page">Blog - Blog Post Template</h5>
</div> </div>
<include src="includes/nav_quick_links.html" /> <include src="includes/nav_quick_links.html" />
</nav> </nav>
<div class="pane_blog"> <div class="pane_blog">
<div class="blog_body"> <div class="body">
<div class="header"> <div class="header">
<h1 class="title">Blog Post Template</h1> <h1 class="title">Blog Post Template</h1>
<p class="date">Posted: 01 January, 2025</p> <p class="date">Posted: 01 January, 2025</p>

8
src/templates/error.html
View File

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

8
src/templates/main.html
View File

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