Merge branch 'hotfix/html-cleanup'

master
Michael Rose 2013-09-09 16:13:25 -04:00
commit e10faad05d
3 changed files with 19 additions and 20 deletions

View File

@ -36,8 +36,7 @@
{{ content }} {{ content }}
<footer class="entry-meta"> <footer class="entry-meta">
<span class="entry-tags">{% for tag in page.tags %}<a href="{{ site.url }}/tags/index.html#{{ tag | cgi_encode }}" title="Pages tagged {{ tag }}" rel="tag" class="tag">{{ tag }}</a>{% unless forloop.last %}{% endunless %}{% endfor %}</span> <span class="entry-tags">{% for tag in page.tags %}<a href="{{ site.url }}/tags/index.html#{{ tag | cgi_encode }}" title="Pages tagged {{ tag }}" rel="tag" class="tag">{{ tag }}</a>{% unless forloop.last %}{% endunless %}{% endfor %}</span>
<span><a href="{{ site.url }}{{ page.url }}" rel="bookmark" title="{{ page.title }}" itemprop="url">{{ page.title }}</a></span> <span><a href="{{ site.url }}{{ page.url }}" rel="bookmark" title="{{ page.title }}" itemprop="url">{{ page.title }}</a> was published on <span class="entry-date date published updated"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%B %d, %Y" }}</time></span></span>
was published on <span class="entry-date date published updated"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%B %d, %Y" }}</span></time>
{% if page.modified %}(revised: <span class="entry-date date modified"><time datetime="{{ page.modified }}" itemprop="dateModified">{{ page.modified | date: "%m/%d/%Y" }}</time></span>){% endif %} {% if page.modified %}(revised: <span class="entry-date date modified"><time datetime="{{ page.modified }}" itemprop="dateModified">{{ page.modified | date: "%m/%d/%Y" }}</time></span>){% endif %}
<span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name" class="fn"><a href="{{ site.url }}/about" title="About {{ site.owner.name }}" itemprop="url">{{ site.owner.name }}</a></span></span> <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name" class="fn"><a href="{{ site.url }}/about" title="About {{ site.owner.name }}" itemprop="url">{{ site.owner.name }}</a></span></span>
{% if page.share %}<div class="social-share"> {% if page.share %}<div class="social-share">

View File

@ -14,7 +14,7 @@ Here are some examples of what a post with images might look like. If you want t
### One Up ### One Up
<figure> <figure>
<a href="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_b.jpg"><img src="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_c.jpg"></a> <a href="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_b.jpg"><img src="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_c.jpg" alt=""></a>
<figcaption><a href="http://www.flickr.com/photos/80901381@N04/7758832526/" title="Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr">Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr</a>.</figcaption> <figcaption><a href="http://www.flickr.com/photos/80901381@N04/7758832526/" title="Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr">Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr</a>.</figcaption>
</figure> </figure>
@ -24,8 +24,8 @@ Apply the `half` class like so to display two images side by side that share the
{% highlight html %} {% highlight html %}
<figure class="half"> <figure class="half">
<img src="/images/image-filename-1.jpg"> <img src="/images/image-filename-1.jpg" alt="">
<img src="/images/image-filename-2.jpg"> <img src="/images/image-filename-2.jpg" alt="">
<figcaption>Caption describing these two images.</figcaption> <figcaption>Caption describing these two images.</figcaption>
</figure> </figure>
{% endhighlight %} {% endhighlight %}
@ -33,10 +33,10 @@ Apply the `half` class like so to display two images side by side that share the
And you'll get something that looks like this: And you'll get something that looks like this:
<figure class="half"> <figure class="half">
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a> <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a> <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
<img src="http://placehold.it/600x300.jpg"> <img src="http://placehold.it/600x300.jpg" alt="">
<img src="http://placehold.it/600x300.jpg"> <img src="http://placehold.it/600x300.jpg" alt="">
<figcaption>Two images.</figcaption> <figcaption>Two images.</figcaption>
</figure> </figure>
@ -46,9 +46,9 @@ Apply the `third` class like so to display three images side by side that share
{% highlight html %} {% highlight html %}
<figure class="third"> <figure class="third">
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a> <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a> <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a> <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
<figcaption>Caption describing these three images.</figcaption> <figcaption>Caption describing these three images.</figcaption>
</figure> </figure>
{% endhighlight %} {% endhighlight %}
@ -56,11 +56,11 @@ Apply the `third` class like so to display three images side by side that share
And you'll get something that looks like this: And you'll get something that looks like this:
<figure class="third"> <figure class="third">
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a> <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a> <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a> <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a> <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a> <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a> <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
<figcaption>Three images.</figcaption> <figcaption>Three images.</figcaption>
</figure> </figure>

View File

@ -7,12 +7,12 @@ comments: true
share: true share: true
--- ---
<iframe width="560" height="315" src="http://www.youtube.com/embed/SqYiglufb8Y" frameborder="0"> </iframe> <iframe width="560" height="315" src="http://www.youtube.com/embed/SqYiglufb8Y"> </iframe>
Video embeds are responsive and scale with the width of the main content block with the help of [FitVids](http://fitvidsjs.com/). Video embeds are responsive and scale with the width of the main content block with the help of [FitVids](http://fitvidsjs.com/).
Not sure if this only effects Kramdown or if it's an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the `<iframe>` tags and remove `allowfullscreen`. Example below: Not sure if this only effects Kramdown or if it's an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the `<iframe>` tags and remove `allowfullscreen`. Example below:
{% highlight html %} {% highlight html %}
<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe> <iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg"> </iframe>
{% endhighlight %} {% endhighlight %}