Readme improvements (#314)

* Add screenshots to readme

* Fix relative image links

* Fix light color scheme

* add the actual img tag...

* Add a better title/CTA/link

README.md

@@ -1,6 +1,17 @@
+# [asciiflow.com](https://asciiflow.com)
+
 ASCIIFlow is a client-side only web based application for drawing ASCII diagrams. You can use it at [asciiflow.com](https://asciiflow.com).
 
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./assets/asciiflow-scr-dark.png">
+    <source media="(prefers-color-scheme: light)" srcset="./assets/asciiflow-scr-light.png">
+    <img alt="ASCIIFlow screenshot" src="./assets/asciiflow-scr-light.png">
+  </picture>
+</p>
+
 ## Contributing
+
 ### Installation
 
 ASCIIFlow is built with [Bazel](https://docs.bazel.build/versions/4.0.0/getting-started.html).
@@ -18,7 +29,6 @@ npm install -g @bazel/ibazel
 yarn global add @bazel/ibazel
 ```
 
-
 ### Running ASCIIFlow locally
 
 After installation of Bazel/Bazelisk, you can run ASCIIFlow locally with:
@@ -32,3 +42,4 @@ Or without ibazel (won't do live reloading):
 ```
 bazel run client:devserver
 ```
+