---
# System prepended metadata

title: A HackMD Math textbook CSS template
tags: [theme]

---

---
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>