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

Begin site v2 and split SCSS into more manageable chunks.

Browse Source
This commit is contained in:
Cutieguwu
2025-07-21 13:32:24 -04:00
parent 2bd92e6fdc
commit 689354fc7b
17 changed files with 455 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/acknowledgements.html
View File

@@ -1,75 +1,12 @@
<!doctype html>
<html lang="en-ca">
<head>
<meta charset="utf-8" />
<title>Acknowledgements | Cutieguwu</title>
<link rel="icon" type="image/x-icon" href="img/test-favicon.jpg" />
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="description" content="Cutieguwu's Official website" />
<meta
name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0"
/>
<meta name="keywords" content="cutieguwu" />
<include src="includes/meta.html" />
</head>
<body class="viewport">
<nav class="nav_pane">
<h2 class="nav_logo">Cutieguwu</h2>
<ul class="nav_menu">
<li class="nav_body"><a class="nav_title" href="">Home</a></li>
<li class="nav_body">
<a class="nav_title" href="#">About</a>
</li>
<li class="dropdown">
<div class="dropdown_header nav_body">
<p class="nav_title" href="#">Minecraft</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<a class="nav_title" href="#">Bearock SMP</a>
<a class="nav_title" href="#">Rebirth SMP</a>
</div>
</li>
<li class="dropdown">
<div class="dropdown_header nav_body">
<p class="nav_title">Links</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
<a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
<a class="nav_title" href="https://nextcloud.cutieguwu.ca">Nextcloud</a>
<a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
<a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
</div>
</li>
<li class="dropdown">
<div class="dropdown_header nav_body">
<a class="nav_title" href="https://pronouns.page/@Cutieguwu"
>Pronoun Pages</a
>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
<a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
</div>
</li>
<li class="nav_body">
<a class="nav_title" href="#">Other</a>
</li>
<li class="nav_body">
<a class="nav_title" href="#">Other 2</a>
</li>
<li class="nav_body">
<a class="nav_title" href="#">Super long titled</a>
</li>
</ul>
</nav>
<include src="includes/nav.html" />
<div class="main_pane">
<p>There are currently no acknowledgements</p>
<p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
@@ -78,10 +15,6 @@
getting the basics handled.
</p>
</div>
<script
type="module"
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<include src="includes/scripts.html" />
</body>
</html>

11
src/includes/meta.html Normal file
View File

@@ -0,0 +1,11 @@
<meta charset="utf-8" />
<meta name="description" content="Cutieguwu's Official website" />
<meta
name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0"
/>
<meta name="keywords" content="cutieguwu" />
<link rel="icon" type="image/x-icon" href="img/test-favicon.jpg" />
<link rel="stylesheet" type="text/css" href="style.css" />

1
src/includes/nav_logo.html Normal file
View File

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

78
src/includes/nav_menu.html Normal file
View File

@@ -0,0 +1,78 @@
<ul class="nav_menu">
<!-- Home -->
<li class="nav_body"><a class="nav_title" href="#">Home</a></li>
<!-- Minecraft -->
<li class="dropdown">
<div class="dropdown_header nav_body">
<p class="nav_title" href="#">Minecraft</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<a class="nav_title" href="#">Bearock SMP</a>
<a class="nav_title" href="#">Rebirth SMP</a>
</div>
</li>
<hr />
<!-- About -->
<li class="nav_body"><a class="nav_title" href="#">About</a></li>
<!-- Pronoun Pages -->
<li class="dropdown">
<div class="dropdown_header nav_body">
<a class="nav_title" href="https://pronouns.page/@Cutieguwu">Pronoun Pages</a>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
<a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
</div>
</li>
<!-- External Links -->
<li class="dropdown">
<div class="dropdown_header nav_body">
<p class="nav_title">External Links</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<a class="nav_title" href="https://github.com/Cutieguwu">Github</a>
<a class="nav_title" href="https://www.twitch.tv/cutieguwu">Twitch</a>
</div>
</li>
<hr />
<!-- Public Services -->
<li class="dropdown">
<div class="dropdown_header nav_body">
<p class="nav_title">Public Services</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<a class="nav_title" href="https://webcheck.cutieguwu.ca">Web Check</a>
</div>
</li>
<!-- Services -->
<li class="dropdown">
<div class="dropdown_header nav_body">
<p class="nav_title">Services</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<a class="nav_title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a>
<a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
<a class="nav_title" href="https://nextcloud.cutieguwu.ca">Nextcloud</a>
<a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
<a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
</div>
</li>
<hr />
<!-- Website Disclosure -->
<li class="nav_body"><a class="nav_title" href="#">Website Disclosure</a></li>
</ul>

17
src/includes/nav_quick_links.html Normal file
View File

