www: fix footer to the bottom when content is short (#271)

Author: magurotuna

www/routes/docs/[...slug].tsx

@@ -66,10 +66,12 @@ export default function DocsPage(props: PageProps<Data>) {
         <link rel="stylesheet" href={`/gfm.css?build=${__FRSH_BUILD_ID}`} />
         {description && <meta name="description" content={description} />}
       </Head>
-      <Header />
-      <NavigationBar active="/docs" />
-      <Main path={props.url.pathname} page={props.data.page} />
-      <Footer />
+      <div class={tw`flex flex-col min-h-screen`}>
+        <Header />
+        <NavigationBar active="/docs" />
+        <Main path={props.url.pathname} page={props.data.page} />
+        <Footer />
+      </div>
     </>
   );
 }
@@ -152,13 +154,13 @@ function Title() {
 function Main(props: { path: string; page: Page }) {
   const main = tw`mx-auto max-w-screen-lg px-4 flex gap-6`;
   return (
-    <>
+    <div class={tw`flex-1`}>
       <MobileSidebar path={props.path} />
       <div class={main}>
         <DesktopSidebar path={props.path} />
         <Content page={props.page} />
       </div>
-    </>
+    </div>
   );
 }
 

www/routes/index.tsx

@@ -44,11 +44,15 @@ export default function MainPage(props: PageProps) {
         <meta property="og:url" content={props.url.href} />
         <meta property="og:image" content={ogImageUrl} />
       </Head>
-      <Hero />
-      <Intro />
-      <GettingStarted origin={origin} />
-      <Example />
-      <Footer />
+      <div class={tw`flex flex-col min-h-screen`}>
+        <Hero />
+        <div class={tw`flex-1`}>
+          <Intro />
+          <GettingStarted origin={origin} />
+          <Example />
+        </div>
+        <Footer />
+      </div>
     </>
   );
 }