From d7a4442154445796630ef640c2d5eb5f212eda98 Mon Sep 17 00:00:00 2001 From: randomSmarts Date: Tue, 21 May 2024 00:23:13 -0700 Subject: [PATCH] added canva links for some more people and changed the author of each canva so its proper (still need to edit the title) --- index.html | 51 ++++++++++++++++++++++++++++++++++----------------- 1 file changed, 34 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 770213d..f367140 100644 --- 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,19 +151,21 @@ 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; @@ -170,27 +173,25 @@ 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; } @@ -198,6 +199,7 @@ .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; + } + } + @@ -676,8 +693,8 @@

Exhibitions for Period 3

}); } }); + -