improved visibility on mobile

cmlpolymath · web-flow · commit af16fda0db10 · 2024-05-18T14:16:49.000-05:00
diff --git a/index.html b/index.html
@@ -20,16 +20,18 @@
         }
         .container {
             max-width: 800px;
-            width: auto;
+            width: 100%;
             box-sizing: border-box;
-            margin: auto;
             padding: 20px;
-            position: absolute;
+            position: relative;
         }
         #rain-container {
-            position: relative;
-            width: 100%;
-            height: 100%;
+            position: absolute;
+            top: 0; 
+            left: 0;
+            right: 0;
+            bottom: 0;
+            overflow: hidden;
         }
 
         .book {
@@ -47,7 +49,7 @@
 
         .notebook-cover {
             text-align: center;
-            padding: 50px;
+            padding: 20px;
             background-color: #b2e2f8;
             color: #333;
             border-radius: 10px;
@@ -57,7 +59,8 @@
         }
         h1 {
             color: #556b2f;
-            font-size: 38px;
+            font-size: 1.5rem;
+            margin-top: 0;
         }
         @keyframes fadeInScale {
             0% {
@@ -78,25 +81,56 @@
         }
         .section-title {
             color: #41339c;
+            margin-top: 20px;
         }
         ul {
             list-style-type: none;
+            padding: 0;
         }
         li {
             margin-bottom: 10px;
         }
+
+        /* Responsive Breakpoints */
+        @media (max-width: 768px) {
+            .notebook-cover {
+                padding: 15px;
+            }
+            h1 {
+                font-size: 1.2rem;
+            }
+            .section-title {
+                font-size: 1rem;
+            }
+        }
+        @media (max-width: 480px) {
+            body {
+                font-size: 16px;
+            }
+            .notebook-cover {
+                padding: 10px;
+                margin: 0 10px;
+            }
+            h1 {
+                font-size: 1rem;
+            }
+            .section-title {
+                font-size: 0.9rem;
+            }
+        }
+
     </style>
 </head>
 <body>
-    <div id="rain-container" class="absolute inset-0 overflow-hidden"></div>
+    <div id="rain-container"></div>
     <script>
         const rainContainer = document.getElementById('rain-container');
 
         function createBook() {
             const book = document.createElement('div');
             book.className = 'book';
             book.style.left = `${Math.random() * 100}vw`;
-            book.style.animationDuration = `${Math.random() * 2 + 2}s`;
+            book.style.animationDuration = `${Math.random() * 3 + 3}s`;
             book.textContent = Math.random() > 0.5 ? '📖' : '📒';
             rainContainer.appendChild(book);
 
@@ -109,15 +143,14 @@
     </script>
     <div class="container">
         <div class="notebook-cover">
-            <!-- <h1><a href="https://github.com/cmlpolymath/Notebooks/tree/main" style="color:#daa520; text-decoration: none;">✨ CML Polymath Notebooks ✨</a></h1> -->
-            <h1><span ><a href="https://github.com/cmlpolymath/Notebooks/tree/main" style="color:#daa520; text-decoration: none;">✨ CML Polymath Notebooks ✨</a></span></h1>
+            <h1><span><a href="https://github.com/cmlpolymath/Notebooks/tree/main" style="color:#daa520; text-decoration: none;">✨ CML Polymath Notebooks ✨</a></span></h1>
             <p>Welcome to this repository, which contains all the notebooks based on Data Science books I've read.
                     The purpose of this repository is to show my journey through the field and, most importantly, <b>to share the knowledge.</b>
             </p>
             
             <hr>
 
-            <p class="section-title">Each series of notebooks is dedicated to a specific book and contains<br> the following sections:</br></p>
+            <p class="section-title">Each series of notebooks is dedicated to a specific book and contains the following sections:</p>
 
             <ul>
                 <li><strong>Book Information:</strong> <em>Title, Author, Publication Year,</em> and a brief summary.</li>
@@ -126,7 +159,7 @@ <h1><span ><a href="https://github.com/cmlpolymath/Notebooks/tree/main" style="c
                 <li><strong>Discussion:</strong> Comments about the material to spark conversation</li>
             </ul>
 
-            <p>Come explore the notebooks, contribute your own insights, and join the discussion. <br><i>Happy reading!</i></br></p>
+            <p>Come explore the notebooks, contribute your own insights, and join the discussion. <i>Happy reading!</i></p>
         </div>
     </div>
 </body>
