fixed view on phones

harvard-edge · Apr 23, 2024 · 72ebf7c · 72ebf7c
1 parent d9c6bab
commit 72ebf7c
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -14,13 +14,26 @@ <h1>Wake Vision</h1>
         <nav>
             <ul>
                 <li><a href="#home">Home</a></li>
-                <li><a href="#about">About the Dataset</a></li>
                 <li><a href="#access">Access the Dataset</a></li>
+                <li><a href="#about">About the Dataset</a></li>
                 <li><a href="#sponsors">Sponsors</a></li>
                 <li><a href="#contact">Contact</a></li>
             </ul>
         </nav>
     </header>
+    <section id="access">
+        <h2>Access the Dataset</h2>
+        <p>Get started using the dataset from your preferred source:</p>
+        <div class="buttons">
+            <a href="https://github.com/Ekhao/datasets/tree/master" class="button tensorflow">TensorFlow
+                Datasets</a>
+            <a href="https://huggingface.co/datasets/Harvard-Edge/Wake-Vision" class="button huggingface">Hugging Face
+                Datasets</a>
+            <a href="https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/1HOPXC"
+                class="button harvard">Raw
+                Dataset at Harvard Dataverse</a>
+        </div>
+    </section>
     <main id="about">
         <h2>About</h2>
         <p>"Wake Vision" is a large, high-quality dataset featuring over 6 million images, significantly exceeding the
@@ -59,19 +72,6 @@ <h3>Examples</h3>
             </div>
         </div>
     </main>
-    <section id="access">
-        <h2>Access the Dataset</h2>
-        <p>Get started using the dataset from your preferred source:</p>
-        <div class="buttons">
-            <a href="https://github.com/Ekhao/datasets/tree/master" class="button tensorflow">TensorFlow
-                Datasets</a>
-            <a href="https://huggingface.co/datasets/Harvard-Edge/Wake-Vision" class="button huggingface">Hugging Face
-                Datasets</a>
-            <a href="https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/1HOPXC"
-                class="button harvard">Raw
-                Dataset at Harvard Dataverse</a>
-        </div>
-    </section>
     <section id="sponsors">
         <h2>Seeking Sponsors</h2>
         <p>We are currently seeking sponsors to support the ongoing development and expansion of the Wake Vision

diff --git a/styles.css b/styles.css
@@ -60,6 +60,8 @@ footer {
     /* Always three columns */
     /* Adapts number of columns based on screen width, min 300px */
     gap: 20px;
+    justify-content: center;
+    /* Centers the grid within the section */
 }
 
 .image-item {
@@ -92,6 +94,31 @@ footer {
     margin: 0;
 }
 
+@media (max-width: 768px) {
+    .image-grid {
+        grid-template-columns: 1fr;
+    }
+
+    #about h2,
+    #about h3 {
+        font-size: 1.5em;
+    }
+
+    .image-item {
+        padding-top: 75%;
+        /* Adjust aspect ratio padding for smaller screens if necessary */
+    }
+
+    body {
+        font-family: Arial, sans-serif;
+        background-color: #f4f4f4;
+        margin-right: 20px;
+        margin-left: 20px;
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+}
+
 
 footer {
     background-color: #022b30;