From 83cef9c4ff259f5e4b3c1fc7ccf7760718c5c54e Mon Sep 17 00:00:00 2001 From: Zach Magloughlin Date: Sat, 30 Nov 2024 20:02:40 -0700 Subject: [PATCH] Tweaked projects.scss and skills.scss --- README.md | 1 - webpage/partials/_projects.scss | 76 +++++++++++++++++++-------------- webpage/partials/_skills.scss | 2 +- webpage/styles/main.css | 73 ++++++++++++++++++------------- webpage/styles/main.css.map | 2 +- 5 files changed, 91 insertions(+), 63 deletions(-) diff --git a/README.md b/README.md index dfc36f1..b745cf3 100644 --- a/README.md +++ b/README.md @@ -18,5 +18,4 @@ Active backlog: - https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/ - https://dev.to/selbekk/how-to-fade-in-content-as-it-scrolls-into-view-10j4 - In mobile view, get Projects drop-down menu text to show currently-selected category -- Change CSS selector for `
` to select the last div of that class type - When the user scrolls past the bottom of the page, footer background color does not continue diff --git a/webpage/partials/_projects.scss b/webpage/partials/_projects.scss index 44dce06..972b970 100644 --- a/webpage/partials/_projects.scss +++ b/webpage/partials/_projects.scss @@ -38,18 +38,23 @@ h1.project_title { .project_skills { margin: 0 auto; - display: flex; - width: 80%; padding-top: 5%; - align-items: center; - list-style-position: outside; } -.project_skills ul { - padding-left: 0; - padding-right: 0; +.project_skills ul li { + font-family: "Lucida Console", Courier, monospace; + list-style-type: none; +} +.project_skills ul li:before { + content: ">"; } + +.takeaways { + width: 90%; + margin: 0 auto; + border: 2% solid v.$navy-blue; +} .takeaways h1 { margin: 1rem auto; text-align: center; @@ -67,8 +72,6 @@ h1.project_title { background-color: v.$light-blue; width: 100%; margin-top: 2rem; - padding: 1rem 0; - border-bottom: 0.5rem solid v.$navy-blue; } #project_menu button#project_dropdown { @@ -77,14 +80,19 @@ h1.project_title { background-color: v.$light-blue; font-size: 2rem; margin: 0 auto; + border-bottom: 0.25rem solid v.$navy-blue; + padding: 1rem; + width: 100%; } - #project_menu .project_category { - display: none; - } - #project_menu a#email { - padding: 0.5rem 1rem; + #project_menu a { + padding: 0.5rem; font-size: 1.5rem; + text-align: center; + } + + #project_menu a.project_category { + display: none; } #project_menu a.visible { display: block; @@ -93,15 +101,19 @@ h1.project_title { display: none; } + a.project_category:first-of-type { + margin-top: 0.75rem; + } + a.project_category:first-of-type { + padding-bottom: 0.75rem; + } + .project_skills { font-size: 1.25rem; - width: 80%; + line-height: 1.5rem; + width: 100%; margin: 0 auto; } - .project_skills #left, .project_skills #right { - width: 50%; - } - } //Desktop @@ -132,30 +144,32 @@ h1.project_title { .project_container { width: 75%; } - - .project_skills #left { + + .project_skills { + display: flex; + align-items: center; + width: 80%; + } + .project_skills ul#left { float: left; width: 35%; } - .project_skills #right { + .project_skills ul#right { float: right; width: 65%; + margin-left: 1rem; + } + .project_skills ul { + padding-left: 0; + padding-right: 0; } - .project_skills ul li { font-family: "Lucida Console", Courier, monospace; list-style-type: none; font-size: 1.25rem; line-height: 1.2; } - .project_skills ul li:before { - content: ">"; - } - .takeaways { - border: 2% solid v.$navy-blue; - width: 90%; - } .takeaways h1 { text-decoration: underline v.$navy-blue; //Why isn't this border working? font-size: 1.5rem; @@ -172,7 +186,7 @@ h1.project_title { padding: 2%; background-color: v.$gray-blue; } -.project_divider#end { +.project_divider:last-of-type { margin-bottom: 0; } .project_divider img { diff --git a/webpage/partials/_skills.scss b/webpage/partials/_skills.scss index 84a9553..3b8103a 100644 --- a/webpage/partials/_skills.scss +++ b/webpage/partials/_skills.scss @@ -26,7 +26,7 @@ #skills .column { text-align: left; font-size: 1.5rem; - margin: 1%; + margin: 1% 0; padding: 3%; background-color: v.$light-blue; } diff --git a/webpage/styles/main.css b/webpage/styles/main.css index da66ba0..f6193a9 100644 --- a/webpage/styles/main.css +++ b/webpage/styles/main.css @@ -159,7 +159,7 @@ a:visited { #skills .column { text-align: left; font-size: 1.5rem; - margin: 1%; + margin: 1% 0; padding: 3%; background-color: rgb(203, 239, 252); } @@ -226,16 +226,22 @@ h1.project_title { .project_skills { margin: 0 auto; - display: flex; - width: 80%; padding-top: 5%; - align-items: center; - list-style-position: outside; } -.project_skills ul { - padding-left: 0; - padding-right: 0; +.project_skills ul li { + font-family: "Lucida Console", Courier, monospace; + list-style-type: none; +} + +.project_skills ul li:before { + content: ">"; +} + +.takeaways { + width: 90%; + margin: 0 auto; + border: 2% solid #091d3a; } .takeaways h1 { @@ -255,8 +261,6 @@ h1.project_title { background-color: rgb(203, 239, 252); width: 100%; margin-top: 2rem; - padding: 1rem 0; - border-bottom: 0.5rem solid #091d3a; } #project_menu button#project_dropdown { display: block; @@ -264,13 +268,17 @@ h1.project_title { background-color: rgb(203, 239, 252); font-size: 2rem; margin: 0 auto; + border-bottom: 0.25rem solid #091d3a; + padding: 1rem; + width: 100%; } - #project_menu .project_category { - display: none; - } - #project_menu a#email { - padding: 0.5rem 1rem; + #project_menu a { + padding: 0.5rem; font-size: 1.5rem; + text-align: center; + } + #project_menu a.project_category { + display: none; } #project_menu a.visible { display: block; @@ -278,14 +286,18 @@ h1.project_title { #project_menu a.invisible { display: none; } + a.project_category:first-of-type { + margin-top: 0.75rem; + } + a.project_category:first-of-type { + padding-bottom: 0.75rem; + } .project_skills { font-size: 1.25rem; - width: 80%; + line-height: 1.5rem; + width: 100%; margin: 0 auto; } - .project_skills #left, .project_skills #right { - width: 50%; - } } @media (min-width: 769px) { #projects { @@ -312,13 +324,23 @@ h1.project_title { .project_container { width: 75%; } - .project_skills #left { + .project_skills { + display: flex; + align-items: center; + width: 80%; + } + .project_skills ul#left { float: left; width: 35%; } - .project_skills #right { + .project_skills ul#right { float: right; width: 65%; + margin-left: 1rem; + } + .project_skills ul { + padding-left: 0; + padding-right: 0; } .project_skills ul li { font-family: "Lucida Console", Courier, monospace; @@ -326,13 +348,6 @@ h1.project_title { font-size: 1.25rem; line-height: 1.2; } - .project_skills ul li:before { - content: ">"; - } - .takeaways { - border: 2% solid #091d3a; - width: 90%; - } .takeaways h1 { text-decoration: underline #091d3a; font-size: 1.5rem; @@ -349,7 +364,7 @@ h1.project_title { background-color: rgb(169, 199, 210); } -.project_divider#end { +.project_divider:last-of-type { margin-bottom: 0; } diff --git a/webpage/styles/main.css.map b/webpage/styles/main.css.map index 07bb2ed..e891db4 100644 --- a/webpage/styles/main.css.map +++ b/webpage/styles/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../partials/_global.scss","../_variables.scss","../partials/_header.scss","../partials/_skills.scss","../partials/_projects.scss","../partials/_personal.scss","../partials/_footer.scss","../main.scss"],"names":[],"mappings":"AAEA;EACI;EACA;;;AAEJ;EACI,kBCPQ;;;ADWZ;EACI;EACA;EACA;;;AAIJ;EACI;IACI;;;AAIR;EACI;IACI;;;AExBR;AACA;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA,kBDnBS;ECoBT,ODtBQ;;;ACwBZ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAGJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAIJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;;;AAIJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBDxES;ECyET,OD3EQ;EC4ER;;;AAEJ;EACI;;;AAIJ;EAEI;IACI;;EAEJ;IACI;;EAIJ;IACI;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;;EAGJ;IACI;IACA;;;AC1GR;EACI;IACI;IACA;IACA;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA,kBF5BS;;;AE+Bb;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAKJ;EACI;IACI;IACA;;EAGJ;IACI;IACA;;;AClDR;EACI,kBHHQ;;;AGKZ;EACI;EACA;EACA,kBHPS;;;AGUb;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OHlBQ;;;AGoBZ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAIJ;EACI;IACI,kBHhEK;IGiEL;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA,kBH1EK;IG2EL;IACA;;EAGJ;IACI;;EAEJ;IACI;IACA;;EAEJ;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;;EAEJ;IACI;;;AAMR;EACI;IACI;IACA;IACA;;EAGJ;IACI;;EAEJ;IACI;IACA;IACA;IACA,kBHvHK;IGwHL,OH1HI;IG2HJ;IACA;IACA;;EAEJ;IACI;;EAGJ;IACI;;EAGJ;IACI;IACA;;EAEJ;IACI;IACA;;EAGJ;IACI;IACA;IACA;IACA;;EAEJ;IACI;;EAGJ;IACI;IACA;;EAEJ;IACI;IACA;IACA;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA,kBH3KQ;;;AG6KZ;EACI;;;AAEJ;EACI;;;AAGJ;AACA;EACI;;;AAEJ;EACI;IACI;;EAEJ;IACI;;;AC5LR;AACA;EACI;EACA;EACA;EACA,kBJNQ;;;AIQZ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA,OJtBQ;;;AKEZ;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI,OLVS;EKWT;EACA;EACA;;;ACNJ","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../partials/_global.scss","../_variables.scss","../partials/_header.scss","../partials/_skills.scss","../partials/_projects.scss","../partials/_personal.scss","../partials/_footer.scss","../main.scss"],"names":[],"mappings":"AAEA;EACI;EACA;;;AAEJ;EACI,kBCPQ;;;ADWZ;EACI;EACA;EACA;;;AAIJ;EACI;IACI;;;AAIR;EACI;IACI;;;AExBR;AACA;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA,kBDnBS;ECoBT,ODtBQ;;;ACwBZ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAGJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAIJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;;;AAIJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBDxES;ECyET,OD3EQ;EC4ER;;;AAEJ;EACI;;;AAIJ;EAEI;IACI;;EAEJ;IACI;;EAIJ;IACI;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;;EAGJ;IACI;IACA;;;AC1GR;EACI;IACI;IACA;IACA;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA,kBF5BS;;;AE+Bb;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAKJ;EACI;IACI;IACA;;EAGJ;IACI;IACA;;;AClDR;EACI,kBHHQ;;;AGKZ;EACI;EACA;EACA,kBHPS;;;AGUb;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OHlBQ;;;AGoBZ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAEJ;EACI;;;AAIJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAIJ;EACI;IACI,kBHrEK;IGsEL;IACA;;EAGJ;IACI;IACA;IACA,kBH7EK;IG8EL;IACA;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA;;EAGJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAGJ;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;;;AAKR;EACI;IACI;IACA;IACA;;EAGJ;IACI;;EAEJ;IACI;IACA;IACA;IACA,kBHnIK;IGoIL,OHtII;IGuIJ;IACA;IACA;;EAEJ;IACI;;EAGJ;IACI;;EAGJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;;EAEJ;IACI;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA,kBHzLQ;;;AG2LZ;EACI;;;AAEJ;EACI;;;AAGJ;AACA;EACI;;;AAEJ;EACI;IACI;;EAEJ;IACI;;;AC1MR;AACA;EACI;EACA;EACA;EACA,kBJNQ;;;AIQZ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA,OJtBQ;;;AKEZ;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI,OLVS;EKWT;EACA;EACA;;;ACNJ","file":"main.css"} \ No newline at end of file