reactiflux.com/src/components/Layout/MarkdownStyles.js at 086ea074e3af3b28498ec982802e75d9d4539f2e · reactiflux/reactiflux.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import { createGlobalStyle } from "styled-components";

import { foreground, pink } from "@utils/theme";

export const MarkdownStyles = createGlobalStyle`
.fonts-fallback .markdown h1 {
  letter-spacing: -0.3rem;
}
.fonts-fallback .markdown {
  letter-spacing: 0.1rem;
  line-height: 1.175;
  // word-spacing: 0.0625rem;
}
.markdown {
  h1 {
    color: ${foreground};
    font-family: 'Space Mono', monospace;
    font-size: 5rem;
    letter-spacing: -0.3rem;
    line-height: 1.1;
  }
  h2,h3,h4 {
    color: ${foreground};
  }
  a {
    text-decoration: none;
    color: ${pink};
    &:hover {
      text-decoration: underline;
    }
  }
  code {
    font-size: 80%;
  }
  a, code, strong {
    white-space: pre-wrap;
    word-break: break-word;
    word-wrap: break-word;
  }
  ul {
    list-style: none;
  }
  li > details {
    display: block;
  }
  summary {
    cursor: pointer;
    margin-left: -2rem;
    user-select: none;
    display: block;
    &::marker,
    &::-webkit-details-marker {
      display: none;
    }
    &::before {
      content: '▶ ';
      display: inline;
      font-size: 0.75em;
      transition: transform 0.15s ease;
      display: inline-block;
      width: 1em;
    }
  }
  details[open] > summary::before {
    transform: rotate(90deg);
  }
}
`;