diff --git a/docs/content/templates.md b/docs/content/templates.md
index 7336a2a..3b7f227 100644
--- a/docs/content/templates.md
+++ b/docs/content/templates.md
@@ -16,6 +16,11 @@ This template focuses on a fluid layout that sizes itself using percentage-based
 
 Good for simple transactional emails and single column layouts. If you want a basic template to handle rich text and images, this is a good baseline.
 
+<div class="buttons">
+  <a href="http://htmlpreview.github.io/?https://github.com/TedGoas/Cerberus/blob/master/cerberus-fluid.html" class="button button-primary">View a demo</a>
+  <a href="https://raw.githubusercontent.com/TedGoas/Cerberus/master/cerberus-fluid.html" class="button button-secondary">View code</a>
+</div>
+
 ## Responsive Template
 
 ![example image](/images/template-responsive.svg "Responsive email template.")
@@ -26,6 +31,11 @@ This template uses media queries to reconfigure the layout for different screen
 
 If you’re already comfortable with media queries, the learning curve is relatively low. If total device coverage isn’t required, you can create a responsive email the same way you create a responsive website.
 
+<div class="buttons">
+  <a href="http://htmlpreview.github.io/?https://github.com/TedGoas/Cerberus/blob/master/cerberus-responsive.html" class="button button-primary">View a demo</a>
+  <a href="https://raw.githubusercontent.com/TedGoas/Cerberus/master/cerberus-responsive.html" class="button button-secondary">View code</a>
+</div>
+
 ## Hybrid Template
 
 ![example image](/images/template-hybrid.svg "Hybrid email template.")
@@ -34,6 +44,11 @@ This template uses a hybrid approach to reconfigure the layout for different scr
 
 If you have some email design experience, this template optimizes every popular email client. All the extra Outlook code can make these templates quite large and your maths have to be spot on for multi-column layouts.
 
+<div class="buttons">
+  <a href="http://htmlpreview.github.io/?https://github.com/TedGoas/Cerberus/blob/master/cerberus-hybrid.html" class="button button-primary">View a demo</a>
+  <a href="https://raw.githubusercontent.com/TedGoas/Cerberus/master/cerberus-hybrid.html" class="button button-secondary">View code</a>
+</div>
+
 ## Archived Templates
 
 Templates in the archived-versions folder are not currently being maintained and should be considered unsupported and deprecated. They are kept around for historical purposes. 💫
diff --git a/docs/public/best-practices/index.html b/docs/public/best-practices/index.html
index 185f8dd..78d02ec 100644
--- a/docs/public/best-practices/index.html
+++ b/docs/public/best-practices/index.html
@@ -5,14 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title> Best Practices </title>
   <meta name="description" content=" Emails don’t need to look the same in every email client, but there are some guidelines to make sure they render properly in email clients and are as accessible as possible. ">
-  <link rel="stylesheet" href="design.css">
+  <link rel="stylesheet" href="http://127.0.0.1:1111/design.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet">
 
   <meta property="og:title" content="Cerberus - Patterns for Responsive HTML Email Templates">
   <meta property="og:description" content="A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.">
-  <meta property="og:image" content="https://tedgoas.github.io/Cerberus/images/og-image.png" />
+  <meta property="og:image" content="http://127.0.0.1:1111/images/og-image.png" />
   <meta property="og:image:alt" content="Cerberus: A few simple, but solid patterns for responsive, accessible HTML email in (almost) every email client.">
   <meta property="og:locale" content="en_EN">
   <meta property="og:type" content="website">
@@ -20,17 +20,17 @@
   <meta property="og:url" content="https://tedgoas.github.io/Cerberus">
   <link rel="canonical" href="https://tedgoas.github.io/Cerberus">
 
-  <link rel="icon" href="https://tedgoas.github.io/Cerberus/favicon.ico" sizes="any">
-  <link rel="icon" href="https://tedgoas.github.io/Cerberus/favicon.svg" type="image/svg+xml">
-  <link rel="shortcut icon" href="https://tedgoas.github.io/Cerberus/favicon.png">
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="shortcut icon" href="http://127.0.0.1:1111/favicon.png">
 
 </head>
 <body id="page-best-practices">
   <div class="site">
     <nav class="sitenav">
       <div class="mobile-header">
-        <a href="/" rel="home"><img src="images/logo-cerberus-light.svg" alt="Cerberus logo." class="logo dark-hide"></a>
-        <a href="/" rel="home"><img src="images/logo-cerberus-dark.svg" alt="Cerberus logo." class="logo light-hide"></a>
+        <a href="/" rel="home"><img src="http://127.0.0.1:1111/images/logo-cerberus-light.svg" alt="Cerberus logo." class="logo dark-hide"></a>
+        <a href="/" rel="home"><img src="http://127.0.0.1:1111/images/logo-cerberus-dark.svg" alt="Cerberus logo." class="logo light-hide"></a>
         <button class="mobile-menu" onclick="siteNav()">Menu <div class="menu-icon"><span class="icon-bar bar1"></span><span class="icon-bar bar2"></span><span class="icon-bar bar3"></span></div></button>
       </div>
       <ul class="reset" id="sitenav-ul">
@@ -50,7 +50,7 @@
           <path d="M8 10V2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
           Download Zip
         </a></li>
-        <li class="minor"><a href="https://github.com/sponsors/TedGoas"><img src="images/icon-heart.svg" alt="" height="16" width="16" border="0"> Sponsor Me</a></li>
+        <li class="minor"><a href="https://github.com/sponsors/TedGoas"><img src="http://127.0.0.1:1111/images/icon-heart.svg" alt="" height="16" width="16" border="0"> Sponsor Me</a></li>
       </ul>
     </nav>
 
@@ -105,8 +105,8 @@ <h2 id="testing">Testing</h2>
     </article>
     <div class="on-this-page"></div>
   </div>
-  <script type='text/javascript' src='scripts/scripts.js'></script>
+  <script type='text/javascript' src='http://127.0.0.1:1111/scripts/scripts.js'></script>
   <script>hljs.highlightAll();</script>
   <script data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
-<script src="/livereload.js?port=1025&amp;mindelay=10"></script></body>
+<script src="/livereload.js?port=1024&amp;mindelay=10"></script></body>
 </html>
diff --git a/docs/public/components/index.html b/docs/public/components/index.html
index 2c9c165..d4f8b23 100644
--- a/docs/public/components/index.html
+++ b/docs/public/components/index.html
@@ -5,14 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title> Components </title>
   <meta name="description" content=" About John Doe, a good human ">
-  <link rel="stylesheet" href="design.css">
+  <link rel="stylesheet" href="http://127.0.0.1:1111/design.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet">
 
   <meta property="og:title" content="Cerberus - Patterns for Responsive HTML Email Templates">
   <meta property="og:description" content="A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.">
-  <meta property="og:image" content="https://tedgoas.github.io/Cerberus/images/og-image.png" />
+  <meta property="og:image" content="http://127.0.0.1:1111/images/og-image.png" />
   <meta property="og:image:alt" content="Cerberus: A few simple, but solid patterns for responsive, accessible HTML email in (almost) every email client.">
   <meta property="og:locale" content="en_EN">
   <meta property="og:type" content="website">
@@ -20,17 +20,17 @@
   <meta property="og:url" content="https://tedgoas.github.io/Cerberus">
   <link rel="canonical" href="https://tedgoas.github.io/Cerberus">
 
