Merge pull request #11 from bci-oss/esmf-layout-landing-page

Breadcrumbs, toolbar and footer changes, and css files improvements

Author: aniluede

src/css/footer.css

@@ -5,7 +5,6 @@ footer.footer {
   line-height: var(--footer-line-height);
   padding: 1.5rem;
   position: relative;
-  /* float: left; */
   width: 100%;
 }
 
@@ -21,3 +20,60 @@ footer.footer {
 .footer a {
   color: var(--footer-link-font-color);
 }
+
+/* New sections layout of landing page */
+
+.sections-footer {
+  background-color: #51555a;
+  color: white;
+  font-size: calc(15 / var(--rem-base) * 1rem);
+  line-height: var(--footer-line-height);
+  padding: 1.5rem;
+  position: relative;
+  width: auto;
+}
+
+.sections-footer-container {
+  max-width: 72rem;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+}
+
+.sections-footer p {
+  margin: 0.5rem 1rem;
+  font-size: 1rem;
+}
+
+.sections-footer a {
+  color: var(--footer-link-font-color);
+}
+
+.sections-footer-container-right {
+  margin: 0.25rem 1.25rem;
+}
+
+.sections-footer-container-right > a {
+  color: white;
+  margin: 0.5rem 0;
+  font-size: 1rem;
+}
+
+@media screen and (max-width: 1024px) {
+  .sections-footer-container {
+    max-width: 52rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .sections-footer {
+    line-height: unset;
+    padding: 1rem;
+  }
+
+  .sections-footer-container {
+    flex-direction: column-reverse;
+    gap: 0.25rem;
+    align-items: center;
+  }
+}