fix:layout changes 🧑🏾‍⚕️

light-200 · Jan 12, 2024 · 9c81d79 · 9c81d79
1 parent 14520fd
commit 9c81d79
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 38 deletions.
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/style.css b/docs/style.css
@@ -762,63 +762,55 @@ footer {
   max-width: 600px;
   min-width: 200px;
   display: grid;
-  gap: 0.5rem;
+  border-radius: 5px;
+  overflow: hidden;
+  border-radius: 10px;
+  border: solid 0.5px;
+  border-color: invert;
 }
 
-.leaderBoardHeader {
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  background-color: var(--lb-header-bg-color);
-  color: var(--lb-header-color);
-  box-shadow: 2px 2px 5px rgb(11, 12, 12);
-  font-size: var(--font-size-heading);
-  text-transform: uppercase;
+.leaderBoardHeader,
+.leaderBoardInfo,
+.leaderBoardListItem {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
 }
 
-.leaderBoardInfo {
+.leaderBoardHeader {
+  padding: 10px;
   display: flex;
+  justify-content: center;
   align-items: center;
   background-color: var(--lb-header-bg-color);
   color: var(--lb-header-color);
-  box-shadow: 2px 2px 3px rgb(15, 15, 15);
-}
-
-.leaderBoardInfo > .leaderBoardUserName {
-  border: solid;
-  border-color: invert;
-  border-width: 0 2px;
-}
-
-.leaderBoardInfo > span {
-  flex: 1;
-  height: 100%;
-  display: grid;
-  place-content: center;
+  font-size: var(--font-size-heading);
 }
 
+.leaderBoardInfo,
 .leaderBoardListItem {
-  display: flex;
   align-items: center;
   background-color: var(--lb-list-item-bg-color);
   color: var(--lb-list-item-color);
-  box-shadow: 2px 2px 3px rgb(19, 19, 19);
-  height: auto;
+  width: 100%;
 }
 
+.leaderBoardInfo > .leaderBoardUserName,
+.leaderBoardInfo > span,
 .leaderBoardListItem > span {
-  flex: 1;
-  height: 100%;
-  display: grid;
-  place-content: center;
+  padding: 5px;
+  border: 0 1px solid invert;
 }
 
-.leaderBoardRank {
-  max-width: 100px;
+.leaderBoardInfo > .leaderBoardUserName {
+  width: 100%;
 }
 
-.leaderBoardSpeed {
-  max-width: 160px;
+.leaderBoardInfo > span,
+.leaderBoardListItem > span {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-content: center;
 }
 
 .leaderBoardUserName {

diff --git a/src/functions/handleLeaderBoard.js b/src/functions/handleLeaderBoard.js
@@ -19,7 +19,7 @@ export function clearLeaderBoard() {
 export function prepareLeaderboard() {
   let leaderBoardHeader = document.createElement("li");
   leaderBoardHeader.classList.add("leaderBoardHeader");
-  leaderBoardHeader.innerText = "leaderboard";
+  leaderBoardHeader.innerText = "Leaderboard";
   let leaderBoardHeader2 = document.createElement("li");
   leaderBoardHeader2.classList.add("leaderBoardInfo");
   leaderBoardHeader2.innerHTML =