blog-fs/pages/articles/article.module.css

.articleDetail {
}
.article {
  @apply bg-gray-50 m-2 overflow-hidden rounded-xl my-6;

  :global(.dark) & {
    @apply bg-gray-800;
  }
  & > header {
    @apply my-8 mx-4;
    h1 {
      @apply text-2xl font-medium;

      :global(.dark) & {
        @apply text-gray-200;
      }
    }
    time {
      @apply text-sm text-gray-500;
      :global(.dark) & {
        @apply text-gray-400;
      }
    }
  }
  & > div {
    @apply my-4 leading-8 mx-4 lg:mx-6 xl:mx-8 text-justify;

    h1,
    h2,
    h3,
    h4 {
      @apply text-red-400;

      :global(.dark) & {
        @apply text-white;
      }
    }

    h1 {
      @apply hidden;
    }

    h2 {
      @apply text-2xl mt-8 mb-4 font-semibold border-b border-red-500 leading-10;

      :global(.dark) & {
        @apply border-green-700;
      }
    }

    h3 {
      @apply text-xl mt-6 mb-2 font-light;
    }

    h4 {
      @apply mt-4 font-medium;
    }

    p {
      @apply my-4;
    }

    ul {
      @apply pl-4;

      li {
        @apply list-disc;
      }
    }
    ol {
      @apply pl-4;

      li {
        @apply list-decimal;
      }
    }

    a {
      @apply text-red-400 underline;

      :global(.dark) & {
        @apply text-green-500;
      }
      &:hover {
        @apply filter saturate-200;
      }
    }

    code,
    pre {
      @apply font-mono rounded;
    }

    code:not(:global(.hljs)) {
      @apply p-1 text-red-500 bg-red-100;
      :global(.dark) & {
        @apply bg-green-800 bg-opacity-20 text-green-400;
      }
    }

    :global {
      :not(:global(.dark)) & {
        pre code.hljs {
          display: block;
          overflow-x: auto;
          padding: 1em;
        }

        code.hljs {
          padding: 3px 5px;
        }

        .hljs {
          color: #68615e;
          background: #f1efee;
        }

        .hljs ::selection {
          color: #a8a19f;
        }

        /* purposely do not highlight these things */
        .hljs-formula,
        .hljs-params,
        .hljs-property {
        }

        /* base03 - #9c9491 -  Comments, Invisibles, Line Highlighting */
        .hljs-comment {
          color: #9c9491;
        }

        /* base04 - #766e6b -  Dark Foreground (Used for status bars) */
        .hljs-tag {
          color: #766e6b;
        }

        /* base05 - #68615e -  Default Foreground, Caret, Delimiters, Operators */
        .hljs-subst,
        .hljs-punctuation,
        .hljs-operator {
          color: #68615e;
        }

        .hljs-operator {
          opacity: 0.7;
        }

        /* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
        .hljs-bullet,
        .hljs-variable,
        .hljs-template-variable,
        .hljs-selector-tag,
        .hljs-name,
        .hljs-deletion {
          color: #f22c40;
        }

        /* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
        .hljs-symbol,
        .hljs-number,
        .hljs-link,
        .hljs-attr,
        .hljs-variable.constant_,
        .hljs-literal {
          color: #df5320;
        }

        /* base0A - Classes, Markup Bold, Search Text Background */
        .hljs-title,
        .hljs-class .hljs-title,
        .hljs-title.class_ {
          color: #c38418;
        }

        .hljs-strong {
          font-weight: bold;
          color: #c38418;
        }

        /* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
        .hljs-code,
        .hljs-addition,
        .hljs-title.class_.inherited__,
        .hljs-string {
          color: #7b9726;
        }

        /* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
        .hljs-built_in,
        .hljs-doctag,
        .hljs-quote,
        .hljs-keyword.hljs-atrule,
        .hljs-regexp {
          color: #3d97b8;
        }

        /* base0D - Functions, Methods, Attribute IDs, Headings */
        .hljs-function .hljs-title,
        .hljs-attribute,
        .ruby .hljs-property,
        .hljs-title.function_,
        .hljs-section {
          color: #407ee7;
        }

        /* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
        .hljs-type,
        .hljs-template-tag,
        .diff .hljs-meta,
        .hljs-keyword {
          color: #6666ea;
        }
        .hljs-emphasis {
          color: #6666ea;
          font-style: italic;
        }

        /* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
        .hljs-meta,
        .hljs-meta .hljs-keyword,
        .hljs-meta .hljs-string {
          color: #c33ff3;
        }

        .hljs-meta .hljs-keyword,
        .hljs-meta-keyword {
          font-weight: bold;
        }
      }
      :global(.dark) & {
        pre code.hljs {
          display: block;
          overflow-x: auto;
          padding: 1em;
        }

        code.hljs {
          padding: 3px 5px;
        }

        .hljs {
          color: #929181;
          background: #22221b;
        }

        .hljs ::selection {
          color: #5f5e4e;
        }

        /* purposely do not highlight these things */
        .hljs-formula,
        .hljs-params,
        .hljs-property {
        }

        /* base03 - #6c6b5a -  Comments, Invisibles, Line Highlighting */
        .hljs-comment {
          color: #6c6b5a;
        }

        /* base04 - #878573 -  Dark Foreground (Used for status bars) */
        .hljs-tag {
          color: #878573;
        }

        /* base05 - #929181 -  Default Foreground, Caret, Delimiters, Operators */
        .hljs-subst,
        .hljs-punctuation,
        .hljs-operator {
          color: #929181;
        }

        .hljs-operator {
          opacity: 0.7;
        }

        /* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
        .hljs-bullet,
        .hljs-variable,
        .hljs-template-variable,
        .hljs-selector-tag,
        .hljs-name,
        .hljs-deletion {
          color: #ba6236;
        }

        /* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
        .hljs-symbol,
        .hljs-number,
        .hljs-link,
        .hljs-attr,
        .hljs-variable.constant_,
        .hljs-literal {
          color: #ae7313;
        }

        /* base0A - Classes, Markup Bold, Search Text Background */
        .hljs-title,
        .hljs-class .hljs-title,
        .hljs-title.class_ {
          color: #a5980d;
        }

        .hljs-strong {
          font-weight: bold;
          color: #a5980d;
        }

        /* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
        .hljs-code,
        .hljs-addition,
        .hljs-title.class_.inherited__,
        .hljs-string {
          color: #7d9726;
        }

        /* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
        .hljs-built_in,
        .hljs-doctag, /* guessing */
        .hljs-quote,
        .hljs-keyword.hljs-atrule,
        .hljs-regexp {
          color: #5b9d48;
        }

        /* base0D - Functions, Methods, Attribute IDs, Headings */
        .hljs-function .hljs-title,
        .hljs-attribute,
        .ruby .hljs-property,
        .hljs-title.function_,
        .hljs-section {
          color: #36a166;
        }

        /* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
        .hljs-type,
        .hljs-template-tag,
        .diff .hljs-meta,
        .hljs-keyword {
          color: #5f9182;
        }
        .hljs-emphasis {
          color: #5f9182;
          font-style: italic;
        }

        /* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
        .hljs-meta,
        .hljs-meta .hljs-keyword,
        .hljs-meta .hljs-string {
          color: #9d6c7c;
        }

        .hljs-meta .hljs-keyword,
        .hljs-meta-keyword {
          font-weight: bold;
        }
      }
    }
  }
}

.articleEnd {
  @apply text-center text-gray-400 text-sm my-6;

  &:before,
  &:after {
    content: "※";
    @apply mx-4 text-xs align-text-top;
  }
}