ry
/
datat.fi
6
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Update and prune example posts

This commit is contained in:
Michael Rose 2017-03-09 14:38:14 -05:00
parent 39c3f0500c
commit 3190be1e5e
23 changed files with 259 additions and 461 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
example/_posts/2009-05-15-edge-case-nested-and-mixed-lists.md
View File

@ -8,14 +8,12 @@ tags:
- edge case - edge case
- lists - lists
- markup - markup
last_modified_at: 2017-03-09T14:25:52-05:00
--- ---
Nested and mixed lists are an interesting beast. It's a corner case to make sure that Nested and mixed lists are an interesting beast. It's a corner case to make sure that lists within lists do not break the ordered list numbering order and list styles go deep enough.
* Lists within lists do not break the ordered list numbering order ## Ordered -- Unordered -- Ordered
* Your list styles go deep enough.
### Ordered -- Unordered -- Ordered
1. ordered item 1. ordered item
2. ordered item 2. ordered item
@ -26,7 +24,7 @@ Nested and mixed lists are an interesting beast. It's a corner case to make sure
3. ordered item 3. ordered item
4. ordered item 4. ordered item
### Ordered -- Unordered -- Unordered ## Ordered -- Unordered -- Unordered
1. ordered item 1. ordered item
2. ordered item 2. ordered item
@ -37,7 +35,7 @@ Nested and mixed lists are an interesting beast. It's a corner case to make sure
3. ordered item 3. ordered item
4. ordered item 4. ordered item
### Unordered -- Ordered -- Unordered ## Unordered -- Ordered -- Unordered
* unordered item * unordered item
* unordered item * unordered item
@ -48,7 +46,7 @@ Nested and mixed lists are an interesting beast. It's a corner case to make sure
* unordered item * unordered item
* unordered item * unordered item
### Unordered -- Unordered -- Ordered ## Unordered -- Unordered -- Ordered
* unordered item * unordered item
* unordered item * unordered item

2
example/_posts/2009-08-06-edge-case-no-body-content.md
View File

@ -1,9 +1,11 @@
--- ---
title: "Edge Case: No Body Content" title: "Edge Case: No Body Content"
excerpt: "This post has no body content and should be blank on the post's page."
categories: categories:
- Edge Case - Edge Case
tags: tags:
- content - content
- edge case - edge case
- layout - layout
last_modified_at: 2017-03-09T14:23:48-05:00
--- ---

2
example/_posts/2009-09-05-edge-case-no-yaml-title.md
View File

@ -8,3 +8,5 @@ tags:
--- ---
This post has no title specified in the YAML Front Matter. Jekyll should auto-generate a title from the filename. This post has no title specified in the YAML Front Matter. Jekyll should auto-generate a title from the filename.
For example `2009-09-05-edge-case-no-yaml-title.md` becomes **Edge Case No Yaml Title**.

9
example/_posts/2009-10-05-edge-case-title-should-not-overflow-the-content-area.md
View File

@ -9,19 +9,18 @@ tags:
- html - html
- layout - layout
- title - title
last_modified_at: 2017-03-09T14:10:02-05:00
--- ---
## Title should not overflow the content area This post title has a long word that could potentially overflow the content area.
A few things to check for: A few things to check for:
* Non-breaking text in the title, content, and comments should have no adverse effects on layout or functionality. * Non-breaking text in the title should have no adverse effects on layout or functionality.
* Check the browser window / tab title. * Check the browser window / tab title.
* If you are a theme developer, check that this text does not break anything.
The following CSS properties will help you support non-breaking text. The following CSS property will help you support non-breaking text.
```css ```css
-ms-word-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
``` ```

2
example/_posts/2009-10-05-edge-case-very-long-title.md
View File

@ -11,4 +11,4 @@ tags:
- title - title
--- ---
Check for long titles and how they might break a template. Check for long titles and how they might break layouts.

6
example/_posts/2010-01-07-post-modified.md
View File

@ -1,14 +1,14 @@
--- ---
title: "Post: Modified Date" title: "Post: Modified Date"
modified: 2016-03-09T16:20:02-05:00
categories: categories:
- Post Formats - Post Formats
tags: tags:
- Post Formats - Post Formats
- readability - readability
- standard - standard
last_modified_at: 2017-03-09T13:01:27-05:00
--- ---
This post has been updated and should show a modified date if used in a layout. This post has been updated and should show a modified date if `last_modified_at` is used in the layout.
All children, except one, grow up. They soon know that they will grow up, and the way Wendy knew was this. One day when she was two years old she was playing in a garden, and she plucked another flower and ran with it to her mother. I suppose she must have looked rather delightful, for Mrs. Darling put her hand to her heart and cried, "Oh, why can't you remain like this for ever!" This was all that passed between them on the subject, but henceforth Wendy knew that she must grow up. You always know after you are two. Two is the beginning of the end. Plugins like [**jekyll-sitemap**](https://github.com/jekyll/jekyll-feed) use this field to add a `<lastmod>` tag your `sitemap.xml`.

134
example/_posts/2010-01-08-post-chat.md
View File

@ -1,134 +0,0 @@
---
title: "Post: Chat"
categories:
- Post Formats
tags:
- chat
- Post Formats
---
Abbott: Strange as it may seem, they give ball players nowadays very peculiar names.
Costello: Funny names?
Abbott: Nicknames, nicknames. Now, on the St. Louis team we have Who's on first, What's on second, I Don't Know is on third--
Costello: That's what I want to find out. I want you to tell me the names of the fellows on the St. Louis team.
Abbott: I'm telling you. Who's on first, What's on second, I Don't Know is on third--
Costello: You know the fellows' names?
Abbott: Yes.
Costello: Well, then who's playing first?
Abbott: Yes.
Costello: I mean the fellow's name on first base.
Abbott: Who.
Costello: The fellow playin' first base.
Abbott: Who.
Costello: The guy on first base.
Abbott: Who is on first.
Costello: Well, what are you askin' me for?
Abbott: I'm not asking you--I'm telling you. Who is on first.
Costello: I'm asking you--who's on first?
Abbott: That's the man's name.
Costello: That's who's name?
Abbott: Yes.
Costello: When you pay off the first baseman every month, who gets the money?
Abbott: Every dollar of it. And why not, the man's entitled to it.
Costello: Who is?
Abbott: Yes.
Costello: So who gets it?
Abbott: Why shouldn't he? Sometimes his wife comes down and collects it.
Costello: Who's wife?
Abbott: Yes. After all, the man earns it.
Costello: Who does?
Abbott: Absolutely.
Costello: Well, all I'm trying to find out is what's the guy's name on first base?
Abbott: Oh, no, no. What is on second base.
Costello: I'm not asking you who's on second.
Abbott: Who's on first!
Costello: St. Louis has a good outfield?
Abbott: Oh, absolutely.
Costello: The left fielder's name?
Abbott: Why.
Costello: I don't know, I just thought I'd ask.
Abbott: Well, I just thought I'd tell you.
Costello: Then tell me who's playing left field?
Abbott: Who's playing first.
Costello: Stay out of the infield! The left fielder's name?
Abbott: Why.
Costello: Because.
Abbott: Oh, he's center field.
Costello: Wait a minute. You got a pitcher on this team?
Abbott: Wouldn't this be a fine team without a pitcher?
Costello: Tell me the pitcher's name.
Abbott: Tomorrow.
Costello: Now, when the guy at bat bunts the ball--me being a good catcher--I want to throw the guy out at first base, so I pick up the ball and throw it to who?
Abbott: Now, that's he first thing you've said right.
Costello: I DON'T EVEN KNOW WHAT I'M TALKING ABOUT!
Abbott: Don't get excited. Take it easy.
Costello: I throw the ball to first base, whoever it is grabs the ball, so the guy runs to second. Who picks up the ball and throws it to what. What throws it to I don't know. I don't know throws it back to tomorrow--a triple play.
Abbott: Yeah, it could be.
Costello: Another guy gets up and it's a long ball to center.
Abbott: Because.
Costello: Why? I don't know. And I don't care.
Abbott: What was that?
Costello: I said, I DON'T CARE!
Abbott: Oh, that's our shortstop!

68
example/_posts/2010-02-05-post-notice.md
View File

@ -1,68 +0,0 @@
---
title: "Post: Notice"
categories:
- Post Formats
tags:
- Post Formats
- notice
---
A notice displays information that explains nearby content. Often used to call attention to a particular detail.
When using Kramdown `{: .notice}` can be added after a sentence to assign the `.notice` to the `<p></p>` element.
**Changes in Service:** We just updated our [privacy policy](#) here to better service our customers. We recommend reviewing the changes.
{: .notice}
**Primary Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. [Praesent libero](#). Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
{: .notice--primary}
**Info Notice:** Lorem ipsum dolor sit amet, [consectetur adipiscing elit](#). Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
{: .notice--info}
**Warning Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Integer nec odio](#). Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
{: .notice--warning}
**Danger Notice:** Lorem ipsum dolor sit amet, [consectetur adipiscing](#) elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
{: .notice--danger}
**Success Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at [nibh elementum](#) imperdiet.
{: .notice--success}
Want to wrap several paragraphs or other elements in a notice? Using Liquid to capture the content and then filter it with `markdownify` is a good way to go.
```html
{% raw %}{% capture notice-2 %}
#### New Site Features
* You can now have cover images on blog pages
* Drafts will now auto-save while writing
{% endcapture %}{% endraw %}
<div class="notice">{% raw %}{{ notice-2 | markdownify }}{% endraw %}</div>
```
{% capture notice-2 %}
#### New Site Features
* You can now have cover images on blog pages
* Drafts will now auto-save while writing
{% endcapture %}
<div class="notice">
{{ notice-2 | markdownify }}
</div>
Or you could skip the capture and stick with straight HTML.
```html
<div class="notice">
<h4>Message</h4>
<p>A basic message.</p>
</div>
```
<div class="notice">
<h4>Message</h4>
<p>A basic message.</p>
</div>

15
example/_posts/2010-03-07-post-link.md
View File

@ -1,15 +0,0 @@
---
title: "Post: Link"
categories:
- Post Formats
tags:
- link
- Post Formats
link: https://github.com
---
This theme supports **link posts**, made famous by John Gruber. To use, just add `link: http://url-you-want-linked` to the post's YAML front matter and you're done.
> And this is how a quote looks.
Some [link](#) can also be shown.

5
example/_posts/2010-06-02-post-video-youtube.md
View File

@ -4,8 +4,9 @@ categories:
- Post Formats - Post Formats
tags: tags:
- Post Formats - Post Formats
last_modified_at: 2017-03-09T12:58:20-05:00
--- ---
YouTube video embed below. <iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/l2Of1-d5E5o?controls=0&amp;" frameborder="0" allowfullscreen></iframe>
<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/l2Of1-d5E5o?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> This post test YouTube video embeds.

3
example/_posts/2010-09-10-post-twitter-embeds.md
View File

@ -7,9 +7,10 @@ tags:
- embeds - embeds
- media - media
- twitter - twitter
last_modified_at: 2017-03-09T12:57:42-05:00
--- ---
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">🎨 Finally got around to adding all my <a href="https://twitter.com/procreateapp">@procreateapp</a> creations with time lapse videos <a href="https://t.co/1nNbkefC3L">https://t.co/1nNbkefC3L</a> <a href="https://t.co/gcNLJoJ0Gn">pic.twitter.com/gcNLJoJ0Gn</a></p>&mdash; Michael Rose (@mmistakes) <a href="https://twitter.com/mmistakes/status/662678050795094016">November 6, 2015</a></blockquote> <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Oh I dunno. It&#39;s probably been over 15 years since I smudged out a face with a pencil and kneaded eraser. <a href="https://twitter.com/hashtag/WIP?src=hash">#WIP</a> <a href="https://twitter.com/hashtag/Sktchy?src=hash">#Sktchy</a> <a href="https://t.co/PwqbMddyVK">pic.twitter.com/PwqbMddyVK</a></p>&mdash; Michael Rose (@mmistakes) <a href="https://twitter.com/mmistakes/status/826644109670612997">February 1, 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
This post tests Twitter Embeds. This post tests Twitter Embeds.

7
example/_posts/2010-10-25-post-future-date.md
View File

@ -3,6 +3,11 @@ title: "Post: Future Date"
date: 9999-12-31 date: 9999-12-31
categories: categories:
- Post - Post
last_modified_at: 2017-03-09T12:45:25-05:00
--- ---
This post lives in the future and is dated {{ page.date | date: "%c" }}. When building Jekyll with the `--future` flag it should appear. This post lives in the future and is dated {{ page.date | date: "%c" }}. It should only appear when Jekyll builds your project with the `--future` flag.
```bash
jekyll build --future
```

14
example/_posts/2012-03-14-layout-code-excerpt-generated.md
View File

@ -1,14 +0,0 @@
---
title: "Layout: Code Excerpt (Generated)"
categories:
- Layout
- Uncategorized
tags:
- content
- excerpt
- layout
---
This is the post content with inline code, (e.g. `<span style="color: red;">red</span>`. It should be displayed in place of the auto-generated excerpt in single-page views. Archive-index pages should display an auto-generated excerpt of this content.
Be sure to test the formatting of the auto-generated excerpt, to ensure that it doesn't create any layout problems.

7
example/_posts/2012-03-14-layout-excerpt-defined.md
View File

@ -1,6 +1,6 @@
--- ---
title: "Layout: Excerpt (Defined)" title: "Layout: Excerpt (Defined)"
excerpt: "This is a user-defined post excerpt. It should be displayed in place of the post content in archive-index pages." excerpt: "This is a user-defined post excerpt. It should be displayed in place of the auto-generated excerpt or post content on index pages."
categories: categories:
- Layout - Layout
- Uncategorized - Uncategorized
@ -8,8 +8,9 @@ tags:
- content - content
- excerpt - excerpt
- layout - layout
last_modified_at: 2017-03-09T12:43:31-05:00
--- ---
This is the post content. It should be displayed in place of the user-defined excerpt in archive-index pages. This is the start of the post content.
This paragraph should be absent from an archive-index page where `post.excerpt` is shown. This paragraph should be absent from an index page where `post.excerpt` is shown.

7
example/_posts/2012-03-14-layout-excerpt-generated.md
View File

@ -1,5 +1,5 @@
--- ---
title: "Layout: Excerpt (Generated)" title: "Layout: Excerpt (Generated with Separator Tag)"
excerpt_separator: "<!--more-->" excerpt_separator: "<!--more-->"
categories: categories:
- Layout - Layout
@ -8,11 +8,10 @@ tags:
- content - content
- excerpt - excerpt
- layout - layout
last_modified_at: 2017-03-09T12:32:16-05:00
--- ---
This is the post content. Archive-index pages should display an auto-generated excerpt of this content. This is the post content. Archive-index pages should display an [auto-generated excerpt](https://jekyllrb.com/docs/posts/#post-excerpts) of all the content preceding the `excerpt_separator`, as defined in the YAML Front Matter or globally in `_config.yml`.
## Headline Goes Here
Be sure to test the formatting of the auto-generated excerpt, to ensure that it doesn't create any layout problems. Be sure to test the formatting of the auto-generated excerpt, to ensure that it doesn't create any layout problems.

3
example/_posts/2012-05-22-markup-text-readability.md
View File

@ -1,10 +1,11 @@
--- ---
title: "Markup: Text Readability Test" title: "Markup: Text Readability Test"
excerpt: "A bunch of text to test readability." excerpt: "A large amount of sample text to test readability of a text heavy page."
tags: tags:
- sample post - sample post
- readability - readability
- test - test
last_modified_at: 2017-03-09T12:26:59-05:00
--- ---
Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag. Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.

10
example/_posts/2013-01-05-markup-title-with-markup.md
View File

@ -6,9 +6,13 @@ tags:
- css - css
- html - html
- title - title
last_modified_at: 2017-03-09T12:25:10-05:00
--- ---
Verify that: Using Markdown in the title should have no adverse effect on the layout or functionality.
* The post title renders the word "with" in *italics* and the word "Markdown" in **bold**. **`page.title` example:**
* The post title markup should be removed from the browser window / tab.
```yaml
title: "Markup: Title *with* **Markdown**""
```

7
example/_posts/2013-01-05-markup-title-with-special-characters.md
View File

@ -7,11 +7,16 @@ tags:
- markup - markup
- post - post
- title - title
last_modified_at: 2017-03-09T12:23:27-05:00
--- ---
Putting special characters in the title should have no adverse effect on the layout or functionality. Putting special characters in the title should have no adverse effect on the layout or functionality.
Special characters in the post title have been known to cause issues with JavaScript and XML when not properly encoded and escaped. The title above has none-breaking spaces before and after the m-dash.
```markdown
&nbsp;---&nbsp;
```
## Latin Character Tests ## Latin Character Tests

97
example/_posts/2013-01-09-markup-text-alignment.md
View File

@ -1,5 +1,5 @@
--- ---
title: "Markup: Text Alignment" title: "Markup: Text Alignment and Transformations"
categories: categories:
- Markup - Markup
tags: tags:
@ -7,28 +7,105 @@ tags:
- content - content
- css - css
- markup - markup
last_modified_at: 2017-03-09T12:17:03-05:00
--- ---
### Default Sample text to demonstrate alignment and transformation classes.
Easily realign text with alignment classes via HTML:
```
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
```
Or with Kramdown and [inline attribute lists](https://kramdown.gettalong.org/syntax.html#inline-attribute-lists):
```markdown
Left aligned text.
{: .text-left}
Center aligned text.
{: .text-center}
Right aligned text.
{: .text-right}
Justified text.
{: .text-justify}
No wrap text.
{: .text-nowrap}
```
## Default
This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. Completely neutral and not picking a side or sitting on the fence. It just is. It just freaking is. It likes where it is. It does not feel compelled to pick a side. Leave him be. It will just be better that way. Trust me. This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. Completely neutral and not picking a side or sitting on the fence. It just is. It just freaking is. It likes where it is. It does not feel compelled to pick a side. Leave him be. It will just be better that way. Trust me.
### Left Align ## Left Aligned
This is a paragraph. It is left aligned. Because of this, it is a bit more liberal in it's views. It's favorite color is green. Left align tends to be more eco-friendly, but it provides no concrete evidence that it really is. Even though it likes share the wealth evenly, it leaves the equal distribution up to justified alignment. This is a paragraph. It is left aligned. Because of this, it is a bit more liberal in it's views. It's favorite color is green. Left align tends to be more eco-friendly, but it provides no concrete evidence that it really is. Even though it likes share the wealth evenly, it leaves the equal distribution up to justified alignment.
{: style="text-align: left;"} {: .text-left}
### Center Align ## Center Aligned
This is a paragraph. It is center aligned. Center is, but nature, a fence sitter. A flip flopper. It has a difficult time making up its mind. It wants to pick a side. Really, it does. It has the best intentions, but it tends to complicate matters more than help. The best you can do is try to win it over and hope for the best. I hear center align does take bribes. This is a paragraph. It is center aligned. Center is, but nature, a fence sitter. A flip flopper. It has a difficult time making up its mind. It wants to pick a side. Really, it does. It has the best intentions, but it tends to complicate matters more than help. The best you can do is try to win it over and hope for the best. I hear center align does take bribes.
{: style="text-align: center;"} {: .text-center}
### Right Align ## Right Aligned
This is a paragraph. It is right aligned. It is a bit more conservative in it's views. It's prefers to not be told what to do or how to do it. Right align totally owns a slew of guns and loves to head to the range for some practice. Which is cool and all. I mean, it's a pretty good shot from at least four or five football fields away. Dead on. So boss. This is a paragraph. It is right aligned. It is a bit more conservative in it's views. It's prefers to not be told what to do or how to do it. Right align totally owns a slew of guns and loves to head to the range for some practice. Which is cool and all. I mean, it's a pretty good shot from at least four or five football fields away. Dead on. So boss.
{: style="text-align: right;"} {: .text-right}
### Justify Align ## Justify Aligned
This is a paragraph. It is justify aligned. It gets really mad when people associate it with Justin Timberlake. Typically, justified is pretty straight laced. It likes everything to be in it's place and not all cattywampus like the rest of the aligns. I am not saying that makes it better than the rest of the aligns, but it does tend to put off more of an elitist attitude. This is a paragraph. It is justify aligned. It gets really mad when people associate it with Justin Timberlake. Typically, justified is pretty straight laced. It likes everything to be in it's place and not all cattywampus like the rest of the aligns. I am not saying that makes it better than the rest of the aligns, but it does tend to put off more of an elitist attitude.
{: style="text-align: justify;"} {: .text-justify}
## No Wrap
This is a paragraph. It has a no wrap. Beef ribs pig tenderloin filet mignon. Spare ribs leberkas ribeye, burgdoggen fatback tenderloin biltong jowl flank sirloin hamburger bacon brisket. Shoulder bresaola drumstick capicola. Beef ribs prosciutto porchetta beef.
{: .text-nowrap}
---
Transform text with capitalization classes via HTML:
```html
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
<p class="text-truncate">Truncated text.</p>
<p class="small">Small text.</p>
```
Or with Kramdown:
```markdown
Lowercased text
{: .text-lowercase}
Uppercased text
{: .text-uppercase}
Capitalized text
{: .text-capitalize}
```
Lowercased text
{: .text-lowercase}
Uppercased text
{: .text-uppercase}
Capitalized text
{: .text-capitalize}
This is a truncated paragraph of text. Bacon ipsum dolor amet shoulder jowl tail andouille fatback tongue. Ham porchetta kielbasa pork pork chop, tenderloin hamburger meatball. Picanha porchetta swine, brisket salami pork belly burgdoggen. Cupim swine pastrami, chuck tri-tip pork belly jowl shankle alcatra brisket capicola ball tip prosciutto beef ribs doner. Tri-tip bacon ground round pork chop burgdoggen leberkas pork strip steak beef corned beef salami.
{: .text-truncate}
Small text
{: .small}

43
example/_posts/2013-01-10-markup-image-alignment.md
View File

@ -9,35 +9,52 @@ tags:
- css - css
- image - image
- markup - markup
last_modified_at: 2017-03-09T11:15:57-05:00
--- ---
Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let's get started. The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let's get started.
Assign classes with HTML:
```html
<img src="image.jpg" class="align-left" alt="">
<img src="image.jpg" class="align-center" alt="">
<img src="image.jpg" class="align-right" alt="">
```
Or use Kramdown and [inline attribute lists](https://kramdown.gettalong.org/syntax.html#inline-attribute-lists):
```markdown
![left-aligned-image](image.jpg){: .align-left}
![center-aligned-image](image.jpg){: .align-center}
![right-aligned-image](image.jpg){: .align-right}
```
![image-center]({{ site.url }}{{ site.baseurl }}/assets/images/image-alignment-580x300.jpg){: .align-center} ![image-center]({{ site.url }}{{ site.baseurl }}/assets/images/image-alignment-580x300.jpg){: .align-center}
The image above happens to be **centered**. The image should be **centered** with the `.align-center` class.
![image-left]({{ site.url }}{{ site.baseurl }}/assets/images/image-alignment-150x150.jpg){: .align-left} The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is **left aligned**. ![image-left]({{ site.url }}{{ site.baseurl }}/assets/images/image-alignment-150x150.jpg){: .align-left} The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is **left aligned** with the `.align-left` class.
As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we'll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it's thing. Mission accomplished! As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we'll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it's thing. Mission accomplished!
And now for a **massively large image**. It also has **no alignment**. And now for a **massively large image** --- it has **no alignment**.
![no-alignment]({{ site.url }}{{ site.baseurl }}/assets/images/image-alignment-1200x4002.jpg) ![no-alignment]({{ site.url }}{{ site.baseurl }}/assets/images/image-alignment-1200x4002.jpg)
The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content. The image above, though `1200px` wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.
![image-right]({{ site.url }}{{ site.baseurl }}/assets/images/image-alignment-300x200.jpg){: .align-right} ![image-right]({{ site.url }}{{ site.baseurl }}/assets/images/image-alignment-300x200.jpg){: .align-right}
And now we're going to shift things to the **right align**. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently. And now we're going to shift things to the **right** with the `.align-right` class. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently.
In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah --- Just like that. It never felt so good to be right. In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah --- Just like that. It never felt so good to be right.
And just when you thought we were done, we're going to do them all over again with captions! And just when you thought we were done, we're going to do them all over again with captions!
<figure class="align-center"> <figure class="align-center">
<img src="{{ site.url }}{{ site.baseurl }}/assets/images/image-alignment-580x300.jpg" alt=""> <a href="#"><img src="{{ site.url }}{{ site.baseurl }}/assets/images/image-alignment-580x300.jpg" alt=""></a>
<figcaption>Look at 580 x 300 getting some love.</figcaption> <figcaption>Look at 580 x 300 <a href="#">getting some</a> love.</figcaption>
</figure> </figure>
The figure above happens to be **centered**. The caption also has a link in it, just to see if it does anything funky. The figure above happens to be **centered**. The caption also has a link in it, just to see if it does anything funky.
@ -47,25 +64,25 @@ The figure above happens to be **centered**. The caption also has a link in it,
<figcaption>Itty-bitty caption.</figcaption> <figcaption>Itty-bitty caption.</figcaption>
</figure> </figure>
The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is **left aligned**. The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is **left aligned** with the `.align-left` class.
As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we'll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it's thing. Mission accomplished! As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we'll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it's thing. Mission accomplished!
And now for a **massively large image**. It also has **no alignment**. And now for a massively large image with **no alignment**.
<figure style="width: 1200px"> <figure style="width: 1200px">
<img src="{{ site.url }}{{ site.baseurl }}/assets/images/image-alignment-1200x4002.jpg" alt=""> <img src="{{ site.url }}{{ site.baseurl }}/assets/images/image-alignment-1200x4002.jpg" alt="">
<figcaption>Massive image comment for your eyeballs.</figcaption> <figcaption>Massive image comment for your eyeballs.</figcaption>
</figure> </figure>
The figure element above has an inline style of `width: 1200px` set which should break it outside of the normal content flow. The figure element above has an inline style of `width: 1200px` set which should case it to break outside of the normal content flow.
<figure style="width: 300px" class="align-right"> <figure style="width: 300px" class="align-right">
<img src="{{ site.url }}{{ site.baseurl }}/assets/images/image-alignment-300x200.jpg" alt=""> <img src="{{ site.url }}{{ site.baseurl }}/assets/images/image-alignment-300x200.jpg" alt="">
<figcaption>Feels good to be right all the time.</figcaption> <figcaption>Feels good to be on the right.</figcaption>
</figure> </figure>
And now we're going to shift things to the **right align**. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently. And now we're going to shift things to the **right** with the `.align-right` class. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently.
In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah --- Just like that. It never felt so good to be right. In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah --- Just like that. It never felt so good to be right.

98
example/_posts/2013-01-11-markup-html-tags-and-formatting.md → example/_posts/2013-01-11-markup-html-elements-and-formatting.md
View File

@ -1,17 +1,18 @@
--- ---
title: "Markup: HTML Tags and Formatting" title: "Markup: HTML Elements and Formatting"
subtitle: "The common elements" sub_title: "The common elements"
categories: categories:
- Markup - Markup
tags: elements:
- content - content
- css - css
- formatting - formatting
- html - html
- markup - markup
last_modified_at: 2017-03-09T10:55:59-05:00
--- ---
A variety of common markup showing how the theme styles them. A variety of common HTML elements to demonstrate the theme's stylesheet and verify they have been styled appropriately.
# Header one # Header one
@ -101,94 +102,49 @@ Do It Live
3. List item three 3. List item three
4. List item four 4. List item four
## Buttons ## Address element
Make any link standout more when applying the `.btn` class.
```html
<a href="#" class="btn--success">Success Button</a>
```
[Primary Button](#){: .btn}
[Success Button](#){: .btn .btn--success}
[Warning Button](#){: .btn .btn--warning}
[Danger Button](#){: .btn .btn--danger}
[Info Button](#){: .btn .btn--info}
[Inverse Button](#){: .btn .btn--inverse}
[Light Outline Button](#){: .btn .btn--light-outline}
```markdown
[Primary Button Text](#link){: .btn}
[Success Button Text](#link){: .btn .btn--success}
[Warning Button Text](#link){: .btn .btn--warning}
[Danger Button Text](#link){: .btn .btn--danger}
[Info Button Text](#link){: .btn .btn--info}
[Inverse Button](#link){: .btn .btn--inverse}
[Light Outline Button](#link){: .btn .btn--light-outline}
```
[X-Large Button](#){: .btn .btn--x-large}
[Large Button](#){: .btn .btn--large}
[Default Button](#){: .btn}
[Small Button](#){: .btn .btn--small}
```markdown
[X-Large Button](#link){: .btn .btn--x-large}
[Large Button](#link){: .btn .btn--large}
[Default Button](#link){: .btn}
[Small Button](#link){: .btn .btn--small}
```
## Notices
**Watch out!** You can also add notices by appending `{: .notice}` to a paragraph.
{: .notice}
## HTML Tags
### Address Tag
<address> <address>
1 Infinite Loop<br /> Cupertino, CA 95014<br /> United States 1 Infinite Loop<br /> Cupertino, CA 95014<br /> United States
</address> </address>
### Anchor Tag (aka. Link) ## Anchor element (aka. Link)
This is an example of a [link](http://apple.com "Apple"). This is an example of a [link](http://apple.com "Apple").
### Abbreviation Tag ## Abbreviation element
The abbreviation CSS stands for "Cascading Style Sheets". The abbreviation CSS stands for "Cascading Style Sheets".
*[CSS]: Cascading Style Sheets *[CSS]: Cascading Style Sheets
### Cite Tag ## Cite element
"Code is poetry." ---<cite>Automattic</cite> "Code is poetry." ---<cite>Automattic</cite>
### Code Tag ## Code element
You will learn later on in these tests that `word-wrap: break-word;` will be your best friend. You will learn later on in these tests that `word-wrap: break-word;` will be your best friend.
### Strike Tag ## Strike element
This tag will let you <strike>strikeout text</strike>. This element will let you <strike>strikeout text</strike>.
### Emphasize Tag ## Emphasize element
The emphasize tag should _italicize_ text. The emphasize element should _italicize_ text.
### Insert Tag ## Insert element
This tag should denote <ins>inserted</ins> text. This element should denote <ins>inserted</ins> text.
### Keyboard Tag ## Keyboard element
This scarcely known tag emulates <kbd>keyboard text</kbd>, which is usually styled like the `<code>` tag. This scarcely known element emulates <kbd>keyboard text</kbd>, which is usually styled like the `<code>` element.
### Preformatted Tag ## Preformatted element
This tag styles large blocks of code. This element styles large blocks of code.
<pre> <pre>
.post-title { .post-title {
@ -196,26 +152,26 @@ This tag styles large blocks of code.
font-weight: bold; font-weight: bold;
font-size: 38px; font-size: 38px;
line-height: 1.2; line-height: 1.2;
and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows; and here's a line of some really, really, really, really long text, just to see how the PRE element handles it and to find out how it overflows;
} }
</pre> </pre>
### Quote Tag ## Quote element
<q>Developers, developers, developers&#8230;</q> &#8211;Steve Ballmer <q>Developers, developers, developers&#8230;</q> &#8211;Steve Ballmer
### Strong Tag ## Strong element
This tag shows **bold text**. This element shows **bold text**.
### Subscript Tag ## Subscript element
Getting our science styling on with H<sub>2</sub>O, which should push the "2" down. Getting our science styling on with H<sub>2</sub>O, which should push the "2" down.
### Superscript Tag ## Superscript element
Still sticking with science and Isaac Newton's E = MC<sup>2</sup>, which should lift the 2 up. Still sticking with science and Isaac Newton's E = MC<sup>2</sup>, which should lift the 2 up.
### Variable Tag ## Variable element
This allows you to denote <var>variables</var>. This allows you to denote <var>variables</var>.

63
example/_posts/2013-05-22-markup-more-images.md
View File

@ -1,63 +0,0 @@
---
title: "Markup: Another Post with Images"
excerpt: "Examples and code for displaying images in posts."
tags:
- sample post
- images
- test
---
Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use `figure` with the appropriate `class`. Each instance of `figure` is auto-numbered and displayed in the caption.
### Figures (for images or video)
#### One Up
<figure>
<a href="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_b.jpg"><img src="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_c.jpg"></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>
</figure>
Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.
#### Two Up
Apply the `half` class like so to display two images side by side that share the same caption.
```html
<figure class="half">
<a href="/assets/images/image-filename-1-large.jpg"><img src="/assets/images/image-filename-1.jpg"></a>
<a href="/assets/images/image-filename-2-large.jpg"><img src="/assets/images/image-filename-2.jpg"></a>
<figcaption>Caption describing these two images.</figcaption>
</figure>
```
And you'll get something that looks like this:
<figure class="half">
<a href="http://placehold.it/1200x600.JPG"><img src="http://placehold.it/600x300.jpg"></a>
<a href="http://placehold.it/1200x600.jpeg"><img src="http://placehold.it/600x300.jpg"></a>
<figcaption>Two images.</figcaption>
</figure>
#### Three Up
Apply the `third` class like so to display three images side by side that share the same caption.
```html
<figure class="third">
<img src="/images/image-filename-1.jpg">
<img src="/images/image-filename-2.jpg">
<img src="/images/image-filename-3.jpg">
<figcaption>Caption describing these three images.</figcaption>
</figure>
```
And you'll get something that looks like this:
<figure class="third">
<img src="http://placehold.it/600x300.jpg">
<img src="http://placehold.it/600x300.jpg">
<img src="http://placehold.it/600x300.jpg">
<figcaption>Three images.</figcaption>
</figure>

100
example/_posts/2013-08-16-markup-syntax-highlighting.md
View File

@ -1,7 +1,7 @@
--- ---
title: "Markup: Syntax Highlighting" title: "Markup: Syntax Highlighting"
excerpt: "Post displaying the various ways of highlighting code in Markdown." excerpt: "Post displaying the various ways one can highlight code blocks with Jekyll. Some options include standard Markdown, GitHub Flavored Markdown, and Jekyll's `{% highlight %}` tag."
modified: 2016-09-09T09:55:10-04:00 last_modified_at: 2017-03-09T10:27:01-05:00
tags: tags:
- code - code
- syntax highlighting - syntax highlighting
@ -11,9 +11,16 @@ Syntax highlighting is a feature that displays source code, in different colors
[^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting> [^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting>
### GFM Code Blocks ## GFM Code Blocks
GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) are supported. To modify styling and highlight colors edit `/_sass/syntax.scss`. GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) are supported by default with Jekyll. You may need to update your `_config.yml` file to enable them if you're using an older version.
```yaml
kramdown:
input: GFM
```
Here's an example of a CSS code snippet written in GFM:
```css ```css
#container { #container {
@ -23,37 +30,7 @@ GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/c
} }
``` ```
{% highlight scss %} Yet another code snippet for demonstration purposes:
.highlight {
margin: 0;
padding: 1em;
font-family: $monospace;
font-size: $type-size-7;
line-height: 1.8;
}
{% endhighlight %}
```html
{% raw %}<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->{% endraw %}
```
{% highlight html linenos %}
{% raw %}<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->{% endraw %}
{% endhighlight %}
```ruby ```ruby
module Jekyll module Jekyll
@ -75,7 +52,48 @@ module Jekyll
end end
``` ```
### Code Blocks in Lists ## Jekyll Highlight Liquid Tag
Jekyll also has built-in support for syntax highlighting of code snippets using either Rouge or Pygments, using a dedicated Liquid tag as follows:
```liquid
{% raw %}{% highlight scss %}
.highlight {
margin: 0;
padding: 1em;
font-family: $monospace;
font-size: $type-size-7;
line-height: 1.8;
}
{% endhighlight %}{% endraw %}
```
And the output will look like this:
{% highlight scss %}
.highlight {
margin: 0;
padding: 1em;
font-family: $monospace;
font-size: $type-size-7;
line-height: 1.8;
}
{% endhighlight %}
Here's an example of a code snippet using the Liquid tag and `linenos` enabled.
{% highlight html linenos %}
{% raw %}<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->{% endraw %}
{% endhighlight %}
## Code Blocks in Lists
Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., `1.`). Usually this will mean indenting 3 spaces instead of 4. Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., `1.`). Usually this will mean indenting 3 spaces instead of 4.
@ -92,8 +110,14 @@ Indentation matters. Be sure the indent of the code block aligns with the first
3. Now you can do this. 3. Now you can do this.
### GitHub Gist Embed ## GitHub Gist Embed
An example of a Gist embed below. GitHub Gist embeds can also be used:
```html
<script src="https://gist.github.com/mmistakes/77c68fbb07731a456805a7b473f47841.js"></script>
```
Which outputs as:
<script src="https://gist.github.com/mmistakes/77c68fbb07731a456805a7b473f47841.js"></script> <script src="https://gist.github.com/mmistakes/77c68fbb07731a456805a7b473f47841.js"></script>