Reusable CSS that can be imported to "jazz up" the default look & feel of Markdown-generated pages & content.

enhanced-markdown.css

/* IMPORT FONTS */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i');
@import url('https://cdn.jsdelivr.net/gh/tonsky/[email protected]/distr/fira_code.css');

:root {
    --blue: rgba(3, 157, 231, 1);
    --blue-87: rgba(3, 157, 231, 0.87);
    --blue-54: rgba(3, 157, 231, 0.54);
    --blue-0: rgba(3, 157, 231, 0);
    --indigo: rgba(102, 16, 242, 1);
    --purple: rgba(111, 66, 193, 1);
    --lightpurple: rgba(156, 39, 176, 1);
    --pink: rgba(232, 62, 140, 1);
    --pink-87: rgba(232, 62, 140, 0.87);
    --red: rgba(241, 91, 94, 1);
    --red-87: rgba(241, 91, 94, 0.87);
    --red-0: rgba(241, 91, 94, 0);
    --orange: rgba(253, 126, 20, 1);
    --yellow: rgba(255, 193, 7, 1);
    --yellow-54: rgba(255, 193, 7, 0.54);
    --green: rgba(40, 167, 69, 1);
    --teal: rgba(32, 201, 151, 1);
    --cyan: rgba(23, 162, 184, 1);
    --gray: rgba(108, 117, 125, 1);
    --gray-dark: rgba(52, 58, 64, 1);
    --primary: rgba(0, 123, 255, 1);
    --secondary: rgba(108, 117, 125, 1);
    --success: rgba(40, 167, 69, 1);
    --info: rgba(23, 162, 184, 1);
    --warning: rgba(255, 193, 7, 1);
    --danger: rgba(220, 53, 69, 1);
    --light: rgba(226, 226, 226, 1);
    --dark: rgba(65, 64, 66, 1);
    --dark-54: rgba(65, 64, 66, 0.54);
    --dark-08: rgba(65, 64, 66, 0.08);
    --dark-04: rgba(65, 64, 66, 0.04);
    --dark-02: rgba(65, 64, 66, 0.02);
    --black: rgba(0, 0, 0, 1);
    --black-0: rgba(0, 0, 0, 0);
    --white: rgba(255, 255, 255, 1);
    --caption-color: rgba(108, 117, 125, 1);
    --code-bg: rgba(31, 36, 48, 1);
    --code-color: rgba(255, 255, 255, 0.87);
    --font-family-sans-serif: 'Roboto', sans-serif;
    --font-family-serif: 'Noto Serif', serif;
    --font-family-monospace: 'Fira Code', monospace;
    --font-size-root: 16px;
    --font-size-base: 1.25rem;
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --heading1-font-size: 2.5rem;
    --heading2-font-size: 2rem;
    --heading3-font-size: 1.75rem;
    --heading4-font-size: 1.5rem;
    --heading5-font-size: 1.25rem;
    --heading6-font-size: 1rem;
    --snippet-font-size: 0.875rem;
    --spacer: 0.625rem;
    --line-height-base: 1.5;
    --line-height-headings: 1.15;
    --line-height-lg: 1.6;
    --line-height-sm: 1.3;
    --border-width: 1px;
    --border-color: var(--dark-08);
    --border-radius: 0.25rem;
    --border-radius-lg: 0.375rem;
    --border-radius-sm: 0.125rem;
}

/* SCAFFOLDING */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
}
html {
    background-color: var(--white);
    color: var(--dark);
    font-family: sans-serif;
    font-size: var(--font-size-root);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: var(--black-0);
}
body {
    background-color: var(--white);
    color: var(--dark);
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    text-align: left;
}
.markdown-body [tabindex='-1']:focus:not(:focus-visible) {
    outline: 0 !important;
}

/* HORIZONTAL RULES */
.markdown-body hr {
    border: 0;
    display: block;
    height: 0;
    margin-bottom: 2.8125rem;
    margin-top: 2.8125rem;
    overflow: visible;
    position: relative;
    text-align: center;
}
.markdown-body hr:before {
    --x-height-multiplier: 0.342;
    --baseline-multiplier: 0.22;
    color: var(--dark-54);
    content: '...';
    display: inline-block;
    font-family: var(--font-family-serif);
    font-size: 2.8125rem;
    font-style: italic;
    font-weight: var(--font-weight-regular);
    letter-spacing: 1.25rem;
    margin-left: 1.25rem;
    position: relative;
    top: -2.8125rem;
}

/* SELECTED ( HIGHLIGHTED ) TEXT */
.markdown-body ::-moz-selection {
    background: var(--lightpurple);
    color: var(--white);
}
.markdown-body ::selection {
    background: var(--lightpurple);
    color: var(--white);
}

