From 44cc9d01a6736fbafd8a44d4290ff0754ff6198e Mon Sep 17 00:00:00 2001
From: Matthieu Solente <yuya1@hotmail.fr>
Date: Sun, 27 Feb 2022 19:28:45 +0100
Subject: [PATCH 1/4] adds to cerberus-hybrid.html

---
 cerberus-hybrid.html | 81 ++++++++++++++++++++++++--------------------
 1 file changed, 44 insertions(+), 37 deletions(-)

diff --git a/cerberus-hybrid.html b/cerberus-hybrid.html
index ce908b1..b3fd939 100644
--- a/cerberus-hybrid.html
+++ b/cerberus-hybrid.html
@@ -566,50 +566,57 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
 
                 <!-- Thumbnail Right, Text Left : BEGIN -->
                 <tr>
-                    <!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
-                    <td dir="rtl" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px; text-align: left; background-color: #ffffff;" class="darkmode-bg">
-                        <!--[if mso]>
-                        <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="660" style="width: 660px;">
-                        <tr>
-                        <td valign="top" width="220" style="width: 220px;">
-                        <![endif]-->
-                        <div style="display:inline-block; margin: 0 -1px; max-width: 220px; min-width:160px; vertical-align:top; width:100%;" class="stack-column">
-                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                                <tr>
-                                    <td dir="ltr" style="padding: 0 10px 10px 10px;">
-                                        <img src="https://via.placeholder.com/200" width="200" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
+                    <td style="font-size:0; padding: 10px; text-align: left; background-color: #ffffff;">
+                        <!-- Add an additionnal row and separating the padding from the dir attribute will avoid vertical 1px unwanted space on the edges. Place the padding on the top level cell, then dir attribute on the inner cell -->
+                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                            <tr>
+                                <!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
+                                <td dir="rtl" height="100%" valign="top" width="100%" class="darkmode-bg">
+                                    <!--[if mso]>
+                                    <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="660" style="width: 660px;">
+                                    <tr>
+                                    <td valign="top" width="220" style="width: 220px;">
+                                    <![endif]-->
+                                    <div style="display:inline-block; margin: 0 -1px; max-width: 220px; min-width:160px; vertical-align:top; width:100%;" class="stack-column">
+                                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                                            <tr>
+                                                <td dir="ltr" style="padding: 0 10px 10px 10px;">
+                                                    <img src="https://via.placeholder.com/200" width="200" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </div>
+                                    <!--[if mso]>
                                     </td>
-                                </tr>
-                            </table>
-                        </div>
-                        <!--[if mso]>
-                        </td>
-                        <td valign="top" width="440" style="width: 440px;">
-                        <![endif]-->
-                        <div style="display:inline-block; margin: 0 -1px; max-width: 440px; min-width:280px; vertical-align:top;" class="stack-column">
-                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                                <tr>
-                                    <td dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow">
-                                        <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 22px; color: #333333; font-weight: bold;">Class aptent taciti sociosqu</h2>
-                                        <p style="margin: 0 0 10px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
-                                        <!-- Button : BEGIN -->
-                                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
+                                    <td valign="top" width="440" style="width: 440px;">
+                                    <![endif]-->
+                                    <div style="display:inline-block; margin: 0 -1px; max-width: 440px; min-width:280px; vertical-align:top;" class="stack-column">
+                                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                             <tr>
-                                                <td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
-                                                    <a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Primary Button</a>
+                                                <td dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow">
+                                                    <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 22px; color: #333333; font-weight: bold;">Class aptent taciti sociosqu</h2>
+                                                    <p style="margin: 0 0 10px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
+                                                    <!-- Button : BEGIN -->
+                                                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
+                                                        <tr>
+                                                            <td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
+                                                                <a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Primary Button</a>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                    <!-- Button : END -->
                                                 </td>
                                             </tr>
                                         </table>
-                                        <!-- Button : END -->
+                                    </div>
+                                    <!--[if mso]>
                                     </td>
-                                </tr>
-                            </table>
-                        </div>
-                        <!--[if mso]>
-                        </td>
-                        </tr>
+                                    </tr>
+                                    </table>
+                                    <![endif]-->
+                                </td>
+                            </tr>
                         </table>
-                        <![endif]-->
                     </td>
                 </tr>
                 <!-- Thumbnail Right, Text Left : END -->

From 4b2e00e09408a12464ac694486d7b542cfdd1a73 Mon Sep 17 00:00:00 2001
From: Ted Goas <ted@tedgoas.com>
Date: Mon, 7 Mar 2022 21:34:03 -0500
Subject: [PATCH 2/4] Move dark mode utility class

---
 cerberus-hybrid.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cerberus-hybrid.html b/cerberus-hybrid.html
index b3fd939..8562495 100644
--- a/cerberus-hybrid.html
+++ b/cerberus-hybrid.html
@@ -566,12 +566,12 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
 
                 <!-- Thumbnail Right, Text Left : BEGIN -->
                 <tr>
-                    <td style="font-size:0; padding: 10px; text-align: left; background-color: #ffffff;">
+                    <td style="font-size:0; padding: 10px; text-align: left; background-color: #ffffff;" class="darkmode-bg">
                         <!-- Add an additionnal row and separating the padding from the dir attribute will avoid vertical 1px unwanted space on the edges. Place the padding on the top level cell, then dir attribute on the inner cell -->
                         <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                             <tr>
                                 <!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
