Merge pull request #181 from wzwywx/fix-overlap

Fix left sidebar overlapping with the main content

Author: ealmloff

dioxus_search/index_search.bin

@@ -114,7 +114,7 @@
         box-sizing: border-box;
         min-width: 200px;
         max-width: 980px;
-        margin: 0 10%;
+        margin: 0 5%;
         /* padding: 45px; */
         list-style: disc;
       }

index.html

@@ -837,6 +837,22 @@ video {
   margin-top: auto;
 }
 
+.ml-\[em\] {
+  margin-left: em;
+}
+
+.ml-\[12em\] {
+  margin-left: 12em;
+}
+
+.ml-40 {
+  margin-left: 10rem;
+}
+
+.ml-\[13rem\] {
+  margin-left: 13rem;
+}
+
 .block {
   display: block;
 }
@@ -2292,6 +2308,12 @@ video {
   }
 }
 
+@media (min-width: 320px) {
+  .min-\[320px\]\:bg-inherit {
+    background-color: inherit;
+  }
+}
+
 @media (min-width: 640px) {
   .sm\:-m-4 {
     margin: -1rem;
@@ -2643,6 +2665,10 @@ video {
     margin-top: 0px;
   }
 
+  .lg\:ml-\[13rem\] {
+    margin-left: 13rem;
+  }
+
   .lg\:block {
     display: block;
   }
@@ -2739,11 +2765,26 @@ video {
   }
 }
 
+@media (min-width: 1220px) {
+  .min-\[1220px\]\:bg-inherit {
+    background-color: inherit;
+  }
+}
+
 @media (min-width: 1280px) {
   .xl\:col-span-6 {
     grid-column: span 6 / span 6;
   }
 
+  .xl\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .xl\:ml-\[13rem\] {
+    margin-left: 13rem;
+  }
+
   .xl\:block {
     display: block;
   }
@@ -2752,6 +2793,10 @@ video {
     display: flex;
   }
 
+  .xl\:hidden {
+    display: none;
+  }
+
   .xl\:h-\[31\.625rem\] {
     height: 31.625rem;
   }
@@ -2764,6 +2809,10 @@ video {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .xl\:bg-inherit {
+    background-color: inherit;
+  }
+
   .xl\:px-48 {
     padding-left: 12rem;
     padding-right: 12rem;

public/tailwind.css

@@ -30,7 +30,7 @@ pub fn Deploy(cx: Scope) -> Element {
                 }
             }
             div { class: "max-w-screen-lg mx-auto px-4 py-16 flex flex-col  md:flex-row justify-center ",
-                div { class: "max-w-lg bg-gray-100 flex-1 mx-4 my-4 p-8 rounded-lg shadow-xl mx-auto text-center",
+                div { class: "max-w-lg bg-gray-100 flex-1 my-4 p-8 rounded-lg shadow-xl mx-auto text-center",
                     h1 { class: "text-3xl pb-4", "Build" }
                     p { class: "text-gray-500 font-light1 border-b border-gray-200 pb-4",
                         "Iterate on your app with first-class tooling designed for the Dioxus ecosystem. "
@@ -43,7 +43,7 @@ pub fn Deploy(cx: Scope) -> Element {
                         li { class: "pb-4", "💪 Powerful devtools" }
                     }
                 }
-                div { class: "max-w-lg bg-gray-100 flex-1 mx-4 my-4 p-8 rounded-lg shadow-xl mx-auto text-center",
+                div { class: "max-w-lg bg-gray-100 flex-1 my-4 p-8 rounded-lg shadow-xl mx-auto text-center",
                     h1 { class: "text-3xl pb-4", "Deploy" }
                     p { class: "text-gray-500 font-light1 border-b border-gray-200 pb-4",
                         "Iterate on your app with first-class tooling designed for the Dioxus ecosystem. "
@@ -56,7 +56,7 @@ pub fn Deploy(cx: Scope) -> Element {
                         li { class: "pb-4", "🧯 Automated backups" }
                     }
                 }
-                div { class: "max-w-lg bg-gray-100 flex-1 mx-4 my-4 p-8 rounded-lg shadow-xl mx-auto text-center",
+                div { class: "max-w-lg bg-gray-100 flex-1 my-4 p-8 rounded-lg shadow-xl mx-auto text-center",
                     h1 { class: "text-3xl pb-4", "Scale" }
                     p { class: "text-gray-500 font-light1 border-b border-gray-200 pb-4",
                         "Monitor your app, track down bugs, and grow to as big or as small as you need."

src/components/deploy.rs

@@ -238,7 +238,7 @@ fn Content(cx: Scope) -> Element {
     };
 
     render! {
-        section { class: "text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg",
+        section { class: "text-gray-600 body-font overflow-hidden dark:bg-ideblack lg:ml-[13rem] container pt-6 pb-12 max-w-screen-lg",
             div { class: "-py-8 {extra_class}",
                 div { class: "flex w-full mb-20 flex-wrap list-none",
                     style {

src/components/learn.rs

@@ -237,7 +237,7 @@ fn SearchModal(cx: Scope) -> Element {
     let show_modal = use_atom_state(cx, &SHOW_SEARCH);
     let search_text = use_state(cx, String::new);
     let results = use_ref(cx, || SEARCH_INDEX.search(search_text.get()));
-    
+
     let last_key_press = use_ref(cx, || {
         #[cfg(not(target_arch = "wasm32"))]
         return 0.;

src/components/nav.rs

@@ -88,7 +88,11 @@ fn app(cx: Scope) -> Element {
                     key: None,
                     // The static template this node will use. The template is stored in a Cell so it can be replaced with a new template when hot rsx reloading is enabled
                     template: std::cell::Cell::new(TEMPLATE),
-                    root_ids: dioxus::core::exports::bumpalo::collections::Vec::with_capacity_in(3, __cx.bump()).into(),
+                    root_ids: dioxus::core::exports::bumpalo::collections::Vec::with_capacity_in(
+                        3,
+                        __cx.bump(),
+                    )
+                    .into(),
                     dynamic_nodes: __cx.bump().alloc([
                         // The dynamic count text node (dynamic node id 0)
                         __cx.text_node(format_args!("High-Five counter: {0}", count)),