Update old docs to new Pug templates

1 files changed, 29 insertions, 0 deletions

diff --git a/docs/src/contents/comparison.pug b/docs/src/contents/comparison.pug
new file mode 100644
index 0000000..5f6ce38
--- /dev/null
+++ b/docs/src/contents/comparison.pug
@@ -0,0 +1,29 @@
+p
+  | Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
+
+.columns
+  .column.col-12
+    .comparison-slider
+      figure.comparison-before
+        img.rounded(src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
+        .comparison-label Before
+      figure.comparison-after
+        img.filter-grayscale.rounded(src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
+        .comparison-label After
+        textarea.comparison-resizer(readonly="")
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <div class="comparison-slider">
+        <figure class="comparison-before">
+          <!-- image (before) -->
+          <div class="comparison-label">Before</div>
+        </figure>
+
+        <figure class="comparison-after">
+          <!-- image (after) -->
+          <div class="comparison-label">After</div>
+          <textarea class="comparison-resizer" readonly></textarea>
+        </figure>
+      </div>
\ No newline at end of file