main.css

:root {
  --light-bg: #feebc8;
  --dark-bg: gray;
  --code-bg: #272822;
  --code-text: #f8f8f2;
  --linear-from: #ed8936;
  --linear-to: #f6ad55;
  --bg-color: var(--light-bg);
}
:root.dark {
  --linear-from: #f6ad55;
  --linear-to: var(--code-bg);
  --bg-color: var(--dark-bg);
}
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  @apply h-full;
}

body {
  max-width: 800px;
  @apply mx-auto;
  background-color: var(--bg-color);
}
main .meta {
  @apply mt-0;
}
main a {
  @apply border-b border-orange-300 text-orange-700 hover:bg-orange-600 hover:text-white transition-colors duration-300 ease-out;
}

ol,
ul {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 2em;
}

ol {
  list-style: decimal;
}

ul {
  list-style: circle;
}

figure {
  @apply text-center;
}
figure img,
figure svg {
  @apply block;
  @apply mx-auto;
}

figcaption {
  font-size: 0.9em;
}

pre code {
  border: 0;
  padding: 0;
  color: inherit;
  background: inherit;
}
code {
  padding: 1px 2px;
  background-color: rgba(0, 0, 0, 0.07);
  overflow-wrap: break-word;
  word-wrap: break-word;
}
code[class*="language-"],
pre {
  font-size: 14px;
  line-height: 1.375;
  direction: ltr;
  white-space: pre;
  tab-size: 2;
  hyphens: none;
  background-color: var(--code-bg);
  color: var(--code-text);
}

pre {
  padding: 1.5em 1em;
  margin: 0.5em -0.5rem;
  overflow: auto;
}

@media screen and (max-width: 425px) {
  pre {
    padding: 1.5em 0.5rem;
    margin: 0.5em -0.5rem;
  }
}
.post-url {
  @apply border-b;
  @apply border-orange-300;
  @apply text-orange-700;
  @apply hover:bg-orange-600;
  @apply hover:text-white;
}
.post-url,
.post-url code {
  @apply transition-colors;
  @apply duration-300;
  @apply ease-out;
}
.post-url code {
  @apply p-0;
  @apply bg-orange-50;
}
.post-url:hover code {
  @apply bg-orange-600;
}

:not(pre) > code[class*="language-"] {
  padding: 0.1em;
  border-radius: 0.3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #75715e;
}
.token.punctuation {
  color: #f8f8f2;
}
.token.namespace {
  opacity: 0.7;
}
.token.operator,
.token.boolean,
.token.number {
  color: #fd971f;
}
.token.property {
  color: #f4bf75;
}
.token.tag {
  color: #66d9ef;
}
.token.string {
  color: #a1efe4;
}
.token.selector {
  color: #ae81ff;
}
.token.attr-name {
  color: #fd971f;
}
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #a1efe4;
}
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit {
  color: #a6e22e;
}
.token.statement,
.token.regex,
.token.atrule {
  color: #a1efe4;
}
.token.placeholder,
.token.variable {
  color: #66d9ef;
}
.token.deleted {
  text-decoration: line-through;
}
.token.inserted {
  border-bottom: 1px dotted #f9f8f5;
  text-decoration: none;
}
.token.italic {
  font-style: italic;
}
.token.important,
.token.bold {
  font-weight: bold;
}
.token.important {
  color: #f92672;
}
.token.entity {
  cursor: help;
}
pre > code.highlight {
  outline: 0.4em solid #f92672;
  outline-offset: 0.4em;
}

.article-info {
  border-color: #f56565;
}

.direct-link {
  @apply invisible;
}

h4:hover .direct-link,
h3:hover .direct-link,
h2:hover .direct-link {
  @apply visible;
}

[data-tag="translate"] {
  @apply bg-blue-600;
}
[data-tag="translate"]:hover {
  @apply bg-blue-500;
}

[data-tag="develop"] {
  @apply bg-green-600;
}

[data-tag="develop"]:hover {
  @apply bg-green-500;
}
[data-tag="cli"] {
  @apply bg-red-600;
}

[data-tag="cli"]:hover {
  @apply bg-red-500;
}
[data-tag="internals"] {
  @apply bg-pink-600;
}

[data-tag="internals"]:hover {
  @apply bg-pink-500;
}

[data-tag="v8"] {
  background-color: #4285f4;
}

[data-tag="v8"]:hover {
  background-color: #5189d6;
}

#header {
  height: 64px;
  background: linear-gradient(45deg, var(--linear-from), var(--linear-to));
}

#header h1 {
  line-height: 64px;
}

@media screen and (max-width: 425px) {
  #header {
    height: 32px;
  }
  #header h1 {
    font-size: 20px;
    line-height: 32px;
  }
}

#footer {
  min-height: 12em;
  padding-right: 12em;
  background-size: 10em;
  background-repeat: no-repeat;
  background-image: url("/img/jandan.svg");
  background-position-x: right;
  background-position-y: center;
  background-color: #ed8936;
}

@media screen and (max-width: 425px) {
  #footer {
    padding-right: 6em;
    background-size: 6em;
  }
}

p {
  margin-block-start: 1em;
  margin-block-end: 1em;
}

@layer base {
  h1 {
    @apply text-2xl font-bold;
  }
  h2 {
    @apply text-xl font-bold;
  }
  h3 {
    @apply text-lg font-semibold;
  }
  h4 {
    @apply text-base font-medium;
  }
}