{{ template "head.html" .}}

<div style="height: 64px; width: 100%;"></div>

<p style='
  line-height: 1.75;
  color: white;
  font-style: italic;
  text-align: center;
'>
  An effort to open higher degrees of<br>
  spatial interaction free<br>
  to the world.
</p>

<div style="height: 12px; width: 100%;"></div>

<img src='https://media.dof.dev/kit/logotype.svg?v25' width='256'>
<p>degrees of freedom development</p>

<div style="height: 12px; width: 100%;"></div>

<div class='shuffle' style='
  display: flex;
  flex-flow: column;
  align-items: center;
'>
  <div style='color: white; font-size: 18px;'>
    Ethan Merchant <span style="color: var(--col-01); font-size: 14px;">@spatialfree</span>
    <a
      href='https://ethanmerchant.com'
      target="_blank"
      style="text-decoration: none;"
    >
      🔗
    </a>
  </div>
  <div style='color: white; font-size: 18px;'>
    Niko Ryan <span style="color: var(--col-01); font-size: 14px;">@opendegree</span>
    <a
      href='https://nikoryan.com'
      target="_blank"
      style="text-decoration: none;"
    >
      🔗
    </a>
  </div>
</div>

<div style='
  color: var(--col-06);
  font-size: 48px;
  padding: 12px;
'>&times;</div>

<div id='x'>
{{ range .Data.Peers }}
  <a
    href='{{ .Project.Url }}'
    title='{{ .Project.Name }}'
    target='_blank'
  >
    <div style='
      background-image: url("{{ .Project.Icon }}");
    '></div>
  </a>
{{ end }}
</div>

<div style="flex: 1;"></div>

<div style="display: block; position: relative; width: auto;">
  <div style="display: block; position: relative;">
    <img src="/public/img/knuckles_owo-removebg.png?v29" loading="lazy" height="360px" style="margin-right: 0;">
    <div class="scene">
      <div class="cube">
        <img class="degree" src="/public/img/icons/degree.svg?v29">
        <div class="cube__face cube__face--front">
          <div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 255, 1), rgba(000, 255, 255, 1));"></div>
          <div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 255, 255, 1), rgba(255, 255, 255, 1));"></div>
          <div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 000, 255, 1), rgba(255, 000, 255, 1));"></div>
          <div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 255, 1), rgba(255, 255, 255, 1));"></div>
        </div>
        <div class="cube__face cube__face--back">
          <div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 000, 1), rgba(255, 255, 000, 1));"></div>
          <div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 000, 1), rgba(000, 255, 000, 1));"></div>
          <div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(255, 000, 000, 1), rgba(000, 000, 000, 1));"></div>
          <div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 000, 1), rgba(000, 255, 000, 1));"></div>
        </div>
        <div class="cube__face cube__face--right">
          <div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 255, 1), rgba(255, 255, 255, 1));"></div>
          <div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 000, 1));"></div>
          <div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(255, 000, 255, 1), rgba(255, 000, 000, 1));"></div>
          <div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 000, 1), rgba(255, 255, 000, 1));"></div>
        </div>
        <div class="cube__face cube__face--left">
          <div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 000, 1), rgba(000, 255, 000, 1));"></div>
          <div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 255, 000, 1), rgba(000, 255, 255, 1));"></div>
          <div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 000, 000, 1), rgba(000, 000, 255, 1));"></div>
          <div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 255, 1), rgba(000, 255, 255, 1));"></div>
        </div>
        <div class="cube__face cube__face--top">
          <div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 255, 255, 1), rgba(000, 255, 000, 1));"></div>
          <div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 255, 000, 1), rgba(255, 255, 000, 1));"></div>
          <div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 255, 255, 1), rgba(255, 255, 255, 1));"></div>
          <div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 255, 255, 1), rgba(255, 255, 000, 1));"></div>
        </div>
        <div class="cube__face cube__face--bottom">
          <div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 000, 1), rgba(000, 000, 255, 1));"></div>
          <div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 000, 255, 1), rgba(255, 000, 255, 1));"></div>
          <div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 000, 000, 1), rgba(255, 000, 000, 1));"></div>
          <div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 000, 1), rgba(255, 000, 255, 1));"></div>
        </div>
      </div>
    </div>
  </div>
  <div style="display: block; position: absolute; bottom: 0; right: 0; padding: 10px;">
    <a href="https://twitter.com/luciherzig" style="color: rgb(170 175 255);">@luciherzig</a>
  </div>
</div>

<style>
#x {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  gap: 32px;
  > a > div {
    width: 64px;
    height: 64px;
    background-size: contain;
    border-radius: 50%;
  }
}

.scene {
  position: absolute;
  bottom: 184px;
  right: 206px;

  width: 32px;
  height: 32px;
  perspective: 120px;
  perspective-origin: 32px 16px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.666));
}
.degree {
  position: absolute;
  width: 32px;
  height: 32px;

  animation: unspin 6s linear infinite;
}
@keyframes unspin {
  0%   { transform: rotateY(460deg); }
  50%  { transform: rotateY(280deg); }
  100% { transform: rotateY(100deg); }
}
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  /* transform: translateZ(-20px); */
  animation: spin 6s linear infinite;
}
@keyframes spin {
  0%   { transform: translateY(0px) rotateY( 80deg); }
  50%  { transform: translateY(5px) rotateY(260deg); }
  100% { transform: translateY(0px) rotateY(440deg); }
}
.cube__face {
  position: absolute;
  width: 32px;
  height: 32px;
  /* background: rgba(204, 204, 204, 0.5); */
}
.edge {
  border-radius: 3px;
}
.cube__face--front {
  transform: rotateY(0deg) translateZ(16px);
}
.cube__face--right {
  transform: rotateY(90deg) translateZ(16px);
}
.cube__face--back {
  transform: rotateY(180deg) translateZ(16px);
}
.cube__face--left {
  transform: rotateY(-90deg) translateZ(16px);
}
.cube__face--top {
  transform: rotateX(90deg) translateZ(16px);
}
.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(16px);
}
</style>