Add GitHub icon and Dracula dark mode toggle

website/_includes/custom-head.html

@@ -0,0 +1,11 @@
+<link rel="stylesheet" href="{{ '/assets/css/theme.css' | relative_url }}">
+<script>
+  (function () {
+    try {
+      var stored = localStorage.getItem('bbb-theme');
+      var theme = stored || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+      if (theme === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
+    } catch (e) { /* localStorage unavailable */ }
+  })();
+</script>
+<script defer src="{{ '/assets/js/theme.js' | relative_url }}"></script>

website/assets/css/theme.css

@@ -0,0 +1,143 @@
+/* Top-right widget: GitHub icon + light/dark toggle */
+.bbb-topbar {
+  position: fixed;
+  top: 12px;
+  right: 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 1000;
+}
+
+.bbb-topbar a,
+.bbb-topbar button {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  border: 1px solid rgba(127, 127, 127, 0.4);
+  background: rgba(255, 255, 255, 0.92);
+  color: #24292f;
+  font-size: 18px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 120ms, border-color 120ms, color 120ms;
+  text-decoration: none;
+  padding: 0;
+  line-height: 1;
+}
+
+.bbb-topbar a:hover,
+.bbb-topbar button:hover {
+  border-color: rgba(127, 127, 127, 0.8);
+  text-decoration: none;
+}
+
+.bbb-topbar svg { display: block; }
+
+/* Dracula dark theme */
+[data-theme="dark"] {
+  --bbb-bg: #282a36;
+  --bbb-surface: #2d2f3d;
+  --bbb-surface-warm: #353749;
+  --bbb-text: #f8f8f2;
+  --bbb-text-muted: #c5c8d6;
+  --bbb-border: rgba(98, 114, 164, 0.32);
+  --bbb-border-strong: rgba(98, 114, 164, 0.6);
+  --bbb-link: #bd93f9;
+  --bbb-link-hover: #ff79c6;
+  --bbb-code-bg: #44475a;
+  color-scheme: dark;
+}
+
+[data-theme="dark"] body {
+  background: var(--bbb-bg);
+  color: var(--bbb-text);
+}
+
+[data-theme="dark"] a,
+[data-theme="dark"] .site-title,
+[data-theme="dark"] .site-title:visited {
+  color: var(--bbb-link);
+}
+
+[data-theme="dark"] a:hover {
+  color: var(--bbb-link-hover);
+}
+
+[data-theme="dark"] h1,
+[data-theme="dark"] h2,
+[data-theme="dark"] h3,
+[data-theme="dark"] h4,
+[data-theme="dark"] h5,
+[data-theme="dark"] h6,
+[data-theme="dark"] strong {
+  color: var(--bbb-text);
+}
+
+[data-theme="dark"] .site-header,
+[data-theme="dark"] .site-footer {
+  border-color: var(--bbb-border);
+  background: var(--bbb-bg);
+  color: var(--bbb-text);
+}
+
+[data-theme="dark"] .page-link,
+[data-theme="dark"] .page-link:visited {
+  color: var(--bbb-text);
+}
+
+[data-theme="dark"] .post-meta,
+[data-theme="dark"] .post-link {
+  color: var(--bbb-text-muted);
+}
+
+[data-theme="dark"] hr {
+  border-color: var(--bbb-border);
+}
+
+[data-theme="dark"] code,
+[data-theme="dark"] pre {
+  background: var(--bbb-code-bg);
+  color: var(--bbb-text);
+  border-color: var(--bbb-border);
+}
+
+[data-theme="dark"] blockquote {
+  color: var(--bbb-text-muted);
+  border-left-color: var(--bbb-border-strong);
+}
+
+[data-theme="dark"] table th,
+[data-theme="dark"] table td {
+  border-color: var(--bbb-border);
+}
+
+[data-theme="dark"] .badge-card {
+  border-color: var(--bbb-border-strong);
+  background: var(--bbb-surface);
+}
+
+[data-theme="dark"] .pill,
+[data-theme="dark"] .skills-cloud .skill {
+  border-color: var(--bbb-border-strong);
+}
+
+[data-theme="dark"] .hero .avatar {
+  border-color: var(--bbb-border-strong);
+  box-shadow: 0 0 0 3px var(--bbb-bg) inset;
+}
+
+[data-theme="dark"] .bbb-topbar a,
+[data-theme="dark"] .bbb-topbar button {
+  background: var(--bbb-surface);
+  color: var(--bbb-text);
+  border-color: var(--bbb-border);
+}
+
+[data-theme="dark"] .bbb-topbar a:hover,
+[data-theme="dark"] .bbb-topbar button:hover {
+  background: var(--bbb-surface-warm);
+  border-color: var(--bbb-border-strong);
+}

website/assets/js/theme.js

@@ -0,0 +1,64 @@
+(function () {
+  var GH_URL = 'https://github.com/binbashburns';
+  var STORAGE_KEY = 'bbb-theme';
+  var root = document.documentElement;
+
+  function currentTheme() {
+    return root.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
+  }
+
+  function applyTheme(theme) {
+    if (theme === 'dark') {
+      root.setAttribute('data-theme', 'dark');
+    } else {
+      root.removeAttribute('data-theme');
+    }
+  }
+
+  function buildTopbar() {
+    if (document.querySelector('.bbb-topbar')) return;
+
+    var topbar = document.createElement('div');
+    topbar.className = 'bbb-topbar';
+
+    var ghLink = document.createElement('a');
+    ghLink.href = GH_URL;
+    ghLink.target = '_blank';
+    ghLink.rel = 'noopener noreferrer';
+    ghLink.title = 'GitHub';
+    ghLink.setAttribute('aria-label', 'GitHub');
+    ghLink.innerHTML =
+      '<svg viewBox="0 0 16 16" width="18" height="18" fill="currentColor" aria-hidden="true">' +
+      '<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>' +
+      '</svg>';
+
+    var btn = document.createElement('button');
+    btn.type = 'button';
+    btn.id = 'bbb-theme-toggle';
+    btn.title = 'Toggle light / dark theme';
+    btn.setAttribute('aria-label', 'Toggle theme');
+
+    var icon = document.createElement('span');
+    icon.className = 'bbb-theme-toggle-icon';
+    icon.setAttribute('aria-hidden', 'true');
+    icon.textContent = currentTheme() === 'dark' ? '☀' : '☾';
+    btn.appendChild(icon);
+
+    btn.addEventListener('click', function () {
+      var next = currentTheme() === 'dark' ? 'light' : 'dark';
+      applyTheme(next);
+      try { localStorage.setItem(STORAGE_KEY, next); } catch (e) { /* ignore */ }
+      icon.textContent = next === 'dark' ? '☀' : '☾';
+    });
+
+    topbar.appendChild(ghLink);
+    topbar.appendChild(btn);
+    document.body.appendChild(topbar);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', buildTopbar);
+  } else {
+    buildTopbar();
+  }
+})();