fix(client): minor issues with header/footer styles

client/src/components/Footer/footer.css

@@ -1,11 +1,10 @@
-footer{
+footer {
   position: absolute;
-  background-color: #E0E0E0;
+  background-color: #e0e0e0;
-  color:#555555;
+  color: #555555;
   background-size: cover;
-  font-size: .9em;
+  font-size: 0.9em;
-  width:100%;
+  width: 100%;
-  margin-top: 5px;
   padding-top: 40px;
 }
 

client/src/components/Header/header.css

@@ -7,13 +7,13 @@ header {
 
 #top-nav {
   background: #006400;
-  height: 40px;
+  height: 38px;
-  margin-bottom: 0px;
+  margin-bottom: 0;
   border-radius: 0;
   border: none;
   display: flex;
   justify-content: space-between;
-  padding: 0 30px 0 15px;
+  padding: 0 15px;
 }
 
 #top-nav .home-link {
@@ -24,12 +24,11 @@ header {
 #top-nav img {
   max-height: 25px;
   min-width: 35px;
-  margin: 0 5px 0 10px;
+  margin: 0 5px;
 }
 
 #top-right-nav {
   display: flex;
-  width: 270px;
   margin: 0;
   list-style: none;
   justify-content: space-around;
@@ -90,13 +89,6 @@ li.user-state-link > a:focus {
   background-color: #006400 !important;
 }
 
-#top-right-nav {
-  margin-left: 20px;
-}
-#top-right-nav li:last-child {
-  margin-right: 30px;
-}
-
 #top-right-nav li > a:hover,
 #top-right-nav li > a:focus {
   text-decoration: none;
