From 659f468aaffce50ffd579b35815e1ffddfcd3c54 Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Mon, 16 Feb 2026 19:48:35 -0800
Subject: [PATCH] Refactor: Tiny 64px monochrome 16-point logo

---
 index.html | 93 ++++++++++++++++++++++++------------------------------
 1 file changed, 41 insertions(+), 52 deletions(-)
diff --git a/index.html b/index.html
index 3afd495..8765ff8 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sune Logo ✺</title>
+    <title>Sune ✺</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         :root {
@@ -14,12 +14,13 @@
         body {
             background-color: var(--sune-bg);
             color: var(--sune-primary);
-            transition: background-color 0.4s ease, color 0.4s ease;
+            transition: background-color 0.3s ease, color 0.3s ease;
             margin: 0;
             display: flex;
             align-items: center;
-            justify-center: center;
+            justify-content: center;
             height: 100vh;
+            font-family: ui-sans-serif, system-ui, sans-serif;
         }
 
         .inverted {
@@ -34,12 +35,7 @@
 
         @keyframes sune-pulse {
             0%, 100% { transform: scale(1); opacity: 1; }
-            50% { transform: scale(0.8); opacity: 0.3; }
-        }
-
-        @keyframes sune-breathe {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.08); }
+            50% { transform: scale(0.75); opacity: 0.4; }
         }
 
         .sune-main-group {
@@ -48,7 +44,7 @@
         }
 
         .is-generating .sune-main-group {
-            animation: sune-spin 4s linear infinite;
+            animation: sune-spin 3s linear infinite;
         }
 
         .sune-spike {
@@ -56,63 +52,60 @@
             fill: currentColor;
         }
 
-        /* Staggered pulse for the 16 spikes */
         .is-generating .sune-spike {
-            animation: sune-pulse 2s ease-in-out infinite;
+            animation: sune-pulse 1.5s ease-in-out infinite;
         }
 
-        /* 16 spikes, staggered by 1/16th of the duration */
-        .sune-spike:nth-child(1) { animation-delay: 0.000s; }
-        .sune-spike:nth-child(2) { animation-delay: 0.125s; }
-        .sune-spike:nth-child(3) { animation-delay: 0.250s; }
-        .sune-spike:nth-child(4) { animation-delay: 0.375s; }
-        .sune-spike:nth-child(5) { animation-delay: 0.500s; }
-        .sune-spike:nth-child(6) { animation-delay: 0.625s; }
-        .sune-spike:nth-child(7) { animation-delay: 0.750s; }
-        .sune-spike:nth-child(8) { animation-delay: 0.875s; }
-        .sune-spike:nth-child(9) { animation-delay: 1.000s; }
-        .sune-spike:nth-child(10) { animation-delay: 1.125s; }
-        .sune-spike:nth-child(11) { animation-delay: 1.250s; }
-        .sune-spike:nth-child(12) { animation-delay: 1.375s; }
-        .sune-spike:nth-child(13) { animation-delay: 1.500s; }
-        .sune-spike:nth-child(14) { animation-delay: 1.625s; }
-        .sune-spike:nth-child(15) { animation-delay: 1.750s; }
-        .sune-spike:nth-child(16) { animation-delay: 1.875s; }
+        /* Staggered delays for 16 spikes */
+        .sune-spike:nth-child(1) { animation-delay: 0.00s; }
+        .sune-spike:nth-child(2) { animation-delay: 0.09s; }
+        .sune-spike:nth-child(3) { animation-delay: 0.18s; }
+        .sune-spike:nth-child(4) { animation-delay: 0.27s; }
+        .sune-spike:nth-child(5) { animation-delay: 0.36s; }
+        .sune-spike:nth-child(6) { animation-delay: 0.45s; }
+        .sune-spike:nth-child(7) { animation-delay: 0.54s; }
+        .sune-spike:nth-child(8) { animation-delay: 0.63s; }
+        .sune-spike:nth-child(9) { animation-delay: 0.72s; }
+        .sune-spike:nth-child(10) { animation-delay: 0.81s; }
+        .sune-spike:nth-child(11) { animation-delay: 0.90s; }
+        .sune-spike:nth-child(12) { animation-delay: 0.99s; }
+        .sune-spike:nth-child(13) { animation-delay: 1.08s; }
+        .sune-spike:nth-child(14) { animation-delay: 1.17s; }
+        .sune-spike:nth-child(15) { animation-delay: 1.26s; }
+        .sune-spike:nth-child(16) { animation-delay: 1.35s; }
 
-        .logo-container {
-            transition: transform 0.6s cubic-bezier(0.2, 1, 0.2, 1);
-            animation: sune-breathe 8s ease-in-out infinite;
+        .logo-wrapper {
+            width: 64px;
+            height: 64px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: transform 0.2s ease;
         }
 
-        .is-generating.logo-container {
-            animation: none;
+        .logo-wrapper:active {
+            transform: scale(0.85);
         }
     </style>
 </head>
-<body class="flex flex-col items-center justify-center">
+<body onclick="toggleState()">
 
-    <div id="logoWrapper" class="logo-container cursor-pointer p-10" onclick="toggleState()">
-        <svg id="suneLogo" width="400" height="400" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <div id="logoWrapper" class="logo-wrapper">
+        <svg width="64" height="64" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
             <g class="sune-main-group" id="spikeGroup"></g>
         </svg>
     </div>
 
-    <div class="fixed bottom-12 flex flex-col items-center gap-6">
-        <div class="flex gap-4">
-            <button onclick="toggleInvert()" class="w-10 h-10 rounded-full border border-current flex items-center justify-center hover:bg-current hover:text-[var(--sune-bg)] transition-all" title="Invert Colors">
-                <div class="w-4 h-4 rounded-full bg-current"></div>
-            </button>
-            <button id="stateBtn" onclick="toggleState()" class="px-6 py-2 rounded-full border border-current text-[10px] uppercase tracking-[0.2em] hover:bg-current hover:text-[var(--sune-bg)] transition-all">
-                Idle
-            </button>
-        </div>
+    <div class="fixed bottom-6 flex gap-4">
+        <button onclick="event.stopPropagation(); toggleInvert()" class="text-[10px] uppercase tracking-tighter opacity-40 hover:opacity-100 transition">Invert</button>
     </div>
 
     <script>
         const spikeGroup = document.getElementById('spikeGroup');
         const points = 16;
         const outerRadius = 48;
-        const innerRadius = 14;
+        const innerRadius = 18; // Increased for legibility at tiny scales
         const centerX = 50;
         const centerY = 50;
 
@@ -125,10 +118,8 @@
 
                 const x1 = centerX + innerRadius * Math.cos(angle);
                 const y1 = centerY + innerRadius * Math.sin(angle);
-                
                 const xPeak = centerX + outerRadius * Math.cos(midAngle);
                 const yPeak = centerY + outerRadius * Math.sin(midAngle);
-
                 const x2 = centerX + innerRadius * Math.cos(nextAngle);
                 const y2 = centerY + innerRadius * Math.sin(nextAngle);
 
@@ -143,10 +134,8 @@
 
         function toggleState() {
             const wrapper = document.getElementById('logoWrapper');
-            const btn = document.getElementById('stateBtn');
             const isGen = wrapper.classList.toggle('is-generating');
-            btn.innerText = isGen ? 'Generating' : 'Idle';
-            if ('vibrate' in navigator) navigator.vibrate(isGen ? [10, 30, 10] : 10);
+            if ('vibrate' in navigator) navigator.vibrate(10);
         }
 
         generateSune();
