---
layout: default.vto
---

<div class="flex justify-center h-[inherit]">
<div class="flex flex-col h-[inherit] w-[min(100dvw,50rem)]">

<nav class="
  transform-[rotateX(180deg)]
  text-black text-2xl font-bold
  absolute w-[inherit] z-999
  not-md:overflow-x-auto
">
  <div class="transform-[rotateX(180deg)] flex items-start justify-evenly mx-px">
    {{> const style = `
      flex-auto text-center px-3 pt-3 pb-2
      bg-white font-[ecrou]
      border-2 -mx-px border-black
      md:hover:text-[300%] ease-[cubic-bezier(1,-0.07,0.57,1.56)] md:duration-200
      md:hover:not-active:after:content-['?']
      md:active:after:content-['!!'] active:after:italic
      nuclear
    ` }}
    <a class="{{ style }}" href="/">home</a>
    <a class="{{ style }}" href="/about/">about</a>
    <a class="{{ style }}" href="/blog/">blog</a>
    <a class="{{ style }}" href="/dump/">dump</a>
    <a class="{{ style }}" href="/contact/">contact</a>
  </div>
</nav>

{{> const padding = 4 }}
<div class="text-content text-xl p-{{ padding }} pt-{{ padding + 13.5 }}">
  {{ content }}

  <ol id="footnotes"></ol>
</div>

<footer class="flex justify-center text-sm wrap-anywhere mt-auto p-1.5 pb-2 border-t-4 border-x-4 border-black dark:border-white">
  Copyright <span class="shake-sm px-0.5"><p>©</p></span> {{ Temporal.Now.plainDateISO().year }}

  <a draggable="false" class="flex items-center pl-2" href="/" alt="RGBCube">
  {{ include "rgbcube.vto" {
    cube_size:  "0.75rem",
    cube_small: true,
    cube_last:  true,
  } }}
  </a>
</footer>

</div>
</div>