Merge pull request #13 from RedHeadphone/issue-5

RedHeadphone · web-flow · commit 5332b01fccf8 · 2024-07-31T20:57:47.000+05:30
Safari fix
diff --git a/src/template/card.svg b/src/template/card.svg
@@ -1,11 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="380" height="{{ height }}"
-    viewBox="0 0 380 {{ height }}">
+    viewBox="0 0 380 {{ height }}" preserveAspectRatio="xMidYMid meet">
 <title>{{ name }} | Codeforces Stats</title>
 <style>
   svg {
     font-size: 14px;
-    line-height: 21px;
+    line-height: 18px;
+    font-family: 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif;
+    image-rendering: auto;
   }
 
   #background {
@@ -24,29 +26,34 @@
     table-layout: auto;
   }
 
-  th {
-    padding: 0.5em;
-    padding-top: 0;
-    padding-bottom: 10px;
-    padding-left: 4px;
-    color: #{{ theme.title_color }};
-    display:flex;
-    align-items: center;
-    font-size: 24px;
-    font-family: 'Segoe UI', Ubuntu, Sans-Serif;
-    font-weight: bold;
-  }
-
   td {
     margin-bottom: 16px;
     margin-top: 8px;
     padding: 0.3em;
     padding-left: 0.15em;
     font-size: 18px;
-    font-family: 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif;
     font-weight: 600;
-    line-height: 18px;
-    color: #{{ theme.text_color }};
+    color: #434d58;
+  }
+
+  .header-td {
+    padding: 0.5em;
+    padding-top: 0;
+    padding-bottom: 10px;
+    padding-left: 4px;
+    color: #2f80ed;
+    font-size: 24px;
+    font-weight: 800;
+    margin: 0px;
+    display: flex;
+    align-items: center;
+  }
+
+  .stats-label{
+    display: flex;
+    align-items: center;
+    margin: 0px;
+    padding: 0px;
   }
 
   .stats-num{
@@ -59,7 +66,6 @@
     fill: #{{ theme.icon_color }};
     margin-right: 1ch;
     vertical-align: top;
-    scale: 1.3;
     margin-right: 10px;
   }
 
@@ -108,17 +114,17 @@
       <div xmlns="http://www.w3.org/1999/xhtml">
         <table>
           <thead>
-            <tr style="transform: translateX(0);">
-              <th colspan="2">
-                <svg xmlns="http://www.w3.org/2000/svg" class="logo" width="29" height="25" viewBox="0 0 29 25" fill="none">
+            <tr>
+              <td class="header-td" style="white-space: nowrap; line-height: 1.2em">
+                <svg xmlns="http://www.w3.org/2000/svg" class="logo" width="29" height="25" viewBox="0 0 29 25" fill="none"  style="padding-right: 8px;">
                   <rect y="6" width="7" height="18.125" rx="2" fill="#FFC107"/>
                   <rect x="22" y="10.125" width="7" height="14" rx="2" fill="#F44336"/>
                   <rect x="11" width="7" height="24.125" rx="2" fill="#2196F3"/>
                 </svg>
-                <span style="padding-left: 8px;" id="name">{{ name }}</span>
-              </th>
+                <span id="name">{{ name }}</span>
+              </td>
             </tr>
-            <tr style="animation-delay: 200ms">
+            <tr style="animation-delay: 300ms">
               <td style="padding-bottom: 20px; white-space: nowrap; line-height: 1.2em">
                 <span style="color: {{ categoryColor }}; font-weight: bold" id="category">{{ category }}</span>{% if breakCategory %}<br></br>{% endif %} (max: <span style="color: {{ maxCategoryColor }}; font-weight: bold" id="max-category">{{ maxCategory }}</span>)
               </td>
@@ -128,50 +134,50 @@
         <table>
           <tbody>
             <tr style="animation-delay: 600ms">
-              <td>
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="octicon bi bi-star" viewBox="0 0 16 16">
+              <td  class="stats-label">
+                <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="octicon bi bi-star" viewBox="0 0 16 16">
                   <path fill-rule="evenodd" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
                 </svg>Contest Rating:
               </td>
               <td class="stats-num" id="rating">{{ rating }}</td>
             </tr>
             <tr style="animation-delay: 800ms">
-              <td>
-                <svg xmlns="http://www.w3.org/2000/svg" class="octicon bi bi-award" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+              <td  class="stats-label">
+                <svg xmlns="http://www.w3.org/2000/svg" class="octicon bi bi-award" width="21" height="21" fill="currentColor" viewBox="0 0 16 16">
                   <path fill-rule="evenodd" d="M9.669.864 8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z"/>
                   <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/>
                 </svg>Max Rating:
               </td>
               <td class="stats-num" id="max-rating">{{ maxRating }}</td>
             </tr>
             <tr style="animation-delay: 1000ms">