/* LINKS */
.markdown-body a {
    background: transparent;
    background-image: linear-gradient(to right, var(--blue-87) 100%, var(--blue-0) 0);
    background-position: 0 1.125em;
    background-position: 0 calc(1em + 2px);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    color: var(--blue-87);
    outline: 0 !important;
    text-decoration: none !important;
    transition: background-image 200ms cubic-bezier(0.35, 0, 0.25, 1),
                color 200ms cubic-bezier(0.35, 0, 0.25, 1);
    will-change: background-image, color;
}
.markdown-body a:active,
.markdown-body a:focus,
.markdown-body a:hover {
    background-image: linear-gradient(to right, var(--red-87) 100%, var(--red-0) 0);
    color: var(--red-87);
    text-decoration: none !important;
}
.markdown-body a:not([href]):not([tabindex]),
.markdown-body a:not([href]):not([tabindex]):active,
.markdown-body a:not([href]):not([tabindex]):hover,
.markdown-body a:not([href]):not([tabindex]):focus {
    color: inherit;
    outline: 0;
    text-decoration: none;
}

/* HEADINGS */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    font-family: var(--font-family-sans-serif);
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-headings);
    margin-bottom: 1.875rem;
    margin-top: 1.875rem;
}
.markdown-body h1,
.markdown-body h2 {
    border-bottom: 0;
    color: var(--dark);
    display: block;
    font-weight: var(--font-weight-thin);
    line-height: var(--line-height-headings);
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
.markdown-body h1 { font-size: var(--heading1-font-size); }
.markdown-body h2 { font-size: var(--heading2-font-size); }
.markdown-body h3 { font-size: var(--heading3-font-size); }
.markdown-body h4 { font-size: var(--heading4-font-size); }
.markdown-body h5 { font-size: var(--heading5-font-size); }
.markdown-body h6 { font-size: var(--heading6-font-size); }

/* TYPOGRAPHY */
.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre {
    margin-top: 0;
    margin-bottom: 1.875rem;
}
.markdown-body p {
    --x-height-multiplier: 0.375;
    --baseline-multiplier: 0.17;
    clear: left;
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.003em;
    letter-spacing: 0.01rem;
    line-height: 1.5;
    margin-top: 0;
}
.markdown-body b,
.markdown-body strong {
font-weight: var(--font-weight-bold);
}
.markdown-body small {
font-size: 80%;
}
.markdown-body sub,
.markdown-body sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
.markdown-body sub {
bottom: -0.25em;
}
.markdown-body sup {
top: -0.5em;
}
.markdown-body ul,
.markdown-body ol,
.markdown-body dl {
    line-height: 2rem;
    padding-left: 2.8125rem;
}
.markdown-body ol ol,
.markdown-body ul ul,
.markdown-body ol ul,
.markdown-body ul ol {
    margin-bottom: 0;
}

/* BLOCKQUOTES */
.markdown-body blockquote {
    border: 0;
    border-left: 0.25rem solid var(--blue-54);
    color: var(--dark-54);
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size-base);
    font-style: italic;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-lg);
    margin: 1.875rem auto 1.875rem ;
    padding: 4.6875rem 2.8125rem 1.875rem;
    position: relative;
    width: 100%;
}
.markdown-body blockquote:before {
    color: var(--blue);
    content: '\201C';
    font-family: var(--font-family-serif);
    font-size: 4.5rem;
    height: 3rem;
    left: 0.9375rem;
    line-height: 1;
    max-width: 3rem;
    position: absolute;
    text-align: inherit;
    top: 0.9375rem;
    width: 100%;
}
.markdown-body blockquote:after {
    content: '';
}

/* CODE */
.markdown-body pre,
.markdown-body code,
.markdown-body kbd,
.markdown-body samp {
    font-family: var(--font-family-monospace);
    font-size: 1em;
}
.markdown-body pre {
    background: var(--code-bg);
    border: 0;
    border-radius: var(--border-radius);
    color: var(--code-color);
    display: block;
    font-size: 87.5%;
    font-variant-ligatures: contextual;
    line-height: inherit;
    overflow-x: auto;
    padding: 0.625rem 0.9375rem;
    position: relative;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    z-index: 2;
    -webkit-font-variant-ligatures: contextual;
    -webkit-tap-highlight-color: transparent;
}
.markdown-body pre > code {
    background: 0 0;
    color: var(--code-color);
    display: block;
    font-size: var(--snippet-font-size);
    line-height: var(--line-height-lg);
    max-width: 100%;
    min-width: 100px;
    overflow-x: scroll;
    padding: var(--spacer) (var(--spacer) * 1.5);
    scrollbar-color: var(--gray-dark);
    scrollbar-width: 0.5em;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-break: normal;
    word-wrap: break-word;
    -webkit-overflow-scrolling: touch;
}
.markdown-body code {
    background-color: var(--dark-08);
    color: var(--code-bg);
    font-size: 87.5%;
    letter-spacing: 2px;
    padding: 0.25rem 0.375rem;
    word-break: break-word;
}
.markdown-body code:before,
.markdown-body code:after {
    content: '';
    letter-spacing: -0.2em;
}
.markdown-body a > code {
    color: inherit;
}
.markdown-body kbd {
    background-color: var(--dark);
    border: 0 !important;
    border-radius: var(--border-radius);
    box-shadow: none;
    color: var(--white);
    display: inline-block;
    font-size: 87.5%;
    line-height: inherit;
    padding: 0.25rem 0.375rem;
    vertical-align: middle;
}

