impr: mobile view

monkeytype-hub · Oct 25, 2023 · 0923d34 · 0923d34
1 parent a25f042
commit 0923d34
Show file tree

Hide file tree

Showing 6 changed files with 620 additions and 304 deletions.
diff --git a/.github/workflows/BadgesList.yml b/.github/workflows/BadgesList.yml
@@ -46,7 +46,7 @@ jobs:
                     echo "No changes detected."
                   else
                     git add .
-                    git commit -m "feat: update badges json list"
+                    git commit -m "chore: update badges json list"
                   fi
               continue-on-error: true
 

diff --git a/.github/workflows/ThemeList.yml b/.github/workflows/ThemeList.yml
@@ -55,7 +55,7 @@ jobs:
                     echo "No changes detected."
                   else
                     git add .
-                    git commit -m "feat: update themes json list"
+                    git commit -m "chore: update themes json list"
                   fi
               continue-on-error: true
 

diff --git a/public/script/index.js b/public/script/index.js
@@ -20,14 +20,6 @@ $("#monkeytypeNameInput").on("input", function () {
     monkeytypeName = $(this).val();
 });
 
-$("#leaderBoardBtn").mouseenter(function () {
-    $("#leaderBoardTooltip").removeClass("hidden");
-});
-
-$("#leaderBoardBtn").mouseleave(function () {
-    $("#leaderBoardTooltip").addClass("hidden");
-});
-
 $("#leaderBoardBtn").click(function () {
     initialReadmeBtn("#leaderBoardBtn", leaderBoardBtnState);
     leaderBoardBtnState = !leaderBoardBtnState;
@@ -161,14 +153,6 @@ function initialReadmeBtn(buttonId, buttonState) {
     }
 }
 
-$("#personalBestBtn").mouseenter(function () {
-    $("#personalBestTooltip").removeClass("hidden");
-});
-
-$("#personalBestBtn").mouseleave(function () {
-    $("#personalBestTooltip").addClass("hidden");
-});
-
 function showThemeList() {
     $("#showThemeBtn").addClass("hidden");
     $("#themeListContainer").removeClass("h-96");

diff --git a/public/style/output.css b/public/style/output.css
@@ -835,10 +835,6 @@ video {
   cursor: not-allowed;
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -1064,6 +1060,10 @@ video {
   padding-bottom: 4rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -1084,14 +1084,6 @@ video {
   padding-top: 1rem;
 }
 
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
-.pb-4 {
-  padding-bottom: 1rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1204,6 +1196,11 @@ video {
   color: rgb(236 239 244 / var(--tw-text-opacity));
 }
 
+.text-nord-light-green {
+  --tw-text-opacity: 1;
+  color: rgb(143 188 187 / var(--tw-text-opacity));
+}
+
 .text-nord-light-sub {
   --tw-text-opacity: 1;
   color: rgb(106 119 145 / var(--tw-text-opacity));
@@ -1228,16 +1225,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-nord-light-subAlt {
-  --tw-text-opacity: 1;
-  color: rgb(216 222 233 / var(--tw-text-opacity));
-}
-
-.text-nord-light-green {
-  --tw-text-opacity: 1;
-  color: rgb(143 188 187 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -1297,6 +1284,10 @@ video {
   outline-offset: 2px;
 }
 
+.group:hover .group-hover\:block {
+  display: block;
+}
+
 @media (min-width: 640px) {
   .sm\:ml-3 {
     margin-left: 0.75rem;
@@ -1347,6 +1338,21 @@ video {
     font-size: 1.125rem;
     line-height: 1.75rem;
   }
+
+  .md\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .md\:text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .md\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -1375,6 +1381,10 @@ video {
     margin-top: 2rem;
   }
 
+  .lg\:block {
+    display: block;
+  }
+
   .lg\:flex {
     display: flex;
   }
@@ -1509,6 +1519,24 @@ video {
   .lg\:leading-\[3rem\] {
     line-height: 3rem;
   }
+
+  .lg\:hover\:bg-nord-light-green:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(143 188 187 / var(--tw-bg-opacity));
+  }
+
+  .lg\:hover\:text-nord-light-bg:hover {
+    --tw-text-opacity: 1;
+    color: rgb(236 239 244 / var(--tw-text-opacity));
+  }
+
+  .lg\:hover\:opacity-60:hover {
+    opacity: 0.6;
+  }
+
+  .group:hover .lg\:group-hover\:block {
+    display: block;
+  }
 }
 
 @media (min-width: 1280px) {