Merge pull request #47789 from sftim/20240904_docsy_friendly_footer

Use Docsy friendly footer
kubernetes · Oct 3, 2024 · 7824ed9 · 7824ed9
2 parents 793fb6d + 4444539
commit 7824ed9
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 27 deletions.
diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
@@ -893,6 +893,11 @@ section#cncf {
   }
 }
 
+footer.row {
+  margin-left: initial;
+  margin-right: initial;
+}
+
 /* DOCUMENTATION */
 
 // nav-tabs and tab-content

diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
@@ -266,16 +266,26 @@ body.td-404 main .error-details {
 
 /* FOOTER */
 footer {
-  background-color: #303030;
+  background-color: #202020;
+  /* darkened later in this file */
   background-image: url("/images/texture.png");
   padding: 1rem !important;
   min-height: initial !important;
+  justify-content: center;
 
   > div, > p {
     max-width: 95%;
     @media only screen and (min-width: 768px) {
       max-width: calc(min(80rem,90vw)); // avoid spreading too wide
     }
+    color: inherit;
+    background: transparent;
+
+    a:hover {
+      color: inherit;
+      background: transparent;
+      text-decoration: underline;
+    }
   }
 
   > .footer__links {
@@ -313,6 +323,50 @@ footer {
   }
 }
 
+footer {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url("/images/texture.png");
+  color: #e9e9e9;
+}
+
+// Custom footer sizing
+@media (min-width: 800px) and (max-width: 1279px) {
+  footer {
+    ul.footer-icons {
+      min-width: 17.5vw;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+      justify-content: space-evenly;
+    }
+    .col-sm-2 {
+      flex: 0 0 22.5%;
+      max-width: 22.5%;
+    }
+    .footer-main.text-center {
+      flex: 0 0 50%;
+      max-width: 50%;
+    }
+
+  }
+}
+
+
+@media (max-width: 799px) {
+  footer ul.footer-icons {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 0.5em;
+  }
+  footer div.order-1 ul.footer-icons {
+    margin-left: auto;
+  }
+  footer div.order-3 ul.footer-icons {
+    margin-right: auto;
+  }
+}
+
 /* SIDE-DRAWER MENU */
 
 .pi-pushmenu .sled {

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,52 +1,44 @@
 {{ $links := .Site.Params.links }}
-<footer class="d-print-none">
-  <div class="footer__links">
-    <nav>
-      {{ with site.GetPage "page" "docs/tutorials/stateless-application/hello-minikube" }}<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>{{ end }}
-      {{ $sections := slice "docs/home" "blog" "training" "partners" "community" "case-studies" }}
-      {{ range $sections }}
-      {{ with site.GetPage "section" . }}<a class="text-white" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>{{ end }}
-      {{ end }}
-    </nav>
-  </div>
-  <div class="container-fluid">
+<footer class="bg-dark py-5 row d-print-none">
+  <div class="container-fluid mx-sm-5">
     <div class="row">
-      <div class="col-6 col-sm-2 text-xs-center order-sm-2">
+      {{ template "footer-main-block" . }}
+      <div class="col col-sm-2 text-xs-center order-1">
         {{ with $links }}
         {{ with index . "user"}}
         {{ template "footer-links-block"  . }}
         {{ end }}
         {{ end }}
       </div>
-      <div class="col-6 col-sm-2 text-right text-xs-center order-sm-3">
+      <div class="col col-sm-2 text-right text-xs-center order-3">
         {{ with $links }}
         {{ with index . "developer"}}
         {{ template "footer-links-block"  . }}
         {{ end }}
         {{ end }}
       </div>
-      <div class="col-12 col-sm-8 text-center order-sm-2">
-        {{ with .Site.Params.copyright_k8s }}<small class="text-white">&copy; {{ now.Year}} {{ T "main_documentation_license" | safeHTML }}</small>{{ end }}
-        <br/>
-        {{ with .Site.Params.copyright_linux }}<small class="text-white">Copyright &copy; {{ now.Year }} {{ T "main_copyright_notice" | safeHTML }}</small>{{ end }}
-        <br/>
-        <small class="text-white">{{ T "china_icp_license" }} 京ICP备17074266号-3</small>
-        {{ with .Site.Params.privacy_policy }}<small class="ml-1"><a href="{{ . }}" target="_blank">{{ T "footer_privacy_policy" }}</a></small>{{ end }}
-        {{ if not .Site.Params.ui.footer_about_disable }}
-          {{ with .Site.GetPage "about" }}<p class="mt-2"><a href="{{ .RelPermalink }}">{{ .Title }}</a></p>{{ end }}
-        {{ end }}
-      </div>
     </div>
   </div>
 </footer>
 {{ define "footer-links-block" }}
-<ul class="list-inline mb-0">
+<ul class="list-inline mb-0 footer-icons">
   {{ range . }}
   <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="{{ .name }}" aria-label="{{ .name }}">
-    <a class="text-white" target="_blank" href="{{ .url }}">
+    <a class="text-white" target="_blank" rel="noopener" href="{{ .url }}" aria-label="{{ .name }}">
       <i class="{{ .icon }}"></i>
     </a>
   </li>
   {{ end }}
 </ul>
 {{ end }}
+{{ define "footer-main-block" }}
+    <div class="col-5 col-sm-7 text-center order-2 footer-main">
+      <p><span class="copyright-notice">&copy; {{ now.Year}} {{ T "main_documentation_license" | safeHTML }}</span></p>
+      <p><span class="copyright-notice">&copy; {{ now.Year }} {{ T "main_copyright_notice" | safeHTML }}</span></p>
+      <p><span class="certification-notice">{{ T "china_icp_license" }} 京ICP备17074266号-3</span></p>
+      {{ with .Site.Params.privacy_policy }}<p><span class="ml-1 privacy-policy"><a href="{{ . }}" target="_blank">{{ T "footer_privacy_policy" }}</a></span></p>{{ end }}
+      {{ if not .Site.Params.ui.footer_about_disable }}
+        {{ with .Site.GetPage "about" }}<p class="mt-2"><a href="{{ .RelPermalink }}">{{ .Title }}</a></p>{{ end }}
+      {{ end }}
+    </div>
+{{ end }}