reduced padding and margings to save space

Author: anastascho

src/css/search.css

@@ -13,14 +13,34 @@
   }
 
   .search-input-landing {
-    width: 800px;
+    width: 1200px;
     padding: 2 2.25em;
-    padding-right: 30rem;
+    padding-right: 2rem;
+  }
+
+  .sections-page .search-result-dropdown-menu {
+    position: absolute;
+    z-index: 100;
+    display: block;
+    left: 0;
+    top: 100%;
+    border-radius: 4px;
+    /* margin: 6px 0 0; */
+    margin-left: 0.75rem !important;
+    margin-top: -6rem !important;
+    padding: 0;
+    text-align: left;
+    height: auto;
+    background: transparent;
+    border: none;
+    max-width: 600px;
+    min-width: 500px;
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
   }
 }
 
 .search-input-landing {
-  padding-right: 6rem !important;
+  padding-right: 4rem !important;
   background-color: var(--color-smoke-70);
   box-shadow: rgba(0, 0, 0, 0.24) 1px 3px 8px;
 }
@@ -50,6 +70,10 @@
   #search-input {
     width: 200px;
   }
+
+  /* .sections-page .search-result-dropdown-menu {
+    margin-top: -1rem !important;
+  } */
 }
 
 .search-result-dropdown-menu {
@@ -72,26 +96,6 @@
   box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
 }
 
-.sections-page .search-result-dropdown-menu {
-  position: absolute;
-  z-index: 100;
-  display: block;
-  left: 0;
-  top: 100%;
-  border-radius: 4px;
-  /* margin: 6px 0 0; */
-  margin-left: 0.75rem !important;
-  margin-top: -3rem !important;
-  padding: 0;
-  text-align: left;
-  height: auto;
-  background: transparent;
-  border: none;
-  max-width: 600px;
-  min-width: 500px;
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
-}
-
 @media screen and (max-width: 768px) {
   .navbar-brand .navbar-item + .navbar-item {
     padding-left: 0;
@@ -105,7 +109,10 @@
   .search-input-landing {
     width: 800px;
     padding: 2 2.25em;
-    padding-right: 30rem;
+  }
+
+  .sections-page .search-result-dropdown-menu {
+    margin-top: -6rem !important;
   }
 }
 

src/css/sections-header.css

@@ -4,9 +4,9 @@ html.is-clipped--navbar {
 
 .sections-header {
   border-bottom: 0.1rem solid var(--nav-border-color);
-  padding-bottom: 0.75rem !important;
+  padding-bottom: 0.25rem !important;
   margin-top: -3rem;
-  margin-bottom: 1.25rem;
+  margin-bottom: 0.25rem;
 }
 
 .sections-navbar {

src/css/sections.css

@@ -13,7 +13,7 @@
   position: relative;
   float: left;
   width: 100%;
-  grid-gap: 2rem;
+  /* grid-gap: 2rem; */
   flex-wrap: wrap;
   /* background-color: #496583; */
 }
@@ -51,6 +51,11 @@
 
 /* Tiles to sections css */
 
+.sectionPurple .innerTile,
+.sectionBlue .innerTile {
+  margin-top: 0.5rem !important;
+}
+
 .innerTile > .content {
   background: transparent !important;
   border: 6px solid var(--color-white) !important;
@@ -59,7 +64,7 @@
 }
 
 .innerTile > div > div.imageblock.xref-page > div > a > img {
-  margin: 2rem 0.25rem !important;
+  margin: 1rem 0.25rem !important;
 }
 
 .innerTile > .content > .title {
@@ -72,10 +77,10 @@
   background-color: white;
   width: 100%;
   padding: unset;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  /* padding-top: 1rem; */
+  padding-bottom: 0.5rem;
   position: relative;
-  height: 40vh;
+  height: 20rem;
 }
 
 .sectionWhite > .content {
@@ -106,15 +111,15 @@
 }
 
 .sectionWhite-heading {
-  font-size: 2.8rem;
+  font-size: 2.25rem;
   font-weight: bold;
   color: #496583;
   padding: 1.2rem 0.1rem;
   word-break: keep-all;
 }
 
 .sectionWhite-heading-blue {
-  font-size: 2.2rem;
+  font-size: 2rem;
   font-weight: bold;
   color: #2945a3;
   padding: 1.2rem 0.1rem;
@@ -125,7 +130,7 @@
   background-color: white;
   color: #2945a3;
   padding: 0.75rem 7rem;
-  margin-top: 0.5rem;
+  margin-top: 1rem;
   border: none;
   box-shadow: rgba(0, 0, 0, 0.24) 1px 3px 8px;
   font-size: 1rem;
@@ -147,7 +152,7 @@
   width: 100%;
   grid-gap: 2rem;
   flex-wrap: wrap;
-  height: 52vh;
+  height: 23rem;
 }
 
 .sectionBlue > .tile {
@@ -188,7 +193,7 @@
   width: 100%;
   grid-gap: 2rem;
   flex-wrap: wrap;
-  height: 52vh;
+  height: 23rem;
 }
 
 .sectionPurple > .tile {
@@ -287,7 +292,7 @@
 
   .get-started-button {
     padding: 0.5rem 4rem;
-    font-size: 0.75rem;
+    font-size: 0.5rem;
   }
 
   .sectionWhite-heading-blue > p {