fix(v2): Simplify styling for classic template landing page (#1528)

* fix(v2): Simplify styling * Display header only when the viewport is short * Match infima's screen width break point * fix link, button, static files
facebook · May 29, 2019 · a8e494d · a8e494d
1 parent 831d96e
commit a8e494d
Show file tree

Hide file tree

Showing 6 changed files with 381 additions and 71 deletions.
diff --git a/packages/docusaurus/.npmignore b/packages/docusaurus/.npmignore
@@ -1,2 +1,9 @@
 src
 copyUntypedFiles.js
+
+# production
+/build
+
+# generated files
+.docusaurus
+.cache-loader
diff --git a/packages/docusaurus/templates/classic/pages/index.js b/packages/docusaurus/templates/classic/pages/index.js
@@ -8,28 +8,29 @@
 import React from 'react';
 import classnames from 'classnames';
 import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import withBaseUrl from '@docusaurus/withBaseUrl';
 import styles from './styles.module.css';
 
 const highlights = [
   {
-    title: 'Focus on your docs',
-    imageUrl: 'http://docusaurus-2.netlify.com/img/undraw_typewriter.svg',
+    title: 'Easy to use',
+    imageUrl: 'img/undraw_docusaurus_mountain.svg',
     description:
-      "Docusaurus lets you focus on your docs, and we'll do the chores. Now go ahead and dump all your docs into the docs directory.",
+      'Docusaurus was designed from the ground up to be easily installed and used to get your website up and running quickly.',
   },
   {
-    title: 'Supports versioned docs',
-    imageUrl: 'http://docusaurus-2.netlify.com/img/undraw_version_control.svg',
+    title: 'Focus on your docs',
+    imageUrl: 'img/undraw_docusaurus_tree.svg',
     description:
-      'Support users on all versions of your project. Document versioning helps you keep documentation in sync with project releases.',
+      "Docusaurus lets you focus on your docs, and we'll do the chores. Now go ahead and dump all your docs into the docs directory.",
   },
   {
-    title: 'Supports i18n',
-    imageUrl: 'http://docusaurus-2.netlify.com/img/undraw_around_the_world.svg',
+    title: 'Powered by React',
+    imageUrl: 'img/undraw_docusaurus_react.svg',
     description:
-      'Localization comes pre-configured. Use Crowdin to translate your docs into over 70 languages.',
+      "Extend or customize your project's layout by reusing React. Docusaurus can be extended while reusing the same header and footer.",
   },
 ];
 
@@ -44,32 +45,19 @@ function Home() {
       description="Description will go into a meta tag in <head />">
       <header className={classnames('hero hero--dark', styles.header)}>
         <div className="container">
+          <img src={withBaseUrl('img/logo.svg')} alt="logo" />
           <h1 className="hero__title">{siteConfig.title}</h1>
-
           <p className="hero__subtitle">{siteConfig.tagline}</p>
           <div className={styles.buttons}>
-            <button
-              type="button"
+            <Link
               className={classnames(
                 'button button--outline button--primary button--lg',
                 styles.getStarted,
-              )}>
+              )}
+              to={withBaseUrl('docs/doc1')}>
               Get Started
-            </button>
-            <iframe
-              src="https://ghbtns.com/github-btn.html?user=facebook&amp;repo=docusaurus&amp;type=star&amp;count=true&amp;size=large"
-              frameBorder={0}
-              scrolling={0}
-              width={160}
-              height={30}
-              title="GitHub Stars"
-            />
+            </Link>
           </div>
-          <img
-            src={withBaseUrl('img/logo.svg')}
-            className={styles.logo}
-            alt="logo"
-          />
         </div>
       </header>
       <main>
@@ -80,8 +68,8 @@ function Home() {
                 {highlights.map(({imageUrl, title, description}, idx) => (
                   <div
                     key={`landing-page-highlight-${idx}`}
-                    className={classnames(styles.col4, styles.highlight)}>
-                    <img src={imageUrl} alt={title} />
+                    className={classnames('col col--4', styles.highlight)}>
+                    <img src={withBaseUrl(imageUrl)} alt={title} />
                     <h3>{title}</h3>
                     <p>{description}</p>
                   </div>

diff --git a/packages/docusaurus/templates/classic/pages/styles.module.css b/packages/docusaurus/templates/classic/pages/styles.module.css
@@ -1,14 +1,10 @@
-:root {
-  --first-screen-main-section-height: calc((100vh - 60px - 60px) * .6);
-  --first-screen-secondary-section-height: calc((100vh - 60px - 60px) * .4);
-}
-
 .header {
   color: white;
   padding: 1rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
+  min-height: 550px; 
 }
 
 .buttons  {
@@ -19,11 +15,6 @@
 .buttons iframe {
   margin-left: 1rem;
 }
-.logo {
-  position: absolute;
-  bottom: -80px;
-  left: 20px;
-}
 @media screen and (min-height: 900px) {
   .buttons {
     margin-top: 2rem;
@@ -37,27 +28,31 @@
 }
 @media screen and (max-width: 799px) {
 .header {
-    /* display just one feature */
+    /* display just one highlight */
     height: calc(100vh - 310px);
   }
 }
-@media screen and (min-width: 800px) { 
+@media screen and (min-width: 800px) and (max-height: 999px) { 
+  /* if the viewport is not tall enough, display just the header */
+  .header {
+    height: calc(100vh - 120px);
+  }
+}
+@media screen and (min-width: 800px) and (min-height: 1000px) { 
+  /* if the viewport is tall enough, split between header and highlights */
   .header {
     padding: 4rem 0;
-    height: var(--first-screen-main-section-height);
+    height: calc((100vh - 60px - 60px) * .6);
   }
 }
 
-/** 
- * Highlights 
- * - secondary section on the first screen
- * - leaving a space equal to footer to indicate more content
- */
+/* secondary section on the first screen */
 .highlights {
   background: var(--ifm-color-black-alpha-10);
   display: flex;
   align-items: center;
   width: 100%;
+  min-height: 350px;
 }
 
 .highlight {
@@ -71,33 +66,13 @@
   text-align: left;
 }
 
-/* TODO: move all of .col4 to infima .col--4 */
-.col4 {
-  padding-left: calc(var(--ifm-spacing-horizontal) / 2);
-  padding-right: calc(var(--ifm-spacing-horizontal) / 2);
-  min-width: calc(800px / 3 - var(--ifm-spacing-horizontal));
-}
-@media screen and (max-width: 519px /* smaller than 2 * min width */) {
-  .col4 {
-    width: 100%;
-  }
-}
-@media screen and (min-width: 520px) and (max-width: 799px) {
+@media screen and (min-width: 520px) and (max-width: 1023px) {
   .highlights {
     padding-bottom: 2rem;
   }
-  .col4:first-child {
-    width: 100%;
-  }
-  .col4:not(:first-child) {
-    width: calc(50% - var(--ifm-spacing-horizontal) / 2);
-  }
 }
-@media screen and (min-width: 800px) {
-  .col4 {
-    width: calc(100% / 3 - var(--ifm-spacing-horizontal));
-  }
-.highlights {
-    height: var(--first-screen-secondary-section-height);
+@media screen and (min-width: 1024px) {
+  .highlights {
+    height: calc((100vh - 60px - 60px) * .4);
   }
 }