Feat blog aesthetics (#93)

* [feat] fix inline code styling

* [post] finish post

Author: johnlarkin1

.gitignore

@@ -8,3 +8,4 @@ vendor
 
 images/advent-of-code/2024/day24_gate_network_pure.png
 images/advent-of-code/2024/day24_gate_network_*.png
+.playwright-mcp

_posts/2025-12-14-larkin-mcp.md

@@ -125,6 +125,76 @@ summary: Setting up a personalized MCP server. Feel free to install and interact
     padding: 1rem 1.25rem;
   }
 }
+
+/* Template card */
+.template-card-wrapper {
+  display: flex;
+  justify-content: center;
+  margin: 0.75rem auto 1.5rem;
+}
+
+.template-card {
+  --template-color: #a78bfa;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.65rem 1.1rem;
+  border-radius: 8px;
+  text-decoration: none;
+  background: rgba(167, 139, 250, 0.08);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+.template-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 8px;
+  padding: 1px;
+  background: linear-gradient(135deg, var(--template-color) 0%, transparent 50%, var(--template-color) 100%);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0.4;
+  transition: opacity 0.3s ease;
+}
+
+.template-card:hover::before {
+  opacity: 1;
+}
+
+.template-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px -6px rgba(167, 139, 250, 0.3);
+}
+
+.template-card .template-icon {
+  font-size: 1.1rem;
+}
+
+.template-card .template-text {
+  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--template-color);
+  letter-spacing: 0.02em;
+}
+
+.template-card .template-arrow {
+  font-size: 0.85rem;
+  color: var(--template-color);
+  opacity: 0.6;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.template-card:hover .template-arrow {
+  opacity: 1;
+  transform: translateX(2px);
+}
 </style>
 
 <div class="larkin-mcp-registry">
@@ -144,8 +214,18 @@ summary: Setting up a personalized MCP server. Feel free to install and interact
     <span class="registry-name">crates.io</span>
   </a>
 </div>
-<div class="image-caption">Check out any of the links above for the various published packages.</div>
-</br>
+
+<div class="image-caption">Check out any of the links above for the various published packages. Note, Claude did the css here.</div>
+<br/>
+<div class="template-card-wrapper">
+  <a href="https://github.com/johnlarkin1/yourname-mcp" target="_blank" rel="noopener" class="template-card">
+    <span class="template-icon">📋</span>
+    <span class="template-text">yourname-mcp template</span>
+    <span class="template-arrow">→</span>
+  </a>
+</div>
+
+<br/>
 
 I'm working on a much bigger project, but honestly, needed to take a break from that. It has been a grind. I have burned many early mornings on that.
 
@@ -162,7 +242,8 @@ So as a break, I have wanted to explore building my own MCP server and templatiz
   - [Personalized Study Guide](#personalized-study-guide)
 - [Context](#context)
 - [Why?](#why)
-- [MCP](#mcp)
+- [`yourname-mcp`](#yourname-mcp)
+  - [Demo](#demo)
   - [Security](#security)
   - [Rust](#rust)
 - [Conclusion](#conclusion)
@@ -263,9 +344,30 @@ Yeah so this was something my PM girlfriend asked me almost immediately. Why do
 1. I thought it would be a useful thing to templatize and set up some infrastructure so less technical users could `git clone <repo> && ./run-install.sh` and that would ask them a couple of questions, analyze their resume, convert it into markdown, they could write some markdown to provide more context, and then boom, they could also publish it and others could use it if they wanted.
 1. As stated previously, I needed a break from my other project.
 
-Ok so that's enough of that. I hope that explains the motivation.
+And if you're thinking like _well, what about Claude memory or ChatGPT memory?_, I'm really not a fan of that. I don't think Simon Willison is either. And I don't trust it to not sycophant it up or pull information that perhaps I don't want for the questions I'm asking.
 
-# MCP
+Hopefully, that's enough rationale for personal motivation.
+
+# `yourname-mcp`
+
+This is hopefully your template of interest. The point is that this has enough scaffolding that you can run the install script, populate a couple markdown files, upload to PYPI and then you're off and running. There will be more info in the actuall repo [here][yourname-mcp].
+
+## Demo
+
+Here is a demo showcasing the functionality:
+
+<div class="video-container">
+  <div class="video-wrapper-dark">
+    <video 
+      src="https://www.dropbox.com/scl/fi/v7ljkkxf3p8d24vk8wlpk/yourname-mcp-demo-lg.mp4?rlkey=95ha9lg6gpwngufkdvq9l2t0q&st=dlhyft2u&raw=1"
+      muted
+      autoplay
+      loop
+      controls
+      style="width: 100%; height: auto;">
+    </video>
+  </div>
+</div>
 
 ## Security
 
@@ -293,10 +395,11 @@ Rust was my favorite to implement, although the code structure is perhaps not as
 
 # Conclusion
 
-If you like this, or think it will be useful, please check out the basically templated repo `yourname-mcp` where the install script will walk you through
+If you like this, or think it will be useful, please check out the basically templated repo `yourname-mcp` where the `README.md` will walk you through what you need to do! Always feel free to email or leave comments if need be.
 
 [comment]: <> (Bibliography)
 [npm-attack-1]: https://semgrep.dev/blog/2025/chalk-debug-and-color-on-npm-compromised-in-new-supply-chain-attack/
 [npm-attack-2]: https://securitylabs.datadoghq.com/articles/shai-hulud-2.0-npm-worm/
 [npm-attack-3]: https://www.crowdstrike.com/en-us/blog/crowdstrike-falcon-prevents-npm-package-supply-chain-attacks/?utm_source=chatgpt.com
 [cargo-binstall]: https://crates.io/crates/cargo-binstall
+[yourname-mcp]: https://github.com/johnlarkin1/yourname-mcp

_sass/abstracts/_variables.scss

@@ -61,6 +61,12 @@ $code-block-bg: darken($code-bg-color, 2%) !default;
 $code-font-family: "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace !default;
 $code-border-color: #e1e4e8 !default;
 
+// Inline code - Notion-style distinctive colors
+$inline-code-text: #eb5757 !default;           // Red/pink like Notion
+$inline-code-bg: rgba(135, 131, 120, 0.15) !default;  // Subtle warm gray
+$dark-inline-code-text: #eb5757 !default;      // Same red in dark mode
+$dark-inline-code-bg: rgba(135, 131, 120, 0.15) !default;  // Subtle background
+
 $dark-bg: #1a1a1a !default;
 $dark-text: #e4e4e4 !default;
 $dark-heading: #ffffff !default;

_sass/base/_typography.scss

@@ -70,18 +70,52 @@ mark {
   color: $heading-color;
 }
 
+// Inline code - Notion-style with distinctive red color
+// Target inline code specifically (not inside pre blocks)
 code {
   padding: 0.2em 0.4em;
   font-family: $code-font;
   font-size: 0.85em;
-  color: $code-text-color;
-  background-color: $code-bg-color;
+  color: $inline-code-text;
+  background-color: $inline-code-bg;
   border-radius: 4px;
-  
+  font-weight: 500;
+
   @media (prefers-color-scheme: dark) {
-    color: $dark-code-text;
-    background-color: $dark-code-bg;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: $dark-inline-code-text;
+    background-color: $dark-inline-code-bg;
+  }
+}
+
+// Jekyll/Rouge adds highlighter-rouge to inline code
+// Make sure these get the Notion-style treatment
+code.highlighter-rouge {
+  color: $inline-code-text;
+  background-color: $inline-code-bg;
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-weight: 500;
+
+  @media (prefers-color-scheme: dark) {
+    color: $dark-inline-code-text;
+    background-color: $dark-inline-code-bg;
+  }
+}
+
+// Override Prism.js styles for inline code
+// Prism uses code[class*=language-] - we need higher specificity
+// Target inline code with both highlighter-rouge and language-* classes
+code.highlighter-rouge[class*="language-"] {
+  color: $inline-code-text;
+  background-color: $inline-code-bg;
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-weight: 500;
+  text-shadow: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: $dark-inline-code-text;
+    background-color: $dark-inline-code-bg;
   }
 }
 
@@ -118,13 +152,19 @@ pre {
     }
   }
 
+  // Reset inline code styling for code blocks
   > code {
     padding: 0;
     margin: 0;
     font-size: inherit;
-    color: inherit;
+    color: $code-text-color;
     background: transparent;
     border: 0;
+    font-weight: normal;
+
+    @media (prefers-color-scheme: dark) {
+      color: $dark-code-text;
+    }
   }
 }
 

_sass/components/_syntax.scss

@@ -1,19 +1,9 @@
 /**
  * Syntax highlighting styles
  */
- 
-code {
-  padding: 0.2em 0.4em;
-  font-size: 90%;
-  background-color: $code-bg-color;
-  border-radius: 3px;
-  font-family: $code-font-family;
-  
-  @media (prefers-color-scheme: dark) {
-    background-color: $dark-code-bg;
-    color: $dark-code-text;
-  }
-}
+
+// Note: Inline code styling moved to _typography.scss
+// This file handles code block syntax highlighting
 
 pre {
   margin: 1rem 0 1.25rem;
@@ -33,6 +23,7 @@ pre {
                 0 0 0 1px rgba(255, 255, 255, 0.05);
   }
 
+  // Reset inline code styling for code blocks
   > code {
     padding: 0;
     margin: 0;
@@ -41,6 +32,12 @@ pre {
     white-space: pre;
     background: transparent;
     border: 0;
+    color: $code-text-color;
+    font-weight: normal;
+
+    @media (prefers-color-scheme: dark) {
+      color: $dark-code-text;
+    }
   }
 }