Update code and media docs to new Pug templates

4 files changed, 97 insertions, 2 deletions

diff --git a/docs/src/contents/code.pug b/docs/src/contents/code.pug
new file mode 100644
index 0000000..f1ee876
--- /dev/null
+++ b/docs/src/contents/code.pug
@@ -0,0 +1,22 @@
+p Code is used for styling inline and multiline code snippets.
+p
+  | For inline code, you can use the #{'<code>'} element. 
+  | For multiline code snippet blocks, you can use #{'<pre>'} with the #[code code] class as a container, and add #{'<code>'} inside it.
+  | The #[code data-lang] ibute is rendered as the language name in the top right.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- code snippets -->
+      <button class="btn">
+        Submit
+      </button>
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
+      &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
+        Submit
+      &lt;<span class="tag">/button</span>&gt;
+      </code></pre>
\ No newline at end of file
diff --git a/docs/src/contents/codes.pug b/docs/src/contents/codes.pug
deleted file mode 100644
index e69de29..0000000
--- a/docs/src/contents/codes.pug
+++ /dev/null
diff --git a/docs/src/contents/media.pug b/docs/src/contents/media.pug
index e69de29..fcb8d36 100644
--- a/docs/src/contents/media.pug
+++ b/docs/src/contents/media.pug
@@ -0,0 +1,73 @@
+p Media includes responsive images, figures and video classes.
+
++docs-subheading('media-images', 'Images')
+
+p
+  | Add the #[code img-responsive] class to #{'<img>'} elements. The images will scale with the parent sizes.
+
+.columns
+  .column.col-12
+    img.img-responsive.rounded(src="img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper")
+
+p
+  | Add the #[code img-fit-contain] or #[code img-fit-cover] class to #{'<img>'} or #{'<video>'} elements. The media will crop itself to fit inside the element (and you don't need another container).
+  | This feature can replace the classic background image trick. Microsoft Edge support 
+  a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank") is shipped
+  |   with Build Number 16299+.
+
+.columns
+  .column.col-6.col-xs-12
+    figure.figure
+      img.img-fit-contain.rounded(src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;")
+      figcaption.figure-caption.text-center img-fit-contain
+  .column.col-6.col-xs-12
+    figure.figure
+      img.img-fit-cover.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;")
+      figcaption.figure-caption.text-center img-fit-cover
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+      <img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
+      <img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
+
++docs-subheading('media-figure', 'Figure')
+
+p
+  | You can use the element #{'<figure>'} for an image with a caption.
+  | Add the #[code figure] class to #{'<figure>'} element.
+  | The images with the #[code img-responsive] class will be responsive.
+  | And the included class #[code figure-caption] will provide basic style for caption.
+  | Also, you can use #[code text-left], #[code text-center] and #[code text-right] for caption alignment.
+
+.columns
+  .column.col-12
+    figure.figure
+      img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+      figcaption.figure-caption.text-center macOS Yosemite wallpaper
+
++docs-subheading('media-video', 'Video')
+
+p
+  | For responsive video, add a container with the #[code video-responsive] class. 
+  | Insert any YouTube, Youku or other iframe/embed video inside the container. 
+  | The ratio is 16:9 by default.
+  | You may add #[code video-responsive-4-3] for 4:3 ratio video container or #[code video-responsive-1-1] for 1:1 ratio.
+
+.columns
+  .column.col-12
+    .video-responsive
+      iframe(width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen="")
+
+p
+  | For responsive #{'<video>'} elements, you can add the #[code video-responsive] class directly.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <div class="video-responsive video-responsive-4-3">
+        <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
+      </div>
+
+      <video class="video-responsive" src="...">...</video>
diff --git a/docs/src/elements.pug b/docs/src/elements.pug
index d7cf0f0..809fe0f 100644
--- a/docs/src/elements.pug
+++ b/docs/src/elements.pug
@@ -31,8 +31,8 @@ block docs-content
     include contents/labels.pug
 
   //- Codes
-  +docs-heading('codes', 'Codes')
-    include contents/codes.pug
+  +docs-heading('code', 'Code')
+    include contents/code.pug
   
   //- Media
   +docs-heading('media', 'Media')