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

Complete #52, Optimize CSS, Reduce code duplication, Scrap templates; Massive refactor.

Browse Source
This commit is contained in:
Cutieguwu
2025-08-20 16:08:41 -04:00
parent 04a4adb4d4
commit d1e06b432d
55 changed files with 1533 additions and 1896 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/partials/_a_chunk_list.scss
View File

@@ -4,19 +4,19 @@ All specificities to do with Chunk Lists are a disaster.
Hopefully, I will attempt to clean up this steaming pile of shit so that I don't have to deal with conflicts (.main_body .body vs. .chunk .body in particular), but we'll see.
*/
.chunk_list {
.section_list {
display: grid;
width: 100%;
.chunk + .chunk {
> section + section {
margin-top: var(--spacing-small);
}
.chunk {
> section {
width: inherit;
> .header {
> header {
display: grid;
grid-auto-flow: row;
grid-template-columns: 1fr min-content;
@@ -71,9 +71,19 @@ Hopefully, I will attempt to clean up this steaming pile of shit so that I don't
}
}
.spacer_container {
justify-content: start;
.section_list > section > header {
background-color: var(--background-1);
white-space: nowrap;
}
}
@media only screen and (max-width: 500px) {
.chunk_list .chunk {
> .header {
.section_list section {
> header {
column-gap: var(--spacing-small);
}

52
src/partials/_a_colours.scss Normal file
View File

@@ -0,0 +1,52 @@
.red {
color: var(--accent-red);
}
.orange {
color: var(--accent-orange);
}
.yellow {
color: var(--accent-yellow);
}
.green {
color: var(--accent-green);
}
.cyan {
color: var(--accent-cyan);
}
.blue {
color: var(--accent-blue);
}
.indigo {
color: var(--accent-indigo);
}
.purple {
color: var(--accent-purple);
}
.magenta {
color: var(--accent-magenta);
}
.pink {
color: var(--accent-pink);
}
.white {
color: var(--white-0);
}
.docker {
/*
Docker is protective of their colours.
https://www.docker.com/company/newsroom/media-resources/
*/
color: #1d63edff;
}

45
src/partials/_a_common.scss
View File

@@ -1,11 +1,9 @@
@use "a_chunk_list";
@use "a_colours";
@use "a_footer";
@use "a_layouts";
@use "a_pane";
@use "a_quick_links";
@use "a_pages";
@use "pane_nav";
@use "pane_spacer";
:root {
// 0: Base of an element. Example: the viewport class.
@@ -53,8 +51,7 @@
--border-radius-small: calc(var(--border-radius-large) / 2);
--border-radius-large: 1rem;
--border-radius-leaf: var(--border-radius-small)
var(--border-radius-large);
--border-radius-leaf: var(--border-radius-small) var(--border-radius-large);
--spacing-small: 0.75rem; // Previously: --spacing-horizontal
--spacing-medium: 1rem; // Previously: --spacing-menu-gap
@@ -68,11 +65,18 @@
--transform-scale-y: scaleY(1.15);
font-size: var(--font-size-generic);
color: var(--white-1);
body {
background-color: var(--background-0);
// Adds a margin otherwise for some reason.
margin: 0;
color: var(--white-3);
display: grid;
grid-auto-flow: column dense;
grid-template-columns: min-content 1fr min-content;
grid-template-areas: "nav main spacer";
}
}
@@ -102,47 +106,26 @@ a {
font-family: var(--font-family-generic);
}
.viewport {
// 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 {
body {
grid-auto-flow: row;
grid-template-columns: none;
grid-template-areas: "nav" "main" "spacer";
// Compress spacings to maximize useable area.
padding: var(--spacing-small);
// padding: var(--spacing-small);
justify-items: center;
}
.pane_spacer,
.pane.spacer,
.footer {
position: static;
top: auto;
left: auto;
right: auto;
}
.pane_main,
.pane_blog,
.pane_error,
.pane_spacer {
margin: 0;
}
}
.italic {
font-style: italic;
}

9
src/partials/_a_footer.scss
View File

@@ -1,14 +1,17 @@
.footer {
margin: 0;
body > footer {
padding: var(--spacing-small);
width: min-content;
background-color: var(--background-2);
border-top-right-radius: var(--border-radius-large);
border-radius: 0 var(--border-radius-large) 0 0;
font-size: 1.65vh;
white-space: nowrap;
position: fixed;
bottom: 0;
> p {
margin: 0;
}
}

2
src/partials/_a_layouts.scss
View File

@@ -3,7 +3,7 @@
grid-auto-flow: column;
gap: var(--spacing-small);
.item {
> .item {
padding: calc(var(--spacing-small) * 2);
background-color: var(--background-1);

3
src/partials/_a_pages.scss
View File

@@ -1,3 +0,0 @@
@use "blog_recent_posts";
@use "page_resume";

23
src/partials/_a_pane.scss Normal file
View File

@@ -0,0 +1,23 @@
@use "pane_main";
@use "pane_nav";
@use "pane_spacer";
.pane {
margin: var(--spacing-large);
}
@media only screen and (max-width: 500px) {
.pane {
width: 100%;
}
}
nav.pane,
.pane.spacer {
width: min-content;
gap: var(--spacing-medium);
position: sticky;
top: var(--spacing-large);
right: var(--spacing-large);
}

13
src/partials/_a_tailer.scss
View File

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

8
src/partials/_blog_recent_posts.scss
View File

@@ -1,8 +0,0 @@
.spacer_posts {
justify-content: start !important;
.recent_posts .chunk .header {
background-color: var(--background-1);
white-space: nowrap;
}
}

22
src/partials/_nav_dropdown.scss
View File

@@ -1,40 +1,44 @@
.nav_dropdown {
> .header {
.dropdown {
> header {
display: grid;
grid-template-columns: 1fr min-content;
align-items: center;
ion-icon {
> ion-icon {
align-self: center;
transition-duration: 0.25s;
}
}
> .body {
> ul {
display: none;
border-bottom-left-radius: var(--border-radius-small);
border-bottom-right-radius: var(--border-radius-small);
background-color: var(--background-1);
// Remove default padding and style applied to ul for bullets.
padding: 0 var(--spacing-small);
list-style: none;
}
}
.nav_dropdown:hover {
> .header {
.dropdown:hover {
> header {
transform: var(--transform-scale-x);
ion-icon {
> ion-icon {
rotate: 90deg;
transition-duration: 0.25s;
}
}
> .body {
> ul {
display: grid;
}
}
@media only screen and (max-width: 500px) {
.nav_dropdown > .header ion-icon {
.dropdown > header > ion-icon {
margin-right: var(--padding-mobile);
}
}

6
src/partials/_nav_header.scss
View File

@@ -1,4 +1,4 @@
.pane_nav > .header {
nav.pane > .nav_header {
display: grid;
grid-template-columns: none;
grid-template-areas: "logo";
@@ -17,7 +17,7 @@
}
@media only screen and (max-width: 500px) {
.pane_nav > .header {
nav.pane > .nav_header {
grid-template-columns: min-content 1fr min-content;
grid-template-areas: "logo blank hamburger";
@@ -27,7 +27,7 @@
}
}
.nav_logo {
nav .logo {
grid-area: logo;
font-family: var(--font-family-generic);

56
src/partials/_nav_menu.scss
View File

@@ -1,7 +1,7 @@
@use "nav_dropdown";
@use "nav_title";
.nav_menu {
nav .menu {
grid-area: menu;
// Remove default padding and style applied to ul for bullets.
@@ -20,39 +20,43 @@
}
}
.nav_item {
// Need to force inheritence, otherwise <a> would require
// overrides for all color states from base styling for element.
color: inherit;
text-decoration: none;
.menu {
.item {
// 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);
padding: 0 var(--spacing-small);
background-color: var(--background-2);
border-radius: var(--border-radius-small);
transition: var(--transition-fade);
}
background-color: var(--background-2);
border-radius: var(--border-radius-small);
transition: var(--transition-fade);
}
.nav_item:hover,
.nav_dropdown:hover .nav_item {
transform: var(--transform-scale-x);
transition: var(--transition-cut);
.nav_title,
ion-icon {
color: var(--highlight-hover);
.item:hover,
.dropdown:hover .item {
transform: var(--transform-scale-x);
transition: var(--transition-cut);
.title,
ion-icon {
color: var(--highlight-hover);
transition: var(--transition-cut);
}
}
}
@media only screen and (max-width: 500px) {
.nav_item {
padding: var(--padding-mobile);
background-color: var(--background-1);
}
.menu {
.item {
padding: var(--padding-mobile);
background-color: var(--background-1);
}
.nav_item:hover,
.nav_dropdown:hover .nav_item {
transform: none;
.item:hover,
.dropdown:hover .item {
transform: none;
}
}
}

24
src/partials/_nav_quick_links.scss
View File

@@ -1,4 +1,4 @@
.pane_nav .quick_links {
nav.pane .quick_links {
grid-area: quick_links;
--item-padding: 0.25rem;
@@ -37,28 +37,8 @@
}
}
.gitea {
color: var(--accent-green);
}
.github {
color: var(--accent-blue);
}
.license {
color: var(--accent-indigo);
}
.issue_tracker {
color: var(--accent-magenta);
}
.rss {
color: var(--accent-orange);
}
@media only screen and (max-width: 500px) {
.pane_nav .quick_links {
nav.pane .quick_links {
margin-bottom: var(--spacing-small);
--item-padding: var(--padding-mobile);

4
src/partials/_nav_title.scss
View File

@@ -1,4 +1,4 @@
.nav_title {
.menu .title {
// Need to force inheritence, otherwise <a> would require
// overrides for all color states from base styling for element.
color: inherit;
@@ -13,7 +13,7 @@
display: block;
}
.nav_title:hover {
.menu .title:hover {
color: var(--highlight-hover);
transition: var(--transition-cut);
}

174
src/partials/_page_resume.scss
View File

@@ -1,3 +1,7 @@
.r90 {
rotate: 90deg;
}
.pane_details {
display: flex !important;
flex-direction: column;
@@ -11,17 +15,6 @@
}
}
.spacer_contact {
justify-content: start !important;
.contact_info .chunk .header {
background-color: var(--background-1);
white-space: nowrap;
text-align: justify;
}
}
.about_me {
padding: 0 var(--spacing-thicc) var(--spacing-small);
}
@@ -41,165 +34,6 @@
grid-template-columns: 60% auto;
}
.software {
.three_dimensional_printing {
color: var(--accent-magenta);
}
.android {
color: var(--accent-green);
}
.anubis {
color: var(--accent-green);
}
.blender {
color: var(--accent-orange);
}
.davinci_resolve {
color: var(--accent-blue);
}
.gimp {
color: var(--accent-magenta);
}
.git {
color: var(--accent-orange);
}
.ios {
color: var(--white-0);
}
.libreoffice {
color: var(--accent-green);
}
.linux {
color: var(--white-0);
}
.macos {
color: var(--white-0);
}
.ms_office {
color: var(--accent-orange);
}
.ms_windows {
color: var(--accent-blue);
}
.musescore {
color: var(--accent-cyan);
}
.nextcloud {
color: var(--accent-cyan);
}
.nginx {
color: var(--accent-green);
}
.obs {
color: var(--white-0);
}
.photoshop {
color: var(--accent-blue);
}
.premiere_pro {
color: var(--accent-purple);
}
.prusaslicer {
color: var(--accent-orange);
}
.shopbot_control_software {
color: var(--accent-blue);
}
.cnc_machining,
.vectric_aspire {
color: var(--accent-red);
rotate: 90deg;
}
.zotero {
color: var(--accent-orange);
}
}
.prog_languages {
.asciidoc {
color: var(--accent-cyan);
}
.css {
color: var(--accent-purple);
}
.html {
color: var(--accent-orange);
}
.json {
color: var(--accent-cyan);
}
.markdown {
color: var(--accent-indigo);
}
.nginx {
color: var(--accent-green);
}
.python {
color: var(--accent-blue);
}
.ron {
color: var(--accent-orange);
}
.rust {
color: var(--accent-orange);
}
.scss {
color: var(--accent-magenta);
}
.toml {
color: var(--accent-orange);
}
.shell {
color: var(--accent-green);
}
.yaml {
color: var(--accent-yellow);
}
}
.docker {
/*
Docker is protective of their colours.
https://www.docker.com/company/newsroom/media-resources/
*/
color: #1d63edff;
}
@media only screen and (max-width: 500px) {
.awards,
.certifications,

47
src/partials/_pane_blog.scss
View File

@@ -1,43 +1,14 @@
@use "a_tailer";
.pane_blog {
grid-area: main;
.pane.blog {
flex: 1;
flex-direction: column;
margin: var(--spacing-large);
justify-content: center;
> .body {
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
padding-top: var(--spacing-small);
> .header {
text-align: center;
padding: var(--spacing-small);
width: min-content;
padding: var(--spacing-small) 0 0;
> header {
white-space: nowrap;
margin: 0 auto;
.title {
background-color: var(--background-1);
border-radius: var(--border-radius-leaf);
padding: var(--spacing-small);
}
.date {
display: block;
font-size: 0.85rem;
font-weight: normal;
font-style: italic;
font-family: var(--font-family-generic);
}
}
> .body {
@@ -45,10 +16,6 @@
padding: 0 var(--spacing-thicc) var(--spacing-thicc);
p {
color: var(--white-1);
}
img {
max-width: 100%;
max-height: 65vh;
@@ -61,11 +28,7 @@
}
@media only screen and (max-width: 500px) {
.pane_blog {
width: 100%;
.body > .body {
padding: var(--spacing-small);
}
.pane.blog .body > .body {
padding: var(--spacing-small);
}
}

19
src/partials/_pane_error.scss
View File

@@ -1,25 +1,12 @@
@use "a_tailer";
.pane_error {
grid-area: main;
.pane.error {
width: max-content;
margin: auto;
> .body,
.tailer {
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
padding: var(--spacing-small);
text-align: center;
}
text-align: center;
}
@media only screen and (max-width: 500px) {
.pane_error {
width: 100%;
.pane.error {
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-large);
}

38
src/partials/_pane_main.scss
View File

@@ -1,16 +1,16 @@
@use "a_tailer";
.pane_main {
main.pane {
grid-area: main;
margin: var(--spacing-large);
> .body {
> .body,
> footer {
background-color: var(--background-2);
border-radius: var(--border-radius-leaf);
}
> .body {
padding: var(--spacing-small);
> .header {
> header {
text-align: center;
padding: var(--spacing-small);
width: max-content;
@@ -35,16 +35,22 @@
> .body {
text-align: start;
}
}
p {
color: var(--white-1);
}
> footer {
margin: var(--spacing-large) auto 0;
width: min-content;
font-size: 1.65vh;
white-space: nowrap;
padding: var(--spacing-small);
text-align: center;
> p {
margin: 0;
}
}
}
@media only screen and (max-width: 500px) {
.pane_main {
width: 100%;
}
}

20
src/partials/_pane_nav.scss
View File

@@ -3,17 +3,15 @@
@use "nav_location";
@use "nav_quick_links";
.pane_nav {
nav.pane {
grid-area: nav;
--padding-mobile: 0.35rem;
margin: var(--spacing-large);
width: min-content;
height: min-content;
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
position: sticky;
top: var(--spacing-large);
@@ -27,14 +25,12 @@
}
@media only screen and (max-width: 500px) {
.pane_nav {
nav.pane {
width: calc(
calc(50% - var(--spacing-large) + var(--spacing-small)) *
2
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,
@@ -48,11 +44,11 @@
}
}
.pane_nav > #toggle:checked {
+ .header {
nav.pane > #toggle:checked {
+ .nav_header {
color: var(--highlight-hover);
+ .nav_menu {
+ .menu {
display: grid;
+ .location + .quick_links {

16
src/partials/_pane_spacer.scss
View File

@@ -1,18 +1,10 @@
.pane_spacer {
.pane.spacer {
grid-area: spacer;
margin: var(--spacing-large);
width: min-content;
height: calc(100vh - calc(var(--spacing-large) * 2));
display: grid;
grid-auto-flow: row dense;
gap: var(--spacing-medium);
position: sticky;
top: var(--spacing-large);
right: var(--spacing-large);
.spacer_container {
padding: var(--spacing-small);
@@ -32,8 +24,6 @@
}
}
@media only screen and (max-width: 500px) {
.pane_spacer {
width: 100%;
}
.spacer_container.blog_recent_posts {
justify-content: start !important;
}