Update OCW logos and improve design alignments (#1309)

* Update MIT logos

* Add logos for course theme

* Change logo color for offline theme

* Remove white color

* Draft version: align the page

* Make headers behave consistently throughout the themes

* Update search elements and footer

* Update search page

* Modify search page

* Adjust margins and paddings

* Adjust search bar padding

* Improve margins and paddings

* Update favicon

* Search page and course footer paddings

* Search page search bar

* Update course logo sizes

* Update give button paddings

* Update give button paddings

* Update give button paddings in course

* Fix search page paddings

* Readjust searach box padding

* Apply margins to search filters

* Change container padding on large screen

* Add ml on search bar for lg

* Add white-space wrap and remove flex

base-theme/assets/css/_breakpoints.scss

@@ -27,5 +27,9 @@
     @media (max-width: 820px) {
       @content;
     }
+  } @else if $name == tablet {
+    @media (max-width: 991px) {
+      @content;
+    }
   }
 }

base-theme/assets/css/footer-v2.scss

@@ -11,7 +11,7 @@
 
   .footer-main-content {
     max-width: $max-content-width;
-    padding: 1.5rem 1rem 2.5rem 1rem !important;
+    padding: 1.5rem 3rem 2.5rem 3rem !important;
 
     .footer-social-icon {
       height: 21px;

base-theme/assets/css/footer.scss

@@ -1,14 +1,17 @@
 #footer-container {
   background-color: $footer-background-color;
   display: flex;
-  padding: 35px 50px 30px 50px;
   flex-direction: column;
   border-top: 1px solid #d2d2d2;
   width: 100%;
 
-  @include media-breakpoint-down(lg) {
-    padding-left: 2rem;
-    padding-right: 2rem;
+  #home-footer {
+    max-width: $max-home-width;
+    padding: 35px 3rem 30px 3rem;
+
+    @include media-breakpoint-down(md) {
+      padding: 35px 2rem 30px 2rem;
+    }
   }
 
   .row-gap-20 {
@@ -41,7 +44,7 @@
 
   #open-learning-logo {
     img {
-      width: 220px;
+      width: 128.65px;
     }
 
     @media (max-width: $extra-small-screen-width) {

base-theme/assets/css/header.scss

@@ -11,7 +11,6 @@
   .search-icon {
     display: flex;
     text-decoration: none;
-    color: $orange;
     padding-bottom: 0;
 
     .material-icons {
@@ -34,12 +33,10 @@
 
   .contents {
     display: flex;
-    justify-content: space-between;
     max-width: $max-content-width;
-    padding: 0 3rem 0 3rem !important;
-    margin: auto;
     width: 100%;
     height: 100%;
+    padding: 0 3rem;
 
     .right,
     .left {
@@ -50,6 +47,7 @@
 
     .left {
       .ocw-logo {
+        margin-top: 4px;
         img {
           width: 260px;
         }
@@ -62,7 +60,6 @@
       .search-icon {
         display: flex;
         text-decoration: none;
-        color: $orange;
 
         .material-icons {
           font-size: $material-icon-font-lg;
@@ -78,16 +75,30 @@
         font-size: $font-sm;
         text-transform: uppercase;
 
-        &.give-button-header {
-          display: flex;
-          background-color: $orange;
-          text-decoration: none;
+        &.give-button {
+          padding: 11px 24px 8px 24px;
+          border-bottom: 3px solid $burgundy;
           border-radius: 5px;
+
+          img {
+            height: 13px;
+            margin-bottom: 1px;
+          }
         }
       }
     }
   }
 }
+.give-button {
+  color: $white;
+  white-space: nowrap;
+  background-color: $highlight-red;
+  text-decoration: none;
+}
+.give-button:hover > img {
+  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%)
+    hue-rotate(142deg) brightness(96%) contrast(103%);
+}
 
 #home-header {
   #desktop-header {
@@ -97,6 +108,9 @@
     @include media-breakpoint-down(lg) {
       height: 90px;
     }
+    .contents {
+      max-width: $max-home-width;
+    }
   }
 }
 

base-theme/assets/css/main.scss

@@ -63,16 +63,6 @@ h2 {
     font-size: $heading-two-font-xs;
     line-height: $heading-two-line-height-xs;
   }
-
-  &.branded {
-    font-family: Helvetica, sans-serif;
-    font-weight: 300;
-
-    span {
-      color: $orange;
-      font-weight: 600;
-    }
-  }
 }
 
 h3 {

base-theme/assets/css/variables.scss

@@ -12,7 +12,7 @@ $partial-collapse-height: 6em;
 
 // full-color design
 $highlight-red: #a31f34;
-$orange: #ff8a1f;
+$burgundy: #851124;
 $blue: #126f9a;
 $link-blue: #32c5ff;
 $success-message-color: #569a5a;