andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header: update breakpoints to new specs

Browse Source
This commit is contained in:
rektdeckard
2020-10-03 00:24:10 -04:00
parent 8245190a3a
commit fd70654312
24 changed files with 1286 additions and 1325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/assets/billiard-ball-spec.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 16 KiB

40
src/assets/billiard-ball.svg
View File

@@ -1,25 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="246px" height="246px" viewBox="0 0 246 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>billiard-ball</title>
<defs>
<circle id="path-1" cx="120" cy="120" r="120"></circle>
<filter x="-1.9%" y="-1.9%" width="103.8%" height="103.8%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="9" dy="9" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
</defs>
<g id="billiard-ball" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g>
<circle id="shadow" fill="#35313D" opacity="0.100000001" cx="126" cy="126" r="120"></circle>
<g id="body">
<use fill="#925BFF" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
</g>
<g id="4" transform="translate(56.000000, 56.000000)">
<path d="M64,10 C93.8177085,10 118,34.1822915 118,64 C118,93.8177085 93.8177085,118 64,118 C34.1822915,118 10,93.8177085 10,64 C10,34.1822915 34.1822915,10 64,10 Z" id="circle" fill="#FFFFFF"></path>
<path d="M63.9969207,32.342058 C67.0490461,33.4192787 68.6837704,36.7139781 67.7304533,39.7784541 L67.657942,39.9969207 L58.479,66 L67.9990088,65.9993648 L68,55.996 C68,52.6822915 70.6862915,49.996 74,49.996 C77.2383969,49.996 79.8775718,52.5615749 79.9958615,55.7710617 L80,55.996 L80,87.996 C80,91.3097085 77.3137085,93.996 74,93.996 C70.7616031,93.996 68.1224282,91.4304251 68.0041385,88.2209383 L68,87.996 L67.9990088,77.9993648 L50,78 C45.9341991,78 43.0680996,74.05168 44.2723194,70.212364 L44.342058,70.0030793 L56.342058,36.0030793 C57.4449269,32.8782842 60.8721256,31.2391891 63.9969207,32.342058 Z" fill="#000000" fill-rule="nonzero"></path>
</g>
</g>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="246" height="246" viewBox="0 0 246 246">
<defs>
<circle id="billiard-ball-a" cx="120" cy="120" r="120"/>
<filter id="billiard-ball-b" width="103.8%" height="103.8%" x="-1.9%" y="-1.9%" filterUnits="objectBoundingBox">
<feOffset dx="9" dy="9" in="SourceAlpha" result="shadowOffsetInner1"/>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
<feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd">
<circle cx="126" cy="126" r="120" fill="#35313D" opacity=".1"/>
<use fill="#925BFF" xlink:href="#billiard-ball-a"/>
<use fill="#000" filter="url(#billiard-ball-b)" xlink:href="#billiard-ball-a"/>
<g transform="translate(56 56)">
<path fill="#FFF" d="M64,10 C93.8177085,10 118,34.1822915 118,64 C118,93.8177085 93.8177085,118 64,118 C34.1822915,118 10,93.8177085 10,64 C10,34.1822915 34.1822915,10 64,10 Z"/>
<path fill="#000" fill-rule="nonzero" d="M63.9969207,32.342058 C67.0490461,33.4192787 68.6837704,36.7139781 67.7304533,39.7784541 L67.657942,39.9969207 L58.479,66 L67.9990088,65.9993648 L68,55.996 C68,52.6822915 70.6862915,49.996 74,49.996 C77.2383969,49.996 79.8775718,52.5615749 79.9958615,55.7710617 L80,55.996 L80,87.996 C80,91.3097085 77.3137085,93.996 74,93.996 C70.7616031,93.996 68.1224282,91.4304251 68.0041385,88.2209383 L68,87.996 L67.9990088,77.9993648 L50,78 C45.9341991,78 43.0680996,74.05168 44.2723194,70.212364 L44.342058,70.0030793 L56.342058,36.0030793 C57.4449269,32.8782842 60.8721256,31.2391891 63.9969207,32.342058 Z"/>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

431
src/assets/calculator-spec.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 156 KiB

After

Width:  |  Height:  |  Size: 271 KiB

1006
src/assets/calculator.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 63 KiB

26
src/assets/command-key-spec.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 17 KiB

20
src/assets/command-key.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

44
src/assets/cutting-mat-spec.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 187 KiB

After

Width:  |  Height:  |  Size: 186 KiB

40
src/assets/cutting-mat.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 154 KiB

After

Width:  |  Height:  |  Size: 154 KiB

34
src/assets/footer-mobile.svg Normal file
View File

@@ -0,0 +1,34 @@
<svg xmlns="http://www.w3.org/2000/svg" width="878" height="667" viewBox="0 0 878 667">
<g fill="none" fill-rule="evenodd">
<g transform="rotate(-10 623.127 52.264)">
<polygon fill="#35313D" points="3.245 4.634 359.245 4.634 359.245 288.738 287.234 360.634 3.245 360.634" opacity=".1"/>
<polygon fill="#FFD171" points="0 0 356 0 356 284.105 283.989 356 0 356"/>
<polygon fill="#000" points="356 284 356 356 284 356" opacity=".1" transform="rotate(180 320 320)"/>
</g>
<g fill="#000" transform="translate(314)">
<g transform="rotate(-58 71.706 11.615)">
<path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
<path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
</g>
<g transform="rotate(40 -178.662 147.611)">
<path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
<path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
</g>
</g>
<g transform="rotate(-170 269.983 311.939)">
<path fill="#35313D" d="M14.3245,446.00015 C13.567,446.00015 12.9295,445.43765 12.8365,444.68615 L12.25,440.00015 L11.7301372,440.00015 C10.7367686,440.00015 9.89394963,439.271054 9.75096432,438.28803 L2,385.00015 C0.8954305,385.00015 1.63710399e-11,384.104719 1.63709046e-11,383.00015 L1.63709046e-11,8.00015 C1.63703635e-11,3.581872 3.581722,0.000149999993 8,0.000149999993 L33,0.000149999993 C37.418278,0.000149999993 41,3.581872 41,8.00015 L41,383.00015 C41,384.104719 40.1045695,385.00015 39,385.00015 L31.2490357,438.28803 C31.1060504,439.271054 30.2632314,440.00015 29.2698628,440.00015 L28.75,440.00015 L28.1635,444.68615 C28.0705,445.43765 27.433,446.00015 26.6755,446.00015 L24.25,446.00015 L22.909,457.42265 C22.819,458.59415 21.8425,459.50015 20.6665,459.50015 L20.3335,459.50015 C19.1575,459.50015 18.181,458.59415 18.091,457.42265 L16.75,446.00015 L14.3245,446.00015 Z" opacity=".1"/>
<g transform="translate(5.424 6)">
<path fill="#4B4A48" d="M12.826,434 L29.326,434 L28.7395,438.686 C28.6465,439.4375 28.009,440 27.2515,440 L14.9005,440 C14.143,440 13.5055,439.4375 13.4125,438.686 L12.826,434 Z"/>
<path fill="#353432" d="M10.3269643,432.28788 L2.576,379 L2.576,379 L39.576,379 L31.8250357,432.28788 C31.6820504,433.270904 30.8392314,434 29.8458628,434 L12.3061372,434 C11.3127686,434 10.4699496,433.270904 10.3269643,432.28788 Z"/>
<path fill="#1F1D1B" d="M0.576,377 L0.576,8 C0.576,3.581722 4.157722,8.11624501e-16 8.576,0 L33.576,0 C37.994278,-8.11624501e-16 41.576,3.581722 41.576,8 L41.576,189.5 L41.576,189.5 L41.576,377 C41.576,378.104569 40.6805695,379 39.576,379 L2.576,379 C1.4714305,379 0.576,378.104569 0.576,377 Z"/>
<path fill="#1FA647" d="M17.326,440 L24.826,440 L23.485,451.4225 C23.395,452.594 22.4185,453.5 21.2425,453.5 L20.9095,453.5 C19.7335,453.5 18.757,452.594 18.667,451.4225 L17.326,440 Z"/>
<path fill="#FFF" fill-rule="nonzero" d="M-0.068,324.49985 L-0.068,321.37985 L1.024,321.37985 C2.98,321.37985 4.24,320.51585 4.24,318.70385 L4.24,318.65585 C4.24,316.84385 3.052,315.91985 0.964,315.91985 L-2,315.91985 L-2,324.49985 L-0.068,324.49985 Z M0.916,320.02385 L-0.068,320.02385 L-0.068,317.39585 L0.916,317.39585 C1.84,317.39585 2.368,317.75585 2.368,318.66785 L2.368,318.71585 C2.368,319.56785 1.864,320.02385 0.916,320.02385 Z M7.456,324.49985 L7.456,320.95985 L10.9,320.95985 L10.9,324.49985 L12.844,324.49985 L12.844,315.91985 L10.9,315.91985 L10.9,319.42385 L7.456,319.42385 L7.456,315.91985 L5.512,315.91985 L5.512,324.49985 L7.456,324.49985 Z M18.64,324.63185 C21.316,324.63185 23.068,322.77185 23.068,320.21585 L23.068,320.11985 C23.068,317.53985 21.232,315.79985 18.652,315.79985 C16.108,315.79985 14.236,317.61185 14.236,320.16785 L14.236,320.26385 C14.236,322.77185 15.952,324.63185 18.64,324.63185 Z M18.676,323.08385 C17.272,323.08385 16.264,322.00385 16.264,320.25185 L16.264,320.15585 C16.264,318.42785 17.164,317.33585 18.652,317.33585 C20.152,317.33585 21.04,318.47585 21.04,320.14385 L21.04,320.23985 C21.04,321.96785 20.128,323.08385 18.676,323.08385 Z M27.472,324.63185 C29.5,324.63185 30.748,323.41985 30.748,321.89585 C30.748,320.11985 29.68,319.55585 27.604,319.29185 C26.284,319.09985 26.008,318.81185 26.008,318.19985 C26.008,317.62385 26.44,317.22785 27.292,317.22785 C28.144,317.22785 28.6,317.58785 28.72,318.36785 L30.508,318.36785 C30.352,316.66385 29.224,315.79985 27.292,315.79985 C25.396,315.79985 24.172,316.89185 24.172,318.35585 C24.172,320.01185 25.072,320.67185 27.268,320.95985 C28.528,321.15185 28.888,321.39185 28.888,322.07585 C28.888,322.74785 28.324,323.21585 27.472,323.21585 C26.2,323.21585 25.876,322.57985 25.792,321.81185 L23.932,321.81185 C24.04,323.52785 25.12,324.63185 27.472,324.63185 Z M34.084,324.49985 L34.084,321.37985 L35.176,321.37985 C37.132,321.37985 38.392,320.51585 38.392,318.70385 L38.392,318.65585 C38.392,316.84385 37.204,315.91985 35.116,315.91985 L32.152,315.91985 L32.152,324.49985 L34.084,324.49985 Z M35.068,320.02385 L34.084,320.02385 L34.084,317.39585 L35.068,317.39585 C35.992,317.39585 36.52,317.75585 36.52,318.66785 L36.52,318.71585 C36.52,319.56785 36.016,320.02385 35.068,320.02385 Z M41.608,324.49985 L41.608,320.95985 L45.052,320.95985 L45.052,324.49985 L46.996,324.49985 L46.996,315.91985 L45.052,315.91985 L45.052,319.42385 L41.608,319.42385 L41.608,315.91985 L39.664,315.91985 L39.664,324.49985 L41.608,324.49985 Z M52.792,324.63185 C55.468,324.63185 57.22,322.77185 57.22,320.21585 L57.22,320.11985 C57.22,317.53985 55.384,315.79985 52.804,315.79985 C50.26,315.79985 48.388,317.61185 48.388,320.16785 L48.388,320.26385 C48.388,322.77185 50.104,324.63185 52.792,324.63185 Z M52.828,323.08385 C51.424,323.08385 50.416,322.00385 50.416,320.25185 L50.416,320.15585 C50.416,318.42785 51.316,317.33585 52.804,317.33585 C54.304,317.33585 55.192,318.47585 55.192,320.14385 L55.192,320.23985 C55.192,321.96785 54.28,323.08385 52.828,323.08385 Z M60.556,324.49985 L60.556,321.18785 L61.396,321.18785 L63.448,324.49985 L65.512,324.49985 L63.244,320.85185 C64.252,320.55185 65.008,319.86785 65.008,318.57185 L65.008,318.52385 C65.008,316.74785 63.724,315.91985 61.696,315.91985 L58.624,315.91985 L58.624,324.49985 L60.556,324.49985 Z M61.648,319.86785 L60.556,319.86785 L60.556,317.40785 L61.648,317.40785 C62.584,317.40785 63.112,317.70785 63.112,318.58385 L63.112,318.63185 C63.112,319.45985 62.62,319.86785 61.648,319.86785 Z" opacity=".2" transform="rotate(90 31.756 320.216)"/>
</g>
<g fill="#FFF" opacity=".1" transform="matrix(-1 0 0 1 47 6)">
<polygon points="17.5 440 16.75 434 12.25 434 13 440"/>
<polygon points="10 434 2 379 11 379 17.5 434"/>
<path d="M0 377L0 8C-5.41083001e-16 3.581722 3.581722 8.11624501e-16 8 0L9 0 9 0 9 379 2 379C.8954305 379 1.3527075e-16 378.104569 0 377zM16.75 440L18.091 451.4225C18.181 452.594 19.1575 453.5 20.3335 453.5L20.5 453.5 19 440 16.75 440z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

