docs: footer (#1577)

* docs: footer * docs: fix footer paddings * docs: fix logo comments * docs: footer margins * docs: 180px footer * docs: seperator padding * docs: space between
SAP · Nov 23, 2020 · d320489 · d320489
1 parent 54fdf7a
commit d320489
Show file tree

Hide file tree

Showing 2 changed files with 248 additions and 99 deletions.
diff --git a/docs/_sass/_landingPage.scss b/docs/_sass/_landingPage.scss
@@ -352,53 +352,103 @@ $learn-section-side-margin: 0 2rem;
 
   .footer-section {
     width: 100%;
-    margin: 16px 120px 0;
-    padding: 16px 0;
+    margin: 0;
+    padding: 44px 0;
 
     @include text();
 
     font-size: 12px;
     line-height: 1.33;
     font-weight: normal;
-    display: grid;
-    grid-template-columns: auto auto;
+    display: flex;
+    flex-direction: column;
     align-items: center;
-    border-top: 2px solid #eeeeee;
-    color: #404040;
+    justify-content: space-between;
+    background-color: #404040;
+    color: white;
+
+    &__logo {
+      width: 31px;
+    }
+
+    &__separator {
+      width: 100%;
+      border: 1px solid #F0F0F0;
+      border-bottom: none;
+      margin: 24px 0;
+    }
 
     &__slogan-logo {
       display: flex;
       align-items: center;
+      justify-content: center;
       width: 100%;
     }
 
     &__slogan {
-      font-size: 14px;
-      color: #767676;
-      margin-right: 16px;
-      min-width: 120px;
-    }
-
-    &__copyright {
-      margin-left: 24px;
-      color: #404040;
-      width: 100%;
+      @include text();
+      margin-left: 4px;
+      font-size: 12px;
+      color: white;
+      font-weight: bold;
     }
-  
-    &__container--left {
+
+    &__container {
       display: flex;
       align-items: center;
-      justify-self: start;
-    }
-
-    &__container--right {
-      justify-self: end;
-      display: flex;
-      justify-content: space-between;
+      justify-content: center;
+      flex-direction: column;
+      width: 100%;
+
+      &--contact {
+        display: none;
+      }
+
+      &--right {
+        flex-direction: column-reverse;
+        justify-content: center;
 
-      a {
-        margin-left: 24px;
-        color: #8f8f8f;
+        .footer-section__container-inner {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+      }
+    }
+
+    &__text {
+      @include text();
+      margin: 0;
+      margin-top: 16px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #EEEEEE;
+
+      &:focus {
+        outline-color: white;
+      }
+
+      &--copyright-title {
+        text-align: center;
+        width: 100%;
+      }
+
+      &--copyright {
+        font-size: 10px;
+      }
+
+      &--title {
+        font-size: 16px;
+        font-weight: bold;
+        margin-top: 24px;
+
+        &:hover {
+          color: white;
+        }
+
+        &:active {
+          color: white;
+        }
       }
     }
   }
@@ -1141,6 +1191,78 @@ $learn-section-side-margin: 0 2rem;
       }
     }
   }
+
+  .footer-section {
+    padding: 64px 44px 44px 44px;
+
+    &__logo {
+      width: 70px;
+    }
+
+    &__container {
+      align-items: flex-start;
+      width: auto;
+
+      &--bottom {
+        width: 100%;
+      }
+
+      &--separator {
+        width: 100%;
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: flex-end;
+
+        .footer-section__slogan-logo {
+          justify-content: flex-end;
+        }
+      }
+
+      &--inner {
+        flex-direction: row;
+
+        :not(:last-child) {
+          margin-right: 16px;
+        }
+      }
+
+      &--right {
+        width: 100%;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      &--responsive {
+        width: 100%;
+        align-items: flex-start;
+        justify-content: flex-start;
+        flex-direction: row;
+        margin-bottom: 24px;
+
+        .footer-section__container, .footer-section__logo  {
+          margin-right: 64px;
+        }
+      }
+    }
+
+    &__separator {
+      margin: 10px 0 10px 0;
+    }
+
+    &__text {
+      font-size: 18px;
+
+      &--copyright {
+        font-size: 14px;
+        margin-top: 0;
+      }
+
+      &--title {
+        font-size: 20px;
+        margin-top: 0;
+      }
+    }
+  }
 }
 
 @media (min-width: 1024px) {
@@ -1363,6 +1485,47 @@ $learn-section-side-margin: 0 2rem;
       }
     }
   }
+
+  .footer-section {
+    padding: 100px 122px 44px 122px;
+    &__container {
+      margin-right: 0;
+
+      &--responsive {
+        justify-content: space-between;
+      }
+
+      &--contact {
+        display: flex;
+      }
+
+      &--right {
+        position: relative;
+        top: -16px;
+        left: 140px;
+        padding-right: 140px;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      &--separator {
+        flex-direction: column;
+        align-items: flex-start;
+
+        .footer-section__slogan-logo {
+          justify-content: flex-start;
+        }
+      }
+    }
+
+    &__logo {
+      width: 82px;
+    }
+
+    &__separator {
+      margin: 14px 0 20px 0;
+    }
+  }
 }
 
 @media (min-width: 1440px) {
@@ -1421,6 +1584,12 @@ $learn-section-side-margin: 0 2rem;
     }
   }
 
+  .footer-section {
+    &__logo {
+      width: 96px;
+    }
+  }
+
   .libraries-section {
     padding: 140px 120px 64px 120px;
     max-width: 1560px;
@@ -1836,64 +2005,6 @@ body {
   }
 }
 
-@media (max-width: 990px) {
-  .footer-section {
-    grid-template-columns: auto;
-
-    &__container--left {
-      margin-bottom: 16px;
-      justify-self: center;
-    }
-
-    &__container--right {
-      justify-self: center;
-    }
-  }
-}
-
-@media (max-width: 767px) {
-  .footer-section {
-    margin: 0;
-    padding: 16px 44px;
-  }
-}
-
-@media (max-width: 600px) {
-  .footer-section {
-    padding: 44px;
-    flex-direction: column;
-    align-items: center;
-
-    &__copyright {
-      margin: 0;
-      margin-top: 24px;
-      text-align: center;
-    }
-
-    &__container--left {
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: 0;
-    }
-
-    &__container--right {
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: 70px;
-
-      a {
-        margin-top: 24px;
-        margin-left: 0;
-      }
-    }
-
-    &__slogan-logo {
-      width: 100%;
-      justify-content: center;
-    }
-  }
-}
-
 @media (max-width: 767px) {
   .backToTopVisible {
     display: none;