diff --git a/build.sh b/build.sh index 4050982..92b76fe 100755 --- a/build.sh +++ b/build.sh @@ -57,7 +57,7 @@ do elif [ "$x" == 'style' ] then - cmd='sass' + cmd='sass --update' files=(` find src -not\ @@ -107,7 +107,7 @@ do mkdir -p target/img/blog/posts - action='Converting and Copying Images...' + action='Converting Images...' elif [ "$x" == 'clean' ] then @@ -123,11 +123,15 @@ do echo -e "$green"Options:"$cyan" echo ' -h, --help Print help' echo + echo 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 ' 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 fi diff --git a/src/about.html b/src/about.html index 091381f..b674b05 100644 --- a/src/about.html +++ b/src/about.html @@ -8,11 +8,11 @@
diff --git a/src/acknowledgements.html b/src/acknowledgements.html index ad0de19..bd10234 100644 --- a/src/acknowledgements.html +++ b/src/acknowledgements.html @@ -8,11 +8,11 @@
diff --git a/src/blog/index.html b/src/blog/index.html index 48d7120..1d45f2b 100644 --- a/src/blog/index.html +++ b/src/blog/index.html @@ -8,11 +8,11 @@
diff --git a/src/blog/posts/0_divergent_pathways.html b/src/blog/posts/0_divergent_pathways.html index 6386042..46808fa 100644 --- a/src/blog/posts/0_divergent_pathways.html +++ b/src/blog/posts/0_divergent_pathways.html @@ -8,11 +8,11 @@
diff --git a/src/blog/posts/1_unsure_u.html b/src/blog/posts/1_unsure_u.html index bc33e13..2a78eaa 100644 --- a/src/blog/posts/1_unsure_u.html +++ b/src/blog/posts/1_unsure_u.html @@ -8,11 +8,11 @@
diff --git a/src/disclosure.html b/src/disclosure.html index fb0fae4..c74ae29 100644 --- a/src/disclosure.html +++ b/src/disclosure.html @@ -8,11 +8,11 @@
diff --git a/src/errors/400.html b/src/errors/400.html index 8b99adb..0c92113 100644 --- a/src/errors/400.html +++ b/src/errors/400.html @@ -8,11 +8,11 @@
diff --git a/src/errors/401.html b/src/errors/401.html index 3cda9ca..1ac1e52 100644 --- a/src/errors/401.html +++ b/src/errors/401.html @@ -8,11 +8,11 @@
diff --git a/src/errors/403.html b/src/errors/403.html index 02c11f1..10c7e7c 100644 --- a/src/errors/403.html +++ b/src/errors/403.html @@ -8,11 +8,11 @@
diff --git a/src/errors/404.html b/src/errors/404.html index e795ffe..7bd62e2 100644 --- a/src/errors/404.html +++ b/src/errors/404.html @@ -8,11 +8,11 @@
diff --git a/src/errors/500.html b/src/errors/500.html index 4553d2e..b40328e 100644 --- a/src/errors/500.html +++ b/src/errors/500.html @@ -8,11 +8,11 @@
diff --git a/src/errors/501.html b/src/errors/501.html index 9330c7b..21e1b96 100644 --- a/src/errors/501.html +++ b/src/errors/501.html @@ -8,11 +8,11 @@
diff --git a/src/errors/502.html b/src/errors/502.html index c0d00ed..73b2840 100644 --- a/src/errors/502.html +++ b/src/errors/502.html @@ -8,11 +8,11 @@
diff --git a/src/errors/503.html b/src/errors/503.html index e60cbc2..2cd5548 100644 --- a/src/errors/503.html +++ b/src/errors/503.html @@ -8,11 +8,11 @@
diff --git a/src/errors/504.html b/src/errors/504.html index 440ac34..da31dbb 100644 --- a/src/errors/504.html +++ b/src/errors/504.html @@ -8,11 +8,11 @@
diff --git a/src/includes/_unused_menu_entries.html b/src/includes/_unused_menu_entries.html index 33473f4..01d7a30 100644 --- a/src/includes/_unused_menu_entries.html +++ b/src/includes/_unused_menu_entries.html @@ -1,10 +1,10 @@
  • -
    +
    Minecraft
    -
    +
    Bearock SMP Rebirth SMP
    diff --git a/src/includes/nav_header.html b/src/includes/nav_header.html new file mode 100644 index 0000000..e683bad --- /dev/null +++ b/src/includes/nav_header.html @@ -0,0 +1,5 @@ + + diff --git a/src/includes/nav_logo.html b/src/includes/nav_logo.html deleted file mode 100644 index 7a5399b..0000000 --- a/src/includes/nav_logo.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/includes/nav_menu.html b/src/includes/nav_menu.html index 269c407..aad1c14 100644 --- a/src/includes/nav_menu.html +++ b/src/includes/nav_menu.html @@ -15,11 +15,11 @@
  • - +

    Pronoun Pages

     -
    +
    English French
    @@ -27,11 +27,11 @@
  • -
    +

    External Links

    -
    +
    Github (Mirror) Twitch YouTube @@ -42,22 +42,22 @@
  • -
    +

    Public Services

    -
    +
    Web Check
  • -
    +

    Services

    -
    +
    Gitea
    • diff --git a/src/index.html b/src/index.html index b9a13c2..368a10c 100644 --- a/src/index.html +++ b/src/index.html @@ -8,11 +8,11 @@
    @@ -31,20 +31,7 @@ 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. + inceptos himenaeos.

    diff --git a/src/minecraft/bearock/index.html b/src/minecraft/bearock/index.html index b177f8a..bc80c91 100644 --- a/src/minecraft/bearock/index.html +++ b/src/minecraft/bearock/index.html @@ -8,16 +8,16 @@
    -

    This page has not yet been filled out. Sorry!

    +

    This page has not yet been filled out. Sorry!

    diff --git a/src/minecraft/index.html b/src/minecraft/index.html index b6e6dc3..caefac4 100644 --- a/src/minecraft/index.html +++ b/src/minecraft/index.html @@ -8,16 +8,16 @@
    -

    This page has not yet been filled out. Sorry!

    +

    This page has not yet been filled out. Sorry!

    diff --git a/src/minecraft/rebirth/index.html b/src/minecraft/rebirth/index.html index af698fd..d986741 100644 --- a/src/minecraft/rebirth/index.html +++ b/src/minecraft/rebirth/index.html @@ -8,16 +8,16 @@
    -

    This page has not yet been filled out. Sorry!

    +

    This page has not yet been filled out. Sorry!

    diff --git a/src/partials/_a_chunk_list.scss b/src/partials/_a_chunk_list.scss index 5121234..b1c3809 100644 --- a/src/partials/_a_chunk_list.scss +++ b/src/partials/_a_chunk_list.scss @@ -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 { diff --git a/src/partials/_a_common.scss b/src/partials/_a_common.scss index 8d125d4..383193e 100644 --- a/src/partials/_a_common.scss +++ b/src/partials/_a_common.scss @@ -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, diff --git a/src/partials/_a_footer.scss b/src/partials/_a_footer.scss index 30e99e5..9b6939b 100644 --- a/src/partials/_a_footer.scss +++ b/src/partials/_a_footer.scss @@ -1,6 +1,6 @@ .footer { margin: 0; - padding: var(--spacing-horizontal); + padding: var(--spacing-small); width: min-content; background-color: var(--background-2); diff --git a/src/partials/_a_layouts.scss b/src/partials/_a_layouts.scss index 6dd5c6f..6b93065 100644 --- a/src/partials/_a_layouts.scss +++ b/src/partials/_a_layouts.scss @@ -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) { diff --git a/src/partials/_a_tailer.scss b/src/partials/_a_tailer.scss index edeb5d8..4a213dd 100644 --- a/src/partials/_a_tailer.scss +++ b/src/partials/_a_tailer.scss @@ -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; } diff --git a/src/partials/_nav_dropdown.scss b/src/partials/_nav_dropdown.scss index 5e79eed..0899ae0 100644 --- a/src/partials/_nav_dropdown.scss +++ b/src/partials/_nav_dropdown.scss @@ -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); + } +} diff --git a/src/partials/_nav_header.scss b/src/partials/_nav_header.scss new file mode 100644 index 0000000..5e813f6 --- /dev/null +++ b/src/partials/_nav_header.scss @@ -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; +} diff --git a/src/partials/_nav_location.scss b/src/partials/_nav_location.scss index 2823052..a4e0778 100644 --- a/src/partials/_nav_location.scss +++ b/src/partials/_nav_location.scss @@ -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; } } diff --git a/src/partials/_nav_logo.scss b/src/partials/_nav_logo.scss deleted file mode 100644 index bc180e2..0000000 --- a/src/partials/_nav_logo.scss +++ /dev/null @@ -1,5 +0,0 @@ -.nav_logo { - font-family: var(--font-family-generic); - text-align: center; - margin: 0; -} diff --git a/src/partials/_nav_menu.scss b/src/partials/_nav_menu.scss index a81d9fb..9763b6e 100644 --- a/src/partials/_nav_menu.scss +++ b/src/partials/_nav_menu.scss @@ -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 would require overrides for all color states from base styling for element. - */ + // Need to force inheritence, otherwise 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; + } +} diff --git a/src/partials/_nav_quick_links.scss b/src/partials/_nav_quick_links.scss index 81db5cc..681a3eb 100644 --- a/src/partials/_nav_quick_links.scss +++ b/src/partials/_nav_quick_links.scss @@ -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 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; + } + } +} diff --git a/src/partials/_nav_title.scss b/src/partials/_nav_title.scss index 2385f88..87f8251 100644 --- a/src/partials/_nav_title.scss +++ b/src/partials/_nav_title.scss @@ -1,5 +1,6 @@ .nav_title { - /* Need to force inheritence, otherwise would require overrides for all color states from base styling for element. */ + // Need to force inheritence, otherwise 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); + } +} +*/ diff --git a/src/partials/_page_resume.scss b/src/partials/_page_resume.scss index e8e06c8..967c879 100644 --- a/src/partials/_page_resume.scss +++ b/src/partials/_page_resume.scss @@ -23,7 +23,7 @@ } .about_me { - padding: 0 var(--spacing-thicc) var(--spacing-horizontal); + padding: 0 var(--spacing-thicc) var(--spacing-small); } .early_history { diff --git a/src/partials/_pane_blog.scss b/src/partials/_pane_blog.scss index 4d50218..983ba64 100644 --- a/src/partials/_pane_blog.scss +++ b/src/partials/_pane_blog.scss @@ -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); } } } diff --git a/src/partials/_pane_error.scss b/src/partials/_pane_error.scss index 4c2604f..d045015 100644 --- a/src/partials/_pane_error.scss +++ b/src/partials/_pane_error.scss @@ -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); } } diff --git a/src/partials/_pane_main.scss b/src/partials/_pane_main.scss index eedc345..46ab308 100644 --- a/src/partials/_pane_main.scss +++ b/src/partials/_pane_main.scss @@ -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 { diff --git a/src/partials/_pane_nav.scss b/src/partials/_pane_nav.scss index 17d7ce5..9d79245 100644 --- a/src/partials/_pane_nav.scss +++ b/src/partials/_pane_nav.scss @@ -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; + } + } + } } } diff --git a/src/partials/_pane_spacer.scss b/src/partials/_pane_spacer.scss index 125f528..3ae61d9 100644 --- a/src/partials/_pane_spacer.scss +++ b/src/partials/_pane_spacer.scss @@ -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); diff --git a/src/resume.html b/src/resume.html index 2ac39a3..9c95dee 100644 --- a/src/resume.html +++ b/src/resume.html @@ -9,11 +9,11 @@
    diff --git a/src/templates/blog_post.html b/src/templates/blog_post.html index 400db48..7b0ab27 100644 --- a/src/templates/blog_post.html +++ b/src/templates/blog_post.html @@ -8,16 +8,16 @@
    -
    +

    Blog Post Template

    Posted: 01 January, 2025

    diff --git a/src/templates/error.html b/src/templates/error.html index 5bcd7dc..4f72f2c 100644 --- a/src/templates/error.html +++ b/src/templates/error.html @@ -8,16 +8,16 @@
    -
    +

    Error Code

    Error Title

    diff --git a/src/templates/main.html b/src/templates/main.html index 082ac47..1dba0b3 100644 --- a/src/templates/main.html +++ b/src/templates/main.html @@ -8,16 +8,16 @@
    -
    +