Clean up CSS

Author: lwasser

assets/css/main.scss

@@ -88,8 +88,8 @@ h3 {
 /* Create & style a 3x3 grid wrapper */
 .grid {
   display: grid;
-  gap: 1px;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: .3rem;
 
   h4.grid_title {
     font-size: 1.4em;
@@ -199,23 +199,12 @@ nav bar: POSITION:relative to ensure it stays at the top */
   max-width: 25%;
 }
 
-.nav__links.vertical .dropdown .dropdown-content {
-  position: relative!important;
-  width: 100%;
-}
-/* button also needs to be 100% */
-.nav__links.vertical .dropbtn {
-  width: 100%;
-  text-align: left;
-}
 
-/* drop down should be the entire width of the ul block not just the
-parent text width  */
-.nav__links.vertical .dropdown-content {
-  min-width: 100%;
-}
+/* Upon click the menu should turn into a vertical stacked menu with a soft 
+drop shadow 
 
-// Upon click the menu should turn into a vertical stacked menu with a soft drop shadow
+TODO check for redundant styles
+*/
 .nav__links.vertical {
   position: absolute;
   display: flex;
@@ -230,13 +219,42 @@ parent text width  */
   z-index: 1;
   border: 1px solid #f2f3f3;
   border-radius: 4px;
-  background: #fff;
   -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-}
 
-.nav__links.vertical li {
-  width: 100%;
+  li {
+    width: 100%;
+  }
+
+  .dropdown-content {
+    min-width: 100%;
+  }
+  .dropbtn {
+    width: 100%;
+    text-align: left;
+  }
+
+  a {
+    float: none;
+    display: block; 
+    text-align: left;
+  }
+  .dropdown {
+    float: none;
+  }
+
+  .dropdown-content {position: relative;}
+
+  .dropdown .dropbtn {
+    display: block;
+    width: 100%;
+    text-align: left;
+  }
+
+  .dropdown .dropdown-content {
+    position: relative!important;
+    width: 100%;
+  }
 }
 /*  End nav links bar styles */
 
@@ -279,7 +297,6 @@ parent text width  */
 
 /* Begin burger styling: actual hamburger element (the horiz lines)*/
  .burger__icon {
-  /* //opacity: 0; */
   position: relative;
   width: 1.5rem;
   height: .25rem;
@@ -337,8 +354,6 @@ parent text width  */
   width: 1.5rem;
 }
 
-/* End burger styling */
-
 .visually-hidden {
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
@@ -347,9 +362,7 @@ parent text width  */
   border: 0 !important;
   overflow: hidden;
 }
-
-/*  end ham */
-
+/*  end burger */
 
 /* Dropdown container for nav links */
 .dropdown {
@@ -367,12 +380,9 @@ parent text width  */
   }
 }
 
-
 /* Style the dropdown content (hidden by default) */
 .dropdown-content {
   display: none;
-  // opacity: 0; /* here */
-  // position: absolute;
   background-color: #fff;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
@@ -397,15 +407,8 @@ parent text width  */
   color: $nav-hover-color;
 }
 
-/* Show the dropdown menu when the user hovers over the dropdown 
-button. What's most accessible, click only or click and hover both?
-Right now hover is removed
-*/
-/* .dropdown:hover .dropdown-content,  */
 .dropdown .dropdown-content.open {
   display: block;
-/* transform: translateY(0); 
-   opacity: 1;  */ 
 }
 /* This style may be removed ultimately - it is the fancy underline */
 
@@ -414,7 +417,7 @@ Right now hover is removed
   position: relative;
   color: #0087ca;
 }
-/* Make sure the line is 100% of text */
+
 .hover-underline {
   width: 100%;
   text-align: left !important;
@@ -441,38 +444,15 @@ Right now hover is removed
   transform: scaleX(1); // reveal
 }
 
-
 /* Add an active class to highlight the current page - might want to reinstate this */
 .active {
   background-color: #04AA6D;
   color: white;
 }
 
-
-
-/* When the screen is less than 600 pixels wide, hide all links, except for the 
-first one ("Home"). Show the link that contains should open and close the nav__links (.icon) */
-
-
-@media screen and (max-width: 600px) {
-
-  .grid {
-    display: grid;
-    gap: 1px;
-    grid-template-columns: repeat(1, 1fr);
-  }
-}
-
-
 /* 768 px */
 @media screen and (max-width: 768px) {
 
-  .grid {
-    display: grid;
-    gap: 1px;
-    grid-template-columns: repeat(2, 1fr);
-  }
-
   .hamburger__btn-toggle {
     //position: fixed; // not sure if this will help?
     display: block;
@@ -481,62 +461,21 @@ first one ("Home"). Show the link that contains should open and close the nav__l
     right: 5%;}
 
   burger__icon, burger__icon::before, burger__icon::after {
-    display: block;
-    
-  }
+    display: block; }
 
   /* Hide horizontal drop down links at 48em / 768px */
-  .nav__links {
-    display: none;
-  }
-  .nav__links {
-    a:not(:first-child), li, .dropdown .dropbtn {
-    
-    }
-
-    a.icon {
-      float: right;
-      display: block;
-      font-size: 2em;
-      padding-right: 1em;
-      padding-top: 0;
-    }
-  }
+  .nav__links { display: none;}
 
 /* Nav links goes vertical in responsive mode */
   .nav__links .vertical {
     position: absolute;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    padding-top: 2em;
+/*     padding-top: 2em;
     top: 50%;
     left: 70%;
-    background-color: #fff;
-
-    a.icon {
-      font-size: 2em; 
-      position: absolute;
-      right: 0; 
-      top: 0;
-      padding-right: 1em;
-    }
-    a {
-      float: none;
-      display: block; 
-      text-align: left;
-    }
-    .dropdown {
-      float: none;
-    }
-
-    .dropdown-content {position: relative;}
-
-    .dropdown .dropbtn {
-      display: block;
-      width: 100%;
-      text-align: left;
-    }
+    background-color: #fff; */
   }
    /* position search toggle by burger */
   .search__toggle {
@@ -547,7 +486,6 @@ first one ("Home"). Show the link that contains should open and close the nav__l
   }
 } 
 
-
 /* End media query 48em / 768 px */
 
 /* package cards splash */
@@ -563,10 +501,6 @@ first one ("Home"). Show the link that contains should open and close the nav__l
     font-size: 1.2em;
   }
 
-  // h3 {
-  //   font-size: 1.3em;
-  // }
-
   h3.card__title.no_toc {
     margin-top: .3em;
     font-size: 1.5em;