35
src/assets/marker-green.svg
View File

@@ -1,22 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="118px" height="462px" viewBox="0 0 118 462" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>marker-green</title>
<g id="marker-green" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="marker" transform="translate(63.574467, 230.673339) rotate(190.000000) translate(-63.574467, -230.673339) translate(39.574467, 0.673339)">
<path d="M14.3245,446.00015 C13.567,446.00015 12.9295,445.43765 12.8365,444.68615 L12.25,440.00015 L11.7301372,440.00015 C10.7367686,440.00015 9.89394963,439.271054 9.75096432,438.28803 L2,385.00015 C0.8954305,385.00015 1.63710399e-11,384.104719 1.63709046e-11,383.00015 L1.63709046e-11,8.00015 C1.63703635e-11,3.581872 3.581722,0.000149999993 8,0.000149999993 L33,0.000149999993 C37.418278,0.000149999993 41,3.581872 41,8.00015 L41,383.00015 C41,384.104719 40.1045695,385.00015 39,385.00015 L31.2490357,438.28803 C31.1060504,439.271054 30.2632314,440.00015 29.2698628,440.00015 L28.75,440.00015 L28.1635,444.68615 C28.0705,445.43765 27.433,446.00015 26.6755,446.00015 L24.25,446.00015 L22.909,457.42265 C22.819,458.59415 21.8425,459.50015 20.6665,459.50015 L20.3335,459.50015 C19.1575,459.50015 18.181,458.59415 18.091,457.42265 L16.75,446.00015 L14.3245,446.00015 Z" id="shadow" fill="#35313D" opacity="0.100000001"></path>
<g id="body" transform="translate(5.424000, 6.000150)">
<path d="M12.826,434 L29.326,434 L28.7395,438.686 C28.6465,439.4375 28.009,440 27.2515,440 L14.9005,440 C14.143,440 13.5055,439.4375 13.4125,438.686 L12.826,434 Z" fill="#4B4A48"></path>
<path d="M10.3269643,432.28788 L2.576,379 L2.576,379 L39.576,379 L31.8250357,432.28788 C31.6820504,433.270904 30.8392314,434 29.8458628,434 L12.3061372,434 C11.3127686,434 10.4699496,433.270904 10.3269643,432.28788 Z" fill="#353432"></path>
<path d="M0.576,377 L0.576,8 C0.576,3.581722 4.157722,8.11624501e-16 8.576,0 L33.576,0 C37.994278,-8.11624501e-16 41.576,3.581722 41.576,8 L41.576,189.5 L41.576,189.5 L41.576,377 C41.576,378.104569 40.6805695,379 39.576,379 L2.576,379 C1.4714305,379 0.576,378.104569 0.576,377 Z" fill="#1F1D1B"></path>
<path d="M17.326,440 L24.826,440 L23.485,451.4225 C23.395,452.594 22.4185,453.5 21.2425,453.5 L20.9095,453.5 C19.7335,453.5 18.757,452.594 18.667,451.4225 L17.326,440 Z" id="tip" fill="#1FA647"></path>
<path d="M-0.068,324.49985 L-0.068,321.37985 L1.024,321.37985 C2.98,321.37985 4.24,320.51585 4.24,318.70385 L4.24,318.65585 C4.24,316.84385 3.052,315.91985 0.964,315.91985 L-2,315.91985 L-2,324.49985 L-0.068,324.49985 Z M0.916,320.02385 L-0.068,320.02385 L-0.068,317.39585 L0.916,317.39585 C1.84,317.39585 2.368,317.75585 2.368,318.66785 L2.368,318.71585 C2.368,319.56785 1.864,320.02385 0.916,320.02385 Z M7.456,324.49985 L7.456,320.95985 L10.9,320.95985 L10.9,324.49985 L12.844,324.49985 L12.844,315.91985 L10.9,315.91985 L10.9,319.42385 L7.456,319.42385 L7.456,315.91985 L5.512,315.91985 L5.512,324.49985 L7.456,324.49985 Z M18.64,324.63185 C21.316,324.63185 23.068,322.77185 23.068,320.21585 L23.068,320.11985 C23.068,317.53985 21.232,315.79985 18.652,315.79985 C16.108,315.79985 14.236,317.61185 14.236,320.16785 L14.236,320.26385 C14.236,322.77185 15.952,324.63185 18.64,324.63185 Z M18.676,323.08385 C17.272,323.08385 16.264,322.00385 16.264,320.25185 L16.264,320.15585 C16.264,318.42785 17.164,317.33585 18.652,317.33585 C20.152,317.33585 21.04,318.47585 21.04,320.14385 L21.04,320.23985 C21.04,321.96785 20.128,323.08385 18.676,323.08385 Z M27.472,324.63185 C29.5,324.63185 30.748,323.41985 30.748,321.89585 C30.748,320.11985 29.68,319.55585 27.604,319.29185 C26.284,319.09985 26.008,318.81185 26.008,318.19985 C26.008,317.62385 26.44,317.22785 27.292,317.22785 C28.144,317.22785 28.6,317.58785 28.72,318.36785 L30.508,318.36785 C30.352,316.66385 29.224,315.79985 27.292,315.79985 C25.396,315.79985 24.172,316.89185 24.172,318.35585 C24.172,320.01185 25.072,320.67185 27.268,320.95985 C28.528,321.15185 28.888,321.39185 28.888,322.07585 C28.888,322.74785 28.324,323.21585 27.472,323.21585 C26.2,323.21585 25.876,322.57985 25.792,321.81185 L23.932,321.81185 C24.04,323.52785 25.12,324.63185 27.472,324.63185 Z M34.084,324.49985 L34.084,321.37985 L35.176,321.37985 C37.132,321.37985 38.392,320.51585 38.392,318.70385 L38.392,318.65585 C38.392,316.84385 37.204,315.91985 35.116,315.91985 L32.152,315.91985 L32.152,324.49985 L34.084,324.49985 Z M35.068,320.02385 L34.084,320.02385 L34.084,317.39585 L35.068,317.39585 C35.992,317.39585 36.52,317.75585 36.52,318.66785 L36.52,318.71585 C36.52,319.56785 36.016,320.02385 35.068,320.02385 Z M41.608,324.49985 L41.608,320.95985 L45.052,320.95985 L45.052,324.49985 L46.996,324.49985 L46.996,315.91985 L45.052,315.91985 L45.052,319.42385 L41.608,319.42385 L41.608,315.91985 L39.664,315.91985 L39.664,324.49985 L41.608,324.49985 Z M52.792,324.63185 C55.468,324.63185 57.22,322.77185 57.22,320.21585 L57.22,320.11985 C57.22,317.53985 55.384,315.79985 52.804,315.79985 C50.26,315.79985 48.388,317.61185 48.388,320.16785 L48.388,320.26385 C48.388,322.77185 50.104,324.63185 52.792,324.63185 Z M52.828,323.08385 C51.424,323.08385 50.416,322.00385 50.416,320.25185 L50.416,320.15585 C50.416,318.42785 51.316,317.33585 52.804,317.33585 C54.304,317.33585 55.192,318.47585 55.192,320.14385 L55.192,320.23985 C55.192,321.96785 54.28,323.08385 52.828,323.08385 Z M60.556,324.49985 L60.556,321.18785 L61.396,321.18785 L63.448,324.49985 L65.512,324.49985 L63.244,320.85185 C64.252,320.55185 65.008,319.86785 65.008,318.57185 L65.008,318.52385 C65.008,316.74785 63.724,315.91985 61.696,315.91985 L58.624,315.91985 L58.624,324.49985 L60.556,324.49985 Z M61.648,319.86785 L60.556,319.86785 L60.556,317.40785 L61.648,317.40785 C62.584,317.40785 63.112,317.70785 63.112,318.58385 L63.112,318.63185 C63.112,319.45985 62.62,319.86785 61.648,319.86785 Z" id="phosphor" fill="#FFFFFF" fill-rule="nonzero" opacity="0.200000003" transform="translate(31.756000, 320.215850) rotate(90.000000) translate(-31.756000, -320.215850) "></path>
</g>
<g id="highlights" transform="translate(36.500000, 233.000150) scale(-1, 1) translate(-36.500000, -233.000150) translate(26.000000, 6.000150)" fill="#FFFFFF" opacity="0.100000001">
<polygon id="highlight" points="17.5 440 16.75 434 12.25 434 13 440"></polygon>
<polygon id="highlight" points="10 434 2 379 11 379 17.5 434"></polygon>
<path d="M0,377 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 L9,0 L9,0 L9,379 L2,379 C0.8954305,379 1.3527075e-16,378.104569 0,377 Z" id="highlight"></path>
<path d="M16.75,440 L18.091,451.4225 C18.181,452.594 19.1575,453.5 20.3335,453.5 L20.5,453.5 L19,440 L16.75,440 Z" id="highlight"></path>
</g>
</g>
<svg xmlns="http://www.w3.org/2000/svg" width="118" height="462" viewBox="0 0 118 462">
<g fill="none" fill-rule="evenodd" transform="rotate(-170 43.817 228.606)">
<path fill="#35313D" d="M14.3245,446.00015 C13.567,446.00015 12.9295,445.43765 12.8365,444.68615 L12.25,440.00015 L11.7301372,440.00015 C10.7367686,440.00015 9.89394963,439.271054 9.75096432,438.28803 L2,385.00015 C0.8954305,385.00015 1.63710399e-11,384.104719 1.63709046e-11,383.00015 L1.63709046e-11,8.00015 C1.63703635e-11,3.581872 3.581722,0.000149999993 8,0.000149999993 L33,0.000149999993 C37.418278,0.000149999993 41,3.581872 41,8.00015 L41,383.00015 C41,384.104719 40.1045695,385.00015 39,385.00015 L31.2490357,438.28803 C31.1060504,439.271054 30.2632314,440.00015 29.2698628,440.00015 L28.75,440.00015 L28.1635,444.68615 C28.0705,445.43765 27.433,446.00015 26.6755,446.00015 L24.25,446.00015 L22.909,457.42265 C22.819,458.59415 21.8425,459.50015 20.6665,459.50015 L20.3335,459.50015 C19.1575,459.50015 18.181,458.59415 18.091,457.42265 L16.75,446.00015 L14.3245,446.00015 Z" opacity=".1"/>
<g transform="translate(5.424 6)">
<path fill="#4B4A48" d="M12.826,434 L29.326,434 L28.7395,438.686 C28.6465,439.4375 28.009,440 27.2515,440 L14.9005,440 C14.143,440 13.5055,439.4375 13.4125,438.686 L12.826,434 Z"/>
<path fill="#353432" d="M10.3269643,432.28788 L2.576,379 L2.576,379 L39.576,379 L31.8250357,432.28788 C31.6820504,433.270904 30.8392314,434 29.8458628,434 L12.3061372,434 C11.3127686,434 10.4699496,433.270904 10.3269643,432.28788 Z"/>
<path fill="#1F1D1B" d="M0.576,377 L0.576,8 C0.576,3.581722 4.157722,8.11624501e-16 8.576,0 L33.576,0 C37.994278,-8.11624501e-16 41.576,3.581722 41.576,8 L41.576,189.5 L41.576,189.5 L41.576,377 C41.576,378.104569 40.6805695,379 39.576,379 L2.576,379 C1.4714305,379 0.576,378.104569 0.576,377 Z"/>
<path fill="#1FA647" d="M17.326,440 L24.826,440 L23.485,451.4225 C23.395,452.594 22.4185,453.5 21.2425,453.5 L20.9095,453.5 C19.7335,453.5 18.757,452.594 18.667,451.4225 L17.326,440 Z"/>
<path fill="#FFF" fill-rule="nonzero" d="M-0.068,324.49985 L-0.068,321.37985 L1.024,321.37985 C2.98,321.37985 4.24,320.51585 4.24,318.70385 L4.24,318.65585 C4.24,316.84385 3.052,315.91985 0.964,315.91985 L-2,315.91985 L-2,324.49985 L-0.068,324.49985 Z M0.916,320.02385 L-0.068,320.02385 L-0.068,317.39585 L0.916,317.39585 C1.84,317.39585 2.368,317.75585 2.368,318.66785 L2.368,318.71585 C2.368,319.56785 1.864,320.02385 0.916,320.02385 Z M7.456,324.49985 L7.456,320.95985 L10.9,320.95985 L10.9,324.49985 L12.844,324.49985 L12.844,315.91985 L10.9,315.91985 L10.9,319.42385 L7.456,319.42385 L7.456,315.91985 L5.512,315.91985 L5.512,324.49985 L7.456,324.49985 Z M18.64,324.63185 C21.316,324.63185 23.068,322.77185 23.068,320.21585 L23.068,320.11985 C23.068,317.53985 21.232,315.79985 18.652,315.79985 C16.108,315.79985 14.236,317.61185 14.236,320.16785 L14.236,320.26385 C14.236,322.77185 15.952,324.63185 18.64,324.63185 Z M18.676,323.08385 C17.272,323.08385 16.264,322.00385 16.264,320.25185 L16.264,320.15585 C16.264,318.42785 17.164,317.33585 18.652,317.33585 C20.152,317.33585 21.04,318.47585 21.04,320.14385 L21.04,320.23985 C21.04,321.96785 20.128,323.08385 18.676,323.08385 Z M27.472,324.63185 C29.5,324.63185 30.748,323.41985 30.748,321.89585 C30.748,320.11985 29.68,319.55585 27.604,319.29185 C26.284,319.09985 26.008,318.81185 26.008,318.19985 C26.008,317.62385 26.44,317.22785 27.292,317.22785 C28.144,317.22785 28.6,317.58785 28.72,318.36785 L30.508,318.36785 C30.352,316.66385 29.224,315.79985 27.292,315.79985 C25.396,315.79985 24.172,316.89185 24.172,318.35585 C24.172,320.01185 25.072,320.67185 27.268,320.95985 C28.528,321.15185 28.888,321.39185 28.888,322.07585 C28.888,322.74785 28.324,323.21585 27.472,323.21585 C26.2,323.21585 25.876,322.57985 25.792,321.81185 L23.932,321.81185 C24.04,323.52785 25.12,324.63185 27.472,324.63185 Z M34.084,324.49985 L34.084,321.37985 L35.176,321.37985 C37.132,321.37985 38.392,320.51585 38.392,318.70385 L38.392,318.65585 C38.392,316.84385 37.204,315.91985 35.116,315.91985 L32.152,315.91985 L32.152,324.49985 L34.084,324.49985 Z M35.068,320.02385 L34.084,320.02385 L34.084,317.39585 L35.068,317.39585 C35.992,317.39585 36.52,317.75585 36.52,318.66785 L36.52,318.71585 C36.52,319.56785 36.016,320.02385 35.068,320.02385 Z M41.608,324.49985 L41.608,320.95985 L45.052,320.95985 L45.052,324.49985 L46.996,324.49985 L46.996,315.91985 L45.052,315.91985 L45.052,319.42385 L41.608,319.42385 L41.608,315.91985 L39.664,315.91985 L39.664,324.49985 L41.608,324.49985 Z M52.792,324.63185 C55.468,324.63185 57.22,322.77185 57.22,320.21585 L57.22,320.11985 C57.22,317.53985 55.384,315.79985 52.804,315.79985 C50.26,315.79985 48.388,317.61185 48.388,320.16785 L48.388,320.26385 C48.388,322.77185 50.104,324.63185 52.792,324.63185 Z M52.828,323.08385 C51.424,323.08385 50.416,322.00385 50.416,320.25185 L50.416,320.15585 C50.416,318.42785 51.316,317.33585 52.804,317.33585 C54.304,317.33585 55.192,318.47585 55.192,320.14385 L55.192,320.23985 C55.192,321.96785 54.28,323.08385 52.828,323.08385 Z M60.556,324.49985 L60.556,321.18785 L61.396,321.18785 L63.448,324.49985 L65.512,324.49985 L63.244,320.85185 C64.252,320.55185 65.008,319.86785 65.008,318.57185 L65.008,318.52385 C65.008,316.74785 63.724,315.91985 61.696,315.91985 L58.624,315.91985 L58.624,324.49985 L60.556,324.49985 Z M61.648,319.86785 L60.556,319.86785 L60.556,317.40785 L61.648,317.40785 C62.584,317.40785 63.112,317.70785 63.112,318.58385 L63.112,318.63185 C63.112,319.45985 62.62,319.86785 61.648,319.86785 Z" opacity=".2" transform="rotate(90 31.756 320.216)"/>
</g>
<g fill="#FFF" opacity=".1" transform="matrix(-1 0 0 1 47 6)">
<polygon points="17.5 440 16.75 434 12.25 434 13 440"/>
<polygon points="10 434 2 379 11 379 17.5 434"/>
<path d="M0 377L0 8C-5.41083001e-16 3.581722 3.581722 8.11624501e-16 8 0L9 0 9 0 9 379 2 379C.8954305 379 1.3527075e-16 378.104569 0 377zM16.75 440L18.091 451.4225C18.181 452.594 19.1575 453.5 20.3335 453.5L20.5 453.5 19 440 16.75 440z"/>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

