Update CSS

smithy-lang · Aug 1, 2024 · f0ff957 · f0ff957
1 parent a87fc5d
commit f0ff957
Show file tree

Hide file tree

Showing 6 changed files with 253 additions and 127 deletions.
diff --git a/tutorials/full-stack-application/app/app/globals.css b/tutorials/full-stack-application/app/app/globals.css
@@ -4,7 +4,6 @@
 
 :root {
   --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 230, 210, 200;
   --background-end-rgb: 255, 255, 255;
 }
 
@@ -34,59 +33,71 @@ body {
 
 /* Home styling */
 .home {
-    @apply flex min-h-screen flex-col items-center justify-between p-24
+    @apply container mx-auto px-2 pt-8
 }
 
 .home_header {
-    @apply z-10 w-full max-w-7xl items-center justify-between font-sans text-sm lg:flex
+    @apply sticky top-0 w-full max-w-7xl items-center justify-between font-sans text-sm lg:flex;
 }
 
 .home_header_content {
-    @apply fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none
+    @apply fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none;
+}
+
+.title_container {
+    @apply max-w-2xl mx-auto m-10 pl-4;
 }
 
 /* ----------- */
 
 /* Menu styling */
 .home_menu {
-    @apply grid gap-8 pt-14;
-  }
+    @apply max-w-2xl mx-auto mt-10;
+}
 
 .menu-item_card {
-    @apply inline-flex p-6 justify-center items-start bg-orange-50 hover:bg-orange-100 hover:shadow-md rounded-3xl;
+    @apply flex flex-col bg-white rounded-lg shadow-md border m-5;
 }
 
-.menu-item_content {
-    @apply w-10 justify-between items-start gap-2 h-full text-nowrap;
+.menu-item_title {
+    @apply items-center mb-1 p-1 w-full border-b-2 border-gray-100;
 }
 
-.menu-item_name {
-    @apply text-[22px] leading-[26px] font-bold capitalize;
+.menu-item_title_text {
+    @apply text-[22px] font-bold capitalize;
+    text-align: center;
+}
+
+.menu-item_content {
+    @apply flex flex-row gap-2 p-4
 }
 
 .menu-item_image_container {
+   @apply relative w-48 h-48 ml-3 flex-shrink-0;
 }
 
 .menu-item_image {
-    @apply relative w-full h-60 my-3 object-contain right-4;
+    @apply relative w-full h-56 mb-0 pb-0 object-contain right-4;
 }
 
 .menu-item_description {
+   @apply text-gray-500;
 }
 
 .menu-item_box {
-    @apply h-full 
+    @apply h-56 p-2 mr-2 place-content-evenly
 }
 
 .menu-item_box_description {
     @apply font-bold
 }
 
-.menu-item_box_containers {
-    @apply h-48 w-80 flex flex-col place-content-evenly list-disc text-balance
+.menu-item_box_list {
+    @apply mt-1 mb-3 space-y-2 text-gray-500 list-disc dark:text-gray-400 list-outside ms-4;
 }
+
 /* ----------- */
 
 .order_button {
-    @apply w-full py-[16px] rounded-3xl bg-orange-200 hover:bg-orange-50
+    @apply w-full bg-transparent hover:bg-orange-500 text-orange-700 font-semibold hover:text-white py-2 px-4 border border-orange-500 hover:border-transparent rounded;
 }
diff --git a/tutorials/full-stack-application/app/app/layout.tsx b/tutorials/full-stack-application/app/app/layout.tsx
@@ -16,6 +16,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
       <body className={inter.className}>{children}</body>
     </html>
   );

diff --git a/tutorials/full-stack-application/app/app/order/page.tsx b/tutorials/full-stack-application/app/app/order/page.tsx
@@ -8,7 +8,7 @@ import { getImage } from "../index";
 
 export default function Page() {
     return (
-        <Suspense>
+      <Suspense>
             <main className="home">
                 <Coffee></Coffee>
             </main>

diff --git a/tutorials/full-stack-application/app/app/page.tsx b/tutorials/full-stack-application/app/app/page.tsx
@@ -22,12 +22,12 @@ export default async function Page() {
                     />
                 </div>
             </div>
-            <div className="flex-1 pt-8 padding-x">
+            <div className="title_container">
                 <h1 className="title text-4xl font-sans font-medium">
                     Enjoy a nice cup of joe!
                 </h1>
-                <Menu></Menu>
             </div>
+            <Menu></Menu>
         </main>
     );
 }
diff --git a/tutorials/full-stack-application/app/components/MenuItem.tsx b/tutorials/full-stack-application/app/components/MenuItem.tsx
@@ -12,30 +12,31 @@ const MenuItem = (item: MenuItemProps) => {
     const imageSrc = getImage(item.coffeeType)
     return (
         <div className="menu-item_card">
-            <div className="menu-item_content">
-                <h2 className="menu-item_name">
+            <div className="menu-item_title">
+                <h2 className="menu-item_title_text">
                     {displayName(item.coffeeType)}
                 </h2>
             </div>
-            <div className="menu-item_image_container">
-                <Image className="menu-item_image" src={imageSrc} width={256} height={256} alt="coffee-display" priority/>
-            </div>
 
-            <div className="menu-item_box">
-                <p className="menu-item_box_description">
-                    <span>
-                        Description
-                    </span>
-                </p>
-                <ul className="menu-item_box_containers">
-                    {item.coffeeDescription.split("\n").map((text, i) => <li key={item.coffeeType+i}>{text}</li>)}
-                </ul>
-                <div className="font-bold">
-                    <Order coffeeType={item.coffeeType}></Order>
+            <div className="menu-item_content">
+                <div className="menu-item_image_container">
+                    <Image className="menu-item_image" src={imageSrc} width={256} height={256} alt="coffee-display" priority/>
                 </div>
-            </div>
-
 
+                <div className="menu-item_box">
+                    <p className="menu-item_box_description">
+                        <span>
+                            Description
+                        </span>
+                    </p>
+                    <ul className="menu-item_box_list">
+                        {item.coffeeDescription.split("\n").map((text, i) => <li key={item.coffeeType+i}>{text}</li>)}
+                    </ul>
+                    <div className="font-bold">
+                        <Order coffeeType={item.coffeeType}></Order>
+                    </div>
+                </div>
+            </div>
         </div>
     )
 }