diff --git a/.gitignore b/.gitignore index 7ae7922..b60de5b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1 @@ **/target -src/resume.html diff --git a/src/partials/_a_common.scss b/src/partials/_a_common.scss index 6ac22e2..8d125d4 100644 --- a/src/partials/_a_common.scss +++ b/src/partials/_a_common.scss @@ -60,6 +60,7 @@ --spacing-horizontal: 0.75rem; --spacing-menu-gap: 1rem; + --spacing-thicc: calc(var(--margin-pane) * 4); --transition-fade: 0.4s ease-out; --transition-cut: none; @@ -109,9 +110,37 @@ ion-icon { /* Adds a margin otherwise for some reason. */ margin: inherit; - display: flex; - flex-flow: row wrap; - align-items: flex-start; + display: grid; + grid-auto-flow: column dense; + grid-template-columns: min-content 1fr min-content; +} + +@media only screen and (max-width: 500px) { + .viewport { + grid-auto-flow: row; + grid-template-columns: none; + + /* Compress spacings to maximize useable area. */ + padding: var(--spacing-horizontal); + justify-items: center; + } + + .pane_nav, + .pane_spacer, + .footer { + position: static; + top: auto; + left: auto; + right: auto; + } + + .pane_nav, + .pane_main, + .pane_blog, + .pane_error, + .pane_spacer { + margin: 0; + } } .italic { diff --git a/src/partials/_page_resume.scss b/src/partials/_page_resume.scss index cc11636..823eed4 100644 --- a/src/partials/_page_resume.scss +++ b/src/partials/_page_resume.scss @@ -1,37 +1,49 @@ -.early_history { - align-self: center; -} +.pane_details { + display: flex !important; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; -.work_history, -.education { - .chunk_list { - flex-direction: column-reverse !important; + .spacer_container { + height: min-content !important; + width: 100%; + padding-top: 0 !important; } } -.awards, -.certifications, -.education, -.work_history { - max-width: 44%; +.spacer_contact { + justify-content: start !important; + + .contact_info .chunk .header { + background-color: var(--background-1); + + white-space: nowrap; + text-align: justify; + } } -.software, -.prog_languages { +.about_me { + padding: 0 var(--spacing-thicc) var(--spacing-horizontal); +} + +.early_history { + justify-self: center; +} + +.prog_languages, +.software { * { margin: 0.5rem; } } +.software_row { + grid-template-columns: 60% auto; +} + .software { - max-width: 55%; - - .premiere_pro { - color: var(--accent-purple); - } - - .photoshop { - color: var(--accent-blue); + .android { + color: var(--accent-green); } .anubis { @@ -54,14 +66,22 @@ color: var(--accent-orange); } - .libreoffice { + .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); } @@ -86,6 +106,14 @@ color: var(--white-0); } + .photoshop { + color: var(--accent-blue); + } + + .premiere_pro { + color: var(--accent-purple); + } + .prusaslicer { color: var(--accent-orange); } @@ -105,8 +133,6 @@ } .prog_languages { - max-width: 30%; - .asciidoc { color: var(--accent-cyan); } @@ -168,3 +194,14 @@ color: #1d63edff; } + +@media only screen and (max-width: 500px) { + .awards, + .certifications, + .education, + .prog_languages, + .software, + .work_history { + width: 100%; + } +} diff --git a/src/resume.html b/src/resume.html new file mode 100644 index 0000000..c2dbed1 --- /dev/null +++ b/src/resume.html @@ -0,0 +1,557 @@ + + + +
+