nicco.io/src/routes/about.svelte

<script context="module">
  import { getOne } from '../lib/wp'

  export async function preload() {
    const data = await getOne('pages', { slug: 'about' })
    return { data }
  }
</script>

<script>
  import SimplePage from '../components/SimplePage.svelte'

  export let data
</script>

<style>
  img {
    position: absolute;
    z-index: -1;
    object-fit: contain;
    width: 24vw;
    height: 30vw;
    left: 35em;
    top: 12em;
    max-width: 25em;
  }

  @media (max-width: 55em) {
    img {
      position: initial;
      width: 100%;
      height: 100%;
      object-position: right;
      max-height: 20em;
      margin-top: 4em;
    }
  }
</style>

<svelte:head>
  <title>About</title>
</svelte:head>

<SimplePage title="About">
  {@html data.content}
  <img src="/images/about.jpg" alt="decoration" />
</SimplePage>