Documentation pages styles

Fixed toc navigation

src/cms/ui/c/DocumentationSection.tsx

@@ -12,18 +12,20 @@ const styles = (theme) => ({
   root: {
     width: '100%',
     minHeight: 'calc(100vh - 365px)',
-      margin: 0,
-    '& > p': {
+    margin: 0,
+  },
+  text: {
+    '& p': {
       fontFamily: 'Roboto-Light',
       fontSize: '24px',
       color: '#4d4c46',
       lineHeight: '36px',
       margin: 0,
     },
-    '& > h3': {
+    '& h2, h3, h4': {
       fontSize: '24px',
-      marginTop: '28px',
-      paddingBottom: '6px',
+      marginTop: '-78px',
+      paddingTop: '100px',
     },
     '& > ul': {
       marginTop: '30px',
@@ -37,71 +39,32 @@ const styles = (theme) => ({
     },
     '& > div': {
       width: '100%',
-    }
-  },
-  white: {
-    backgroundColor: 'white',
-  },
-  header: {
-    fontSize: '75%',
-    marginBottom: '4em',
-  },
-  content: {
-    width: '100%',
-    boxSizing: 'border-box' as 'border-box',
-    fontFamily: 'arial, sans-serif',
-    fontSize: '16px',
-    lineHeight: 1.4285,
-    color: '#000',
-    '& p': {
-      margin: '0 0 11px',
-      color: '#4d4c46',
-      marginTop: '20px',
-      marginBottom: '0',
-      fontFamily: 'Roboto-Regular',
-      '&:first-child': {
-        [theme.breakpoints.down('sm')]: {
-          lineHeight: '26px',
-          fontSize: '20px',
-          marginTop: '33px',
-          paddingRight: 0,
-        },
-      },
-    },
-    '& h2': {
-      fontSize: '34px',
-      marginTop: '-78px',
-    },
-    '& h3': {
-      fontSize: '24px',
-      marginTop: '-89px',
-    },
-    '& h4': {
-      fontSize: '20px',
-      marginTop: '-72px',
-    },
-    '& h2, & h3, & h4': {
-      marginBottom: '11px',
-      fontWeight: 700,
-      lineHeight: '1.1',
-      color: 'inherit',
-      paddingTop: '100px',
-    },
-    '& img': {
-      display: 'inline-block' as 'inline-block',
-      verticalAlign: 'middle' as 'middle',
-      maxWidth: '100%',
-      height: 'auto' as 'auto',
-      textAlign: 'center' as 'center',
-      border: '0',
     },
     '& table': {
       wordWrap: 'break-word' as 'break-word',
       tableLayout: 'fixed' as 'fixed',
       '& th': {
         textAlign: 'left' as 'left',
+      },
+      '& code': {
+        [theme.breakpoints.down('sm')]: {
+          // overflowWrap: 'break-word' as 'break-word',
+          wordBreak: 'break-all' as 'break-all',
+          hyphens: 'auto' as 'auto',
+          // wordWrap: 'anywhere' as 'anywhere,'
+        },
+      },
+      '& td': {
+        '& > p': {
+          [theme.breakpoints.down('xs')]: {
+            wordBreak: 'break-word' as 'break-word',
+            wordWrap: 'break-word' as 'break-word',
+            hyphens: 'auto' as 'auto',
+          },
+        },
       }
-    },
+    }
+    ,
     '& caption': {
       paddingTop: '8px',
       paddingBottom: '8px',
@@ -115,6 +78,9 @@ const styles = (theme) => ({
       backgroundColor: '#f9f2f4',
       borderRadius: '4px',
       fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace',
+      [theme.breakpoints.down('xs')]: {
+        wordBreak: 'break-all' as 'break-all',
+      },
     },
     '& pre': {
       display: 'block' as 'block',
@@ -154,14 +120,19 @@ const styles = (theme) => ({
         color: '#099 !important',
       },
     },
-    '& > .sect1': {
-      '& > h2': {
-        marginTop: '-78px',
-        paddingTop: '100px',
-        overflowWrap: 'break-word' as 'break-word',
-        wordWrap: 'break-word' as 'break-word',
-      }
-    }
+  },
+  white: {
+    backgroundColor: 'white',
+    padding: '33px 40px 49px 40px',
+    // height: '100%',
+    boxSizing: 'border-box' as 'border-box',
+    [theme.breakpoints.down('xs')]: {
+      padding: '33px 15px 49px 15px',
+    },
+  },
+  header: {
+    fontSize: '75%',
+    marginBottom: '4em',
   },
   tocContainer: {
     padding: '0 .5rem',
@@ -170,23 +141,24 @@ const styles = (theme) => ({
     overflow: 'hidden' as 'hidden',
     marginTop: 0,
     marginBottom: '.8rem',
-    fontSize: '1.2em',
+    fontSize: '1.6em',
   },
-  toc: {
-    width: 'calc(100% - 2.5rem)',
-    marginLeft: '1rem',
+  tocWrapper: {
     padding: '1.25em 1em',
+  },
+  toc: {
     '& ul': {
+      fontSize: '16px',
+      lineHeight: '1.4em',
       marginLeft: 0,
-      fontFamily: '"Open Sans","DejaVu Sans",sans-serif',
       listStyleType: 'none' as 'none',
       '& ul': {
-        paddingLeft: '1em',
+        paddingLeft: '0.8em',
       },
     },
     '& > ul': {
-      fontSize: '15px',
-      lineHeight: '19px',
+      fontSize: '16px',
+      lineHeight: '1.4em',
       marginLeft: '.125em',
       padding: 0,
     },
@@ -237,14 +209,14 @@ class DocumentationSection extends React.Component<IDocumentationSectionProps> {
     const {documentation, classes, t} = this.props;
     return(
       <GridContainer className={ `${classes.root} container-spacing-vertical` }>
-        <Grid item sm={ 12 } md={ 9 } className={ classes.white } >
+        <Grid item xs={ 12 } md={ 9 } className={ classes.white } >
           <div className={ classes.header } dangerouslySetInnerHTML={ {__html: documentation.header} }/>
-          <div className={ classes.content } dangerouslySetInnerHTML={ {__html: this.replaceImgSrc(documentation.content)} }/>
+          <div className={ classes.text } dangerouslySetInnerHTML={ {__html: this.replaceImgSrc(documentation.content)} }/>
         </Grid>
-        <Grid item sm={ 12 } md={ 3 } className={ classes.tocContainer }>
-          <div className={ `${classes.toc} ${classes.white}` }>
+        <Grid item xs={ 12 } md={ 3 }>
+          <div className={ classes.tocWrapper }>
             <div className={ classes.tocHeader }>{ t('cms.public.c.documentationSection.toc') }</div>
-            <div className={ `${classes.toc} ${classes.white}` } dangerouslySetInnerHTML={ {__html: documentation.toc.split('href="#').join(`href="${this.state.basePath}#`)} }/>
+            <div className={ classes.toc } dangerouslySetInnerHTML={ {__html: documentation.toc.split('href="#').join(`href="${this.state.basePath}#`)} }/>
           </div>
         </Grid>
       </GridContainer>