-  <link rel="icon" href="https://tedgoas.github.io/Cerberus/favicon.ico" sizes="any">
-  <link rel="icon" href="https://tedgoas.github.io/Cerberus/favicon.svg" type="image/svg+xml">
-  <link rel="shortcut icon" href="https://tedgoas.github.io/Cerberus/favicon.png">
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="shortcut icon" href="http://127.0.0.1:1111/favicon.png">
 
 </head>
 <body id="page-components">
   <div class="site">
     <nav class="sitenav">
       <div class="mobile-header">
-        <a href="/" rel="home"><img src="images/logo-cerberus-light.svg" alt="Cerberus logo." class="logo dark-hide"></a>
-        <a href="/" rel="home"><img src="images/logo-cerberus-dark.svg" alt="Cerberus logo." class="logo light-hide"></a>
+        <a href="/" rel="home"><img src="http://127.0.0.1:1111/images/logo-cerberus-light.svg" alt="Cerberus logo." class="logo dark-hide"></a>
+        <a href="/" rel="home"><img src="http://127.0.0.1:1111/images/logo-cerberus-dark.svg" alt="Cerberus logo." class="logo light-hide"></a>
         <button class="mobile-menu" onclick="siteNav()">Menu <div class="menu-icon"><span class="icon-bar bar1"></span><span class="icon-bar bar2"></span><span class="icon-bar bar3"></span></div></button>
       </div>
       <ul class="reset" id="sitenav-ul">
@@ -50,7 +50,7 @@
           <path d="M8 10V2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
           Download Zip
         </a></li>
-        <li class="minor"><a href="https://github.com/sponsors/TedGoas"><img src="images/icon-heart.svg" alt="" height="16" width="16" border="0"> Sponsor Me</a></li>
+        <li class="minor"><a href="https://github.com/sponsors/TedGoas"><img src="http://127.0.0.1:1111/images/icon-heart.svg" alt="" height="16" width="16" border="0"> Sponsor Me</a></li>
       </ul>
     </nav>
 
@@ -360,8 +360,8 @@ <h2 id="buttons">Buttons</h2>
     </article>
     <div class="on-this-page"></div>
   </div>
-  <script type='text/javascript' src='scripts/scripts.js'></script>
+  <script type='text/javascript' src='http://127.0.0.1:1111/scripts/scripts.js'></script>
   <script>hljs.highlightAll();</script>
   <script data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
-<script src="/livereload.js?port=1025&amp;mindelay=10"></script></body>
+<script src="/livereload.js?port=1024&amp;mindelay=10"></script></body>
 </html>
diff --git a/docs/public/dark-mode/index.html b/docs/public/dark-mode/index.html
index e653019..2cbecac 100644
--- a/docs/public/dark-mode/index.html
+++ b/docs/public/dark-mode/index.html
@@ -5,14 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title> Dark Mode </title>
   <meta name="description" content=" A guide to adding, using, and removing dark mode support to Cerberus&#x27;s email templates using the prefers-color-scheme CSS media feature and utility classes. ">
-  <link rel="stylesheet" href="design.css">
+  <link rel="stylesheet" href="http://127.0.0.1:1111/design.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet">
 
   <meta property="og:title" content="Cerberus - Patterns for Responsive HTML Email Templates">
   <meta property="og:description" content="A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.">
-  <meta property="og:image" content="https://tedgoas.github.io/Cerberus/images/og-image.png" />
+  <meta property="og:image" content="http://127.0.0.1:1111/images/og-image.png" />
   <meta property="og:image:alt" content="Cerberus: A few simple, but solid patterns for responsive, accessible HTML email in (almost) every email client.">
   <meta property="og:locale" content="en_EN">
   <meta property="og:type" content="website">
@@ -20,17 +20,17 @@
   <meta property="og:url" content="https://tedgoas.github.io/Cerberus">
   <link rel="canonical" href="https://tedgoas.github.io/Cerberus">
 
-  <link rel="icon" href="https://tedgoas.github.io/Cerberus/favicon.ico" sizes="any">
-  <link rel="icon" href="https://tedgoas.github.io/Cerberus/favicon.svg" type="image/svg+xml">
-  <link rel="shortcut icon" href="https://tedgoas.github.io/Cerberus/favicon.png">
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="shortcut icon" href="http://127.0.0.1:1111/favicon.png">
 
 </head>
 <body id="page-dark-mode">
   <div class="site">
     <nav class="sitenav">
       <div class="mobile-header">
-        <a href="/" rel="home"><img src="images/logo-cerberus-light.svg" alt="Cerberus logo." class="logo dark-hide"></a>
-        <a href="/" rel="home"><img src="images/logo-cerberus-dark.svg" alt="Cerberus logo." class="logo light-hide"></a>
+        <a href="/" rel="home"><img src="http://127.0.0.1:1111/images/logo-cerberus-light.svg" alt="Cerberus logo." class="logo dark-hide"></a>
+        <a href="/" rel="home"><img src="http://127.0.0.1:1111/images/logo-cerberus-dark.svg" alt="Cerberus logo." class="logo light-hide"></a>
         <button class="mobile-menu" onclick="siteNav()">Menu <div class="menu-icon"><span class="icon-bar bar1"></span><span class="icon-bar bar2"></span><span class="icon-bar bar3"></span></div></button>
       </div>
       <ul class="reset" id="sitenav-ul">
@@ -50,7 +50,7 @@
           <path d="M8 10V2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
           Download Zip
         </a></li>
-        <li class="minor"><a href="https://github.com/sponsors/TedGoas"><img src="images/icon-heart.svg" alt="" height="16" width="16" border="0"> Sponsor Me</a></li>
+        <li class="minor"><a href="https://github.com/sponsors/TedGoas"><img src="http://127.0.0.1:1111/images/icon-heart.svg" alt="" height="16" width="16" border="0"> Sponsor Me</a></li>
       </ul>
     </nav>
 
@@ -113,8 +113,8 @@ <h2 id="removing-dark-mode">Removing Dark Mode</h2>
     </article>
     <div class="on-this-page"></div>
   </div>
-  <script type='text/javascript' src='scripts/scripts.js'></script>
+  <script type='text/javascript' src='http://127.0.0.1:1111/scripts/scripts.js'></script>
   <script>hljs.highlightAll();</script>
   <script data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
-<script src="/livereload.js?port=1025&amp;mindelay=10"></script></body>
+<script src="/livereload.js?port=1024&amp;mindelay=10"></script></body>
 </html>
