fix rendering in mobile

hal9ai · May 29, 2024 · 9db17ab · 9db17ab
1 parent 6633b48
commit 9db17ab
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 13 deletions.
diff --git a/website/src/components/floating.jsx b/website/src/components/floating.jsx
@@ -1,14 +1,6 @@
 export const Floating = ({children, title}) => (
   <div
-    style={{
-      borderRadius: '2px',
-      padding: '0.2rem',
-      width: '20%',
-      margin: '2%',
-      minWidth: '180px',
-      display: 'inline-block',
-      verticalAlign: 'top'
-    }}>
+    class="floating">
     <h1>{title}</h1>
     {children}
   </div>

diff --git a/website/src/css/custom.scss b/website/src/css/custom.scss
@@ -66,3 +66,29 @@ nav {
 p {
   text-align: justify;
 }
+
+.floating {
+  borderRadius: 2px;
+  padding: 0.2rem;
+  width: 20%;
+  margin: 2%;
+  minWidth: 180px;
+  display: inline-block;
+  verticalAlign: top;
+}
+
+@media not (min-width: 1024px) {
+  .floating {
+    width: 100%;
+  }
+}
+
+.FloatingWrapper {
+  display: flex;
+}
+
+@media not (min-width: 1024px) {
+  .FloatingWrapper {
+    display: inline-block;
+  }
+}
diff --git a/website/src/pages/index.md b/website/src/pages/index.md
@@ -8,10 +8,12 @@ import { Floating } from '../components/floating.jsx';
 
 Create and deploy generative (LLMs and difussers) applications (chatbots and APIs) in seconds.
 
-<Floating title="Open"><b>Open</b> to any model (OpenAI, Llama, Groq, Midjourney) and any library like (LangChainl, DSPy).</Floating>
-<Floating title="Intuitive">No need to learn app frameworks (flask), <b>intuitively</b> use stdin and stdout, or write file to disk.</Floating>
-<Floating title="Scalable">Engineers can integrate your app with <b>scalable</b> technilogies (Docker, Kubernetes, etc).</Floating>
-<Floating title="Powerful"><b>Powerful</b> architecture for agents, multiple programming languages, and complex dependencies.</Floating>
+<div class="FloatingWrapper">
+	<Floating title="Open"><b>Open</b> to any model (OpenAI, Llama, Groq, Midjourney) and any library like (LangChainl, DSPy).</Floating>
+	<Floating title="Intuitive">No need to learn app frameworks (flask), <b>intuitively</b> use stdin and stdout, or write file to disk.</Floating>
+	<Floating title="Scalable">Engineers can integrate your app with <b>scalable</b> technilogies (Docker, Kubernetes, etc).</Floating>
+	<Floating title="Powerful"><b>Powerful</b> architecture for agents, multiple programming languages, and complex dependencies.</Floating>
+</div>
 
 Focus on AI (RAG, fine-tuning, aligment, training) and skip engineering tasks (frontend development, backend integration, deployment, operations).