162 lines
No EOL
3.2 KiB
HTML
162 lines
No EOL
3.2 KiB
HTML
{{ template "head.html" .}}
|
|
|
|
<div id="top_img">
|
|
<!-- <div
|
|
style="
|
|
background-image: url(/public/img/hack.jpg);
|
|
background-position: bottom;
|
|
background-size: cover;
|
|
height: 100vh;
|
|
position: relative;
|
|
"
|
|
></div> -->
|
|
<video src='/public/games/{{ .Data.TopHash }}.webm' autoplay loop muted
|
|
style="
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: bottom;
|
|
"
|
|
>
|
|
</video>
|
|
<div
|
|
style="
|
|
position: absolute;
|
|
top: 66.66%; left: 0; right: 0; bottom: 0;
|
|
background: linear-gradient(in oklab to top, #FFFFFFFF, #FFFFFF00);
|
|
mix-blend-mode: color;
|
|
"
|
|
></div>
|
|
</div>
|
|
<!-- space below nav -->
|
|
<!-- <div style="height: calc(44px + 12px);"></div> -->
|
|
|
|
|
|
<div
|
|
style="
|
|
height: 100vh;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-flow: column;
|
|
"
|
|
>
|
|
{{ $top_thing := index .Data.Games .Data.TopHash }}
|
|
<h1 style='width: 100%; word-wrap: break-word; hyphens: auto;'>
|
|
{{ $top_thing.Name }}
|
|
<p>
|
|
{{ $top_thing.Desc }}
|
|
<br><br>
|
|
<a href="/game/{{ .Data.TopHash }}">see more</a>
|
|
</p>
|
|
</h1>
|
|
<!-- {{ template "title_desc.html" .}} -->
|
|
<!-- <img src='https://media.dof.dev/kit/logotype.svg?v22' width='66.6%'>
|
|
<div
|
|
style="
|
|
color: var(--col-01);
|
|
background-color: #ffffff80;
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
padding: 6px 12px;
|
|
border-radius: 24px;
|
|
margin-top: -32px;
|
|
"
|
|
>degrees of freedom development</div> -->
|
|
</div>
|
|
|
|
<h2>moves</h2>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
gap: 6px;
|
|
overflow-x: auto;
|
|
"
|
|
>
|
|
{{ range $hash, $move := .Data.Moves }}
|
|
<div
|
|
style="
|
|
width: 400px;
|
|
background-color: #00000080;
|
|
"
|
|
>
|
|
<div>
|
|
<video autoplay muted
|
|
style="
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
padding: 0;
|
|
margin: 0;
|
|
"
|
|
>
|
|
<source src="/public/moves/{{ $hash }}.webm" type="video/webm" />
|
|
</video>
|
|
</div>
|
|
<div>{{ $move.Name }}</div>
|
|
<a href="/move/{{ $hash }}">see more</a>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<h2>games</h2>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
gap: 6px;
|
|
overflow-x: auto;
|
|
"
|
|
>
|
|
{{ range $hash, $game := .Data.Games }}
|
|
<div
|
|
style="
|
|
width: 400px;
|
|
background-color: #00000080;
|
|
"
|
|
>
|
|
<div>
|
|
<video autoplay muted
|
|
style="
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
padding: 0;
|
|
margin: 0;
|
|
"
|
|
>
|
|
<source src="/public/games/{{ $hash }}.webm" type="video/webm" />
|
|
</video>
|
|
</div>
|
|
<div>{{ $game.Name }}</div>
|
|
<a href="/game/{{ $hash }}">see more</a>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<h2>projects</h2>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
gap: 6px;
|
|
overflow-x: auto;
|
|
"
|
|
>
|
|
{{ range $hash, $project := .Data.Projects }}
|
|
<div
|
|
style="
|
|
width: 400px;
|
|
background-color: #00000080;
|
|
"
|
|
>
|
|
<div>{{ $project.Name }}</div>
|
|
<a href="/project/{{ $hash }}">see more</a>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
|
|
<div style='height: 128px; width: 100%;'></div> |