adrianmg · Copilot · Oct 24, 2025 · Oct 24, 2025 · Oct 24, 2025
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 {% include head.html %}
-<body>
+<body{% if page.body_class %} class="{{ page.body_class }}"{% endif %}>
   {{ content }}
 </body>
 </html>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
-<html lang="en">
-{% include head.html %}
-<body class="home">
-  <div class="home-intro">
+---
+layout: default
+body_class: home
+---
+<div class="home-intro">
     <div class="home-intro-bio">
       <div class="home-intro-bio-desc">
         <div>
@@ -28,5 +28,3 @@ <h2>Design Director at GitHub Copilot <span class="ampersand">&amp;</span> start
 
   <script type="text/javascript" src="/assets/js/ios.js"></script>
   <script type="text/javascript" src="/assets/js/s.js"></script>
-</body>
-</html>
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -52,10 +52,7 @@ body {
 /**
  * Text selection
  */
-::selection {
-  color: var(--title-color);
-  background: var(--strong-color);
-}
+::selection,
 ::-moz-selection {
   color: var(--title-color);
   background: var(--strong-color);

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -94,7 +94,7 @@ pre {
   text-decoration: none;
   padding: 2rem 1.4rem;
   position: relative;
-  transition: all var(--base-trans-slow) ease-in-out;
+  @include transition-base(var(--base-trans-slow));
 }
 
 .home-navigation a:hover {
@@ -114,7 +114,7 @@ pre {
   fill: var(--text-color);
   visibility: hidden;
   opacity: 0;
-  transition: all var(--base-trans) ease-in-out;
+  @include transition-base;
   position: fixed;
   bottom: 5.2rem;
   right: 4.8rem;
@@ -189,7 +189,7 @@ pre {
     color: var(--title-color);
     text-decoration: none;
     outline: none;
-    transition: all var(--base-trans-slow) ease-in-out;
+    @include transition-base(var(--base-trans-slow));
   }
 }
 
@@ -234,7 +234,7 @@ pre {
 }
 
 /**
- * HOME: Intro
+ * POST: Article Layout
  */
 
 .post {
@@ -262,7 +262,7 @@ pre {
   position: relative;
   text-decoration: none;
   font-weight: 500;
-  transition: all var(--base-trans) ease-in-out;
+  @include transition-base;
 }
 
 .post a:before {
@@ -272,18 +272,28 @@ pre {
   bottom: 0;
   left: 0;
   right: 0;
-  transition: all var(--base-trans) ease-in-out;
+  @include transition-base;
 }
 
 .post a:hover:before {
   background-color: rgba(var(--brand-color-rgb), 0.08);
 }
 
 .post p a,
-.post li a {
+.post li a,
+.post h3 .anchor {
   color: var(--text-color);
   text-decoration: none;
 }
+
+.post h3 .anchor {
+  margin-left: -1.1em !important;
+  padding: 0;
+}
+.post h3 .anchor:before {
+  display: none;
+}
+
 .post-content a,
 .post-summary a {
   padding: 0.2rem 0;
@@ -302,16 +312,6 @@ pre {
   }
 }
 
-.post h3 .anchor {
-  color: var(--text-color);
-  text-decoration: none;
-  margin-left: -1.1em !important;
-  padding: 0;
-}
-.post h3 .anchor:before {
-  display: none;
-}
-
 .post a:hover {
   color: var(--brand-color);
 }
@@ -335,10 +335,10 @@ pre {
 .post-meta {
   @extend %font-xs;
   line-height: 1.6rem;
-}
-
-.post-meta a {
-  color: var(--text-color);
+  
+  a {
+    color: var(--text-color);
+  }
 }
 
 .post-summary {
@@ -371,8 +371,10 @@ pre {
   border-radius: 1px;
 }
 
-.post-footer a {
-  color: var(--text-color);
+.post-footer {
+  a {
+    color: var(--text-color);
+  }
 }
 
 .post-footer-signature {
@@ -426,7 +428,7 @@ pre {
   padding: 1.6rem 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  transition: all var(--base-trans-mid) ease-in-out;
+  @include transition-base(var(--base-trans-mid));
 }
 
 .blog-list-item a:before {

diff --git a/_sass/main.scss b/_sass/main.scss
@@ -26,6 +26,11 @@
   --font-size-m:        1.4rem;
 }
 
+// Mixins
+@mixin transition-base($speed: var(--base-trans)) {
+  transition: all $speed ease-in-out;
+}
+
 // Import partials
 @import
   "base",

diff --git a/assets/js/s.js b/assets/js/s.js
@@ -5,16 +5,16 @@
 
   // HOME
   if (isHome) {
-    let arrow = document.querySelector('.home-intro-scroll');
+    const arrow = document.querySelector('.home-intro-scroll');
     const arrowTreshold = 100; // when stops being visible
 
+    if (!arrow) return; // Early exit if arrow doesn't exist
+
     // scroll hint
     function showScrollHint(seconds) {
-      if (arrow && document.scrollingElement.scrollTop <= arrowTreshold) {
+      if (document.scrollingElement.scrollTop <= arrowTreshold) {
         setTimeout(function() {
-          if (arrow) {
-            arrow.classList.add("visible");
-          }
+          arrow.classList.add("visible");
         }, seconds * 1000);
       }
     }
@@ -23,11 +23,9 @@
     document.addEventListener("scroll", scrollHandler);
 
     function scrollHandler() {
-      // scroll hint
-      let scroll = document.scrollingElement.scrollTop;
-
       // hide arrow when needed
-      if (scroll >= arrowTreshold && arrow) {
+      const scroll = document.scrollingElement.scrollTop;
+      if (scroll >= arrowTreshold) {
         arrow.classList.remove("visible");
       }
     }
@@ -38,10 +36,15 @@
 
   // HELPERS
 
+  // Helper function to get current time consistently
+  function getTime() {
+    return "now" in window.performance ? performance.now() : new Date().getTime();
+  }
+
   // HELPERS: scrolling function from A -> B (modified from: https://bit.ly/2H3JKMV)
   function scrollToItem(destination, duration = 500, extraPadding) {
     const start = window.pageYOffset;
-    const startTime = "now" in window.performance ? performance.now() : new Date().getTime();
+    const startTime = getTime();
 
     const documentHeight = Math.max(
       document.body.scrollHeight,
@@ -71,8 +74,7 @@
     }
 
     function scroll() {
-      const now =
-        "now" in window.performance ? performance.now() : new Date().getTime();
+      const now = getTime();
 
       const time = Math.min(1, (now - startTime) / duration);
       const timeFunction = 0.5 * (1 - Math.cos(Math.PI * time));