| 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 |
|
| 22 | ## CDN
|
| 23 |
|
| 24 | ### jsDelivr
|
| 25 |
|
| 26 | https://www.jsdelivr.com/package/npm/@wp-pay/logos
|
| 27 |
|
| 28 | ### UNPKG
|
| 29 |
|
| 30 | https://unpkg.com/browse/@wp-pay/logos
|
| 31 |
|
| 32 | ## SVGO
|
| 33 |
|
| 34 | ```
|
| 35 | svgo -r -f ./src -o ./dist
|
| 36 | ```
|
| 37 |
|
| 38 | ## Sizes
|
| 39 |
|
| 40 | ### `640` `×` `360` & `10pct` margin
|
| 41 |
|
| 42 | ```
|
| 43 | ┌──────────────────────────────┐
|
| 44 | | ↕ 10% = 36 ↕ |
|
| 45 | | ┌──────────────────┐ |
|
| 46 | | ↔ | ← 512 → | ↔ |
|
| 47 | | 10% | ↑ ↑ | 10% |
|
| 48 | | = | 288 288 | = |
|
| 49 | | 64 | ↓ ↑ | 64 |
|
| 50 | | ↔ | ← 512 → | ↔ |
|
| 51 | | └──────────────────┘ |
|
| 52 | | ↕ 10% = 36 ↕ |
|
| 53 | └──────────────────────────────┘
|
| 54 | ```
|
| 55 |
|
| 56 | The `max-width` of the actual logo is `512` and the `max-height` is `288`.
|
| 57 |
|
| 58 | ## Center
|
| 59 |
|
| 60 | > The "visual center" is where all of the elements weights are balanced visually despite not being in the exact center.
|
| 61 |
|
| 62 | - https://graphicdesign.stackexchange.com/questions/74356/correctly-vertically-center-text-in-a-box
|
| 63 | - https://javier.xyz/visual-center/
|
| 64 |
|
| 65 | ## Toolbox
|
| 66 |
|
| 67 | ### Examples
|
| 68 |
|
| 69 | ```
|
| 70 | bin/toolbox all
|
| 71 | ```
|
| 72 |
|
| 73 | ```
|
| 74 | bin/toolbox all --dir=src/methods/maestro
|
| 75 | bin/toolbox all --dir=src/methods/mastercard
|
| 76 | ```
|
| 77 |
|
| 78 | ## Resources
|
| 79 |
|
| 80 | * https://brand.mastercard.com/brandcenter/other-marks.html
|
| 81 | * https://brand.mastercard.com/brandcenter/mastercard-brand-mark/downloads.html
|
| 82 | * https://en.wikipedia.org/wiki/Box-drawing_character
|
| 83 | * https://en.wikipedia.org/wiki/Arrow_(symbol)
|