Adjust OG images

Author: jxnblk

packages/docs/package.json

@@ -11,6 +11,7 @@
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "logo": "node ./scripts/svg-logo.js",
+    "logo:png": "npx repng src/components/logo.js -d static -f logo.png -w=256 -h=256",
     "card": "npx repng src/components/og-image.js -d static -f card.png -w=1280 -h=720",
     "icon": "npx repng src/components/logo.js -d static -f icon.png -w=32 -h=32 --props='{\"size\":32}'"
   },

packages/docs/src/pages/logos.mdx

@@ -0,0 +1,24 @@
+---
+title: Logos
+---
+
+import Logo from '../components/logo'
+
+# Theme UI Logos
+
+## SVG
+
+<Logo />
+
+<!--
+
+![Theme UI logo](logo.svg)
+
+![Theme UI logo](card.svg)
+-->
+
+## PNG
+
+![Theme UI logo](logo.png)
+
+![Theme UI logo](card.png)

packages/docs/static/logo.png

@@ -1,5 +1,5 @@
 <img
-  src="packages/docs/static/logo.svg"
+  src="packages/docs/static/logo.png"
   width="96"
   height="96"
 />