camsmith.dev / core
forked from tangled.org/core
Monorepo for Tangled — https://tangled.org
fork atom

appview/pages: header and footer occupy full page width

Signed-off-by: Jens Rømer Hesselbjerg <jh.roemer@gmail.com>

authored by jensroemer.com and committed by

Tangled 61d45d60 446e557c

+16 -15
+13 -12
appview/pages/templates/layouts/base.html
··· 24 24 <title>{{ block "title" . }}{{ end }} · tangled</title> 25 25 {{ block "extrameta" . }}{{ end }} 26 26 </head> 27 - <body class="min-h-screen grid grid-cols-1 grid-rows-[min-content_auto_min-content] gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200" 28 - style="grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1024px) minmax(1rem, 1fr);"> 27 + <body class="min-h-screen flex flex-col gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200"> 29 28 {{ block "topbarLayout" . }} 30 - <header class="px-1 col-span-full md:col-span-1 md:col-start-2" style="z-index: 20;"> 29 + <header class="w-full bg-white dark:bg-gray-800 col-span-full md:col-span-1 md:col-start-2" style="z-index: 20;"> 31 30 32 31 {{ if .LoggedInUser }} 33 32 <div id="upgrade-banner" ··· 41 40 {{ end }} 42 41 43 42 {{ block "mainLayout" . }} 44 - <div class="px-1 col-span-full md:col-span-1 md:col-start-2 flex flex-col gap-4"> 45 - {{ block "contentLayout" . }} 46 - <main class="col-span-1 md:col-span-8"> 43 + <div class="flex-grow"> 44 + <div class="max-w-screen-lg px-4 mx-auto my-6 flex flex-col gap-4"> 45 + {{ block "contentLayout" . }} 46 + <main> 47 47 {{ block "content" . }}{{ end }} 48 48 </main> 49 - {{ end }} 50 - 51 - {{ block "contentAfterLayout" . }} 52 - <main class="col-span-1 md:col-span-8"> 49 + {{ end }} 50 + 51 + {{ block "contentAfterLayout" . }} 52 + <main> 53 53 {{ block "contentAfter" . }}{{ end }} 54 54 </main> 55 - {{ end }} 55 + {{ end }} 56 + </div> 56 57 </div> 57 58 {{ end }} 58 59 59 60 {{ block "footerLayout" . }} 60 - <footer class="px-1 col-span-full md:col-span-1 md:col-start-2 mt-12"> 61 + <footer class="bg-white dark:bg-gray-800 mt-12"> 61 62 {{ template "layouts/fragments/footer" . }} 62 63 </footer> 63 64 {{ end }}
+2 -2
appview/pages/templates/layouts/fragments/footer.html
··· 1 1 {{ define "layouts/fragments/footer" }} 2 - <div class="w-full p-4 md:p-8 bg-white dark:bg-gray-800 rounded-t drop-shadow-sm"> 3 - <div class="container mx-auto max-w-7xl px-4"> 2 + <div class="w-full p-8"> 3 + <div class="max-w-screen-lg mx-auto px-4"> 4 4 <div class="flex flex-col lg:flex-row justify-between items-start text-gray-600 dark:text-gray-400 text-sm gap-8"> 5 5 <div class="mb-4 md:mb-0"> 6 6 <a href="/" hx-boost="true" class="flex gap-2 font-semibold italic no-underline hover:no-underline">
+1 -1
appview/pages/templates/layouts/fragments/topbar.html
··· 1 1 {{ define "layouts/fragments/topbar" }} 2 - <nav class="space-x-4 px-6 py-2 rounded-b bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm"> 2 + <nav class="mx-auto space-x-4 px-6 py-2 rounded-b dark:text-white drop-shadow-sm"> 3 3 <div class="flex justify-between p-0 items-center"> 4 4 <div id="left-items"> 5 5 <a href="/" hx-boost="true" class="text-2xl no-underline hover:no-underline flex items-center gap-2">