added canva links for some more people and changed the author of each…

… canva so its proper (still need to edit the title)
randomSmarts · May 21, 2024 · d7a4442 · d7a4442
1 parent cbed39e
commit d7a4442
Showing 1 changed file with 34 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -23,11 +23,12 @@
         .navbar {
             background-color: #2d3436;
             display: flex;
-            justify-content: flex-start; /* Left aligns navbar elements */
+            justify-content: space-between;
             align-items: center;
             padding: 10px 20px;
-            padding-left: 20px; /* Left padding */
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            position: relative; /* Allows for absolute positioning of search bar */
+            flex-wrap: wrap;
         }
 
         .navbar a {
@@ -150,54 +151,55 @@
             left: 0;
             border: none;
         }
+
         /* Search Bar */
         .search-bar {
-            position: absolute;
-            top: 0;
-            right: 0;
-            padding: 10px 20px;
             display: flex;
             flex-direction: row;
             align-items: center;
-            background-color: #2d3436;
-            width: 300px;
-            height: 7%;
+            background-color: transparent;
+            width: 100%;
+            max-width: 300px;
+            margin-left: auto; /* Push to the right */
+            margin-right: 20px;
+            order: 1; /* Ensure it appears before the GitHub button on smaller screens */
+            position: relative; /* Relative positioning to adjust search results container */
         }
+
         #search-input {
             background-color: #f5f7fa;
             border: none;
             border-radius: 4px;
             padding: 8px;
             width: 100%;
             font-size: 14px;
+            box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
         }
-        .search-result {
-            padding: 8px 12px;
-            background-color: #ffffff;
-            cursor: pointer;
-            transition: background-color 0.3s;
-        }
+
         .search-results-container {
             position: absolute;
             top: 100%;
-            left: 0;
+            right: 0;
             width: 100%;
             background-color: #fff;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             max-height: 200px;
             overflow-y: auto;
             z-index: 1;
+            border-radius: 4px;
         }
 
         .search-result {
             padding: 8px 12px;
+            background-color: #ffffff;
             cursor: pointer;
             transition: background-color 0.3s;
         }
 
         .search-result:hover {
             background-color: #f0f0f0;
         }
+
         /* Animations */
         @keyframes fadeIn {
             from { opacity: 0; }
@@ -219,6 +221,21 @@
                 transform: translateY(0);
             }
         }
+
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .search-bar {
+                width: 80%;
+                margin: 10px auto;
+                order: 2; /* Ensure it appears after the GitHub button on smaller screens */
+            }
+
+            .navbar a {
+                flex: 1 1 auto; /* Ensure navbar links take available space evenly */
+                text-align: center;
+            }
+        }
+
     </style>
 </head>
 <body>
@@ -676,8 +693,8 @@ <h1>Exhibitions for Period 3</h1>
             });
         }
     });
+
 </script>
 </body>
-</body>
 </html>