33
src/assets/marker-purple.svg
View File

@@ -1,22 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="45px" height="458px" viewBox="0 0 45 458" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>marker-purple</title>
<g id="marker-purple" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="marker">
<path d="M18.3245,444.00015 C17.567,444.00015 16.9295,443.43765 16.8365,442.68615 L16.25,438.00015 L15.7301372,438.00015 C14.7367686,438.00015 13.8939496,437.271054 13.7509643,436.28803 L6,383.00015 C4.8954305,383.00015 4,382.104719 4,381.00015 L4,14 C4,9.581722 7.581722,6 12,6 L37,6 C41.418278,6 45,9.581722 45,14 L45,381.00015 C45,382.104719 44.1045695,383.00015 43,383.00015 L35.2490357,436.28803 C35.1060504,437.271054 34.2632314,438.00015 33.2698628,438.00015 L32.75,438.00015 L32.1635,442.68615 C32.0705,443.43765 31.433,444.00015 30.6755,444.00015 L28.25,444.00015 L26.909,455.42265 C26.819,456.59415 25.8425,457.50015 24.6665,457.50015 L24.3335,457.50015 C23.1575,457.50015 22.181,456.59415 22.091,455.42265 L20.75,444.00015 L18.3245,444.00015 Z" id="shadow" fill="#35313D" opacity="0.100000001"></path>
<g id="body" transform="translate(0.000000, 0.000150)">
<path d="M12.25,434 L28.75,434 L28.1635,438.686 C28.0705,439.4375 27.433,440 26.6755,440 L14.3245,440 C13.567,440 12.9295,439.4375 12.8365,438.686 L12.25,434 Z" id="Fill-1" fill="#4B4A48"></path>
<path d="M9.75096432,432.28788 L2,379 L2,379 L39,379 L31.2490357,432.28788 C31.1060504,433.270904 30.2632314,434 29.2698628,434 L11.7301372,434 C10.7367686,434 9.89394963,433.270904 9.75096432,432.28788 Z" id="Fill-5-Copy-2" fill="#353432"></path>
<path d="M0,377 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 L33,0 C37.418278,-8.11624501e-16 41,3.581722 41,8 L41,377 C41,378.104569 40.1045695,379 39,379 L2,379 C0.8954305,379 1.3527075e-16,378.104569 0,377 Z" id="Fill-5-Copy" fill="#1F1D1B"></path>
<path d="M16.75,440 L24.25,440 L22.909,451.4225 C22.819,452.594 21.8425,453.5 20.6665,453.5 L20.3335,453.5 C19.1575,453.5 18.181,452.594 18.091,451.4225 L16.75,440 Z" id="Fill-9" fill="#925BFF"></path>
<path d="M-0.644,324.49985 L-0.644,321.37985 L0.448,321.37985 C2.404,321.37985 3.664,320.51585 3.664,318.70385 L3.664,318.65585 C3.664,316.84385 2.476,315.91985 0.388,315.91985 L-2.576,315.91985 L-2.576,324.49985 L-0.644,324.49985 Z M0.34,320.02385 L-0.644,320.02385 L-0.644,317.39585 L0.34,317.39585 C1.264,317.39585 1.792,317.75585 1.792,318.66785 L1.792,318.71585 C1.792,319.56785 1.288,320.02385 0.34,320.02385 Z M6.88,324.49985 L6.88,320.95985 L10.324,320.95985 L10.324,324.49985 L12.268,324.49985 L12.268,315.91985 L10.324,315.91985 L10.324,319.42385 L6.88,319.42385 L6.88,315.91985 L4.936,315.91985 L4.936,324.49985 L6.88,324.49985 Z M18.064,324.63185 C20.74,324.63185 22.492,322.77185 22.492,320.21585 L22.492,320.11985 C22.492,317.53985 20.656,315.79985 18.076,315.79985 C15.532,315.79985 13.66,317.61185 13.66,320.16785 L13.66,320.26385 C13.66,322.77185 15.376,324.63185 18.064,324.63185 Z M18.1,323.08385 C16.696,323.08385 15.688,322.00385 15.688,320.25185 L15.688,320.15585 C15.688,318.42785 16.588,317.33585 18.076,317.33585 C19.576,317.33585 20.464,318.47585 20.464,320.14385 L20.464,320.23985 C20.464,321.96785 19.552,323.08385 18.1,323.08385 Z M26.896,324.63185 C28.924,324.63185 30.172,323.41985 30.172,321.89585 C30.172,320.11985 29.104,319.55585 27.028,319.29185 C25.708,319.09985 25.432,318.81185 25.432,318.19985 C25.432,317.62385 25.864,317.22785 26.716,317.22785 C27.568,317.22785 28.024,317.58785 28.144,318.36785 L29.932,318.36785 C29.776,316.66385 28.648,315.79985 26.716,315.79985 C24.82,315.79985 23.596,316.89185 23.596,318.35585 C23.596,320.01185 24.496,320.67185 26.692,320.95985 C27.952,321.15185 28.312,321.39185 28.312,322.07585 C28.312,322.74785 27.748,323.21585 26.896,323.21585 C25.624,323.21585 25.3,322.57985 25.216,321.81185 L23.356,321.81185 C23.464,323.52785 24.544,324.63185 26.896,324.63185 Z M33.508,324.49985 L33.508,321.37985 L34.6,321.37985 C36.556,321.37985 37.816,320.51585 37.816,318.70385 L37.816,318.65585 C37.816,316.84385 36.628,315.91985 34.54,315.91985 L31.576,315.91985 L31.576,324.49985 L33.508,324.49985 Z M34.492,320.02385 L33.508,320.02385 L33.508,317.39585 L34.492,317.39585 C35.416,317.39585 35.944,317.75585 35.944,318.66785 L35.944,318.71585 C35.944,319.56785 35.44,320.02385 34.492,320.02385 Z M41.032,324.49985 L41.032,320.95985 L44.476,320.95985 L44.476,324.49985 L46.42,324.49985 L46.42,315.91985 L44.476,315.91985 L44.476,319.42385 L41.032,319.42385 L41.032,315.91985 L39.088,315.91985 L39.088,324.49985 L41.032,324.49985 Z M52.216,324.63185 C54.892,324.63185 56.644,322.77185 56.644,320.21585 L56.644,320.11985 C56.644,317.53985 54.808,315.79985 52.228,315.79985 C49.684,315.79985 47.812,317.61185 47.812,320.16785 L47.812,320.26385 C47.812,322.77185 49.528,324.63185 52.216,324.63185 Z M52.252,323.08385 C50.848,323.08385 49.84,322.00385 49.84,320.25185 L49.84,320.15585 C49.84,318.42785 50.74,317.33585 52.228,317.33585 C53.728,317.33585 54.616,318.47585 54.616,320.14385 L54.616,320.23985 C54.616,321.96785 53.704,323.08385 52.252,323.08385 Z M59.98,324.49985 L59.98,321.18785 L60.82,321.18785 L62.872,324.49985 L64.936,324.49985 L62.668,320.85185 C63.676,320.55185 64.432,319.86785 64.432,318.57185 L64.432,318.52385 C64.432,316.74785 63.148,315.91985 61.12,315.91985 L58.048,315.91985 L58.048,324.49985 L59.98,324.49985 Z M61.072,319.86785 L59.98,319.86785 L59.98,317.40785 L61.072,317.40785 C62.008,317.40785 62.536,317.70785 62.536,318.58385 L62.536,318.63185 C62.536,319.45985 62.044,319.86785 61.072,319.86785 Z" id="PHOSPHOR" fill="#FFFFFF" fill-rule="nonzero" opacity="0.300000012" transform="translate(31.180000, 320.215850) rotate(90.000000) translate(-31.180000, -320.215850) "></path>
</g>
<g id="highlights" transform="translate(0.000000, 0.000150)" fill="#FFFFFF" opacity="0.100000001">
<polygon id="Fill-3" points="17.5 440 16.75 434 12.25 434 13 440"></polygon>
<polygon id="Fill-7" points="10 434 2 379 11 379 17.5 434"></polygon>
<path d="M0,379 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 L9,0 L9,0 L9,379 L0,379 Z" id="Fill-7-Copy"></path>
<path d="M16.75,440 L18.091,451.4225 C18.181,452.594 19.1575,453.5 20.3335,453.5 L20.5,453.5 L19,440 L16.75,440 Z" id="Fill-12"></path>
</g>
</g>
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="458" viewBox="0 0 45 458">
<g fill="none" fill-rule="evenodd">
<path fill="#35313D" d="M18.3245,444.00015 C17.567,444.00015 16.9295,443.43765 16.8365,442.68615 L16.25,438.00015 L15.7301372,438.00015 C14.7367686,438.00015 13.8939496,437.271054 13.7509643,436.28803 L6,383.00015 C4.8954305,383.00015 4,382.104719 4,381.00015 L4,14 C4,9.581722 7.581722,6 12,6 L37,6 C41.418278,6 45,9.581722 45,14 L45,381.00015 C45,382.104719 44.1045695,383.00015 43,383.00015 L35.2490357,436.28803 C35.1060504,437.271054 34.2632314,438.00015 33.2698628,438.00015 L32.75,438.00015 L32.1635,442.68615 C32.0705,443.43765 31.433,444.00015 30.6755,444.00015 L28.25,444.00015 L26.909,455.42265 C26.819,456.59415 25.8425,457.50015 24.6665,457.50015 L24.3335,457.50015 C23.1575,457.50015 22.181,456.59415 22.091,455.42265 L20.75,444.00015 L18.3245,444.00015 Z" opacity=".1"/>
<path fill="#4B4A48" d="M12.25,434 L28.75,434 L28.1635,438.686 C28.0705,439.4375 27.433,440 26.6755,440 L14.3245,440 C13.567,440 12.9295,439.4375 12.8365,438.686 L12.25,434 Z"/>
<path fill="#353432" d="M9.75096432,432.28788 L2,379 L2,379 L39,379 L31.2490357,432.28788 C31.1060504,433.270904 30.2632314,434 29.2698628,434 L11.7301372,434 C10.7367686,434 9.89394963,433.270904 9.75096432,432.28788 Z"/>
<path fill="#1F1D1B" d="M0,377 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 L33,0 C37.418278,-8.11624501e-16 41,3.581722 41,8 L41,377 C41,378.104569 40.1045695,379 39,379 L2,379 C0.8954305,379 1.3527075e-16,378.104569 0,377 Z"/>
<path fill="#925BFF" d="M16.75,440 L24.25,440 L22.909,451.4225 C22.819,452.594 21.8425,453.5 20.6665,453.5 L20.3335,453.5 C19.1575,453.5 18.181,452.594 18.091,451.4225 L16.75,440 Z"/>
<path fill="#FFF" fill-rule="nonzero" d="M-0.644,324.49985 L-0.644,321.37985 L0.448,321.37985 C2.404,321.37985 3.664,320.51585 3.664,318.70385 L3.664,318.65585 C3.664,316.84385 2.476,315.91985 0.388,315.91985 L-2.576,315.91985 L-2.576,324.49985 L-0.644,324.49985 Z M0.34,320.02385 L-0.644,320.02385 L-0.644,317.39585 L0.34,317.39585 C1.264,317.39585 1.792,317.75585 1.792,318.66785 L1.792,318.71585 C1.792,319.56785 1.288,320.02385 0.34,320.02385 Z M6.88,324.49985 L6.88,320.95985 L10.324,320.95985 L10.324,324.49985 L12.268,324.49985 L12.268,315.91985 L10.324,315.91985 L10.324,319.42385 L6.88,319.42385 L6.88,315.91985 L4.936,315.91985 L4.936,324.49985 L6.88,324.49985 Z M18.064,324.63185 C20.74,324.63185 22.492,322.77185 22.492,320.21585 L22.492,320.11985 C22.492,317.53985 20.656,315.79985 18.076,315.79985 C15.532,315.79985 13.66,317.61185 13.66,320.16785 L13.66,320.26385 C13.66,322.77185 15.376,324.63185 18.064,324.63185 Z M18.1,323.08385 C16.696,323.08385 15.688,322.00385 15.688,320.25185 L15.688,320.15585 C15.688,318.42785 16.588,317.33585 18.076,317.33585 C19.576,317.33585 20.464,318.47585 20.464,320.14385 L20.464,320.23985 C20.464,321.96785 19.552,323.08385 18.1,323.08385 Z M26.896,324.63185 C28.924,324.63185 30.172,323.41985 30.172,321.89585 C30.172,320.11985 29.104,319.55585 27.028,319.29185 C25.708,319.09985 25.432,318.81185 25.432,318.19985 C25.432,317.62385 25.864,317.22785 26.716,317.22785 C27.568,317.22785 28.024,317.58785 28.144,318.36785 L29.932,318.36785 C29.776,316.66385 28.648,315.79985 26.716,315.79985 C24.82,315.79985 23.596,316.89185 23.596,318.35585 C23.596,320.01185 24.496,320.67185 26.692,320.95985 C27.952,321.15185 28.312,321.39185 28.312,322.07585 C28.312,322.74785 27.748,323.21585 26.896,323.21585 C25.624,323.21585 25.3,322.57985 25.216,321.81185 L23.356,321.81185 C23.464,323.52785 24.544,324.63185 26.896,324.63185 Z M33.508,324.49985 L33.508,321.37985 L34.6,321.37985 C36.556,321.37985 37.816,320.51585 37.816,318.70385 L37.816,318.65585 C37.816,316.84385 36.628,315.91985 34.54,315.91985 L31.576,315.91985 L31.576,324.49985 L33.508,324.49985 Z M34.492,320.02385 L33.508,320.02385 L33.508,317.39585 L34.492,317.39585 C35.416,317.39585 35.944,317.75585 35.944,318.66785 L35.944,318.71585 C35.944,319.56785 35.44,320.02385 34.492,320.02385 Z M41.032,324.49985 L41.032,320.95985 L44.476,320.95985 L44.476,324.49985 L46.42,324.49985 L46.42,315.91985 L44.476,315.91985 L44.476,319.42385 L41.032,319.42385 L41.032,315.91985 L39.088,315.91985 L39.088,324.49985 L41.032,324.49985 Z M52.216,324.63185 C54.892,324.63185 56.644,322.77185 56.644,320.21585 L56.644,320.11985 C56.644,317.53985 54.808,315.79985 52.228,315.79985 C49.684,315.79985 47.812,317.61185 47.812,320.16785 L47.812,320.26385 C47.812,322.77185 49.528,324.63185 52.216,324.63185 Z M52.252,323.08385 C50.848,323.08385 49.84,322.00385 49.84,320.25185 L49.84,320.15585 C49.84,318.42785 50.74,317.33585 52.228,317.33585 C53.728,317.33585 54.616,318.47585 54.616,320.14385 L54.616,320.23985 C54.616,321.96785 53.704,323.08385 52.252,323.08385 Z M59.98,324.49985 L59.98,321.18785 L60.82,321.18785 L62.872,324.49985 L64.936,324.49985 L62.668,320.85185 C63.676,320.55185 64.432,319.86785 64.432,318.57185 L64.432,318.52385 C64.432,316.74785 63.148,315.91985 61.12,315.91985 L58.048,315.91985 L58.048,324.49985 L59.98,324.49985 Z M61.072,319.86785 L59.98,319.86785 L59.98,317.40785 L61.072,317.40785 C62.008,317.40785 62.536,317.70785 62.536,318.58385 L62.536,318.63185 C62.536,319.45985 62.044,319.86785 61.072,319.86785 Z" opacity=".3" transform="rotate(90 31.18 320.216)"/>
<g fill="#FFF" opacity=".1">
<polygon points="17.5 440 16.75 434 12.25 434 13 440"/>
<polygon points="10 434 2 379 11 379 17.5 434"/>
<path d="M0 379L0 8C-5.41083001e-16 3.581722 3.581722 8.11624501e-16 8 0L9 0 9 0 9 379 0 379zM16.75 440L18.091 451.4225C18.181 452.594 19.1575 453.5 20.3335 453.5L20.5 453.5 19 440 16.75 440z"/>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

