From 240571e39a4b12d6b6585c89062579dd2dc03a0f Mon Sep 17 00:00:00 2001 From: LekoArts Date: Mon, 6 Jan 2020 12:31:40 +0100 Subject: [PATCH] fix(gatsby-theme-minimal-blog): Styling fixes Styles inside lists, code inside lists, labels for highlighting --- .../index.mdx | 392 +++++++++--------- .../src/gatsby-plugin-theme-ui/index.js | 18 + .../src/styles/code.ts | 353 ++++++++-------- 3 files changed, 399 insertions(+), 364 deletions(-) diff --git a/examples/minimal-blog/content/posts/harry-potter-and-the-half-blood-prince/index.mdx b/examples/minimal-blog/content/posts/harry-potter-and-the-half-blood-prince/index.mdx index 9aeadfa02..d889ea888 100644 --- a/examples/minimal-blog/content/posts/harry-potter-and-the-half-blood-prince/index.mdx +++ b/examples/minimal-blog/content/posts/harry-potter-and-the-half-blood-prince/index.mdx @@ -1,188 +1,204 @@ ---- -title: Harry Potter and the Half-Blood Prince -date: 2019-09-01 -tags: - - Novel - - Highlight ---- - -[View raw (TEST.md)](https://raw.github.com/adamschwartz/github-markdown-kitchen-sink/master/README.md) - -This is a paragraph. - - This is a paragraph. - -# Header 1 - -## Header 2 - - Header 1 - ======== - - Header 2 - -------- - -# Header 1 - -## Header 2 - -### Header 3 - -#### Header 4 - -##### Header 5 - -###### Header 6 - - # Header 1 - ## Header 2 - ### Header 3 - #### Header 4 - ##### Header 5 - ###### Header 6 - -# Header 1 - -## Header 2 - -### Header 3 - -#### Header 4 - -##### Header 5 - -###### Header 6 - - # Header 1 # - ## Header 2 ## - ### Header 3 ### - #### Header 4 #### - ##### Header 5 ##### - ###### Header 6 ###### - -> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. - - > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. - -> ## This is a header. -> -> 1. This is the first list item. -> 2. This is the second list item. -> -> Here's some example code: -> -> Markdown.generate(); - - > ## This is a header. - > 1. This is the first list item. - > 2. This is the second list item. - > - > Here's some example code: - > - > Markdown.generate(); - -- Red -- Green -- Blue - -* Red -* Green -* Blue - -- Red -- Green -- Blue - -```markdown -- Red -- Green -- Blue - -* Red -* Green -* Blue - -- Red -- Green -- Blue -``` - -1. Buy flour and salt -1. Mix together with water -1. Bake - -```markdown -1. Buy flour and salt -1. Mix together with water -1. Bake -``` - -Paragraph: - - Code - - - - Paragraph: - - Code - ---- - ---- - ---- - ---- - ---- - - * * * - - *** - - ***** - - - - - - - --------------------------------------- - -This is [an example](http://example.com "Example") link. - -[This link](http://example.com) has no title attr. - -This is [an example][id] reference-style link. - -[id]: http://example.com "Optional Title" - - This is [an example](http://example.com "Example") link. - - [This link](http://example.com) has no title attr. - - This is [an example] [id] reference-style link. - - [id]: http://example.com "Optional Title" - -_single asterisks_ - -_single underscores_ - -**double asterisks** - -**double underscores** - - *single asterisks* - - _single underscores_ - - **double asterisks** - - __double underscores__ - -This paragraph has some `code` in it. - - This paragraph has some `code` in it. - -![Alt Text](https://placehold.it/200x50 "Image Title") - - ![Alt Text](https://placehold.it/200x50 "Image Title") +--- +title: Harry Potter and the Half-Blood Prince +date: 2019-09-01 +tags: + - Novel + - Highlight +--- + +[View raw (TEST.md)](https://raw.github.com/adamschwartz/github-markdown-kitchen-sink/master/README.md) + +This is a paragraph. + + This is a paragraph. + +# Header 1 + +## Header 2 + + Header 1 + ======== + + Header 2 + -------- + +# Header 1 + +## Header 2 + +### Header 3 + +#### Header 4 + +##### Header 5 + +###### Header 6 + + # Header 1 + ## Header 2 + ### Header 3 + #### Header 4 + ##### Header 5 + ###### Header 6 + +# Header 1 + +## Header 2 + +### Header 3 + +#### Header 4 + +##### Header 5 + +###### Header 6 + + # Header 1 # + ## Header 2 ## + ### Header 3 ### + #### Header 4 #### + ##### Header 5 ##### + ###### Header 6 ###### + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. + + > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. + +> ## This is a header. +> +> 1. This is the first list item. +> 2. This is the second list item. +> +> Here's some example code: +> +> Markdown.generate(); + + > ## This is a header. + > 1. This is the first list item. + > 2. This is the second list item. + > + > Here's some example code: + > + > Markdown.generate(); + +- Red +- Green +- Blue + +* Red +* Green +* Blue + +- Red +- Green +- Blue + +```markdown +- Red +- Green +- Blue + +* Red +* Green +* Blue + +- Red +- Green +- Blue +``` + +- `code goes` here in this line +- **bold** goes here + +```markdown +- `code goes` here in this line +- **bold** goes here +``` + +1. Buy flour and salt +1. Mix together with water +1. Bake + +```markdown +1. Buy flour and salt +1. Mix together with water +1. Bake +``` + +1. `code goes` here in this line +1. **bold** goes here + +```markdown +1. `code goes` here in this line +1. **bold** goes here +``` + +Paragraph: + + Code + + + + Paragraph: + + Code + +--- + +--- + +--- + +--- + +--- + + * * * + + *** + + ***** + + - - - + + --------------------------------------- + +This is [an example](http://example.com "Example") link. + +[This link](http://example.com) has no title attr. + +This is [an example][id] reference-style link. + +[id]: http://example.com "Optional Title" + + This is [an example](http://example.com "Example") link. + + [This link](http://example.com) has no title attr. + + This is [an example] [id] reference-style link. + + [id]: http://example.com "Optional Title" + +_single asterisks_ + +_single underscores_ + +**double asterisks** + +**double underscores** + + *single asterisks* + + _single underscores_ + + **double asterisks** + + __double underscores__ + +This paragraph has some `code` in it. + + This paragraph has some `code` in it. + +![Alt Text](https://placehold.it/200x50 "Image Title") + + ![Alt Text](https://placehold.it/200x50 "Image Title") diff --git a/themes/gatsby-theme-minimal-blog/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-minimal-blog/src/gatsby-plugin-theme-ui/index.js index db903ab4b..3b238f3dd 100644 --- a/themes/gatsby-theme-minimal-blog/src/gatsby-plugin-theme-ui/index.js +++ b/themes/gatsby-theme-minimal-blog/src/gatsby-plugin-theme-ui/index.js @@ -78,6 +78,24 @@ export default { "--baseline-multiplier": 0.179, "--x-height-multiplier": 0.35, }, + ul: { + li: { + fontSize: [1, 1, 2], + letterSpacing: `-0.003em`, + lineHeight: `body`, + "--baseline-multiplier": 0.179, + "--x-height-multiplier": 0.35, + }, + }, + ol: { + li: { + fontSize: [1, 1, 2], + letterSpacing: `-0.003em`, + lineHeight: `body`, + "--baseline-multiplier": 0.179, + "--x-height-multiplier": 0.35, + }, + }, ...headingStyles, Container: { padding: [3, 4], diff --git a/themes/gatsby-theme-minimal-blog/src/styles/code.ts b/themes/gatsby-theme-minimal-blog/src/styles/code.ts index 70ebd0147..fd4af617e 100644 --- a/themes/gatsby-theme-minimal-blog/src/styles/code.ts +++ b/themes/gatsby-theme-minimal-blog/src/styles/code.ts @@ -1,176 +1,177 @@ -import { tint } from "@theme-ui/color" - -export default { - "[data-name='live-editor']": { - padding: (t: any) => `${t.space[2]} !important`, - fontSize: 1, - }, - "[data-name='live-preview']": { - padding: (t: any) => `calc(${t.space[2]} + 10px) !important`, - backgroundColor: tint(`primary`, 0.7), - }, - ".prism-code": { - fontSize: 1, - padding: 3, - webkitOverflowScrolling: `touch`, - backgroundColor: `transparent`, - overflow: `initial`, - float: `left`, - minWidth: `100%`, - mb: 0, - '&[data-linenumber="false"]': { - ".token-line": { - pl: 3, - }, - }, - }, - ".token": { - display: `inline-block`, - }, - "p > code": { - bg: `rgb(1, 22, 39)`, - color: `rgb(214, 222, 235)`, - px: 2, - py: 1, - }, - ".gatsby-highlight": { - fontSize: 1, - position: `relative`, - webkitOverflowScrolling: `touch`, - bg: `rgb(1, 22, 39)`, - overflow: `auto`, - mx: [0, 0, 0, -3], - ".token-line": { - mx: -3, - }, - "pre.language-": { - mt: 0, - }, - "pre.language-noLineNumbers": { - mt: 0, - }, - 'pre[class*="language-"]:before': { - bg: `white`, - borderRadius: `0 0 0.25rem 0.25rem`, - color: `black`, - fontSize: `12px`, - letterSpacing: `0.025rem`, - padding: `0.1rem 0.5rem`, - position: `absolute`, - left: `1rem`, - textAlign: `right`, - textTransform: `uppercase`, - top: 0, - }, - 'pre[class~="language-javascript"]:before': { - content: `"js"`, - background: `#f7df1e`, - color: `black`, - }, - 'pre[class~="language-js"]:before': { - content: `"js"`, - background: `#f7df1e`, - color: `black`, - }, - 'pre[class~="language-jsx"]:before': { - content: `"jsx"`, - background: `#61dafb`, - color: `black`, - }, - 'pre[class~="language-ts"]:before': { - content: `"ts"`, - background: `#61dafb`, - color: `black`, - }, - 'pre[class~="language-tsx"]:before': { - content: `"tsx"`, - background: `#61dafb`, - color: `black`, - }, - 'pre[class~="language-html"]:before': { - content: `"html"`, - background: `#005a9c`, - }, - 'pre[class~="language-graphql"]:before': { - content: `"GraphQL"`, - background: `#E10098`, - }, - 'pre[class~="language-css"]:before': { - content: `"css"`, - background: `#ff9800`, - color: `black`, - }, - 'pre[class~="language-mdx"]:before': { - content: `"mdx"`, - background: `#f9ac00`, - color: `black`, - }, - 'pre[class~="language-text"]:before': { - content: `"text"`, - }, - "pre[class='language-shell']:before": { - content: `'shell'`, - }, - "pre[class='language-sh']:before": { - content: `'sh'`, - }, - "pre[class='language-bash']:before": { - content: `'bash'`, - }, - "pre[class='language-yaml']:before": { - content: `'yaml'`, - background: `#ffa8df`, - }, - "pre[class='language-markdown']:before": { - content: `'md'`, - }, - "pre[class='language-json']:before, pre[class='language-json5']:before": { - content: `'json'`, - background: `linen`, - }, - "pre[class='language-diff']:before": { - content: `'diff'`, - background: `#e6ffed`, - }, - }, - '.gatsby-highlight > code[class*="language-"], .gatsby-highlight > pre[class=*="language-"]': { - wordSpacing: `normal`, - wordBreak: `normal`, - overflowWrap: `normal`, - lineHeight: 1.5, - tabSize: 4, - hyphens: `none`, - }, - ".line-number-style": { - display: `inline-block`, - width: `3em`, - userSelect: `none`, - opacity: 0.3, - textAlign: `center`, - position: `relative`, - }, - ".code-title": { - backgroundColor: tint(`primary`, 0.7), - color: `black`, - fontSize: 0, - px: 3, - py: 2, - fontFamily: `monospace`, - mx: [0, 0, 0, -3], - }, - "[data-name='live-preview'], [data-name='live-editor']": { - mx: [0, 0, 0, -3], - }, - ".token-line": { - pr: 3, - }, - ".highlight-line": { - backgroundColor: `rgb(2, 55, 81)`, - borderLeft: `4px solid rgb(2, 155, 206)`, - ".line-number-style": { - width: `calc(3em - 4px)`, - opacity: 0.5, - left: `-2px`, - }, - }, -} +import { tint } from "@theme-ui/color" + +export default { + "[data-name='live-editor']": { + padding: (t: any) => `${t.space[2]} !important`, + fontSize: 1, + }, + "[data-name='live-preview']": { + padding: (t: any) => `calc(${t.space[2]} + 10px) !important`, + backgroundColor: tint(`primary`, 0.7), + }, + ".prism-code": { + fontSize: 1, + padding: 3, + webkitOverflowScrolling: `touch`, + backgroundColor: `transparent`, + overflow: `initial`, + float: `left`, + minWidth: `100%`, + mb: 0, + '&[data-linenumber="false"]': { + ".token-line": { + pl: 3, + }, + }, + }, + ".token": { + display: `inline-block`, + }, + "p > code, li > code": { + bg: `rgb(1, 22, 39)`, + color: `rgb(214, 222, 235)`, + px: 2, + py: 1, + }, + ".gatsby-highlight": { + fontSize: 1, + position: `relative`, + webkitOverflowScrolling: `touch`, + bg: `rgb(1, 22, 39)`, + overflow: `auto`, + mx: [0, 0, 0, -3], + ".token-line": { + mx: -3, + }, + "pre.language-": { + mt: 0, + }, + "pre.language-noLineNumbers": { + mt: 0, + }, + 'pre[class*="language-"]:before': { + bg: `white`, + borderRadius: `0 0 0.25rem 0.25rem`, + color: `black`, + fontSize: `12px`, + letterSpacing: `0.025rem`, + padding: `0.1rem 0.5rem`, + position: `absolute`, + left: `1rem`, + textAlign: `right`, + textTransform: `uppercase`, + top: 0, + }, + 'pre[class~="language-javascript"]:before': { + content: `"js"`, + background: `#f7df1e`, + color: `black`, + }, + 'pre[class~="language-js"]:before': { + content: `"js"`, + background: `#f7df1e`, + color: `black`, + }, + 'pre[class~="language-jsx"]:before': { + content: `"jsx"`, + background: `#61dafb`, + color: `black`, + }, + 'pre[class~="language-ts"]:before': { + content: `"ts"`, + background: `#61dafb`, + color: `black`, + }, + 'pre[class~="language-tsx"]:before': { + content: `"tsx"`, + background: `#61dafb`, + color: `black`, + }, + 'pre[class~="language-html"]:before': { + content: `"html"`, + background: `#005a9c`, + color: `white`, + }, + 'pre[class~="language-graphql"]:before': { + content: `"GraphQL"`, + background: `#E10098`, + }, + 'pre[class~="language-css"]:before': { + content: `"css"`, + background: `#ff9800`, + color: `black`, + }, + 'pre[class~="language-mdx"]:before': { + content: `"mdx"`, + background: `#f9ac00`, + color: `black`, + }, + 'pre[class~="language-text"]:before': { + content: `"text"`, + }, + "pre[class~='language-shell']:before": { + content: `'shell'`, + }, + "pre[class~='language-sh']:before": { + content: `'sh'`, + }, + "pre[class~='language-bash']:before": { + content: `'bash'`, + }, + "pre[class~='language-yaml']:before": { + content: `'yaml'`, + background: `#ffa8df`, + }, + "pre[class~='language-markdown']:before": { + content: `'md'`, + }, + "pre[class~='language-json']:before, pre[class~='language-json5']:before": { + content: `'json'`, + background: `linen`, + }, + "pre[class~='language-diff']:before": { + content: `'diff'`, + background: `#e6ffed`, + }, + }, + '.gatsby-highlight > code[class*="language-"], .gatsby-highlight > pre[class=*="language-"]': { + wordSpacing: `normal`, + wordBreak: `normal`, + overflowWrap: `normal`, + lineHeight: 1.5, + tabSize: 4, + hyphens: `none`, + }, + ".line-number-style": { + display: `inline-block`, + width: `3em`, + userSelect: `none`, + opacity: 0.3, + textAlign: `center`, + position: `relative`, + }, + ".code-title": { + backgroundColor: tint(`primary`, 0.7), + color: `black`, + fontSize: 0, + px: 3, + py: 2, + fontFamily: `monospace`, + mx: [0, 0, 0, -3], + }, + "[data-name='live-preview'], [data-name='live-editor']": { + mx: [0, 0, 0, -3], + }, + ".token-line": { + pr: 3, + }, + ".highlight-line": { + backgroundColor: `rgb(2, 55, 81)`, + borderLeft: `4px solid rgb(2, 155, 206)`, + ".line-number-style": { + width: `calc(3em - 4px)`, + opacity: 0.5, + left: `-2px`, + }, + }, +}