From 28841b496e8ec1ade12bba17b5555827ec1f3349 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 8 Sep 2025 11:30:53 +0100
Subject: [PATCH] appview: increase base layout width on md size screens
Change-Id: kltomzxpyoxqlpxxmwxsumurruswoknv

- 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>
---
 appview/pages/templates/layouts/base.html            | 8 ++++----
 appview/pages/templates/timeline/fragments/hero.html | 2 +-
 appview/pages/templates/timeline/home.html           | 6 +++---
 3 files changed, 8 insertions(+), 8 deletions(-)
diff --git a/appview/pages/templates/layouts/base.html b/appview/pages/templates/layouts/base.html
index e039b85b..9d0e088e 100644
--- a/appview/pages/templates/layouts/base.html
+++ b/appview/pages/templates/layouts/base.html
@@ -21,9 +21,9 @@
             <title>{{ block "title" . }}{{ end }} · tangled</title>
             {{ block "extrameta" . }}{{ end }}
         </head>
-        <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">
+        <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">
           {{ block "topbarLayout" . }}
-            <header class="px-1 col-span-1 md:col-start-3 md:col-span-8" style="z-index: 20;">
+            <header class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3" style="z-index: 20;">
 
                {{ if .LoggedInUser }}
                 <div id="upgrade-banner"
@@ -37,7 +37,7 @@
           {{ end }}
 
           {{ block "mainLayout" . }}
-            <div class="px-1 col-span-1 md:col-start-3 md:col-span-8 flex flex-col gap-4">
+            <div class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3 flex flex-col gap-4">
               {{ block "contentLayout" . }}
                 <main class="col-span-1 md:col-span-8">
                   {{ block "content" . }}{{ end }}
@@ -53,7 +53,7 @@
           {{ end }}
 
           {{ block "footerLayout" . }}
-            <footer class="px-1 col-span-1 md:col-start-3 md:col-span-8 mt-12">
+            <footer class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3 mt-12">
               {{ template "layouts/fragments/footer" . }}
             </footer>
           {{ end }}
diff --git a/appview/pages/templates/timeline/fragments/hero.html b/appview/pages/templates/timeline/fragments/hero.html
index 1db31f4f..c128cb69 100644
--- a/appview/pages/templates/timeline/fragments/hero.html
+++ b/appview/pages/templates/timeline/fragments/hero.html
@@ -23,7 +23,7 @@
 
         <figure class="w-full hidden md:block md:w-auto">
             <a href="https://tangled.sh/@tangled.sh/core" class="block">
-                <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" />
+                <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" />
             </a>
             <figcaption class="text-sm text-gray-600 dark:text-gray-400 mt-2 text-center">
                 Monorepo for Tangled, built in the open with the community.
diff --git a/appview/pages/templates/timeline/home.html b/appview/pages/templates/timeline/home.html
index e4207402..06367195 100644
--- a/appview/pages/templates/timeline/home.html
+++ b/appview/pages/templates/timeline/home.html
@@ -27,7 +27,7 @@
 {{ define "feature" }}
     {{ $info := index . 0 }}
     {{ $bullets := index . 1 }}
-    <div class="flex flex-col items-top gap-6 md:flex-row md:gap-12">
+    <div class="flex flex-col items-center gap-6 md:flex-row md:items-top">
         <div class="flex-1">
             <h2 class="text-2xl font-bold text-black dark:text-white mb-6">{{ $info.title }}</h2>
             <ul class="leading-normal">
@@ -38,14 +38,14 @@
         </div>
         <div class="flex-shrink-0 w-96 md:w-1/3">
           <a href="{{ $info.image }}">
-            <img src="{{ $info.image }}" alt="{{ $info.alt }}" class="w-full h-auto rounded" />
+            <img src="{{ $info.image }}" alt="{{ $info.alt }}" class="w-full h-auto rounded shadow-sm" />
           </a>
         </div>
     </div>
 {{ end }}
 
 {{ define "features" }}
-  <div class="prose dark:text-gray-200 space-y-12 px-6 py-4">
+  <div class="prose dark:text-gray-200 space-y-12 px-6 py-4 bg-white dark:bg-gray-800 rounded drop-shadow-sm">
     {{ template "feature" (list
         (dict
             "title" "lightweight git repo hosting"
-- 
2.43.0


