website: more samples

20 files changed, 20 insertions, 1 deletions

diff --git a/docs/samples/img/poster-black.png b/docs/samples/img/poster-black.png
new file mode 100644
index 000000000..f001be013
--- /dev/null
+++ b/docs/samples/img/poster-black.png
diff --git a/docs/samples/img/poster-black@2x.png b/docs/samples/img/poster-black@2x.png
new file mode 100644
index 000000000..a03222254
--- /dev/null
+++ b/docs/samples/img/poster-black@2x.png
diff --git a/docs/samples/img/poster-bold.png b/docs/samples/img/poster-bold.png
new file mode 100644
index 000000000..56d9da0e8
--- /dev/null
+++ b/docs/samples/img/poster-bold.png
diff --git a/docs/samples/img/poster-bold@2x.png b/docs/samples/img/poster-bold@2x.png
new file mode 100644
index 000000000..1dec351a9
--- /dev/null
+++ b/docs/samples/img/poster-bold@2x.png
diff --git a/docs/samples/img/poster-extra-bold-2.png b/docs/samples/img/poster-extra-bold-2.png
new file mode 100644
index 000000000..a8aa14f06
--- /dev/null
+++ b/docs/samples/img/poster-extra-bold-2.png
diff --git a/docs/samples/img/poster-extra-bold-2@2x.png b/docs/samples/img/poster-extra-bold-2@2x.png
new file mode 100644
index 000000000..cf22950a2
--- /dev/null
+++ b/docs/samples/img/poster-extra-bold-2@2x.png
diff --git a/docs/samples/img/poster-extra-bold.png b/docs/samples/img/poster-extra-bold.png
new file mode 100644
index 000000000..828c306f6
--- /dev/null
+++ b/docs/samples/img/poster-extra-bold.png
diff --git a/docs/samples/img/poster-extra-bold@2x.png b/docs/samples/img/poster-extra-bold@2x.png
new file mode 100644
index 000000000..98e40cb86
--- /dev/null
+++ b/docs/samples/img/poster-extra-bold@2x.png
diff --git a/docs/samples/img/poster-medium.png b/docs/samples/img/poster-medium.png
new file mode 100644
index 000000000..9a11f7f82
--- /dev/null
+++ b/docs/samples/img/poster-medium.png
diff --git a/docs/samples/img/poster-medium@2x.png b/docs/samples/img/poster-medium@2x.png
new file mode 100644
index 000000000..fb59a7b90
--- /dev/null
+++ b/docs/samples/img/poster-medium@2x.png
diff --git a/docs/samples/img/poster-melvetica.png b/docs/samples/img/poster-melvetica.png
new file mode 100644
index 000000000..0e437f79f
--- /dev/null
+++ b/docs/samples/img/poster-melvetica.png
diff --git a/docs/samples/img/poster-melvetica@2x.png b/docs/samples/img/poster-melvetica@2x.png
new file mode 100644
index 000000000..52815c9af
--- /dev/null
+++ b/docs/samples/img/poster-melvetica@2x.png
diff --git a/docs/samples/img/poster-regular.png b/docs/samples/img/poster-regular.png
new file mode 100644
index 000000000..cbece7ab0
--- /dev/null
+++ b/docs/samples/img/poster-regular.png
diff --git a/docs/samples/img/poster-regular@2x.png b/docs/samples/img/poster-regular@2x.png
new file mode 100644
index 000000000..cbba231e7
--- /dev/null
+++ b/docs/samples/img/poster-regular@2x.png
diff --git a/docs/samples/img/poster-semi-bold-2.png b/docs/samples/img/poster-semi-bold-2.png
new file mode 100644
index 000000000..df349da35
--- /dev/null
+++ b/docs/samples/img/poster-semi-bold-2.png
diff --git a/docs/samples/img/poster-semi-bold-2@2x.png b/docs/samples/img/poster-semi-bold-2@2x.png
new file mode 100644
index 000000000..2249ca16f
--- /dev/null
+++ b/docs/samples/img/poster-semi-bold-2@2x.png
diff --git a/docs/samples/img/poster-semi-bold.png b/docs/samples/img/poster-semi-bold.png
new file mode 100644
index 000000000..893c13802
--- /dev/null
+++ b/docs/samples/img/poster-semi-bold.png
diff --git a/docs/samples/img/poster-semi-bold@2x.png b/docs/samples/img/poster-semi-bold@2x.png
new file mode 100644
index 000000000..67a598bb2
--- /dev/null
+++ b/docs/samples/img/poster-semi-bold@2x.png
diff --git a/docs/samples/index.css b/docs/samples/index.css
index f98928da0..6114ae255 100644
--- a/docs/samples/index.css
+++ b/docs/samples/index.css
@@ -227,7 +227,15 @@ div.live {
 }
 
 .sample-images img, .sample-images svg {
-  margin: 100px 0;
+  margin: 100px auto;
+}
+.sample-images .poster {
+  border-radius: 1px;
+  box-shadow: 0px 1px 25px rgba(0,0,0,0.05);
+  filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.1));
+}
+.sample-images img.im640, .sample-images svg.im640 {
+  width:640px;
 }
 .sample-images > img:first-child, .sample-images > svg:first-child {
   margin-top:50px;
diff --git a/docs/samples/index.html b/docs/samples/index.html
index 4369be05a..1eb6fe0f9 100644
--- a/docs/samples/index.html
+++ b/docs/samples/index.html
@@ -109,6 +109,17 @@ hills.
     <img src="img/04.png" srcset="img/04@2x.png 2x" width="888">
     <img src="img/05.png" srcset="img/05@2x.png 2x" width="888">
     <img src="img/sfs-pid-30.png" srcset="img/sfs-pid-30@2x.png 2x" width="888">
+    
+    <img class="im640 poster" src="img/poster-regular.png" srcset="img/poster-regular@2x.png 2x" width="640">
+    <img class="im640 poster" src="img/poster-medium.png" srcset="img/poster-medium@2x.png 2x" width="640" height="800">
+    <img class="im640 poster" src="img/poster-semi-bold.png" srcset="img/poster-semi-bold@2x.png 2x" width="640" height="800">
+    <img class="im640 poster" src="img/poster-bold.png" srcset="img/poster-bold@2x.png 2x" width="640" height="800">
+    <img class="im640 poster" src="img/poster-extra-bold.png" srcset="img/poster-extra-bold@2x.png 2x" width="640" height="800">
+    <img class="im640 poster" src="img/poster-black.png" srcset="img/poster-black@2x.png 2x" width="640" height="800">
+    <img class="im640 poster" src="img/poster-melvetica.png" srcset="img/poster-melvetica@2x.png 2x" width="640" height="800">
+    <img class="im640 poster" src="img/poster-semi-bold-2.png" srcset="img/poster-semi-bold-2@2x.png 2x" width="640" height="800">
+    <img class="im640 poster" src="img/poster-extra-bold-2.png" srcset="img/poster-extra-bold-2@2x.png 2x" width="640" height="800">
+    
     <img src="img/dark-phone.jpg" srcset="img/dark-phone@2x.jpg 2x" width="888">
     <img src="img/06.png" srcset="img/06@2x.png 2x" width="888">
     <img src="img/07.png" srcset="img/07@2x.png 2x" width="888">