From 928254e9927a7bd28ae3cddd9dd401437e456058 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gon=C3=A7alo=20Silva?= Date: Sun, 24 Mar 2019 03:31:42 +0000 Subject: [PATCH] Fix, cleanup and improve preview CSS Fixes #121. Additional, fixes include: * Light tables, title/hr underlines, code and quote blocks on the dark theme * Scrollbar not rendering on top of content Cleanup includes: * Removal of css rules that are internal to github (eg. octicon) * Merging of duplicate or overridden declarations * De-duplicating light and dark theme using import + custom properties Improvements include: * Using Fira / Fira Mono for rendering (as is done in the text editor) * Using relative units as much as possible, making it much easier to use a responsive design in the future * Using the same background color for a more seamless experience * Adjusting color contrast for the background changes, ensuring proper accessibility while still using GitHub's style --- data/media/github-md-dark.css | 587 ++-------------------------------- data/media/github-md.css | 400 ++++++++++------------- 2 files changed, 181 insertions(+), 806 deletions(-) diff --git a/data/media/github-md-dark.css b/data/media/github-md-dark.css index 2dfd3eb..928f3ca 100644 --- a/data/media/github-md-dark.css +++ b/data/media/github-md-dark.css @@ -1,567 +1,20 @@ -@font-face { - font-family: octicons-link; - src: url(data:font/woff;charset=utf-8;base64,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) format('woff'); -} - -body { - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - line-height: 1.5; - color: #EDEDED; - background-color: #31373D; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 16px; - line-height: 1.5; - word-wrap: break-word; -} - -a { - background-color: transparent; -} - -a:active, -a:hover { - outline-width: 0; -} - -strong { - font-weight: inherit; -} - -strong { - font-weight: bolder; -} - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -img { - border-style: none; -} - -code, -kbd, -pre { - font-family: monospace, monospace; - font-size: 1em; -} - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - -input { - font: inherit; - margin: 0; -} - -input { - overflow: visible; -} - -[type="checkbox"] { - box-sizing: border-box; - padding: 0; -} - -* { - box-sizing: border-box; -} - -input { - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -a { - color: #0366d6; - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -strong { - font-weight: 600; -} - -hr { - height: 0; - margin: 15px 0; - overflow: hidden; - background: transparent; - border: 0; - border-bottom: 1px solid #dfe2e5; -} - -hr::before { - display: table; - content: ""; -} - -hr::after { - display: table; - clear: both; - content: ""; -} - -table { - border-spacing: 0; - border-collapse: collapse; -} - -td, -th { - padding: 0; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin-top: 0; - margin-bottom: 0; -} - -h1 { - font-size: 32px; - font-weight: 600; -} - -h2 { - font-size: 24px; - font-weight: 600; -} - -h3 { - font-size: 20px; - font-weight: 600; -} - -h4 { - font-size: 16px; - font-weight: 600; -} - -h5 { - font-size: 14px; - font-weight: 600; -} - -h6 { - font-size: 12px; - font-weight: 600; -} - -p { - margin-top: 0; - margin-bottom: 10px; -} - -blockquote { - margin: 0; -} - -ul, -ol { - padding-left: 0; - margin-top: 0; - margin-bottom: 0; -} - -ol ol, -ul ol { - list-style-type: lower-roman; -} - -ul ul ol, -ul ol ol, -ol ul ol, -ol ol ol { - list-style-type: lower-alpha; -} - -dd { - margin-left: 0; -} - -code { - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 12px; -} - -pre { - margin-top: 0; - margin-bottom: 0; - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 12px; -} - -.octicon { - vertical-align: text-bottom; -} - -.pl-0 { - padding-left: 0 !important; -} - -.pl-1 { - padding-left: 4px !important; -} - -.pl-2 { - padding-left: 8px !important; -} - -.pl-3 { - padding-left: 16px !important; -} - -.pl-4 { - padding-left: 24px !important; -} - -.pl-5 { - padding-left: 32px !important; -} - -.pl-6 { - padding-left: 40px !important; -} - -.markdown-body::before { - display: table; - content: ""; -} - -.markdown-body::after { - display: table; - clear: both; - content: ""; -} - -.markdown-body>*:first-child { - margin-top: 0 !important; -} - -.markdown-body>*:last-child { - margin-bottom: 0 !important; -} - -a:not([href]) { - color: inherit; - text-decoration: none; -} - -.anchor { - float: left; - padding-right: 4px; - margin-left: -20px; - line-height: 1; -} - -.anchor:focus { - outline: none; -} - -p, -blockquote, -ul, -ol, -dl, -table, -pre { - margin-top: 0; - margin-bottom: 16px; -} - -hr { - height: 0.25em; - padding: 0; - margin: 24px 0; - background-color: #e1e4e8; - border: 0; -} - -blockquote { - padding: 0 1em; - color: #6a737d; - border-left: 0.25em solid #dfe2e5; -} - -blockquote>:first-child { - margin-top: 0; -} - -blockquote>:last-child { - margin-bottom: 0; -} - -kbd { - display: inline-block; - padding: 3px 5px; - font-size: 11px; - line-height: 10px; - color: #444d56; - vertical-align: middle; - background-color: #fafbfc; - border: solid 1px #c6cbd1; - border-bottom-color: #959da5; - border-radius: 3px; - box-shadow: inset 0 -1px 0 #959da5; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin-top: 24px; - margin-bottom: 16px; - font-weight: 600; - line-height: 1.25; -} - -h1 .octicon-link, -h2 .octicon-link, -h3 .octicon-link, -h4 .octicon-link, -h5 .octicon-link, -h6 .octicon-link { - color: #1b1f23; - vertical-align: middle; - visibility: hidden; -} - -h1:hover .anchor, -h2:hover .anchor, -h3:hover .anchor, -h4:hover .anchor, -h5:hover .anchor, -h6:hover .anchor { - text-decoration: none; -} - -h1:hover .anchor .octicon-link, -h2:hover .anchor .octicon-link, -h3:hover .anchor .octicon-link, -h4:hover .anchor .octicon-link, -h5:hover .anchor .octicon-link, -h6:hover .anchor .octicon-link { - visibility: visible; -} - -h1 { - padding-bottom: 0.3em; - font-size: 2em; - border-bottom: 1px solid #eaecef; -} - -h2 { - padding-bottom: 0.3em; - font-size: 1.5em; - border-bottom: 1px solid #eaecef; -} - -h3 { - font-size: 1.25em; -} - -h4 { - font-size: 1em; -} - -h5 { - font-size: 0.875em; -} - -h6 { - font-size: 0.85em; - color: #6a737d; -} - -ul, -ol { - padding-left: 2em; -} - -ul ul, -ul ol, -ol ol, -ol ul { - margin-top: 0; - margin-bottom: 0; -} - -li { - word-wrap: break-all; -} - -li>p { - margin-top: 16px; -} - -li+li { - margin-top: 0.25em; -} - -dl { - padding: 0; -} - -dl dt { - padding: 0; - margin-top: 16px; - font-size: 1em; - font-style: italic; - font-weight: 600; -} - -dl dd { - padding: 0 16px; - margin-bottom: 16px; -} - -table { - display: block; - width: 100%; - overflow: auto; -} - -table th { - font-weight: 600; -} - -table th, -table td { - padding: 6px 13px; - border: 1px solid #dfe2e5; -} - -table tr { - background-color: #fff; - border-top: 1px solid #c6cbd1; -} - -table tr:nth-child(2n) { - background-color: #f6f8fa; -} - -img { - max-width: 100%; - box-sizing: content-box; - background-color: #fff; -} - -img[align=right] { - padding-left: 20px; -} - -img[align=left] { - padding-right: 20px; -} - -code { - padding: 0.2em 0.4em; - margin: 0; - font-size: 85%; - background-color: #fafbfc9d; - color: #1b1f23; - border-radius: 3px; -} - -pre { - word-wrap: normal; -} - -pre>code { - padding: 0; - margin: 0; - font-size: 100%; - word-break: normal; - white-space: pre; - background: transparent; - border: 0; -} - -.highlight { - margin-bottom: 16px; -} - -.highlight pre { - margin-bottom: 0; - word-break: normal; -} - -.highlight pre, -pre { - padding: 16px; - overflow: auto; - font-size: 85%; - line-height: 1.45; - background-color: #f6f8faf1; - border-radius: 3px; -} - -pre code { - display: inline; - max-width: auto; - padding: 0; - margin: 0; - overflow: visible; - line-height: inherit; - word-wrap: normal; - background-color: transparent; - border: 0; -} - -.full-commit .btn-outline:not(:disabled):hover { - color: #005cc5; - border-color: #005cc5; -} - -kbd { - display: inline-block; - padding: 3px 5px; - font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - line-height: 10px; - color: #444d56; - vertical-align: middle; - background-color: #fafbfc; - border: solid 1px #d1d5da; - border-bottom-color: #c6cbd1; - border-radius: 3px; - box-shadow: inset 0 -1px 0 #c6cbd1; -} - -:checked+.radio-label { - position: relative; - z-index: 1; - border-color: #0366d6; -} - -.task-list-item { - list-style-type: none; -} - -.task-list-item+.task-list-item { - margin-top: 3px; -} - -.task-list-item input { - margin: 0 0.2em 0.25em -1.6em; - vertical-align: middle; -} - -hr { - border-bottom-color: #eee; -} +@import url("github-md.css"); + +:root { + --text-color: #dbdbdb; + --background-color: #353535; + --alt-background-color: #3a3a3a; + --link-color: #4388d6; + --blockquote-text-color: #959595; + --blockquote-border-color: #525252; + --header-border-color: #474747; + --hr-background-color: #505050; + --hr-border-color: #464646; + --code-background-color: #3e3e3e; + --table-td-border-color: #525252; + --table-tr-border-color: #696969; + --kbd-text-color: #bbbbbb; + --kbd-background-color: #3c3c3c; + --kbd-border-color: #696969; + --kbd-shadow-color: #979797; +} \ No newline at end of file diff --git a/data/media/github-md.css b/data/media/github-md.css index c014dd6..dde07c6 100644 --- a/data/media/github-md.css +++ b/data/media/github-md.css @@ -1,88 +1,62 @@ @font-face { - font-family: octicons-link; - src: url(data:font/woff;charset=utf-8;base64,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) format('woff'); + font-family: fira-sans; + src: url('fonts/fira-sans-v9-greek_latin-ext_latin_cyrillic-ext_cyrillic_greek-ext_vietnamese-regular.woff2') format('woff2'); } -body { - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - line-height: 1.5; - color: #31373D; - background-color: #EDEDED; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 16px; - line-height: 1.5; - word-wrap: break-word; +@font-face { + font-family: fira-mono; + src: url('fonts/fira-mono-v7-greek_latin-ext_latin_cyrillic-ext_cyrillic_greek-ext-regular.woff2') format('woff2'); } -a { - background-color: transparent; +@font-face { + font-family: "color-emoji"; + src: local("Noto Color Emoji"), local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Segoe UI Symbol"); } -a:active, -a:hover { - outline-width: 0; -} - -strong { - font-weight: inherit; -} - -strong { - font-weight: bolder; -} - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -img { - border-style: none; -} - -code, -kbd, -pre { - font-family: monospace, monospace; - font-size: 1em; -} - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - -input { - font: inherit; - margin: 0; -} - -input { - overflow: visible; -} - -[type="checkbox"] { - box-sizing: border-box; - padding: 0; +:root { + --text-color: #242424; + --background-color: #f6f5f4; + --alt-background-color: #ebebeb; + --link-color: #0366d6; + --blockquote-text-color: #606060; + --blockquote-border-color: #d8d8d8; + --header-border-color: #e2e2e2; + --hr-background-color: #dadada; + --hr-border-color: #e4e4e4; + --code-background-color: #eeeeee; + --table-td-border-color: #d8d8d8; + --table-tr-border-color: #c1c1c1; + --kbd-text-color: #444444; + --kbd-background-color: #f2f2f2; + --kbd-border-color: #c1c1c1; + --kbd-shadow-color: #939393; } * { box-sizing: border-box; } -input { - font-family: inherit; - font-size: inherit; - line-height: inherit; +body { + color: var(--text-color); + background-color: var(--background-color); + font-family: fira-sans, sans-serif, color-emoji; + line-height: 1.5; + text-size-adjust: 100%; + word-wrap: break-word; + padding: 2em; } a { - color: #0366d6; + background-color: transparent; + color: var(--link-color); text-decoration: none; } +a:active, +a:hover { + outline-width: 0; +} + a:hover { text-decoration: underline; } @@ -91,13 +65,19 @@ strong { font-weight: 600; } +img { + border-style: none; +} + hr { - height: 0; - margin: 15px 0; + box-sizing: content-box; + height: 0.25em; + padding: 0; + margin: 1.5em 0; overflow: hidden; - background: transparent; + background-color: var(--hr-background-color); border: 0; - border-bottom: 1px solid #dfe2e5; + border-bottom: 1px solid var(--hr-border-color); } hr::before { @@ -111,6 +91,19 @@ hr::after { content: ""; } +input { + font-family: inherit; + font-size: inherit; + line-height: inherit; + margin: 0; + overflow: visible; +} + +[type="checkbox"] { + box-sizing: border-box; + padding: 0; +} + table { border-spacing: 0; border-collapse: collapse; @@ -127,43 +120,37 @@ h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 0; + font-weight: 600; + margin: 0; } h1 { - font-size: 32px; - font-weight: 600; + font-size: 2em; } h2 { - font-size: 24px; - font-weight: 600; + font-size: 1.5em; } h3 { - font-size: 20px; - font-weight: 600; + font-size: 1.25em; } h4 { - font-size: 16px; - font-weight: 600; + font-size: 1em; } h5 { - font-size: 14px; - font-weight: 600; + font-size: 0.875em; } h6 { - font-size: 12px; - font-weight: 600; + font-size: 0.85em; } p { margin-top: 0; - margin-bottom: 10px; + margin-bottom: 0.625em; } blockquote { @@ -193,20 +180,66 @@ dd { margin-left: 0; } +code, +kbd, +pre { + font-family: fira-mono, monospace, color-emoji; + background-color: var(--code-background-color); + font-size: 1em; + word-wrap: normal; +} + code { - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 12px; + border-radius: 0.1875em; + font-size: 0.85em; + padding: 0.2em 0.4em; + margin: 0; } pre { margin-top: 0; margin-bottom: 0; - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 12px; + font-size: 0.75em; } -.octicon { - vertical-align: text-bottom; +pre>code { + padding: 0; + margin: 0; + font-size: 1em; + word-break: normal; + white-space: pre; + background: transparent; + border: 0; +} + +.highlight { + margin-bottom: 1em; +} + +.highlight pre { + margin-bottom: 0; + word-break: normal; +} + +.highlight pre, +pre { + padding: 1em; + overflow: auto; + font-size: 0.85em; + line-height: 1.5; + background-color: var(--alt-background-color); + border-radius: 0.1875em; +} + +pre code { + background-color: transparent; + border: 0; + display: inline; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; } .pl-0 { @@ -214,27 +247,27 @@ pre { } .pl-1 { - padding-left: 4px !important; + padding-left: 0.25em !important; } .pl-2 { - padding-left: 8px !important; + padding-left: 0.5em !important; } .pl-3 { - padding-left: 16px !important; + padding-left: 1em !important; } .pl-4 { - padding-left: 24px !important; + padding-left: 1.5em !important; } .pl-5 { - padding-left: 32px !important; + padding-left: 2em !important; } .pl-6 { - padding-left: 40px !important; + padding-left: 2.5em !important; } .markdown-body::before { @@ -263,8 +296,8 @@ a:not([href]) { .anchor { float: left; - padding-right: 4px; - margin-left: -20px; + padding-right: 0.25em; + margin-left: -1.25em; line-height: 1; } @@ -280,21 +313,13 @@ dl, table, pre { margin-top: 0; - margin-bottom: 16px; -} - -hr { - height: 0.25em; - padding: 0; - margin: 24px 0; - background-color: #e1e4e8; - border: 0; + margin-bottom: 1em; } blockquote { padding: 0 1em; - color: #6a737d; - border-left: 0.25em solid #dfe2e5; + color: var(--blockquote-text-color); + border-left: 0.25em solid var(--blockquote-border-color); } blockquote>:first-child { @@ -307,16 +332,16 @@ blockquote>:last-child { kbd { display: inline-block; - padding: 3px 5px; - font-size: 11px; - line-height: 10px; - color: #444d56; + padding: 0.1875em 0.3125em; + font-size: 0.6875em; + line-height: 1; + color: var(--kbd-text-color); vertical-align: middle; - background-color: #fafbfc; - border: solid 1px #c6cbd1; - border-bottom-color: #959da5; + background-color: var(--kbd-background-color); + border: solid 1px var(--kbd-border-color); + border-bottom-color: var(--kbd-shadow-color); border-radius: 3px; - box-shadow: inset 0 -1px 0 #959da5; + box-shadow: inset 0 -1px 0 var(--kbd-shadow-color);; } h1, @@ -325,23 +350,12 @@ h3, h4, h5, h6 { - margin-top: 24px; - margin-bottom: 16px; + margin-top: 1.5em; + margin-bottom: 1em; font-weight: 600; line-height: 1.25; } -h1 .octicon-link, -h2 .octicon-link, -h3 .octicon-link, -h4 .octicon-link, -h5 .octicon-link, -h6 .octicon-link { - color: #1b1f23; - vertical-align: middle; - visibility: hidden; -} - h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, @@ -351,25 +365,16 @@ h6:hover .anchor { text-decoration: none; } -h1:hover .anchor .octicon-link, -h2:hover .anchor .octicon-link, -h3:hover .anchor .octicon-link, -h4:hover .anchor .octicon-link, -h5:hover .anchor .octicon-link, -h6:hover .anchor .octicon-link { - visibility: visible; -} - h1 { padding-bottom: 0.3em; font-size: 2em; - border-bottom: 1px solid #eaecef; + border-bottom: 1px solid var(--header-border-color); } h2 { padding-bottom: 0.3em; font-size: 1.5em; - border-bottom: 1px solid #eaecef; + border-bottom: 1px solid var(--header-border-color); } h3 { @@ -386,7 +391,7 @@ h5 { h6 { font-size: 0.85em; - color: #6a737d; + opacity: 0.67; } ul, @@ -403,11 +408,11 @@ ol ul { } li { - word-wrap: break-all; + overflow-wrap: break-word; } li>p { - margin-top: 16px; + margin-top: 1em; } li+li { @@ -420,15 +425,15 @@ dl { dl dt { padding: 0; - margin-top: 16px; + margin-top: 1em; font-size: 1em; font-style: italic; font-weight: 600; } dl dd { - padding: 0 16px; - margin-bottom: 16px; + padding: 0 1em; + margin-bottom: 1em; } table { @@ -443,109 +448,30 @@ table th { table th, table td { - padding: 6px 13px; - border: 1px solid #dfe2e5; + padding: 0.375em 0.8125em; + border: 1px solid var(--table-td-border-color); } table tr { - background-color: #fff; - border-top: 1px solid #c6cbd1; + background-color: var(--background-color); + border-top: 1px solid var(--table-tr-border-color); } table tr:nth-child(2n) { - background-color: #f6f8fa; + background-color: var(--alt-background-color); } img { max-width: 100%; box-sizing: content-box; - background-color: #fff; } img[align=right] { - padding-left: 20px; + padding-left: 1.25em; } img[align=left] { - padding-right: 20px; -} - -code { - padding: 0.2em 0.4em; - margin: 0; - font-size: 85%; - background-color: rgba(27,31,35,0.05); - border-radius: 3px; -} - -pre { - word-wrap: normal; -} - -pre>code { - padding: 0; - margin: 0; - font-size: 100%; - word-break: normal; - white-space: pre; - background: transparent; - border: 0; -} - -.highlight { - margin-bottom: 16px; -} - -.highlight pre { - margin-bottom: 0; - word-break: normal; -} - -.highlight pre, -pre { - padding: 16px; - overflow: auto; - font-size: 85%; - line-height: 1.45; - background-color: #f6f8fa; - border-radius: 3px; -} - -pre code { - display: inline; - max-width: auto; - padding: 0; - margin: 0; - overflow: visible; - line-height: inherit; - word-wrap: normal; - background-color: transparent; - border: 0; -} - -.full-commit .btn-outline:not(:disabled):hover { - color: #005cc5; - border-color: #005cc5; -} - -kbd { - display: inline-block; - padding: 3px 5px; - font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - line-height: 10px; - color: #444d56; - vertical-align: middle; - background-color: #fafbfc; - border: solid 1px #d1d5da; - border-bottom-color: #c6cbd1; - border-radius: 3px; - box-shadow: inset 0 -1px 0 #c6cbd1; -} - -:checked+.radio-label { - position: relative; - z-index: 1; - border-color: #0366d6; + padding-right: 1.25em; } .task-list-item { @@ -553,14 +479,10 @@ kbd { } .task-list-item+.task-list-item { - margin-top: 3px; + margin-top: 0.1875em; } .task-list-item input { margin: 0 0.2em 0.25em -1.6em; vertical-align: middle; } - -hr { - border-bottom-color: #eee; -}