blog-markdown.module.css

/* purgecss start ignore */
.markdown {
  @apply leading-relaxed text-gray-800 text-base;
}

/* 
  Add fake margin to offset the nav. This technique is stolen right from the Tailwind docs 
  @see https://tailwindcss.com/docs/customizing-colors/#app
*/
.markdown > h1:before,
.markdown > a > h1:before,
.markdown > h2:before,
.markdown > a > h2:before,
.markdown > h3:before,
.markdown > a > h3:before,
.markdown > h4:before,
.markdown > a > h4:before,
.markdown > h5:before,
.markdown > a > h5:before,
.markdown > h6:before,
.markdown > a > h6:before {
  display: block;
  height: 6rem;
  margin-top: -6rem;
  visibility: hidden;
  content: '';
}

.markdown > h1,
.markdown > a > h1 {
  @apply mb-6 text-3xl lg:text-4xl font-semibold leading-snug tracking-tighter text-gray-900;
}

.markdown > h2,
.markdown > a > h2 {
  @apply mt-12 mb-4 text-2xl font-semibold  text-gray-900;
}

.markdown > h2 code,
.markdown > a > h2 code {
  @apply text-xl;
}

.markdown > h3,
.markdown > a > h3 {
  @apply mt-8 mb-3 text-xl font-semibold  text-gray-900;
}

.markdown > h3 code,
.markdown > a > h3 code {
  @apply text-lg;
}

.markdown > h4,
.markdown > a > h4 {
  @apply pt-8 mb-3 text-lg font-semibold  text-gray-900;
}

.markdown > h4 code,
.markdown > a > h4 code {
  @apply text-base;
}

.markdown > p > a,
.markdown > ul > li > a,
.markdown > ol > li > a,
.markdown > table > tbody > tr > td > a {
  @apply text-blue-600 font-semibold transition-colors duration-150 ease-out;
}

.markdown > p > a:hover,
.markdown > ul > li > a:hover,
.markdown > ol > li > a:hover,
.markdown > table > tbody > tr > td > a:hover {
  @apply text-blue-800 transition-colors duration-150 ease-out;
}

.markdown strong {
  @apply font-bold;
}

.markdown > p,
.markdown > ul,
.markdown > ol,
.markdown > blockquote,
.markdown > pre,
.markdown > div > .code-block {
  @apply mb-4;
}

.markdown > ul,
.markdown > ul > li > ul {
  @apply ml-8 list-disc;
}

.markdown > ol {
  @apply ml-8 list-decimal;
}

.markdown > pre,
.markdown > div > .code-block > pre {
  color: #f8f8f2;
  overflow: auto;
}

.markdown > table {
  @apply mb-6 w-full text-gray-700 text-sm;
}

.markdown > table > thead > tr {
  @apply border-b border-t;
}

.markdown > table > thead > tr > th {
  @apply px-3 py-2 text-left text-sm font-bold bg-gray-100 text-gray-700;
}

.markdown > table > tbody > tr {
  @apply border-b;
}

.markdown > table > tbody > tr > td {
  @apply p-3;
}

.markdown > :not(pre):not(h3) > code,
.markdown > ul > li > code,
.markdown > blockquote > code,
.markdown > blockquote > p > code,
.markdown > ul > li > ul > li > code,
.markdown > ol > li > code,
.markdown > ol > li > ol > li > code,
.markdown > p a > code,
.markdown > table > tbody > tr > td:not(:first-child) > code {
  @apply bg-gray-100 rounded-md px-1  border border-gray-300 text-gray-900;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
  word-break: keep-all;
  font-size: 0.875em;
}

.markdown > table > tbody > tr > td:not(:first-child) > code {
  @apply text-xs;
}

.markdown > table > tbody > tr > td > a > code,
.markdown > table > tbody > tr > td > code {
  @apply text-sm;
}

.markdown > h2 > code {
  @apply text-xl;
}

.markdown > .markdown ul {
  @apply list-disc;
}

.markdown > hr {
  @apply my-6 block border-b;
}
.markdown pre {
  @apply p-3 rounded-lg  mb-6 overflow-y-scroll text-sm bg-gray-100;
  background: #292d3e;
}
/* Blockquotes */
.markdown blockquote {
  @apply p-3 bg-gray-100 mb-6 border border-gray-300 border-l-4 rounded-sm text-sm leading-5;
}
.markdown blockquote > p {
  @apply mb-0;
}

/* purgecss end ignore */