Added zoom feature, Added sura index

1 files changed, 52 insertions, 0 deletions

diff --git a/src/styles/style.css b/src/styles/style.css
index f38644a..8ad010e 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -420,10 +420,54 @@ hr {
     text-decoration: none;
 }
 
+.zoom {
+    box-sizing: border-box;
+    margin: 10px;
+    width: calc(100% - 20px);
+    height: 42px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.zoom-btn {
+    box-sizing: border-box;
+    padding: 10px;
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    display: block;
+    color: black;
+    background-color: rgb(0, 0, 0, 0);
+    border-radius: 7px;
+    text-align: center;
+    transition: all 150ms;
+}
+
+.zoom-btn:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.zoom-btn:active {
+    background-color: rgba(0, 0, 0, 0.2) !important;
+}
+
+.zoom-btn:focus {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
 #dropdown-alternate {
     display: none;
 }
 
+#zoom-alternate {
+    display: none;
+}
+
+#mobile-hr {
+    display: none;
+}
+
 @media screen and (max-width: 480px) { 
     .sidebar {
         display: none;
@@ -438,6 +482,10 @@ hr {
         display: block;
     }
 
+    #mobile-hr {
+        display: block;
+    }
+
     #navbar-text {
         display: none;
     }
@@ -453,4 +501,8 @@ hr {
     .main-sidebar {
         display: none;
     }
+
+    #zoom-alternate {
+        display: flex;
+    }
 }
\ No newline at end of file