Tweaked projects.scss and skills.scss

ZachMc21 · Dec 1, 2024 · 83cef9c · 83cef9c
1 parent 14c52e6
commit 83cef9c
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 63 deletions.
diff --git 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 `<div class="project_divider fade-in" id="end">` 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
@@ -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
@@ -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
@@ -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,37 +261,43 @@ 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;
     border: none;
     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;
   }
   #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,27 +324,30 @@ 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 #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