From 2a1b296a6fee623f76d083c344ba9f66c12cea85 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Mon, 20 Nov 2023 12:56:31 -0300
Subject: [PATCH] Enable hover effect on devices with first-class hover support

On devices such as a phone, the hover effect will not be applied.
---
 src/css/themes/blue/pages/_SurahIndex.scss  | 6 ++++--
 src/css/themes/green/pages/_SurahIndex.scss | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/css/themes/blue/pages/_SurahIndex.scss b/src/css/themes/blue/pages/_SurahIndex.scss
index d30c04f..ed81083 100644
--- a/src/css/themes/blue/pages/_SurahIndex.scss
+++ b/src/css/themes/blue/pages/_SurahIndex.scss
@@ -7,8 +7,10 @@
         color: $blue1;
       }
 
-      &:hover {
-        background: lighten($blue1, 38%);
+      @media (hover: hover) {
+        &:hover {
+          background: lighten($blue1, 38%);
+        }
       }
 
       div:first-child {
diff --git a/src/css/themes/green/pages/_SurahIndex.scss b/src/css/themes/green/pages/_SurahIndex.scss
index 7278591..04cbbdc 100644
--- a/src/css/themes/green/pages/_SurahIndex.scss
+++ b/src/css/themes/green/pages/_SurahIndex.scss
@@ -6,9 +6,11 @@
       color: $green1;
     }
 
-    &:hover {
-      background: $green1;
-      color: $white;
+    @media (hover: hover) {
+      &:hover {
+        background: $green1;
+        color: $white;
+      }
     }
   }