site: update footer styling

Signed-off-by: David Karlsson <[email protected]>

Author: dvdksn

assets/css/utilities.css

@@ -236,46 +236,3 @@
     font-size: 19px;
   }
 }
-
-.footer {
-  @apply ml-auto hidden flex-row justify-between gap-6 px-4 pt-6 pb-2 md:flex;
-  @apply border-t border-gray-200 bg-gray-100 dark:border-gray-700 dark:bg-gray-900;
-  @apply text-gray-600 dark:text-gray-400;
-  a:hover {
-    @apply underline underline-offset-4;
-  }
-}
-
-.social {
-  @apply flex min-w-20 flex-wrap items-center gap-1;
-}
-
-.links {
-  @apply flex items-center gap-3;
-}
-
-.links a {
-  @apply inline-flex min-w-15 truncate whitespace-normal;
-}
-
-.secondaryLinks {
-  @apply flex items-center;
-  a,
-  button {
-    @apply whitespace-normal md:truncate;
-  }
-}
-
-.secondaryLinks > *:not(:last-child)::after {
-  content: "|";
-  @apply mx-1 text-gray-400;
-}
-
-.ot-sdk-show-settings {
-  @apply !text-gray-600 hover:!text-gray-800 dark:!text-gray-400 dark:hover:!text-gray-200;
-  @apply !m-0 !min-w-15 !truncate !border-none !p-0 !text-sm;
-}
-#ot-sdk-btn.ot-sdk-show-settings:hover,
-#ot-sdk-btn.optanon-show-settings:hover {
-  @apply !text-gray-600 underline decoration-1 underline-offset-4 hover:!bg-transparent dark:!text-gray-400;
-}

layouts/partials/footer.html

@@ -1,5 +1,7 @@
-<div class="footer">
-  <div class="social">
+<div
+  class="ml-auto hidden grid-cols-3 gap-6 border-t border-gray-200 bg-gray-100 px-4 pt-6 pb-2 text-gray-600 md:grid dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 [&_a:hover]:underline [&_a:hover]:underline-offset-4"
+>
+  <div class="flex min-w-20 flex-wrap items-center gap-1">
     <a href="https://www.linkedin.com/company/docker">
       <span class="icon-svg">
         {{ partial "utils/svg" "icons/linkedin.svg" }}
@@ -26,25 +28,69 @@
       </span>
     </a>
   </div>
-  <div class="links">
-    <a href="https://www.docker.com/">Product offerings</a>
-    <a href="https://www.docker.com/pricing/">Pricing</a>
-    <a href="https://www.docker.com/company/">About us</a>
+  <div class="flex items-center justify-center gap-3">
+    <a
+      href="https://www.docker.com/"
+      class="inline-flex truncate whitespace-normal"
+      >Product offerings</a
+    >
+    <a
+      href="https://www.docker.com/pricing/"
+      class="inline-flex truncate whitespace-normal"
+      >Pricing</a
+    >
+    <a
+      href="https://www.docker.com/company/"
+      class="inline-flex truncate whitespace-normal"
+      >About us</a
+    >
     {{- with .GetPage "/contribute" }}
-    <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+      <a href="{{ .Permalink }}" class="inline-flex truncate whitespace-normal"
+        >{{ .LinkTitle }}</a
+      >
     {{- end }}
-    <a href="{{ "llms.txt" | relURL }}">Read llms.txt</a>
+    <a
+      href="{{ "llms.txt" | relURL }}"
+      class="inline-flex truncate whitespace-normal"
+      >llms.txt</a
+    >
   </div>
-  <div class="secondaryLinks">
-    <button type="button" id="ot-sdk-btn" class="ot-sdk-show-settings">
+  <div class="flex items-center justify-end">
+    <button
+      type="button"
+      id="ot-sdk-btn"
+      class="ot-sdk-show-settings whitespace-normal md:truncate"
+    >
       Cookies Settings
     </button>
-    <a title="Docker Terms of Service" href="https://www.docker.com/legal/docker-terms-service">Terms of Service</a>
-    <a title="Docker Systems Status Page" href="https://www.dockerstatus.com/">Status</a>
-    <a title="Docker Legal Terms" href="https://www.docker.com/legal">Legal</a>
+    <span class="mx-1 text-gray-400">|</span>
+    <a
+      title="Docker Terms of Service"
+      href="https://www.docker.com/legal/docker-terms-service"
+      class="whitespace-normal md:truncate"
+      >Terms of Service</a
+    >
+    <span class="mx-1 text-gray-400">|</span>
+    <a
+      title="Docker Systems Status Page"
+      href="https://www.dockerstatus.com/"
+      class="whitespace-normal md:truncate"
+      >Status</a
+    >
+    <span class="mx-1 text-gray-400">|</span>
+    <a
+      title="Docker Legal Terms"
+      href="https://www.docker.com/legal"
+      class="whitespace-normal md:truncate"
+      >Legal</a
+    >
   </div>
 </div>
 <div
-  class="text-sm text-gray-400 dark:text-gray-600 border-t dark:border-gray-700  border-gray-200 md:border-none px-4 py-4 bg-gray-100 dark:bg-gray-900 ">
-  <span>Copyright © 2013-{{ time.Now.Year }} Docker Inc. All rights reserved.</span>
-</div>
+  class="border-t border-gray-200 bg-gray-100 px-4 py-4 text-sm text-gray-400 md:border-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-600"
+>
+  <span
+    >Copyright © 2013-{{ time.Now.Year }} Docker Inc. All rights
+    reserved.</span
+  >
+</div>