From e08ef27d6a74ef0e7fac47c20672119d70cf70aa Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Thu, 12 Mar 2026 07:50:24 +0000
Subject: [PATCH] Open on new page

---
 examples/website/src/index.html |  8 ++++++++
 examples/website/src/style.scss | 24 +++++++++++++-----------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/examples/website/src/index.html b/examples/website/src/index.html
index 1e7ac57..4519472 100644
--- a/examples/website/src/index.html
+++ b/examples/website/src/index.html
@@ -198,6 +198,8 @@
           <div class="footer-links">
             <a
               href="https://www.npmjs.com/package/reconcile-text"
+              target="_blank"
+              rel="noopener noreferrer"
               aria-label="npm package"
             >
               <svg
@@ -212,6 +214,8 @@
             </a>
             <a
               href="https://pypi.org/project/reconcile-text/"
+              target="_blank"
+              rel="noopener noreferrer"
               aria-label="PyPI package"
             >
               <svg
@@ -226,6 +230,8 @@
             </a>
             <a
               href="https://crates.io/crates/reconcile-text"
+              target="_blank"
+              rel="noopener noreferrer"
               aria-label="crates.io crate"
             >
               <svg
@@ -240,6 +246,8 @@
             </a>
             <a
               href="https://github.com/schmelczer/reconcile"
+              target="_blank"
+              rel="noopener noreferrer"
               aria-label="GitHub repository"
             >
               <svg
diff --git a/examples/website/src/style.scss b/examples/website/src/style.scss
index 21d5f2f..7ef66d2 100644
--- a/examples/website/src/style.scss
+++ b/examples/website/src/style.scss
@@ -479,27 +479,29 @@ $DOT_RADIUS: 4;
 }
 
 footer {
-  padding: 16px;
+  padding: 32px 16px;
   width: 100%;
-  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
+  gap: 24px;
   color: $text-secondary;
 }
 
-.github-link > svg {
-  position: absolute;
+.footer-links {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.footer-links > a > svg {
   color: $text-secondary;
-  top: 50%;
-  right: 36px;
-  transform: translateY(-50%);
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   transition: transform 0.2s;
 }
 
-.github-link > svg:hover {
+.footer-links > a > svg:hover {
   cursor: pointer;
-  transform: translateY(-50%) scale(1.15);
+  transform: scale(1.15);
 }