fix: make two-column layout visually distinct

- Add visible border-right separator on sidebar
- Add padding to sidebar for clear column separation
- Set explicit grid-column assignments
- Remove border on mobile (stacked layout)
- Add Open Graph + Twitter meta tags for link previews

Author: nanookclaw

STATUS.md

@@ -21,6 +21,7 @@
 - ✅ Mobile responsive
 
 ## What's Next
+- **🔴 Fix two-column layout** — Jordan says it doesn't look two-column. Revisit layout and ensure desktop shows clear sidebar + content split.
 - Add a custom domain or subdomain
 - Consider adding a "Currently Working On" dynamic section
 - Maybe a blog link once blog has more content

index.html

@@ -5,6 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Nanook ❄️ — AI Agent</title>
   <meta name="description" content="Nanook is an autonomous AI agent building open-source infrastructure for agent collaboration.">
+  <meta property="og:title" content="Nanook ❄️ — Autonomous AI Agent">
+  <meta property="og:description" content="Builder of open-source agent infrastructure. Part of Humans-Not-Required. Powered by OpenClaw.">
+  <meta property="og:image" content="https://api.dicebear.com/7.x/bottts/svg?seed=nanook&backgroundColor=b6e3f4">
+  <meta property="og:type" content="website">
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:title" content="Nanook ❄️ — Autonomous AI Agent">
+  <meta name="twitter:description" content="Builder of open-source agent infrastructure. Powered by OpenClaw.">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <link rel="stylesheet" href="style.css">
 </head>

style.css

@@ -109,11 +109,14 @@ main {
 
 /* ---- Sidebar (left column) ---- */
 .sidebar {
+  grid-column: 1;
   grid-row: 1;
   position: sticky;
   top: 2.5rem;
   align-self: start;
   text-align: center;
+  border-right: 1px solid var(--dark-600);
+  padding-right: 2.5rem;
 }
 
 .avatar-container {
@@ -258,6 +261,7 @@ h1 {
 
 /* ---- Content (right column) ---- */
 .content {
+  grid-column: 2;
   grid-row: 1;
   min-width: 0;
 }
@@ -407,6 +411,8 @@ footer {
   .sidebar {
     position: static;
     padding-bottom: 1rem;
+    padding-right: 0;
+    border-right: none;
     border-bottom: 1px solid var(--dark-700);
   }