sana137.in

Sana's gatsbyjs-based blog
git clone http://git.hanabi.in/repos/sana137.in.git
Log | Files | Refs | README | LICENSE

code.highlighter.css (2941B)

      1 /**
      2  * Based on copypasta from Remy Bach and Sarah Drasner
      3  */
      4 code[class*='language-'],
      5 pre[class*='language-'] {
      6   background: none;
      7   color: white;
      8   font-family: SF Mono, Menlo, Monaco, source-code-pro, Courier New, monospace;
      9   font-feature-settings: normal;
     10   line-height: 1.5;
     11   margin-bottom: 0;
     12   text-align: left;
     13   white-space: pre;
     14   word-break: normal;
     15   word-spacing: normal;
     16   word-wrap: normal;
     17 
     18   -moz-tab-size: 4;
     19   -o-tab-size: 4;
     20   tab-size: 4;
     21 
     22   -webkit-hyphens: none;
     23   -moz-hyphens: none;
     24   -ms-hyphens: none;
     25   hyphens: none;
     26 }
     27 
     28 /* Code blocks */
     29 pre[class*='language-'] {
     30   overflow: auto;
     31   padding: 1.3125rem;
     32 }
     33 
     34 pre[class*='language-']::-moz-selection {
     35   /* Firefox */
     36   background: hsl(207, 4%, 16%);
     37 }
     38 
     39 pre[class*='language-']::selection {
     40   /* Safari */
     41   background: hsl(207, 4%, 16%);
     42 }
     43 
     44 /* Text Selection colour */
     45 pre[class*='language-']::-moz-selection,
     46 pre[class*='language-'] ::-moz-selection {
     47   text-shadow: none;
     48   background: hsla(0, 0%, 100%, 0.15);
     49 }
     50 
     51 pre[class*='language-']::selection,
     52 pre[class*='language-'] ::selection {
     53   text-shadow: none;
     54   background: hsla(0, 0%, 100%, 0.15);
     55 }
     56 
     57 /* Inline code */
     58 :not(pre) > code[class*='language-'] {
     59   border-radius: 0.3em;
     60   background: #ddd;
     61   color: #1a1a1a;
     62   padding: 0.15em 0.2em 0.05em;
     63   white-space: normal;
     64 }
     65 
     66 .token.attr-name {
     67   color: rgb(143, 212, 52);
     68   font-style: italic;
     69 }
     70 
     71 .token.comment {
     72   color: rgb(128, 147, 147);
     73   font-style: italic;
     74 }
     75 
     76 .token.string,
     77 .token.url {
     78   color: rgb(248, 184, 128);
     79 }
     80 
     81 .token.variable {
     82   color: skyblue;
     83 }
     84 
     85 .token.number {
     86   color: rgb(223, 130, 102);
     87 }
     88 
     89 .token.builtin,
     90 .token.char,
     91 .token.constant {
     92   color: rgb(165, 228, 83);
     93 }
     94 .token.function {
     95   color: rgb(130, 170, 255);
     96 }
     97 
     98 .token.punctuation {
     99   color: ghostwhite;
    100 }
    101 
    102 .token.selector,
    103 .token.doctype,
    104 .token.script-punctuation {
    105   color: rgb(199, 146, 234);
    106   font-style: 'italic';
    107 }
    108 
    109 .token.class-name {
    110   color: sandybrown;
    111 }
    112 
    113 .token.tag {
    114   color: aqua;
    115 }
    116 .token.operator {
    117   color: #f38bb3;
    118 }
    119 .token.keyword {
    120   color: #c774ee;
    121   font-style: italic;
    122   font-weight: 700;
    123 }
    124 
    125 .token.boolean {
    126   color: rgb(236, 79, 111);
    127 }
    128 
    129 .token.parameter {
    130   font-style: oblique;
    131 }
    132 
    133 .token.property {
    134   color: rgb(128, 203, 196);
    135 }
    136 
    137 .token.namespace {
    138   color: rgb(178, 204, 214);
    139 }
    140 
    141 pre[data-line] {
    142   padding: 1em 0 1em 3em;
    143   position: relative;
    144 }
    145 
    146 .gatsby-highlight-code-line {
    147   background-color: #4b4b4b;
    148   display: block;
    149   margin-right: -1.3125rem;
    150   margin-left: -1.3125rem;
    151   padding-right: 1em;
    152   padding-left: 0.8em;
    153   border-left: 0.25em solid #ffd16b;
    154 }
    155 
    156 .gatsby-highlight {
    157   width: 100%;
    158   margin-bottom: 1.75rem;
    159   margin-left: -1.3125rem;
    160   margin-right: -1.3125rem;
    161   border-radius: 10px;
    162   background: #242323;
    163   -webkit-overflow-scrolling: touch;
    164   overflow: auto;
    165 }
    166 
    167 @media (max-width: 672px) {
    168   .gatsby-highlight {
    169     border-radius: 0;
    170   }
    171 }
    172 
    173 .gatsby-highlight pre[class*='language-'] {
    174   float: left;
    175   min-width: 100%;
    176 }