🍱 Add css-typed brand image (#20)

connorjs · web-flow · commit b35771d9ae15 · 2024-07-30T12:20:12.000Z
Adds css-typed “brand” image to improve README. It combines the CSS 3
and TypeScript logos with a plus. Includes PNG for other needs (example:
the GitHub social media preview) in addition to the primary SVG source.
diff --git a/README.md b/README.md
@@ -1,15 +1,24 @@
+<div align="center">
+
 # css-typed
 
 TypeScript declaration generator for CSS files.
 
-**Table of contents**
+<img alt="css-typed logo" src="./css-typed.svg" width="400">
+
+</div>
+
+<details>
+<summary><strong>Table of Contents</strong></summary>
 
 - [Usage](#usage)
 - [Recipes](#recipes)
 - [Motivation](#motivation)
 - [Contributing](#contributing)
 - [Implementation details](#implementation-details)
 
+</details>
+
 ## Usage
 
 ### Install
diff --git a/css-typed.png b/css-typed.png
diff --git a/css-typed.svg b/css-typed.svg
@@ -0,0 +1,22 @@
+<svg viewBox="8 1 297 126" xmlns="http://www.w3.org/2000/svg">
+    <svg x="0" width="128" height="126" viewBox="0 0 128 126" xmlns="http://www.w3.org/2000/svg">
+        <path fill="#1572B6" d="M18.814 114.123L8.76 1.352h110.48l-10.064 112.754-45.243 12.543-45.119-12.526z"/>
+        <path fill="#33A9DC" d="M64.001 117.062l36.559-10.136 8.601-96.354h-45.16v106.49z"/>
+        <path fill="#fff"
+              d="M64.001 51.429h18.302l1.264-14.163H64.001V23.435h34.682l-.332 3.711-3.4 38.114h-30.95V51.429z"/>
+        <path fill="#EBEBEB"
+              d="M64.083 87.349l-.061.018-15.403-4.159-.985-11.031H33.752l1.937 21.717 28.331 7.863.063-.018v-14.39z"/>
+        <path fill="#fff"
+              d="M81.127 64.675l-1.666 18.522-15.426 4.164v14.39l28.354-7.858.208-2.337 2.406-26.881H81.127z"/>
+        <path fill="#EBEBEB"
+              d="M64.048 23.435v13.831H30.64l-.277-3.108-.63-7.012-.331-3.711h34.646zm-.047 27.996v13.831H48.792l-.277-3.108-.631-7.012-.33-3.711h16.447z"/>
+    </svg>
+    <svg x="106" width="80" height="126" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6 12H18M12 6V18" stroke="#007acc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    <svg x="178" width="128" height="126" viewBox="0 0 128 126" xmlns="http://www.w3.org/2000/svg">
+        <path fill="#fff" d="M22.67 47h99.67v73.67H22.67z"/>
+        <path fill="#007acc"
+              d="M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z"/>
+    </svg>
+</svg>
