software.frrobert.com Git - proportionaltomonofont/blob - assets/css/style.scss

   1 ---
   2 ---
   3
   4 @import "{{ site.theme }}";
   5
   6 @font-face {
   7   font-family: Comic Mono;
   8   font-weight: normal;
   9   src: url(../../ComicMono.ttf);
  10 }
  11
  12 @font-face {
  13   font-family: Comic Mono;
  14   font-weight: bold;
  15   src: url(../../ComicMono-Bold.ttf);
  16 }
  17
  18 // Colors are based on One Dark color scheme.
  19
  20 html, body, .markdown-body.comic-mono {
  21   background-color: #252423;
  22   color: #bbbbbb;
  23 }
  24
  25 .markdown-body.comic-mono {
  26   color: #bbbbbb;
  27   border-radius: 3px;
  28   font-family: Comic Mono, Cousine, monospace;
  29   -webkit-font-smoothing: antialiased;
  30   line-height: 1.45;
  31   overflow: auto;
  32   padding: 16px;
  33   max-width: 700px;
  34   @media (min-width: 960px) {
  35     max-width: 875px;
  36     font-size: 20px;
  37   }
  38   h1, h2, h3, p, li, pre {
  39     margin: 1.5em 0;
  40     padding: 0;
  41     font-size: 100%;
  42     line-height: 1.5em;
  43     border: none;
  44   }
  45   ul, ol {
  46     margin: 0;
  47     padding: 0;
  48     list-style-position: inside;
  49   }
  50   ul {
  51     list-style: none;
  52   }
  53   ul > li::before {
  54     content: '* ';
  55   }
  56   h1, h2 {
  57     color: #e06c75;
  58   }
  59   h1::before {
  60     content: '# ';
  61   }
  62   h2::before {
  63     content: '## ';
  64   }
  65   a {
  66     color: #61afef;
  67   }
  68   a::before {
  69     content: '[';
  70     color: #5c6370;
  71   }
  72   a::after {
  73     content: ']';
  74     color: #5c6370;
  75   }
  76   code, pre {
  77     font: inherit;
  78     padding: 0;
  79     background: none;
  80   }
  81   .highlight {
  82     background: none;
  83   }
  84   pre {
  85     &::before, &::after {
  86       content: '```';
  87       display: block;
  88       color: #5c6370;
  89     }
  90   }
  91   :not(pre) > code {
  92     &::before, &::after {
  93       content: '`';
  94     }
  95   }
  96   .highlight {
  97     .nn, .o {
  98       color: inherit;
  99     }
 100     .c {
 101       color: #5c6370;
 102     }
 103     .s {
 104       color: #98c379;
 105     }
 106     .kn, .k, .ow {
 107       color: #c678dd;
 108     }
 109     .mi, .mf, .na {
 110       color: #d19a66;
 111     }
 112     .nb {
 113       color: #56b6c2;
 114     }
 115     .nf {
 116       color: #61afef;
 117     }
 118     .nt {
 119       color: #e06c75;
 120     }
 121   }
 122 }
 123
 124 .website-hidden {
 125   display: none;
 126 }