12
src/assets/paperclips-footer.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="289" viewBox="0 0 140 289">
<g fill="none" fill-rule="evenodd">
<g fill="#000" transform="rotate(-58 71.706 11.615)">
<path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
<path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
</g>
<g fill="#000" transform="rotate(40 -178.662 147.611)">
<path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
<path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

12
src/assets/paperclips-header-mobile.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="217" height="199" viewBox="0 0 217 199">
<g fill="none" fill-rule="evenodd">
<g fill="#000" transform="rotate(-20 141.428 -249.712)">
<path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
<path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
</g>
<g fill="#000" transform="rotate(10 -475.704 343.826)">
<path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
<path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

16
src/assets/paperclips-header.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="415" height="199" viewBox="0 0 415 199">
<g fill="none" fill-rule="evenodd">
<g fill="#000" transform="rotate(-50 68.717 11.971)">
<path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
<path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
</g>
<g fill="#000" transform="rotate(-20 240.428 -811.169)">
<path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
<path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
</g>
<g fill="#000" transform="rotate(10 -376.704 1475.401)">
<path d="M73.5783829,69.1067961 L19.1495518,69.1067961 C11.9105926,69.1067961 6.02159845,63.0861981 6.02159845,55.6854369 C6.02159845,48.2846757 11.9105926,42.2640777 19.1495518,42.2640777 L72.8349887,42.2640777 C76.9463984,42.2640777 80.2912994,45.6089786 80.2912994,49.7203883 C80.2912994,53.8317981 76.9463984,57.176699 72.8349887,57.176699 L31.0796489,57.176699 C30.2560994,57.176699 29.5883868,56.5089864 29.5883868,55.6854369 C29.5883868,54.8618874 30.2560994,54.1941748 31.0796489,54.1941748 L72.8349887,54.1941748 C75.3019091,54.1941748 77.3087751,52.1873087 77.3087751,49.7203883 C77.3087751,47.253468 75.3019091,45.2466019 72.8349887,45.2466019 L19.1495518,45.2466019 C13.5550819,45.2466019 9.00412272,49.9295379 9.00412272,55.6854369 C9.00412272,61.4413359 13.5550819,66.1242718 19.1495518,66.1242718 L73.5783829,66.1242718 C82.6236334,66.1242718 89.9822664,58.7656388 89.9822664,49.7203883 C89.9822664,40.6751379 82.6236334,33.3165049 73.5783829,33.3165049 L31.8230431,33.3165049 C30.9994936,33.3165049 30.331781,32.6487922 30.331781,31.8252427 C30.331781,31.0016932 30.9994936,30.3339806 31.8230431,30.3339806 L73.5783829,30.3339806 C84.2681227,30.3339806 92.9647907,39.0306485 92.9647907,49.7203883 C92.9647907,60.4101282 84.2681227,69.1067961 73.5783829,69.1067961" opacity=".1"/>
<path d="M71.5783829,67.1067961 L17.1495518,67.1067961 C9.91059262,67.1067961 4.02159845,61.0861981 4.02159845,53.6854369 C4.02159845,46.2846757 9.91059262,40.2640777 17.1495518,40.2640777 L70.8349887,40.2640777 C74.9463984,40.2640777 78.2912994,43.6089786 78.2912994,47.7203883 C78.2912994,51.8317981 74.9463984,55.176699 70.8349887,55.176699 L29.0796489,55.176699 C28.2560994,55.176699 27.5883868,54.5089864 27.5883868,53.6854369 C27.5883868,52.8618874 28.2560994,52.1941748 29.0796489,52.1941748 L70.8349887,52.1941748 C73.3019091,52.1941748 75.3087751,50.1873087 75.3087751,47.7203883 C75.3087751,45.253468 73.3019091,43.2466019 70.8349887,43.2466019 L17.1495518,43.2466019 C11.5550819,43.2466019 7.00412272,47.9295379 7.00412272,53.6854369 C7.00412272,59.4413359 11.5550819,64.1242718 17.1495518,64.1242718 L71.5783829,64.1242718 C80.6236334,64.1242718 87.9822664,56.7656388 87.9822664,47.7203883 C87.9822664,38.6751379 80.6236334,31.3165049 71.5783829,31.3165049 L29.8230431,31.3165049 C28.9994936,31.3165049 28.331781,30.6487922 28.331781,29.8252427 C28.331781,29.0016932 28.9994936,28.3339806 29.8230431,28.3339806 L71.5783829,28.3339806 C82.2681227,28.3339806 90.9647907,37.0306485 90.9647907,47.7203883 C90.9647907,58.4101282 82.2681227,67.1067961 71.5783829,67.1067961"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

