Starting blog post on stackoverflow

And loads of supporting graph code
2026-01-04 15:31:47 +00:00 · 2026-01-04 15:31:47 +00:00 · 4233c43102
commit 4233c43102
parent 8fdc28e7c5
16 changed files with 1352 additions and 50 deletions
--- a/assets/sass/partials/_graphs.scss
+++ b/assets/sass/partials/_graphs.scss
@ -0,0 +1,174 @@
+// Graph container styling to match terminal aesthetic
+.graph-container {
+  margin: 2rem 0;
+  padding: 20px 20px 100px 20px; // Extra bottom padding for rotated x-axis labels
+  background: rgba(0, 255, 0, 0.05);
+  border: 2px solid rgba(0, 255, 0, 0.3);
+  border-radius: 8px;
+  position: relative;
+  box-shadow:
+    0 0 20px rgba(0, 255, 0, 0.1),
+    inset 0 0 40px rgba(0, 255, 0, 0.05);
+  overflow: visible; // Prevent clipping of labels
+
+  @include media-down(lg) {
+    padding: 15px 15px 120px 15px;
+    margin: 1.5rem 0;
+  }
+
+  // Terminal-style border glow on hover
+  &:hover {
+    border-color: rgba(0, 255, 0, 0.5);
+    box-shadow:
+      0 0 30px rgba(0, 255, 0, 0.2),
+      inset 0 0 40px rgba(0, 255, 0, 0.08);
+  }
+
+  // Scanline effect overlay
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: repeating-linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.1) 0px,
+      rgba(0, 0, 0, 0.1) 1px,
+      transparent 1px,
+      transparent 3px
+    );
+    pointer-events: none;
+    z-index: 1;
+    border-radius: 6px;
+  }
+
+  // Graph title
+  .graph-title {
+    color: greenyellow;
+    font-family: monospace;
+    font-size: 1.3rem;
+    margin: 0 0 15px 0;
+    text-align: center;
+    text-shadow: 0 0 10px rgba(173, 255, 47, 0.5);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    position: relative;
+    z-index: 2;
+
+    @include media-down(lg) {
+      font-size: 1.1rem;
+      margin-bottom: 10px;
+    }
+
+    &::after {
+      content: "";
+      display: block;
+      width: 60%;
+      height: 2px;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(0, 255, 0, 0.6),
+        transparent
+      );
+      margin: 8px auto 0;
+      box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
+    }
+  }
+
+  // Canvas element
+  canvas {
+    position: relative;
+    z-index: 2;
+    filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.3));
+  }
+
+  // CRT flicker effect (subtle)
+  @keyframes graph-flicker {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.98;
+    }
+  }
+
+  animation: graph-flicker 3s ease-in-out infinite;
+}
+
+// Special styling for graphs in blog posts
+.blog-summary,
+.blogs-content {
+  .graph-container {
+    // Ensure proper spacing in blog context
+    margin: 2.5rem 0;
+
+    @include media-down(lg) {
+      margin: 1.5rem 0;
+    }
+  }
+}
+
+// Full-width graph variant
+.graph-container.full-width {
+  margin-left: -20px;
+  margin-right: -20px;
+  border-radius: 0;
+
+  @include media-down(lg) {
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+}
+
+// Compact graph variant
+.graph-container.compact {
+  padding: 15px;
+
+  .graph-title {
+    font-size: 1.1rem;
+    margin-bottom: 10px;
+  }
+
+  @include media-down(lg) {
+    padding: 10px;
+
+    .graph-title {
+      font-size: 1rem;
+    }
+  }
+}
+
+// Loading state
+.graph-container.loading {
+  &::after {
+    content: "LOADING DATA...";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #0f0;
+    font-family: monospace;
+    font-size: 1.2rem;
+    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
+    animation: pulse 1.5s ease-in-out infinite;
+    z-index: 3;
+  }
+
+  canvas {
+    opacity: 0.3;
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}