datalog-theme 0.6.0

data/_sass/_variables.scss

@@ -0,0 +1,153 @@
+// Theme variables for the DataLog analytics theme.
+// Focused on high contrast readability for code, math, and academic layouts.
+
+// Font families
+// IBM Plex — designed for technical and data-driven content
+$font-family-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$font-family-serif: 'IBM Plex Serif', Georgia, serif;
+$font-family-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+$font-stack-code: $font-family-mono !default;
+$font-stack-sans: $font-family-sans !default;
+$font-stack-serif: $font-family-serif !default;
+
+// Font sizing scale (modular, tuned for academic typography)
+$font-size-root: 16px;
+$font-size-scale: (
+  xs: 0.8125rem,
+  sm: 0.875rem,
+  base: 1rem,
+  md: 1.125rem,
+  lg: 1.25rem,
+  xl: 1.5rem,
+  xxl: 1.75rem,
+  display: clamp(2.25rem, 2.5vw + 1.5rem, 3rem)
+);
+
+// Line-height settings for dense technical prose
+$line-height-tight: 1.3;
+$line-height-base: 1.6;
+$line-height-loose: 1.75;
+
+// Color palette — balanced warm/cool tones for readability and visual variety
+$color-surface-50: #fafaf9;     // warm white
+$color-surface-100: #f3f2ef;    // warm light gray
+$color-surface-900: #1a1a2e;    // deep navy (kept for hero/footer contrast)
+$color-ink-900: #1c1917;        // warm near-black
+$color-ink-700: #44403c;        // warm dark gray
+$color-ink-500: #6f6862;        // warm mid gray (>=4.5:1 on surface-100)
+$color-ink-300: #a8a29e;        // warm light gray
+$color-ink-100: #e7e5e4 !default;
+$color-ink-400: #a1a1aa !default;
+$color-ink-600: #57534e !default;
+$color-ink-800: #292524 !default;
+$color-accent-primary: #2563eb;   // vivid blue — links, primary actions
+$color-accent-secondary: #0d9488; // teal — badges, secondary highlights
+$color-accent-tertiary: #7c3aed;  // purple — charts, visual accents
+$color-success: #16a34a;
+$color-warning: #d97706;
+$color-critical: #dc2626;
+$color-neutral-50: #fafaf9 !default;
+$color-neutral-100: #f5f5f4;
+$color-neutral-200: #e7e5e4;
+$color-neutral-400: #a8a29e;
+$color-neutral-600: #57534e;
+$color-neutral-900: #1c1917;
+$color-neutral-300: #d6d3d1 !default;
+$color-neutral-500: #78716c !default;
+$color-neutral-700: #44403c !default;
+$color-critical-50:  #fdecea !default;
+$color-critical-100: #f9d1cd !default;
+$color-critical-200: #f3a9a2 !default;
+$color-critical-300: #ed8079 !default;
+$color-critical-400: #e65f54 !default;
+$color-critical-500: #db4437 !default; // existing main
+$color-critical-600: #c3382b !default; // ← REQUIRED (used by components)
+$color-critical-700: #9f2f25 !default;
+$color-critical-800: #7b251e !default;
+$color-critical-900: #561b16 !default;
+$color-danger-50:  #ffe5e5 !default;
+$color-danger-100: #fbbcbc !default;
+$color-danger-300: #f28b82 !default;
+$dark-danger-400: #b33030 !default;
+$color-danger-500: #db4437 !default; // same base as $color-critical
+$color-danger-600: #c53929 !default; // ← NEW (used in components)
+$color-danger-700: #a52714 !default;
+$color-danger-900: #7f1d1d !default;
+
+// Dark mode adjustments
+$dark-surface-50: #262626 !default;
+$dark-surface-100: #171717;        // near-black, neutral
+$dark-surface-200: #1e1e1e;        // slightly lighter
+$dark-surface-300: #2a2a2a;        // card backgrounds
+$dark-ink-900: #f5f5f4;            // warm white text
+$dark-ink-700: #d6d3d1;
+$dark-ink-500: #a8a29e;
+$dark-ink-300: #78716c !default;
+$dark-ink-200: #57534e !default;
+$dark-ink-100: #44403c !default;
+$dark-ink-050: #fafaf9 !default;
+$dark-ink-000: #fafaf9 !default;
+$dark-accent-primary: #60a5fa;     // lighter blue for dark bg
+$dark-accent-secondary: #2dd4bf;   // lighter teal
+$dark-accent-tertiary: #a78bfa !default; // lighter purple
+
+// Border colors
+$color-border: $color-neutral-200 !default;
+$color-border-dark: $dark-surface-100 !default;
+
+// Foreground and surface
+$color-foreground: $color-ink-900 !default;
+$color-surface: $color-surface-50 !default;
+$color-surface-dark: $dark-surface-200 !default;
+
+// Spacing scale (4pt grid)
+$space-unit: 0.25rem;
+$spacing: (
+  0: 0,
+  1: $space-unit,
+  2: $space-unit * 2,
+  3: $space-unit * 3,
+  4: $space-unit * 4,
+  5: $space-unit * 6,
+  6: $space-unit * 8,
+  7: $space-unit * 10,
+  8: $space-unit * 12
+);
+
+// Border radius scale
+$radius: (
+  sm: 0.25rem,
+  md: 0.375rem,
+  lg: 0.5rem,
+  xl: 0.75rem,
+  "2xl": 1rem,
+  full: 9999px
+) !default;
+
+// Elevation levels for cards and visualisations
+$shadow-soft: 0 8px 20px rgba(15, 23, 42, 0.08);
+$shadow-strong: 0 20px 40px rgba(15, 23, 42, 0.16);
+
+// Layout constraints
+$max-width-reading: 72ch;
+$max-width-wide: 1200px;
+$max-width-full: 1440px;
+
+// Breakpoints geared for dashboard-like layouts
+$breakpoints: (
+  xs: 26rem,
+  sm: 36rem,
+  mobile: 40rem,
+  md: 48rem,
+  lg: 64rem,
+  xl: 80rem
+);
+
+// Transition timing for interactive components
+$transition-base: 150ms ease;
+$transition-snappy: 120ms cubic-bezier(0.4, 0, 0.2, 1);
+
+// Z-index scale for sticky header & overlays
+$z-header: 100;
+$z-overlay: 900;
+$z-skiplink: 1000;

