feat: added hover feature (#434)

* feat: added hover feature Signed-off-by: Aman172003 <[email protected]> * removed yarn.lock --------- Signed-off-by: Aman172003 <[email protected]> Co-authored-by: Animesh Pathak <[email protected]>
keploy · Aug 27, 2024 · ab0fcea · ab0fcea
1 parent e16c259
commit ab0fcea
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 24 deletions.
diff --git a/src/components/Intro.js b/src/components/Intro.js
@@ -4,7 +4,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 
 function Languages() {
   return (
-    <div className="rounded-lg bg-[color:var(--ifm-card-background-color)] p-5 shadow">
+    <div className="rounded-lg bg-[color:var(--ifm-card-background-color)] p-5 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)]">
       <div className="flex items-center space-x-4">
         <svg
           width="16"
@@ -116,7 +116,7 @@ function Languages() {
 
 function Frameworks() {
   return (
-    <div className="flex flex-col rounded-lg bg-[color:var(--ifm-card-background-color)] p-5 shadow">
+    <div className="flex flex-col rounded-lg bg-[color:var(--ifm-card-background-color)] p-5 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)]">
       <div className="flex items-center space-x-4">
         <svg
           className="mb-4 h-10 w-10 rounded-lg bg-[color:var(--ifm-color)] p-2 text-[color:var(--ifm-background-color)]"

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -12,11 +12,11 @@
 
 :root {
   --ifm-color-primary: #ff914d;
-  --ifm-color-primary-dark: #E67643;
-  --ifm-color-primary-darker: #C95919;
+  --ifm-color-primary-dark: #e67643;
+  --ifm-color-primary-darker: #c95919;
   --ifm-color-primary-darkest: #be2c1b;
-  --ifm-color-primary-light: #FFD0A0;
-  --ifm-color-primary-lighter: #FFB575;
+  --ifm-color-primary-light: #ffd0a0;
+  --ifm-color-primary-lighter: #ffb575;
   --ifm-color-primary-lightest: #ffceb1;
   --ifm-code-font-size: 95%;
   --doc-sidebar-width: 275px !important;
@@ -28,11 +28,11 @@
 
 html[data-theme="dark"] {
   --ifm-color-primary: #ff914d;
-  --ifm-color-primary-dark: #E67643;
-  --ifm-color-primary-darker: #C95919;
+  --ifm-color-primary-dark: #e67643;
+  --ifm-color-primary-darker: #c95919;
   --ifm-color-primary-darkest: #be2c1b;
-  --ifm-color-primary-light: #FFD0A0;
-  --ifm-color-primary-lighter: #FFB575;
+  --ifm-color-primary-light: #ffd0a0;
+  --ifm-color-primary-lighter: #ffb575;
   --ifm-color-primary-lightest: #ffceb1;
   --ifm-link-color: var(--ifm-color-primary-lighter);
   --ifm-menu-color-active: var(--ifm-color-primary-lighter);
@@ -45,42 +45,44 @@ html[data-theme="dark"] {
   --ifm-footer-background-color: #000;
   --ifm-card-background-color: #1a1a1a;
   --collapse-button-bg-color-dark: transparent;
-  --ifm-badge-background-color: #F88E34;
+  --ifm-badge-background-color: #f88e34;
   --card-color: rgba(17, 24, 39);
+  --ifm-card-shadow-color: rgba(255, 255, 255, 0.2);
 }
 
 html[data-theme="light"] {
   --ifm-blockquote-color: #000000;
   --ifm-color-emphasis-300: #505050;
   /* --ifm-code-background: var(--ifm-color-primary-lightest); */
   --ifm-color-input-background: #ffffff;
-  --ifm-color: #00163D;
+  --ifm-color: #00163d;
   --ifm-background-color: rgb(249, 250, 251);
   --ifm-footer-background-color: #ffffff;
   --ifm-card-background-color: #ffffff;
   --ifm-badge-background-color: rgba(239, 246, 255);
 
   --card-color: rgba(239, 246, 255);
+  --ifm-card-shadow-color: rgba(0, 0, 0, 0.2); /* Dark shadow for light theme */
 }
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: "Roboto";
   src: url("../fonts/Roboto-Light.woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: "Roboto";
   src: url("../fonts/Roboto-Bold.woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: "Roboto";
   src: url("../fonts/Roboto-Light.woff2");
   font-weight: 300;
   font-style: normal;
@@ -193,7 +195,7 @@ div[class^="sidebar_"] .button svg {
 
 /* Pagination */
 .pagination-nav {
-  @apply flex flex-col items-start justify-center space-y-5 space-x-0 md:flex-row md:space-y-0 md:space-x-10;
+  @apply flex flex-col items-start justify-center space-x-0 space-y-5 md:flex-row md:space-x-10 md:space-y-0;
 }
 .pagination-nav__item {
   @apply w-full max-w-md;
@@ -204,7 +206,7 @@ div[class^="sidebar_"] .button svg {
 
 /* Navbar */
 .navbar__inner {
-  @apply mx-auto max-w-screen-lg lg:px-10 shadow-none;
+  @apply mx-auto max-w-screen-lg shadow-none lg:px-10;
 }
 
 .navbar__items--right {
@@ -230,7 +232,7 @@ div[class^="sidebar_"] .button svg {
 }
 
 /* Footer */
-footer  {
+footer {
   margin-top: 4%;
 }
 
@@ -253,7 +255,6 @@ footer svg {
 
   .DocSearch-Button {
     @apply mr-[-18px] !important;
-
   }
 
   /* .footer .footer__block {
@@ -408,8 +409,6 @@ footer svg {
   .docs-centered-image-size-25 {
     max-width: 25%;
   }
-
-
 }
 
 .docs-image-legend-wrapper {
@@ -501,7 +500,9 @@ footer svg {
 [data-theme="light"] .prose :where(pre code):not(.not-prose) {
   background-color: #ffffff;
 }
-[data-theme="light"] .prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)) {
+[data-theme="light"]
+  .prose
+  :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   background-color: #ffffff;
 }
 
@@ -545,11 +546,11 @@ div[class^="announcementBar_"] {
 }
 
 /*Correcting alignment of home icon in navbar breadcrumbs.*/
-a[class="breadcrumbs__link"]{
+a[class="breadcrumbs__link"] {
   padding-top: 2px;
   margin-bottom: -10px;
 }
 
 [data-theme="dark"] th {
   color: white;
-}
+}