style: 💄 front page

jaskaransarkaria · Jan 30, 2022 · f6790c4 · f6790c4
1 parent 36407f3
commit f6790c4
Show file tree

Hide file tree

Showing 14 changed files with 167 additions and 3 deletions.
diff --git a/public/classes-1.gif b/public/classes-1.gif
diff --git a/public/classes-1.jpg b/public/classes-1.jpg
diff --git a/public/classes.gif b/public/classes.gif
diff --git a/public/classes.png b/public/classes.png
diff --git a/public/contact-1.gif b/public/contact-1.gif
diff --git a/public/contact-1.jpg b/public/contact-1.jpg
diff --git a/public/contact.gif b/public/contact.gif
diff --git a/public/contact.png b/public/contact.png
diff --git a/public/jewellery_services.gif b/public/jewellery_services.gif
diff --git a/public/jewellery_services.png b/public/jewellery_services.png
diff --git a/public/rep-and-comm-1.gif b/public/rep-and-comm-1.gif
diff --git a/public/rep-and-comm-1.jpg b/public/rep-and-comm-1.jpg
diff --git a/public/rep-and-comm-2.png b/public/rep-and-comm-2.png
diff --git a/src/pages/index.svelte b/src/pages/index.svelte
@@ -10,6 +10,7 @@
   $: onlineShopHover = false;
   $: repairsAndCommissionsHover = false;
   $: classesHover = false;
+  $: contactHover = false;
 </script>
 
 <svelte:window bind:outerWidth />
@@ -23,22 +24,40 @@
   />
   <img
     class="repairs-and-comms"
-    src="/rep-and-comm-2.png"
+    src={repairsAndCommissionsHover
+      ? '/jewellery_services.gif'
+      : '/jewellery_services.png'}
     alt="repair and commissions button hover over me"
     on:mouseenter={() => (repairsAndCommissionsHover = true)}
     on:mouseleave={() => (repairsAndCommissionsHover = false)}
     on:click={$goto('/services')}
   />
+  <img
+    class="classes"
+    src={classesHover ? '/classes.gif' : '/classes.png'}
+    alt="classes button hover over me"
+    on:mouseenter={() => (classesHover = true)}
+    on:mouseleave={() => (classesHover = false)}
+    on:click={$goto('/classes')}
+  />
   <img
     class="online-shop"
