store and company logos

Author: vidhvat

README.md

@@ -1,2 +1,3 @@
 # tamashika.github.io
 website
+python -m http.server

company.png

@@ -12,11 +12,25 @@
     <!-- <div class="custom-cursor-outline"></div> -->
     <canvas id="bg"></canvas>
     <main class="page">
-      <a href="https://store.steampowered.com/app/2996080/TAMASHIKA/" class="logo-link">
-        <img id="logo" src="yy.png" alt="TAMASHIKA" class="logo-spin" />
-      </a>
+      <div class="page-stack">
+        <!-- <a href="https://store.steampowered.com/app/2996080/TAMASHIKA/" class="logo-link"> -->
+          <img id="logo" src="yy.png" alt="TAMASHIKA" class="logo-spin" />
+        <!-- </a> -->
+        <nav class="store-row" aria-label="Store links">
+          <!-- Replace href with your URLs -->
+          <a href="#" class="store-btn" title="PlayStation"><img src="ps_icon.png" alt="PlayStation" /></a>
+          <a href="https://store.steampowered.com/app/2996080/TAMASHIKA/" class="store-btn" title="Steam"><img src="steam_icon.png" alt="Steam" /></a>
+          <a href="https://www.nintendo.com/us/store/products/tamashika-switch/" class="store-btn" title="Nintendo Switch"><img src="switch_icon.png" alt="Nintendo Switch" /></a>
+          <a href="#" class="store-btn" title="Xbox"><img src="xbox_icon.png" alt="Xbox" /></a>
+        </nav>
+      </div>
     </main>
 
+    <aside class="company-logos" aria-label="Company logos">
+      <a href="https://quicktequila.com"><img src="company.png" alt="Company" class="company-logo company-logo--left" /></a>
+      <a href="https://edglrd.com"><img src="publisher.png" alt="Publisher" class="company-logo company-logo--right" /></a>
+    </aside>
+
     <script src="shader.js"></script>
     <script>
       (function () {
@@ -47,12 +61,12 @@
         });
       const TARGET_URL = 'https://store.steampowered.com/app/2996080/TAMASHIKA/';
 
-      document.addEventListener('click', function (event) {
-        if (event.target.closest('a')) {
-          return;
-        }
-        window.location.href = TARGET_URL;
-      });
+      // document.addEventListener('click', function (event) {
+      //   if (event.target.closest('a')) {
+      //     return;
+      //   }
+      //   window.location.href = TARGET_URL;
+      // });
     </script>
   </body>
 </html>

index.html

@@ -46,16 +46,109 @@ body {
   z-index: 1;
 }
 
+.page-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+}
+
+.company-logos {
+  position: fixed;
+  inset: 0;
+  /* pointer-events: none; */
+  z-index: 1;
+}
+
+.company-logo {
+  position: fixed;
+  bottom: clamp(0.75rem, 2.5vh, 1.5rem);
+  height: auto;
+  width: clamp(72px, 11vw, 150px);
+  max-height: min(10vh, 100px);
+  object-fit: contain;
+  object-position: center bottom;
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 10px rgba(0, 0, 0, 0.45));
+}
+
+.company-logo--left {
+  left: clamp(0.75rem, 2.5vw, 1.5rem);
+}
+
+.company-logo--right {
+  right: clamp(0.75rem, 2.5vw, 1.5rem);
+}
+
+.store-row {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 25%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.65rem;
+  z-index: 1;
+  pointer-events: auto;
+}
+
+.store-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.35rem;
+  border-radius: 6px;
+  opacity: 0.85;
+  transition: opacity 0.15s ease;
+}
+
+.store-btn:hover,
+.store-btn:focus-visible {
+  opacity: 1;
+}
+
+.store-btn img {
+  display: block;
+  width: min(7vw, 128px);
+  height: auto;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 12px rgba(0, 0, 0, 0.45));
+}
+
+/* Portrait: bigger store icons and more horizontal spread */
+@media (orientation: portrait) {
+  .store-row {
+    gap: clamp(0.35rem, 2.5vw, 0.85rem);
+    padding-inline: clamp(0.75rem, 5vw, 2rem);
+    justify-content: space-evenly;
+  }
+
+  .store-btn {
+    padding: clamp(0.45rem, 2.2vw, 0.7rem);
+  }
+
+  .store-btn img {
+    width: clamp(68px, 19vw, 112px);
+  }
+
+  .company-logo {
+    width: clamp(88px, 22vw, 140px);
+    max-height: min(9vh, 90px);
+  }
+}
+
 .logo-spin {
   width: min(2.5vw, 75px);
   height: auto;
   animation: spin 1.5s linear infinite;
+  /* filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 14px rgba(0, 0, 0, 0.6)); */
 }
 
 .logo-no-spin {
   width: min(2.5vw, 75px);
   height: auto;
   animation: none;
+  /* filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 14px rgba(0, 0, 0, 0.6)); */
 }
 
 /* .logo-link,