botway(assets): fix the ui of botway cdn 🏗️

abdfnx · Nov 21, 2023 · 14f3455 · 14f3455
1 parent 57b7bc5
commit 14f3455
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 20 deletions.
diff --git a/assets/README.md b/assets/README.md
@@ -1,3 +1,5 @@
 # Botway CDN 📦
 
-> Built with Deno Fresh 🦕
+> **Botway CDN** is a small service that hosts all of botway's assets and integrations data 📡
+
+#### Built with Deno Fresh 🦕
diff --git a/assets/components/Logo.tsx b/assets/components/Logo.tsx
@@ -1,15 +1,15 @@
 export const LogoSection = () => {
   return (
-    <section className="flex items-start w-full px-4 mx-auto md:px-0 md:items-center md:w-1/3">
+    <section className="flex items-start w-full place-content-center px-4 mx-auto md:px-0 md:items-center md:w-1/3">
       <div
-        className="flex flex-row items-center w-full max-w-sm py-4 mx-auto md:mx-0 my-auto min-w-min relative md:-left-2.5 pt-4 md:py-4 transform origin-left"
         style={{ background: "#13111c" }}
+        className="flex flex-row place-content-center items-center w-full max-w-sm py-4 mx-auto md:mx-0 my-auto min-w-min relative pt-4 md:py-4 transform md:origin-right"
       >
-        <div className="flex items-center space-x-1">
+        <div className="flex items-center place-content-center space-x-1">
           <img
             alt="Botway Logo"
             src="/simple/logo-white.svg"
-            className="block w-56"
+            className="block w-72"
           />
         </div>
       </div>

diff --git a/assets/routes/index.tsx b/assets/routes/index.tsx
@@ -10,23 +10,61 @@ const App = () => {
         <meta content="width=device-width, initial-scale=1" name="viewport" />
 
         <link rel="icon" type="image/svg" href="/simple/icon.svg" />
+        <link rel="stylesheet" href="/main.css" />
 
-        <title>📦 Botway CDN</title>
+        <title>Botway CDN 📦</title>
       </Head>
-      <main
-        className="flex flex-col md:flex-row-reverse md:h-screen"
-        style={{ background: "#13111c" }}
-      >
-        <LogoSection />
-
-        <section className="justify-center px-4 md:px-0 md:flex md:w-2/3 md:border-r border-gray-800">
-          <div className="w-full max-w-sm py-4 mx-auto my-auto min-w-min md:py-9 md:w-7/12">
-            <h3 className="font-medium md:text-xl pt-3 text-white">
-              📦 Botway CDN
-            </h3>
-          </div>
-        </section>
-      </main>
+
+      <body style={{ background: "#13111c" }}>
+        <div className="block md:hidden">
+          <main className="flex flex-col place-content-center items-center place-items-center h-[90vh]">
+            <LogoSection />
+
+            <section className="justify-center md:bg-grid-gray-800/[0.6] px-6 md:px-0 md:flex md:w-2/3 md:border-r border-gray-800">
+              <div className="w-full max-w-sm py-4 mx-auto my-auto min-w-min md:py-9 md:w-7/12">
+                <div className="place-content-center items-center place-items-center justify-center">
+                  <h3
+                    className="font-medium text-lg pt-3 text-white"
+                    style={{ fontFamily: "Farray" }}
+                  >
+                    Welcome to Botway CDN 📦
+                  </h3>
+                </div>
+              </div>
+            </section>
+          </main>
+        </div>
+        <div className="hidden md:block">
+          <main className="flex flex-col md:flex-row-reverse md:h-screen">
+            <LogoSection />
+
+            <section className="justify-center md:bg-grid-gray-800/[0.6] px-4 md:px-0 md:flex md:w-2/3 md:border-r border-gray-800">
+              <div className="w-full max-w-sm py-4 mx-auto my-auto min-w-min md:py-9 md:w-7/12">
+                <h3
+                  className="font-medium md:text-xl pt-3 text-white"
+                  style={{ fontFamily: "Farray" }}
+                >
+                  Welcome to Botway CDN 📦
+                </h3>
+                <br />
+                <p
+                  className="text-white text-sm"
+                  style={{ fontFamily: "JetBrains Mono" }}
+                >
+                  <span
+                    className="text-blue-700"
+                    style={{ fontFamily: "Farray" }}
+                  >
+                    Botway CDN{" "}
+                  </span>
+                  is a small service that hosts all of botway's assets and
+                  integrations data 📡
+                </p>
+              </div>
+            </section>
+          </main>
+        </div>
+      </body>
     </>
   );
 };

diff --git a/assets/static/main.css b/assets/static/main.css
@@ -0,0 +1,3 @@
+@import url("https://fonts.cdnfonts.com/css/farray");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap");