Created
July 15, 2020 23:48
-
-
Save zaydek/c1a9ded7f60bf6fa59f49290ee22caa0 to your computer and use it in GitHub Desktop.
Cut from https://tailwindcss-typography.netlify.app source (July 16, 2020)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .prose { | |
| color: #4a5568; | |
| max-width: 65ch; | |
| } | |
| .prose [class~=lead] { | |
| color: #4a5568; | |
| font-size: 1.25em; | |
| line-height: 1.6; | |
| margin-top: 1.2em; | |
| margin-bottom: 1.2em; | |
| } | |
| .prose a { | |
| color: #1a202c; | |
| text-decoration: underline; | |
| } | |
| .prose strong { | |
| color: #1a202c; | |
| font-weight: 600; | |
| } | |
| .prose ol { | |
| counter-reset: list-counter; | |
| margin-top: 1.25em; | |
| margin-bottom: 1.25em; | |
| } | |
| .prose ol > li { | |
| position: relative; | |
| counter-increment: list-counter; | |
| padding-left: 1.75em; | |
| } | |
| .prose ol > li:before { | |
| content: counter(list-counter) "."; | |
| position: absolute; | |
| font-weight: 400; | |
| color: #718096; | |
| } | |
| .prose ul > li { | |
| position: relative; | |
| padding-left: 1.75em; | |
| } | |
| .prose ul > li:before { | |
| content: ""; | |
| position: absolute; | |
| background-color: #cbd5e0; | |
| border-radius: 50%; | |
| width: .375em; | |
| height: .375em; | |
| top: .6875em; | |
| left: .25em; | |
| } | |
| .prose hr { | |
| border-color: #e2e8f0; | |
| border-top-width: 1px; | |
| margin-top: 3em; | |
| margin-bottom: 3em; | |
| } | |
| .prose blockquote { | |
| font-weight: 500; | |
| font-style: italic; | |
| color: #1a202c; | |
| border-left-width: .25rem; | |
| border-left-color: #e2e8f0; | |
| quotes: "\201C" "\201D" "\2018" "\2019"; | |
| margin-top: 1.6em; | |
| margin-bottom: 1.6em; | |
| padding-left: 1em; | |
| } | |
| .prose blockquote p:first-of-type:before { | |
| content: open-quote; | |
| } | |
| .prose blockquote p:last-of-type:after { | |
| content: close-quote; | |
| } | |
| .prose h1 { | |
| color: #1a202c; | |
| font-weight: 800; | |
| font-size: 2.25em; | |
| margin-top: 0; | |
| margin-bottom: .8888889em; | |
| line-height: 1.1111111; | |
| } | |
| .prose h2 { | |
| color: #1a202c; | |
| font-weight: 700; | |
| font-size: 1.5em; | |
| margin-top: 2em; | |
| margin-bottom: 1em; | |
| line-height: 1.3333333; | |
| } | |
| .prose h3 { | |
| font-size: 1.25em; | |
| margin-top: 1.6em; | |
| margin-bottom: .6em; | |
| line-height: 1.6; | |
| } | |
| .prose h3, | |
| .prose h4 { | |
| color: #1a202c; | |
| font-weight: 600; | |
| } | |
| .prose h4 { | |
| margin-top: 1.5em; | |
| margin-bottom: .5em; | |
| line-height: 1.5; | |
| } | |
| .prose figure figcaption { | |
| color: #718096; | |
| font-size: .875em; | |
| line-height: 1.4285714; | |
| margin-top: .8571429em; | |
| } | |
| .prose code { | |
| color: #1a202c; | |
| font-weight: 600; | |
| font-size: .875em; | |
| } | |
| .prose code:after, | |
| .prose code:before { | |
| content: "`"; | |
| } | |
| .prose pre { | |
| color: #e2e8f0; | |
| background-color: #2d3748; | |
| overflow-x: auto; | |
| font-size: .875em; | |
| line-height: 1.7142857; | |
| margin-top: 1.7142857em; | |
| margin-bottom: 1.7142857em; | |
| border-radius: .375rem; | |
| padding: .8571429em 1.1428571em; | |
| } | |
| .prose pre code { | |
| background-color: transparent; | |
| border-width: 0; | |
| border-radius: 0; | |
| padding: 0; | |
| font-weight: 400; | |
| color: inherit; | |
| font-size: inherit; | |
| font-family: inherit; | |
| line-height: inherit; | |
| } | |
| .prose pre code:after, | |
| .prose pre code:before { | |
| content: ""; | |
| } | |
| .prose table { | |
| width: 100%; | |
| table-layout: auto; | |
| text-align: left; | |
| margin-top: 2em; | |
| margin-bottom: 2em; | |
| font-size: .875em; | |
| line-height: 1.7142857; | |
| } | |
| .prose thead { | |
| color: #1a202c; | |
| font-weight: 600; | |
| border-bottom-width: 1px; | |
| border-bottom-color: #cbd5e0; | |
| } | |
| .prose thead th { | |
| vertical-align: bottom; | |
| padding-right: .5714286em; | |
| padding-bottom: .5714286em; | |
| padding-left: .5714286em; | |
| } | |
| .prose tbody tr { | |
| border-bottom-width: 1px; | |
| border-bottom-color: #e2e8f0; | |
| } | |
| .prose tbody tr:last-child { | |
| border-bottom-width: 0; | |
| } | |
| .prose tbody td { | |
| vertical-align: top; | |
| padding: .5714286em; | |
| } | |
| .prose { | |
| font-size: 1rem; | |
| line-height: 1.75; | |
| } | |
| .prose p { | |
| margin-top: 1.25em; | |
| margin-bottom: 1.25em; | |
| } | |
| .prose figure, | |
| .prose img { | |
| margin-top: 2em; | |
| margin-bottom: 2em; | |
| } | |
| .prose figure > * { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| .prose h2 code { | |
| font-size: .875em; | |
| } | |
| .prose h3 code { | |
| font-size: .9em; | |
| } | |
| .prose ul { | |
| margin-top: 1.25em; | |
| margin-bottom: 1.25em; | |
| } | |
| .prose li { | |
| margin-top: .5em; | |
| margin-bottom: .5em; | |
| } | |
| .prose ol > li:before { | |
| left: 0; | |
| } | |
| .prose > ul > li p { | |
| margin-top: .75em; | |
| margin-bottom: .75em; | |
| } | |
| .prose > ul > li > :first-child { | |
| margin-top: 1.25em; | |
| } | |
| .prose > ul > li > :last-child { | |
| margin-bottom: 1.25em; | |
| } | |
| .prose > ol > li > :first-child { | |
| margin-top: 1.25em; | |
| } | |
| .prose > ol > li > :last-child { | |
| margin-bottom: 1.25em; | |
| } | |
| .prose ol ol, | |
| .prose ol ul, | |
| .prose ul ol, | |
| .prose ul ul { | |
| margin-top: .75em; | |
| margin-bottom: .75em; | |
| } | |
| .prose h2 + *, | |
| .prose h3 + *, | |
| .prose h4 + *, | |
| .prose hr + * { | |
| margin-top: 0; | |
| } | |
| .prose thead th:first-child { | |
| padding-left: 0; | |
| } | |
| .prose thead th:last-child { | |
| padding-right: 0; | |
| } | |
| .prose tbody td:first-child { | |
| padding-left: 0; | |
| } | |
| .prose tbody td:last-child { | |
| padding-right: 0; | |
| } | |
| .prose > :first-child { | |
| margin-top: 0; | |
| } | |
| .prose > :last-child { | |
| margin-bottom: 0; | |
| } | |
| .prose-sm { | |
| font-size: .875rem; | |
| line-height: 1.7142857; | |
| } | |
| .prose-sm p { | |
| margin-top: 1.1428571em; | |
| margin-bottom: 1.1428571em; | |
| } | |
| .prose-sm [class~=lead] { | |
| font-size: 1.2857143em; | |
| line-height: 1.5555556; | |
| margin-top: .8888889em; | |
| margin-bottom: .8888889em; | |
| } | |
| .prose-sm blockquote { | |
| margin-top: 1.3333333em; | |
| margin-bottom: 1.3333333em; | |
| padding-left: 1.1111111em; | |
| } | |
| .prose-sm h1 { | |
| font-size: 2.1428571em; | |
| margin-top: 0; | |
| margin-bottom: .8em; | |
| line-height: 1.2; | |
| } | |
| .prose-sm h2 { | |
| font-size: 1.4285714em; | |
| margin-top: 1.6em; | |
| margin-bottom: .8em; | |
| line-height: 1.4; | |
| } | |
| .prose-sm h3 { | |
| font-size: 1.2857143em; | |
| margin-top: 1.5555556em; | |
| margin-bottom: .4444444em; | |
| line-height: 1.5555556; | |
| } | |
| .prose-sm h4 { | |
| margin-top: 1.4285714em; | |
| margin-bottom: .5714286em; | |
| line-height: 1.4285714; | |
| } | |
| .prose-sm figure, | |
| .prose-sm img { | |
| margin-top: 1.7142857em; | |
| margin-bottom: 1.7142857em; | |
| } | |
| .prose-sm figure > * { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| .prose-sm figure figcaption { | |
| font-size: .8571429em; | |
| line-height: 1.3333333; | |
| margin-top: .6666667em; | |
| } | |
| .prose-sm code { | |
| font-size: .8571429em; | |
| } | |
| .prose-sm h2 code { | |
| font-size: .9em; | |
| } | |
| .prose-sm h3 code { | |
| font-size: .8888889em; | |
| } | |
| .prose-sm pre { | |
| font-size: .8571429em; | |
| line-height: 1.6666667; | |
| margin-top: 1.6666667em; | |
| margin-bottom: 1.6666667em; | |
| border-radius: .25rem; | |
| padding: .6666667em 1em; | |
| } | |
| .prose-sm ol, | |
| .prose-sm ul { | |
| margin-top: 1.1428571em; | |
| margin-bottom: 1.1428571em; | |
| } | |
| .prose-sm li { | |
| margin-top: .2857143em; | |
| margin-bottom: .2857143em; | |
| } | |
| .prose-sm ol > li { | |
| padding-left: 1.5714286em; | |
| } | |
| .prose-sm ol > li:before { | |
| left: 0; | |
| } | |
| .prose-sm ul > li { | |
| padding-left: 1.5714286em; | |
| } | |
| .prose-sm ul > li:before { | |
| height: .3571429em; | |
| width: .3571429em; | |
| top: .67857em; | |
| left: .2142857em; | |
| } | |
| .prose-sm > ul > li p { | |
| margin-top: .5714286em; | |
| margin-bottom: .5714286em; | |
| } | |
| .prose-sm > ul > li > :first-child { | |
| margin-top: 1.1428571em; | |
| } | |
| .prose-sm > ul > li > :last-child { | |
| margin-bottom: 1.1428571em; | |
| } | |
| .prose-sm > ol > li > :first-child { | |
| margin-top: 1.1428571em; | |
| } | |
| .prose-sm > ol > li > :last-child { | |
| margin-bottom: 1.1428571em; | |
| } | |
| .prose-sm ol ol, | |
| .prose-sm ol ul, | |
| .prose-sm ul ol, | |
| .prose-sm ul ul { | |
| margin-top: .5714286em; | |
| margin-bottom: .5714286em; | |
| } | |
| .prose-sm hr { | |
| margin-top: 2.8571429em; | |
| margin-bottom: 2.8571429em; | |
| } | |
| .prose-sm h2 + *, | |
| .prose-sm h3 + *, | |
| .prose-sm h4 + *, | |
| .prose-sm hr + * { | |
| margin-top: 0; | |
| } | |
| .prose-sm table { | |
| font-size: .8571429em; | |
| line-height: 1.5; | |
| } | |
| .prose-sm thead th { | |
| padding-right: 1em; | |
| padding-bottom: .6666667em; | |
| padding-left: 1em; | |
| } | |
| .prose-sm thead th:first-child { | |
| padding-left: 0; | |
| } | |
| .prose-sm thead th:last-child { | |
| padding-right: 0; | |
| } | |
| .prose-sm tbody td { | |
| padding: .6666667em 1em; | |
| } | |
| .prose-sm tbody td:first-child { | |
| padding-left: 0; | |
| } | |
| .prose-sm tbody td:last-child { | |
| padding-right: 0; | |
| } | |
| .prose-sm > :first-child { | |
| margin-top: 0; | |
| } | |
| .prose-sm > :last-child { | |
| margin-bottom: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment