blog/src/pages/404.astro

---
import LayoutBase from '@layouts/Base/index.astro'

const title = `I'm sorry Dave`
const description = `I'm afraid I can't do that`
---

<style>
  .wrapper {
    text-align: center;
    margin-bottom: calc(var(--spacer) * 4);
    min-height: 50vh;
  }

  .title {
    font-size: var(--font-size-h3);
    margin-top: 0;
    margin-bottom: calc(var(--spacer) / 4);
  }

  .text {
    font-size: var(--font-size-base);
    color: var(--brand-grey-light);
  }

  /* HAL needs a size */
  :root {
    --hal-size: 72px;
  }

  .hal9000 {
    width: var(--hal-size);
    height: var(--hal-size);
    border-radius: var(--hal-size);
    background: #444;
    padding: 1.5em;
    margin: var(--spacer) auto;
    position: relative;
    border: 4px solid #ccc;
    box-shadow: inset 0 0 10px #000;
  }

  /* // eye */
  .hal9000::before {
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 100%;
    display: block;
    background: red;
    box-shadow:
      0 0 5px red,
      0 0 10px red,
      0 0 15px red,
      0 0 20px red,
      0 0 25px red,
      0 0 30px red,
      0 0 40px red;
    animation: halpulse 7s infinite;
  }

  /* // gloss */
  .hal9000::after {
    content: '';
    position: absolute;
    width: var(--hal-size);
    height: var(--hal-size);
    border-radius: var(--hal-size);
    left: 0;
    top: 0;
    background-image: linear-gradient(
      135deg,
      rgba(255 255 255 / 7%) 0%,
      rgba(255 255 255 / 7%) 40%,
      rgba(255 255 255 / 0%) 41%
    );
  }

  @keyframes halpulse {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0.6;
    }

    100% {
      opacity: 1;
    }
  }
</style>

<LayoutBase title={title}>
  <div class="wrapper">
    <div class="hal9000"></div>

    <h1 class="title">{title}</h1>{' '}
    <p class="text">{description}</p>
    <a href={'/'}>Back to homepage</a>
  </div>
</LayoutBase>