1 files changed, 78 insertions, 10 deletions
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 84e21692..d3e182ea 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -160,26 +160,94 @@
     </div>
     <div class="fade-cover"></div>
   </div>
+<style>
+#archive .heading {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%;
+  pointer-events: none;
+}
+#archive.menu .menu {
+  opacity: 1;
+  pointer-events: auto;
+}
+#archive .menu {
+  background: rgba(255,255,255,0.8);
+  position: absolute;;
+  top: 0; left: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+#archive .menu .items {
+  border-top: 1px solid black;
+  width: 100%;
+}
+#archive .menu .item {
+  width: 100%;
+  text-align: center;
+  border-bottom: 1px solid black;
+  background: white;
+}
+#archive .scroll {
+  top: 0; left: 0;
+  height: 100%;
+}
+#archive .row {
+  position: relative;
+  min-height: 80vh;
+  perspective: 500;
+}
+#archive .menu .items,
+#archive .row .image,
+#archive .row .text {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform-origin: 50% 50%;
+  transform: translateZ(0) translateX(-50%) translateY(-50%);
+}
+#archive .row .image {
+  width: 100%; height: 100%;
+  background-repeat: no-repeat;
+  background-size: 80% auto;
+  background-position: center center;
+}
+#archive .row .text {
+}
+</style>
 
   <div id="archive">
     <div class="scroll">
-      <h1>ARCHIVE</h1>
-      <div class="subtitle">'982-'015</div>
       <div class="content">
         <script type="text/html" class="template">
-          <img src="{{image}}">
-          <div class="above">
-            <h2>
-              <b>{{code}}</b><br>
-              {{title}}
-            </h2>
-            <div class="body">
-              {{body}}
+          <div class="row">
+            <div class="image" style="background-image:url({{image}})"></div>
+            <div class="text">
+              <h2>
+                <b>{{code}}</b><br>
+                {{label}}
+              </h2>
+              <div class="body">
+                {{caption}}
+              </div>
             </div>
           </div>
         </script>
       </div>
     </div>
+    <div class="menu">
+      <div class="items">
+        <script type="text/html" class="template">
+          <div class="item">{{title}}</div>
+        </script>
+      </div>
+    </div>
+    <div class="heading">
+      <h1>ARCHIVE</h1>
+      <div class="subtitle">'982-'015</div>
+    </div>
   </div>
   
   <div id="privacy" class="page">