From 72ebf7cbefe7715c99fac98b3f72cae8f6351724 Mon Sep 17 00:00:00 2001
From: Emil Njor <emil.njor@gmail.com>
Date: Tue, 23 Apr 2024 14:42:50 -0400
Subject: [PATCH] fixed view on phones

---
 index.html | 28 ++++++++++++++--------------
 styles.css | 27 +++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index cb9b74f..c229d33 100644
--- 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
index b5da24a..82f156c 100644
--- 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;