site: update footer styling

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

Author: dvdksn

assets/css/utilities.css

@@ -270,49 +270,6 @@
   }
 }
 
-.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;
-}
-
 /* Landing page AI components */
 .dotted-pattern {
   pointer-events: none;

hugo_stats.json

@@ -167,6 +167,8 @@
       "With-systemd-Highly-recommended",
       "Without-packages",
       "Without-systemd",
+      "[&_a:hover]:underline",
+      "[&_a:hover]:underline-offset-4",
       "[display:none]",
       "[mix-blend-mode:multiply]",
       "absolute",
@@ -336,10 +338,12 @@
       "gap-2.5",
       "gap-3",
       "gap-4",
+      "gap-6",
       "gap-8",
       "goat",
       "grid",
       "grid-cols-1",
+      "grid-cols-3",
       "group",
       "group-hover:block'",
       "group-hover:text-blue-500",
@@ -436,6 +440,7 @@
       "md:border-none",
       "md:flex",
       "md:flex-nowrap",
+      "md:grid",
       "md:grid-cols-2",
       "md:h-[calc(100vh-64px)]",
       "md:hidden",
@@ -445,11 +450,13 @@
       "md:text-base",
       "md:text-sm",
       "md:top-16",
+      "md:truncate",
       "md:w-[300px]",
       "md:w-[320px]",
       "md:z-auto",
       "min-h-screen",
       "min-w-0",
+      "min-w-20",
       "min-w-48",
       "min-w-52",
       "ml-2",
@@ -512,9 +519,9 @@
       "placeholder-gray-500",
       "pr-2",
       "prose",
-      "pt-16",
       "pt-2",
       "pt-4",
+      "pt-6",
       "px-1",
       "px-2",
       "px-3",
@@ -610,6 +617,7 @@
       "w-65",
       "w-8",
       "w-full",
+      "whitespace-normal",
       "whitespace-nowrap",
       "xl:flex",
       "xl:flex-row",

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>