mirror of https://github.com/docker/docs.git
fix: various theme improvements (#22725)
Harmonize various areas of the theme.
This commit is contained in:
Arthur
GitHub
parent
2c90601347
commit
1686e58dd1
|
|
@ -104,3 +104,6 @@ input[type="search"]::-ms-clear {
|
|||
list-style-type: lower-roman;
|
||||
}
|
||||
}
|
||||
.navbar-group:first-of-type {
|
||||
margin-top: 0.2rem !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -118,9 +118,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
@utility navbar-entry-margin {
|
||||
@apply px-2 py-1;
|
||||
}
|
||||
|
||||
@utility navbar-group {
|
||||
@apply mt-5;
|
||||
}
|
||||
|
||||
@utility navbar-entry-background-current {
|
||||
@apply bg-gray-100 dark:bg-gray-900;
|
||||
}
|
||||
@utility navbar-group-font-title {
|
||||
font-size: var(--color-navbar-group-font-title-size);
|
||||
@apply font-semibold uppercase;
|
||||
@apply pb-1.5 font-semibold uppercase;
|
||||
color: var(--color-navbar-text);
|
||||
.dark & {
|
||||
color: var(--color-navbar-text-dark);
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
>
|
||||
<button
|
||||
@click="collapse = false"
|
||||
class="bg-blue flex items-center rounded-full px-2 text-sm text-white dark:bg-blue-400"
|
||||
class="bg-blue flex items-center rounded-full px-2 text-sm text-white dark:bg-blue-500"
|
||||
>
|
||||
<span>Show more</span>
|
||||
<span class="icon-svg"
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<button
|
||||
@click="collapse = true"
|
||||
x-show="!collapse"
|
||||
class="rounded-sm-b-lg bg-blue mx-auto mt-4 flex items-center px-2 text-sm text-white dark:bg-blue-800"
|
||||
class="bg-blue mx-auto mt-4 flex items-center rounded-full px-2 text-sm text-white dark:bg-blue-500"
|
||||
>
|
||||
<span>Hide</span>
|
||||
<span class="icon-svg"
|
||||
|
|
|
|||
|
|
@ -6,9 +6,6 @@
|
|||
{{ define "main" }}
|
||||
{{ partial "content-default.html" . }}
|
||||
<div class="prose dark:prose-invert max-w-4xl">
|
||||
<div class="md-dropdown ml-auto hidden lg:block">
|
||||
{{ partial "md-dropdown.html" . }}
|
||||
</div>
|
||||
{{ if (.Store.Get "multipage") }}
|
||||
{{- with .PrevInSection }}
|
||||
<div class="not-prose col-start-2 my-4">
|
||||
|
|
|
|||
|
|
@ -293,19 +293,19 @@
|
|||
<div class="flex flex-col gap-4 md:flex-row">
|
||||
<a
|
||||
href="https://forums.docker.com/"
|
||||
class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-400 dark:text-white dark:hover:bg-gray-500"
|
||||
class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600"
|
||||
>
|
||||
Visit Docker Forum
|
||||
</a>
|
||||
<a
|
||||
href="https://dockr.ly/comm-slack"
|
||||
class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-400 dark:text-white dark:hover:bg-gray-500"
|
||||
class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600"
|
||||
>
|
||||
Join Docker Slack
|
||||
</a>
|
||||
<a
|
||||
href="https://www.docker.com/community/captains/"
|
||||
class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-400 dark:text-white dark:hover:bg-gray-500"
|
||||
class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600"
|
||||
>
|
||||
Find your Docker Captain
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
{{- errorf "[languages] language is missing an icon: '%s' in %s" (urlize (strings.ToLower .Title)) page.File.Filename }}
|
||||
{{- end }}
|
||||
<span
|
||||
class="border-divider-light dark:border-divider-dark inline-flex items-center gap-1 rounded-full border bg-gray-100 px-2 text-sm text-gray-200 select-none dark:bg-gray-800 dark:text-gray-400"
|
||||
class="border-divider-light dark:border-divider-dark inline-flex items-center gap-1 rounded-full border bg-gray-100 px-2 text-sm text-gray-800 select-none dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<img
|
||||
class="py-1"
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
class="bg-background-light dark:bg-background-dark absolute top-full right-0 z-50 w-screen max-w-xl rounded-sm px-6 py-4 shadow-lg"
|
||||
>
|
||||
<div id="search-bar-results">
|
||||
{{- $emptyState := `<div class="p-2 text-gray-200 dark:text-gray-500">Start typing to search… or try <button @click="open=false" class="open-kapa-widget link">Ask AI</button></div>` }}
|
||||
{{- $emptyState := `<div class="p-2 text-gray-500 dark:text-gray-400">Start typing to search… or try <button @click="open=false" class="open-kapa-widget link">Ask AI</button></div>` }}
|
||||
{{- $emptyState | safe.HTML }}
|
||||
<!-- results -->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
{{- end }}
|
||||
</div>
|
||||
{{- with ($root.Params.time) }}
|
||||
<div class="flex gap-2 text-gray-200 dark:text-gray-500">
|
||||
<div class="flex gap-2 text-gray-400 dark:text-gray-400">
|
||||
<span class="icon-svg"
|
||||
>{{ partialCached "icon" "schedule" "schedule" }}</span
|
||||
>
|
||||
|
|
|
|||
|
|
@ -32,32 +32,36 @@
|
|||
{{- end }}
|
||||
{{- range .Params.sidebar.groups }}
|
||||
<!-- Main titles -->
|
||||
<li class="navbar-group-font-title mt-2 px-2 py-2 pt-5 pb-2">
|
||||
{{ . }}
|
||||
</li>
|
||||
{{- range where $pages "Params.sidebar.group" . }}
|
||||
{{- if .IsSection }}
|
||||
{{- template "renderList" . }}
|
||||
{{- else }}
|
||||
{{- template "renderSingle" . }}
|
||||
<div class="navbar-group">
|
||||
<li class="navbar-group-font-title">
|
||||
{{ . }}
|
||||
</li>
|
||||
{{- range where $pages "Params.sidebar.group" . }}
|
||||
{{- if .IsSection }}
|
||||
{{- template "renderList" . }}
|
||||
{{- else }}
|
||||
{{- template "renderSingle" . }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{/* Recursive template for sidebar items */}}
|
||||
{{ define "renderList" }}
|
||||
{{ $isCurrent := eq page . }}
|
||||
{{ $expanded := or $isCurrent (page.IsDescendant .) }}
|
||||
<li x-data="{ expanded: {{ $expanded }} }">
|
||||
<li class="" x-data="{ expanded: {{ $expanded }} }">
|
||||
<div
|
||||
class="justify-between{{ if $isCurrent }}
|
||||
bg-gray-100 dark:bg-gray-900
|
||||
{{ end }} flex w-full items-center rounded-sm px-4"
|
||||
class="{{ if $isCurrent }}
|
||||
navbar-entry-background-current
|
||||
{{ end }} flex w-full items-center justify-between rounded-sm"
|
||||
>
|
||||
<div class="w-full truncate py-1">
|
||||
<div class="navbar-entry-margin w-full truncate">
|
||||
{{- if .Permalink }}
|
||||
{{/* If the link is not empty, use it */}}
|
||||
<!-- Sections that have children and linking to a page -->
|
||||
<a
|
||||
{{ if $isCurrent }}
|
||||
aria-current="page" id="sidebar-current-page"
|
||||
|
|
@ -69,6 +73,7 @@
|
|||
</a>
|
||||
{{- else }}
|
||||
{{/* Otherwise, just expand the section */}}
|
||||
<!-- Sections that have children and do not link to a page -->
|
||||
<button
|
||||
@click="expanded = !expanded"
|
||||
class="hover:text-blue w-full text-left select-none hover:dark:text-blue-400"
|
||||
|
|
@ -77,9 +82,10 @@
|
|||
</button>
|
||||
{{- end }}
|
||||
</div>
|
||||
<!-- Expand group button -->
|
||||
<button
|
||||
@click="expanded = !expanded"
|
||||
class="rounded-sm hover:bg-gray-300 hover:dark:bg-gray-300"
|
||||
class="rounded-sm hover:bg-gray-200 hover:dark:bg-gray-800"
|
||||
>
|
||||
<span
|
||||
:class="{ 'hidden' : expanded }"
|
||||
|
|
@ -106,9 +112,9 @@
|
|||
|
||||
{{ define "renderSingle" }}
|
||||
{{- if .Params.sidebar.goto }}
|
||||
<li class="hover:text-blue px-4 hover:dark:text-blue-400">
|
||||
<li class="navbar-entry-margin hover:text-blue hover:dark:text-blue-400">
|
||||
<a
|
||||
class="block w-full truncate py-2"
|
||||
class="block w-full truncate"
|
||||
href="{{ .Params.sidebar.goto }}"
|
||||
title="{{ .LinkTitle }}"
|
||||
>
|
||||
|
|
@ -118,15 +124,15 @@
|
|||
{{- else }}
|
||||
{{ $isCurrent := eq page . }}
|
||||
<li
|
||||
class="hover:text-blue {{ if $isCurrent }}
|
||||
bg-gray-100 dark:bg-gray-900
|
||||
{{ end }} rounded-sm px-4 hover:dark:text-blue-400"
|
||||
class="navbar-entry-margin hover:text-blue {{ if $isCurrent }}
|
||||
navbar-entry-background-current
|
||||
{{ end }} rounded-sm hover:dark:text-blue-400"
|
||||
>
|
||||
<a
|
||||
{{ if $isCurrent }}
|
||||
aria-current="page" id="sidebar-current-page"
|
||||
{{ end }}
|
||||
class="block w-full truncate py-2"
|
||||
class="block w-full truncate"
|
||||
href="{{ .Permalink }}"
|
||||
title="{{ .LinkTitle }}"
|
||||
>
|
||||
|
|
@ -139,8 +145,8 @@
|
|||
{{ define "renderTitle" }}
|
||||
{{ .LinkTitle }}
|
||||
{{- with .Params.sidebar.badge }}
|
||||
<span
|
||||
>{{- partial "components/badge.html" (dict "color" .color "content" .text) }}</span
|
||||
>
|
||||
<span>
|
||||
{{- partial "components/badge.html" (dict "color" .color "content" .text) }}
|
||||
</span>
|
||||
{{- end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue