potential fix: use svg foreignObject to bypass Github's style-tag san…

…itizer
propromo-software · Oct 24, 2024 · 974920a · 974920a
1 parent 5da17b8
commit 974920a
Showing 1 changed file with 99 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,104 @@
 # About Propromo
 
-<div style="display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; margin-bottom: 1rem;">
-  <img src="https://raw.githubusercontent.com/propromo-software/propromo/f97d458f31e2d54c47c01fa6a325930f41762bd2/public/favicon.png" alt="favicon" width="175">
-  <span style="font-size: 1.25rem"><b><strong>Pro|pro|mo</strong></b> - Project Progress Monitoring</span>
-  <div style="margin-bottom: 0.5rem;">
-    <a href="https://propromo-docs.vercel.app/guides/join-monitor" target="_blank">
-      <button class="cta-button" role="button">Get Started Now</button>
-    </a>
-  </div>
-</div>
+<svg fill="none" viewBox="0 0 600 300" width="600" height="300" xmlns="http://www.w3.org/2000/svg">
+  <foreignObject width="100%" height="100%">
+    <div xmlns="http://www.w3.org/1999/xhtml">
+      <style>
+      .cta-button {
+        appearance: none;
+        background-color: #FAFBFC;
+        border: 1px solid rgba(27, 31, 35, 0.15);
+        border-radius: 6px;
+        box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
+        box-sizing: border-box;
+        color: #24292E;
+        cursor: pointer;
+        display: inline-block;
+        font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+        list-style: none;
+        padding: 6px 16px;
+        position: relative;
+        transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+        vertical-align: middle;
+        white-space: nowrap;
+        word-wrap: break-word;
+      }
+
+      .cta-button:hover {
+        background-color: #F3F4F6;
+        text-decoration: none;
+        transition-duration: 0.1s;
+      }
+
+      .cta-button:disabled {
+        background-color: #FAFBFC;
+        border-color: rgba(27, 31, 35, 0.15);
+        color: #959DA5;
+        cursor: default;
+      }
+
+      .cta-button:active {
+        background-color: #EDEFF2;
+        box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
+        transition: none 0s;
+      }
+
+      .cta-button:focus {
+        outline: 1px transparent;
+      }
+
+      .cta-button:before {
+        display: none;
+      }
+
+      .cta-button:-webkit-details-marker {
+        display: none;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .cta-button {
+        background-color: #2D333B;
+        border: 1px solid rgba(240, 246, 252, 0.1);
+        color: #C9D1D9;
+        box-shadow: rgba(240, 246, 252, 0.1) 0 1px 0, rgba(27, 31, 35, 0.25) 0 1px 0 inset;
+      }
+
+      .cta-button:hover {
+        background-color: #3A3F44;
+      }
+
+      .cta-button:disabled {
+        background-color: #2D333B;
+        border-color: rgba(240, 246, 252, 0.1);
+        color: #6E7681;
+      }
+
+      .cta-button:active {
+          background-color: #3A3F44;
+          box-shadow: rgba(240, 246, 252, 0.2) 0 1px 0 inset;
+        }
+      }
+      </style>
+
+      <div style="display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; margin-bottom: 1rem;">
+        <img src="https://raw.githubusercontent.com/propromo-software/propromo/f97d458f31e2d54c47c01fa6a325930f41762bd2/public/favicon.png" alt="favicon" width="175">
+        <span style="font-size: 1.25rem"><b><strong>Pro|pro|mo</strong></b> - Project Progress Monitoring</span>
+        <div style="margin-bottom: 0.5rem;">
+          <a href="https://propromo-docs.vercel.app/guides/join-monitor" target="_blank">
+            <button class="cta-button" role="button">Get Started Now</button>
+          </a>
+        </div>
+      </div>
+    </div>
+
+  </foreignObject>
+</svg>
 
 ---
 
@@ -149,86 +239,3 @@ php ./vendor/bin/pest
 <a href="https://github.com/propromo-software/propromo/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=propromo-software/propromo" />
 </a>
-
-<style>
-.cta-button {
-  appearance: none;
-  background-color: #FAFBFC;
-  border: 1px solid rgba(27, 31, 35, 0.15);
-  border-radius: 6px;
-  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
-  box-sizing: border-box;
-  color: #24292E;
-  cursor: pointer;
-  display: inline-block;
-  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  list-style: none;
-  padding: 6px 16px;
-  position: relative;
-  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: manipulation;
-  vertical-align: middle;
-  white-space: nowrap;
-  word-wrap: break-word;
-}
-
-.cta-button:hover {
-  background-color: #F3F4F6;
-  text-decoration: none;
-  transition-duration: 0.1s;
-}
-
-.cta-button:disabled {
-  background-color: #FAFBFC;
-  border-color: rgba(27, 31, 35, 0.15);
-  color: #959DA5;
-  cursor: default;
-}
-
-.cta-button:active {
-  background-color: #EDEFF2;
-  box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
-  transition: none 0s;
-}
-
-.cta-button:focus {
-  outline: 1px transparent;
-}
-
-.cta-button:before {
-  display: none;
-}
-
-.cta-button:-webkit-details-marker {
-  display: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  .cta-button {
-    background-color: #2D333B;
-    border: 1px solid rgba(240, 246, 252, 0.1);
-    color: #C9D1D9;
-    box-shadow: rgba(240, 246, 252, 0.1) 0 1px 0, rgba(27, 31, 35, 0.25) 0 1px 0 inset;
-  }
-
-  .cta-button:hover {
-    background-color: #3A3F44;
-  }
-
-  .cta-button:disabled {
-    background-color: #2D333B;
-    border-color: rgba(240, 246, 252, 0.1);
-    color: #6E7681;
-  }
-
-  .cta-button:active {
-    background-color: #3A3F44;
-    box-shadow: rgba(240, 246, 252, 0.2) 0 1px 0 inset;
-  }
-}
-</style>