fixed the home page Footer mobile responsive issue (#5964)

* fixed the home page mobile responsive issue * custom color and spacing * spacing * pipe
knative · Aug 21, 2024 · e3dcd55 · e3dcd55
1 parent e7073c5
commit e3dcd55
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 23 deletions.
diff --git a/overrides/assets/stylesheets/home.css b/overrides/assets/stylesheets/home.css
@@ -383,7 +383,7 @@ position: relative;
   justify-content: center;
   color: black;
   display: flex;
-  background-color: #f3f1f2;
+  background-color: var(--md-primary-fg-color);
   padding: 1rem;
   cursor: pointer;
 }
@@ -524,21 +524,14 @@ position: relative;
   margin: 1rem;
 }
 
-@media only screen and (max-width: 1219px) {
-  .md-header__topic {
-    margin: 0;
-  }
-}
-
 @media only screen and (max-width: 800px) {
   .component-flex, .case-studies-container .cases-table {
     flex-wrap: wrap;
   }
 
   .knative-components-container .text-table .normal-text {
     width: 80%;
-    text-align: center;
-
+    text-align: center; 
   }
 
   .knative-components-container .text-table .normal-text:first-child {
@@ -570,18 +563,26 @@ footer nav.md-footer__inner {
 .md-footer-meta{
   padding: 1em 0;
 }
+
 .md-footer-copyright{
   margin-right: 18px;
 }
+
 @media (max-width: 1024px){
-.md-footer-copyright{
-  margin: auto;
-  text-align: center;
-}
-.md-social{
-  margin: auto;
-}
+  .md-header__topic {
+    margin: 0;
+  }
+
+  .md-footer-copyright{
+    margin: auto;
+    text-align: center;
+  }
+
+  .md-social{
+    margin: auto;
+  }
 }
+
 @media (max-width: 861px) {
   .md-footer-meta{
     flex-direction: column;
@@ -596,6 +597,7 @@ footer nav.md-footer__inner {
     display: block;
     margin-bottom: 0.5rem;
   }
+
   .md-footer__button {
     display: none;
   }
@@ -610,6 +612,7 @@ footer nav.md-footer__inner {
     margin: 2rem;
     flex-wrap: wrap;
   }
+
   .md-footer-copyright a{
     margin: 8px;
   }
@@ -618,10 +621,13 @@ footer nav.md-footer__inner {
     display: flex;
     flex-direction: column;
     order: 1;
-
   }
 
   .md-social {
     margin-top: 1rem;
   }
+
+  .pipe{
+    display:none;
+  }
 }
diff --git a/overrides/partials/footer.html b/overrides/partials/footer.html
@@ -73,13 +73,19 @@
       </div>
 
       <div class="footer-links md-footer-copyright">
-        <a href="https://www.linuxfoundation.org/legal/trademark-usage">Trademarks</a> |
-        <a href="https://policies.google.com/privacy">Privacy Policy</a> |
-        <a href="/docs/about-analytics-cookies/">Cookie Usage</a> |
-        <a href="https://github.com/knative/docs/blob/main/LICENSE">Apache-2.0 LICENSE</a> |
-        <a href="https://github.com/knative/docs/blob/main/LICENSE-docs">CC BY 4.0 LICENSE</a> |
+        <a href="https://www.linuxfoundation.org/legal/trademark-usage">Trademarks</a> 
+        <span class="pipe">|</span>
+        <a href="https://policies.google.com/privacy">Privacy Policy</a> 
+        <span class="pipe">|</span>
+        <a href="/docs/about-analytics-cookies/">Cookie Usage</a> 
+        <span class="pipe">|</span>
+        <a href="https://github.com/knative/docs/blob/main/LICENSE">Apache-2.0 LICENSE</a> 
+        <span class="pipe">|</span>
+        <a href="https://github.com/knative/docs/blob/main/LICENSE-docs">CC BY 4.0 LICENSE</a> 
+        <span class="pipe">|</span>
         <a href="https://squidfunk.github.io/mkdocs-material/">Made by Material MkDocs</a>
-      </div>
+    </div>
+
 
       <!-- Social links -->
       <!-- {% include "partials/social.html" %} -->