Fixing Mobile Responsiveness of the Website (#286)

* website index page: fix table responsiveness * website index page: fix hero section responsiveness --------- Co-authored-by: Marcin Krystianc <[email protected]>
G-Research · Dec 27, 2023 · ccc5633 · ccc5633
1 parent f4b72b0
commit ccc5633
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 46 deletions.
diff --git a/docs/src/pages/Index/Index.module.css b/docs/src/pages/Index/Index.module.css
@@ -5,35 +5,34 @@
 
 /*banner*/
 
-.heroBanner {
-    padding: 4rem 0;
-    text-align: center;
-    position: relative;
-    overflow: hidden;
+.heroBackground {
     background: linear-gradient(90deg, #00458d 0%, #00356d 100%);
     color: white;
 }
 
-@media screen and (max-width: 996px) {
-    .heroBanner {
-        padding: 2rem;
-    }
-}
-
-.logoContainer {
+.heroWrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
-    height: 120px;
-    overflow: hidden;
+}
+
+.logoSvgBox {
+    width: 380px;
+    overflow: clip;
+}
+
+@media screen and (max-width: 996px) {
+    .logoSvgBox {
+        width: 100%;
+    }
 }
 
 .buttons {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 1rem;
+    flex-wrap: wrap;
 }
 
 .badges {
@@ -85,16 +84,16 @@
 
 
 /*compatibilities*/
-.compatibilities {
-    padding: 2rem 0;
-    text-align: center;
+.markdownWrapper table {
+    border-collapse: separate;
 }
 
-.compatibilities table {
-    display: inline;
-    margin-left: auto;
-    margin-right: auto;
-    border-collapse: separate;
+.markdownWrapper table th:nth-child(1), .markdownWrapper table th:nth-child(4) {
+    width: 10%;
+}
+
+.markdownWrapper table th:nth-child(2), .markdownWrapper table th:nth-child(3) {
+    width: 30%;
 }
 
 td:first-child:not(:empty) {

diff --git a/docs/src/pages/Index/Index.view.tsx b/docs/src/pages/Index/Index.view.tsx
@@ -6,7 +6,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import CodeBlock from '@theme/CodeBlock';
 import styles from './Index.module.css';
-import ConsulDotNetLogoSvg from '@site/static/project/logo/svg/Consul.NET_SignatureLogo_RGB-Color.svg';
+import LogoSvg from '@site/static/project/logo/svg/Consul.NET_SignatureLogo_RGB-Color.svg';
 import badgeList from "@site/src/data/badges";
 import FeatureList from "@site/src/data/features";
 import MDXContent from '@theme/MDXContent';
@@ -27,17 +27,15 @@ function HomepageBadges() {
 function HomepageBanner() {
     const {siteConfig} = useDocusaurusContext();
     return (
-        <header className={clsx('hero hero--primary', styles.heroBanner)}>
-            <div className="container">
-                <div className={clsx(styles.logoContainer)}>
-                    <ConsulDotNetLogoSvg fill='transparent' transform="scale(1.8 1.8)"/>
+        <header className={clsx('hero hero--primary text--center padding-vert--lg', styles.heroBackground)}>
+            <div className={clsx('container', styles.heroWrapper)}>
+                <div className={clsx(styles.logoSvgBox)}>
+                    <LogoSvg fill='transparent' transform="scale(1.3 1.3)" preserveAspectRatio="xMinYMin meet"/>
                 </div>
                 <h1 className="hero__title" style={{display: 'none'}}>{siteConfig.title}</h1>
                 <p className="hero__subtitle">{siteConfig.tagline}</p>
                 <HomepageBadges/>
-                <CodeBlock language="bash">
-                    {`dotnet add package Consul`}
-                </CodeBlock>
+                <CodeBlock language="bash" className="col">dotnet add package Consul</CodeBlock>
                 <p>{`Curious about what's next? try the `}
                     <Link className={styles.previewLink} to='/docs/next/'>
                         ⚡ preview version
@@ -55,14 +53,13 @@ function HomepageBanner() {
                         🚀 Get Started
                     </Link>
                 </div>
-                <div className={clsx('margin-top--md')}>
-                    <iframe
-                        src="https://ghbtns.com/github-btn.html?user=G-Research&repo=consuldotnet&type=star&count=true&size=large"
-                        width={170}
-                        height={30}
-                        title="GitHub Stars"
-                    />
-                </div>
+                <iframe
+                    src="https://ghbtns.com/github-btn.html?user=G-Research&repo=consuldotnet&type=star&count=true&size=large"
+                    className="margin-top--md padding-left--md"
+                    width={170}
+                    height={30}
+                    title="GitHub Stars"
+                />
             </div>
         </header>
     );
@@ -99,16 +96,18 @@ function HomepageFeatures(): JSX.Element {
 
 function HomepageCompatibilities(): JSX.Element {
     return (
-        <section className={styles.compatibilities}>
+        <section className="padding-top--md padding-bottom--xl text--center">
             <div className="container">
-                <div className="text--center">
-                    <h1>Supported APIs</h1>
-                </div>
                 <div className="row">
                     <div className="col">
-                        <MDXContent>
-                            <SupportedAPIs/>
-                        </MDXContent>
+                        <header>
+                            <h1>Supported APIs</h1>
+                        </header>
+                        <span className={styles.markdownWrapper}>
+                            <MDXContent>
+                                <SupportedAPIs/>
+                            </MDXContent>
+                        </span>
                     </div>
                 </div>
             </div>