Add screenshots for all GitHub readme examples

Closes #1.
matiassingers · deltaidea · May 25, 2017 · May 26, 2017 · May 26, 2017 · May 26, 2017
commit 644fbb5fc3f4c17cd4aed815cbbd78572c202bda
diff --git a/readme.md b/readme.md
@@ -7,27 +7,85 @@ Elements in beautiful READMEs include, but are not limited to: images, screensho
 
 
 ## Examples
-- [sebyddd/SDVersion](https://github.com/sebyddd/SDVersion) - Project logo. Build badges. Documentation structuring for multiple programming languages. Usage examples.
-- [NSRare/NSGIF](https://github.com/NSRare/NSGIF) - Project logo. GIF Demo. Usage artwork. Usage code samples.
-- [sindresorhus/pageres](https://github.com/sindresorhus/pageres) - Project logo. Clear description of what the project does. Build badges. Demo screenshot. Simple install and usage sections. Includes an examples section with common uses.
-- [petkaantonov/bluebird](https://github.com/petkaantonov/bluebird) - Build badges. Clear description of what the project does. TOC for easy navigation. Project logo. Extensive explanations and examples.
-- [jakubroztocil/httpie](https://github.com/jkbrzt/httpie) - Description of what the project does. Demo screenshots. Project logo. TOC for easy navigation. Build badges. Quick and simple installation and usage sections. Includes an examples section.
-- [karan/joe](https://github.com/karan/joe) - Project logo. Clear description of what the project does. GIF demo. Easy install and usage sections.
-- [aimeos/aimeos-typo3](https://github.com/aimeos/aimeos-typo3) - Project logo. Clear description of what the project does. Demo screenshot. TOC for easy navigation. Easy installation and setup sections with screenshots. Links for further reading.
-- [rstacruz/hicat](https://github.com/rstacruz/hicat) - GIF demo. Easy installation and setup sections with screenshots. Build badges. Great examples of use cases.
-- [skywinder/github-changelog-generator](https://github.com/skywinder/github-changelog-generator) - TOC for easy navigation. Concise project description. Installation and usage sections. Output example. Great feature overview. List of alternatives. FAQ.
-- [shama/gaze](https://github.com/shama/gaze) - Project logo. Concise description. Feature list. Usage section. FAQ. Great API documentation. Release history.
-- [node-chat](https://github.com/IgorAntun/node-chat) - Project screenshot. Informative badges. Clear description. Easy installation/use instructions. Live demo.
-- [anfederico/Clairvoyant](https://github.com/anfederico/Clairvoyant) - Multiple badges. Clean logo. Simple install instructions. Clear overview of the project accompanied by a schematic. GIF demo. Extensive code examples.
-- [Day8/re-frame](https://github.com/Day8/re-frame) - Badges, logo, TOC, etc. Stands out by being a giant, well-written essay about the tech, how to use it, the philosophy behind it, and how it fits into the greater ecosystem.
-- [iharsh234/WebApp](https://github.com/iharsh234/WebApp) - Project landing page. Clear description of what the project does. Demo screenshot. Simple install and usage sections. Includes an examples section with common uses and a mobile demo section.
-- [amitmerchant1990/electron-markdownify](https://github.com/amitmerchant1990/electron-markdownify) - Project logo. Minimalist description of what it is. GIF demo of the project. Key features. How to install guide. Credits.
-- [ryanoasis/nerd-fonts](https://github.com/ryanoasis/nerd-fonts) - Clean project logo. Brief description at top. Sankey diagram, quick links, badges, OS specific icons, TOC, detailed release changelog.
-- [yoshuawuyts/choo](https://github.com/yoshuawuyts/choo) - Badges, clean, clear. Beautiful little menu above the fold with useful links. An FAQ inside of it for the main questions. Backers. Good language.
-- [Martinsos/edlib](https://github.com/Martinsos/edlib) - Informative badges (build, version, publication). Concise description. Feature list. TOC. Screenshots. Concise instructions with examples for building and including in your project. Common code examples to get you started quickly.
+
+<ul>
+  <li><details>
+    <summary><a href="https://github.com/sebyddd/SDVersion">sebyddd/SDVersion</a> - Project logo. Build badges. Documentation structuring for multiple programming languages. Usage examples.</summary>
+    <img src="screenshots/sebyddd-SDVersion.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/NSRare/NSGIF">NSRare/NSGIF</a> - Project logo. GIF Demo. Usage artwork. Usage code samples.</summary>
+    <img src="screenshots/NSRare-NSGIF.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/sindresorhus/pageres">sindresorhus/pageres</a> - Project logo. Clear description of what the project does. Build badges. Demo screenshot. Simple install and usage sections. Includes an examples section with common uses.</summary>
+    <img src="screenshots/sindresorhus-pageres.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/petkaantonov/bluebird">petkaantonov/bluebird</a> - Build badges. Clear description of what the project does. TOC for easy navigation. Project logo. Extensive explanations and examples.</summary>
+    <img src="screenshots/petkaantonov-bluebird.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/jakubroztocil/httpie">jakubroztocil/httpie</a> - Description of what the project does. Demo screenshots. Project logo. TOC for easy navigation. Build badges. Quick and simple installation and usage sections. Includes an examples section.</summary>
+    <img src="screenshots/jakubroztocil-httpie.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/karan/joe">karan/joe</a> - Project logo. Clear description of what the project does. GIF demo. Easy install and usage sections.</summary>
+    <img src="screenshots/karan-joe.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/aimeos/aimeos-typo3">aimeos/aimeos-typo3</a> - Project logo. Clear description of what the project does. Demo screenshot. TOC for easy navigation. Easy installation and setup sections with screenshots. Links for further reading.</summary>
+    <img src="screenshots/aimeos-aimeos-typo3.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/rstacruz/hicat">rstacruz/hicat</a> - GIF demo. Easy installation and setup sections with screenshots. Build badges. Great examples of use cases.</summary>
+    <img src="screenshots/rstacruz-hicat.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/skywinder/github-changelog-generator">skywinder/github-changelog-generator</a> - TOC for easy navigation. Concise project description. Installation and usage sections. Output example. Great feature overview. List of alternatives. FAQ.</summary>
+    <img src="screenshots/skywinder-github-changelog-generator.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/shama/gaze">shama/gaze</a> - Project logo. Concise description. Feature list. Usage section. FAQ. Great API documentation. Release history.</summary>
+    <img src="screenshots/shama-gaze.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/IgorAntun/node-chat">IgorAntun/node-chat</a> - Project screenshot. Informative badges. Clear description. Easy installation/use instructions. Live demo.</summary>
+    <img src="screenshots/IgorAntun-node-chat.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/anfederico/Clairvoyant">anfederico/Clairvoyant</a> - Multiple badges. Clean logo. Simple install instructions. Clear overview of the project accompanied by a schematic. GIF demo. Extensive code examples.</summary>
+    <img src="screenshots/anfederico-Clairvoyant.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/Day8/re-frame">Day8/re-frame</a> - Badges, logo, TOC, etc. Stands out by being a giant, well-written essay about the tech, how to use it, the philosophy behind it, and how it fits into the greater ecosystem.</summary>
+    <img src="screenshots/Day8-re-frame.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/iharsh234/WebApp">iharsh234/WebApp</a> - Project landing page. Clear description of what the project does. Demo screenshot. Simple install and usage sections. Includes an examples section with common uses and a mobile demo section.</summary>
+    <img src="screenshots/iharsh234-WebApp.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/amitmerchant1990/electron-markdownify">amitmerchant1990/electron-markdownify</a> - Project logo. Minimalist description of what it is. GIF demo of the project. Key features. How to install guide. Credits.</summary>
+    <img src="screenshots/amitmerchant1990-electron-markdownify.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/ryanoasis/nerd-fonts">ryanoasis/nerd-fonts</a> - Clean project logo. Brief description at top. Sankey diagram, quick links, badges, OS specific icons, TOC, detailed release changelog.</summary>
+    <img src="screenshots/ryanoasis-nerd-fonts.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/yoshuawuyts/choo">yoshuawuyts/choo</a> - Badges, clean, clear. Beautiful little menu above the fold with useful links. An FAQ inside of it for the main questions. Backers. Good language.</summary>
+    <img src="screenshots/yoshuawuyts-choo.png">
+  </details></li>
+  <li><details>
+    <summary><a href="https://github.com/Martinsos/edlib">Martinsos/edlib</a> - Informative badges (build, version, publication). Concise description. Feature list. TOC. Screenshots. Concise instructions with examples for building and including in your project. Common code examples to get you started quickly.</summary>
+    <img src="screenshots/Martinsos-edlib.png">
+  </details></li>
+</ul>
 
 
 ## Articles
+
 - ["How To Write A Readme"](http://jfhbrook.github.io/2011/11/09/readmes.html) - *Joshua Holbrook*
 - ["How To Write A Great README"](https://robots.thoughtbot.com/how-to-write-a-great-readme) - *Caleb Thompson (thoughtbot)*
 - ["Readme Driven Development"](http://tom.preston-werner.com/2010/08/23/readme-driven-development.html) - *Tom Preston-Werner*

diff --git a/screenshots/Day8-re-frame.png b/screenshots/Day8-re-frame.png
diff --git a/screenshots/IgorAntun-node-chat.png b/screenshots/IgorAntun-node-chat.png
diff --git a/screenshots/Martinsos-edlib.png b/screenshots/Martinsos-edlib.png
diff --git a/screenshots/NSRare-NSGIF.png b/screenshots/NSRare-NSGIF.png
diff --git a/screenshots/aimeos-aimeos-typo3.png b/screenshots/aimeos-aimeos-typo3.png
diff --git a/screenshots/amitmerchant1990-electron-markdownify.png b/screenshots/amitmerchant1990-electron-markdownify.png
diff --git a/screenshots/anfederico-Clairvoyant.png b/screenshots/anfederico-Clairvoyant.png
diff --git a/screenshots/iharsh234-WebApp.png b/screenshots/iharsh234-WebApp.png
diff --git a/screenshots/jakubroztocil-httpie.png b/screenshots/jakubroztocil-httpie.png
diff --git a/screenshots/karan-joe.png b/screenshots/karan-joe.png
diff --git a/screenshots/petkaantonov-bluebird.png b/screenshots/petkaantonov-bluebird.png
diff --git a/screenshots/rstacruz-hicat.png b/screenshots/rstacruz-hicat.png
diff --git a/screenshots/ryanoasis-nerd-fonts.png b/screenshots/ryanoasis-nerd-fonts.png
diff --git a/screenshots/sebyddd-SDVersion.png b/screenshots/sebyddd-SDVersion.png
diff --git a/screenshots/shama-gaze.png b/screenshots/shama-gaze.png
diff --git a/screenshots/sindresorhus-pageres.png b/screenshots/sindresorhus-pageres.png
diff --git a/screenshots/skywinder-github-changelog-generator.png b/screenshots/skywinder-github-changelog-generator.png
diff --git a/screenshots/yoshuawuyts-choo.png b/screenshots/yoshuawuyts-choo.png