diff options
author | Dan Hersam <dan@hersam.com> | 2015-01-28 01:14:19 +0300 |
---|---|---|
committer | bep <bjorn.erik.pedersen@gmail.com> | 2015-01-28 01:44:46 +0300 |
commit | 06b1a88358e69f4182fdd82da998810054f5a88f (patch) | |
tree | e126e7c1159a0f7ae52ec06cd09168748b1f64f2 | |
parent | e52a76f559b6c2f44a9dd32f7f01e7824f0246de (diff) |
Added three videos to documentation.
Created shortcode for YouTube videos and made the videos responsive in the
stylesheet.
-rw-r--r-- | docs/content/overview/introduction.md | 4 | ||||
-rw-r--r-- | docs/content/overview/quickstart.md | 2 | ||||
-rw-r--r-- | docs/content/troubleshooting/overview.md | 2 | ||||
-rw-r--r-- | docs/layouts/shortcodes/youtube.html | 4 | ||||
-rwxr-xr-x | docs/static/css/style.css | 20 |
5 files changed, 32 insertions, 0 deletions
diff --git a/docs/content/overview/introduction.md b/docs/content/overview/introduction.md index 56ad589e1..cfa7f39df 100644 --- a/docs/content/overview/introduction.md +++ b/docs/content/overview/introduction.md @@ -37,6 +37,10 @@ build times and the ability to rebuild whenever a change is made, Hugo provides a very fast feedback loop. This is essential when you are designing websites, but also very useful when creating content. +## How fast is Hugo? + +{{% youtube CdiDYZ51a2o %}} + ## What does Hugo do? In technical terms, Hugo takes a source directory of Markdown files and diff --git a/docs/content/overview/quickstart.md b/docs/content/overview/quickstart.md index 3f13b20e2..0b1f292a7 100644 --- a/docs/content/overview/quickstart.md +++ b/docs/content/overview/quickstart.md @@ -12,6 +12,8 @@ weight: 10 > _Note: This quickstart depends on features introduced in Hugo v0.11. If you have an earlier version of Hugo, you will need to [upgrade](/overview/installing/) before proceeding._ +{{% youtube w7Ft2ymGmfc %}} + ## Step 1. Install Hugo Go to [Hugo Releases](https://github.com/spf13/hugo/releases) and download the diff --git a/docs/content/troubleshooting/overview.md b/docs/content/troubleshooting/overview.md index 5397604ba..e23e25dd9 100644 --- a/docs/content/troubleshooting/overview.md +++ b/docs/content/troubleshooting/overview.md @@ -20,6 +20,8 @@ Here are some examples: * [How do I include an image gallery on my website?](http://discuss.gohugo.io/t/image-gallery/594) * ... And a lot more! +{{% youtube c8fJIRNChmU %}} + Indeed, you may find many questions and solutions to problems in our [discussion forum](http://discuss.gohugo.io/), and you may find the [support](http://discuss.gohugo.io/category/support) diff --git a/docs/layouts/shortcodes/youtube.html b/docs/layouts/shortcodes/youtube.html new file mode 100644 index 000000000..9b4a37cb9 --- /dev/null +++ b/docs/layouts/shortcodes/youtube.html @@ -0,0 +1,4 @@ +<div class="video-container"> +<iframe class="youtube-player" type="text/html" width="100%" height="auto" src="http://www.youtube.com/embed/{{ index .Params 0 }}" allowfullscreen frameborder="0"> +</iframe> +</div> diff --git a/docs/static/css/style.css b/docs/static/css/style.css index 3b13ff4a0..478134a89 100755 --- a/docs/static/css/style.css +++ b/docs/static/css/style.css @@ -531,3 +531,23 @@ i.freebsd-19px:before { content: url(/img/freebsd-19px.svg); vertical-align: -7%; } + +/* Responsive videos */ +.video-container { + position: relative; + padding-bottom: 56.25%; /* 16:9 */ + padding-top: 30px; + height: 0; + overflow: hidden; + margin: 20px 0; +} + +.video-container iframe, +.video-container object, +.video-container embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} |