diff --git a/docs/earn-money/payments/payments_add.mdx b/docs/earn-money/payments/payments_add.mdx index caa657496..909d81948 100644 --- a/docs/earn-money/payments/payments_add.mdx +++ b/docs/earn-money/payments/payments_add.mdx @@ -1,5 +1,6 @@ import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; +import useBaseUrl from "@docusaurus/useBaseUrl"; # Add Payments @@ -241,6 +242,23 @@ You’ll need to clearly identify paid products or services. Here are some best - Try to keep purchases in a consistent location or use a consistent visual pattern. - Only use the gold icon to indicate purchases for Reddit Gold. +### Reddit Gold icons + +Choose an official Reddit Gold icon below, then download it as an SVG or PNG. + +
+ ### Product image Product images need to meet the following requirements: diff --git a/src/css/custom.css b/src/css/custom.css index 961d8da62..8e89315eb 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -134,6 +134,34 @@ box-shadow: var(--ifm-global-shadow-lw); } +.gold-icon-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 256px)); + gap: 2rem; + margin: 1rem 0 2rem; +} + +.gold-icon-option > strong { + display: block; + margin-bottom: 0.5rem; +} + +.gold-icon-option img { + display: block; + width: 256px; + max-width: 100%; + height: auto; + margin-bottom: 0.75rem; + border-radius: var(--ifm-code-border-radius); + box-shadow: var(--ifm-global-shadow-lw); +} + +@media (max-width: 576px) { + .gold-icon-grid { + grid-template-columns: minmax(0, 256px); + } +} + .theme-doc-markdown :is(h2, h3, h4, h5, h6) .hash-link { opacity: 0.6; } diff --git a/static/assets/payments/reddit-gold-fill.png b/static/assets/payments/reddit-gold-fill.png new file mode 100644 index 000000000..fe7ed587c Binary files /dev/null and b/static/assets/payments/reddit-gold-fill.png differ diff --git a/static/assets/payments/reddit-gold-fill.svg b/static/assets/payments/reddit-gold-fill.svg new file mode 100644 index 000000000..e49d165d0 --- /dev/null +++ b/static/assets/payments/reddit-gold-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/assets/payments/reddit-gold.png b/static/assets/payments/reddit-gold.png new file mode 100644 index 000000000..40b304b34 Binary files /dev/null and b/static/assets/payments/reddit-gold.png differ diff --git a/static/assets/payments/reddit-gold.svg b/static/assets/payments/reddit-gold.svg new file mode 100644 index 000000000..8897d7fe5 --- /dev/null +++ b/static/assets/payments/reddit-gold.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/versioned_docs/version-0.14/earn-money/payments/payments_add.mdx b/versioned_docs/version-0.14/earn-money/payments/payments_add.mdx index caa657496..909d81948 100644 --- a/versioned_docs/version-0.14/earn-money/payments/payments_add.mdx +++ b/versioned_docs/version-0.14/earn-money/payments/payments_add.mdx @@ -1,5 +1,6 @@ import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; +import useBaseUrl from "@docusaurus/useBaseUrl"; # Add Payments @@ -241,6 +242,23 @@ You’ll need to clearly identify paid products or services. Here are some best - Try to keep purchases in a consistent location or use a consistent visual pattern. - Only use the gold icon to indicate purchases for Reddit Gold. +### Reddit Gold icons + +Choose an official Reddit Gold icon below, then download it as an SVG or PNG. + + + ### Product image Product images need to meet the following requirements: