<script lang="ts">
import Navbar from "$lib/components/Navbar.svelte";
</script>

<Navbar>
  <div slot="title">
    <a href="/blog">Блог</a>
  </div>
</Navbar>

<article class="px-2 py-8 md:px-8 max-w-[980px] mx-auto text-lg">
  <slot />
</article>

<style lang="postcss">
:global(h1) {
  @apply text-5xl font-semibold my-6;
}

:global(h2) {
  @apply text-3xl my-5;
}

:global(h3) {
  @apply text-2xl my-4;
}

:global(h4) {
  @apply text-xl my-3;
}

:global(pre) {
  @apply p-4 !my-4 overflow-auto rounded-lg relative;
  max-width: calc(100vw - 16px);
}

:global(pre code) {
  min-width: calc(100% - 16px);
  @apply p-0 relative inline-block;

  &:has(.diff) {
    @apply ml-4;
  }
}

:global(code) {
  background: #263238;
  color: #C3E88D;
  @apply px-2 py-0.5 rounded;
}

:global(code .highlighted) {
  background: #334752;
  display: inline-block;
  width: calc(100% + 32px);
  @apply px-4 -mx-4;
}

:global(code .diff.add) {
  background: #526a4f;
  display: inline-block;
  width: calc(100% + 48px);
  @apply pr-4 -mr-4 pl-8 -ml-8;

  &:before {
    position: absolute;
    left: -22px;
    content: '+';
  }
}
</style>
