Merge pull request #19242 from dvdksn/fix-rendering-issues

site: fix rendering issues
This commit is contained in:
David Karlsson 2024-01-29 09:47:13 +01:00 committed by GitHub
commit f94771e77f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 755 additions and 339 deletions

View File

@ -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>

View File

@ -8,11 +8,11 @@
{{- if $i -}}
<span>/</span>
{{- end -}}
<a href="{{ $e.path }}" class="link whitespace-nowrap overflow-hidden overflow-ellipsis">{{ markdownify $e.title }}</a>
<a href="{{ $e.path }}" class="link truncate">{{ markdownify $e.title }}</a>
{{- end -}}
{{- end -}}
{{- with $scratch.Get "lastsection" -}}
<span>/</span>
<span class="shrink-0">{{ markdownify .title }}</span>
<span class="truncate">{{ markdownify .title }}</span>
{{- end -}}
</nav>

View File

@ -1,6 +1,7 @@
<header class="sticky top-0 z-20 h-16 px-4 text-white bg-gradient-to-r from-accent-light to-blue-light-500 dark:from-accent-dark dark:to-blue-dark-100">
<div class="mx-auto flex h-full max-w-[1400px] items-center justify-between">
<div class="flex h-full items-center gap-8 md:gap-2">
{{ if not .IsHome }}
<button x-data tabindex="4" @click="() => {
$store.showSidebar = ! $store.showSidebar;
const sidebar = document.querySelector('#sidebar');
@ -12,6 +13,7 @@
}" class="icon-svg hidden px-4 md:block" aria-label="Menu">
{{ partial "icon" "menu" }}
</button>
{{ end }}
<div>
{{/* main logo */}}
<a href="{{ site.BaseURL }}">

1074
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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: {