From 265b84b583fcca66ca1338046f8df2f0dd49600c Mon Sep 17 00:00:00 2001
From: Anisio Mandlate <anisiomandlate@gmail.com>
Date: Thu, 13 Aug 2020 09:26:03 +0200
Subject: [PATCH] fix: Fix breakpoints and removed foruns page

---
 docusaurus.config.js        |  5 -----
 src/css/custom.css          | 20 ++++++++++++++++++++
 src/pages/forum.js          | 18 ------------------
 src/pages/forum.module.css  |  8 --------
 src/pages/index.js          | 13 +------------
 src/pages/styles.module.css | 15 +++++++++++++--
 6 files changed, 34 insertions(+), 45 deletions(-)
 delete mode 100644 src/pages/forum.js
 delete mode 100644 src/pages/forum.module.css

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 6c32323..2a1c02c 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -28,11 +28,6 @@ module.exports = {
           label: "Documentation",
           position: "right",
         },
-        {
-          to: "forum",
-          label: "Forums",
-          position: "right",
-        },
         {
           href: "https://github.com/PaymentsDS/",
           label: "GitHub",
diff --git a/src/css/custom.css b/src/css/custom.css
index 453e9c8..a08d03e 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -72,6 +72,10 @@ a:hover {
   max-width: 13em;
 }
 
+.col.col--4 + .col.col--4 {
+  margin-left: 90px;
+}
+
 @media screen and (max-width: 768px) {
   .navbar {
     padding: 0 2em;
@@ -81,3 +85,19 @@ a:hover {
     font-size: 2.6rem;
   }
 }
+
+@media screen and (min-width: 350px) and (max-width: 996px) {
+  .col.col--4 + .col.col--4 {
+    margin-left: 0px;
+  }
+}
+
+@media screen and (max-width: 320px) {
+  .col.col--4 + .col.col--4 {
+    margin-left: 0px;
+  }
+
+  .hero__title {
+    font-size: 1.9rem;
+  }
+}
diff --git a/src/pages/forum.js b/src/pages/forum.js
deleted file mode 100644
index f848484..0000000
--- a/src/pages/forum.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import Layout from "@theme/Layout";
-import styles from "./forum.module.css";
-
-const Forum = () => {
-  return (
-    <Layout title="Forum">
-      <div className={styles.main}>
-        <div className="contain">
-          <h1 className="hero__title">Forums</h1>
-        </div>
-        <p>Forum page content here...</p>
-      </div>
-    </Layout>
-  );
-};
-
-export default Forum;
diff --git a/src/pages/forum.module.css b/src/pages/forum.module.css
deleted file mode 100644
index 6cf325b..0000000
--- a/src/pages/forum.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  font-size: 20px;
-}
diff --git a/src/pages/index.js b/src/pages/index.js
index 5c13e00..3758a15 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -26,17 +26,6 @@ const features = [
     ),
     link: <> Get SDKs </>,
   },
-  {
-    title: <>Forum</>,
-    imageUrl: "img/undraw_community.svg",
-    description: (
-      <>
-        Join our community and help each other integrate and
-        #MakeYourTransactionsEasy.
-      </>
-    ),
-    link: <> Browse Forums </>,
-  },
 ];
 
 function Feature({ imageUrl, title, description, link }) {
@@ -88,7 +77,7 @@ function Home() {
         {features && features.length > 0 && (
           <section className={styles.features}>
             <div className="container">
-              <div className="row">
+              <div className={styles.row}>
                 {features.map((props, idx) => (
                   <Feature key={idx} {...props} />
                 ))}
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index 59a9ba9..04cc3e5 100644
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -53,10 +53,21 @@
   background-color: #f5f5f5;
 }
 
+.row {
+  display: flex;
+  justify-content: center;
+  max-width: 60vw;
+  margin: 0 auto;
+}
+
 @media screen and (min-width: 350px) and (max-width: 996px) {
   .main {
     height: 165vh;
   }
+
+  .row {
+    flex-direction: column;
+  }
 }
 
 @media screen and (min-width: 760px) and (max-width: 996px) {
@@ -72,7 +83,7 @@
 }
 
 @media screen and (max-width: 320px) {
-  .main {
-    height: 200vh;
+  .row {
+    flex-direction: column;
   }
 }