Skip to content

Commit 99c6025

Browse files
ArthurFlagArthurFlag
committed
ux: restructure footer
1 parent 8f1514d commit 99c6025

File tree

3 files changed

+60
-89
lines changed

3 files changed

+60
-89
lines changed

‎assets/css/utilities.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,13 @@
1010
}
1111
}
1212

13+
@utility icon-md {
14+
svg {
15+
font-size: 24px;
16+
}
17+
}
18+
19+
1320
@utility icon-lg {
1421
svg {
1522
font-size: 32px;

‎hugo_stats.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -344,9 +344,11 @@
344344
"hover:text-blue",
345345
"hover:underline",
346346
"icon-lg",
347+
"icon-md",
347348
"icon-sm",
348349
"icon-svg",
349350
"icon-svg-stroke",
351+
"image-svg",
350352
"inline",
351353
"inline-block",
352354
"inline-flex",
@@ -366,7 +368,6 @@
366368
"left-0",
367369
"lg:block",
368370
"lg:flex",
369-
"lg:flex-row",
370371
"lg:gap-4",
371372
"lg:gap-8",
372373
"lg:grid-cols-2",
@@ -384,8 +385,13 @@
384385
"max-h-full",
385386
"max-w-4xl",
386387
"max-w-56",
388+
"max-w-840px",
389+
"max-w-[1000px]",
390+
"max-w-[1200px]",
387391
"max-w-[1920px]",
388392
"max-w-[840px]",
393+
"max-w-[9000px]",
394+
"max-w-[900px]",
389395
"max-w-full",
390396
"max-w-none",
391397
"max-w-xl",
@@ -417,7 +423,6 @@
417423
"min-w-0",
418424
"min-w-48",
419425
"min-w-52",
420-
"min-w-fit",
421426
"ml-2",
422427
"ml-3",
423428
"ml-4",
@@ -568,6 +573,7 @@
568573
"underline-offset-2",
569574
"w-2",
570575
"w-5",
576+
"w-6",
571577
"w-65",
572578
"w-8",
573579
"w-[1200px]",

‎layouts/partials/footer.html‎

Lines changed: 45 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,54 @@
1-
2-
<div class="flex justify-center bg-gray-100 px-4 pt-10 pb-20 dark:bg-gray-900">
3-
<div class="flex w-full max-w-[840px] flex-col gap-10">
4-
<div class="flex flex-col items-center justify-evenly gap-4 md:flex-row">
5-
<a
6-
class="underline-offset-2 hover:underline"
7-
href="https://www.docker.com/"
8-
>Product offerings</a
9-
>
10-
<a
11-
class="underline-offset-2 hover:underline"
12-
href="https://www.docker.com/pricing/"
13-
>Pricing</a
14-
>
15-
<a
16-
class="underline-offset-2 hover:underline"
17-
href="https://www.docker.com/company/"
18-
>About us</a
19-
>
1+
<div class="flex bg-gray-100 px-4 pt-10 pb-20 dark:bg-gray-900">
2+
<div class="flex flex-row justify-center w-full max-w-[1200px] gap-20 mx-auto">
3+
<div id="social" class="flex flex-row gap-2">
4+
<a href="https://www.linkedin.com/company/docker">
5+
<span class="icon-svg icon-lg">
6+
{{ partial "utils/svg" "icons/linkedin.svg" }}
7+
</span>
8+
</a>
9+
<a href="https://x.com/docker/">
10+
<span class="icon-svg icon-lg">
11+
{{ partial "utils/svg" "icons/twitter.svg" }}
12+
</span>
13+
</a>
14+
<a href="https://www.facebook.com/docker.run">
15+
<span class="icon-svg icon-lg">
16+
{{ partial "utils/svg" "icons/facebook.svg" }}
17+
</span>
18+
</a>
19+
<a href="http://www.youtube.com/user/dockerrun">
20+
<span class="icon-svg icon-lg">
21+
{{ partial "utils/svg" "icons/youtube.svg" }}
22+
</span>
23+
</a>
24+
<a href="https://www.instagram.com/dockerinc/">
25+
<span class="icon-svg icon-lg">
26+
{{ partial "utils/svg" "icons/instagram.svg" }}
27+
</span>
28+
</a>
29+
</div>
30+
<div id="links" class="flex flex-row items-center gap-4">
31+
<a class="underline-offset-2 hover:underline" href="https://www.docker.com/">Product offerings</a>
32+
<a class="underline-offset-2 hover:underline" href="https://www.docker.com/pricing/">Pricing</a>
33+
<a class="underline-offset-2 hover:underline" href="https://www.docker.com/company/">About us</a>
2034
{{- with .GetPage "/contribute" }}
21-
<a class="underline-offset-2 hover:underline" href="{{ .Permalink }}"
22-
>{{ .LinkTitle }}</a
23-
>
35+
<a class="underline-offset-2 hover:underline" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
2436
{{- end }}
25-
<a href="{{ "llms.txt" | relURL }}">Read llms.txt</a>
37+
<a href="{{ " llms.txt" | relURL }}">Read llms.txt</a>
2638
</div>
27-
<hr class="text-divider-light dark:text-divider-dark" />
28-
<div class="grid grid-cols-1 place-items-center gap-8 lg:grid-cols-3">
29-
<p class="text-sm">
39+
<div id="copyright">
40+
<span class="text-sm">
3041
Copyright © 2013-{{ time.Now.Year }} Docker Inc. All rights reserved.
31-
</p>
32-
<div class="flex gap-4">
33-
<a
34-
class="fill-blue h-8 w-8 rounded-full dark:fill-blue-300"
35-
title="X (Twitter)"
36-
href="http://twitter.com/docker/"
37-
>
38-
{{ (resources.Get "images/TwitterCircle.svg").Content | safe.HTML }}
39-
</a>
40-
<a
41-
class="fill-blue h-8 w-8 rounded-full dark:fill-blue-300"
42-
title="LinkedIn"
43-
href="https://www.linkedin.com/company/docker"
44-
>
45-
{{ (resources.Get "images/LinkedinCircle.svg").Content | safe.HTML }}
46-
</a>
47-
<a
48-
class="fill-blue h-8 w-8 rounded-full dark:fill-blue-300"
49-
title="Instagram"
50-
href="https://www.instagram.com/dockerinc/"
51-
>
52-
{{ (resources.Get "images/InstagramCircle.svg").Content | safe.HTML }}
53-
</a>
54-
<a
55-
class="fill-blue h-8 w-8 rounded-full dark:fill-blue-300"
56-
title="YouTube"
57-
href="http://www.youtube.com/user/dockerrun"
58-
>
59-
{{ (resources.Get "images/YoutubeCircle.svg").Content | safe.HTML }}
60-
</a>
61-
<a
62-
class="fill-blue h-8 w-8 rounded-full dark:fill-blue-300"
63-
title="Facebook"
64-
href="https://www.facebook.com/docker.run"
65-
>
66-
{{ (resources.Get "images/FacebookCircle.svg").Content | safe.HTML }}
67-
</a>
68-
</div>
69-
<div class="flex items-center gap-4">
70-
<a
71-
class="underline-offset-2 hover:underline"
72-
title="Docker Terms of Service"
73-
href="https://www.docker.com/legal/docker-terms-service"
74-
>Terms of Service</a
75-
>
76-
<a
77-
class="underline-offset-2 hover:underline"
78-
title="Docker Systems Status Page"
79-
href="https://www.dockerstatus.com/"
80-
>Status</a
81-
>
82-
<a
83-
class="underline-offset-2 hover:underline"
84-
title="Docker Legal Terms"
85-
href="https://www.docker.com/legal"
86-
>Legal</a
87-
>
88-
</div>
89-
</div>
90-
<div class="flex items-center justify-between">
42+
</span>
9143
<button type="button" id="ot-sdk-btn" class="ot-sdk-show-settings">
9244
Cookies Settings
9345
</button>
46+
<a class="underline-offset-2 hover:underline" title="Docker Terms of Service"
47+
href="https://www.docker.com/legal/docker-terms-service">Terms of Service</a>
48+
<a class="underline-offset-2 hover:underline" title="Docker Systems Status Page"
49+
href="https://www.dockerstatus.com/">Status</a>
50+
<a class="underline-offset-2 hover:underline" title="Docker Legal Terms"
51+
href="https://www.docker.com/legal">Legal</a>
9452
</div>
9553
</div>
96-
</div>
54+
</div>

0 commit comments

Comments
 (0)