Created
June 2, 2021 05:07
-
-
Save sampotts/f8c873dd91c09bd1ca6f11eca3e49352 to your computer and use it in GitHub Desktop.
Custom Markdown Theme
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
@import "https://cdn.potts.es/fonts/fakt-pro.css"; | |
@import "https://cdn.potts.es/fonts/basier-circle-mono.css"; | |
html { | |
font-size: 100%; | |
} | |
/* Basic reset */ | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6, | |
p, | |
blockquote { | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
background: #fff; | |
color: #363f49; | |
font: 1rem/1.6 "Fakt Pro", "Avenir Next", "Helvetica Neue", Helvetica, Arial, | |
sans-serif; | |
padding: 2rem; | |
overflow-wrap: break-word; | |
} | |
/* Common */ | |
table, | |
ul, | |
ol, | |
p, | |
hr, | |
blockquote, | |
pre { | |
margin: 1.5rem 0; | |
} | |
img { | |
max-width: 100%; | |
height: auto; | |
border-radius: 0.15rem; | |
} | |
/* Tables */ | |
table { | |
border-collapse: collapse; | |
} | |
td, | |
th { | |
padding: 0.3rem 0.6rem; | |
border-bottom: 1px dashed #dadfe2; | |
vertical-align: middle; | |
} | |
th { | |
font-weight: 500; | |
border-bottom-width: 2px; | |
border-bottom-style: solid; | |
} | |
/* Links */ | |
a { | |
border-bottom: 1px solid transparent; | |
color: #3498db; | |
text-decoration: none; | |
transition: all 0.3s ease; | |
} | |
a:hover, | |
a:focus { | |
border-bottom-color: currentColor; | |
color: hsl(6, 65%, 52%); | |
} | |
a img, | |
a:hover img { | |
border: 0; | |
} | |
/* Headings */ | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
margin: 0.75rem 0; | |
color: #22282e; | |
font-weight: 600; | |
line-height: 1.3; | |
letter-spacing: -0.025em; | |
} | |
h1 { | |
font-size: 2.25rem; | |
} | |
h2 { | |
font-size: 1.5rem; | |
} | |
h3 { | |
font-size: 1.25rem; | |
} | |
h4 { | |
font-size: 1rem; | |
} | |
h5 { | |
font-size: 0.85rem; | |
} | |
h6 { | |
font-size: 0.75rem; | |
} | |
strong { | |
color: #22282e; | |
font-weight: 500; | |
} | |
/* Rules */ | |
hr { | |
border: 0; | |
border-bottom: 2px solid #e1e9ee; | |
} | |
/* Lists */ | |
ul, | |
ol { | |
padding: 0 0 0 1.5rem; | |
} | |
ol li, | |
ul li { | |
margin: 0.5rem 0; | |
padding: 0; | |
} | |
li > p { | |
margin: 0; | |
} | |
ul ul, | |
ol ol, | |
ol ul, | |
ul ol { | |
margin: 0; | |
} | |
/* Quotes */ | |
blockquote { | |
position: relative; | |
font-family: Georgia, serif; | |
font-style: italic; | |
padding: 0.75rem 1.25rem; | |
padding-left: 2rem; | |
} | |
blockquote::before { | |
position: absolute; | |
color: #dadfe2; | |
content: "\201C"; | |
font-size: 2.5rem; | |
top: 0; | |
left: 0.25rem; | |
} | |
blockquote p, | |
blockquote ul { | |
margin: 0; | |
} | |
blockquote p { | |
font-style: italic; | |
font-weight: 300; | |
} | |
blockquote blockquote { | |
margin: 0.5rem 0; | |
} | |
/* Code */ | |
code, | |
pre { | |
background: #f6f6f6; | |
border: 1px solid #d4d3d4; | |
border-radius: 0.25rem; | |
color: hsl(344, 76%, 62%); | |
padding: 1px 0.2rem; | |
font: normal 0.875rem/1.5 "Basier Circle Mono", Menlo, Monaco, Andale Mono, | |
Courier New, monospace !important; | |
} | |
code { | |
-webkit-box-decoration-break: clone; | |
box-decoration-break: clone; | |
} | |
pre { | |
display: block; | |
margin: 1.5rem 0 !important; | |
padding: 0.65rem 1rem !important; | |
white-space: pre-wrap; | |
word-wrap: break-word; | |
border-radius: 0.5rem; | |
color: hsl(308, 1%, 83%) !imporant; | |
background: hsl(228, 30%, 8%) !important; | |
border-color: hsl(228, 30%, 0%) !important; | |
} | |
pre code { | |
background: none; | |
border: 0; | |
border-radius: 0; | |
padding: 0; | |
color: inherit; | |
text-shadow: none !important; | |
} | |
sup { | |
font-size: 0.83em; | |
line-height: 0; | |
vertical-align: super; | |
} | |
@media screen and (min-width: 56rem) { | |
body { | |
margin: 0.75rem auto; | |
width: 54rem; | |
} | |
} | |
@media print { | |
body, | |
code, | |
pre code, | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
color: #000; | |
} | |
table, | |
pre { | |
page-break-inside: avoid; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment