feat(routes): tamper with image hovers

3 files changed, 32 insertions, 11 deletions

diff --git a/src/app.css b/src/app.css
index 62d6d2e..b1b0ee8 100644
--- a/src/app.css
+++ b/src/app.css
@@ -26,6 +26,7 @@ html {
   overflow: scroll;
   overflow-x: hidden;
 }
+
 body {
   max-width: 58em;
 }
@@ -34,15 +35,7 @@ img {
   border-radius: 5px;
 }
 
-.highlight-image img {
-  height: 20em;
-  transition: 0.25s;
-}
-.highlight-image img:hover {
-  height: 22.5em;
-  opacity: 0.75;
-}
-.highlight-image a:hover {
+.highlighted-image a:hover {
   border-bottom: none;
 }
 
@@ -60,13 +53,16 @@ img {
   display: inline;
   padding: 10px;
 }
+
 #image-rack-item a:hover {
   border-bottom: none;
 }
+
 #image-rack-item img {
   width: 20%;
   transition: 0.25s;
 }
+
 #image-rack-item img:hover {
   opacity: 0.75;
   width: 25%;
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index cf84d99..45fa41c 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -36,7 +36,7 @@ SPDX-License-Identifier: GPL-3.0-only -->
   {#if !complete}
     <p>Fetching a random image ...</p>
   {:else}
-    <div class="highlight-image">
+    <div class="highlighted-image">
       <a href={`/language?language=${image.language}&image=${image.image}`}>
         <img src={image.image} alt="An anime girl holding a programming book" />
       </a>
@@ -80,3 +80,14 @@ SPDX-License-Identifier: GPL-3.0-only -->
     </li>
   </ul>
 </section>
+
+<style>
+  .highlighted-image img {
+    height: 35vh;
+    transition: 0.25s;
+  }
+  .highlighted-image img:hover {
+    height: 37.5vh;
+    opacity: 0.75;
+  }
+</style>
diff --git a/src/routes/language.svelte b/src/routes/language.svelte
index 82a576e..af9a4da 100644
--- a/src/routes/language.svelte
+++ b/src/routes/language.svelte
@@ -103,7 +103,7 @@ SPDX-License-Identifier: GPL-3.0-only -->
         </a>
       </div>
     {:else if image}
-      <div class="highlight-image">
+      <div class="highlighted-image">
         <a href={image} target="_blank">
           <img src={image} alt="An anime girl holding a programming book" />
         </a>
@@ -125,3 +125,17 @@ SPDX-License-Identifier: GPL-3.0-only -->
     </ul>
   {/if}
 </div>
+
+<style>
+  .highlighted-image img {
+    height: 75vh;
+    transition: 0.25s;
+  }
+  .highlighted-image img:hover {
+    height: 72.5vh;
+    opacity: 0.75;
+  }
+  .highlighted-image a:hover {
+    border-bottom: none;
+  }
+</style>