File size: 2,009 Bytes
5301c48
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
98
99
100
101
102
103
.blogContent {
  @apply prose prose-xl prose-pink max-w-none;
}

.blogContent p {
  @apply text-xl leading-relaxed mb-8 text-gray-700;
}

@media (max-width: 640px) {
  .blogContent p {
    @apply text-lg leading-relaxed;
  }
}

.blogContent h2 {
  @apply text-4xl font-bold mt-20 mb-8 text-gray-900;
}

.blogContent h3 {
  @apply text-3xl font-semibold mt-16 mb-6 text-gray-900;
}

.blogContent a {
  @apply text-[#DB2777] underline decoration-[#DB2777]/30 underline-offset-2 hover:decoration-[#DB2777] transition-colors;
}

.blogContent ul,
.blogContent ol {
  @apply my-8 pl-6 space-y-3 text-gray-700 text-xl;
}

@media (max-width: 640px) {
  .blogContent ul,
  .blogContent ol {
    @apply text-lg;
  }
}

.blogContent li {
  @apply text-gray-700 leading-relaxed;
}

.blogContent img {
  @apply rounded-xl my-12 shadow-md mx-auto;
}

.blogContent figure {
  @apply my-16;
}

.blogContent figcaption {
  @apply mt-4 text-sm text-gray-500 italic text-center max-w-2xl mx-auto;
}

.blogContent blockquote {
  @apply italic border-l-4 border-[#DB2777] pl-8 my-16 text-gray-600 bg-pink-50/50 py-6 pr-6 rounded-r-lg text-xl;
}

@media (max-width: 640px) {
  .blogContent blockquote {
    @apply text-lg py-4 pr-4;
  }
}

.blogContent pre {
  @apply my-12 rounded-xl shadow-md bg-gray-900 overflow-x-auto;
}

.blogContent code {
  @apply text-[#DB2777] bg-pink-50 px-2 py-0.5 rounded-md text-base font-normal;
}

.blogContent pre code {
  @apply bg-transparent text-inherit p-0 text-base text-gray-200;
}

.blogContent strong {
  @apply text-gray-900 font-semibold;
}

.blogContent em {
  @apply text-gray-700;
}

.blogContent hr {
  @apply my-16 border-gray-200;
}

.blogContent table {
  @apply my-8 w-full border-collapse;
}

.blogContent th {
  @apply bg-gray-50 text-left py-3 px-4 font-semibold text-gray-900 border-b border-gray-200;
}

.blogContent td {
  @apply py-3 px-4 border-b border-gray-200 text-gray-700;
}

.blogContent iframe {
  @apply my-12 rounded-xl shadow-md mx-auto w-full aspect-video;
}