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

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