data/_sass/_visualizations.scss

@@ -0,0 +1,242 @@
+@use 'sass:map';
+
+@use 'variables' as *;
+@use 'mixins' as *;
+
+.viz-table-container {
+  display: grid;
+  gap: map.get($spacing, 3);
+  padding-top: map.get($spacing, 3);
+  border-top: 1px solid rgba($color-ink-900, 0.12);
+}
+
+body.dark-mode .viz-table-container {
+  border-top-color: rgba($dark-ink-500, 0.35);
+}
+
+.viz-table-toggle {
+  justify-self: start;
+  border: 1px solid rgba($color-ink-900, 0.18);
+  background: rgba($color-ink-900, 0.04);
+  color: $color-ink-800;
+  font-weight: 600;
+  font-size: map.get($font-size-scale, xs);
+  border-radius: 999px;
+  padding: map.get($spacing, 2) map.get($spacing, 4);
+  cursor: pointer;
+  transition: background $transition-base, color $transition-base, border-color $transition-base;
+}
+
+.viz-table-toggle:hover,
+.viz-table-toggle:focus-visible {
+  border-color: $color-accent-primary;
+  background: rgba($color-accent-primary, 0.16);
+  color: $color-accent-primary;
+}
+
+.viz-table-toggle:focus-visible {
+  outline: 3px solid rgba($color-accent-primary, 0.35);
+  outline-offset: 2px;
+}
+
+body.dark-mode .viz-table-toggle {
+  border-color: rgba($dark-ink-500, 0.35);
+  background: rgba($dark-surface-300, 0.55);
+  color: rgba($dark-ink-500, 0.9);
+}
+
+body.dark-mode .viz-table-toggle:hover,
+body.dark-mode .viz-table-toggle:focus-visible {
+  border-color: $dark-accent-primary;
+  background: rgba($dark-accent-primary, 0.28);
+  color: $dark-accent-primary;
+  outline-color: rgba($dark-accent-primary, 0.45);
+}
+
+.viz-table-wrapper {
+  overflow-x: auto;
+  max-width: 100%;
+  border-radius: 0.75rem;
+  border: 1px solid rgba($color-ink-900, 0.12);
+  background: $color-surface;
+  padding: map.get($spacing, 3);
+}
+
+body.dark-mode .viz-table-wrapper {
+  border-color: rgba($dark-ink-500, 0.35);
+  background: rgba($dark-surface-200, 0.7);
+}
+
+.viz-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 18rem;
+  font-size: map.get($font-size-scale, sm);
+}
+
+.viz-table caption {
+  text-align: left;
+  font-weight: 600;
+  color: $color-ink-700;
+  margin-bottom: map.get($spacing, 2);
+}
+
+body.dark-mode .viz-table caption {
+  color: rgba($dark-ink-500, 0.95);
+}
+
+.viz-table th,
+.viz-table td {
+  padding: map.get($spacing, 2);
+  border-bottom: 1px solid rgba($color-ink-900, 0.08);
+  text-align: left;
+  vertical-align: top;
+}
+
+.viz-table th[scope='col'] {
+  font-size: map.get($font-size-scale, xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: $color-ink-600;
+}
+
+body.dark-mode .viz-table th,
+body.dark-mode .viz-table td {
+  border-bottom-color: rgba($dark-ink-500, 0.3);
+}
+
+body.dark-mode .viz-table th[scope='col'] {
+  color: rgba($dark-ink-500, 0.85);
+}
+
+.viz-table tbody tr:nth-of-type(even) {
+  background: rgba($color-accent-secondary, 0.06);
+}
+
+body.dark-mode .viz-table tbody tr:nth-of-type(even) {
+  background: rgba($dark-accent-secondary, 0.22);
+}
+
+.viz-table td:focus-visible,
+.viz-table th:focus-visible {
+  outline: 3px solid rgba($color-accent-primary, 0.45);
+  outline-offset: 2px;
+}
+
+body.dark-mode .viz-table td:focus-visible,
+body.dark-mode .viz-table th:focus-visible {
+  outline-color: rgba($dark-accent-primary, 0.5);
+}
+
+// ---------------------------------------------------------------------------
+// Gallery filters
+// ---------------------------------------------------------------------------
+.viz-filters {
+  margin-bottom: map.get($spacing, 4);
+}
+
+.viz-filter-btn {
+  &.is-active {
+    background: $color-accent-primary;
+    color: white;
+    border-color: $color-accent-primary;
+  }
+}
+
+body.dark-mode .viz-filter-btn.is-active {
+  background: $dark-accent-primary;
+  color: $color-ink-900;
+  border-color: $dark-accent-primary;
+}
+
+// ---------------------------------------------------------------------------
+// Embed blocks
+// ---------------------------------------------------------------------------
+.viz-block {
+  border: 1px solid rgba($color-neutral-200, 0.5);
+  border-radius: map.get($radius, lg);
+  overflow: hidden;
+  margin: map.get($spacing, 4) 0;
+}
+
+body.dark-mode .viz-block {
+  border-color: rgba($dark-ink-500, 0.15);
+}
+
+.viz-canvas {
+  min-height: 12rem;
+  padding: map.get($spacing, 3);
+  position: relative;
+
+  iframe {
+    width: 100%;
+    border: none;
+    border-radius: map.get($radius, md);
+  }
+
+  svg {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.viz-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: map.get($spacing, 3);
+  padding: map.get($spacing, 3) map.get($spacing, 4);
+  border-bottom: 1px solid rgba($color-neutral-200, 0.3);
+  background: rgba($color-neutral-100, 0.3);
+}
+
+body.dark-mode .viz-header {
+  border-bottom-color: rgba($dark-ink-500, 0.1);
+  background: rgba($dark-surface-300, 0.3);
+}
+
+.viz-title {
+  font-size: map.get($font-size-scale, base);
+  font-weight: 600;
+  margin: 0;
+}
+
+.viz-meta {
+  font-size: map.get($font-size-scale, xs);
+  color: $color-ink-500;
+  margin: 0;
+}
+
+body.dark-mode .viz-meta {
+  color: $dark-ink-500;
+}
+
+.viz-status {
+  font-size: map.get($font-size-scale, xs);
+  color: $color-ink-500;
+  margin-left: auto;
+}
+
+.viz-toolbar {
+  display: flex;
+  gap: map.get($spacing, 2);
+  padding: map.get($spacing, 2) map.get($spacing, 4);
+  border-top: 1px solid rgba($color-neutral-200, 0.3);
+  background: rgba($color-neutral-100, 0.2);
+
+  &__button {
+    font-size: map.get($font-size-scale, xs);
+    font-weight: 500;
+    color: $color-accent-primary;
+    text-decoration: none;
+
+    &:hover { text-decoration: underline; }
+  }
+}
+
+body.dark-mode .viz-toolbar {
+  border-top-color: rgba($dark-ink-500, 0.1);
+  background: rgba($dark-surface-300, 0.2);
+
+  &__button { color: $dark-accent-primary; }
+}

data/assets/css/main.scss

@@ -0,0 +1,4 @@
+---
+# Only front matter so Jekyll processes this file
+---
+@use "theme";

data/assets/img/favicons/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "DataLog",
+  "short_name": "DataLog",
+  "description": "Data science and analytics research blog",
+  "icons": [
+    {
+      "src": "/assets/img/favicons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/favicons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#3454d1",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "start_url": "/"
+}

data/assets/img/portfolio-placeholder.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" role="img" aria-labelledby="title desc">
+  <title id="title">Data visualization placeholder</title>
+  <desc id="desc">Abstract chart illustration representing data-driven storytelling.</desc>
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#38bdf8" />
+      <stop offset="100%" stop-color="#6366f1" />
+    </linearGradient>
+  </defs>
+  <rect width="800" height="400" fill="#0f172a" rx="32" />
+  <g transform="translate(60,60)">
+    <rect x="0" y="80" width="120" height="160" fill="url(#grad)" rx="16" />
+    <rect x="160" y="40" width="120" height="200" fill="#22d3ee" rx="16" />
+    <rect x="320" y="120" width="120" height="120" fill="#a855f7" rx="16" />
+    <rect x="480" y="20" width="120" height="220" fill="#f97316" rx="16" />
+    <polyline points="0,240 160,200 320,260 480,180 600,220" fill="none" stroke="#fbbf24" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
+  </g>
+  <text x="60" y="340" fill="#e2e8f0" font-family="Inter, sans-serif" font-size="32" font-weight="600">DataLog</text>
+  <text x="60" y="372" fill="#cbd5f5" font-family="Inter, sans-serif" font-size="20">Visualize your data stories</text>
+</svg>