Minor css fixes for docs landing page

Author: ethanshar

docuilib/docusaurus.config.js

@@ -23,6 +23,7 @@ const darkCodeTheme = themes.dracula;
       landingPage: {
         sections: ['components', 'features', 'code', 'libraries'],
         mainSectionTitle: 'RNUI is a UI Toolset & Components Library for React Native',
+        mainSectionTitleWidth: 600,
         showStars: true,
         stars: '6.8',
         showExpoButton: true

docuilib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.23.0",
+  "version": "3.24.0",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",

docuilib/src/components/ComponentsSection.tsx

@@ -16,7 +16,7 @@ export default () => {
           Basic components like Button, Avatar and Card and more sophisticated ones like Hints, ColorPicker and Drawer.
         </p>
         <Link to={`docs/${docsMainEntry}`}>
-          <button className={'button dark'}>View Docs</button>
+          <button className={'button dark'}>View Documentation</button>
         </Link>
       </div>
       <img src={showcase} alt="showcase"/>

docuilib/src/components/MainSection.module.scss

@@ -5,10 +5,10 @@
   width: 100%;
   display: flex;
   justify-content: center;
-  margin-bottom: 40px;
 
   @include desktop {
     height: 100vh;
+    overflow-y: hidden;
   }
 
   .mainCover {

docuilib/src/components/MainSection.tsx

@@ -12,7 +12,7 @@ const STARS_COUNT_KEY = 'starsCount';
 export default () => {
   const {siteConfig} = useDocusaurusContext();
   const {expoSnackLink, docsMainEntry, docsDevelopmentVersion} = siteConfig.customFields;
-  const {showExpoButton, mainSectionTitle, showStars, stars} = useLandingPageOptions();
+  const {showExpoButton, mainSectionTitle, mainSectionTitleWidth, showStars, stars} = useLandingPageOptions();
   const [starsCount, setStarsCount] = useState(localStorage.getItem(STARS_COUNT_KEY) ?? stars);
 
   useEffect(() => {
@@ -32,7 +32,7 @@ export default () => {
     <div className={styles.main}>
       <img src={mainCover} alt="showcase" className={styles.mainCover}/>
       <div className={styles.mainContent}>
-        <p>
+        <p style={{maxWidth: mainSectionTitleWidth}}>
           {mainSectionTitle}
           {/* <span className={styles.libName}>RNUI</span> is a UI Toolset & Components Library for React Native */}
         </p>

docuilib/src/css/custom.css

@@ -33,6 +33,10 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
 
+main {
+  overflow-x: hidden;
+}
+
 /* Markdown pages */
 
 .container {

docuilib/src/hooks/useLandingPageOptions.ts

@@ -3,6 +3,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 export interface LandingPageOptions {
   sections: string[];
   mainSectionTitle: string;
+  mainSectionTitleWidth: number;
   showStars: boolean;
   stars: number;
   showExpoButton: boolean;