-                                <td dir="rtl" height="100%" valign="top" width="100%" class="darkmode-bg">
+                                <td dir="rtl" height="100%" valign="top" width="100%">
                                     <!--[if mso]>
                                     <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="660" style="width: 660px;">
                                     <tr>

From 7a439572bf949d355b01c518dde0e932de33fb0a Mon Sep 17 00:00:00 2001
From: Ted Goas <ted@tedgoas.com>
Date: Mon, 7 Mar 2022 21:35:14 -0500
Subject: [PATCH 3/4] Remove code comment

It's helpful for this PR, but most folks won't need this code comment in the template.
---
 cerberus-hybrid.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cerberus-hybrid.html b/cerberus-hybrid.html
index 8562495..0a4a79f 100644
--- a/cerberus-hybrid.html
+++ b/cerberus-hybrid.html
@@ -567,7 +567,6 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
                 <!-- Thumbnail Right, Text Left : BEGIN -->
                 <tr>
                     <td style="font-size:0; padding: 10px; text-align: left; background-color: #ffffff;" class="darkmode-bg">
-                        <!-- Add an additionnal row and separating the padding from the dir attribute will avoid vertical 1px unwanted space on the edges. Place the padding on the top level cell, then dir attribute on the inner cell -->
                         <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                             <tr>
                                 <!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->

From 9aba7cfa5083206745c4319a1f5c18c241fe23b1 Mon Sep 17 00:00:00 2001
From: Ted Goas <ted@tedgoas.com>
Date: Mon, 7 Mar 2022 21:36:55 -0500
Subject: [PATCH 4/4] Match the ltr pattern to match the rtl one

---
 cerberus-hybrid.html | 80 ++++++++++++++++++++++++--------------------
 1 file changed, 43 insertions(+), 37 deletions(-)

diff --git a/cerberus-hybrid.html b/cerberus-hybrid.html
index 0a4a79f..be039db 100644
--- a/cerberus-hybrid.html
+++ b/cerberus-hybrid.html
@@ -516,50 +516,56 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
 
                 <!-- Thumbnail Left, Text Right : BEGIN -->
                 <tr>
-                    <!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
-                    <td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px; background-color: #ffffff;" class="darkmode-bg">
-                        <!--[if mso]>
-                        <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="660" style="width: 660px;">
-                        <tr>
-                        <td valign="top" width="220" style="width: 220px;">
-                        <![endif]-->
-                        <div style="display:inline-block; margin: 0 -1px; max-width: 220px; min-width:160px; vertical-align:top; width:100%;" class="stack-column">
-                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                                <tr>
-                                    <td dir="ltr" style="padding: 0 10px 10px 10px;">
-                                        <img src="https://via.placeholder.com/200" width="200" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
+                    <td style="font-size:0; padding: 10px; text-align: left; background-color: #ffffff;" class="darkmode-bg">
+                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                            <tr>
+                                <!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
+                                <td dir="ltr" height="100%" valign="top" width="100%">
+                                    <!--[if mso]>
+                                    <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="660" style="width: 660px;">
+                                    <tr>
+                                    <td valign="top" width="220" style="width: 220px;">
+                                    <![endif]-->
+                                    <div style="display:inline-block; margin: 0 -1px; max-width: 220px; min-width:160px; vertical-align:top; width:100%;" class="stack-column">
+                                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                                            <tr>
+                                                <td dir="ltr" style="padding: 0 10px 10px 10px;">
+                                                    <img src="https://via.placeholder.com/200" width="200" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </div>
+                                    <!--[if mso]>
                                     </td>
-                                </tr>
-                            </table>
-                        </div>
-                        <!--[if mso]>
-                        </td>
-                        <td valign="top" width="440" style="width: 440px;">
-                        <![endif]-->
-                        <div style="display:inline-block; margin: 0 -1px; max-width: 440px; min-width:280px; vertical-align:top;" class="stack-column">
-                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                                <tr>
-                                    <td dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow">
-                                        <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 22px; color: #333333; font-weight: bold;">Class aptent taciti sociosqu</h2>
-                                        <p style="margin: 0 0 10px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
-                                        <!-- Button : BEGIN -->
-                                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
+                                    <td valign="top" width="440" style="width: 440px;">
+                                    <![endif]-->
+                                    <div style="display:inline-block; margin: 0 -1px; max-width: 440px; min-width:280px; vertical-align:top;" class="stack-column">
+                                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                             <tr>
-                                                <td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
-                                                    <a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Primary Button</a>
+                                                <td dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow">
+                                                    <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 22px; color: #333333; font-weight: bold;">Class aptent taciti sociosqu</h2>
+                                                    <p style="margin: 0 0 10px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
+                                                    <!-- Button : BEGIN -->
+                                                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
+                                                        <tr>
+                                                            <td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
+                                                                <a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Primary Button</a>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                    <!-- Button : END -->
                                                 </td>
                                             </tr>
                                         </table>
-                                        <!-- Button : END -->
+                                    </div>
+                                    <!--[if mso]>
                                     </td>
-                                </tr>
-                            </table>
-                        </div>
-                        <!--[if mso]>
-                        </td>
-                        </tr>
+                                    </tr>
+                                    </table>
+                                    <![endif]-->
+                                </td>
+                            </tr>
                         </table>
-                        <![endif]-->
                     </td>
                 </tr>
                 <!-- Thumbnail Left, Text Right : END -->