Typesetting improvements (#446)

* switch from em to rem

When a table specimen is used with a `baseFontSize` other than tha default `16px` the table cells are displayed with a strange font size. That's because the font size of the `table` gets multiplied with the one of the `cell` or the `paragraph`. For example for `baseFontSize` set to `18px`: `18 / 16 = 1.125em` (which will result in a calculated font size of `22.7833px` (`1.25 * 1.25 * 18`).

Switching to rem (root em) solves this issue.

* Fix elements nested in blockquotes

* Add more variations to test page

* Improve headings in hints

* Remove unnecessary text styles on <table>

* Add comment about blockquote style

* Define letter spacing

* Remove unused sidebar theming option

* More specific styling of sidebar

Doesn't solve #347 completely but addresses some potential issues with global stylesheets

* More spefic list styling in content

* More specific link styling in content

* More specific navigation bar styling

Also changes unsemantic headings to divs, fixes #444

* More specific link styling in Download specimen

Also removes non-semantic headings, fixes #444

* More layout fixes

* Fix nested list margin

* Text fixes in color specimens

* Fix responsive tabs text styles

* Fix hint link styles

* Update test snapshots

* Make blockquoteStyle lazy to fix font loading

`@import`s in `insertRule` only work if they're the first rule
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule#Restrictions

* Upgrade create-emotion

* Fix single active link padding

Author: jstcki

docs/configuration/theming.md

@@ -1,4 +1,3 @@
-
 ## Theming Catalog
 
 ### `logoSrc`
@@ -56,7 +55,7 @@ Used in the navigation bar.
 ResponsiveTabs (tab text), Download specimen (title text).
 Typography: headings.
 
-##### `sidebarColor{,Active,Text,TextActive,Line,Heading}`
+##### `sidebarColor{,Text,TextActive,Line,Heading}`
 
 Used in the sidebar.
 
@@ -73,4 +72,3 @@ codeStyles: {
   tag: {color: '#FF5555', fontWeight: 'bold'}
 }
 ```
-

docs/test/test.md

@@ -6,13 +6,17 @@ An ordinary paragraph can follow after the lead text. It can repeat things. It c
 
 > Blockquotes can appear multiple times, even though that might not make too much sense … Inline elements are styled nicely: text [link](http://example.com) text _italic_ text **bold** text `.code` text.
 >
+> ## Heading in a blockquote
+>
 > * Blockquotes
 >   * With lists
+>
+> > Nested blockquote
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-consequat. Inline elements are styled nicely: text [link](http://example.com) text _italic_ text **bold** text `(...args) => {return args;}` text.
+consequat. Inline elements are styled nicely: text [link](http://example.com) text _italic_ text **bold** text `(...args) => {return args;}` text. ~~Strikethrough text~~
 
 Link [to a heading](#jump-to-me)
 
@@ -37,6 +41,14 @@ Plain email foo@bar.com
 
 Some `inline code`, yeah!
 
+## Subheading
+### Subheading
+#### Subheading
+##### Subheading
+###### Subheading
+
+> Foo bar
+
 And a [link](#hints-with-content), and another one: https://catalog.style
 ```
 
@@ -223,3 +235,7 @@ Similar to button, but looks more important.
 ```
 <a class="important-button" href="#">Important Button</a>
 ```
+
+> a block quote
+
+> another one

package.json

@@ -57,7 +57,7 @@
     "babel-runtime": "^6.26.0",
     "babel-standalone": "^6.26.0",
     "chalk": "^2.1.0",
-    "create-emotion": "^9.1.2",
+    "create-emotion": "^9.2.6",
     "create-react-class": "^15.6.0",
     "css-loader": "^0.28.7",
     "d3-color": "^1.1.0",

src/DefaultTheme.js

@@ -28,7 +28,6 @@ export default {
   brandColor: "#003B5C",
 
   sidebarColor: "#FFFFFF",
-  sidebarColorActive: "#D1312E",
   sidebarColorText: "#003B5C",
   sidebarColorTextActive: "#FF5555",
   sidebarColorLine: "#EBEBEB",

src/__snapshots__/configure.test.js.snap

@@ -132,7 +132,6 @@ Object {
     "pageHeadingHeight": 200,
     "pageHeadingTextColor": "#fff",
     "sidebarColor": "#FFFFFF",
-    "sidebarColorActive": "#D1312E",
     "sidebarColorHeading": "#003B5C",
     "sidebarColorLine": "#EBEBEB",
     "sidebarColorText": "#003B5C",
@@ -275,7 +274,6 @@ Object {
     "pageHeadingHeight": 200,
     "pageHeadingTextColor": "#fff",
     "sidebarColor": "#FFFFFF",
-    "sidebarColorActive": "#D1312E",
     "sidebarColorHeading": "#003B5C",
     "sidebarColorLine": "#EBEBEB",
     "sidebarColorText": "#003B5C",
@@ -452,7 +450,6 @@ Object {
     "pageHeadingHeight": 200,
     "pageHeadingTextColor": "#fff",
     "sidebarColor": "#FFFFFF",
-    "sidebarColorActive": "#D1312E",
     "sidebarColorHeading": "#003B5C",
     "sidebarColorLine": "#EBEBEB",
     "sidebarColorText": "#003B5C",

src/components/App/AppLayout.js

@@ -50,6 +50,7 @@ const getStyles = (theme, sidebarVisible) => ({
   },
   sideNav: {
     background: theme.sidebarColor,
+    boxSizing: "content-box",
     color: "#fff",
     overflowY: "auto",
     position: "fixed",

src/components/App/NavigationBar.js

@@ -11,6 +11,15 @@ const verticalPadding = 28;
 const horizontalPadding = 21;
 
 function getStyles(theme) {
+  const baseLinkStyle = {
+    color: theme.navBarTextColor,
+    display: "block",
+    fontFamily: theme.fontFamily,
+    textDecoration: "none",
+    border: "none",
+    background: "none",
+    transition: "none"
+  };
   return {
     navbar: {
       width: "100%",
@@ -22,7 +31,7 @@ function getStyles(theme) {
       verticalAlign: "top",
       width: "50%",
       transition: ".2s opacity",
-      ":hover": {
+      "&:hover, &:focus, &:focus-within": {
         opacity: 0.65
       }
     },
@@ -37,17 +46,14 @@ function getStyles(theme) {
     rightNavLink: {
       padding: `${verticalPadding}px ${horizontalPadding}px ${verticalPadding}px 0`,
       textAlign: "right",
-      borderLeft: `1px solid ${theme.background}`,
       "@media (min-width: 1000px)": {
         padding: `${verticalPadding}px ${horizontalPadding *
           2}px ${verticalPadding}px 0`
       }
     },
     link: {
-      color: theme.navBarTextColor,
-      display: "block",
-      fontFamily: theme.fontFamily,
-      textDecoration: "none"
+      ...baseLinkStyle,
+      "&:hover, &:focus, &:active, &:visited": baseLinkStyle
     },
     leftLinkIcon: {
       display: "none",
@@ -132,10 +138,12 @@ class NavigationBar extends React.Component {
             >
               {leftIcon}
               <div className={css(styles.linklabels)}>
-                <h4 className={css(styles.linkSuperTitle)}>
+                <div className={css(styles.linkSuperTitle)}>
                   {previousPage.superTitle}
-                </h4>
-                <h3 className={css(styles.linkTitle)}>{previousPage.title}</h3>
+                </div>
+                <div className={css(styles.linkTitle)}>
+                  {previousPage.title}
+                </div>
               </div>
             </Link>
           )}
@@ -147,10 +155,10 @@ class NavigationBar extends React.Component {
               className={css({ ...styles.link, ...styles.rightNavLink })}
             >
               <div className={css(styles.linklabels)}>
-                <h4 className={css(styles.linkSuperTitle)}>
+                <div className={css(styles.linkSuperTitle)}>
                   {nextPage.superTitle}
-                </h4>
-                <h3 className={css(styles.linkTitle)}>{nextPage.title}</h3>
+                </div>
+                <div className={css(styles.linkTitle)}>{nextPage.title}</div>
               </div>
               {rightIcon}
             </Link>

src/components/Content/Markdown.js

@@ -11,39 +11,50 @@ const baseListStyle = {
   paddingLeft: "2rem"
 };
 
+// Defined with `css`, so it can be used as a selector for nested elements
+// For example: `Paragraph`
+const blockquoteStyle = () =>
+  css({
+    quotes: "none",
+    margin: "48px 0 32px 0",
+    width: "100%",
+    "&::before, &::after": { content: "none" },
+    "& > :first-child": { marginTop: 0 },
+    "& > :last-child": { marginBottom: 0 },
+    "& + &": { marginTop: 0 }
+  });
+
 export const Paragraph = styled("p", (props, { theme }) => ({
   ...text(theme),
   flexBasis: "100%",
+  [`.${blockquoteStyle()} &`]: { fontSize: getFontSize(theme, 1) },
   margin: `16px 0 0 0`
 }));
-export const UnorderedList = styled("ul", (props, { theme }) => ({
+export const UnorderedList = styled("ul", {
   ...baseListStyle,
-  ...text(theme),
   listStyle: "disc",
   marginTop: "16px",
-  marginBottom: 0
-}));
-export const OrderedList = styled("ol", (props, { theme }) => ({
+  marginBottom: 0,
+  "& > li": { listStyle: "disc" }
+});
+export const OrderedList = styled("ol", {
   ...baseListStyle,
-  ...text(theme),
   listStyle: "ordinal",
   marginTop: "16px",
-  marginBottom: 0
-}));
+  marginBottom: 0,
+  "& > li": { listStyle: "ordinal" }
+});
 export const ListItem = styled("li", (props, { theme }) => ({
   ...text(theme),
-  "& > :first-child": { marginTop: 0 },
+  [`.${blockquoteStyle()} &`]: { fontSize: getFontSize(theme, 1) },
+  margin: 0,
+  padding: 0,
+  "& > :first-child, & > ul, & > ol": { marginTop: 0 },
   "& > :last-child": { marginBottom: 0 }
 }));
-export const BlockQuote = styled("blockquote", (props, { theme }) => ({
-  fontSize: getFontSize(theme, 1),
-  quotes: "none",
-  margin: "48px 0 32px 0",
-  "&::before, &::after": { content: "none" },
-  "& > :first-child": { marginTop: 0 },
-  "& > :last-child": { marginBottom: 0 },
-  "+ blockquote": { marginBottom: 0 }
-}));
+export const BlockQuote = props => (
+  <blockquote className={blockquoteStyle()} {...props} />
+);
 export const Hr = styled("hr", {
   border: "none",
   flexBasis: "100%",
@@ -65,21 +76,35 @@ export const CodeSpan = styled("code", (props, { theme }) => ({
   padding: "0.12em 0.2em",
   textIndent: 0
 }));
-export const Del = styled("del", (props, { theme }) => text(theme));
+export const Del = styled("del", {
+  textDecoration: "line-through"
+});
 export const Image = styled("img", {
   maxWidth: "100%"
 });
 
-export const Link = (props, { catalog: { theme } }) => (
-  <BaseLink
-    className={css({
-      color: theme.linkColor,
-      textDecoration: "none",
-      ":hover": { textDecoration: "underline" }
-    })}
-    {...props}
-  />
-);
+export const Link = (props, { catalog: { theme } }) => {
+  const baseLinkStyle = {
+    color: theme.linkColor,
+    transition: "none",
+    border: "none",
+    background: "none",
+    textDecoration: "none"
+  };
+  return (
+    <BaseLink
+      className={css({
+        ...baseLinkStyle,
+        "&:active, &:visited": baseLinkStyle,
+        "&:hover, &:focus": {
+          ...baseLinkStyle,
+          textDecoration: "underline"
+        }
+      })}
+      {...props}
+    />
+  );
+};
 
 Link.contextTypes = {
   catalog: catalogShape