From bd1a19d5e70d9032b687c8e1368df8d5386d22cc Mon Sep 17 00:00:00 2001
From: Tine Jozelj <tine@tjo.space>
Date: Tue, 12 Sep 2023 00:48:07 +0200
Subject: [PATCH] feat: responsive

---
 src/components/HomepageFeatures/index.tsx |  2 +-
 src/pages/index.module.css                | 32 ++++++++++++++++++-----
 src/pages/index.tsx                       | 24 ++---------------
 3 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
index 28f5129..6cb60b5 100644
--- a/src/components/HomepageFeatures/index.tsx
+++ b/src/components/HomepageFeatures/index.tsx
@@ -15,7 +15,7 @@ type ServiceItem = {
 };
 
 const PrivateServices: ServicesSection = {
-  title: "PrivateServices",
+  title: "Private Services",
   description: (
     <>
       Services that require <b>tjo.space</b> account.
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index ab8a661..179c528 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -8,12 +8,8 @@
   text-align: center;
   position: relative;
   overflow: hidden;
-}
-
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+  display: flex;
+  flex-direction: row;
 }
 
 .buttons {
@@ -39,3 +35,27 @@
 .descriptionLink:hover {
   color: var(--ifm-hero-text-color);
 }
+
+@media screen and (max-width: 996px) {
+  .heroLogo {
+    width: 100%;
+  }
+
+  .heroBanner {
+    padding: 2rem;
+    flex-direction: column;
+  }
+
+  .buttons {
+    flex-direction: column;
+  }
+
+  .buttons > :not(:first-child) {
+    margin-left: 0;
+    margin-top: 1rem;
+  }
+
+  .description {
+    margin-top: 4rem
+  }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5e5e1bc..6e5e0b2 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -14,7 +14,7 @@ function HomepageHeader() {
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
-        <Logo role="img" />
+        <Logo className={styles.heroLogo} role="img" />
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link
@@ -31,7 +31,7 @@ function HomepageHeader() {
           </Link>
         </div>
       </div>
-      <div className="container">
+      <div className={clsx("container", styles.description)}>
         <h2>What is this?</h2>
         <p>We are non-profit provider of cloud services for select public.</p>
         <p>
@@ -66,26 +66,6 @@ export default function Home(): JSX.Element {
     <Layout title={siteConfig.title} description={siteConfig.tagline}>
       <HomepageHeader />
       <main>
-        <section className={styles.description}>
-          <div className="container">
-            <h2>What is this?</h2>
-            <p>
-              We are non-profit provider of cloud services for select public.
-            </p>
-            <p>
-              Our goal is to provide well integrated and coherent suite of
-              applications that can rival offers of propriatery and for-profit
-              companies.
-            </p>
-            <p>We use and build on top of open source software.</p>
-            <p>
-              You can read more about our{" "}
-              <Link to="/docs/architecture">Architecture</Link> and{" "}
-              <Link to="/docs/hardware">Hardware</Link> in the{" "}
-              <Link to="/docs/home">Documentation</Link>.
-            </p>
-          </div>
-        </section>
         <HomepageFeatures />
       </main>
     </Layout>