@@ -0,0 +1,17 @@
<div class="nav_quick_links">
<a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site" title="Website Source">
<ion-icon
name="git-branch-outline"
class="icon_gitea"
alt="(Gitea) Website Source"
></ion-icon>
</a>
<a href="https://github.com/Cutieguwu/cutieguwu-site" title="(Mirror) Website Source">
<ion-icon name="logo-github" class="icon_github" alt="(Mirror) Website Source"></ion-icon>
</a>
<a
href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/src/branch/main/LICENSE"
title="MIT License"
><ion-icon name="book-outline" class="icon_license" alt="MIT License"></ion-icon
></a>
</div>

2
src/includes/scripts.html Normal file
View File

@@ -0,0 +1,2 @@
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

36
src/index.html
View File

@@ -1,26 +1,28 @@
<!doctype html>
<html lang="en-ca">
<head>
<meta charset="utf-8" />
<title>Home | Cutieguwu</title>
<link rel="icon" type="image/x-icon" href="img/test-favicon.jpg" />
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="description" content="Cutieguwu's Official website" />
<meta
name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0"
/>
<meta name="keywords" content="cutieguwu" />
<include src="includes/meta.html" />
</head>
<body class="viewport">
<include src="/home/cutieguwu/Workspace/balloon/tests/src/nav.html" />
<div class="main_pane">
<p>lorem ipsum etc idk what else there is in this latin phrase</p>
<nav class="pane_nav">
<include src="includes/nav_logo.html" />
<include src="includes/nav_menu.html" />
<div class="location">
<p class="location_header">You are here:</p>
<p class="location_page">Home</p>
</div>
<script
type="module"
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<include src="includes/nav_quick_links.html" />
</nav>
<div class="pane_main">
<h1>Home</h1>
<p>lorem ipsum idk what else there is in this latin phrase</p>
</div>
<div class="pane_spacer">
<div class="spacer_container"><p>#AD</p></div>
<div class="spacer_container"><p>#AD</p></div>
</div>
<include src="includes/scripts.html" />
</body>
</html>

63
src/nav.html
View File

@@ -1,63 +0,0 @@
<nav class="nav_pane">
<h2 class="nav_logo">Cutieguwu</h2>
<ul class="nav_menu">
<li class="nav_body"><a class="nav_title" href="#">Home</a></li>
<li class="dropdown">
<div class="dropdown_header nav_body">
<p class="nav_title" href="#">Minecraft</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<a class="nav_title" href="#">Bearock SMP</a>
<a class="nav_title" href="#">Rebirth SMP</a>
</div>
</li>
<hr />
<li class="nav_body"><a class="nav_title" href="#">About</a></li>
<li class="dropdown">
<div class="dropdown_header nav_body">
<a class="nav_title" href="https://pronouns.page/@Cutieguwu">Pronoun Pages</a>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
<a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
</div>
</li>
<li class="dropdown">
<div class="dropdown_header nav_body">
<p class="nav_title">External Links</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<a class="nav_title" href="https://github.com/Cutieguwu">Github</a>
<a class="nav_title" href="https://www.twitch.tv/cutieguwu">Twitch</a>
</div>
</li>
<hr />
<li class="dropdown">
<div class="dropdown_header nav_body">
<p class="nav_title">Public Services</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<a class="nav_title" href="https://webcheck.cutieguwu.ca">Web Check</a>
</div>
</li>
<li class="dropdown">
<div class="dropdown_header nav_body">
<p class="nav_title">Services</p>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
<div class="dropdown_body">
<a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
<a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
<a class="nav_title" href="https://nextcloud.cutieguwu.ca">Nextcloud</a>
<a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
<a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
</div>
</li>
<hr />
<li class="nav_body"><a class="nav_title" href="#">Website Disclosure</a></li>
</ul>
</nav>

18
src/partials/_nav_location.scss Normal file
View File

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

5
src/partials/_nav_logo.scss Normal file
View File

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

99
src/partials/_nav_menu.scss Normal file
View File

