lewis.moe
Monorepo for Tangled
appview/pages: divide base layout using 12-col grid
content occupies 8 columns on medium screens and above, and blocks are
defined for left and right sides of content, with col spans of 2 each
(and contentAfter).
Signed-off-by: oppiliappan <me@oppi.li>
authored by
oppiliappan
and committed by
Tangled
7a37de0a
88699cd8
+53
-8
appview/pages/templates/layouts/base.html
+53
-8
appview/pages/templates/layouts/base.html
···
15
15
{{ block "extrameta" . }}{{ end }}
16
16
</head>
17
17
<body class="bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">
18
-
<div class="container mx-auto px-1 md:pt-4 min-h-screen flex flex-col">
19
-
<header style="z-index: 20">
18
+
<div class="px-1 grid grid-cols-1 md:grid-cols-12">
19
+
<div class="col-span-1 md:col-span-2">
20
+
{{ block "topbarLeft" . }} {{ end }}
21
+
</div>
22
+
<header style="z-index: 20" class="col-span-1 md:col-span-8">
20
23
{{ block "topbar" . }}
21
-
{{ template "layouts/topbar" . }}
24
+
{{ template "layouts/topbar" . }}
22
25
{{ end }}
23
26
</header>
24
-
<main class="content grow">{{ block "content" . }}{{ end }}</main>
25
-
<footer class="mt-16">
26
-
{{ block "footer" . }}
27
-
{{ template "layouts/footer" . }}
28
-
{{ end }}
27
+
<div class="col-span-1 md:col-span-2">
28
+
{{ block "topbarRight" . }} {{ end }}
29
+
</div>
30
+
</div>
31
+
32
+
<div class="flex flex-col min-h-screen">
33
+
{{ block "contentLayout" . }}
34
+
<div class="grid grid-cols-1 md:grid-cols-12 gap-2">
35
+
<div class="col-span-1 md:col-span-2">
36
+
{{ block "contentLeft" . }} {{ end }}
37
+
</div>
38
+
<main class="px-1 col-span-1 md:col-span-8">
39
+
{{ block "content" . }}{{ end }}
40
+
</main>
41
+
<div class="col-span-1 md:col-span-2">
42
+
{{ block "contentRight" . }} {{ end }}
43
+
</div>
44
+
</div>
45
+
{{ end }}
46
+
47
+
{{ block "contentAfterLayout" . }}
48
+
<div class="grid grid-cols-1 md:grid-cols-12 gap-2">
49
+
<div class="col-span-1 md:col-span-2">
50
+
{{ block "contentAfterLeft" . }} {{ end }}
51
+
</div>
52
+
<main class="px-1 col-span-1 md:col-span-8">
53
+
{{ block "contentAfter" . }}{{ end }}
54
+
</main>
55
+
<div class="col-span-1 md:col-span-2">
56
+
{{ block "contentAfterRight" . }} {{ end }}
57
+
</div>
58
+
</div>
59
+
{{ end }}
60
+
</div>
61
+
62
+
<div class="px-1 grid grid-cols-1 md:grid-cols-12">
63
+
<div class="col-span-1 md:col-span-2">
64
+
{{ block "footerLeft" . }} {{ end }}
65
+
</div>
66
+
<footer class="mt-16 col-span-1 md:col-span-8">
67
+
{{ block "footer" . }}
68
+
{{ template "layouts/footer" . }}
69
+
{{ end }}
29
70
</footer>
71
+
<div class="col-span-1 md:col-span-2">
72
+
{{ block "footerRight" . }} {{ end }}
73
+
</div>
30
74
</div>
75
+
31
76
</body>
32
77
</html>
33
78
{{ end }}