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

css: improve styles to reduce layout shifts 

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson 2024-01-24 15:02:29 +01:00
parent 299ffee524
commit ff459f0dcd
3 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
layouts/_default/baseof.html
View File

@ -5,27 +5,24 @@
{{ partial "head.html" . }} {{ partial "head.html" . }}
</head> </head>
<body <body class="min-w-fit bg-background-light text-base dark:bg-background-dark dark:text-white">
class="bg-background-light dark:bg-background-dark text-base divide-y divide-divider-light dark:divide-divider-dark flex flex-col h-max dark:text-white">
{{ partial "header.html" . }} {{ partial "header.html" . }}
<main class="min-h-screen flex items-stretch"> <main class="grid grid-cols-main md:flex xl:grid-cols-main-xl">
<div id="sidebar" <div id="sidebar"
class="z-10 flex flex-col items-end sticky top-16 h-[calc(100vh-theme(space.16))] overflow-y-scroll flex-shrink-0 flex-grow md:fixed md:w-screen md:hidden bg-background-light dark:bg-gray-dark-100"> class="sticky top-16 h-[calc(100lvh-theme(space.16))] overflow-y-scroll flex flex-row-reverse dark:bg-gray-dark-100 md:fixed md:z-10 md:hidden md:h-screen md:w-screen">
{{ block "left" . }} {{ block "left" . }}
{{ end }} {{ end }}
</div> </div>
<div class="w-[840px] flex flex-col lg:w-full lg:flex-grow px-8 pb-16 sm:px-4 overflow-hidden"> <div class="p-6 pt-0">
{{ block "main" . }} {{ block "main" . }}
{{ end }} {{ end }}
</div> </div>
<div class="sticky w-[300px] top-16 p-5 h-[calc(100vh-theme(space.16))] flex-grow overflow-y-auto lg:hidden"> <div class="sticky top-16 h-[calc(100lvh-theme(space.16))] overflow-y-scroll lg:hidden">
{{ block "right" . }} {{ block "right" . }}
{{ end }} {{ end }}
</div> </div>
</main> </main>
<footer> <footer>{{ partialCached "footer.html" . }}</footer>
{{ partialCached "footer.html" . }}
</footer>
</body> </body>
</html> </html>

6
layouts/partials/aside.html
View File

@ -1,6 +1,4 @@
<aside class="space-y-4 lg:hidden w-[300px]"> <aside class="py-4 space-y-4">
<div class="space-y-2"> {{ partial "github-links.html" . }}
{{ partial "github-links.html" . }}
</div>
{{ partial "toc-default.html" . }} {{ partial "toc-default.html" . }}
</aside> </aside>

4
tailwind.config.js
View File

@ -4,6 +4,10 @@ module.exports = {
darkMode: "class", darkMode: "class",
theme: { theme: {
extend: { extend: {
gridTemplateColumns: {
"main": 'minmax(300px, 1fr) 840px minmax(300px, 1fr)',
"main-xl": '300px 840px minmax(0, 1fr)',
},
typography: (theme) => ({ typography: (theme) => ({
DEFAULT: { DEFAULT: {
css: { css: {