Created
June 25, 2022 22:03
-
-
Save pb-uk/f44d7716213668f42cf5b6ade1483ebe to your computer and use it in GitHub Desktop.
CSS for textual content following a hard reset
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 :first-child { | |
margin-top: 0 !important; | |
} | |
.prose { | |
line-height: 1; | |
text-rendering: optimizeLegibility; | |
} | |
.prose, | |
.light .prose, | |
.light.prose { | |
--prose-border-color: #777; | |
--prose-code-bg: #ffe; | |
--prose-code-color: #703; | |
--prose-highlight-bg: yellow; | |
--prose-link-color: #33c; | |
} | |
.dark .prose, | |
.dark.prose { | |
--prose-border-color: #777; | |
--prose-code-bg: #333; | |
--prose-code-color: #eee; | |
--prose-highlight-bg: yellow; | |
--prose-link-color: #77f; | |
} | |
/* Baseline grid for debugging. */ | |
.prose.prose-baseline { | |
background-image: linear-gradient( | |
to bottom, | |
#777 0, | |
rgba(255, 255, 255, 0) 1px | |
); | |
background-repeat: repeat-y; | |
background-size: 100% 1.5em; | |
} | |
/* Line height for block elements. */ | |
.prose caption, | |
.prose dd, | |
.prose dt, | |
.prose figcaption, | |
.prose li, | |
.prose p, | |
.prose pre, | |
.prose td, | |
.prose th { | |
line-height: 1.5; | |
} | |
/* Margin after appropriate block elements. */ | |
.prose caption, | |
.prose dd, | |
.prose dl, | |
.prose figcaption, | |
.prose figure, | |
.prose p, | |
.prose pre, | |
.prose ol, | |
.prose table, | |
.prose ul { | |
margin: 0 0 1.5em 0; | |
} | |
.prose blockquote, | |
.prose ol, | |
.prose ul { | |
margin-left: 2.5em; | |
} | |
.prose code { | |
padding: 0 0.25em; | |
color: var(--prose-code-color); | |
background: var(--prose-code-bg); | |
} | |
.prose kbd, | |
.prose samp { | |
padding: 0 0.25em; | |
border: 1px solid var(--prose-border-color); | |
border-radius: 0.25em; | |
} | |
/* Inline elements */ | |
.prose a { | |
text-decoration: underline; | |
color: var(--prose-link-color); | |
} | |
.prose abbr[title] { | |
border-bottom: 1px dotted black; | |
border-color: var(--prose-border-color); | |
} | |
.prose b, | |
.prose strong { | |
font-weight: bold; | |
} | |
.prose cite, | |
.prose em, | |
.prose i, | |
.prose var { | |
font-style: italic; | |
} | |
/* Insertion, deletion etc. */ | |
.prose del, | |
.prose s { | |
text-decoration: line-through; | |
} | |
.prose ins { | |
text-decoration: underline; | |
} | |
.prose u { | |
text-decoration: underline wavy; | |
} | |
.prose mark { | |
background-color: var(--prose-highlight-bg); | |
} | |
.prose small { | |
font-size: 0.75em; | |
} | |
.prose sub { | |
font-size: 80%; | |
vertical-align: sub; | |
} | |
.prose sup { | |
font-size: 0.75em; | |
vertical-align: super; | |
} | |
/* Lists */ | |
.prose ol ol, | |
.prose ul ul, | |
.prose ol ul, | |
.prose ul ol { | |
margin-top: 0; | |
margin-bottom: 0; | |
} | |
.prose ol { | |
list-style: decimal; | |
} | |
.prose ol ol { | |
list-style: lower-alpha; | |
} | |
.prose ol ol ol { | |
list-style: lower-roman; | |
} | |
.prose ol ol ol ol { | |
list-style: decimal; | |
} | |
.prose ul { | |
list-style: disc; | |
} | |
.prose ul ul { | |
list-style: circle; | |
} | |
.prose ul ul ul { | |
list-style: '- '; | |
} | |
.prose dt { | |
font-weight: bold; | |
} | |
.prose dd { | |
margin-top: 0; | |
} | |
/* Headings */ | |
.prose h1, | |
.prose h2, | |
.prose h3, | |
.prose h4, | |
.prose h5, | |
.prose h6 { | |
font-weight: bold; | |
line-height: 1.5; | |
} | |
/* h1 headings: total height 6em */ | |
.prose h1 { | |
font-size: 2.4em; | |
margin: 0.6875em 0 0.3125em 0; | |
} | |
/* h2 headings: total height 6em */ | |
.prose h2 { | |
font-size: 2em; | |
margin: 1.125em 0 0.375em 0; | |
} | |
.prose h1 + h2, | |
.prose h2 + h2, | |
.prose h3 + h2 { | |
margin-top: 0.75em; | |
} | |
/* h3 headings: total height 6em */ | |
.prose h3 { | |
font-size: 1.6em; | |
margin: 1.78125em 0 0.46875em 0; | |
} | |
.prose h2 + h3, | |
.prose h3 + h3, | |
.prose h4 + h3 { | |
margin-top: 1.3125em; | |
} | |
/* h4 headings: total height 4.5em */ | |
.prose h4 { | |
font-size: 1.2em; | |
margin: 1.625em 0 0.625em 0; | |
} | |
.prose h3 + h4, | |
.prose h4 + h4, | |
.prose h5 + h4 { | |
margin-top: 1em; | |
} | |
/* h5 headings: total height 4.5em */ | |
.prose h5 { | |
font-size: 1em; | |
margin: 2.25em 0 0.75em 0; | |
} | |
.prose h4 + h5, | |
.prose h5 + h5 { | |
margin-top: 1.5em; | |
} | |
.prose h6 + h5 { | |
margin-top: 0.75em; | |
} | |
/* h6 headings: total height 3em */ | |
.prose h6 { | |
font-size: 1em; | |
margin: 1.5em 0 0 0; | |
} | |
.prose h5 + h6, | |
.prose h6 + h6 { | |
margin-top: 0; | |
} | |
/* Blockquotes */ | |
.prose blockquote { | |
border-left: 0.25em solid black; | |
border-left-color: var(--prose-border-color); | |
padding-left: 0.75em; | |
} | |
.prose blockquote blockquote { | |
margin-left: 0; | |
} | |
/* Preformatted */ | |
.prose pre { | |
overflow: scroll; | |
} | |
.prose pre code { | |
display: block; | |
background: var(--prose-code-bg); | |
padding: 0.25em 0.75em 0.5em; | |
border-radius: 0.5em; | |
margin-bottom: 0.75em; | |
} | |
/* Tables */ | |
.prose table { | |
border-collapse: collapse; | |
table-layout: auto; | |
border: 2px solid black; | |
} | |
.prose th, | |
.prose td { | |
padding: 0.125em 0.5em 0.25em; | |
border: 1px solid black; | |
} | |
.prose table, | |
.prose th, | |
.prose td { | |
border-color: var(--prose-border-color); | |
} | |
.prose th { | |
font-weight: bold; | |
} | |
.prose caption { | |
caption-side: top; | |
font-weight: bold; | |
margin-top: 0; | |
text-align: left; | |
} | |
/* Media. */ | |
.prose embed, | |
.prose iframe, | |
.prose img, | |
.prose object { | |
display: inline; | |
max-width: 100%; | |
} | |
.prose figure { | |
max-width: 100%; | |
} | |
.prose figcaption { | |
font-size: 0.75em; | |
line-height: 2; | |
text-align: left; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment