.markdown {
@apply overflow-hidden;
img {
@apply inline-block;
&.ally-bg {
@apply bg-gray-200 rounded p-2;
&.avatar {
@apply p-0 rounded-lg;
}
}
&[align="left"] {
@apply mr-5;
}
&[align="right"] {
@apply ml-5;
}
}
a {
@apply text-purple-500;
&:hover {
@apply text-purple-400;
}
}
h1 {
@apply text-3xl mt-8 mb-4 text-gray-600;
@media (max-width: 640px) {
@apply text-2xl;
}
}
h2 {
@apply text-2xl;
@media (max-width: 640px) {
@apply text-xl;
}
}
h3 {
@apply text-xl;
@media (max-width: 640px) {
@apply text-lg;
}
}
h1, h2 {
@apply pb-2 border-b border-gray-800;
}
h2, h3 {
@apply mt-8 mb-3 text-gray-500;
}
h4, h5, h6 {
@apply text-lg mt-6;
@media (max-width: 640px) {
@apply text-base;
}
}
h1, h2, h3, h4, h5, h6 {
@apply flex flex-wrap items-center whitespace-pre-wrap font-bold;
&:first-child {
@apply mt-0;
}
&[align="center"] {
@apply justify-center;
}
&[align="right"] {
@apply justify-end;
}
&:hover {
.anchor {
@apply visible;
}
}
}
p {
@apply my-4;
}
table {
border-collapse: collapse;
}
tr {
&:nth-child(2n) {
@apply bg-gray-850;
}
}
td, th {
@apply border border-gray-800 p-2;
}
hr {
@apply border-gray-800;
}
ul {
@apply list-disc;
}
ol {
@apply list-decimal;
}
ul, ol {
@apply my-2 pl-2;
}
li {
@apply ml-6;
}
pre {
@apply text-white bg-gray-850 rounded p-4 my-4 overflow-x-auto;
font-size: 14px;
}
code {
@apply text-white bg-gray-850 rounded px-2 py-1 break-words;
}
blockquote {
@apply pl-4 my-4 border-l-4 border-purple-700 text-gray-500;
p {
&:first-child {
@apply mt-0;
}
&:last-child {
@apply mb-0;
}
}
}
.markdown-body {
@apply p-0;
}
.anchor {
@apply invisible text-gray-600 pr-1 -ml-5 h-6 flex items-center;
svg {
@apply fill-current;
}
}
}