-              <td>
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2-all octicon" viewBox="0 0 16 16">
+              <td  class="stats-label">
+                <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-check2-all octicon" viewBox="0 0 16 16">
                   <path d="M14.5 2h-3c-0.011 0 -0.02 0.005 -0.03 0.006 -0.326 -0.562 -0.683 -0.872 -0.71 -0.893A0.501 0.501 0 0 0 10.443 1h-4.886a0.497 0.497 0 0 0 -0.317 0.114c-0.026 0.021 -0.385 0.331 -0.71 0.893C4.52 2.006 4.511 2 4.5 2H1.5a0.498 0.498 0 0 0 -0.497 0.555c0.17 1.53 1.284 4.469 4.257 4.888a12.252 12.252 0 0 0 1.155 1.401c0.024 0.025 0.056 0.039 0.084 0.059V10h-1a0.5 0.5 0 0 0 -0.5 0.5v1.5H4a0.5 0.5 0 0 0 -0.5 0.5v2a0.5 0.5 0 0 0 0.5 0.5h8a0.5 0.5 0 0 0 0.5 -0.5v-2a0.5 0.5 0 0 0 -0.5 -0.5h-1v-1.5a0.5 0.5 0 0 0 -0.5 -0.5h-1v-1.097c0.029 -0.019 0.06 -0.034 0.084 -0.059a12.315 12.315 0 0 0 1.155 -1.401c2.974 -0.418 4.088 -3.357 4.257 -4.888a0.498 0.498 0 0 0 -0.124 -0.389A0.495 0.495 0 0 0 14.5 2zM2.102 3h2.028c-0.058 0.227 -0.105 0.466 -0.121 0.732 -0.051 0.805 0.129 1.639 0.534 2.497C2.926 5.574 2.314 3.887 2.102 3zM11.5 14H4.5v-1h7v1zm-1.5 -2h-4v-1h4v1zm-2.5 -2v-1h1v1h-1zm1.505 -2h-2.01c-1.391 -1.51 -2.061 -2.917 -1.99 -4.184 0.053 -0.962 0.527 -1.576 0.752 -1.815h4.486c0.226 0.241 0.699 0.855 0.752 1.816 0.07 1.268 -0.599 2.675 -1.99 4.184zm2.455 -1.776c0.404 -0.856 0.583 -1.689 0.532 -2.494A3.913 3.913 0 0 0 11.871 3h2.023c-0.218 0.882 -0.839 2.568 -2.434 3.224z"/>
                 </svg>Contests:
               </td>
               <td class="stats-num" id="contests">{{ contests }}</td>
             </tr>
             <tr style="animation-delay: 1200ms">
-              <td>
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2-all octicon" viewBox="0 0 16 16">
+              <td  class="stats-label">
+                <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-check2-all octicon" viewBox="0 0 16 16">
                   <path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z"/>
                   <path d="m5.354 7.146.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708z"/>
                 </svg>Problems Solved:
               </td>
               <td class="stats-num" id="problems-solved">{{ problemsSolved }}</td>
             </tr>
             <tr style="animation-delay: 1400ms">
-              <td>
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg octicon" viewBox="0 0 16 16">
+              <td  class="stats-label">
+                <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-x-lg octicon" viewBox="0 0 16 16">
                   <path fill-rule="evenodd" d="M2.333 5.333a3.667 3.667 0 1 1 5.731 3.031 6.003 6.003 0 0 1 3.933 5.453.5.5 0 0 1-1 .03 5 5 0 0 0-9.995 0 .5.5 0 0 1-.999-.029 6.003 6.003 0 0 1 3.933-5.454 3.663 3.663 0 0 1-1.603-3.031zM6 2.667A2.667 2.667 0 1 0 6 8a2.667 2.667 0 0 0 0-5.333z"/><path d="M11.527 5.333c-.099 0-.195.007-.289.02a.5.5 0 1 1-.141-.989 3.02 3.02 0 0 1 2.253 5.398 4.46 4.46 0 0 1 2.637 4.071.5.5 0 0 1-1 0 3.462 3.462 0 0 0-2.464-3.315l-.356-.107V9.294l.273-.139a2.02 2.02 0 0 0-.913-3.822z"/>
                 </svg>Friends of:
               </td>
               <td class="stats-num" id="friend-of-count">{{ friendOfCount }}</td>
             </tr>
             <tr style="animation-delay: 1600ms">
-              <td>
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-ui-checks-grid octicon" viewBox="0 0 16 16">
+              <td  class="stats-label">
+                <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-ui-checks-grid octicon" viewBox="0 0 16 16">
                   <path d="M2 10h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1zm9-9h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 9a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-3zm0-10a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2h-3zM2 9a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H2zm7 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3zM0 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.354.854a.5.5 0 1 0-.708-.708L3 3.793l-.646-.647a.5.5 0 1 0-.708.708l1 1a.5.5 0 0 0 .708 0l2-2z"/>
                 </svg>Contributions:
               </td>
