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:
David Karlsson 2024-01-28 23:22:17 +01:00
parent c4f4b43b20
commit d6627bcbce
2 changed files with 5 additions and 9 deletions

View File

@ -5,19 +5,19 @@
{{ partial "head.html" . }} {{ partial "head.html" . }}
</head> </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" . }} {{ partial "header.html" . }}
<main class="grid grid-cols-main md:flex xl:grid-cols-main-xl"> <main class="flex">
<div id="sidebar" <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" . }} {{ block "left" . }}
{{ end }} {{ end }}
</div> </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" . }} {{ block "main" . }}
{{ end }} {{ end }}
</div> </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" . }} {{ block "right" . }}
{{ end }} {{ end }}
</div> </div>

View File

@ -4,10 +4,6 @@ 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: {