From 136c251eabb663d85db872e54dcf5c39344bb405 Mon Sep 17 00:00:00 2001
From: Arjun Choudhury <arjunchoudhury11202@gmail.com>
Date: Wed, 11 Oct 2023 21:46:15 +0530
Subject: [PATCH] made responsive for mobile screens

---
 index.html |  67 ++++++++----------
 style.css  | 203 +++++++++++++++++++++++++++++++++++------------------
 2 files changed, 162 insertions(+), 108 deletions(-)
diff --git a/index.html b/index.html
index 57ad2d3..93b274a 100644
--- a/index.html
+++ b/index.html
@@ -9,45 +9,34 @@
   </head>
   <body>
     <img class="centre" src="./images/GDSC JGEC.png" />
-    <h1
-      class="centre"
-      style="
-        text-align: center;
-        font-size: 70px;
-        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-      "
-    >
-      Google Cloud Study Jam 2023
-    </h1>
-    <h1
-      class="centre"
-      id="leaderboard"
-      style="
-        width: 50%;
-        text-align: center;
-        font-size: 70px;
-        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-        border: 5px solid rgb(93, 210, 200);
-      "
-    >
-      LEADERBOARD
-    </h1>
-    <table class="styled-table">
-      <thead>
-        <tr>
-          <th>Serial Number</th>
-          <th>Student Name</th>
-          <th>Enrolment Status</th>
-          <th># of Courses Completed</th>
-          <th># of Skill Badges Completed</th>
-          <th># of GenAI Game Completed</th>
-          <th>Total Completions of both Pathways</th>
-          <th>Redemption Status</th>
-        </tr>
-      </thead>
-      <tbody>
-      </tbody>
-    </table>
+
+    <div id="header">
+      <h1>
+        Google Cloud Study Jam 2023
+      </h1>
+      <h2>
+        LEADERBOARD
+      </h2>
+    </div>
+
+    <div id="table-container">
+      <table class="styled-table">
+        <thead>
+          <tr>
+            <th>Serial Number</th>
+            <th>Student Name</th>
+            <th>Enrolment Status</th>
+            <th># of Courses Completed</th>
+            <th># of Skill Badges Completed</th>
+            <th># of GenAI Game Completed</th>
+            <th>Total Completions of both Pathways</th>
+            <th>Redemption Status</th>
+          </tr>
+        </thead>
+        <tbody>
+        </tbody>
+      </table>
+  </div>
     <style>
       footer {
         text-align: center;
diff --git a/style.css b/style.css
index bc321b6..24ec558 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,8 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
 body {
   background-color: aliceblue;
   background-attachment: fixed;
@@ -5,6 +10,63 @@ body {
   z-index: -1;
 }
 
+h1 {
+  font-size: 4rem;
+  font-weight: 900;
+}
+
+h2 {
+  font-size: 3rem;
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
+  th {
+    font-size: 0.1rem;
+  }
+}
+
+/* Media query for screens between 769px and 1024px (tablets) */
+@media (min-width: 769px) and (max-width: 1024px) {
+  h1 {
+    font-size: 3rem;
+  }
+
+  h2 {
+    font-size: 2.5rem;
+  }
+  th {
+    font-size: 0.1rem;
+  }
+}
+
+img {
+  max-width: 100%;
+}
+
+#header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding-inline: 1.5rem;
+  padding-top: 2rem;
+  text-align: center;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+}
+
+#table-container {
+  overflow-x: scroll;
+  width: 100vw;
+}
+
 .centre {
   display: block;
   margin-left: auto;
@@ -14,106 +76,109 @@ body {
 }
 
 @media screen and (max-width: 992px) {
-    #leaderboard {
-        border: 0px solid black !important;
-        /* background-color: #009879; */
-    }
+  #leaderboard {
+    border: 0px solid black !important;
+    /* background-color: #009879; */
+  }
 }
 
