From e153ef722bd14966125dde364f8747123c1dc66b Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Mon, 26 Aug 2024 16:17:38 +0800
Subject: [PATCH] feat(demo): Home

---
 demo/src/pages/home.rs | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/demo/src/pages/home.rs b/demo/src/pages/home.rs
index d2234be..b7f5f50 100644
--- a/demo/src/pages/home.rs
+++ b/demo/src/pages/home.rs
@@ -2,6 +2,7 @@ use crate::components::SiteHeader;
 use leptos::prelude::*;
 use leptos_router::hooks::{use_navigate, use_query_map};
 use thaw::*;
+use leptos_meta::Style;
 
 #[component]
 pub fn Home() -> impl IntoView {
@@ -13,14 +14,24 @@ pub fn Home() -> impl IntoView {
         navigate(&path, Default::default());
     }
     view! {
+        <Style>
+            "   .main { width: 1100px; margin: calc(50vh - 200px) auto 0; display: flex; }
+                .main > div { width: 50%; }
+                @media screen and (max-width: 1100px) {
+                    .main { width: 100%; margin: calc(50vh - 280px) 0 0; flex-direction: column-reverse; }
+                    .main > div { width: auto; text-align: center; }
+                    .main > div > .thaw-space { justify-content: center; }
+                }
+            "
+        </Style>
         <Layout position=LayoutPosition::Absolute>
             <SiteHeader/>
             <Layout
                 position=LayoutPosition::Absolute
                 attr:style="top: 64px"
             >
-                <div style="width: 1100px; margin: calc(50vh - 200px) auto 0; display: flex">
-                    <div style="width: 50%">
+                <div class="main">
+                    <div>
                         <h2 style="line-height: 64px; font-size: 56px; margin: 0 0 18px">"Thaw UI"</h2>
                         <p style="line-height: 36px; font-size: 24px">"An easy to use leptos component library"</p>
                         <Space>
@@ -43,7 +54,7 @@ pub fn Home() -> impl IntoView {
                             </Button>
                         </Space>
                     </div>
-                    <div style="width: 50%; text-align: center">
+                    <div style="text-align: center">
                         <img src="/logo.svg" style="width: 200px"/>
                     </div>
                 </div>