7
src/assets/post-it.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="418" height="419" viewBox="0 0 418 419">
<g fill="none" fill-rule="evenodd" transform="rotate(-10 360.236 29.264)">
<polygon fill="#35313D" points="3.245 4.634 359.245 4.634 359.245 288.738 287.234 360.634 3.245 360.634" opacity=".1"/>
<polygon fill="#FFD171" points="0 0 356 0 356 284.105 283.989 356 0 356"/>
<polygon fill="#000" points="356 284 356 356 284 356" opacity=".1" transform="rotate(180 320 320)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 487 B

133
src/assets/receipt-spec.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 126 KiB

After

Width:  |  Height:  |  Size: 115 KiB

91
src/assets/receipt.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 29 KiB

84
src/assets/tablet-spec.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 83 KiB

53
src/assets/tablet.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 36 KiB

28
src/assets/warning-spec.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 17 KiB

20
src/assets/warning.svg
View File

@@ -1,14 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="223px" height="444px" viewBox="0 0 223 444" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>warning</title>
<g id="warning" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(111.166399, 221.889681) rotate(280.000000) translate(-111.166399, -221.889681) translate(-100.833601, 146.389681)">
<rect id="shadow" fill="#35313D" opacity="0.100000001" x="0.133042548" y="6.95073558" width="418.5" height="144"></rect>
<rect id="body" stroke="#000000" stroke-width="4.5" fill="#FF8E51" x="7.25" y="2.25" width="414" height="139.5"></rect>
<path d="M164.345,89 L170.9375,65.96 L177.575,89 L182.93,89 L192.38,56.6 L186.6875,56.6 L180.2525,80 L173.795,56.6 L168.1025,56.645 L161.6675,80 L155.21,56.6 L149.5175,56.6 L158.99,89 L164.345,89 Z M199.3775,89 L201.589,81.98 L214.351,81.98 L216.59,89 L222.17,89 L211.955,56.6 L204.0125,56.6 L193.7975,89 L199.3775,89 Z M212.737,76.918 L203.183,76.918 L207.931,61.847 L212.737,76.918 Z M231.6425,89 L231.6425,77.6825 L239.342,77.683 L244.8275,89 L250.97,89 L244.984,76.723 L245.220208,76.6192793 C246.465038,76.044785 247.482245,75.2390737 248.271829,74.2021456 L248.45,73.95875 C249.785,72.06125 250.4525,69.7925 250.4525,67.1525 C250.4525,65.3675 250.15625,63.74375 249.56375,62.28125 C248.97125,60.81875 248.06375,59.6075 246.84125,58.6475 C245.61875,57.6875 244.07,57.065 242.195,56.78 C241.775,56.705 241.3175,56.65625 240.8225,56.63375 C240.3275,56.61125 239.9225,56.6 239.6075,56.6 L239.6075,56.6 L226.22,56.6 L226.22,89 L231.6425,89 Z M239.3825,72.62 L231.6425,72.62 L231.6425,61.685 L239.3825,61.685 C239.6825,61.685 240.02,61.69625 240.395,61.71875 C240.77,61.74125 241.115,61.7975 241.43,61.8875 C242.33,62.1125 243.03875,62.51 243.55625,63.08 C244.07375,63.65 244.44125,64.29875 244.65875,65.02625 C244.87625,65.75375 244.985,66.4625 244.985,67.1525 C244.985,67.8425 244.87625,68.5475 244.65875,69.2675 C244.44125,69.9875 244.07375,70.6325 243.55625,71.2025 C243.03875,71.7725 242.33,72.17 241.43,72.395 C241.115,72.485 240.77,72.545 240.395,72.575 C240.02,72.605 239.6825,72.62 239.3825,72.62 L239.3825,72.62 Z M261.41,89 L261.41,66.1625 L276.44,89 L281.93,89 L281.93,56.6 L276.44,56.6 L276.44,79.4375 L261.41,56.6 L255.92,56.6 L255.92,89 L261.41,89 Z M294.1025,89 L294.1025,56.6 L288.68,56.6 L288.68,89 L294.1025,89 Z M306.3425,89 L306.3425,66.1625 L321.3725,89 L326.8625,89 L326.8625,56.6 L321.3725,56.6 L321.3725,79.4375 L306.3425,56.6 L300.8525,56.6 L300.8525,89 L306.3425,89 Z M346.5275,89.675 C349.6625,89.675 352.355,89 354.605,87.65 C356.855,86.3 358.58375,84.43625 359.79125,82.05875 C360.99875,79.68125 361.6025,76.9625 361.6025,73.9025 C361.6025,73.8125 361.595,73.535 361.58,73.07 C361.565,72.605 361.5425,72.2525 361.5125,72.0125 L361.5125,72.0125 L350.0375,72.0125 L350.0375,76.265 L355.7525,76.265 C355.4825,78.125 354.9575,79.67375 354.1775,80.91125 C353.3975,82.14875 352.3925,83.07125 351.1625,83.67875 C349.9325,84.28625 348.5,84.5825 346.865,84.5675 C344.69,84.5375 342.87875,84.035 341.43125,83.06 C339.98375,82.085 338.9,80.72375 338.18,78.97625 C337.46,77.22875 337.1,75.17 337.1,72.8 C337.1,70.43 337.46375,68.36 338.19125,66.59 C338.91875,64.82 340.0025,63.4475 341.4425,62.4725 C342.8825,61.4975 344.69,61.025 346.865,61.055 C349.025,61.055 350.8025,61.62875 352.1975,62.77625 C353.5925,63.92375 354.5975,65.4575 355.2125,67.3775 L355.2125,67.3775 L360.7475,66.5 C359.9225,63.155 358.34375,60.55625 356.01125,58.70375 C353.67875,56.85125 350.5175,55.925 346.5275,55.925 C343.6475,55.925 341.06,56.59625 338.765,57.93875 C336.47,59.28125 334.6625,61.20875 333.3425,63.72125 C332.0225,66.23375 331.3625,69.26 331.3625,72.8 C331.3625,75.5 331.7525,77.89625 332.5325,79.98875 C333.3125,82.08125 334.39625,83.8475 335.78375,85.2875 C337.17125,86.7275 338.78375,87.81875 340.62125,88.56125 C342.45875,89.30375 344.4275,89.675 346.5275,89.675 Z" id="WARNING" fill="#000000" fill-rule="nonzero"></path>
<g id="warning-icon" transform="translate(65.000000, 36.000000)" fill="#000000">
<path d="M36,54.0009 C34.137,54.0009 32.625,52.4889 32.625,50.6259 C32.625,48.7584 34.137,47.2509 36,47.2509 C37.863,47.2509 39.375,48.7584 39.375,50.6259 C39.375,52.4889 37.863,54.0009 36,54.0009 L36,54.0009 Z M33.75,27.0009 C33.75,25.7544 34.7535,24.7509 36,24.7509 C37.242,24.7509 38.25,25.7544 38.25,27.0009 L38.25,40.5009 C38.25,41.7429 37.242,42.7509 36,42.7509 C34.7535,42.7509 33.75,41.7429 33.75,40.5009 L33.75,27.0009 Z M66.582,52.8669 L41.841,10.1169 C40.6215,8.0064 38.439,6.7509 36,6.7509 C33.561,6.7509 31.3785,8.0064 30.159,10.1169 L30.159,10.1169 L5.418,52.8669 C4.1895,54.9819 4.1895,57.5064 5.4135,59.6214 C6.6285,61.7364 8.811,62.9964 11.2545,62.9964 L60.7455,62.9964 C63.189,62.9964 65.3715,61.7364 66.5865,59.6214 C67.8105,57.5064 67.8105,54.9819 66.582,52.8669 L66.582,52.8669 Z" id="warning"></path>
</g>
</g>
</g>
<svg xmlns="http://www.w3.org/2000/svg" width="279" height="555" viewBox="0 0 279 555">
<g fill="none" fill-rule="evenodd" transform="rotate(-80 311.017 260.974)">
<rect width="523.125" height="180" x=".166" y="8.688" fill="#35313D" opacity=".1"/>
<rect width="517.5" height="174.375" x="9.063" y="2.813" fill="#FF8E51" stroke="#000" stroke-width="5.625"/>
<path fill="#000" fill-rule="nonzero" d="M205.43125,111.25 L213.671875,82.45 L221.96875,111.25 L228.6625,111.25 L240.475,70.75 L233.359375,70.75 L225.315625,100 L217.24375,70.75 L210.128125,70.80625 L202.084375,100 L194.0125,70.75 L186.896875,70.75 L198.7375,111.25 L205.43125,111.25 Z M249.221875,111.25 L251.98625,102.475 L267.93875,102.475 L270.7375,111.25 L277.7125,111.25 L264.94375,70.75 L255.015625,70.75 L242.246875,111.25 L249.221875,111.25 Z M265.92125,96.1475 L253.97875,96.1475 L259.91375,77.30875 L265.92125,96.1475 Z M289.553125,111.25 L289.553125,97.103125 L299.1775,97.10375 L306.034375,111.25 L313.7125,111.25 L306.23,95.90375 L306.52526,95.7740991 C308.081297,95.0559812 309.352806,94.0488422 310.339786,92.7526819 L310.5625,92.4484375 C312.23125,90.0765625 313.065625,87.240625 313.065625,83.940625 C313.065625,81.709375 312.695312,79.6796875 311.954687,77.8515625 C311.214062,76.0234375 310.079687,74.509375 308.551562,73.309375 C307.023437,72.109375 305.0875,71.33125 302.74375,70.975 C302.21875,70.88125 301.646875,70.8203125 301.028125,70.7921875 C300.409375,70.7640625 299.903125,70.75 299.509375,70.75 L299.509375,70.75 L282.775,70.75 L282.775,111.25 L289.553125,111.25 Z M299.228125,90.775 L289.553125,90.775 L289.553125,77.10625 L299.228125,77.10625 C299.603125,77.10625 300.025,77.1203125 300.49375,77.1484375 C300.9625,77.1765625 301.39375,77.246875 301.7875,77.359375 C302.9125,77.640625 303.798437,78.1375 304.445312,78.85 C305.092187,79.5625 305.551562,80.3734375 305.823437,81.2828125 C306.095312,82.1921875 306.23125,83.078125 306.23125,83.940625 C306.23125,84.803125 306.095312,85.684375 305.823437,86.584375 C305.551562,87.484375 305.092187,88.290625 304.445312,89.003125 C303.798437,89.715625 302.9125,90.2125 301.7875,90.49375 C301.39375,90.60625 300.9625,90.68125 300.49375,90.71875 C300.025,90.75625 299.603125,90.775 299.228125,90.775 L299.228125,90.775 Z M326.7625,111.25 L326.7625,82.703125 L345.55,111.25 L352.4125,111.25 L352.4125,70.75 L345.55,70.75 L345.55,99.296875 L326.7625,70.75 L319.9,70.75 L319.9,111.25 L326.7625,111.25 Z M367.628125,111.25 L367.628125,70.75 L360.85,70.75 L360.85,111.25 L367.628125,111.25 Z M382.928125,111.25 L382.928125,82.703125 L401.715625,111.25 L408.578125,111.25 L408.578125,70.75 L401.715625,70.75 L401.715625,99.296875 L382.928125,70.75 L376.065625,70.75 L376.065625,111.25 L382.928125,111.25 Z M433.159375,112.09375 C437.078125,112.09375 440.44375,111.25 443.25625,109.5625 C446.06875,107.875 448.229687,105.545312 449.739062,102.573437 C451.248437,99.6015625 452.003125,96.203125 452.003125,92.378125 C452.003125,92.265625 451.99375,91.91875 451.975,91.3375 C451.95625,90.75625 451.928125,90.315625 451.890625,90.015625 L451.890625,90.015625 L437.546875,90.015625 L437.546875,95.33125 L444.690625,95.33125 C444.353125,97.65625 443.696875,99.5921875 442.721875,101.139062 C441.746875,102.685937 440.490625,103.839062 438.953125,104.598437 C437.415625,105.357812 435.625,105.728125 433.58125,105.709375 C430.8625,105.671875 428.598437,105.04375 426.789062,103.825 C424.979687,102.60625 423.625,100.904687 422.725,98.7203125 C421.825,96.5359375 421.375,93.9625 421.375,91 C421.375,88.0375 421.829687,85.45 422.739062,83.2375 C423.648437,81.025 425.003125,79.309375 426.803125,78.090625 C428.603125,76.871875 430.8625,76.28125 433.58125,76.31875 C436.28125,76.31875 438.503125,77.0359375 440.246875,78.4703125 C441.990625,79.9046875 443.246875,81.821875 444.015625,84.221875 L444.015625,84.221875 L450.934375,83.125 C449.903125,78.94375 447.929687,75.6953125 445.014062,73.3796875 C442.098437,71.0640625 438.146875,69.90625 433.159375,69.90625 C429.559375,69.90625 426.325,70.7453125 423.45625,72.4234375 C420.5875,74.1015625 418.328125,76.5109375 416.678125,79.6515625 C415.028125,82.7921875 414.203125,86.575 414.203125,91 C414.203125,94.375 414.690625,97.3703125 415.665625,99.9859375 C416.640625,102.601562 417.995312,104.809375 419.729687,106.609375 C421.464062,108.409375 423.479687,109.773437 425.776562,110.701562 C428.073437,111.629687 430.534375,112.09375 433.159375,112.09375 Z"/>
<path fill="#000" d="M45,67.501125 C42.67125,67.501125 40.78125,65.611125 40.78125,63.282375 C40.78125,60.948 42.67125,59.063625 45,59.063625 C47.32875,59.063625 49.21875,60.948 49.21875,63.282375 C49.21875,65.611125 47.32875,67.501125 45,67.501125 L45,67.501125 Z M42.1875,33.751125 C42.1875,32.193 43.441875,30.938625 45,30.938625 C46.5525,30.938625 47.8125,32.193 47.8125,33.751125 L47.8125,50.626125 C47.8125,52.178625 46.5525,53.438625 45,53.438625 C43.441875,53.438625 42.1875,52.178625 42.1875,50.626125 L42.1875,33.751125 Z M83.2275,66.083625 L52.30125,12.646125 C50.776875,10.008 48.04875,8.438625 45,8.438625 C41.95125,8.438625 39.223125,10.008 37.69875,12.646125 L37.69875,12.646125 L6.7725,66.083625 C5.236875,68.727375 5.236875,71.883 6.766875,74.52675 C8.285625,77.1705 11.01375,78.7455 14.068125,78.7455 L75.931875,78.7455 C78.98625,78.7455 81.714375,77.1705 83.233125,74.52675 C84.763125,71.883 84.763125,68.727375 83.2275,66.083625 L83.2275,66.083625 Z" transform="translate(81.25 45)"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

