✨ Add preview images and update README

2026-08-12 02:10:52 +02:00 · 2020-12-13 13:05:08 -05:00
parent c63a5b0abb
commit 4955c58098
69 changed files with 32 additions and 0 deletions
@@ -20,6 +20,8 @@ characters properly.

 <img src="./images/caret-position.gif" />

+👀 <a href="./images/preview/normal">Click here to see preview images of all ligatures</a>
+
 With the awesome help from [Mark Skelton](https://github.com/mskelton), we now have the full set of ligatures for
 the following fonts. Thanks Mark, and thanks to all of you who have been patiently waiting for these ligatures to be completed.

@@ -0,0 +1,15 @@
+<html><head>
+  <style>
+    body { background-color: #000; color: #fff; font-family: sans-serif; margin: 16px;}
+    a { color: #fff; text-decoration: none; padding: 4px;}
+    a.active {color: #000; background-color: #fff;}
+    .container { display: grid;  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
+    .ligature { display: flex; flex-direction: column; align-items: center; margin: 8px; }
+  </style>
+  </head>
+  <body>
+    <h1>Operator Mono Ligatures</h1>
+    <a href="../normal/" class="">Normal</a> |
+    <a href="../italic/" class="active">Italic</a>
+    <div class="container">
+  <div class="ligature"><img src="ampersand_ampersand.png"/><div>ampersand_ampersand</div></div><div class="ligature"><img src="bar_bar.png"/><div>bar_bar</div></div><div class="ligature"><img src="bar_greater.png"/><div>bar_greater</div></div><div class="ligature"><img src="colon_equal.png"/><div>colon_equal</div></div><div class="ligature"><img src="equal_equal.png"/><div>equal_equal</div></div><div class="ligature"><img src="equal_equal_equal.png"/><div>equal_equal_equal</div></div><div class="ligature"><img src="equal_equal_greater.png"/><div>equal_equal_greater</div></div><div class="ligature"><img src="equal_greater.png"/><div>equal_greater</div></div><div class="ligature"><img src="equal_less_less.png"/><div>equal_less_less</div></div><div class="ligature"><img src="exclam_equal.png"/><div>exclam_equal</div></div><div class="ligature"><img src="exclam_equal_equal.png"/><div>exclam_equal_equal</div></div><div class="ligature"><img src="greater_equal.png"/><div>greater_equal</div></div><div class="ligature"><img src="greater_equal_greater.png"/><div>greater_equal_greater</div></div><div class="ligature"><img src="greater_greater_equal.png"/><div>greater_greater_equal</div></div><div class="ligature"><img src="hyphen_greater.png"/><div>hyphen_greater</div></div><div class="ligature"><img src="hyphen_hyphen.png"/><div>hyphen_hyphen</div></div><div class="ligature"><img src="hyphen_hyphen_greater.png"/><div>hyphen_hyphen_greater</div></div><div class="ligature"><img src="less_bar.png"/><div>less_bar</div></div><div class="ligature"><img src="less_equal.png"/><div>less_equal</div></div><div class="ligature"><img src="less_equal_equal.png"/><div>less_equal_equal</div></div><div class="ligature"><img src="less_equal_greater.png"/><div>less_equal_greater</div></div><div class="ligature"><img src="less_equal_less.png"/><div>less_equal_less</div></div><div class="ligature"><img src="less_exclam_hyphen_hyphen.png"/><div>less_exclam_hyphen_hyphen</div></div><div class="ligature"><img src="less_hyphen.png"/><div>less_hyphen</div></div><div class="ligature"><img src="less_hyphen_greater.png"/><div>less_hyphen_greater</div></div><div class="ligature"><img src="less_hyphen_hyphen.png"/><div>less_hyphen_hyphen</div></div><div class="ligature"><img src="less_slash.png"/><div>less_slash</div></div><div class="ligature"><img src="plus_equal.png"/><div>plus_equal</div></div><div class="ligature"><img src="plus_plus.png"/><div>plus_plus</div></div><div class="ligature"><img src="question_question.png"/><div>question_question</div></div><div class="ligature"><img src="slash_greater.png"/><div>slash_greater</div></div><div class="ligature"><img src="underscore_underscore.png"/><div>underscore_underscore</div></div><div class="ligature"><img src="w_w_w.png"/><div>w_w_w</div></div></div></body></html>
@@ -0,0 +1,15 @@
+<html><head>
+  <style>
+    body { background-color: #000; color: #fff; font-family: sans-serif; margin: 16px;}
+    a { color: #fff; text-decoration: none; padding: 4px;}
+    a.active {color: #000; background-color: #fff;}
+    .container { display: grid;  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
+    .ligature { display: flex; flex-direction: column; align-items: center; margin: 8px; }
+  </style>
+  </head>
+  <body>
+    <h1>Operator Mono Ligatures</h1>
+    <a href="../normal/" class="active">Normal</a> |
+    <a href="../italic/" class="">Italic</a>
+    <div class="container">
+  <div class="ligature"><img src="ampersand_ampersand.png"/><div>ampersand_ampersand</div></div><div class="ligature"><img src="bar_bar.png"/><div>bar_bar</div></div><div class="ligature"><img src="bar_greater.png"/><div>bar_greater</div></div><div class="ligature"><img src="colon_equal.png"/><div>colon_equal</div></div><div class="ligature"><img src="equal_equal.png"/><div>equal_equal</div></div><div class="ligature"><img src="equal_equal_equal.png"/><div>equal_equal_equal</div></div><div class="ligature"><img src="equal_equal_greater.png"/><div>equal_equal_greater</div></div><div class="ligature"><img src="equal_greater.png"/><div>equal_greater</div></div><div class="ligature"><img src="equal_less_less.png"/><div>equal_less_less</div></div><div class="ligature"><img src="exclam_equal.png"/><div>exclam_equal</div></div><div class="ligature"><img src="exclam_equal_equal.png"/><div>exclam_equal_equal</div></div><div class="ligature"><img src="greater_equal.png"/><div>greater_equal</div></div><div class="ligature"><img src="greater_equal_greater.png"/><div>greater_equal_greater</div></div><div class="ligature"><img src="greater_greater_equal.png"/><div>greater_greater_equal</div></div><div class="ligature"><img src="hyphen_greater.png"/><div>hyphen_greater</div></div><div class="ligature"><img src="hyphen_hyphen.png"/><div>hyphen_hyphen</div></div><div class="ligature"><img src="hyphen_hyphen_greater.png"/><div>hyphen_hyphen_greater</div></div><div class="ligature"><img src="less_bar.png"/><div>less_bar</div></div><div class="ligature"><img src="less_equal.png"/><div>less_equal</div></div><div class="ligature"><img src="less_equal_equal.png"/><div>less_equal_equal</div></div><div class="ligature"><img src="less_equal_greater.png"/><div>less_equal_greater</div></div><div class="ligature"><img src="less_equal_less.png"/><div>less_equal_less</div></div><div class="ligature"><img src="less_exclam_hyphen_hyphen.png"/><div>less_exclam_hyphen_hyphen</div></div><div class="ligature"><img src="less_hyphen.png"/><div>less_hyphen</div></div><div class="ligature"><img src="less_hyphen_greater.png"/><div>less_hyphen_greater</div></div><div class="ligature"><img src="less_hyphen_hyphen.png"/><div>less_hyphen_hyphen</div></div><div class="ligature"><img src="less_slash.png"/><div>less_slash</div></div><div class="ligature"><img src="plus_equal.png"/><div>plus_equal</div></div><div class="ligature"><img src="plus_plus.png"/><div>plus_plus</div></div><div class="ligature"><img src="question_question.png"/><div>question_question</div></div><div class="ligature"><img src="slash_greater.png"/><div>slash_greater</div></div><div class="ligature"><img src="underscore_underscore.png"/><div>underscore_underscore</div></div><div class="ligature"><img src="w_w_w.png"/><div>w_w_w</div></div></div></body></html>