-
- table, th, td {
-     /* border-radius: 15px;  */
-     /* width: 100%; */
-    border: 1px solid black;
-} 
+table,
+th,
+td {
+  /* border-radius: 15px;  */
+  /* width: 100%; */
+  border: 1px solid black;
+  text-align: center;
+}
 
 th {
-    font-size: 20px;
+  font-size: 1rem;
+  background-color: #009879;
 }
 
 .styled-table {
-    border-collapse: collapse;
-    margin: 25px 10%;
-    font-size: 0.9em;
-    font-family: sans-serif;
-    max-width: 80%;
-    min-width: 400px;
-    border: 2px solid grey;
-    border-radius: 5px;
-    box-shadow: 1 1 20px rgba(0, 0, 0, 0.15);
+  border-collapse: collapse;
+  margin: 25px 10%;
+  font-size: 0.9em;
+  font-family: sans-serif;
+  max-width: 80%;
+  min-width: 400px;
+  border: 2px solid grey;
+  border-radius: 5px;
+  box-shadow: 1 1 20px rgba(0, 0, 0, 0.15);
 }
 
 .styled-table thead tr {
-    background-color: #60b4a396;
-    color: #ffffff;
-    text-align: left;
-    border-bottom: 4px solid rgb(0, 11, 0);
+  background-color: #60b4a396;
+  color: #ffffff;
+  text-align: left;
+  border-bottom: 4px solid rgb(0, 11, 0);
 }
 
 .styled-table th,
 .styled-table td {
-    padding: 12px 15px;
+  padding: 0.8rem;
 }
 
 .styled-table > tr:hover {
-    background-color: #dde6e3;
-    cursor: pointer;
+  background-color: #dde6e3;
+  cursor: pointer;
 }
 
 .styled-table tbody tr {
-    border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid #dddddd;
 }
 
 .styled-table tbody tr:nth-of-type(even) {
-    background-color: #f3f3f3;
+  background-color: #f3f3f3;
 }
 
 .styled-table tbody tr:last-of-type {
-    border-bottom: 2px solid #009879;
+  border-bottom: 2px solid #009879;
 }
 
 .styled-table tbody tr.active-row {
-    font-weight: bold;
-    color: #009879;
+  font-weight: bold;
+  color: #009879;
 }
 
 /* width */
 ::-webkit-scrollbar {
-    width: 10px;
-  }
-  
-  /* Track */
-  ::-webkit-scrollbar-track {
-    background: #dde6e3;
-  }
-  
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: #66beaa;
-    border-radius: 15px;
-  }
-  
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: #555;
-  }
+  width: 10px;
+}
 
-  #myBtn {
-    display: none; /* Hidden by default */
-    position: fixed; /* Fixed/sticky position */
-    bottom: 20px; /* Place the button at the bottom of the page */
-    right: 30px; /* Place the button 30px from the right */
-    z-index: 99; /* Make sure it does not overlap */
-    border: none; /* Remove borders */
-    outline: none; /* Remove outline */
-    background-color: #009879;/* Set a background color */
-    color: white; /* Text color */
-    cursor: pointer; /* Add a mouse pointer on hover */
-    padding: 20px; /* Some padding */
-    border-radius: 10px; /* Rounded corners */
-    font-size: 18px; /* Increase font size */
-  }
-  
-  #myBtn:hover {
-    background-color: #555; /* Add a dark-grey background on hover */
-  }
\ No newline at end of file
+/* Track */
+::-webkit-scrollbar-track {
+  background: #dde6e3;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #66beaa;
+  border-radius: 15px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+#myBtn {
+  display: none; /* Hidden by default */
+  position: fixed; /* Fixed/sticky position */
+  bottom: 20px; /* Place the button at the bottom of the page */
+  right: 30px; /* Place the button 30px from the right */
+  z-index: 99; /* Make sure it does not overlap */
+  border: none; /* Remove borders */
+  outline: none; /* Remove outline */
+  background-color: #009879; /* Set a background color */
+  color: white; /* Text color */
+  cursor: pointer; /* Add a mouse pointer on hover */
+  padding: 20px; /* Some padding */
+  border-radius: 10px; /* Rounded corners */
+  font-size: 18px; /* Increase font size */
+}
+
+#myBtn:hover {
+  background-color: #555; /* Add a dark-grey background on hover */
+}
