robertorlinski.pl/components/CodeBlock/CodeBlock.tsx at main · robert-orlinski/robertorlinski.pl · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import styled from 'styled-components';

import { to } from 'Devices';

const CodeBlock = styled.pre`
  width: 100%;

  margin: 0.3rem 0 1.8rem;
  border-radius: 6px;
  overflow: auto;

  color: #f8f8f2;
  background: #2e3440;

  font-size: 0.85rem;
  line-height: 1.5;

  & > code {
    display: block;
    padding: 1.4rem;
  }

  @media ${to.phoneL} {
    white-space: pre-wrap;
  }

  .comment,
  .prolog,
  .cdata {
    color: #636f88;
  }

  .namespace {
    opacity: 0.7;
  }

  .punctuation,
  .property,
  .tag,
  .constant,
  .symbol,
  .deleted,
  .boolean,
  .operator,
  .entity,
  .url,
  .language-css .string,
  .style .string,
  .variable,
  .keyword {
    color: #81a1c1;
  }

  .number {
    color: #b48ead;
  }

  .selector,
  .attr-name,
  .string,
  .char,
  .builtin,
  .inserted {
    color: #a3be8c;
  }

  .atrule,
  .attr-value,
  .function,
  .class-name {
    color: #88c0d0;
  }

  .regex,
  .important {
    color: #ebcb8b;
  }

  .important,
  .bold {
    font-weight: bold;
  }

  .italic {
    font-style: italic;
  }

  .entity {
    cursor: help;
  }

  .language-bash .variable .variable {
    color: #fff;
  }
`;

export default CodeBlock;