Add buttons to preview each template

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. 💫

docs/public/best-practices/index.html

@@ -5,32 +5,32 @@
   <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">
   <meta name="twitter:card" content="summary_large_image">
   <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>

docs/public/components/index.html

@@ -5,32 +5,32 @@
   <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">
   <meta name="twitter:card" content="summary_large_image">
   <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>

docs/public/dark-mode/index.html

@@ -5,32 +5,32 @@
   <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">
   <meta name="twitter:card" content="summary_large_image">
   <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>