docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: design updates march 2024 

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson 2024-03-04 11:58:08 +01:00
parent 6d1edcc074
commit d29dbaf482
9 changed files with 56 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/css/global.css
View File

@ -8,6 +8,11 @@
:root {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scrollbar-color: theme(colors.gray.light.400) theme(colors.black / 0.05);
&.dark {
scrollbar-color: theme(colors.gray.dark.800) theme(colors.white / 0.10);
}
}
}

8
assets/css/icons.css
View File

@ -11,19 +11,19 @@
.icon-xs {
svg {
@apply text-base;
font-size: 12px;
}
}
.icon-sm {
svg {
@apply text-lg;
font-size: 16px;
}
}
.icon-top {
.icon-lg {
svg {
@apply ml-1 align-top;
font-size: 32px;
}
}
}

1
assets/css/styles.css
View File

@ -10,7 +10,6 @@
@import "/assets/css/code";
@import "/assets/css/toc";
@import "/assets/css/callouts";
@import "/assets/css/tables";
@import "tailwindcss/utilities";
@import "/assets/css/syntax-light";

15
assets/css/tables.css
View File

@ -1,15 +0,0 @@
@layer components {
.prose table {
@apply table w-full overflow-x-auto text-base sm:block;
thead tr {
@apply bg-gray-light-300 dark:bg-gray-dark-300;
}
tbody tr:nth-of-type(2n) {
@apply bg-gray-light-200 dark:bg-gray-dark-200;
}
th,
td {
@apply p-2;
}
}
}

2
layouts/_default/_markup/render-link.html
View File

@ -7,7 +7,7 @@
target="_blank"
rel="noopener">
{{- .Text | safeHTML -}}
<span class="icon-svg icon-xs icon-top">
<span class="pl-1 icon-svg icon-sm">
{{- partial "icon" "open_in_new" -}}
</span></a>
{{- else if (strings.HasPrefix $url "/") -}}

80
layouts/partials/components/card.html
View File

@ -1,54 +1,52 @@
{{ if (and .image .icon) }}
{{ errorf "card: don't use both image and icon: %s" . }}
{{ end }}
<div class="not-prose overflow-x-hidden">
<div class="not-prose overflow-x-hidden drop-shadow bg-white rounded
border border-gray-light-100 dark:bg-gray-dark-200 dark:border-gray-dark-400
{{ if .link }}hover:border-gray-light-200 hover:dark:border-gray-dark{{ end }}">
{{ if .link }}
<a class="h-full" href="{{ .link }}">
{{ end }}
<div class="h-full bg-white rounded-sm
border border-gray-light-100 drop-shadow-sm dark:bg-gray-dark-200 dark:border-gray-dark-400
{{ if .link }}hover:drop-shadow-lg hover:border-gray-light-200 hover:dark:border-gray-dark{{ end }}">
{{ if .image }}
{{/* use the "tall image" layout */}}
<div class="flex gap-2 items-stretch">
<div class="basis-1/3">
<img class="h-full w-full object-cover" src="{{ .image }}" alt="">
</div>
<div class="basis-2/3 flex flex-col gap-2 p-4">
<div class="text-xl text-gray-light-800 leading-snug dark:text-white flex gap-2">
{{ markdownify .title }}
</div>
<div class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
{{ .description | markdownify }}
</div>
</div>
<a href="{{ .link }}">
{{ end }}
{{ if .image }}
{{/* use the "tall image" layout */}}
<div class="flex gap-2 items-stretch">
<div class="basis-1/3">
<img class="h-full w-full object-cover" src="{{ .image }}" alt="">
</div>
{{ else }}
{{/* use the default layout */}}
<div class="flex flex-col gap-2 p-4">
<div class="flex gap-4 items-center">
{{ with .icon }}
{{ if strings.ContainsAny . "/." }}
{{/* image file */}}
<img class="w-[32px] invertible" src="{{ . }}" alt="">
{{ else }}
{{/* icon ligature */}}
<span class="icon-svg">{{ partial "icon" . }}</span>
{{ end }}
{{ end }}
<div>
<div class="text-xl text-gray-light-800 leading-snug dark:text-white flex items-center gap-2">
{{ markdownify .title }}
</div>
</div>
<div class="basis-2/3 flex flex-col gap-2 p-4">
<div class="text-xl text-gray-light-800 leading-snug dark:text-white flex gap-2">
{{ markdownify .title }}
</div>
<div class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
{{ .description | markdownify }}
</div>
</div>
{{ end }}
</div>
{{ if .link }}
</a>
{{ else }}
{{/* use the default layout */}}
<div class="flex flex-col gap-2 p-4">
<div class="flex gap-4 items-center">
{{ with .icon }}
{{ if strings.ContainsAny . "/." }}
{{/* image file */}}
<img class="w-[32px] invertible" src="{{ . }}" alt="">
{{ else }}
{{/* icon ligature */}}
<span class="icon-svg">{{ partial "icon" . }}</span>
{{ end }}
{{ end }}
<div>
<div class="text-xl text-gray-light-800 leading-snug dark:text-white flex items-center gap-2">
{{ markdownify .title }}
</div>
</div>
</div>
<div class="text-gray-light-600 leading-snug dark:text-gray-dark-700">
{{ .description | markdownify }}
</div>
</div>
{{ end }}
{{ if .link }}
</a>
{{ end }}
</div>

12
layouts/partials/github-links.html
View File

@ -4,9 +4,9 @@
<p class="flex items-center gap-2">
<span class="icon-svg">{{ partial "icon" "edit" }}</span>
<a class="link" target="_blank" rel="noopener"
href="{{ site.Params.repo }}/edit/main/content/{{ .Path }}">{{ T "editPage" }}
<span class="icon-svg icon-xs icon-top">
{{- partial "icon" "open_in_new" -}}
href="{{ site.Params.repo }}/edit/main/content/{{ .Path }}">{{- T "editPage" -}}
<span class="icon-svg icon-xs">
{{ partial "icon" "open_in_new" }}
</span></a>
</p>
{{ end }}
@ -14,9 +14,9 @@
<p class="flex items-center gap-2">
<span class="icon-svg">{{ partial "icon" "done" }}</span>
<a class="link" target="_blank" rel="noopener"
href="{{ site.Params.repo }}/issues/new?template=doc_issue.yml&location={{ .Permalink }}&labels=status%2Ftriage">{{ T "requestChanges" }}
<span class="icon-svg icon-xs icon-top">
{{- partial "icon" "open_in_new" -}}
href="{{ site.Params.repo }}/issues/new?template=doc_issue.yml&location={{ .Permalink }}&labels=status%2Ftriage">{{- T "requestChanges" -}}
<span class="icon-svg icon-xs">
{{ partial "icon" "open_in_new" }}
</span></a>
</a>
</p>

2
layouts/partials/tooltip.html
View File

@ -1,5 +1,5 @@
<div data-tooltip-wrapper>
<div data-tooltip-button class="icon-svg icon-sm flex items-center text-blue-light dark:text-blue-dark">
<div data-tooltip-button class="icon-svg flex items-center text-blue-light dark:text-blue-dark">
{{ partial "icon" "help" }}
</div>
<div data-tooltip-body

1
tailwind.config.js
View File

@ -12,7 +12,6 @@ module.exports = {
'pre code': false,
'code::before': false,
'code::after': false,
table: false,
// light colors for prose
"--tw-prose-body": theme("colors.black"),
"--tw-prose-headings": theme("colors.black"),