1
src/components/App/App.css
View File

@@ -44,7 +44,6 @@ button {
button.main-button {
height: 64px;
margin: 16px 24px 0 0;
padding: 0 48px 0 40px;
background-color: white;
border-radius: 8px;

266
src/components/Header/Header.css
View File

@@ -1,33 +1,81 @@
header {
width: 100%;
height: 1434px;
background-color: #ffd171;
overflow: hidden;
}
header img {
user-select: none;
.header-contents {
position: relative;
width: 100%;
height: 100%;
max-width: 1366px;
min-width: 360px;
margin: auto;
}
.illustrations-top {
position: relative;
}
.illustrations-bottom {
position: relative;
}
.intro {
margin: 0 8%;
max-width: 666px;
}
.intro h2 {
font-size: 40px;
line-height: 52px;
margin: 0 0 32px;
}
.inspectable {
cursor: cell;
}
.xray {
opacity: 1;
transition: opacity 200ms ease;
}
.xray:hover {
opacity: 0;
}
.button-container {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
/* gap: 56px; */
/* column-gap: 56px; */
margin: 48px 0 32px;
flex-flow: column wrap;
align-content: flex-start;
align-items: flex-start;
justify-content: center;
column-gap: 72px;
margin: 56px 0 64px;
max-height: 144px;
}
a.nav-link:not(:last-child) {
margin-right: 56px;
.links > div {
margin: 0 0 24px 0;
display: flex;
align-items: center;
}
.links svg {
margin-right: 12px;
}
a.nav-link {
text-decoration: none;
position: relative;
color: black;
margin-bottom: 16px;
}
a.nav-link:after {
@@ -44,153 +92,155 @@ a.nav-link:hover:after {
width: 100%;
}
.inspectable {
cursor: cell;
#paperclips-three {
display: none;
}
.xray {
opacity: 1;
transition: opacity 200ms ease;
}
.xray:hover {
opacity: 0;
}
.image-container {
position: relative;
width: 100%;
height: 100%;
margin: auto;
}
.button-container {
display: flex;
flex-wrap: wrap;
}
#cutting-mat {
position: absolute;
/* transform: translate(120px, 824px); */
}
#receipt {
position: absolute;
transform: translate(-138px, 190px);
}
#calculator {
position: absolute;
transform: translate(800px, 112px);
}
/* Illustrations remain at same layout up to 1024px */
@media screen and (max-width: 1023px) {
.intro {
margin: 0 10%;
position: absolute;
transform: translate(0, 382px);
}
.intro h2 {
font-size: 40px;
line-height: 52px;
margin-bottom: 32px;
@media screen and (max-width: 1239px) {
.illustrations-top {
height: 382px;
}
#marker-purple {
position: absolute;
top: 0;
left: 0;
transform: translate(40px, -158px);
left: 28px;
top: -158px;
}
#billiard-ball {
position: absolute;
top: 0;
left: 0;
transform: translate(130px, -98px);
left: 132px;
top: -98px;
}
#paperclips {
position: absolute;
transform: translate(176px, 152px);
left: 110px;
top: 152px;
}
#warning {
position: absolute;
top: 0;
left: 0;
transform: translate(398px, -116px);
left: 394px;
top: -304px;
}
#tablet {
position: absolute;
transform: translate(672px, -900px);
left: 672px;
top: -900px;
}
}
@media screen and (min-width: 720px) and (max-width: 1239px) {
.intro {
margin: 0 auto;
}
.illustrations-bottom {
height: 612px;
}
#cutting-mat {
position: absolute;
left: 96px;
}
#receipt {
position: absolute;
left: -36px;
top: 190px;
}
#calculator {
position: absolute;
transform: translate(534px, 240px);
left: 632px;
top: 170px;
}
}
@media screen and (min-width: 760px) and (max-width: 1023px) {
.intro h2 {
font-size: 40px;
line-height: 52px;
margin-bottom: 32px;
}
}
@media screen and (min-width: 1024px) {
.image-container {
width: 1366px;
}
@media screen and (min-width: 1240px) {
.intro {
margin: 0;
width: 660px;
position: absolute;
transform: translate(144px, 386px);
margin: 0 auto 0 140px;
}
.intro h2 {
font-size: 40px;
line-height: 50px;
margin-bottom: 32px;
.illustrations-top {
height: 386px;
}
.illustrations-bottom {
height: 606px;
}
#marker-purple {
position: absolute;
transform: translate(144px, -158px);
}
#tablet {
position: absolute;
transform: translate(578px, -900px);
left: 144px;
top: -158px;
}
#billiard-ball {
position: absolute;
transform: translate(918px, 360px);
left: 900px;
top: 400px;
}
#paperclips {
display: none;
}
#paperclips-three {
display: initial;
position: absolute;
left: 724px;
top: 694px;
}
#warning {
position: absolute;
transform: translate(1184px, 424px);
left: 1170px;
top: 400px;
}
#paperclips {
#tablet {
position: absolute;
transform: translate(982px, 621px);
left: 578px;
top: -900px;
}
#cutting-mat {
position: absolute;
left: 120px;
}
#receipt {
position: absolute;
left: -16px;
top: 190px;
}
#calculator {
position: absolute;
left: 924px;
top: 114px;
}
}
@media screen and (max-width: 759px) {
@media screen and (max-width: 719px) {
.intro h2 {
font-size: 28px;
line-height: 38px;
margin-bottom: 32px;
line-height: 40px;
}
.illustrations-top {
height: 352px;
}
.illustrations-bottom {
display: none;
}
.links {
display: block;
max-height: initial;
}
}

119
src/components/Header/Header.tsx
View File

@@ -1,9 +1,14 @@
import React from "react";
import { ArrowCircleUpRight, ArrowCircleDown } from "phosphor-react";
import {
ArrowCircleUpRight,
ArrowCircleDown,
ArrowElbowDownRight,
} from "phosphor-react";
import "./Header.css";
import markerPurple from "../../assets/marker-purple.svg";
import paperclips from "../../assets/paperclips.svg";
import paperclips from "../../assets/paperclips-header-mobile.svg";
import paperclipsThree from "../../assets/paperclips-header.svg";
import tablet from "../../assets/tablet.svg";
import tabletSpec from "../../assets/tablet-spec.svg";
import billiardBall from "../../assets/billiard-ball.svg";
@@ -34,9 +39,24 @@ const handleScrollToIcons = () =>
const Header: React.FC<HeaderProps> = () => {
return (
<header>
<div className="image-container">
<img src={markerPurple} id="marker-purple" alt="" />
<img src={paperclips} id="paperclips" alt="" />
<div className="header-contents">
<div className="illustrations-top">
<img src={markerPurple} id="marker-purple" alt="" />
<img src={paperclips} id="paperclips" alt="" />
<img src={paperclipsThree} id="paperclips-three" alt="" />
<img id="tablet" src={tabletSpec} alt="" />
<img id="tablet" className="inspectable xray" src={tablet} alt="" />
<img id="billiard-ball" src={billiardBallSpec} alt="" />
<img
id="billiard-ball"
className="inspectable xray"
src={billiardBall}
alt=""
/>
<img id="warning" src={warningSpec} alt="" />
<img id="warning" className="inspectable xray" src={warning} alt="" />
</div>
<div className="intro">
<h2>
Phosphor is a flexible icon family for interfaces, presentations — 
@@ -48,36 +68,67 @@ const Header: React.FC<HeaderProps> = () => {
<ArrowCircleUpRight size={24} weight="fill" />
See the docs
</button>
<button className="main-button" onClick={handleScrollToIcons}>
<ArrowCircleDown size={24} weight="fill" />
Explore icons
</button>
</div>
<div className="links">
<a
className="nav-link"
href="https://phosphoricons.com/assets/phosphor-icons.zip"
download
>
Download all
</a>
<a
className="nav-link"
href="https://github.com/phosphor-icons/phosphor-web/issues"
>
Request
</a>
<a className="nav-link" href="https://paypal.me/minoraxis">
Donate
</a>
<a
className="nav-link"
href="https://github.com/phosphor-icons/phosphor-web"
>
Github
</a>
<div>
<ArrowElbowDownRight size={24} />
<a
className="nav-link"
href="https://phosphoricons.com/assets/phosphor-icons.zip"
download
>
Download all
</a>
</div>
<div>
<ArrowElbowDownRight size={24} />
<a className="nav-link" href="#">
Figma library
</a>
</div>
<div>
<ArrowElbowDownRight size={24} />
<a className="nav-link" href="#">
Figma plugin
</a>
</div>
<div>
<ArrowElbowDownRight size={24} />
<a
className="nav-link"
href="https://github.com/phosphor-icons/phosphor-web/issues"
>
Request an icon
</a>
</div>
<div>
<ArrowElbowDownRight size={24} />
<span>
<a className="nav-link" href="https://paypal.me/minoraxis">
Donate on PayPal
</a>
{" / "}
<a className="nav-link" href="#">
Patreon
</a>
</span>
</div>
<div>
<ArrowElbowDownRight size={24} />
<a
className="nav-link"
href="https://github.com/phosphor-icons/phosphor-web"
>
Github
</a>
</div>
</div>
</div>
<div className="illustrations-bottom">
<img id="cutting-mat" src={cuttingMatSpec} alt="" />
<img
id="cutting-mat"
@@ -95,18 +146,6 @@ const Header: React.FC<HeaderProps> = () => {
alt=""
/>
</div>
<img id="tablet" src={tabletSpec} alt="" />
<img id="tablet" className="inspectable xray" src={tablet} alt="" />
<img id="billiard-ball" src={billiardBallSpec} alt="" />
<img
id="billiard-ball"
className="inspectable xray"
src={billiardBall}
alt=""
/>
<img id="warning" src={warningSpec} alt="" />
<img id="warning" className="inspectable xray" src={warning} alt="" />
</div>
</header>
);