@@ -0,0 +1,99 @@
.nav_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);
align-self: center;
margin: 0;
hr {
border-color: var(--accent-pink);
margin: 0 var(--spacing-horizontal);
}
.nav_body {
background-color: var(--background-2);
border-radius: var(--border-radius-small);
transition: var(--transition-fade);
}
.dropdown:hover .nav_body,
.dropdown .nav_body:hover,
.nav_body:hover {
transform: var(--transform-scale-x);
transition: var(--transition-cut);
.nav_title,
ion-icon {
color: var(--highlight-hover);
transition: var(--transition-cut);
}
}
.dropdown {
.dropdown_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 {
display: none;
border-bottom-left-radius: var(--border-radius-small);
border-bottom-right-radius: var(--border-radius-small);
background-color: var(--background-1);
}
}
.dropdown:hover {
.dropdown_header {
transform: var(--transform-scale-x);
ion-icon {
rotate: 90deg;
transition-duration: 0.25s;
}
}
.dropdown_body {
display: grid;
}
}
.nav_body,
.dropdown .nav_body,
.dropdown .dropdown_body {
.nav_title {
/* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
color: inherit;
text-decoration: none;
font-family: var(--font-family-generic);
font-weight: bold;
white-space: nowrap;
margin: 0 var(--spacing-horizontal);
transition: var(--transition-fade);
text-transform: uppercase;
}
.nav_title:hover {
color: var(--highlight-hover);
transition: var(--transition-cut);
}
}
}

54
src/partials/_nav_quick_links.scss Normal file
View File

@@ -0,0 +1,54 @@
.nav_quick_links {
--cols: 5;
--item-padding: 0.35rem;
--item-edge-length: 1.25rem;
--item-size: calc(
var(--item-edge-length) + calc(var(--item-padding) * 2)
);
/*
display: flex;
flex-flow: row wrap;
align-items: center;
margin-right: auto;
*/
display: grid;
grid-template-columns:
var(--item-size) var(--item-size) var(--item-size)
var(--item-size) var(--item-size);
align-items: center;
gap: var(--spacing-menu-gap)
calc(
calc(100% - calc(var(--item-size) * var(--cols))) /
calc(var(--cols) - 1)
);
a {
width: var(--item-size);
height: var(--item-size);
* {
width: var(--item-edge-length);
height: var(--item-edge-length);
padding: var(--item-padding);
background-color: var(--background-2);
border-radius: var(--border-radius-small)
var(--border-radius-large);
}
.icon_gitea {
color: var(--accent-green);
}
.icon_github {
color: var(--accent-blue);
}
.icon_license {
color: var(--accent-purple);
}
}
}

6
src/partials/_pane_error.scss Normal file
View File

@@ -0,0 +1,6 @@
.pane_error {
width: max-content;
margin: auto; /* center object */
text-align: center;
background-color: var(--background-2);
}

10
src/partials/_pane_main.scss Normal file
View File

@@ -0,0 +1,10 @@
.pane_main {
flex: 1;
text-align: center;
background-color: var(--background-2);
margin: var(--margin-pane);
padding: 0;
border-radius: var(--border-radius-small)
var(--border-radius-large);
}

17
src/partials/_pane_nav.scss Normal file
View File

@@ -0,0 +1,17 @@
@use "nav_logo";
@use "nav_menu";
@use "nav_location";
@use "nav_quick_links";
.pane_nav {
--spacing-horizontal: 0.75rem;
--transform-scale-x: scaleX(1.15);
margin: var(--margin-pane);
padding: 0;
gap: var(--spacing-menu-gap);
width: min-content;
align-content: start;
display: grid;
color: var(--accent-pink);
}

31
src/partials/_pane_spacer.scss Normal file
View File

@@ -0,0 +1,31 @@
.pane_spacer {
margin: var(--margin-pane);
padding: 0;
width: 10vw;
display: grid;
grid-auto-flow: row;
gap: var(--spacing-menu-gap);
.spacer_container {
margin: 0;
background-color: var(--background-2);
height: calc(
50vh - var(--margin-pane) - calc(
var(--spacing-menu-gap) / 2
)
);
flex: 1;
border-radius: var(--border-radius-small)
var(--border-radius-large);
/* Vertical Text Align */
display: flex;
align-items: center;
justify-content: center;
p {
margin: 0;
text-align: center;
}
}
}

83
src/style.scss Normal file
View File

@@ -0,0 +1,83 @@
@use "partials/pane_main";
@use "partials/pane_nav";
@use "partials/pane_spacer";
@use "partials/pane_error";
: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);
--accent-green: #cfeb9eff;
--accent-pink: #ff9f9fff;
--accent-blue: #868ab7ff;
--accent-purple: #aa7ab7ff;
--background-0: #130b21ff;
--background-1: #170d28ff;
--background-2: #231833ff;
--background-3: #211635ff;
--background-4: #2a223eff;
--block-0: #0d0d0dff;
--block-1: #1a1a1aff;
--block-2: #272727ff;
--highlight-hover: #944db6ff;
--white-0: #bfbfbfff;
--white-1: #d9d9d9ff;
--white-2: #e5e5e5ff;
--white-3: #f5f5f5ff;
--font-size-generic: 1.65vh;
--font-family-generic: Arial, Sans-Serif, Helvetica;
--transition-fade: 0.4s ease-out;
--transition-cut: none;
--border-radius-large: 1rem;
--border-radius-small: calc(var(--border-radius-large) / 2);
--margin-pane: 1.5rem;
--spacing-menu-gap: 1rem;
}
/*
* {
outline: 1px solid red;
}
*/
h1 {
font-size: 3.3vh;
}
h2 {
font-size: 2.5vh;
}
ion-icon {
width: 1rem;
height: 1rem;
}
.viewport {
/* Adds a margin otherwise for some reason. */
margin: 0;
background-color: var(--background-0);
color: var(--white-3);
display: flex;
flex-flow: row wrap;
align-items: flex-start;
}