---
title: A HackMD Math textbook CSS template
tags: theme
description: a css template for HackMD math notes. create a note on HackMD, copy the content of this file into it. Everytime you want to use this stylesheet, simply embed it to the note you want to use.
---

<style>

html, body, .ui-content {
background-color: #AADDEE;
color: #000000;
}

.markdown-body {
font-family: "Ubuntu",Helvetica,BlinkMacSystemFont,Apple Color Emoji,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif,Segoe UI Emoji,Segoe UI Symbol;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
color: DarkSlateGrey;
text-shadow: 0px 1px 0px #FFF;
}

.markdown-body h1,
.markdown-body h2 {
border-bottom-color: Black;
}

.markdown-body h2 {
border-bottom-style: dashed;
}

.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
text-decoration: dotted underline;
}

.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
color: #fff;
}

.markdown-body img {
background-color: transparent;
}

/* Navigator Menu Bar */
.ui-toc-dropdown .nav>.active:focus>a, .ui-toc-dropdown .nav>.active:hover>a, .ui-toc-dropdown .nav>.active>a {
color: DarkSlateGrey;
border-left: 2px solid DarkSlateGrey;
}

.expand-toggle:hover,
.expand-toggle:focus,
.back-to-top:hover,
.back-to-top:focus,
.go-to-bottom:hover,
.go-to-bottom:focus {
color: DarkSlateGrey;
}

.ui-toc-dropdown {
background-color: #AADDEE;
}

.ui-toc-label.btn {
background-color: #AADDEE;
color: white;
}

.ui-toc-dropdown .nav > li > a {
color: black;
}

.ui-toc-dropdown .nav>li>a:focus,
.ui-toc-dropdown .nav>li>a:hover {
color: DarkSlateGrey;
border-left: 1px solid DarkSlateGrey;
}

.back-to-top, .expand-toggle, .go-to-bottom {
color: black;
}

/* Markdown BlockQuotes */
.markdown-body blockquote {
font-family: palatino, "Times New Roman", -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
font-weight: bold;
font-size: 15pt;
background-color: #7799AA;
color: #000000;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
padding-top: 20px;
padding-bottom: 20px;
}

.markdown-body table th{
background-color: Chocolate;
}

.markdown-body table tr {
background-color: SandyBrown;
}

.markdown-body table tr:nth-child(2n) {
background-color: RosyBrown;
}

/* For Code Blocks */
.markdown-body code,
.markdown-body kbd,
.markdown-body pre,
.markdown-body samp {
font-family: JetBrains Mono,Monaco,Ubuntu Mono,Menlo,Monaco,Consolas,"Courier New",monospace;
font-weight: bold;
}
.markdown-body code {
background-color: #88BBCC;
}

/* For Math Statment Blocks */
.alert {
padding: 16px 16px 16px 24px;
margin-bottom: 20px;
border-radius: 10px;
border-color: black;
border-width: 3px;
}
.alert-info {
color: #063970;
background-color: #F0F0F0;
}
.statement-title-container {
margin-bottom: 10px;
}
.statement-title {
font-weight: bold;
text-decoration: underline;
margin-right: 5px;
}
.statement-subtitle {
font-style: italic;
margin-right: 5px;
}
/* For Proof Blocks */
.alert-success {
color: black;
background-color: #C0C040;
}
.start-of-proof {
font-weight: bold;
text-decoration: underline;
margin-right: 10px;
}
/* Strong, Emphasis */
em,
strong {
text-shadow:
0px 1px 0px #FFF;
}
strong {
color: Maroon;
}
em {
color: #008080;
font-weight: bold;
}
/* Custom link style */
.markdown-body a:visited {
color: DarkBlue;
text-decoration: wavy underline;
}
.markdown-body a {
color: DarkBlue;
text-decoration: wavy underline;
}
.open-files-container li.selected a {
color: DarkBlue;
text-decoration: wavy underline;
}
.markdown-body a:hover {
color: #8B40C2;
}
/* remove one margin right element under comment */
#doc.comment-enabled.comment-inner {
margin-right: 0;
}
#doc.comment-enabled.comment-open-inner {
margin-right: 0;
}
.ui-infobar .btn.ui-edit {
color: DarkBlue;
background-color: beige;
}
/* Also removed comment icon */
.ui-comment-app .open-comments .btn.ui-open-comments {
display: none;
}
</style>