Merge pull request #59 from RomanHauksson/demo-139-full-bleed-layout

RomanHauksson · web-flow · commit 5ce6dc5e8213 · 2025-11-26T23:58:07.000-08:00
Demo-139-full-bleed-layout
diff --git a/src/components/HighlightedSection.astro b/src/components/HighlightedSection.astro
@@ -2,9 +2,7 @@
 
 ---
 
-<section
-  class="relative right-1/2 left-1/2 -mx-6 -mr-[50vw] -ml-[50vw] w-screen max-w-none bg-zinc-200 py-8 dark:bg-zinc-800"
->
+<section class="full-width bg-zinc-200 py-8 dark:bg-zinc-800">
   <div
     class="mx-auto max-w-[50rem] px-6 [&>:first-child]:mt-0 [&>:last-child]:mb-0"
   >
diff --git a/src/components/Table.astro b/src/components/Table.astro
@@ -1,5 +1,5 @@
-<div class="overflow-auto">
-  <table class="w-full">
+<div class="full-width overflow-auto">
+  <table class="mx-auto w-auto">
     <slot />
   </table>
 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -61,10 +61,10 @@ const prefix = baseUrl.endsWith("/") ? baseUrl : baseUrl + "/";
     <title>{title}</title>
   </head>
   <body
-    class="prose prose-lg prose-zinc dark:prose-invert prose-a:text-blue-500 prose-a:dark:text-blue-300 prose-a:no-underline prose-a:hover:underline prose-a:font-normal prose-code:bg-zinc-200 prose-code:dark:bg-zinc-800 prose-code:text-zinc-800 prose-code:dark:text-zinc-200 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:font-medium prose-code:before:content-none prose-code:after:content-none mx-auto max-w-[50rem] bg-white px-6 pt-16 pb-6 font-(family-name:--font-noto-sans) dark:bg-zinc-900"
+    class="prose prose-lg prose-zinc dark:prose-invert prose-a:text-blue-500 prose-a:dark:text-blue-300 prose-a:no-underline prose-a:hover:underline prose-a:font-normal prose-code:bg-zinc-200 prose-code:dark:bg-zinc-800 prose-code:text-zinc-800 prose-code:dark:text-zinc-200 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:font-medium prose-code:before:content-none prose-code:after:content-none max-w-none bg-white pt-16 pb-6 font-(family-name:--font-noto-sans) dark:bg-zinc-900"
   >
-    <header class="mb-12">
-      <h1 class="text-center text-5xl font-medium">{title}</h1>
+    <header class="mx-auto mb-12 max-w-[50rem] px-6 text-center">
+      <h1 class="text-5xl font-medium">{title}</h1>
       <div class="flex flex-col items-center gap-6">
         <Authors authors={authors} />
         {conference && <div>{conference}</div>}
@@ -75,7 +75,7 @@ const prefix = baseUrl.endsWith("/") ? baseUrl : baseUrl + "/";
     <main>
       <Content components={{ table: Table }} />
     </main>
-    <footer class="flex w-full justify-center">
+    <footer class="mx-auto max-w-[50rem] px-6 text-center">
       <p class="prose-sm text-center">
         This page was built using <a
           href="https://github.com/RomanHauksson/academic-project-astro-template"
diff --git a/src/paper.mdx b/src/paper.mdx
@@ -107,9 +107,9 @@ Use the two columns component to display two columns of content. In this example
   </Figure>
 </TwoColumns>
 
-## LaTeX
+## $\LaTeX$
 
-You can also add LaTeX formulas, rendered during the build process using [KaTeX](https://katex.org/) so they're quick to load for visitors of your project page. You can write them inline, like this: $a^2 + b^2 = c^2$. Or, you can write them as a block:
+You can also add $\LaTeX$ formulas, rendered during the build process using [$\KaTeX$](https://katex.org/) so they're quick to load for visitors of your project page. You can write them inline, like this: $a^2 + b^2 = c^2$. Or, you can write them as a block:
 
 $$
 \int_a^b f(x) dx
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -14,4 +14,31 @@
 
 .expressive-code {
   width: 100%;
-}
+}
+
+body > main > * {
+  max-width: 50rem;
+  padding-inline: 1.5rem;
+  margin-inline: auto;
+}
+
+.full-width {
+  max-width: none;
+}
+
+.katex-display {
+  overflow: auto hidden;
+  padding-inline: 0;
+}
+
+.katex-display,
+.katex-display > .katex,
+.katex-display > .katex > .katex-html {
+  max-width: none;
+}
+
+.katex-display > .katex > .katex-html {
+  padding-inline: 1.5rem;
+  width: max-content;
+  margin-inline: auto;
+}

Original file line number	Diff line number	Diff line change
`@@ -2,9 +2,7 @@`
`2`	`2`
`3`	`3`	`---`
`4`	`4`
`5`		`-<section`
`6`		`- class="relative right-1/2 left-1/2 -mx-6 -mr-[50vw] -ml-[50vw] w-screen max-w-none bg-zinc-200 py-8 dark:bg-zinc-800"`
`7`		`->`
	`5`	`+<section class="full-width bg-zinc-200 py-8 dark:bg-zinc-800">`
`8`	`6`	`<div`
`9`	`7`	`class="mx-auto max-w-[50rem] px-6 [&>:first-child]:mt-0 [&>:last-child]:mb-0"`
`10`	`8`	`>`