@@ -112,14 +104,54 @@ li.user-state-link > a:focus {
 
 /* Search bar */
 .fcc_searchBar {
-  flex-grow: 0.8;
+  flex-grow: 1;
   padding: 2px 10px 0;
 }
-.ais-SearchBox-form {
+
+.fcc_searchBar .ais-SearchBox-form {
   margin-bottom: 0;
 }
-.ais-Hits {
+
-  background-color: #fff;
+.fcc_searchBar .ais-Hits {
+  background-color: white;
+  width: 60%;
+}
+
+@media (max-width: 735px) {
+  .fcc_searchBar .ais-Hits {
+    width: 80%;
+    left: 10%;
+  }
+}
+
+/* Navbar logo */
+
+.logo-glyph {
+  height: 30px;
+  width: auto;
+}
+
+.logo {
+  display: none;
+}
+
+.logoContainer {
+  margin-right: 10px;
+}
+
+@media (min-width: 735px) {
+  .logo-glyph {
+    display: none;
+  }
+
+  .logo {
+    display: block;
+  }
+
+  .logoContainer {
+    margin-right: 50px;
+    width: 25%;
+  }
 }
 
 .mobile-menu {
@@ -129,8 +161,8 @@ li.user-state-link > a:focus {
   width: 100%;
   background-color: #006400;
   color: #fff;
-  margin-top: -40px;
+  margin-top: -38px;
-  height: 40px;
+  height: 38px;
   z-index: 300;
 }
 
@@ -143,23 +175,13 @@ li.user-state-link > a:focus {
   justify-self: flex-end;
 }
 
-.header-search {
-  position: relative;
-  top: 2px;
-  flex-grow: 1;
-}
-
-.mobile-menu .header-search {
-  top: -1px;
-}
-
 @media (max-width: 734px) {
   #top-nav {
     padding: 0;
   }
 
   .opened #top-right-nav {
-    transform: translate(0, 40px);
+    transform: translate(0, 38px);
     padding-bottom: 10px;
     opacity: 1;
   }

client/src/components/Header/index.js

@@ -29,18 +29,12 @@ class Header extends Component {
     return (
       <header className={this.state.isMenuOpened ? 'opened' : null}>
         <nav id='top-nav'>
-
           <Media query='(min-width: 735px)'>
             <Fragment>
               <Link className='home-link' to='/'>
                 <NavLogo />
               </Link>
-              {disableSettings
+              {disableSettings ? null : <FCCSearch />}
-                ? null
-                : <div className="header-search">
-                  <FCCSearch />
-                </div>
-              }
             </Fragment>
           </Media>
 
@@ -49,20 +43,12 @@ class Header extends Component {
               <Link to='/learn'>Curriculum</Link>
             </li>
             <li>
-              <a
+              <a href='/forum' rel='noopener noreferrer' target='_blank'>
-              href='/forum'
-              rel='noopener noreferrer'
-              target='_blank'
-              >
                 Forum
               </a>
             </li>
             <li>
-              <a
+              <a href='/news' rel='noopener noreferrer' target='_blank'>
-              href='/news'
-              rel='noopener noreferrer'
-              target='_blank'
-              >
                 News
               </a>
             </li>
@@ -73,22 +59,16 @@ class Header extends Component {
         </nav>
 
         <Media query='(max-width: 734px)'>
-          <div className="mobile-menu">
+          <div className='mobile-menu'>
             <Link className='home-link' to='/'>
               <NavLogo />
             </Link>
-            {disableSettings
+            {disableSettings ? null : <FCCSearch />}
-              ? null
+            <span className='menu-button' onClick={this.toggleClass}>
-              : <div className="header-search">
-                  <FCCSearch />
-                </div>
-            }
-            <span className="menu-button" onClick={this.toggleClass}>
               Menu
             </span>
           </div>
         </Media>
-
       </header>
     );
   }

client/src/components/layouts/guide.css

@@ -82,107 +82,6 @@
   height: 20px;
 }
 
-/* Search */
-
-.fcc_searchBar {
-  width: 100%;
-}
-
-.fcc_searchBar .ais-Hits {
-  background-color: white;
-  width: 60%;
-}
-
-@media (max-width: 400px) {
-  .fcc_searchBar .ais-Hits {
-    width: 100%;
-  }
-}
-
-/* NavBar */
-
-.navBar {
-  background: #006400;
-  display: flex;
-  align-items: center;
-  min-height: 38px !important;
-  max-height: 38px;
-  border: none;
-  border-radius: 0;
-}
-
-.main {
-  outline: 0;
-}
-
-.navContainer {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin: 0 auto;
-  padding: 0 15px;
-}
-
-@media (min-width: 992px) {
-  .navContainer {
-    width: 970px;
-  }
-}
-
-@media (min-width: 1200px) {
-  .navContainer {
-    width: 1170px;
-  }
-}
-
-/* Navbar logo */
-
-.logo-glyph {
-  height: 30px;
-  width: auto;
-}
-
-.logo {
-  display: none;
-}
-
-.logoContainer {
-  margin-right: 10px;
-}
-
-@media (min-width: 735px) {
-  .logo-glyph {
-    display: none;
-  }
-
-  .logo {
-    display: block;
-  }
-
-  .logoContainer {
-    margin-right: 50px;
-    width: 25%;
-  }
-}
-
-/* Navbar Toggle */
-
-.navbar-toggle {
-  border: 1px solid #fff;
-  margin-left: 10px;
-  margin-right: 0;
-}
-
-.navbar-toggle .icon-bar {
-  background-color: #fff;
-}
-
-@media (max-width: 992px) {
-  .navbar-toggle {
-    display: block;
-  }
-}
-
 /* 404 */
 
 .flexWrapper {
@@ -215,10 +114,6 @@
 
 /* SideNav */
 
-.body {
-  overflow-y: hidden;
-}
-
 .caretStyle {
   border-top: 8px dashed;
   border-right: 6px solid transparent;

client/src/components/layouts/layout.css

@@ -1,6 +1,7 @@
 html {
   font-family: 'Lato', sans-serif;
   -ms-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
 body {
@@ -39,7 +40,6 @@ template {
 }
 a {
   background-color: transparent;
-  -webkit-text-decoration-skip: objects;
 }
 a:active,
 a:hover {
@@ -203,7 +203,6 @@ body {
   word-wrap: break-word;
   font-kerning: normal;
   -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
-  -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
   -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
   font-feature-settings: 'kern', 'liga', 'clig', 'calt';
 }
@@ -575,7 +574,6 @@ th {
   border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
   font-feature-settings: 'tnum';
   -moz-font-feature-settings: 'tnum';
-  -ms-font-feature-settings: 'tnum';
   -webkit-font-feature-settings: 'tnum';
   padding-left: 0.96667rem;
   padding-right: 0.96667rem;
@@ -623,5 +621,5 @@ pre tt:after {
   }
 }
 .default-layout {
-  margin-top: 34px;
+  margin-top: 38px;
-}
+}