From 0d4604ddd641b2853756f58afefee69abb074212 Mon Sep 17 00:00:00 2001 From: mattkae Date: Sat, 10 Dec 2022 11:38:15 -0500 Subject: Updated how styles are calculated for the cv.pdf build --- resume.css | 123 ++++++++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 82 insertions(+), 41 deletions(-) (limited to 'resume.css') diff --git a/resume.css b/resume.css index a706f31..0cbf4a1 100755 --- a/resume.css +++ b/resume.css @@ -28,33 +28,50 @@ header { padding-bottom: 1rem; } +#resume_container { + display: flex; + flex-direction: row; +} + #resume a { color: #343231; } +#resume_sidebar { + width: auto; + margin-right: 1rem; +} + #resume_header { - width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; + flex-direction: column; + align-items: flex-start; + margin-bottom: 32px; } -#resume_header > h1 { - font-size: 24px; +.resume_header_name { + font-size: 48px; + font-variant: small-caps; + word-wrap: break-word; padding: 0; margin: 0; font-weight: 500; + margin-bottom: 32px; } #resume_header_contact { + margin-top: 16px; display: flex; flex-direction: row; + flex-direction: column; } #resume_header_contact span { - margin-right: 0.5rem; - margin-left: 0.5rem; + margin-top: 5px; + font-size: 16px; } #resume_header_contact i { @@ -73,7 +90,7 @@ header { font-weight: bold; padding: 0; margin: 0; - padding: 10px; + padding: 5px; background-color: #2E4C6D; color: white; } @@ -82,21 +99,6 @@ header { padding: 0.5rem; } -.skill-section { - width: 100%; - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.skill-section > b { - width: 25%; -} - -.skill-section > div { - width: 75%; -} - .experience-header > div { display: flex; flex-direction: row; @@ -113,12 +115,69 @@ header { display: flex; flex-direction: row; justify-content: flex-start; - column-gap: 8px; } .experience-tech > svg { width: 20px; height: 20px; + margin-right: 8px; +} + +#skills_section { + display: flex; + flex-direction: column; +} + +.skills_section_item { + display: flex; + flex-direction: column; + margin-bottom: 24px; +} + +.skills_section_bar { + position: relative; + width: 204px; + height: 24px; + background-color: white; + border-radius: 3px; + border: 1px solid lightgray; +} + +.skills_section_bar_fill { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-image: linear-gradient(to right,#007acc, #00E091); + border-radius: 3px; +} + +.skills_section_bar_fill.one { + width: 20%; +} + +.skills_section_bar_fill.two { + width: 40%; +} + +.skills_section_bar_fill.three { + width: 60%; +} + +.skills_section_bar_fill.four { + width: 80%; +} + +.skills_section_bar_fill.five { + width: 100%; +} + +.skills_section_label { + width: 100%; + margin-top: 4px; + color: black; + font-size: 16px; } @@ -150,22 +209,4 @@ header { width: calc(100vw - 4rem); height: calc(100vh - 4rem); overflow: auto; -} - -/* Phone screen adjustments */ -@media only screen and (device-width: 960px), -only screen and (max-width:960px) { - #resume_header { - flex-direction: column; - align-items: flex-start; - } - - #resume_header_contact { - flex-direction: column; - } - - #resume_header_contact span { - margin: 0; - margin-top: 5px; - } -} +} \ No newline at end of file -- cgit v1.2.1 From 2cdc62447a7ac97b22214dcc00be05b55be46715 Mon Sep 17 00:00:00 2001 From: mattkae Date: Sat, 10 Dec 2022 12:01:31 -0500 Subject: Updated resume to contain proper stylings on download --- resume.css | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) (limited to 'resume.css') diff --git a/resume.css b/resume.css index 0cbf4a1..b91ab25 100755 --- a/resume.css +++ b/resume.css @@ -38,8 +38,8 @@ header { } #resume_sidebar { - width: auto; - margin-right: 1rem; + width: 204px; + margin-right: 24px; } #resume_header { @@ -70,12 +70,15 @@ header { } #resume_header_contact span { - margin-top: 5px; + margin-bottom: 8px; font-size: 16px; + display: flex; + flex-direction: row; + align-items: center; } #resume_header_contact i { - margin-right: 0.25rem; + margin-right: 8px; font-style: normal; } @@ -136,8 +139,8 @@ header { .skills_section_bar { position: relative; - width: 204px; - height: 24px; + width: 100%; + height: 16px; background-color: white; border-radius: 3px; border: 1px solid lightgray; @@ -151,6 +154,7 @@ header { width: 100%; background-image: linear-gradient(to right,#007acc, #00E091); border-radius: 3px; + background-size: 204px 100%; } .skills_section_bar_fill.one { -- cgit v1.2.1 From ac5a69c5bdff67e67991ac5fdfae39f2d2f157d3 Mon Sep 17 00:00:00 2001 From: mattkae Date: Wed, 14 Dec 2022 21:16:18 -0500 Subject: Updating css around resume and posts for small screens --- resume.css | 230 +++++++++++++++++++++++++++++++------------------------------ 1 file changed, 117 insertions(+), 113 deletions(-) (limited to 'resume.css') diff --git a/resume.css b/resume.css index b91ab25..346b02a 100755 --- a/resume.css +++ b/resume.css @@ -1,36 +1,33 @@ html { - overflow-y: overlay; -} - -body { - font-size: 14px !important; + overflow-y: overlay; + font-size: 16px; } header { - padding-bottom: 1rem; + padding-bottom: 1rem; } #actions_container { - padding-bottom: 1rem; - - display: flex; - flex-direction: row; - justify-content: flex-end; + padding-bottom: 1rem; + + display: flex; + flex-direction: row; + justify-content: flex-end; } #resume { - position: relative; - text-align: left; - background-color: white; - color: black; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - line-height: 1.2rem; - padding-bottom: 1rem; + position: relative; + text-align: left; + background-color: white; + color: black; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.325rem; + padding-bottom: 1rem; } #resume_container { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } #resume a { @@ -38,63 +35,64 @@ header { } #resume_sidebar { - width: 204px; - margin-right: 24px; + width: 12rem; + margin-right: 1.5rem; } #resume_header { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - flex-direction: column; - align-items: flex-start; - margin-bottom: 32px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + flex-direction: column; + align-items: flex-start; + margin-bottom: 2rem; } .resume_header_name { - font-size: 48px; - font-variant: small-caps; - word-wrap: break-word; - padding: 0; - margin: 0; + font-size: 3rem; + font-variant: small-caps; + word-wrap: break-word; + padding: 0; + margin: 0; font-weight: 500; - margin-bottom: 32px; + margin-bottom: 2rem; } #resume_header_contact { - margin-top: 16px; - display: flex; - flex-direction: row; - flex-direction: column; + margin-top: 1rem; + display: flex; + flex-direction: row; + flex-direction: column; } #resume_header_contact span { - margin-bottom: 8px; - font-size: 16px; - display: flex; - flex-direction: row; - align-items: center; + margin-bottom: 0.5rem; + font-size: 1rem; + display: flex; + flex-direction: row; + align-items: center; } #resume_header_contact i { - margin-right: 8px; - font-style: normal; + margin-right: 0.5rem; + font-style: normal; } .resume_section { - width: 100%; - text-align: left; + width: 100%; + text-align: left; + font-size: 1rem; } .resume_section > h2 { - font-size: 18px !important; - font-variant: small-caps; - font-weight: bold; - padding: 0; - margin: 0; - padding: 5px; - background-color: #2E4C6D; + font-size: 1.125rem; + font-variant: small-caps; + font-weight: bold; + padding: 0; + margin: 0; + padding: 0.25rem; + background-color: #2E4C6D; color: white; } @@ -103,114 +101,120 @@ header { } .experience-header > div { - display: flex; - flex-direction: row; - justify-content: space-between; + display: flex; + flex-direction: row; + justify-content: space-between; } .experience-item li { - width: 100%; + width: 100%; } .experience-tech { - font-size: 14px; - width: 100%; - display: flex; - flex-direction: row; - justify-content: flex-start; + font-size: 1rem; + width: 100%; + display: flex; + flex-direction: row; + justify-content: flex-start; } .experience-tech > svg { - width: 20px; - height: 20px; - margin-right: 8px; + width: 1.125rem; + height: 1.125rem; + margin-right: 0.5rem; } #skills_section { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .skills_section_item { - display: flex; - flex-direction: column; - margin-bottom: 24px; + display: flex; + flex-direction: column; + margin-bottom: 1.5rem; } .skills_section_bar { - position: relative; - width: 100%; - height: 16px; - background-color: white; - border-radius: 3px; - border: 1px solid lightgray; + position: relative; + width: 100%; + height: 1rem; + background-color: white; + border-radius: 3px; + border: 1px solid lightgray; } .skills_section_bar_fill { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background-image: linear-gradient(to right,#007acc, #00E091); - border-radius: 3px; - background-size: 204px 100%; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-image: linear-gradient(to right,#007acc, #00E091); + border-radius: 3px; + background-size: 12rem 100%; } .skills_section_bar_fill.one { - width: 20%; + width: 20%; } .skills_section_bar_fill.two { - width: 40%; + width: 40%; } .skills_section_bar_fill.three { - width: 60%; + width: 60%; } .skills_section_bar_fill.four { - width: 80%; + width: 80%; } .skills_section_bar_fill.five { - width: 100%; + width: 100%; } .skills_section_label { - width: 100%; - margin-top: 4px; - color: black; - font-size: 16px; + width: 100%; + margin-top: 0.25rem; + color: black; + font-size: 1rem; } /** Web-only **/ #resume_button_container { - width: 100%; - text-align: right; - margin-right: 1rem; - margin-bottom: 1rem; - + width: 100%; + text-align: right; + margin-right: 1rem; + margin-bottom: 1rem; + } #resume_button_container > button { - border: none; - background-color: transparent; - font-size: 20px; + border: none; + background-color: transparent; + font-size: 20px; } #resume_button_container > button:hover { - cursor: pointer; - opacity: 0.8; + cursor: pointer; + opacity: 0.8; } #resume.resume_fullscreen { - position: fixed; - top: 0; - left: 0; - padding: 2rem; - width: calc(100vw - 4rem); - height: calc(100vh - 4rem); - overflow: auto; -} \ No newline at end of file + position: fixed; + top: 0; + left: 0; + padding: 2rem; + width: calc(100vw - 4rem); + height: calc(100vh - 4rem); + overflow: auto; +} + +@media (max-width: 767.98px) { + html { + font-size: 12px; + } +} -- cgit v1.2.1 From 4f5074fa431cba03ed0cd76739e95a2c4662266a Mon Sep 17 00:00:00 2001 From: mattkae Date: Sat, 17 Dec 2022 20:08:56 -0500 Subject: Updating styles on resume --- resume.css | 1 + 1 file changed, 1 insertion(+) (limited to 'resume.css') diff --git a/resume.css b/resume.css index 346b02a..e6b4256 100755 --- a/resume.css +++ b/resume.css @@ -116,6 +116,7 @@ header { display: flex; flex-direction: row; justify-content: flex-start; + margin-top: 0.2rem; } .experience-tech > svg { -- cgit v1.2.1 From be08f5ab31a79c41b1f6f768831b02feba16a3ae Mon Sep 17 00:00:00 2001 From: mattkae Date: Sun, 18 Dec 2022 10:02:16 -0500 Subject: Update to sidebar --- resume.css | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) (limited to 'resume.css') diff --git a/resume.css b/resume.css index e6b4256..a71be83 100755 --- a/resume.css +++ b/resume.css @@ -125,6 +125,32 @@ header { margin-right: 0.5rem; } +.skills_table { + width: 100%; + margin-bottom: 2rem; + border-spacing: 0; + border: 1px solid gray; + border-radius: 2px; +} + +.skills_table th { + text-align: center; +} + +.skills_table th, .skills_table tr:not(:last-child) td { + border-bottom: 1px solid lightgray; +} + +.skills_table tr th { + color: #2E4C6D; +} + +.skills_table td, th { + font-size: 0.9rem; + padding: 0.35rem 0.5rem; + width: 50%; +} + #skills_section { display: flex; flex-direction: column; -- cgit v1.2.1