diff --git a/docs/public/design.css b/docs/public/design.css
index 5b24f4a..e5afbbf 100644
--- a/docs/public/design.css
+++ b/docs/public/design.css
@@ -1,4 +1,4 @@
-*,*::before,*::after{box-sizing:border-box}body,figure,blockquote,dl,dd{margin:0}ul.reset,ol.reset{list-style:none;margin:0;padding:0}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block;object-fit:contain}table{margin:0;padding:0;border:none;border-collapse:collapse;border-spacing:0}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}:root{--pink:         #e64980;--purple:       #9c36b5;--teal:         #087f5b;--light-yellow: #fff3bf;--yellow:       #ffe066;--gray-darkest: #0F172A;--gray-darker:  #334155;--gray-dark:    #64748B;--gray-lightest:#E2E8F0;--gray-lighter: #CBD5E1;--gray-light:   #94A3B8;--bg-site:      #fff;--link:         var(--pink);--link-hover:   var(--fc-darker);--link-visited: var(--purple);--fc-dark:      var(--gray-darkest);--fc-medium:    var(--gray-darker);--fc-light:     var(--gray-dark);--bg-aside:     var(--light-yellow);--border-aside: var(--yellow);--accent:       var(--purple);--spacing2:       0.2rem;--spacing4:       0.4rem;--spacing8:       0.8rem;--spacing12:      1.2rem;--spacing16:      1.6rem;--spacing24:      2.4rem;--spacing36:      3.6rem;--spacing48:      4.8rem;--spacing64:      6.4rem;--spacing96:      9.6rem;--spacing128:     12.8rem;--margin-bottom:  var(--spacing16);--section-spacer: var(--spacing36);--fs-xs:      0.875rem;--fs-sm:      1rem;--fs-md:      1.125rem;--fs-lg:      1.5rem;--fs-xl:      2rem;--fs-xxl:     3rem;--lh-sm:  1.3rem;--lh-md:  1.67rem;--lh-lg:  2rem;--ff-mono:   ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace}html{scroll-behavior:smooth;color-scheme:light dark}body{font-family:'Jost', sans-serif;font-size:var(--fs-md);color:var(--fc-medium);line-height:var(--lh-md);letter-spacing:-0.15px;background-color:var(--bg-site)}h1{font-size:var(--fs-xxl);color:var(--fc-dark)}h2{font-size:var(--fs-xl);color:var(--fc-dark)}h3{font-size:var(--fs-lg);color:var(--fc-dark)}h4{font-size:var(--fs-sm);color:var(--fc-dark)}small{display:inline-block;font-size:var(--fs-xs);line-height:var(--lh-sm);color:var(--fc-light)}.nowrap{white-space:nowrap}article :not(.reset) li:not(:last-child){margin-bottom:var(--spacing4)}a{color:var(--link)}a:hover,a:focus,a:active{color:var(--link-hover)}a:visited{color:var(--link-visited)}article h2{padding-top:var(--section-spacer);margin:var(--section-spacer) 0 calc(var(--section-spacer)/2);border-top:1px solid var(--gray-lightest)}article h3{padding-top:calc(var(--section-spacer) * .67)}code{font-size:var(--fs-sm)}@media (prefers-color-scheme: light){.light-hide{display:none !important}}body::before{content:"";display:block;position:fixed;z-index:2;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--pink) 0%, var(--purple) 50%, blue 100%);background-image:linear-gradient(90deg, var(--purple) 10%, var(--pink) 50%, var(--yellow) 90%)}.site{max-width:84rem;margin:auto;display:grid;grid-template-columns:260px 1fr 260px;grid-gap:var(--spacing36)}.sitenav{padding:var(--spacing24);position:sticky;top:0;align-self:start;height:100vh;border-right:1px solid var(--gray-lightest)}.sitenav .logo{margin-bottom:var(--margin-bottom)}.sitenav .mobile-menu{display:none}.sitenav li:not(.minor){margin-bottom:var(--spacing4)}.sitenav a,.sitenav a:visited{color:var(--gray-darkest);font-size:var(--fs-sm);text-decoration:none}.sitenav a:hover,.sitenav a:focus,.sitenav a:active{color:var(--link)}#page-home .sitenav-home,#page-templates .sitenav-templates,#page-components .sitenav-components,#page-hybrid-responsive .sitenav-hybrid-responsive,#page-outlook .sitenav-outlook,#page-dark-mode .sitenav-dark-mode,#page-best-practices .sitenav-best-practices{position:relative;display:flex;align-items:center;color:var(--link)}#page-home .sitenav-home::before,#page-templates .sitenav-templates::before,#page-components .sitenav-components::before,#page-hybrid-responsive .sitenav-hybrid-responsive::before,#page-outlook .sitenav-outlook::before,#page-dark-mode .sitenav-dark-mode::before,#page-best-practices .sitenav-best-practices::before{display:block;content:"";height:14px;width:8px;position:absolute;left:-14px;top:7px;background:url("images/icon-active.svg") no-repeat}.first-minor{margin-top:var(--spacing12)}.sitenav .minor a,.sitenav .minor a:visited,.sitenav button{color:var(--gray-dark);font-size:var(--fs-xs);display:flex;align-items:center;gap:var(--spacing4)}.darkmode-toggle{padding:0;background:0;border:0;cursor:pointer}article{padding-bottom:var(--section-spacer)}header{padding-top:var(--spacing48)}header h1{font-size:var(fs-xxl);margin:0 0 var(--spacing16);letter-spacing:-1px;color:var(--accent)}header p{margin:0;font-size:var(--fs-lg);line-height:var(--lh-lg)}.email-logos{display:flex;flex-wrap:wrap;gap:var(--spacing12);align-items:center;margin:var(--spacing16) 0}code{font-family:var(--ff-mono)}code:not(.hljs){font-size:var(--fs-xs);padding:var(--spacing2) var(--spacing4);background:var(--gray-lightest);background:rgba(0,0,0,0.08);color:var(--teal);opacity:.8;border-radius:4px}pre{white-space:pre-wrap}pre code{border-radius:4px;max-width:100%;overflow-x:auto;display:block;padding:var(--spacing8)}pre code[data-lang]{position:relative}pre code[data-lang]::before{content:attr(data-lang);padding:var(--spacing2) var(--spacing4);background:rgba(255,255,255,0.1);color:#fff;position:absolute;top:0;right:0;font-size:var(--fs-xs);line-height:1.5;letter-spacing:1px}figure pre{margin-bottom:0}figure pre code{border-bottom-right-radius:0;border-bottom-left-radius:0}.example{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border:1px solid var(--gray-lighter);border-top:0;margin-bottom:var(--margin-bottom)}.example *{font-family:sans-serif}.example-padded{padding:var(--spacing16)}.data-table{width:100%;margin-bottom:var(--spacing36);font-size:var(--fs-sm);margin-bottom:var(--margin-bottom)}.data-table th,.data-table td{padding:var(--spacing8) var(--spacing4);line-height:var(--lh-sm)}.data-table th{text-align:left;border-bottom:2px solid var(--gray-lighter)}.data-table td{border-bottom:1px solid var(--gray-lighter)}.data-table code{white-space:nowrap}aside{border-radius:4px;background-color:var(--bg-aside);border:1px solid var(--border-aside);padding:var(--spacing8);margin-bottom:var(--margin-bottom)}aside img{display:block;margin-top:var(--spacing8)}aside[data-emoji]{position:relative;padding-left:var(--spacing36)}aside[data-emoji]::before{content:attr(data-emoji);padding:var(--spacing2) var(--spacing4);position:absolute;top:0;left:0;bottom:0;background:var(--border-aside);padding:0 var(--spacing8);display:flex;align-items:center;font-size:var(--fs-lg)}.email-client-support{border:3px solid var(--gray-lighter);padding:var(--spacing8);border-radius:4px;margin-bottom:var(--margin-bottom)}.three-columns{display:grid;grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr));grid-gap:1rem;margin-bottom:var(--margin-bottom)}.htmlio-ad{display:flex;gap:var(--spacing12);align-items:center;text-decoration:none;border:1px solid var(--link);padding:var(--spacing2);margin-top:var(--spacing24)}.htmlio-ad .htmlio-ad-img{flex:1 0 auto}.htmlio-ad h4{margin:0;font-size:var(--fs-md)}.htmlio-ad p{font-size:var(--fs-sm);color:var(--gray-dark);line-height:var(--lh-sm);margin:var(--spacing4) 0}.htmlio-ad .link{color:var(--link);text-decoration:underline;font-weight:bold}.on-this-page{position:sticky;top:0;align-self:start;padding-top:var(--spacing64)}.on-this-page h4{margin:0 0 var(--spacing4)}.on-this-page a,.on-this-page a:visited{color:var(--gray-darkest);font-size:var(--fs-sm);text-decoration:none}.on-this-page a:after{content:"";display:table;clear:both}.on-this-page a:hover,.on-this-page a:focus,.on-this.page a:active{color:var(--link)}.on-this-page .toc-H3{font-size:var(--fs-xs);margin-left:var(--spacing8)}@media (max-width: 84rem){.data-table code{white-space:normal}}@media (max-width: 1000px){.site{grid-template-columns:250px 1fr var(--spacing16);grid-gap:var(--spacing16)}.on-this-page{display:none}}@media (max-width: 700px){:root{--section-spacer: var(--spacing12)}.site{display:block}.sitenav,article{padding-left:var(--spacing12);padding-right:var(--spacing12)}.sitenav{border-right:0;border-bottom:1px solid var(--gray-lightest);display:block;height:auto;padding-top:var(--spacing4);padding-bottom:var(--spacing4);background:var(--bg-site);line-height:0;z-index:1}.sitenav .logo{width:80px;height:50px;margin-bottom:0;display:inline-block}.sitenav .mobile-menu{display:block;float:right;background-color:transparent;display:flex;gap:var(--spacing8);align-items:center;border:0;padding:var(--spacing8);border-radius:4px;border:1px solid var(--gray-lightest);cursor:pointer;margin-top:var(--spacing4);color:var(--gray-dark)}.sitenav .menu-icon{position:relative;height:14px;width:18px}.sitenav .icon-bar{height:2px;position:absolute;left:0;border-radius:2px}.sitenav .bar1{top:0;width:100%;background-color:var(--purple)}.sitenav .bar2{top:calc(50% - 1px);width:70%;background-color:var(--pink)}.sitenav .bar3{bottom:0;width:90%;background-color:var(--purple)}.sitenav ul{height:0;overflow:hidden;opacity:0;transition:all 150ms ease-in-out;line-height:var(--lh-md)}.sitenav li:first-child{margin-top:var(--spacing12)}.sitenav li:last-child{margin-bottom:var(--spacing12)}.sitenav ul.open{height:auto;overflow:visible;opacity:1}}@media (prefers-color-scheme: dark){:root{--pink:         #e64980;--purple:       #da77f2;--teal:         #63e6be;--light-yellow: #854D0E;--yellow:       #713F12;--gray-lightest:#0F172A;--gray-lighter: #334155;--gray-light:   #64748B;--gray-darkest: #E2E8F0;--gray-darker:  #CBD5E1;--gray-dark:    #94A3B8;--bg-site:      var(--gray-lightest)}.dark-hide{display:none !important}.sitenav,article h2{border-color:var(--gray-lighter)}.dark-fill-white{fill:var(--gray-dark)}code:not(.hljs){background:var(--gray-lighter)}}/*!
+*,*::before,*::after{box-sizing:border-box}body,figure,blockquote,dl,dd{margin:0}ul.reset,ol.reset{list-style:none;margin:0;padding:0}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block;object-fit:contain}table{margin:0;padding:0;border:none;border-collapse:collapse;border-spacing:0}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}:root{--pink:         #e64980;--purple:       #9c36b5;--teal:         #087f5b;--light-yellow: #fff3bf;--yellow:       #ffe066;--gray-darkest: #0F172A;--gray-darker:  #334155;--gray-dark:    #64748B;--gray-lightest:#E2E8F0;--gray-lighter: #CBD5E1;--gray-light:   #94A3B8;--bg-site:      #fff;--link:         var(--pink);--link-hover:   var(--fc-darker);--link-visited: var(--purple);--fc-dark:      var(--gray-darkest);--fc-medium:    var(--gray-darker);--fc-light:     var(--gray-dark);--bg-aside:     var(--light-yellow);--border-aside: var(--yellow);--accent:       var(--purple);--spacing2:       0.2rem;--spacing4:       0.4rem;--spacing8:       0.8rem;--spacing12:      1.2rem;--spacing16:      1.6rem;--spacing24:      2.4rem;--spacing36:      3.6rem;--spacing48:      4.8rem;--spacing64:      6.4rem;--spacing96:      9.6rem;--spacing128:     12.8rem;--margin-bottom:  var(--spacing16);--section-spacer: var(--spacing36);--fs-xs:      0.875rem;--fs-sm:      1rem;--fs-md:      1.125rem;--fs-lg:      1.5rem;--fs-xl:      2rem;--fs-xxl:     3rem;--lh-sm:  1.3rem;--lh-md:  1.67rem;--lh-lg:  2rem;--ff-mono:   ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace}html{scroll-behavior:smooth;color-scheme:light dark}body{font-family:'Jost', sans-serif;font-size:var(--fs-md);color:var(--fc-medium);line-height:var(--lh-md);letter-spacing:-0.15px;background-color:var(--bg-site)}h1{font-size:var(--fs-xxl);color:var(--fc-dark)}h2{font-size:var(--fs-xl);color:var(--fc-dark)}h3{font-size:var(--fs-lg);color:var(--fc-dark)}h4{font-size:var(--fs-sm);color:var(--fc-dark)}small{display:inline-block;font-size:var(--fs-xs);line-height:var(--lh-sm);color:var(--fc-light)}.nowrap{white-space:nowrap}article :not(.reset) li:not(:last-child){margin-bottom:var(--spacing4)}a{color:var(--link)}a:hover,a:focus,a:active{color:var(--link-hover)}a:not(.button):visited{color:var(--link-visited)}article h2{padding-top:var(--section-spacer);margin:var(--section-spacer) 0 calc(var(--section-spacer)/2);border-top:1px solid var(--gray-lightest)}article h3{padding-top:calc(var(--section-spacer) * .67)}code{font-size:var(--fs-sm)}@media (prefers-color-scheme: light){.light-hide{display:none !important}}body::before{content:"";display:block;position:fixed;z-index:2;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--pink) 0%, var(--purple) 50%, blue 100%);background-image:linear-gradient(90deg, var(--purple) 10%, var(--pink) 50%, var(--yellow) 90%)}.site{max-width:84rem;margin:auto;display:grid;grid-template-columns:260px 1fr 260px;grid-gap:var(--spacing36)}.sitenav{padding:var(--spacing24);position:sticky;top:0;align-self:start;height:100vh;border-right:1px solid var(--gray-lightest)}.sitenav .logo{margin-bottom:var(--margin-bottom)}.sitenav .mobile-menu{display:none}.sitenav li:not(.minor){margin-bottom:var(--spacing4)}.sitenav a,.sitenav a:visited{color:var(--gray-darkest);font-size:var(--fs-sm);text-decoration:none}.sitenav a:hover,.sitenav a:focus,.sitenav a:active{color:var(--link)}#page-home .sitenav-home,#page-templates .sitenav-templates,#page-components .sitenav-components,#page-hybrid-responsive .sitenav-hybrid-responsive,#page-outlook .sitenav-outlook,#page-dark-mode .sitenav-dark-mode,#page-best-practices .sitenav-best-practices{position:relative;display:flex;align-items:center;color:var(--link)}#page-home .sitenav-home::before,#page-templates .sitenav-templates::before,#page-components .sitenav-components::before,#page-hybrid-responsive .sitenav-hybrid-responsive::before,#page-outlook .sitenav-outlook::before,#page-dark-mode .sitenav-dark-mode::before,#page-best-practices .sitenav-best-practices::before{display:block;content:"";height:14px;width:8px;position:absolute;left:-14px;top:7px;background:url("images/icon-active.svg") no-repeat}.first-minor{margin-top:var(--spacing12)}.sitenav .minor a,.sitenav .minor a:visited,.sitenav button{color:var(--gray-dark);font-size:var(--fs-xs);display:flex;align-items:center;gap:var(--spacing4)}.darkmode-toggle{padding:0;background:0;border:0;cursor:pointer}article{padding-bottom:var(--section-spacer)}header{padding-top:var(--spacing48)}header h1{font-size:var(fs-xxl);margin:0 0 var(--spacing16);letter-spacing:-1px;color:var(--accent)}header p{margin:0;font-size:var(--fs-lg);line-height:var(--lh-lg)}.email-logos{display:flex;flex-wrap:wrap;gap:var(--spacing12);align-items:center;margin:var(--spacing16) 0}code{font-family:var(--ff-mono)}code:not(.hljs){font-size:var(--fs-xs);padding:var(--spacing2) var(--spacing4);background:var(--gray-lightest);background:rgba(0,0,0,0.08);color:var(--teal);opacity:.8;border-radius:4px}pre{white-space:pre-wrap}pre code{border-radius:4px;max-width:100%;overflow-x:auto;display:block;padding:var(--spacing8)}pre code[data-lang]{position:relative}pre code[data-lang]::before{content:attr(data-lang);padding:var(--spacing2) var(--spacing4);background:rgba(255,255,255,0.1);color:#fff;position:absolute;top:0;right:0;font-size:var(--fs-xs);line-height:1.5;letter-spacing:1px}figure pre{margin-bottom:0}figure pre code{border-bottom-right-radius:0;border-bottom-left-radius:0}.example{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border:1px solid var(--gray-lighter);border-top:0;margin-bottom:var(--margin-bottom)}.example *{font-family:sans-serif}.example-padded{padding:var(--spacing16)}.data-table{width:100%;margin-bottom:var(--spacing36);font-size:var(--fs-sm);margin-bottom:var(--margin-bottom)}.data-table th,.data-table td{padding:var(--spacing8) var(--spacing4);line-height:var(--lh-sm)}.data-table th{text-align:left;border-bottom:2px solid var(--gray-lighter)}.data-table td{border-bottom:1px solid var(--gray-lighter)}.data-table code{white-space:nowrap}aside{border-radius:4px;background-color:var(--bg-aside);border:1px solid var(--border-aside);padding:var(--spacing8);margin-bottom:var(--margin-bottom)}aside img{display:block;margin-top:var(--spacing8)}aside[data-emoji]{position:relative;padding-left:var(--spacing36)}aside[data-emoji]::before{content:attr(data-emoji);padding:var(--spacing2) var(--spacing4);position:absolute;top:0;left:0;bottom:0;background:var(--border-aside);padding:0 var(--spacing8);display:flex;align-items:center;font-size:var(--fs-lg)}.buttons{display:flex;gap:var(--spacing4)}.button{display:flex;padding:var(--spacing8) var(--spacing12);text-decoration:none;border-radius:4px}.button-primary{background-color:var(--link);color:#fff}.button-primary:hover,.button-primary:focus,.button-primary:active{background-color:var(--gray-darker);color:#fff}.button-secondary{border:1px solid var(--link)}.button-secondary:hover,.button-secondary:focus,.button-secondary:active{border-color:var(--link-hover)}.email-client-support{border:3px solid var(--gray-lighter);padding:var(--spacing8);border-radius:4px;margin-bottom:var(--margin-bottom)}.three-columns{display:grid;grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr));grid-gap:1rem;margin-bottom:var(--margin-bottom)}.htmlio-ad{display:flex;gap:var(--spacing12);align-items:center;text-decoration:none;border:1px solid var(--link);padding:var(--spacing2);margin-top:var(--spacing24)}.htmlio-ad .htmlio-ad-img{flex:1 0 auto}.htmlio-ad h4{margin:0;font-size:var(--fs-md)}.htmlio-ad p{font-size:var(--fs-sm);color:var(--gray-dark);line-height:var(--lh-sm);margin:var(--spacing4) 0}.htmlio-ad .link{color:var(--link);text-decoration:underline;font-weight:bold}.on-this-page{position:sticky;top:0;align-self:start;padding-top:var(--spacing64)}.on-this-page h4{margin:0 0 var(--spacing4)}.on-this-page a,.on-this-page a:visited{color:var(--gray-darkest);font-size:var(--fs-sm);text-decoration:none}.on-this-page a:after{content:"";display:table;clear:both}.on-this-page a:hover,.on-this-page a:focus,.on-this.page a:active{color:var(--link)}.on-this-page .toc-H3{font-size:var(--fs-xs);margin-left:var(--spacing8)}@media (max-width: 84rem){.data-table code{white-space:normal}}@media (max-width: 1000px){.site{grid-template-columns:250px 1fr var(--spacing16);grid-gap:var(--spacing16)}.on-this-page{display:none}}@media (max-width: 700px){:root{--section-spacer: var(--spacing12)}.site{display:block}.sitenav,article{padding-left:var(--spacing12);padding-right:var(--spacing12)}.sitenav{border-right:0;border-bottom:1px solid var(--gray-lightest);display:block;height:auto;padding-top:var(--spacing4);padding-bottom:var(--spacing4);background:var(--bg-site);line-height:0;z-index:1}.sitenav .logo{width:80px;height:50px;margin-bottom:0;display:inline-block}.sitenav .mobile-menu{display:block;float:right;background-color:transparent;display:flex;gap:var(--spacing8);align-items:center;border:0;padding:var(--spacing8);border-radius:4px;border:1px solid var(--gray-lightest);cursor:pointer;margin-top:var(--spacing4);color:var(--gray-dark)}.sitenav .menu-icon{position:relative;height:14px;width:18px}.sitenav .icon-bar{height:2px;position:absolute;left:0;border-radius:2px}.sitenav .bar1{top:0;width:100%;background-color:var(--purple)}.sitenav .bar2{top:calc(50% - 1px);width:70%;background-color:var(--pink)}.sitenav .bar3{bottom:0;width:90%;background-color:var(--purple)}.sitenav ul{height:0;overflow:hidden;opacity:0;transition:all 150ms ease-in-out;line-height:var(--lh-md)}.sitenav li:first-child{margin-top:var(--spacing12)}.sitenav li:last-child{margin-bottom:var(--spacing12)}.sitenav ul.open{height:auto;overflow:visible;opacity:1}}@media (prefers-color-scheme: dark){:root{--pink:         #e64980;--purple:       #da77f2;--teal:         #63e6be;--light-yellow: #854D0E;--yellow:       #713F12;--gray-lightest:#0F172A;--gray-lighter: #334155;--gray-light:   #64748B;--gray-darkest: #E2E8F0;--gray-darker:  #CBD5E1;--gray-dark:    #94A3B8;--bg-site:      var(--gray-lightest)}.dark-hide{display:none !important}.sitenav,article h2{border-color:var(--gray-lighter)}.dark-fill-white{fill:var(--gray-dark)}code:not(.hljs){background:var(--gray-lighter)}}/*!
   Theme: Dracula
   Author: Mike Barkmin (http://github.com/mikebarkmin) based on Dracula Theme (http://github.com/dracula)
   License: ~ MIT (or more permissive) [via base16-schemes-source]
diff --git a/docs/public/hybrid-responsive/index.html b/docs/public/hybrid-responsive/index.html
index 3de56ac..a88e79d 100644
--- a/docs/public/hybrid-responsive/index.html
+++ b/docs/public/hybrid-responsive/index.html
@@ -5,14 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title> Hybrid vs. Responsive </title>
   <meta name="description" content=" Hybrid email design is similar to responsive email design, but without the use of media queries. Instead, the hybrid design uses fluid tables and images with max-width properties to create email layouts. ">
-  <link rel="stylesheet" href="design.css">
+  <link rel="stylesheet" href="http://127.0.0.1:1111/design.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet">
 
   <meta property="og:title" content="Cerberus - Patterns for Responsive HTML Email Templates">
   <meta property="og:description" content="A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.">
-  <meta property="og:image" content="https://tedgoas.github.io/Cerberus/images/og-image.png" />
+  <meta property="og:image" content="http://127.0.0.1:1111/images/og-image.png" />
   <meta property="og:image:alt" content="Cerberus: A few simple, but solid patterns for responsive, accessible HTML email in (almost) every email client.">
   <meta property="og:locale" content="en_EN">
   <meta property="og:type" content="website">
@@ -20,17 +20,17 @@
   <meta property="og:url" content="https://tedgoas.github.io/Cerberus">
   <link rel="canonical" href="https://tedgoas.github.io/Cerberus">
 
-  <link rel="icon" href="https://tedgoas.github.io/Cerberus/favicon.ico" sizes="any">
-  <link rel="icon" href="https://tedgoas.github.io/Cerberus/favicon.svg" type="image/svg+xml">
-  <link rel="shortcut icon" href="https://tedgoas.github.io/Cerberus/favicon.png">
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="shortcut icon" href="http://127.0.0.1:1111/favicon.png">
 
 </head>
 <body id="page-hybrid-responsive">
   <div class="site">
     <nav class="sitenav">
       <div class="mobile-header">
-        <a href="/" rel="home"><img src="images/logo-cerberus-light.svg" alt="Cerberus logo." class="logo dark-hide"></a>
-        <a href="/" rel="home"><img src="images/logo-cerberus-dark.svg" alt="Cerberus logo." class="logo light-hide"></a>
+        <a href="/" rel="home"><img src="http://127.0.0.1:1111/images/logo-cerberus-light.svg" alt="Cerberus logo." class="logo dark-hide"></a>
+        <a href="/" rel="home"><img src="http://127.0.0.1:1111/images/logo-cerberus-dark.svg" alt="Cerberus logo." class="logo light-hide"></a>
         <button class="mobile-menu" onclick="siteNav()">Menu <div class="menu-icon"><span class="icon-bar bar1"></span><span class="icon-bar bar2"></span><span class="icon-bar bar3"></span></div></button>
       </div>
       <ul class="reset" id="sitenav-ul">
@@ -50,7 +50,7 @@
           <path d="M8 10V2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
           Download Zip
         </a></li>
-        <li class="minor"><a href="https://github.com/sponsors/TedGoas"><img src="images/icon-heart.svg" alt="" height="16" width="16" border="0"> Sponsor Me</a></li>
+        <li class="minor"><a href="https://github.com/sponsors/TedGoas"><img src="http://127.0.0.1:1111/images/icon-heart.svg" alt="" height="16" width="16" border="0"> Sponsor Me</a></li>
       </ul>
     </nav>
 
@@ -101,8 +101,8 @@ <h2 id="hybrid">Hybrid</h2>
     </article>
     <div class="on-this-page"></div>
   </div>
-  <script type='text/javascript' src='scripts/scripts.js'></script>
+  <script type='text/javascript' src='http://127.0.0.1:1111/scripts/scripts.js'></script>
   <script>hljs.highlightAll();</script>
   <script data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
-<script src="/livereload.js?port=1025&amp;mindelay=10"></script></body>
+<script src="/livereload.js?port=1024&amp;mindelay=10"></script></body>
 </html>
diff --git a/docs/public/index.html b/docs/public/index.html
index 782dace..4c7e64a 100644
--- a/docs/public/index.html
+++ b/docs/public/index.html
@@ -5,14 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Cerberus - Patterns for Responsive HTML Email Templates</title>
   <meta name="description" content="A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.">
-  <link rel="stylesheet" href="design.css">
+  <link rel="stylesheet" href="http://127.0.0.1:1111/design.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet">
 
   <meta property="og:title" content="Cerberus - Patterns for Responsive HTML Email Templates">
   <meta property="og:description" content="A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.">
-  <meta property="og:image" content="https://tedgoas.github.io/Cerberus/images/og-image.png" />
+  <meta property="og:image" content="http://127.0.0.1:1111/images/og-image.png" />
   <meta property="og:image:alt" content="Cerberus: A few simple, but solid patterns for responsive, accessible HTML email in (almost) every email client.">
   <meta property="og:locale" content="en_EN">
   <meta property="og:type" content="website">
@@ -20,17 +20,17 @@
   <meta property="og:url" content="https://tedgoas.github.io/Cerberus">
   <link rel="canonical" href="https://tedgoas.github.io/Cerberus">
 
-  <link rel="icon" href="https://tedgoas.github.io/Cerberus/favicon.ico" sizes="any">
-  <link rel="icon" href="https://tedgoas.github.io/Cerberus/favicon.svg" type="image/svg+xml">
-  <link rel="shortcut icon" href="https://tedgoas.github.io/Cerberus/favicon.png">
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="shortcut icon" href="http://127.0.0.1:1111/favicon.png">
 
 </head>
 <body id="page-home">
   <div class="site">
     <nav class="sitenav">
       <div class="mobile-header">
-        <a href="/" rel="home"><img src="images/logo-cerberus-light.svg" alt="Cerberus logo." class="logo dark-hide"></a>
-        <a href="/" rel="home"><img src="images/logo-cerberus-dark.svg" alt="Cerberus logo." class="logo light-hide"></a>
+        <a href="/" rel="home"><img src="http://127.0.0.1:1111/images/logo-cerberus-light.svg" alt="Cerberus logo." class="logo dark-hide"></a>
+        <a href="/" rel="home"><img src="http://127.0.0.1:1111/images/logo-cerberus-dark.svg" alt="Cerberus logo." class="logo light-hide"></a>
         <button class="mobile-menu" onclick="siteNav()">Menu <div class="menu-icon"><span class="icon-bar bar1"></span><span class="icon-bar bar2"></span><span class="icon-bar bar3"></span></div></button>
       </div>
       <ul class="reset" id="sitenav-ul">
@@ -50,7 +50,7 @@
           <path d="M8 10V2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
           Download Zip
         </a></li>
-        <li class="minor"><a href="https://github.com/sponsors/TedGoas"><img src="images/icon-heart.svg" alt="" height="16" width="16" border="0"> Sponsor Me</a></li>
+        <li class="minor"><a href="https://github.com/sponsors/TedGoas"><img src="http://127.0.0.1:1111/images/icon-heart.svg" alt="" height="16" width="16" border="0"> Sponsor Me</a></li>
       </ul>
     </nav>
 
@@ -60,13 +60,13 @@
         <h1 class="">Cerberus</h1>
         <p>A few simple, but solid patterns for responsive, accessible HTML email in (almost) every email client.</p>
         <div class="email-logos">
-          <img src="images/gmail.svg" alt="Gmail.">
-          <img src="images/apple.svg" alt="Apple.">
-          <img src="images/outlook.svg" alt="Outlook.">
-          <img src="images/yahoo.svg" alt="Yahoo!.">
-          <img src="images/android.svg" alt="Android.">
-          <img src="images/aol-light.svg" alt="Aol." class="dark-hide">
-          <img src="images/aol-dark.svg" alt="Aol." class="light-hide">
+          <img src="http://127.0.0.1:1111/images/gmail.svg" alt="Gmail.">
+          <img src="http://127.0.0.1:1111/images/apple.svg" alt="Apple.">
+          <img src="http://127.0.0.1:1111/images/outlook.svg" alt="Outlook.">
+          <img src="http://127.0.0.1:1111/images/yahoo.svg" alt="Yahoo!.">
+          <img src="http://127.0.0.1:1111/images/android.svg" alt="Android.">
+          <img src="http://127.0.0.1:1111/images/aol-light.svg" alt="Aol." class="dark-hide">
+          <img src="http://127.0.0.1:1111/images/aol-dark.svg" alt="Aol." class="light-hide">
         </div>
         <p>Because between mobile, Gmail, and Outlook, HTML email is a <span class="nowrap">three-headed dog</span> from hell.</p>
       </header>
@@ -168,7 +168,7 @@ <h2>Special thanks</h2>
       </ul>
       <a href="https://gumroad.com/a/29078643" class="htmlio-ad">
         <div class="htmlio-ad-img">
-          <img src="images/htmlio-180x150.png" alt="" width="180" height="150">
+          <img src="http://127.0.0.1:1111/images/htmlio-180x150.png" alt="" width="180" height="150">
         </div>
         <div class="htmlio-ad-text">
           <h4>Ready Made HTML Email Templates</h4>
@@ -180,8 +180,8 @@ <h4>Ready Made HTML Email Templates</h4>
     </article>
     <div class="on-this-page"></div>
   </div>
-  <script type='text/javascript' src='scripts/scripts.js'></script>
+  <script type='text/javascript' src='http://127.0.0.1:1111/scripts/scripts.js'></script>
   <script>hljs.highlightAll();</script>
   <script data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
-<script src="/livereload.js?port=1025&amp;mindelay=10"></script></body>
+<script src="/livereload.js?port=1024&amp;mindelay=10"></script></body>
 </html>
diff --git a/docs/public/outlook/index.html b/docs/public/outlook/index.html
index c312849..f8b0ff9 100644
--- a/docs/public/outlook/index.html
+++ b/docs/public/outlook/index.html
@@ -5,14 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title> Outlook Conditional CSS </title>
   <meta name="description" content=" Some versions of Windows Outlook use Microsoft Word as a rendering engine, which can lead to some odd rendering issues. Outlook conditional comments allow us to add or exclude code that is only read by these versions of Outlook. ">
-  <link rel="stylesheet" href="design.css">
+  <link rel="stylesheet" href="http://127.0.0.1:1111/design.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet">
 
   <meta property="og:title" content="Cerberus - Patterns for Responsive HTML Email Templates">
   <meta property="og:description" content="A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.">
-  <meta property="og:image" content="https://tedgoas.github.io/Cerberus/images/og-image.png" />
+  <meta property="og:image" content="http://127.0.0.1:1111/images/og-image.png" />
   <meta property="og:image:alt" content="Cerberus: A few simple, but solid patterns for responsive, accessible HTML email in (almost) every email client.">
   <meta property="og:locale" content="en_EN">
   <meta property="og:type" content="website">
@@ -20,17 +20,17 @@
   <meta property="og:url" content="https://tedgoas.github.io/Cerberus">
   <link rel="canonical" href="https://tedgoas.github.io/Cerberus">
 
-  <link rel="icon" href="https://tedgoas.github.io/Cerberus/favicon.ico" sizes="any">
-  <link rel="icon" href="https://tedgoas.github.io/Cerberus/favicon.svg" type="image/svg+xml">
-  <link rel="shortcut icon" href="https://tedgoas.github.io/Cerberus/favicon.png">
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="shortcut icon" href="http://127.0.0.1:1111/favicon.png">
 
 </head>
 <body id="page-outlook">
   <div class="site">
     <nav class="sitenav">
       <div class="mobile-header">
-        <a href="/" rel="home"><img src="images/logo-cerberus-light.svg" alt="Cerberus logo." class="logo dark-hide"></a>
-        <a href="/" rel="home"><img src="images/logo-cerberus-dark.svg" alt="Cerberus logo." class="logo light-hide"></a>
+        <a href="/" rel="home"><img src="http://127.0.0.1:1111/images/logo-cerberus-light.svg" alt="Cerberus logo." class="logo dark-hide"></a>
+        <a href="/" rel="home"><img src="http://127.0.0.1:1111/images/logo-cerberus-dark.svg" alt="Cerberus logo." class="logo light-hide"></a>
         <button class="mobile-menu" onclick="siteNav()">Menu <div class="menu-icon"><span class="icon-bar bar1"></span><span class="icon-bar bar2"></span><span class="icon-bar bar3"></span></div></button>
       </div>
       <ul class="reset" id="sitenav-ul">
@@ -50,7 +50,7 @@
           <path d="M8 10V2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
           Download Zip
         </a></li>
-        <li class="minor"><a href="https://github.com/sponsors/TedGoas"><img src="images/icon-heart.svg" alt="" height="16" width="16" border="0"> Sponsor Me</a></li>
+        <li class="minor"><a href="https://github.com/sponsors/TedGoas"><img src="http://127.0.0.1:1111/images/icon-heart.svg" alt="" height="16" width="16" border="0"> Sponsor Me</a></li>
       </ul>
     </nav>
 
@@ -125,8 +125,8 @@ <h2 id="conditional-logic">Conditional logic</h2>
     </article>
     <div class="on-this-page"></div>
   </div>
-  <script type='text/javascript' src='scripts/scripts.js'></script>
+  <script type='text/javascript' src='http://127.0.0.1:1111/scripts/scripts.js'></script>
   <script>hljs.highlightAll();</script>
   <script data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
-<script src="/livereload.js?port=1025&amp;mindelay=10"></script></body>
+<script src="/livereload.js?port=1024&amp;mindelay=10"></script></body>
 </html>
diff --git a/docs/public/templates/index.html b/docs/public/templates/index.html
index d21c37a..9cfce50 100644
--- a/docs/public/templates/index.html
+++ b/docs/public/templates/index.html
@@ -5,14 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title> The Templates </title>
   <meta name="description" content=" Cerberus includes fluid, responsive, and hybrid templates, which descriptions and use cases for each. ">
-  <link rel="stylesheet" href="design.css">
+  <link rel="stylesheet" href="http://127.0.0.1:1111/design.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet">
 
   <meta property="og:title" content="Cerberus - Patterns for Responsive HTML Email Templates">
   <meta property="og:description" content="A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.">
-  <meta property="og:image" content="https://tedgoas.github.io/Cerberus/images/og-image.png" />
+  <meta property="og:image" content="http://127.0.0.1:1111/images/og-image.png" />
   <meta property="og:image:alt" content="Cerberus: A few simple, but solid patterns for responsive, accessible HTML email in (almost) every email client.">
   <meta property="og:locale" content="en_EN">
   <meta property="og:type" content="website">
@@ -20,17 +20,17 @@
   <meta property="og:url" content="https://tedgoas.github.io/Cerberus">
   <link rel="canonical" href="https://tedgoas.github.io/Cerberus">
 
-  <link rel="icon" href="https://tedgoas.github.io/Cerberus/favicon.ico" sizes="any">
-  <link rel="icon" href="https://tedgoas.github.io/Cerberus/favicon.svg" type="image/svg+xml">
-  <link rel="shortcut icon" href="https://tedgoas.github.io/Cerberus/favicon.png">
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="shortcut icon" href="http://127.0.0.1:1111/favicon.png">
 
 </head>
 <body id="page-templates">
   <div class="site">
     <nav class="sitenav">
       <div class="mobile-header">
-        <a href="/" rel="home"><img src="images/logo-cerberus-light.svg" alt="Cerberus logo." class="logo dark-hide"></a>
-        <a href="/" rel="home"><img src="images/logo-cerberus-dark.svg" alt="Cerberus logo." class="logo light-hide"></a>
+        <a href="/" rel="home"><img src="http://127.0.0.1:1111/images/logo-cerberus-light.svg" alt="Cerberus logo." class="logo dark-hide"></a>
+        <a href="/" rel="home"><img src="http://127.0.0.1:1111/images/logo-cerberus-dark.svg" alt="Cerberus logo." class="logo light-hide"></a>
         <button class="mobile-menu" onclick="siteNav()">Menu <div class="menu-icon"><span class="icon-bar bar1"></span><span class="icon-bar bar2"></span><span class="icon-bar bar3"></span></div></button>
       </div>
       <ul class="reset" id="sitenav-ul">
@@ -50,7 +50,7 @@
           <path d="M8 10V2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
           Download Zip
         </a></li>
-        <li class="minor"><a href="https://github.com/sponsors/TedGoas"><img src="images/icon-heart.svg" alt="" height="16" width="16" border="0"> Sponsor Me</a></li>
+        <li class="minor"><a href="https://github.com/sponsors/TedGoas"><img src="http://127.0.0.1:1111/images/icon-heart.svg" alt="" height="16" width="16" border="0"> Sponsor Me</a></li>
       </ul>
     </nav>
 
@@ -61,15 +61,27 @@ <h2 id="fluid-template">Fluid Template</h2>
 <p><img src="/images/template-fluid.svg" alt="example image" title="Fluid email template." /></p>
 <p>This template focuses on a fluid layout that sizes itself using percentage-based widths to shrink horizontally on narrow screens. This email layout does not reconfigure at different screen sizes.</p>
 <p>Good for simple transactional emails and single column layouts. If you want a basic template to handle rich text and images, this is a good baseline.</p>
+<div class="buttons">
+  <a href="http://htmlpreview.github.io/?https://github.com/TedGoas/Cerberus/blob/master/cerberus-fluid.html" class="button button-primary">View a demo</a>
+  <a href="https://raw.githubusercontent.com/TedGoas/Cerberus/master/cerberus-fluid.html" class="button button-secondary">View code</a>
+</div>
 <h2 id="responsive-template">Responsive Template</h2>
 <p><img src="/images/template-responsive.svg" alt="example image" title="Responsive email template." /></p>
 <p>Good for more complicated, shape-shifting email layouts that work on <em>some</em> mobile clients.</p>
 <p>This template uses media queries to reconfigure the layout for different screen sizes for email clients that support media queries. However, mobile clients that don’t support media queries or the <code>&lt;style&gt;</code> tag will display a shrunk version of the desktop layout instead. This applies to some versions of Gmail (<a href="https://litmus.com/blog/gmail-to-support-responsive-email-design">still</a>) and Yahoo, as well as a number of international email clients (<a href="https://emails.hteumeuleu.com/should-we-stop-inlining-styles-in-emails-8c3b64f0d407#.57mlzfimq">more info on that here</a>).</p>
 <p>If you’re already comfortable with media queries, the learning curve is relatively low. If total device coverage isn’t required, you can create a responsive email the same way you create a responsive website.</p>
+<div class="buttons">
+  <a href="http://htmlpreview.github.io/?https://github.com/TedGoas/Cerberus/blob/master/cerberus-responsive.html" class="button button-primary">View a demo</a>
+  <a href="https://raw.githubusercontent.com/TedGoas/Cerberus/master/cerberus-responsive.html" class="button button-secondary">View code</a>
+</div>
 <h2 id="hybrid-template">Hybrid Template</h2>
 <p><img src="/images/template-hybrid.svg" alt="example image" title="Hybrid email template." /></p>
 <p>This template uses a hybrid approach to reconfigure the layout for different screen sizes for email clients regardless of media query support. At its core, it uses max-width and min-width to impose rigid baselines (allowing some movement) and imposes a fixed, wide width for Outlook who is shackled to the desktop anyway. Once a mobile-friendly baseline is set, media queries progressively enhance the email further in clients that support it.</p>
 <p>If you have some email design experience, this template optimizes every popular email client. All the extra Outlook code can make these templates quite large and your maths have to be spot on for multi-column layouts.</p>
+<div class="buttons">
+  <a href="http://htmlpreview.github.io/?https://github.com/TedGoas/Cerberus/blob/master/cerberus-hybrid.html" class="button button-primary">View a demo</a>
+  <a href="https://raw.githubusercontent.com/TedGoas/Cerberus/master/cerberus-hybrid.html" class="button button-secondary">View code</a>
+</div>
 <h2 id="archived-templates">Archived Templates</h2>
 <p>Templates in the archived-versions folder are not currently being maintained and should be considered unsupported and deprecated. They are kept around for historical purposes. 💫</p>
 <h2 id="known-issues">Known Issues</h2>
@@ -91,8 +103,8 @@ <h3 id="css-inliners">CSS Inliners</h3>
     </article>
     <div class="on-this-page"></div>
   </div>
-  <script type='text/javascript' src='scripts/scripts.js'></script>
+  <script type='text/javascript' src='http://127.0.0.1:1111/scripts/scripts.js'></script>
   <script>hljs.highlightAll();</script>
   <script data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
-<script src="/livereload.js?port=1025&amp;mindelay=10"></script></body>
+<script src="/livereload.js?port=1024&amp;mindelay=10"></script></body>
 </html>
diff --git a/docs/sass/design.scss b/docs/sass/design.scss
index b4e6fd0..e7fd9e2 100644
--- a/docs/sass/design.scss
+++ b/docs/sass/design.scss
@@ -163,7 +163,7 @@ a:focus,
 a:active {
   color: var(--link-hover);
 }
-a:visited {
+a:not(.button):visited {
   color: var(--link-visited);
 }
 article h2 {
@@ -422,6 +422,34 @@ aside[data-emoji]::before {
   align-items: center;
   font-size: var(--fs-lg);
 }
+.buttons {
+  display: flex;
+  gap: var(--spacing4);
+}
+.button {
+  display: flex;
+  padding: var(--spacing8) var(--spacing12);
+  text-decoration: none;
+  border-radius: 4px;
+}
+.button-primary {
+  background-color: var(--link);
+  color: #fff;
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: var(--gray-darker);
+    color: #fff;
+  }
+}
+.button-secondary {
+  border: 1px solid var(--link);
+  &:hover,
+  &:focus,
+  &:active {
+    border-color: var(--link-hover);
+  }
+}
 .email-client-support {
   border: 3px solid var(--gray-lighter);
   padding: var(--spacing8);