[docs] Reduce the headers font-size (#16433)

* [docs] Reduce the headers font-size * [docs] Reduce overhead in the getting started * [docs] Remove noise in the app bar * [Modal] Use native elements in the a11y docs * sebastian review
mui · Jul 2, 2019 · a517e49 · a517e49
1 parent 7fb9b40
commit a517e49
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 21 deletions.
diff --git a/docs/src/modules/components/AppContent.js b/docs/src/modules/components/AppContent.js
@@ -8,6 +8,7 @@ const styles = theme => ({
   root: {
     paddingTop: 80 + 16,
     flex: '1 1 100%',
+    position: 'relative',
     maxWidth: '100%',
     margin: '0 auto',
     [theme.breakpoints.up('sm')]: {

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import NProgress from 'nprogress';
 import Router from 'next/router';
 import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
@@ -91,10 +90,6 @@ const styles = theme => ({
   grow: {
     flex: '1 1 auto',
   },
-  title: {
-    marginLeft: theme.spacing(2),
-    flex: '0 1 auto',
-  },
   skipNav: {
     position: 'fixed',
     padding: theme.spacing(1),
@@ -222,11 +217,6 @@ function AppFrame(props) {
                 >
                   <MenuIcon />
                 </IconButton>
-                {title !== null && (
-                  <Typography className={classes.title} variant="h6" noWrap>
-                    {title}
-                  </Typography>
-                )}
                 <div className={classes.grow} />
                 <AppSearch />
                 <Tooltip title="Change language" enterDelay={300}>

diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js
@@ -22,6 +22,7 @@ function EditPage(props) {
       }
       target="_blank"
       rel="noopener"
+      size="small"
       data-ga-event-category={userLanguage === 'en' ? undefined : 'l10n'}
       data-ga-event-action={userLanguage === 'en' ? undefined : 'edit-button'}
       data-ga-event-label={userLanguage === 'en' ? undefined : userLanguage}

diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
@@ -32,6 +32,8 @@ import Link from 'docs/src/modules/components/Link';
 
 const styles = theme => ({
   header: {
+    position: 'absolute',
+    right: 16,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'flex-end',

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -147,31 +147,35 @@ const styles = theme => ({
       background: 'transparent',
     },
     '& h1': {
-      ...theme.typography.h2,
-      margin: '32px 0 16px',
+      ...theme.typography.h3,
+      fontSize: 40,
+      margin: '24px 0 16px',
     },
     '& .description': {
       ...theme.typography.h5,
       margin: '0 0 40px',
     },
     '& h2': {
       ...theme.typography.h4,
-      margin: '32px 0 24px',
+      fontSize: 30,
+      margin: '40px 0 16px',
     },
     '& h3': {
       ...theme.typography.h5,
-      margin: '32px 0 24px',
+      margin: '40px 0 16px',
     },
     '& h4': {
       ...theme.typography.h6,
-      margin: '24px 0 16px',
+      margin: '32px 0 16px',
     },
     '& h5': {
       ...theme.typography.subtitle2,
-      margin: '24px 0 16px',
+      margin: '32px 0 16px',
     },
     '& p, & ul, & ol': {
       lineHeight: 1.6,
+      marginTop: 0,
+      marginBottom: '16px',
     },
     '& ul': {
       paddingLeft: 30,
@@ -209,6 +213,7 @@ const styles = theme => ({
       overflowX: 'auto',
       WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
       borderCollapse: 'collapse',
+      marginBottom: '16px',
       borderSpacing: 0,
       overflow: 'hidden',
       '& .prop-name': {
@@ -275,6 +280,9 @@ const styles = theme => ({
       backgroundColor: 'rgba(255,229,100,0.2)',
       padding: '4px 24px',
       margin: '24px 0',
+      '& p': {
+        marginTop: '16px',
+      },
     },
     '& a, & a code': {
       // Style taken from the Link component

diff --git a/docs/src/pages/components/modal/modal.md b/docs/src/pages/components/modal/modal.md
@@ -88,12 +88,12 @@ Additionally, you may give a description of your modal with the `aria-describedb
   aria-labelledby="simple-modal-title"
   aria-describedby="simple-modal-description"
 >
-  <Typography variant="h6" id="modal-title">
+  <h6 id="modal-title">
     My Title
-  </Typography>
-  <Typography variant="subtitle1" id="simple-modal-description">
+  </h6>
+  <p id="simple-modal-description">
     My Description
-  </Typography>
+  </p>
 </Modal>
 ```
 

diff --git a/docs/src/pages/styles/advanced/advanced.md b/docs/src/pages/styles/advanced/advanced.md
@@ -504,7 +504,7 @@ const StyledTextField = styled(TextField)`
   }
   .MuiOutlinedInput-root {
     fieldset {
-      border-color: red; ❤️
+      border-color: red; 🔴
     }
     &:hover fieldset {
       border-color: yellow; 💛