Changeset 52563

Timestamp:

01/11/2022 06:34:34 PM (3 years ago)

Author:

ryelle

Message:

Help/About: Update the About section for 5.9.

Use the correct Field Guide link. Update the SVGs used on Freedoms and Privacy. Add more spacing between sections on the About page, fixed spacing between rows on Freedoms page.

Props critterverse, audrasjb, versusbassz.
See #54270.

Location:

trunk/src/wp-admin

Files:

• about.php (modified) (12 diffs)
• css/about.css (modified) (10 diffs)
• images/about-header-freedoms.svg (modified) (1 diff)
• images/about-header-privacy.svg (modified) (1 diff)

trunk/src/wp-admin/about.php

@@ -53 +53 @@
         <hr />
 
-        <div class="about__section has-2-columns is-wider-left">
+        <div class="about__section has-2-columns has-gutters is-wider-left">
             <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
                 <img src="https://s.w.org/images/core/5.9/twenty-twenty-two.png" alt="" />
             </div>
-            <div class="column">
+            <div class="column is-edge-to-edge">
                 <h3>
                     <?php _e( 'Say hello to Twenty Twenty&#8209;Two' ); ?>
@@ -81 +81 @@
         </div>
 
-        <div class="about__section has-2-columns is-wider-right">
-            <div class="column">
+        <div class="about__section has-2-columns has-gutters is-wider-right">
+            <div class="column is-edge-to-edge">
                 <h3>
                     <?php _e( 'Your personal paintbox awaits' ); ?>
@@ -98 +98 @@
         </div>
 
-        <div class="about__section has-2-columns is-wider-left">
+        <div class="about__section has-2-columns has-gutters is-wider-left">
             <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
                 <img src="https://s.w.org/images/core/5.9/navigation-block.png" alt="" />
             </div>
-            <div class="column">
+            <div class="column is-edge-to-edge">
                 <h3>
                     <?php _e( 'The Navigation block' ); ?>
@@ -128 +128 @@
         <hr />
 
-        <div class="about__section has-2-columns is-wider-left">
+        <div class="about__section has-2-columns has-gutters is-wider-left">
             <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
                 <img src="https://s.w.org/images/core/5.9/block-controls.png" alt="" />
             </div>
-            <div class="column">
+            <div class="column is-edge-to-edge">
                 <h3>
                     <?php _e( 'Better block controls' ); ?>
@@ -142 +142 @@
         </div>
 
-        <div class="about__section has-2-columns is-wider-right">
-            <div class="column">
+        <div class="about__section has-2-columns has-gutters is-wider-right">
+            <div class="column is-edge-to-edge">
                 <h3>
                     <?php _e( 'The power of patterns' ); ?>
@@ -159 +159 @@
         </div>
 
-        <div class="about__section has-2-columns is-wider-left">
+        <div class="about__section has-2-columns has-gutters is-wider-left">
             <div class="column about__image is-vertically-aligned-center is-edge-to-edge">
                 <img src="https://s.w.org/images/core/5.9/list-view.png" alt="" />
             </div>
-            <div class="column">
+            <div class="column is-edge-to-edge">
                 <h3>
                     <?php _e( 'A revamped List View' ); ?>
@@ -173 +173 @@
         </div>
 
-        <div class="about__section has-2-columns is-wider-right">
-            <div class="column">
+        <div class="about__section has-2-columns has-gutters is-wider-right">
+            <div class="column is-edge-to-edge">
                 <h3>
                     <?php _e( 'A better Gallery block' ); ?>
@@ -204 +204 @@
         </div>
 
-        <div class="about__section has-2-columns">
-            <div class="column">
+        <div class="about__section has-gutters has-2-columns">
+            <div class="column is-edge-to-edge">
                 <h3>
                     <?php _e( 'Introducing block themes' ); ?>
@@ -219 +219 @@
                 </p>
             </div>
-            <div class="column">
+            <div class="column is-edge-to-edge">
                 <h3>
                     <?php _e( 'Multiple stylesheets for a block' ); ?>
@@ -234 +234 @@
             </div>
         </div>
