oppi.li
- sm: single column grid
- md: 10 column grid, with 1-8-1 layout
- lg: 12 column grid, with 2-8-2 layout
Signed-off-by: oppiliappan me@oppi.li
+4
-4
appview/pages/templates/layouts/base.html
+4
-4
appview/pages/templates/layouts/base.html
···
21
21
<title>{{ block "title" . }}{{ end }} · tangled</title>
22
22
{{ block "extrameta" . }}{{ end }}
23
23
</head>
24
-
<body class="min-h-screen grid grid-cols-1 grid-rows-[min-content_auto_min-content] md:grid-cols-12 gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">
24
+
<body class="min-h-screen grid grid-cols-1 grid-rows-[min-content_auto_min-content] md:grid-cols-10 lg:grid-cols-12 gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">
25
25
{{ block "topbarLayout" . }}
26
-
<header class="px-1 col-span-1 md:col-start-3 md:col-span-8" style="z-index: 20;">
26
+
<header class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3" style="z-index: 20;">
27
27
28
28
{{ if .LoggedInUser }}
29
29
<div id="upgrade-banner"
···
37
37
{{ end }}
38
38
39
39
{{ block "mainLayout" . }}
40
-
<div class="px-1 col-span-1 md:col-start-3 md:col-span-8 flex flex-col gap-4">
40
+
<div class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3 flex flex-col gap-4">
41
41
{{ block "contentLayout" . }}
42
42
<main class="col-span-1 md:col-span-8">
43
43
{{ block "content" . }}{{ end }}
···
53
53
{{ end }}
54
54
55
55
{{ block "footerLayout" . }}
56
-
<footer class="px-1 col-span-1 md:col-start-3 md:col-span-8 mt-12">
56
+
<footer class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3 mt-12">
57
57
{{ template "layouts/fragments/footer" . }}
58
58
</footer>
59
59
{{ end }}
+1
-1
appview/pages/templates/timeline/fragments/hero.html
+1
-1
appview/pages/templates/timeline/fragments/hero.html
···
23
23
24
24
<figure class="w-full hidden md:block md:w-auto">
25
25
<a href="https://tangled.sh/@tangled.sh/core" class="block">
26
-
<img src="https://assets.tangled.network/hero-repo.png" alt="Screenshot of the Tangled monorepo." class="max-w-md mx-auto md:max-w-none w-full md:w-[30vw] h-auto shadow-sm rounded hover:shadow-md transition-shadow" />
26
+
<img src="https://assets.tangled.network/hero-repo.png" alt="Screenshot of the Tangled monorepo." class="max-w-md mx-auto md:max-w-none w-full md:w-[30vw] h-auto shadow-sm rounded" />
27
27
</a>
28
28
<figcaption class="text-sm text-gray-600 dark:text-gray-400 mt-2 text-center">
29
29
Monorepo for Tangled, built in the open with the community.
+3
-3
appview/pages/templates/timeline/home.html
+3
-3
appview/pages/templates/timeline/home.html
···
27
27
{{ define "feature" }}
28
28
{{ $info := index . 0 }}
29
29
{{ $bullets := index . 1 }}
30
-
<div class="flex flex-col items-top gap-6 md:flex-row md:gap-12">
30
+
<div class="flex flex-col items-center gap-6 md:flex-row md:items-top">
31
31
<div class="flex-1">
32
32
<h2 class="text-2xl font-bold text-black dark:text-white mb-6">{{ $info.title }}</h2>
33
33
<ul class="leading-normal">
···
38
38
</div>
39
39
<div class="flex-shrink-0 w-96 md:w-1/3">
40
40
<a href="{{ $info.image }}">
41
-
<img src="{{ $info.image }}" alt="{{ $info.alt }}" class="w-full h-auto rounded" />
41
+
<img src="{{ $info.image }}" alt="{{ $info.alt }}" class="w-full h-auto rounded shadow-sm" />
42
42
</a>
43
43
</div>
44
44
</div>
45
45
{{ end }}
46
46
47
47
{{ define "features" }}
48
-
<div class="prose dark:text-gray-200 space-y-12 px-6 py-4">
48
+
<div class="prose dark:text-gray-200 space-y-12 px-6 py-4 bg-white dark:bg-gray-800 rounded drop-shadow-sm">
49
49
{{ template "feature" (list
50
50
(dict
51
51
"title" "lightweight git repo hosting"