<script lang="ts">
import Navbar from "$lib/components/Navbar.svelte";
import { page } from '$app/stores';  
</script>

<Navbar>
  <div slot="title">
    {#if $page.url.pathname !== '/blog'}
      <a href="/blog">Назад</a>
    {/if}
  </div>
</Navbar>

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

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

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

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

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

:global(article ul) {
  margin-block: 16px;
}

:global(article ul li) {
  list-style-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23C3E88D%22%20d%3D%22M12%2021q-.425%200-.712-.288T11%2020v-5.6l-3.95%203.975q-.3.3-.712.3t-.713-.3t-.3-.712t.3-.713L9.6%2013H4q-.425%200-.712-.288T3%2012t.288-.712T4%2011h5.6L5.625%207.05q-.3-.3-.3-.712t.3-.713t.713-.3t.712.3L11%209.6V4q0-.425.288-.712T12%203t.713.288T13%204v5.6l3.95-3.975q.3-.3.713-.3t.712.3t.3.713t-.3.712L14.4%2011H20q.425%200%20.713.288T21%2012t-.288.713T20%2013h-5.6l3.975%203.95q.3.3.3.713t-.3.712t-.712.3t-.713-.3L13%2014.4V20q0%20.425-.288.713T12%2021%22%2F%3E%3C%2Fsvg%3E");
  list-style-position: outside;
  margin-left: 16px;
  margin-bottom: 8px;
}

:global(article ul li::marker) {
  margin-right: 16px;
}

:global(article img, article video) {
  margin-block: 24px;
  border-radius: 8px;
  overflow: hidden;
}

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

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

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

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

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

:global(article 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: '+';
  }
}

:global(article p) {
  text-align: justify;
}
</style>
