highlight header overlay

tem/html/pages/mono.html

@@ -28,19 +28,43 @@
     "
   ></div>
 </div>
+<!-- space below nav -->
+<!-- <div style="height: calc(44px + 12px);"></div> -->
 
-<p style='
+
+<div
+  style="
+    height: 100vh;
     width: 100%;
-  padding-right: 20px;
-  font-size: 18px;
-  line-height: 2.0;
-  text-align: right;
-  color: white;
-'>
-  An effort to open higher degrees of<br>
-  spatial interaction free<br>
-  to the world.
+    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>
 
 <img src='/public/img/dofdev_logo.svg?v22' width='100%'>
 <p>degrees of freedom development</p>