Improve mobile version

uncommonhacks · Oct 31, 2023 · bb7676f · bb7676f
1 parent 06d704b
commit bb7676f
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 31 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -15,7 +15,7 @@ html {
 body {
     max-width: 100%;
     overflow-x: hidden;
-    min-height: 100%; 
+    min-height: 100%;
   }
 
 h1 {
@@ -30,7 +30,7 @@ li {
 
 .scrollableElement {
     position: relative;
-} 
+}
 
 /*Images*/
 #backgroundImage {
@@ -41,43 +41,39 @@ li {
 
 .overImage div {
     position: absolute;
-} 
+}
 
 /* section positioning */
 
 #introduction {
-    bottom: 28%;
-    left: 30%;
-    width: 50%; 
-    text-align: left;
-    color: white;
+    bottom: 28%; left: 30%; width: 50%; text-align: left; color: white;
 }
 
 #howitworks {
     bottom: 47%;
     left: 29%;
-    width: 50%; 
+    width: 50%;
     text-align: center;
 }
 
 #judging {
     bottom: 67.5%;
     left: 20%;
-    width: 30%; 
+    width: 30%;
     text-align: center;
 }
 
 #schedule {
     bottom: 84%;
     left: 60%;
-    width: 30%; 
+    width: 30%;
     text-align: left;
 }
 
 #about {
     bottom: 91.5%;
     left: 17%;
-    width: 30%; 
+    width: 30%;
     text-align: center;
 }
 
@@ -93,6 +89,58 @@ li {
     font-family: avenirNext;
 }
 
+.buttons * {
+    font-size: 2rem;
+}
+
 .xtra-btn {
     margin: 5px;
-}
+}
+
+@media only screen and (max-width: 1186px) {
+    body {
+        font-size: 1.5vw;
+    }
+
+    h1 {
+        font-size: 5vw;
+    }
+
+    #introduction {
+        bottom: 27%;
+    }
+
+    #howitworks {
+        bottom: 44%;
+    }
+
+    #judging {
+        bottom: 66%;
+    }
+
+    #schedule {
+        bottom: 85%;
+    }
+
+    #about {
+        bottom: 89.5%;
+    }
+
+    p, ol {
+        margin-bottom: 1vw;
+    }
+
+    ul {
+        padding-left: 0;
+    }
+
+    .buttons * {
+        font-size: 2vw;
+    }
+}
+
+@media only screen and (max-width: 675px) {
+    .buttons * {
+        font-size: 1.5vw;
+    }
+}
diff --git a/index.html b/index.html
@@ -4,27 +4,27 @@
         <!-- Required meta tags -->
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        
+
         <!-- Styling -->
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
         <link href="css/styles.css" rel="stylesheet">
     </head>
     <body>
         <div class="scrollableElement">
             <img id="backgroundImage" src="images/background2.png">
-            
+
             <!-- Put any divs that should be overlayed ontop of the background image here. -->
             <!-- Then in css/styles.css, add absolute positioning (see #faq or #schedule in hacks23 as examples) -->
             <div class="overImage">
                 <div class="buttons">
                 <button type="button" class="btn btn-info btn-lg xtra-btn" onclick="location.href='signup.html'">register</button>
                 <button type="button" class="btn btn-info btn-lg email xtra-btn" onclick="location.href='mailto:[email protected]?Subject=Uncommon Makes 2023 Inquiry';">contact</button>
-                </div>  
+                </div>
                 <div id=introduction>
                     <h1>introduction</h1>
                     <p>Come solve a crazy design problem at Uncommon Makes! In this second-ever UChicago designathon, you will have six hours to respond to a design prompt. The twist is: unlike at our hackathon, your solution does not have to be a technical product. Mock-ups, prototypes, sketches, drawings, and even interpretive dances are all fair game! What our judges will be looking for the most is how creatively and thoughtfully your team responded to the prompt.</p>
                 </div>
-                
+
                 <div id=howitworks>
                     <h1>how does it work?</h1>
                     <p>Once you arrive at the event, you’ll have a chance to meet new people and form teams. Then, during our opening ceremony, we'll announce the prompt for this year's Makes. After the keynote, we’ll start our two workshops that introduce you to two technologies that could help with your project:</p>
@@ -58,16 +58,15 @@ <h1>schedule</h1>
                     <h1>about</h1>
                     <p>Uncommon Hacks is an RSO that organizes coding-related competitions on campus. Our main event is a 24-hour hackathon called Hacks, which happens during the first weekend of the spring quarter. We love cool tech projects and can't wait to see what you create! 😁</p>
                 </div>
-           
+
             </div>
         </div>
 
 
-        <script src="js/script.js"></script>
         <!-- External javascript -->
         <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-        
+
     </body>
-</html>
+</html>
diff --git a/js/script.js b/js/script.js