/* TABLES */
.markdown-body table {
    background-color: var(--white);
    border-collapse: collapse;
    color: var(--dark-87);
    display: table;
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}
.markdown-body table th,
.markdown-body table td {
    border: 0;
    border-top: var(--border-width) solid var(--dark-08);
    padding: 0.75rem;
    vertical-align: top;
}
.markdown-body table th:not(:first-child),
.markdown-body table td:not(:first-child) {
    border-left: var(--border-width) solid var(--dark-04);
}
.markdown-body table td {
    border-bottom: var(--border-width) solid var(--dark-08);
}
.markdown-body table thead th {
    background-color: var(--dark-08);
    border-bottom: (var(--border-width) * 2) solid var(--dark-08);
    font-size: 87.5%;
    font-weight: var(--font-weight-black);
    padding: 0.375rem 0.75rem;
    vertical-align: bottom;
}
.markdown-body table tbody + tbody {
    border-top: (var(--border-width) * 2) solid var(--dark-08);
}
.markdown-body table tbody tr:nth-child(odd) {
    background-color: var(--white);
}
.markdown-body table tbody tr:nth-of-type(2n) {
    background-color: var(--dark-02);
}
.markdown-body table tbody tr {
    transition: 300ms background-color cubic-bezier(0.35, 0, 0.25, 1);
    will-change: background-color;
}
.markdown-body table tbody tr:hover {
    background-color: var(--dark-04);
    color: var(--dark-87);
}

/* FIGURES */
.markdown-body figure {
    display: inline-block;
    margin: 0 auto 0.9375rem;
}
.markdown-body figure > img {
    border-radius: var(--border-radius);
    height: auto;
    line-height: 1;
    margin-bottom: 0.5rem;
    max-width: 100%;
}
.markdown-body figure figcaption {
    color: var(--caption-color);
    font-size: 90%;
    text-align: center;
}

/* IMAGES */
.markdown-body img {
    border-style: none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
.markdown-body svg {
    overflow: hidden;
    vertical-align: middle;
}

/* HIGHLIGHTED TEXT */
.markdown-body mark {
    background-color: var(--yellow-54);
    padding: 0.25rem;
}

/* BUTTONS */
.markdown-body button {
    border-radius: 0;
}
.markdown-body button:focus {
    outline: var(--border-width) dotted;
    outline: (var(--border-width) * 5) auto -webkit-focus-ring-color;
}
.markdown-body input,
.markdown-body button,
.markdown-body select,
.markdown-body optgroup,
.markdown-body textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}
.markdown-body button,
.markdown-body input {
    overflow: visible;
}
.markdown-body button,
.markdown-body select {
text-transform: none;
}
.markdown-body button,
.markdown-body [type="button"],
.markdown-body [type="reset"],
.markdown-body [type="submit"] {
    -webkit-appearance: button;
}
.markdown-body button:not(:disabled),
.markdown-body [type="button"]:not(:disabled),
.markdown-body [type="reset"]:not(:disabled),
.markdown-body [type="submit"]:not(:disabled) {
    cursor: pointer;
}
.markdown-body button::-moz-focus-inner,
.markdown-body [type="button"]::-moz-focus-inner,
.markdown-body [type="reset"]::-moz-focus-inner,
.markdown-body [type="submit"]::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

/* FORMS */
.markdown-body label {
    display: inline-block;
    margin-bottom: 0.5rem;
}
.markdown-body select {
    word-wrap: normal;
}
.markdown-body input[type="radio"],
.markdown-body input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
}
.markdown-body input[type="date"],
.markdown-body input[type="time"],
.markdown-body input[type="datetime-local"],
.markdown-body input[type="month"] {
    -webkit-appearance: listbox;
}
.markdown-body textarea {
    overflow: auto;
    resize: vertical;
}
.markdown-body fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}
.markdown-body legend {
color: inherit;
display: block;
font-size: 1.5rem;
line-height: inherit;
margin-bottom: 0.5rem;
max-width: 100%;
padding: 0;
white-space: normal;
width: 100%;
}

/* PROGRESS INDICATORS */
.markdown-body progress {
    vertical-align: baseline;
}

/* NUMBER INPUTS */
.markdown-body [type="number"]::-webkit-inner-spin-button,
.markdown-body [type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/* SEARCH INPUTS */
.markdown-body [type="search"] {
    outline-offset: -(var(--border-width) * 2);
    -webkit-appearance: none;
}
.markdown-body [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/* FILE UPLOAD BUTTONS */
.markdown-body ::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
}

/* OUTPUT */
.markdown-body output {
    display: inline-block;
}

/* SUMMARY */
.markdown-body summary {
    cursor: pointer;
    display: list-item;
}

/* TEMPLATES */
.markdown-body template {
    display: none;
}

/* HIDDEN ELEMENTS */
.markdown-body [hidden] {
    display: none !important;
}