feat: enhance blog layout with footer and improved navigation; add SVG icons for GitHub and Bluesky

website/styles/main.css

@@ -586,6 +586,18 @@ svg.world-image {
     color: rgba(205, 214, 244, 0.9);
 }
 
+.quick-link--icon {
+    display: inline-flex;
+    align-items: center;
+    opacity: 0.5;
+    transition: opacity 0.2s;
+    color: rgba(205, 214, 244, 1);
+}
+
+.quick-link--icon:hover {
+    opacity: 0.9;
+}
+
 .rss-link {
     display: flex;
     align-items: center;
@@ -637,17 +649,22 @@ body.blog-page {
 }
 
 .blog-page .quick-links {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
+    position: static;
     width: 100%;
     min-height: 52px;
     display: flex;
     align-items: center;
+    padding: 0 16px;
+}
+
+.blog-page .quick-links-inner {
+    width: 100%;
+    max-width: 900px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
     gap: 16px;
-    padding: 10px 16px;
-    z-index: 620;
+    padding: 10px 0;
 }
 
 .blog-scroll-topbar {
@@ -658,8 +675,7 @@ body.blog-page {
     height: 44px;
     display: flex;
     align-items: center;
-    gap: 14px;
-    padding: 6px 14px;
+    padding: 0 16px;
     background: var(--ctp-base);
     border-bottom: 1px solid rgba(205, 214, 244, 0.15);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
@@ -670,6 +686,15 @@ body.blog-page {
     z-index: 700;
 }
 
+.blog-scroll-topbar-inner {
+    width: 100%;
+    max-width: 900px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
 .blog-scroll-logo-link {
     display: inline-flex;
     align-items: center;
@@ -866,7 +891,54 @@ body.blog-page {
     position: relative;
 }
 
-@media (max-width: 1100px) {
+/* ─── Blog Footer ─────────────────────────────────────────────────────────── */
+
+.blog-footer {
+    width: 100%;
+    border-top: 1px solid rgba(205, 214, 244, 0.1);
+    margin-top: 48px;
+    padding: 32px 16px;
+}
+
+.blog-footer-inner {
+    max-width: 900px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.blog-footer-logo {
+    opacity: 0.6;
+    transition: opacity 0.2s;
+}
+
+.blog-footer-logo:hover {
+    opacity: 0.9;
+}
+
+.blog-footer-logo-img {
+    height: 28px;
+    width: auto;
+    display: block;
+}
+
+.blog-footer-links {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.blog-footer-copy {
+    font-size: 12px;
+    color: rgba(205, 214, 244, 0.3);
+    margin: 0;
+}
+
+
     .blog-post-peek {
         display: none;
     }