feat: ✨ optimize style

.env.example

@@ -1,3 +1,5 @@
+NODE_ENV=development
+PORT=3000
 DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres"
 SESSION_SECRET="super-duper-s3cret"
 # POSTGRES_USER=

app/routes/index.tsx

@@ -4,7 +4,8 @@ import { useOptionalUser } from '~/utils'
 export default function Index() {
   const user = useOptionalUser()
   return (
-    <main className="relative min-h-screen bg-white sm:flex sm:items-center sm:justify-center">
+    // sm:items-center
+    <main className="relative min-h-screen bg-white sm:flex sm:justify-center">
       <div className="relative sm:pb-16 sm:pt-8">
         <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
           <div className="relative shadow-xl sm:overflow-hidden sm:rounded-2xl">
@@ -14,12 +15,13 @@ export default function Index() {
                 src="images/background.jpeg"
                 alt="BB King playing blues on his Les Paul guitar"
               />
-              <div className="absolute inset-0 bg-[color:rgba(27,167,254,0.5)] mix-blend-multiply" />
+              {/* bg-[color:rgba(27,167,254,0.5)] mix-blend-multiply */}
+              <div className="absolute inset-0" />
             </div>
             <div className="lg:pb-18 relative px-4 pt-16 pb-8 sm:px-6 sm:pt-24 sm:pb-14 lg:px-8 lg:pt-32">
-              <h1 className="text-center text-6xl font-extrabold tracking-tight sm:text-8xl lg:text-9xl">
+              <h1 className="text-center text-6xl font-extrabold tracking-tight sm:text-8xl lg:text-6xl">
                 <span className="block uppercase text-blue-500 drop-shadow-md">
-                  Blues Stack
+                  Remix NestJS Stack
                 </span>
               </h1>
               <p className="mx-auto mt-6 max-w-lg text-center text-xl text-white sm:max-w-3xl">
@@ -51,13 +53,13 @@ export default function Index() {
                   </div>
                 )}
               </div>
-              <a href="https://remix.run">
+              {/* <a href="https://remix.run">
                 <img
                   src="images/Remix.svg"
                   alt="Remix"
                   className="mx-auto mt-16 w-full max-w-[12rem] md:max-w-[16rem]"
                 />
-              </a>
+              </a> */}
             </div>
           </div>
         </div>

app/styles/tailwind.css

@@ -1405,6 +1405,11 @@ select {
   line-height: 2rem;
 }
 
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .font-extrabold {
   font-weight: 800;
 }
@@ -2283,4 +2288,9 @@ select {
     font-size: 8rem;
     line-height: 1;
   }
+
+  .lg\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
 }

server/main.ts

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import path from 'path'
+import { ConfigService } from '@nestjs/config'
 import { NestFactory } from '@nestjs/core'
 import type { NestExpressApplication } from '@nestjs/platform-express'
 import chalk from 'chalk'
@@ -16,21 +17,17 @@ async function bootstrap() {
 
   app.disable('x-powered-by')
   app.useLogger(app.get(Logger))
-  // Remix fingerprints its assets so we can cache forever.
   app.use(
     '/build',
     express.static(path.resolve(process.cwd(), 'public/build'), {
       immutable: true,
       maxAge: '1y'
     })
   )
-  // Everything else (like favicon.ico) is cached for an hour. You may want to be
-  // more aggressive with this caching.
   app.use(express.static('public', { maxAge: '1h' }))
   // const { httpAdapter } = app.get(HttpAdapterHost)
 
-  /* config */
-  // const configService = app.get(ConfigService)
+  const configService = app.get(ConfigService)
 
   /* prisma */
   // const prismaService: PrismaService = await app.get<PrismaService>(
@@ -55,7 +52,7 @@ async function bootstrap() {
   /* swagger */
   // setupSwagger(app)
 
-  await app.listen(3000)
+  await app.listen(configService.get('PORT') || 3000)
   console.log(
     chalk.green(
       `⚡️ Application is running on: ${chalk.underline(await app.getUrl())}`