1 | <p align="center">
|
2 | <a href="https://www.wp-pay.org/">
|
3 | <img src="https://www.wp-pay.org/assets/pronamic-pay.svgo-min.svg" alt="WordPress Pay » Core" width="72" height="72">
|
4 | </a>
|
5 | </p>
|
6 |
|
7 | <h1 align="center">WordPress Pay » Logos</h3>
|
8 |
|
9 | <p align="center">
|
10 | Logos for the WordPress payment processing library.
|
11 | </p>
|
12 |
|
13 | ## Table of contents
|
14 |
|
15 | - [CDN](#cdn)
|
16 | - [jsDelivr](#jsdelivr)
|
17 | - [UNPKG](#unpkg)
|
18 | - [SVGO](#svgo)
|
19 | - [Sizes](#sizes)
|
20 | - [Center](#center)
|
21 | - [Requirements](#requirements)
|
22 |
|
23 | ## CDN
|
24 |
|
25 | ### jsDelivr
|
26 |
|
27 | https://www.jsdelivr.com/package/npm/@wp-pay/logos
|
28 |
|
29 | ### UNPKG
|
30 |
|
31 | https://unpkg.com/browse/@wp-pay/logos
|
32 |
|
33 | ## SVGO
|
34 |
|
35 | ```
|
36 | svgo -r -f ./src -o ./dist
|
37 | ```
|
38 |
|
39 | ## Sizes
|
40 |
|
41 | ### `640` `×` `360` & `10pct` margin
|
42 |
|
43 | ```
|
44 | ┌──────────────────────────────┐
|
45 | | ↕ 10% = 36 ↕ |
|
46 | | ┌──────────────────┐ |
|
47 | | ↔ | ← 512 → | ↔ |
|
48 | | 10% | ↑ ↑ | 10% |
|
49 | | = | 288 288 | = |
|
50 | | 64 | ↓ ↑ | 64 |
|
51 | | ↔ | ← 512 → | ↔ |
|
52 | | └──────────────────┘ |
|
53 | | ↕ 10% = 36 ↕ |
|
54 | └──────────────────────────────┘
|
55 | ```
|
56 |
|
57 | The `max-width` of the actual logo is `512` and the `max-height` is `288`.
|
58 |
|
59 | ## Center
|
60 |
|
61 | > The "visual center" is where all of the elements weights are balanced visually despite not being in the exact center.
|
62 |
|
63 | - https://graphicdesign.stackexchange.com/questions/74356/correctly-vertically-center-text-in-a-box
|
64 | - https://javier.xyz/visual-center/
|
65 |
|
66 | ## Requirements
|
67 |
|
68 | ### svgcleaner
|
69 |
|
70 | ```
|
71 | brew install svgcleaner
|
72 | ```
|
73 |
|
74 | - https://formulae.brew.sh/formula/svgcleaner
|
75 | - https://github.com/RazrFalcon/svgcleaner
|
76 |
|
77 |
|
78 | ### pngquant
|
79 |
|
80 | ```
|
81 | brew install pngquant
|
82 | ```
|
83 |
|
84 | - https://formulae.brew.sh/formula/pngquant
|
85 | - https://pngquant.org/
|
86 |
|
87 | ### Inkscape
|
88 |
|
89 | ```
|
90 | brew install --cask inkscape
|
91 | ```
|
92 |
|
93 | - https://formulae.brew.sh/cask/inkscape
|
94 | - https://inkscape.org/
|
95 |
|
96 | ## Toolbox
|
97 |
|
98 | ### Examples
|
99 |
|
100 | ```
|
101 | bin/toolbox all
|
102 | ```
|
103 |
|
104 | ```
|
105 | bin/toolbox all --dir=src/methods/maestro
|
106 | bin/toolbox all --dir=src/methods/mastercard
|
107 | ```
|
108 |
|
109 | ## Resources
|
110 |
|
111 | * https://brand.mastercard.com/brandcenter/other-marks.html
|
112 | * https://brand.mastercard.com/brandcenter/mastercard-brand-mark/downloads.html
|
113 | * https://en.wikipedia.org/wiki/Box-drawing_character
|
114 | * https://en.wikipedia.org/wiki/Arrow_(symbol)
|