sqtracker/client/components/MarkdownBody.js at master · sixnine-dotdev/sqtracker · 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
69
70
71
72
73
74
75
76
77
78
79
80
import styled from "styled-components";
import css from "@styled-system/css";

const Body = styled.div(() =>
  css({
    color: "text",
    wordBreak: "break-word",
    fontSize: 2,
    "> * + *": {
      mt: 3,
    },
    "li > * + *": {
      mt: 3,
    },
    "h1, h2": {
      fontSize: 4,
    },
    "* + h1, * + h2, * + h3, * + h4, * + h5, * + h6": {
      mt: 4,
    },
    a: {
      wordBreak: "break-word",
    },
    "ul, ol": {
      ml: "20px",
    },
    blockquote: {
      borderLeft: "2px solid",
      borderColor: "primary",
      pl: 4,
    },
    img: {
      borderRadius: 1,
      my: 4,
      maxWidth: "100%",
      height: "auto",
      border: "1px solid",
      borderColor: "border",
    },
    video: {
      my: 4,
      borderRadius: 1,
      overflow: "hidden",
      fontSize: 0,
      border: "1px solid ",
      borderColor: "border",
    },
    hr: {
      border: 0,
      height: "1px",
      bg: "border",
    },
    table: {
      my: 4,
      width: "100%",
      bg: "transparent",
      thead: {
        bg: "sidebar",
        tr: {
          fontFamily: "body",
          fontWeight: "bold",
          textAlign: "left",
          lineHeight: 1.4,
        },
      },
    },
    "table, th, td": {
      border: "1px solid",
      borderColor: "border",
      borderCollapse: "collapse",
    },
    "th, td": {
      px: 4,
      py: 3,
      wordBreak: "normal",
    },
  })
);

export default Body;