-        <div class="about__section has-2-columns">
-            <div class="column">
+        <div class="about__section has-gutters has-2-columns">
+            <div class="column is-edge-to-edge">
                 <h3>
                     <?php _e( 'Block&#8209;level locking' ); ?>
@@ -243 +243 @@
                 </p>
             </div>
-            <div class="column">
+            <div class="column is-edge-to-edge">
                 <h3>
                     <?php _e( 'A refactored Gallery block' ); ?>
@@ -289 +289 @@
                         /* translators: %s: WordPress 5.9 Field Guide link. */
                         __( 'Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of. <a href="%s">WordPress 5.9 Field Guide.</a>' ),
-                        'https://make.wordpress.org/core/2022/01/04/wordpress-5-9-field-guide/'
+                        'https://make.wordpress.org/core/2022/01/10/wordpress-5-9-field-guide/'
                     );
                     ?>

trunk/src/wp-admin/css/about.css

@@ -142 +142 @@
 
 .about__section .column:not(.is-edge-to-edge) {
-    padding-left: var(--gap);
-    padding-right: var(--gap);
+    padding: var(--gap);
 }
 
@@ -210 +209 @@
 
 .about__section.has-gutters {
-    gap: calc(var(--gap) / 2);
+    gap: var(--gap);
+    margin-bottom: calc(var(--gap) * 2);
 }
 
@@ -332 +332 @@
     }
 
-    .about__section .column:not(.is-edge-to-edge) + .column {
-        padding-top: 0;
+    .about__section.has-2-columns.has-gutters.is-wider-right,
+    .about__section.has-2-columns.has-gutters.is-wider-left,
+    .about__section.has-3-columns.has-gutters {
+        margin-bottom: calc(var(--gap) * 2);
     }
 
@@ -339 +341 @@
     .about__section.has-2-columns.has-gutters .column,
     .about__section.has-3-columns.has-gutters .column {
-        margin-bottom: calc(var(--gap) / 2);
+        margin-bottom: var(--gap);
     }
 
@@ -398 +400 @@
     .about__section.has-2-columns {
         display: block;
+        margin-bottom: var(--gap);
+    }
+
+    .about__section.has-2-columns:not(.has-gutters) .column:nth-of-type(n) {
+        padding-top: calc(var(--gap) / 2);
         padding-bottom: calc(var(--gap) / 2);
     }
 
+    .about__section.has-2-columns.has-gutters {
+        margin-bottom: calc(var(--gap) * 2);
+    }
+
     .about__section.has-2-columns.has-gutters .column {
-        margin-bottom: calc(var(--gap) / 2);
+        margin-bottom: var(--gap);
     }
 
     .about__section.has-2-columns.has-gutters .column:last-child {
         margin-bottom: 0;
-    }
-
-    .about__section.has-2-columns .column:nth-of-type(n) {
-        padding-top: calc(var(--gap) / 2);
-        padding-bottom: calc(var(--gap) / 2);
     }
 }
