add dropdown for other research

Imageomics · Dec 2, 2023 · 7a27975 · 7a27975
1 parent 3525740
commit 7a27975
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 15 deletions.
diff --git a/docs/css/main.css b/docs/css/main.css
@@ -15,7 +15,7 @@ html {
 }
 
 body {
-  margin-top: 2em;
+  margin: 0;
 }
 
 main {
@@ -28,17 +28,18 @@ main {
   min-height: calc(var(--main-width));
 }
 
-.banded {
-  width: 100vw;
-  position: relative;
-  left: calc(-50vw + 50%);
-
-  padding: 1em;
+h1 {
   text-align: center;
-  background-color: var(--nice-gray);
+  font-size: 2.8em;
+  line-height: 1.2em;
 }
 
-/* Tables */
+
+/***************
+  Tables
+***************/
+
+
 td,th {
   padding: 4px 8px;
   margin: 0;
@@ -86,7 +87,12 @@ pre.reference {
   border-radius: 4px;
 }
 
-/* Helpers */
+
+/***************
+  Helpers
+***************/
+
+
 .no-border-top {
   border-top: 0;
 }
@@ -108,8 +114,22 @@ pre.reference {
   position: relative;
   left: calc(-45vw + 50%);
 }
+.banded {
+  width: 100vw;
+  position: relative;
+  left: calc(-50vw + 50%);
+
+  padding: 1em;
+  text-align: center;
+  background-color: var(--nice-gray);
+}
+
+
+/***************
+  Figures
+***************/
+
 
-/* Figures */
 .figure-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -138,6 +158,12 @@ figcaption {
   text-align: left;
 }
 
+
+/***************
+  Pill Buttons
+***************/
+
+
 .pill-button {
   padding: 0.5em 1em;
   border-radius: 9999px;
@@ -158,9 +184,33 @@ figcaption {
   transform:translate(0, 0.125em);
 }
 
-iframe {
-  aspect-ratio: 4/5;
-  width: 100%;
+/***************
+  Dropdown
+***************/
+details {
+  margin-top: 6px;
+  display: inline-block;
+  min-width: 16ch;
+  text-align: center;
+  padding: 4px 12px;
+  position: relative;
+}
+details:hover {
+  cursor: pointer;
 }
 
+details > div.options {
+  position: absolute;
+  background: white;
+  width: 100%;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+  border-radius: 4px;
+}
 
+details > div.options > p {
+  margin: 0;
+  padding: 6px 2px;
+}
+details > div.options > p:hover {
+  background-color: var(--nice-gray);
+}
diff --git a/docs/index.html b/docs/index.html
@@ -15,6 +15,17 @@
 
 <body>
   <main>
+    <div style="text-align: center">
+      <details>
+        <summary>More Research</summary>
+        <div class="options">
+          <p><a href="https://github.com/Imageomics/INTR">INTR</a></p>
+          <p><a href="https://mmmu-benchmark.github.io">MMMU Benchmark</a></p>
+          <p><a href="https://osu-nlp-group.github.io/Mind2Web">Mind2Web</a></p>
+          <p><a href="https://osu-nlp-group.github.io/MagicBrush">MagicBrush</a></p>
+        </div>
+      </details>
+    </div>
     <h1>BioCLIP: A Vision Foundation Model for the Tree of Life</h1>
     <p class="centered">
       <sup>1</sup><a href="https://samuelstevens.me/">Samuel Stevens</a><sup>*</sup>,
@@ -303,7 +314,14 @@ <h2>Reference</h2>
   year={2023},
 }</pre>
   </main>
-  <script src="js/scripts.js"></script>
+  <script>
+    const details = document.querySelector("details");
+    document.addEventListener("click", function (e) {
+      if (!details.contains(e.target)) {
+        details.removeAttribute("open");
+      }
+    });
+  </script>
 </body>
 
 </html>