Small UI fix

DilemmaGX · Dec 13, 2023 · 4538f64 · 4538f64
1 parent 36e6ec8
commit 4538f64
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/icons.html b/icons.html
@@ -17,7 +17,7 @@ <h2 class="accordion-header">
                 </button>
             </h2>
             <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
-                <div class="ratio" style="--bs-aspect-ratio: 100%">
+                <div class="ratio" style="--bs-aspect-ratio: 125%">
                     <iframe src="https://simpleicons.org/"></iframe>
                 </div>
             </div>
@@ -30,7 +30,7 @@ <h2 class="accordion-header">
                 </button>
             </h2>
             <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
-                <div class="ratio" style="--bs-aspect-ratio: 100%">
+                <div class="ratio" style="--bs-aspect-ratio: 125%">
                     <iframe src="https://primer.style/foundations/icons"></iframe>
                 </div>
             </div>
@@ -43,7 +43,7 @@ <h2 class="accordion-header">
                 </button>
             </h2>
             <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
-                <div class="ratio" style="--bs-aspect-ratio: 100%">
+                <div class="ratio" style="--bs-aspect-ratio: 125%">
                     <iframe src="https://feathericons.com/"></iframe>
                 </div>
             </div>

diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 <body>
     <div class="row" style="margin: auto;">
         <div class="col col-lg-7">
-            <div style="max-width: 600px; margin: auto; margin-top: 30px;">
+            <div style="max-width: 600px; margin: auto; margin-top: 15px;">
                 <div align="middle">
                     <h1>Static Badge Maker</h1>
                     <a href="http://github.com/dilemmaGX/shields-maker"><img alt="GitHub License"
@@ -27,8 +27,8 @@ <h1>Static Badge Maker</h1>
                             src="https://custom-icon-badges.demolab.com/badge/Repo-Shields--maker-0059ff.svg?logo=repo"
                             alt="Contribute - Shields -- maker"></a>
                     <a href="http://github.com/dilemmaGX/shields-maker"><img
-                            src="https://custom-icon-badges.demolab.com/badge/Version-v1.3.1-0059ff?logo=code"
-                            alt="Version - v1.3.1"></a>
+                            src="https://custom-icon-badges.demolab.com/badge/Version-v1.3.2-0059ff?logo=code"
+                            alt="Version - v1.3.2"></a>
                 </div>
                 <br>
                 <div id="alerts"></div>
@@ -97,7 +97,7 @@ <h4>HTML</h4>
             </div>
         </div>
         <div class="col col-lg-4">
-            <iframe src="./icons.html" height="100%" width="100%" style="margin-top: 30px;"></iframe>
+            <iframe src="./icons.html" height="100%" width="100%" style="margin-top: 15px;"></iframe>
         </div>
     </div>
     <script>

diff --git a/src/static.js b/src/static.js
@@ -101,11 +101,11 @@ function auto() {
     }
 
     o_img.innerHTML = g_html(left, right, color, style, logo, logoColor, link, source);
-    o_url.innerHTML = "<pre><code>" + g_url(left, right, color, style, logo, logoColor, source).replace(/</g, '&lt;').replace(/>/g, '&gt;') + "</pre></code>";
-    o_html.innerHTML = "<pre><code>" + g_html(left, right, color, style, logo, logoColor, link, source).replace(/</g, '&lt;').replace(/>/g, '&gt;') + "</pre></code>";
-    o_md.innerHTML = "<pre><code>" + g_md(left, right, color, style, logo, logoColor, link, source).replace(/</g, '&lt;').replace(/>/g, '&gt;') + "</pre></code>";
-    o_ad.innerHTML = "<pre><code>" + g_ad(left, right, color, style, logo, logoColor, link, source).replace(/</g, '&lt;').replace(/>/g, '&gt;') + "</pre></code>";
-    o_rst.innerHTML = "<pre><code>" + g_rst(left, right, color, style, logo, logoColor, link, source).replace(/</g, '&lt;').replace(/>/g, '&gt;')+ "</pre></code>";
+    o_url.innerHTML = "<pre><code style=\"white-space: pre-wrap;word-wrap: break-word;\">" + g_url(left, right, color, style, logo, logoColor, source).replace(/</g, '&lt;').replace(/>/g, '&gt;') + "</pre></code>";
+    o_html.innerHTML = "<pre><code style=\"white-space: pre-wrap;word-wrap: break-word;\">" + g_html(left, right, color, style, logo, logoColor, link, source).replace(/</g, '&lt;').replace(/>/g, '&gt;') + "</pre></code>";
+    o_md.innerHTML = "<pre><code style=\"white-space: pre-wrap;word-wrap: break-word;\">" + g_md(left, right, color, style, logo, logoColor, link, source).replace(/</g, '&lt;').replace(/>/g, '&gt;') + "</pre></code>";
+    o_ad.innerHTML = "<pre><code style=\"white-space: pre-wrap;word-wrap: break-word;\">" + g_ad(left, right, color, style, logo, logoColor, link, source).replace(/</g, '&lt;').replace(/>/g, '&gt;') + "</pre></code>";
+    o_rst.innerHTML = "<pre><code style=\"white-space: pre-wrap;word-wrap: break-word;\">" + g_rst(left, right, color, style, logo, logoColor, link, source).replace(/</g, '&lt;').replace(/>/g, '&gt;')+ "</pre></code>";
 }
 
 function copy(id) {