fix: reponsiveness of lists on mobile

drawbu · Sep 1, 2024 · 32f39b5 · 32f39b5
1 parent 7b0cfbf
commit 32f39b5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/pkg/app/template.templ b/pkg/app/template.templ
@@ -29,8 +29,8 @@ templ (app *Server) Template(body templ.Component) {
 			/>
 			@dev.Header
 		</head>
-		<body class="mx-auto lg:max-w-5xl max-w-xl flex flex-col gap-8 py-4 px-4">
-			<header class="flex gap-2">
+		<body class="mx-auto max-w-xl lg:max-w-4xl flex flex-col gap-8 py-4 px-4">
+			<header class="flex flex-wrap gap-2">
 				@NavButton("/", "~")
 				@NavButton("/blog", "blog")
 				@NavButton("/contact", "contact")

diff --git a/static/style.css b/static/style.css
@@ -22,6 +22,10 @@ h3, h4, h5, h6 {
     @apply text-xl;
 }
 
+ul {
+    @apply list-inside lg:list-outside;
+}
+
 #article pre {
     @apply p-4 text-sm border-solid border-2 border-black rounded bg-scroll overflow-scroll;
 }