kitten.sh
1import styled from 'styled-components';
2
3export const Markdown = styled.article`
4 width: 60vw;
5
6 @media (max-width: 768px) {
7 width: 75vw;
8 }
9
10 h1 {
11 font-size: 3.4rem;
12 margin: 0 0 2rem;
13
14 @media (min-width: 1024px) {
15 font-size: 4.8rem;
16 }
17
18 @media (max-width: 768px) {
19 margin: 6rem 0 2rem;
20 }
21 }
22
23 h2 {
24 font-size: 2.8rem;
25 margin: 6rem 0 2rem;
26 @media (min-width: 1024px) {
27 font-size: 2.5rem;
28 }
29 }
30
31 h3 {
32 font-size: 1.8rem;
33 margin: 2rem 0;
34 @media (min-width: 1024px) {
35 font-size: 2rem;
36 }
37 }
38
39 table {
40 border-collapse: collapse;
41 }
42
43 td {
44 height: 50px;
45 text-align: left;
46 }
47
48 td,
49 th {
50 padding: 15px;
51 }
52
53 th {
54 text-align: center;
55 }
56
57 table,
58 th,
59 td {
60 font-size: 1.7rem;
61 border: 1px solid lightgrey;
62
63 tr:nth-child(even) {
64 background-color: #f2f2f2;
65 }
66 }
67
68 pre {
69 background-color: #efefef;
70 padding: 2rem;
71 color: #333;
72 }
73
74 pre > code {
75 color: #333;
76 }
77
78 p {
79 font-size: 1.7rem;
80 line-height: 1.3;
81 }
82
83 p code {
84 border: 1px solid lightgrey;
85 opacity: 0.8;
86 padding: 0.5rem;
87 font-size: 1.5rem;
88 margin: 0 0.5rem 0 0.5rem;
89 }
90
91 blockquote {
92 margin: 0 0.2rem;
93 padding: 0 1.8rem;
94 border-left: 3px solid #255db0;
95 }
96
97 li {
98 font-size: 1.7rem;
99 line-height: 1.3;
100 padding: 0.5rem;
101
102 @media (max-width: 768px) {
103 margin-left: -2rem;
104 }
105 }
106
107 li code {
108 border: 1px solid lightgrey;
109 opacity: 0.8;
110 padding: 0.5rem;
111 font-size: 1.5rem;
112 margin: 0 0.5rem 0 0.5rem;
113 }
114
115 a {
116 color: #895160;
117
118 &:target {
119 display: block;
120 position: relative;
121 top: -60px;
122 visibility: hidden;
123 }
124 &:hover {
125 color: black;
126 }
127 }
128`;