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

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