updates

Author: ArthurFlag

assets/css/global.css

@@ -96,47 +96,3 @@ input[type="search"]::-ms-clear {
 code{
   font-size:0.9em;
 }
-#footer {
-  @apply flex bg-gray-100 px-0 py-6 dark:bg-gray-900 ;
-}
-#copyright {
-  font-size: 0.9em;
-  color: #78909C;
-  display: flex;
-  align-items: center;
-}
-
-#copyright > * {
-  display: inline-flex;
-  width: max-content;
-  white-space: nowrap;
-}
-
-#copyright > *:not(:last-child)::after {
-  content: "|";
-  color: var(--color-gray-400);
-  @apply mx-1;
-}
-
-#links{
-  font-size: 1em;
-  color: var(--color-gray-600);
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-}
-
-#links a {
-  text-underline-offset: 2px;
-  display: inline-flex;
-  width: max-content;
-  padding: 0;
-  margin: 0;
-}
-#links a:hover {
-  text-decoration: underline;
-}
-
-#social {
-  @apply flex flex-row items-center gap-1;
-}

assets/css/utilities.css

@@ -270,3 +270,36 @@
    font-size: 19px;
   }
 }
+
+.footer {
+  @apply flex flex-wrap grow justify-center bg-gray-100 px-4 py-6;
+  @apply dark:bg-gray-900 w-full min-w-0 border-t border-gray-200 dark:border-gray-700;
+}
+
+.social {
+  @apply flex-row items-center gap-1 flex-wrap min-w-0 hidden md:flex;
+}
+
+.links {
+  @apply text-gray-600 flex-wrap items-center gap-[0.5em] hidden lg:flex;
+}
+
+.links a {
+  @apply underline-offset-2 inline-flex w-max p-0 m-0;
+}
+.links a:hover {
+  @apply underline;
+}
+
+.copyright {
+  @apply text-[0.9em] text-[#78909C] flex flex-wrap items-center;
+}
+
+.copyright > * {
+  @apply w-max;
+}
+
+.copyright > *:not(:last-child)::after {
+  content: "|";
+  @apply text-[color:var(--color-gray-400)] mx-1;
+}

hugo_stats.json

@@ -217,6 +217,7 @@
       "cls-2",
       "col-start-2",
       "containerd-image-store",
+      "copyright",
       "cursor-pointer",
       "dark:bg-amber-400",
       "dark:bg-background-dark",
@@ -278,7 +279,6 @@
       "flex",
       "flex-1",
       "flex-[2_2_0%]",
-      "flex-between",
       "flex-col",
       "flex-col-reverse",
       "flex-grow",
@@ -293,6 +293,7 @@
       "font-medium",
       "font-normal",
       "font-semibold",
+      "footer",
       "footnote-backref",
       "footnote-ref",
       "footnotes",
@@ -358,8 +359,6 @@
       "justify-between",
       "justify-center",
       "justify-end",
-      "justify-items-end",
-      "justify-items-start",
       "leading-none",
       "leading-snug",
       "leading-tight",
@@ -377,14 +376,13 @@
       "lg:pb-2",
       "lg:scale-100",
       "link",
+      "links",
       "lntable",
       "lntd",
-      "m-0",
       "macOS",
       "max-h-full",
       "max-w-4xl",
       "max-w-56",
-      "max-w-[1200px]",
       "max-w-[1280px]",
       "max-w-[1920px]",
       "max-w-full",
@@ -430,9 +428,6 @@
       "mt-8",
       "mt-[2px]",
       "mx-1",
-      "mx-10",
-      "mx-4",
-      "mx-6",
       "mx-auto",
       "my-0",
       "my-4",
@@ -472,7 +467,6 @@
       "pb-0.5",
       "pb-1",
       "pb-2",
-      "pb-20",
       "pb-4",
       "pb-8",
       "pl-2",
@@ -481,15 +475,11 @@
       "pl-5",
       "pr-2",
       "prose",
-      "pt-10",
       "pt-2",
       "pt-4",
       "px-1",
-      "px-10",
       "px-2",
       "px-4",
-      "px-5",
-      "px-6",
       "py-0.5",
       "py-1",
       "py-2",
@@ -525,8 +515,7 @@
       "sm:flex-row",
       "sm:hidden",
       "sm:items-center",
-      "space-x-1",
-      "space-x-2",
+      "social",
       "space-y-2",
       "space-y-4",
       "sticky",
@@ -571,7 +560,6 @@
       "transition-colors",
       "transition-transform",
       "truncate",
-      "underline-offset-2",
       "w-2",
       "w-5",
       "w-65",

layouts/partials/footer.html

@@ -1,6 +1,6 @@
-<div id="footer" >
-  <div class="flex justify-items-start max-w-[1280px] gap-10 mx-auto">
-    <div id="social">
+<div class="footer">
+  <div class="flex max-w-[1280px] gap-8">
+    <div class="social">
       <a href="https://www.linkedin.com/company/docker">
         <span class="icon-svg">
           {{ partial "utils/svg" "icons/linkedin.svg" }}
@@ -27,25 +27,25 @@
         </span>
       </a>
     </div>
-    <div id="links">
-      <a class="underline-offset-2 hover:underline" href="https://www.docker.com/">Product offerings</a>
-      <a class="underline-offset-2 hover:underline" href="https://www.docker.com/pricing/">Pricing</a>
-      <a class="underline-offset-2 hover:underline" href="https://www.docker.com/company/">About us</a>
+    <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>
       {{- with .GetPage "/contribute" }}
-      <a class="underline-offset-2 hover:underline" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+      <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
       {{- end }}
       <a href="{{ " llms.txt" | relURL }}">Read llms.txt</a>
     </div>
-    <div id="copyright">
+    <div class="copyright">
       <span>Copyright © 2013-{{ time.Now.Year }} Docker Inc. All rights reserved.</span>
       <button type="button" id="ot-sdk-btn" class="ot-sdk-show-settings">
         Cookies Settings
       </button>
-      <a class="underline-offset-2 hover:underline" title="Docker Terms of Service"
+      <a title="Docker Terms of Service"
         href="https://www.docker.com/legal/docker-terms-service">Terms of Service</a>
-      <a class="underline-offset-2 hover:underline" title="Docker Systems Status Page"
+      <a title="Docker Systems Status Page"
         href="https://www.dockerstatus.com/">Status</a>
-      <a class="underline-offset-2 hover:underline" title="Docker Legal Terms"
+      <a title="Docker Legal Terms"
         href="https://www.docker.com/legal">Legal</a>
     </div>
   </div>