Update index.html

index.html

@@ -17,7 +17,6 @@
       --link: #7aa2ff;     /* calm blue link */
       --accent: #ffd21e;   /* HF-ish yellow accent */
     }
-
     * { box-sizing: border-box; }
     body {
       margin: 0;
@@ -27,12 +26,10 @@
       color: var(--text);
       font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     }
-
     .container {
       max-width: 980px;
       margin: 0 auto;
     }
-
     .card {
       background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%),
                   var(--panel);
@@ -41,19 +38,11 @@
       padding: 22px;
       box-shadow: 0 10px 30px rgba(0,0,0,.35);
     }
-
     h1 {
       margin: 0 0 8px;
       font-size: 38px;
       letter-spacing: -0.5px;
     }
-
-    .subtitle {
-      margin: 0 0 16px;
-      color: var(--muted);
-      font-size: 16px;
-    }
-
     .pill {
       display: inline-block;
       padding: 6px 10px;
@@ -64,7 +53,24 @@
       font-size: 13px;
       margin-bottom: 14px;
     }
-
+    .meta {
+      margin: 0 0 18px;
+      color: var(--muted);
+      font-size: 15px;
+      line-height: 1.45;
+    }
+    .meta b {
+      color: var(--text);
+      font-weight: 600;
+    }
+    .section {
+      margin-top: 18px;
+    }
+    .subtitle {
+      margin: 0 0 12px;
+      color: var(--muted);
+      font-size: 16px;
+    }
     .video-wrap {
       position: relative;
       padding-top: 56.25%;
@@ -73,7 +79,6 @@
       background: #000;
       border: 1px solid var(--border);
     }
-
     .video-wrap iframe {
       position: absolute;
       inset: 0;
@@ -81,23 +86,17 @@
       height: 100%;
       border: 0;
     }
-
+    .divider {
+      margin: 22px 0;
+      height: 1px;
+      background: var(--border);
+    }
     a {
       color: var(--link);
       text-decoration: none;
+      word-break: break-word;
     }
     a:hover { text-decoration: underline; }
-
-    .footer {
-      margin-top: 14px;
-      color: var(--muted);
-      font-size: 15px;
-    }
-
-    .footer b {
-      color: var(--text);
-      font-weight: 600;
-    }
   </style>
 </head>
 
@@ -105,24 +104,45 @@
   <div class="container">
     <div class="card">
       <div class="pill">Demo video + source link</div>
-      <h1>Nulla — Demo</h1>
-      <p class="subtitle">v0.0.7</p>
 
-      <div class="video-wrap">
-        <iframe
-          src="https://www.youtube-nocookie.com/embed/OAvTm5ev9Ns"
-          title="Nulla demo"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-          allowfullscreen>
-        </iframe>
-      </div>
+      <h1>Nulla — Demo</h1>
 
-      <p class="footer">
+      <!-- GitHub moved to the top (right under the title) -->
+      <p class="meta">
         <b>GitHub (download):</b>
         <a href="https://github.com/Tsoxer/nulla" target="_blank" rel="noopener noreferrer">
           https://github.com/Tsoxer/nulla
         </a>
       </p>
+
+      <!-- v0.0.8 first -->
+      <div class="section">
+        <p class="subtitle">v0.0.8</p>
+        <div class="video-wrap">
+          <iframe
+            src="https://www.youtube-nocookie.com/embed/sKnwlFnl7kk"
+            title="Nulla demo v0.0.8"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowfullscreen>
+          </iframe>
+        </div>
+      </div>
+
+      <div class="divider"></div>
+
+      <!-- v0.0.7 below -->
+      <div class="section">
+        <p class="subtitle">v0.0.7</p>
+        <div class="video-wrap">
+          <iframe
+            src="https://www.youtube-nocookie.com/embed/OAvTm5ev9Ns"
+            title="Nulla demo v0.0.7"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowfullscreen>
+          </iframe>
+        </div>
+      </div>
+
     </div>
   </div>
 </body>