-    src={`https://enki.imgix.net/online-shop.${
-      onlineShopHover ? 'gif' : 'png'
+    src={`https://enki.imgix.net/${
+      onlineShopHover ? 'online_shop.gif' : 'online-shop.png'
     }`}
     alt="online shop button hover over me"
     on:mouseenter={() => (onlineShopHover = true)}
     on:mouseleave={() => (onlineShopHover = false)}
     on:click={$goto('/shop')}
   />
+  <img
+    class="contact"
+    src={contactHover ? '/contact.gif' : '/contact.png'}
+    alt="online shop button hover over me"
+    on:mouseenter={() => (contactHover = true)}
+    on:mouseleave={() => (contactHover = false)}
+    on:click={$goto('/contact')}
+  />
 </figure>
 
 <style>
@@ -58,12 +77,22 @@
     grid-row-end: span end;
   }
 
+  .contact,
+  .classes,
   .repairs-and-comms,
   .online-shop:hover {
     cursor: pointer;
   }
 
   @media (min-width: 450px) {
+    .contact {
+      width: 50px;
+      grid-column-start: 70;
+      grid-column-end: span end;
+      grid-row-start: 50;
+      grid-row-end: span end;
+    }
+
     .online-shop {
       width: 70px;
       grid-column-start: 38;
@@ -79,9 +108,25 @@
       grid-row-start: 5;
       grid-row-end: span end;
     }
+
+    .classes {
+      width: 70px;
+      grid-column-start: 66;
+      grid-column-end: span end;
+      grid-row-start: 5;
+      grid-row-end: span end;
+    }
   }
 
   @media (min-width: 600px) {
+    .contact {
+      width: 80px;
+      grid-column-start: 70;
+      grid-column-end: span end;
+      grid-row-start: 50;
+      grid-row-end: span end;
+    }
+
     .online-shop {
       width: 100px;
       grid-column-start: 37;
@@ -97,9 +142,25 @@
       grid-row-start: 1;
       grid-row-end: span end;
     }
+
+    .classes {
+      width: 100px;
+      grid-column-start: 66;
+      grid-column-end: span end;
+      grid-row-start: 1;
+      grid-row-end: span end;
+    }
   }
 
   @media (min-width: 800px) {
+    .contact {
+      width: 100px;
+      grid-column-start: 70;
+      grid-column-end: span end;
+      grid-row-start: 50;
+      grid-row-end: span end;
+    }
+
     .online-shop {
       width: 120px;
       grid-column-start: 38;
@@ -115,9 +176,25 @@
       grid-row-start: 5;
       grid-row-end: span end;
     }
+
+    .classes {
+      width: 120px;
+      grid-column-start: 66;
+      grid-column-end: span end;
+      grid-row-start: 1;
+      grid-row-end: span end;
+    }
   }
 
   @media (min-width: 1024px) {
+    .contact {
+      width: 120px;
+      grid-column-start: 70;
+      grid-column-end: span end;
+      grid-row-start: 50;
+      grid-row-end: span end;
+    }
+
     .online-shop {
       width: 140px;
       grid-column-start: 39;
@@ -133,9 +210,25 @@
       grid-row-start: 5;
       grid-row-end: span end;
     }
+
+    .classes {
+      width: 140px;
+      grid-column-start: 66;
+      grid-column-end: span end;
+      grid-row-start: 5;
+      grid-row-end: span end;
+    }
   }
 
   @media (min-width: 1280px) {
+    .contact {
+      width: 160px;
+      grid-column-start: 70;
+      grid-column-end: span end;
+      grid-row-start: 50;
+      grid-row-end: span end;
+    }
+
     .online-shop {
       width: 180px;
       grid-column-start: 38;
@@ -151,9 +244,25 @@
       grid-row-start: 5;
       grid-row-end: span end;
     }
+
+    .classes {
+      width: 180px;
+      grid-column-start: 66;
+      grid-column-end: span end;
+      grid-row-start: 5;
+      grid-row-end: span end;
+    }
   }
 
   @media (min-width: 1440px) {
+    .contact {
+      width: 170px;
+      grid-column-start: 70;
+      grid-column-end: span end;
+      grid-row-start: 50;
+      grid-row-end: span end;
+    }
+
     .online-shop {
       width: 190px;
       grid-column-start: 39;
@@ -169,9 +278,25 @@
       grid-row-start: 5;
       grid-row-end: span end;
     }
+
+    .classes {
+      width: 180px;
+      grid-column-start: 66;
+      grid-column-end: span end;
+      grid-row-start: 5;
+      grid-row-end: span end;
+    }
   }
 
   @media (min-width: 1650px) {
+    .contact {
+      width: 210px;
+      grid-column-start: 70;
+      grid-column-end: span end;
+      grid-row-start: 50;
+      grid-row-end: span end;
+    }
+
     .online-shop {
       width: 230px;
       grid-column-start: 39;
@@ -187,9 +312,25 @@
       grid-row-start: 5;
       grid-row-end: span end;
     }
+
+    .classes {
+      width: 225px;
+      grid-column-start: 68;
+      grid-column-end: span end;
+      grid-row-start: 5;
+      grid-row-end: span end;
+    }
   }
 
   @media (min-width: 1960px) {
+    .contact {
+      width: 270px;
+      grid-column-start: 70;
+      grid-column-end: span end;
+      grid-row-start: 50;
+      grid-row-end: span end;
+    }
+
     .online-shop {
       width: 290px;
       grid-column-start: 38;
@@ -205,9 +346,24 @@
       grid-row-start: 5;
       grid-row-end: span end;
     }
+
+    .classes {
+      width: 260px;
+      grid-column-start: 68;
+      grid-column-end: span end;
+      grid-row-start: 5;
+      grid-row-end: span end;
+    }
   }
 
   @media (min-width: 2200px) {
+    .contact {
+      grid-column-start: 70;
+      grid-column-end: span end;
+      grid-row-start: 50;
+      grid-row-end: span end;
+    }
+
     .online-shop {
       grid-column-start: 40;
       grid-column-end: span end;
@@ -222,5 +378,13 @@
       grid-row-start: 5;
       grid-row-end: span end;
     }
+
+    .classes {
+      width: 280px;
+      grid-column-start: 68;
+      grid-column-end: span end;
+      grid-row-start: 5;
+      grid-row-end: span end;
+    }
   }
 </style>