mirror of https://github.com/docker/docs.git
fix: use flexbox to simplify templates and fix overflow on mobile
The grid col templates weren't working correctly, switched to flexbox to make it easier to understand and work better on smaller screens. Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
parent
c4f4b43b20
commit
d6627bcbce
|
@ -5,19 +5,19 @@
|
|||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
|
||||
<body class="min-w-fit bg-background-light text-base dark:bg-background-dark dark:text-white">
|
||||
<body class="bg-background-light text-base dark:bg-background-dark dark:text-white">
|
||||
{{ partial "header.html" . }}
|
||||
<main class="grid grid-cols-main md:flex xl:grid-cols-main-xl">
|
||||
<main class="flex">
|
||||
<div id="sidebar"
|
||||
class="sticky top-16 h-[calc(100lvh-theme(space.16))] overflow-y-scroll flex flex-row-reverse bg-background-light dark:bg-gray-dark-100 md:fixed md:z-10 md:hidden md:h-screen md:w-screen">
|
||||
class="sticky top-16 flex h-screen shrink-0 grow flex-row-reverse overflow-y-scroll bg-background-light dark:bg-gray-dark-100 md:fixed md:z-10 md:hidden md:h-screen md:w-screen lg:grow-0">
|
||||
{{ block "left" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="p-6 pt-0 md:w-screen overflow-clip">
|
||||
<div class="w-[840px] flex-initial overflow-clip p-6 pt-0 md:w-lvw">
|
||||
{{ block "main" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="sticky top-16 h-[calc(100lvh-theme(space.16))] overflow-y-scroll lg:hidden">
|
||||
<div class="sticky top-16 h-screen w-[300px] shrink grow overflow-y-scroll lg:hidden">
|
||||
{{ block "right" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
@ -4,10 +4,6 @@ module.exports = {
|
|||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
gridTemplateColumns: {
|
||||
"main": 'minmax(300px, 1fr) 840px minmax(300px, 1fr)',
|
||||
"main-xl": '300px 840px minmax(0, 1fr)',
|
||||
},
|
||||
typography: (theme) => ({
|
||||
DEFAULT: {
|
||||
css: {
|
||||
|
|
Loading…
Reference in New Issue