200 lines
No EOL
8.6 KiB
HTML
200 lines
No EOL
8.6 KiB
HTML
{{ 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;
|
|
'>×</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> |