---
# System prepended metadata

title: article theme
tags: [HackMDTheme]

---

{%hackmd @YuRen-tw/theorem-theme %}
<!--
  {%hackmd @YuRen-tw/article-theme %}
-->
<style>
  :root {
    --margin-between: 16px;
    --box-padding: 12px;
    --font-size: 16px;
    --br-space-width: 0;
    
    /* color */
    --color-main: #fdc565;
    --color-light: #f6b763;
    --color-dark: #917254;
    --color-grey: #61574c;
    --color-alpha: rgb(253 197 101 / .2);
    
    /* theorem-theme */
    --thm-margin: var(--margin-between);
    --thm-padding-box: var(--box-padding);
    --thm-background-color: var(--color-alpha);
    --thm-outline-color: var(--color-main);
  }
  .markdown-body[lang^="en-"] {
    --br-space-width: 4px;
  }
  
  /* counters */
  body {
    counter-reset: section;
  }
  h2 {
    counter-increment: section;
    counter-reset: subsection theorem;
  }
  h3 {
    counter-increment: subsection;
  }
  
  /* .invisible-box */
  .invisible-box {
    position: absolute;
    pointer-events: none;
    opacity: 0;
  }
  
  /* h1 樣式 */
  .markdown-body h1 {
    padding-bottom: 0;
    border: none;
    text-align: center;
  }
  
  /* h2, h3 樣式 */
  .markdown-body :is(h2, h3, h4) {
    padding-bottom: 0;
    border: none;
    padding-left: .5em;
    box-shadow: -.5em 0 var(--color-main);
  }
  .markdown-body :is(h2, h3)::before {
    margin-right: .5em;
    color: var(--color-grey);
    font-weight: 900;
  } 
  .markdown-body h2::before {
    content: counter(section);
  } 
  .markdown-body h3::before {
    content: counter(section) "-" counter(subsection);
  }
  
  /* 內文樣式設定 */
  .markdown-body p {
    line-height: 1.8;
  }
  
  /* 以縮排區別段落，而不是空行 */
  .markdown-body p {
    /* text-indent: 2ic; */
    text-indent: calc(2 * var(--font-size));
  }
  .markdown-body p ul,
  .markdown-body p ol,
  .markdown-body p .mathjax {
    text-indent: 0;
  }
  .markdown-body p:has(+ p) {
    margin-bottom: 0;
  }
  .markdown-body p:has(+ ul) {
    margin-bottom: 8px;
  }
  
  /* 去除換行 */
  br {
    display: none;
    /**
    position: absolute;
    /**/
    /**
    content: '';
    margin-right: -.25em;
    /**/
  }
  br + span:not(.mathjax),
  br + span.mathjax > mjx-container:not([display="true"]) {
    margin-inline-start: var(--br-space-width);
  }
  .markdown-body p {
    font-size: 0;
  }
  .markdown-body p > :not(p) {
    font-size: var(--font-size);
  }
  .markdown-body p > code {
    font-size: calc(var(--font-size) * .85);
  }
  
  /* blockquote */
  .markdown-body blockquote {
    margin: var(--box-padding) var(--font-size);
    padding: 0 var(--font-size);
    border: none;
    color: unset;
    box-shadow: -.25em 0 var(--color-dark);
  }
  .markdown-body blockquote p:only-child {
    text-indent: 0;
  }
  
  /* pre code */
  .markdown-body pre code .gutter.linenumber {
    border-right-color: var(--color-main) !important;
  }
  
  /* table */
  .markdown-body table {
    display: table;
    margin-left: auto;
    margin-right: auto;
    width: unset;
  }
  .markdown-body table thead tr {
    border-bottom: 2px solid var(--color-main) !important;
  }
  .markdown-body table tr {
    border-top: unset !important;
    background: unset !important;
  }
  .markdown-body table tr:nth-child(2n) {
    background: var(--color-alpha) !important;
  }
  .markdown-body table :is(th, td) {
    border: unset;
  }
  .markdown-body table :is(th, td):not(:first-child) {
    border-left: 1px solid var(--color-dark) !important;
  }
</style>