index.astro

---
import OpenGraph from '@components/OpenGraph.astro'
import Layout from '@layouts/Layout.astro'

const options = {
  title: 'Boilerplate | UXCorpRangel',
  description:
    'Boilerplate que incluye integraciones y configuraciones enfocadas en buenas prácticas para construir sitios rápidos, accesibles y listos para producción.'
}
---

<Layout options={options}>
  <OpenGraph
    description={options.description}
    image="/og/og.jpg"
    slot="social-media"
    title={options.title}
  />

  <main>
    <header class="hero">
      <img alt="" aria-hidden="true" class="hero-pawprint-1" src="/public/svg/paw-print.svg" />
      <img alt="" aria-hidden="true" class="hero-pawprint-2" src="/public/svg/paw-print.svg" />
      <figure>
        <img alt="Logo de UXCorpRangel Badges" class="hero-logo" src="/public/svg/logo-uxcorpbadges.svg" />
      </figure>
      <img alt="" aria-hidden="true" class="dog-bone-1" src="/public/svg/dog-bone.svg" />
      <img alt="" aria-hidden="true" class="dog-bone-2" src="/public/svg/dog-bone.svg" />
    </header>
    <div class="pattern-border" />
  </main>
</Layout>

<style>
  main {
    margin: auto;
    padding: 1rem;
    width: 58.75rem;
    height: calc(100vh - 58px);
    max-width: calc(100% - 1rem);
    color: white;
    font-size: 20px;
    line-height: 1.6;
  }

  .hero {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hero-logo {
    aspect-ratio: 1 / 1;
  }

  .hero-pawprint-1 {
    position: absolute;
    left: 6%;
    top: 25%;
  }
  .hero-pawprint-2 {
    position: absolute;
    left: 0;
    top: 50%;
  }

  .dog-bone-1 {
    position: absolute;
    right: 6%;
    top: 25%;
  }

  .dog-bone-2 {
    position: absolute;
    right: 0;
    top: 50%;
    rotate: 90deg;
  }

  .pattern-border {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 24px;
    background: repeating-linear-gradient(
        90deg,
        black,
        black 24px,
        white 24px,
        white 48px
    );
    box-sizing: border-box;
  }

  @media (width < 768px) {

    .main {
      padding: 0;
      width: 100%;
    }
    .hero-pawprint-1, .hero-pawprint-2, .dog-bone-1, .dog-bone-2{
      width: 20%;
    }

    .here-pawprint-1 {
      left: 6%;
    }

    .hero-pawprint-2 {
      left: 0;
      top: 42%;
    }

    .dog-bone-1 {
      right: 6%;
    }

    .dog-bone-2 {
      right: 0;
      top: 40%;
    }
  }
</style>