@@ -611 +617 @@
 
 .freedoms-php .about__header::before {
-    top: 32px;
-    right: 0;
+    top: calc(50% - 182px);
+    right: 32px;
     width: 375px;
     height: 300px;
@@ -620 +626 @@
 .privacy-php .about__header::before {
     top: auto;
-    bottom: 70px;
-    height: 245px;
+    bottom: -16px;
     background-image: url('../images/about-header-privacy.svg');
 }
@@ -655 +660 @@
 .freedoms-php .about__header-title,
 .freedoms-php .about__header-text {
-    /* 391px = 375px (balloon width) + 16px (spacing). */
-    padding-right: 391px;
+    /* 423px = 375px (balloon width) + 32px (offset from edge) + 16px (spacing). */
+    padding-right: 423px;
     margin-right: 0;
 }
@@ -722 +727 @@
 
     .freedoms-php .about__header::before {
+        top: calc(50% - 132px);
         height: 192px;
         width: 240px;
@@ -727 +733 @@
 
     .privacy-php .about__header::before {
-        height: 196px;
+        bottom: 0;
+        height: 280px;
     }
 

trunk/src/wp-admin/images/about-header-freedoms.svg

@@ -1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 500 400" xml:space="preserve">
-  <style>
-    .st0{fill:none;stroke:#1e1e1e;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.st1{stroke:#fff;stroke-width:10}.st1,.st2{fill:#fff}.st3{fill:#1e1e1e}
-  </style>
-  <path class="st0" d="M83.9 216.6c0-5.2-11.9-13.3-11.8-12 .1 1.3-1 91.9 11.9 132.3 0 0 2.5 5.2-1.3 11.8"/>
-  <path class="st1" d="m71 193.4-2.2 4.5 2.7 1.3 2.4-1.7-2.9-4.1zm0 0 2.8 4.1.1-.1c.1-.1.3-.2.4-.3.4-.3.9-.7 1.6-1.2 1.9-1.4 3.8-2.9 5.7-4.4 4.7-3.8 10.9-9.2 17-15.8 6.1-6.5 12.3-14.3 16.8-22.7 4.5-8.4 7.5-17.8 6.8-27.6-2.1-29.7-29-51.4-59.6-49.3-30.6 2.1-54.2 27.4-52.1 57.1.7 9.7 5 18.6 10.6 26.3 5.6 7.7 12.8 14.6 19.8 20.2s13.9 10.1 19 13.2c2 1.2 4.1 2.4 6.2 3.6l1.8.9.5.2.1.1c.3.2.3.2 2.5-4.3z"/>
-  <path class="st2" d="m70.9 201.3-5.7 14s3.6 2.4 9.7 1.3l-2.6-15.1-1.4-.2z"/>
-  <path class="st3" d="m68.9 202.7 4.1.2c.5 0 1 .5.9 1 0 .5-.5 1-1 .9l-4.1-.2c-.5 0-1-.5-.9-1 0-.6.5-1 1-.9z"/>
-  <path class="st0" d="M192 266.7s-.1-1.8-1.8-4.2c0 0-3.6-6.2 3-7.2 0 0 5.9-.5 7.7-2.4.5 16.8 1 56.3-1.1 80.5-1 15.3-2.1 49.9 1.1 65.7"/>
-  <path class="st1" d="m199.5 241.7 3.2 3.9-2.3 1.9-2.8-1.2 1.9-4.6zm0 0c-.6 1.5-1.3 3.1-2 4.6l-.1-.1c-.8-.3-1.6-.7-2.3-1.1-2.2-1-4.3-2.1-6.5-3.2-5.3-2.8-12.6-6.9-19.9-12.1-14.4-10.2-30.9-25.7-33.7-45-4.2-29.9 17.5-57.1 47.9-61.4 30.4-4.3 58.8 15.9 63 45.8 2.7 19.3-8.9 38.7-20 52.5-5.7 7.1-11.4 13-15.8 17.1-1.7 1.7-3.5 3.3-5.3 4.9-.6.6-1.3 1.1-1.9 1.7l-.1.1c-.2.1-.2.1-3.3-3.8z"/>
-  <path class="st2" d="m199.9 248.7-3.4 14.7s4 1.8 9.8-.2l-4.9-14.5h-1.5z"/>
-  <path class="st3" d="m202.4 250.6-3.1.1c-.5 0-1 .5-.9 1 0 .5.5 1 1 .9l3.1-.1c.5 0 1-.5.9-1 0-.5-.5-.9-1-.9z"/>
-  <path class="st0" d="M277.7 170.2c-.4-5.2 10.7-14.3 10.7-12.9 0 1.3 8.6 91.5-.8 132.8 0 0-2.1 5.4 2.3 11.6"/>
-  <path class="st1" d="m289.6 146.8 2.6 4.3-2.5 1.5-2.6-1.5 2.5-4.3zm0 0-2.5 4.3-.1-.1c-.7-.4-1.5-.9-2.2-1.3l-6-3.9c-5-3.4-11.6-8.3-18.2-14.3s-13.5-13.2-18.7-21.2c-5.2-8-9-17.2-9.1-26.9-.4-29.8 24.6-53.7 55.3-54.1s56.3 22.7 56.7 52.5c.1 9.7-3.4 19-8.4 27.1-5 8.2-11.6 15.6-18.1 21.7-6.5 6.2-13 11.3-17.8 14.8-1.9 1.4-3.9 2.8-5.9 4.1-.7.5-1.3.8-1.7 1.1l-.5.3-.1.1c-.1.1-.1.1-2.7-4.2z"/>
-  <path class="st2" d="m289.4 154.8 6.8 13.4s-3.4 2.7-9.5 2.1l1.4-15.2 1.3-.3z"/>
-  <path class="st3" d="m291.4 156-4.1.6c-.5.1-.9.6-.8 1.1.1.5.6.9 1.1.8l4.1-.6c.5-.1.9-.6.8-1.1 0-.5-.5-.9-1.1-.8z"/>
-  <path class="st0" d="M420.8 237.4c-.7 0-16.5 4.9-15.7-1.9 0 0 .1-1.8 1.8-4.2 0 0 3.6-6.2-3-7.2 0 0-5.9-.5-7.7-2.4-.5 16.8-1 56.3 1.1 80.5 1 15.3 2.1 49.9-1.1 65.7"/>
-  <path class="st1" d="m398.6 212.4-3.2 3.9 2.3 1.9 2.8-1.2-1.9-4.6zm0 0 2 4.6.1-.1c.8-.3 1.6-.7 2.3-1.1 2.2-1 4.3-2.1 6.5-3.2 5.3-2.8 12.5-6.9 19.9-12.1 14.4-10.2 30.9-25.7 33.7-45 4.2-29.9-17.5-57.1-47.9-61.4-30.4-4.3-58.8 15.9-63 45.8-2.7 19.3 8.9 38.7 20 52.5 5.7 7.1 11.4 13 15.8 17.1 1.7 1.7 3.5 3.3 5.3 4.9.6.6 1.3 1.1 1.9 1.7l.1.1c.1.1.1.1 3.3-3.8z"/>
-  <path class="st2" d="m398.1 219.4 3.5 14.7s-4 1.8-9.8-.2l4.9-14.5h1.4z"/>
-  <path class="st3" d="m394.8 221.4 4.3.2c.5 0 1 .5.9 1 0 .5-.5 1-1 .9l-4.3-.2c-.5 0-1-.5-.9-1-.1-.5.4-1 1-.9z"/>
+<svg viewBox="0 0 464 363" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M78.913 192.621c-.04-5.218-11.878-13.339-11.788-11.996.091 1.343-.955 91.866 11.876 132.297 0 0 2.504 5.168-1.301 11.789" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m66.025 169.397-2.246 4.468 2.651 1.332 2.44-1.688-2.846-4.112Zm0 0c2.845 4.112 2.846 4.111 2.848 4.11l.003-.003.01-.007.035-.024.121-.085c.103-.073.252-.177.442-.313.38-.273.927-.67 1.617-1.183a166.555 166.555 0 0 0 5.664-4.421c4.653-3.79 10.85-9.22 16.993-15.763 6.126-6.526 12.309-14.278 16.824-22.723 4.508-8.431 7.509-17.846 6.829-27.564-2.078-29.724-29.002-51.417-59.586-49.278C27.241 54.282 3.6 79.51 5.677 109.235c.68 9.718 4.962 18.622 10.6 26.344 5.646 7.735 12.848 14.551 19.822 20.161 6.993 5.625 13.887 10.139 19.021 13.244a165.576 165.576 0 0 0 6.225 3.59 103.129 103.129 0 0 0 2.247 1.195l.131.067.038.019.011.006.004.002c.002.001.003.002 2.248-4.466Z" fill="#fff" stroke="#fff" stroke-width="10"/>
+  <path d="m65.879 177.285-5.663 13.965s3.649 2.391 9.688 1.26l-2.642-15.065-1.383-.16Z" fill="#fff"/>
+  <rect x="62.953" y="178.598" width="6.106" height="1.97" rx=".985" transform="rotate(3.18 62.953 178.598)" fill="#1E1E1E"/>
+  <path d="M186.961 242.688s-.127-1.806-1.751-4.234c0 0-3.577-6.178 2.952-7.191 0 0 5.908-.507 7.694-2.372.492 16.768.952 56.344-1.149 80.507-.986 15.32-2.136 49.902 1.149 65.66" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m194.464 217.687 3.154 3.881-2.341 1.902-2.774-1.184 1.961-4.599Zm0 0a816.555 816.555 0 0 1-1.964 4.598l-.004-.002-.012-.005-.039-.016-.136-.059a112.689 112.689 0 0 1-2.328-1.058 164.825 164.825 0 0 1-6.469-3.213c-5.347-2.796-12.55-6.899-19.93-12.121-14.417-10.199-30.946-25.657-33.662-44.98-4.198-29.869 17.489-57.102 47.927-61.38 30.439-4.277 58.792 15.922 62.99 45.792 2.715 19.323-8.913 38.738-19.96 52.515-5.655 7.054-11.447 12.984-15.817 17.146a165.602 165.602 0 0 1-5.333 4.871 111.123 111.123 0 0 1-1.997 1.701l-.063.052-.033.027-.01.008-.004.003c-.001.001-.002.002-3.156-3.879Z" fill="#fff" stroke="#fff" stroke-width="10"/>
+  <path d="m194.905 224.66-3.449 14.669s3.972 1.802 9.766-.244l-4.926-14.48-1.391.055Z" fill="#fff"/>
+  <rect width="5.103" height="1.97" rx=".985" transform="scale(-1 1) rotate(2.085 -6324.149 -5336.641)" fill="#1E1E1E"/>
+  <path d="M272.674 146.172c-.395-5.204 10.723-14.284 10.745-12.938.022 1.345 8.621 91.465-.79 132.827 0 0-2.064 5.358 2.28 11.638" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m284.568 122.79 2.611 4.265-2.531 1.549-2.572-1.479 2.492-4.335Zm0 0c-2.492 4.335-2.493 4.334-2.495 4.333l-.004-.002-.011-.006-.036-.021-.128-.075a106.955 106.955 0 0 1-2.176-1.319 165.633 165.633 0 0 1-6.014-3.933c-4.952-3.388-11.582-8.281-18.249-14.289-6.649-5.992-13.458-13.2-18.662-21.24-5.197-8.025-8.973-17.156-9.107-26.897-.41-29.793 24.609-53.658 55.265-54.08 30.656-.422 56.321 22.745 56.731 52.539.135 9.74-3.389 18.972-8.362 27.138-4.982 8.179-11.589 15.572-18.071 21.745-6.499 6.189-12.991 11.263-17.849 14.786a167.49 167.49 0 0 1-5.903 4.096c-.718.474-1.287.84-1.681 1.091l-.458.288a9.846 9.846 0 0 0-.126.078l-.036.022-.011.007-.003.002c-.002.001-.003.002-2.614-4.263Z" fill="#fff" stroke="#fff" stroke-width="10"/>
+  <path d="m284.383 130.802 6.808 13.443s-3.436 2.688-9.549 2.064l1.376-15.233 1.365-.274Z" fill="#fff"/>
+  <rect width="6.106" height="1.97" rx=".985" transform="scale(-1 1) rotate(7.968 -1090.36 -1997.313)" fill="#1E1E1E"/>
+  <path d="M415.822 213.413c-.66 0-16.451 4.903-15.663-1.87 0 0 .126-1.807 1.751-4.235 0 0 3.577-6.177-2.952-7.19 0 0-5.909-.508-7.694-2.372-.493 16.767-.952 56.343 1.149 80.506.985 15.321 2.135 49.902-1.149 65.66" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m393.572 188.375-3.154 3.88 2.341 1.903 2.775-1.184-1.962-4.599Zm0 0c1.962 4.599 1.963 4.599 1.965 4.598l.004-.002.012-.005.039-.017.136-.059a113.778 113.778 0 0 0 2.328-1.058 164.53 164.53 0 0 0 6.469-3.212c5.347-2.796 12.549-6.9 19.93-12.121 14.416-10.2 30.946-25.657 33.661-44.98 4.198-29.87-17.489-57.102-47.927-61.38-30.439-4.278-58.791 15.922-62.989 45.792-2.716 19.323 8.912 38.737 19.959 52.515 5.656 7.054 11.448 12.984 15.817 17.146a166.688 166.688 0 0 0 5.333 4.871 117.548 117.548 0 0 0 1.997 1.7l.064.053.032.026.011.008.003.003c.001.001.002.002 3.156-3.878Z" fill="#fff" stroke="#fff" stroke-width="10"/>
+  <path d="m393.123 195.432 3.45 14.669s-3.973 1.802-9.767-.244l4.927-14.48 1.39.055Z" fill="#fff"/>
+  <rect x="388.766" y="197.329" width="6.234" height="1.97" rx=".985" transform="rotate(2.085 388.766 197.329)" fill="#1E1E1E"/>
 </svg>

trunk/src/wp-admin/images/about-header-privacy.svg

@@ -1 @@
-<svg width="488" height="400" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#a)">
-    <path d="M173.886 255.422c-.131-7.011-16.159-17.747-16.017-15.944.142 1.804.084 123.458 17.927 177.596 0 0 3.442 6.907-1.572 15.86" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="m157.615 229.483-2.246 4.468 2.651 1.333 2.44-1.689-2.845-4.112Zm0 0c2.845 4.112 2.846 4.111 2.848 4.11l.004-.003.013-.009.044-.03.156-.11a150.404 150.404 0 0 0 2.73-1.985 221.922 221.922 0 0 0 7.552-5.894c6.212-5.06 14.481-12.304 22.668-21.026 8.171-8.705 16.373-18.999 22.346-30.17 5.965-11.157 9.861-23.48 8.978-36.11-2.721-38.908-37.994-67.44-78.238-64.626-40.243 2.814-71.203 35.978-68.482 74.886.883 12.629 6.456 24.29 13.916 34.509 7.47 10.231 17.025 19.283 26.328 26.766 9.321 7.498 18.517 13.521 25.373 17.666a221.46 221.46 0 0 0 8.299 4.787c1.005.549 1.798.97 2.346 1.257l.633.328.171.087.047.024.014.007.005.002c.002.001.003.002 2.249-4.466Z" fill="#fff" stroke="#fff" stroke-width="10"/>
-    <path d="m156.896 238.884-7.61 18.766s4.903 3.214 13.019 1.694l-3.551-20.245-1.858-.215Z" fill="#fff"/>
-    <rect x="155.111" y="239" width="6.5" height="2" rx="1" transform="rotate(3.18 155.111 239)" fill="#1E1E1E"/>
-    <path d="M370.474 314.076c-.847.263-19.158 12.849-20.847 3.841 0 0-.557-2.369.56-6.132 0 0 2.129-9.353-6.654-8.051 0 0-7.785 1.702-10.819.021l-29.619 153.729 20.188 16.22s18.766 15.554 36.374 17.191" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="m333.646 295.052-3.153 3.88 2.341 1.903 2.774-1.184-1.962-4.599Zm0 0c1.962 4.599 1.964 4.598 1.965 4.598l.005-.002.015-.007.049-.021.176-.076c.152-.067.372-.163.656-.29a146.22 146.22 0 0 0 2.431-1.113 221.36 221.36 0 0 0 8.625-4.283c7.139-3.733 16.748-9.209 26.586-16.169 19.333-13.677 40.984-34.082 44.526-59.281 5.5-39.136-22.916-74.916-62.943-80.541-40.027-5.626-77.204 20.935-82.704 60.072-3.542 25.199 11.647 50.781 26.461 69.257 7.539 9.403 15.266 17.315 21.099 22.871a221.01 221.01 0 0 0 7.111 6.494 141.778 141.778 0 0 0 2.58 2.2 21 21 0 0 1 .149.122l.041.034.012.01.004.003c.002.001.003.002 3.156-3.878Z" fill="#fff" stroke="#fff" stroke-width="10"/>
-    <path d="m333.526 305.878.742 20.237s-5.705 1.346-12.814-2.855l10.252-17.814 1.82.432Z" fill="#fff"/>
-    <rect x="329.397" y="305.112" width="5.997" height="2" rx="1" transform="rotate(7.245 329.397 305.112)" fill="#1E1E1E"/>
-    <path d="M391.411 200.957a2.058 2.058 0 0 0-1.031-.853c-.37-.141-7.335-2.746-21.144-5.181-10.426-1.838-16.715-1.58-21.755-1.372-.669.027-1.317.053-1.953.073-1.686.055-3.467.195-5.192.327-3.712.292-7.573.588-10.649.075-3.07-.57-6.585-2.168-9.985-3.714-1.574-.713-3.203-1.454-4.768-2.083-.591-.236-1.195-.485-1.819-.741-4.668-1.92-10.482-4.309-20.901-6.146-14.014-2.471-21.347-2.366-21.652-2.36a2.063 2.063 0 0 0-1.396.577 2.032 2.032 0 0 0-.618 1.37l-.266 6.139a2.053 2.053 0 0 0 1.197 1.945c1.895.874 1.925 1.149 2.157 3.291.02.208.045.425.072.656.145 1.241.395 3.217.657 5.302.322 2.622.707 5.599.943 7.643.336 2.94 1.24 10.758 15.054 14.97 10.902 3.325 18.757 3.46 24.016.415 5.125-2.971 10.636-13.081 12.065-16.426a6.683 6.683 0 0 1 .873-1.583l5.324.939a6.93 6.93 0 0 1 .279 1.786c.198 3.635 1.921 15.02 5.716 19.561 2.872 3.432 7.658 5.725 14.531 6.937 2.707.463 5.438.761 8.18.893 6.03.321 10.844-.71 14.328-3.058 3.024-2.044 4.315-4.62 4.941-5.871a683.689 683.689 0 0 1 3.381-6.634c1.011-1.969 1.967-3.828 2.549-4.996l.293-.592c.95-1.933 1.072-2.181 3.152-2.354a2.044 2.044 0 0 0 1.788-1.42l1.85-5.856a2.03 2.03 0 0 0-.217-1.659Z" fill="#1E1E1E"/>
-    <rect x="388.21" y="200.63" width="39.784" height="7.784" rx="2" transform="rotate(12 388.21 200.63)" fill="#1E1E1E"/>
-  </g>
-  <defs>
-    <clipPath id="a">
-      <path fill="#fff" d="M0 0h488v400H0z"/>
-    </clipPath>
-  </defs>
+<svg viewBox="0 0 374 440" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M101.194 187.586c-.132-7.011-16.16-17.748-16.018-15.944.142 1.803.084 123.457 17.928 177.596 0 0 3.441 6.907-1.573 15.86" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m84.922 161.647-2.246 4.467 2.651 1.333 2.44-1.689-2.845-4.111Zm0 0c2.845 4.111 2.847 4.11 2.848 4.109l.004-.003.013-.009.044-.03.157-.11a145.38 145.38 0 0 0 2.73-1.984 221.81 221.81 0 0 0 7.551-5.895c6.212-5.059 14.481-12.304 22.668-21.025 8.171-8.705 16.373-19 22.346-30.171 5.966-11.157 9.861-23.48 8.978-36.11-2.721-38.907-37.994-67.44-78.238-64.626C33.78 8.607 2.821 41.771 5.541 80.68c.883 12.63 6.456 24.291 13.916 34.509 7.47 10.231 17.025 19.284 26.328 26.767 9.321 7.497 18.518 13.52 25.373 17.666a220.806 220.806 0 0 0 8.3 4.786 153.7 153.7 0 0 0 2.978 1.585 22.04 22.04 0 0 0 .171.087l.047.024.014.007.005.003c.002.001.003.001 2.249-4.466Z" fill="#fff" stroke="#fff" stroke-width="10"/>
+  <path d="m84.203 171.048-7.61 18.766s4.903 3.213 13.02 1.693l-3.552-20.244-1.858-.215Z" fill="#fff"/>
+  <rect x="82.418" y="171.164" width="6.5" height="2" rx="1" transform="rotate(3.18 82.418 171.164)" fill="#1E1E1E"/>
+  <path d="M297.781 246.24c-.847.263-19.158 12.848-20.847 3.841 0 0-.557-2.369.56-6.132 0 0 2.129-9.354-6.654-8.052 0 0-7.785 1.703-10.819.022l-29.618 153.729 20.187 16.219s18.766 15.555 36.375 17.192" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m260.954 227.215-3.154 3.881 2.341 1.902 2.774-1.184-1.961-4.599Zm0 0a816.555 816.555 0 0 0 1.964 4.598l.005-.002.015-.006.049-.021.176-.077.656-.289c.567-.253 1.389-.626 2.431-1.114a220.542 220.542 0 0 0 8.626-4.283c7.138-3.733 16.747-9.208 26.586-16.169 19.332-13.677 40.984-34.081 44.525-59.28 5.5-39.137-22.915-74.916-62.942-80.542-40.028-5.625-77.205 20.936-82.705 60.073-3.541 25.199 11.647 50.78 26.461 69.256 7.539 9.403 15.266 17.315 21.099 22.871a221.255 221.255 0 0 0 7.111 6.495 146.147 146.147 0 0 0 2.58 2.199l.149.122.041.034.013.01.004.003c.001.002.002.003 3.156-3.878Z" fill="#fff" stroke="#fff" stroke-width="10"/>
+  <path d="m260.833 238.042.743 20.237s-5.706 1.345-12.815-2.855l10.252-17.815 1.82.433Z" fill="#fff"/>
+  <rect x="256.704" y="237.275" width="5.997" height="2" rx="1" transform="rotate(7.245 256.704 237.275)" fill="#1E1E1E"/>
+  <path d="M318.718 133.121a2.06 2.06 0 0 0-1.031-.854c-.37-.14-7.335-2.746-21.144-5.18-10.426-1.839-16.715-1.581-21.755-1.373-.669.027-1.317.053-1.953.073-1.685.056-3.467.196-5.192.327-3.712.292-7.573.589-10.649.075-3.07-.57-6.585-2.167-9.985-3.713-1.574-.713-3.203-1.455-4.768-2.083-.591-.237-1.195-.486-1.819-.741-4.668-1.92-10.482-4.309-20.901-6.147-14.014-2.471-21.347-2.366-21.651-2.36a2.063 2.063 0 0 0-1.396.578 2.026 2.026 0 0 0-.618 1.37l-.267 6.138a2.04 2.04 0 0 0 1.197 1.946c1.895.874 1.925 1.149 2.157 3.29.021.209.045.426.072.656.145 1.242.395 3.218.657 5.303.323 2.621.707 5.599.943 7.642.336 2.941 1.24 10.758 15.054 14.97 10.902 3.326 18.758 3.461 24.016.415 5.125-2.971 10.636-13.08 12.065-16.425a6.725 6.725 0 0 1 .873-1.584l5.324.939c.171.581.264 1.182.279 1.787.198 3.634 1.921 15.019 5.717 19.56 2.872 3.432 7.657 5.725 14.531 6.938 2.706.462 5.437.76 8.179.892 6.03.322 10.844-.71 14.328-3.057 3.024-2.045 4.315-4.62 4.941-5.871.889-1.783 2.156-4.249 3.381-6.634a541.984 541.984 0 0 0 2.549-4.997l.293-.592c.95-1.933 1.072-2.181 3.152-2.353a2.061 2.061 0 0 0 1.112-.44 2.04 2.04 0 0 0 .676-.98l1.851-5.856c.083-.276.107-.567.07-.852a2.048 2.048 0 0 0-.288-.807Z" fill="#1E1E1E"/>
+  <rect x="315.517" y="132.793" width="39.784" height="7.784" rx="2" transform="rotate(12 315.517 132.793)" fill="#1E1E1E"/>
 </svg>