diff --git a/example/_posts/2009-05-15-edge-case-nested-and-mixed-lists.md b/example/_posts/2009-05-15-edge-case-nested-and-mixed-lists.md index cc4fd5e..098ce7e 100644 --- a/example/_posts/2009-05-15-edge-case-nested-and-mixed-lists.md +++ b/example/_posts/2009-05-15-edge-case-nested-and-mixed-lists.md @@ -8,14 +8,12 @@ tags: - edge case - lists - 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 -* Your list styles go deep enough. - -### Ordered -- Unordered -- Ordered +## Ordered -- Unordered -- Ordered 1. 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 4. ordered item -### Ordered -- Unordered -- Unordered +## Ordered -- Unordered -- Unordered 1. 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 4. ordered item -### Unordered -- Ordered -- Unordered +## Unordered -- Ordered -- Unordered * 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 -- Unordered -- Ordered +## Unordered -- Unordered -- Ordered * unordered item * unordered item diff --git a/example/_posts/2009-08-06-edge-case-no-body-content.md b/example/_posts/2009-08-06-edge-case-no-body-content.md index 7b2fa7d..8a68508 100644 --- a/example/_posts/2009-08-06-edge-case-no-body-content.md +++ b/example/_posts/2009-08-06-edge-case-no-body-content.md @@ -1,9 +1,11 @@ --- title: "Edge Case: No Body Content" +excerpt: "This post has no body content and should be blank on the post's page." categories: - Edge Case tags: - content - edge case - layout +last_modified_at: 2017-03-09T14:23:48-05:00 --- diff --git a/example/_posts/2009-09-05-edge-case-no-yaml-title.md b/example/_posts/2009-09-05-edge-case-no-yaml-title.md index 4e5323f..7a32127 100644 --- a/example/_posts/2009-09-05-edge-case-no-yaml-title.md +++ b/example/_posts/2009-09-05-edge-case-no-yaml-title.md @@ -7,4 +7,6 @@ tags: - title --- -This post has no title specified in the YAML Front Matter. Jekyll should auto-generate a title from the filename. \ No newline at end of file +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**. \ No newline at end of file diff --git a/example/_posts/2009-10-05-edge-case-title-should-not-overflow-the-content-area.md b/example/_posts/2009-10-05-edge-case-title-should-not-overflow-the-content-area.md index 6fdc1b8..e7be7ba 100644 --- a/example/_posts/2009-10-05-edge-case-title-should-not-overflow-the-content-area.md +++ b/example/_posts/2009-10-05-edge-case-title-should-not-overflow-the-content-area.md @@ -9,19 +9,18 @@ tags: - html - layout - 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: - * 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. - * 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 --ms-word-wrap: break-word; word-wrap: break-word; ``` \ No newline at end of file diff --git a/example/_posts/2009-10-05-edge-case-very-long-title.md b/example/_posts/2009-10-05-edge-case-very-long-title.md index 29fcb77..d31e072 100644 --- a/example/_posts/2009-10-05-edge-case-very-long-title.md +++ b/example/_posts/2009-10-05-edge-case-very-long-title.md @@ -11,4 +11,4 @@ tags: - title --- -Check for long titles and how they might break a template. \ No newline at end of file +Check for long titles and how they might break layouts. \ No newline at end of file diff --git a/example/_posts/2010-01-07-post-modified.md b/example/_posts/2010-01-07-post-modified.md index b7457e2..dbfbe21 100644 --- a/example/_posts/2010-01-07-post-modified.md +++ b/example/_posts/2010-01-07-post-modified.md @@ -1,14 +1,14 @@ --- title: "Post: Modified Date" -modified: 2016-03-09T16:20:02-05:00 categories: - Post Formats tags: - Post Formats - readability - 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. \ No newline at end of file +Plugins like [**jekyll-sitemap**](https://github.com/jekyll/jekyll-feed) use this field to add a `` tag your `sitemap.xml`. \ No newline at end of file diff --git a/example/_posts/2010-01-08-post-chat.md b/example/_posts/2010-01-08-post-chat.md deleted file mode 100644 index e61b3f2..0000000 --- a/example/_posts/2010-01-08-post-chat.md +++ /dev/null @@ -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! \ No newline at end of file diff --git a/example/_posts/2010-02-05-post-notice.md b/example/_posts/2010-02-05-post-notice.md deleted file mode 100644 index 071c789..0000000 --- a/example/_posts/2010-02-05-post-notice.md +++ /dev/null @@ -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 `

` 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 %} - -
{% raw %}{{ notice-2 | markdownify }}{% endraw %}
-``` - -{% capture notice-2 %} -#### New Site Features - -* You can now have cover images on blog pages -* Drafts will now auto-save while writing -{% endcapture %} - -
- {{ notice-2 | markdownify }} -
- -Or you could skip the capture and stick with straight HTML. - -```html -
-

Message

-

A basic message.

-
-``` - -
-

Message

-

A basic message.

-
\ No newline at end of file diff --git a/example/_posts/2010-03-07-post-link.md b/example/_posts/2010-03-07-post-link.md deleted file mode 100644 index 6a8005e..0000000 --- a/example/_posts/2010-03-07-post-link.md +++ /dev/null @@ -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. \ No newline at end of file diff --git a/example/_posts/2010-06-02-post-video-youtube.md b/example/_posts/2010-06-02-post-video-youtube.md index 16bc910..117cb86 100644 --- a/example/_posts/2010-06-02-post-video-youtube.md +++ b/example/_posts/2010-06-02-post-video-youtube.md @@ -4,8 +4,9 @@ categories: - Post Formats tags: - Post Formats +last_modified_at: 2017-03-09T12:58:20-05:00 --- -YouTube video embed below. + - \ No newline at end of file +This post test YouTube video embeds. \ No newline at end of file diff --git a/example/_posts/2010-09-10-post-twitter-embeds.md b/example/_posts/2010-09-10-post-twitter-embeds.md index 7c5c418..fd16523 100644 --- a/example/_posts/2010-09-10-post-twitter-embeds.md +++ b/example/_posts/2010-09-10-post-twitter-embeds.md @@ -7,9 +7,10 @@ tags: - embeds - media - twitter +last_modified_at: 2017-03-09T12:57:42-05:00 --- -

🎨 Finally got around to adding all my @procreateapp creations with time lapse videos https://t.co/1nNbkefC3L pic.twitter.com/gcNLJoJ0Gn

— Michael Rose (@mmistakes) November 6, 2015
+

Oh I dunno. It's probably been over 15 years since I smudged out a face with a pencil and kneaded eraser. #WIP #Sktchy pic.twitter.com/PwqbMddyVK

— Michael Rose (@mmistakes) February 1, 2017
This post tests Twitter Embeds. \ No newline at end of file diff --git a/example/_posts/2010-10-25-post-future-date.md b/example/_posts/2010-10-25-post-future-date.md index 7d1b203..163ee06 100644 --- a/example/_posts/2010-10-25-post-future-date.md +++ b/example/_posts/2010-10-25-post-future-date.md @@ -3,6 +3,11 @@ title: "Post: Future Date" date: 9999-12-31 categories: - 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. \ No newline at end of file +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 +``` \ No newline at end of file diff --git a/example/_posts/2012-03-14-layout-code-excerpt-generated.md b/example/_posts/2012-03-14-layout-code-excerpt-generated.md deleted file mode 100644 index 0bdc595..0000000 --- a/example/_posts/2012-03-14-layout-code-excerpt-generated.md +++ /dev/null @@ -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. `red`. 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. \ No newline at end of file diff --git a/example/_posts/2012-03-14-layout-excerpt-defined.md b/example/_posts/2012-03-14-layout-excerpt-defined.md index 7091cf8..f5a1439 100644 --- a/example/_posts/2012-03-14-layout-excerpt-defined.md +++ b/example/_posts/2012-03-14-layout-excerpt-defined.md @@ -1,6 +1,6 @@ --- 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: - Layout - Uncategorized @@ -8,8 +8,9 @@ tags: - content - excerpt - 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. \ No newline at end of file +This paragraph should be absent from an index page where `post.excerpt` is shown. \ No newline at end of file diff --git a/example/_posts/2012-03-14-layout-excerpt-generated.md b/example/_posts/2012-03-14-layout-excerpt-generated.md index 1af0e35..b6ebff3 100644 --- a/example/_posts/2012-03-14-layout-excerpt-generated.md +++ b/example/_posts/2012-03-14-layout-excerpt-generated.md @@ -1,5 +1,5 @@ --- -title: "Layout: Excerpt (Generated)" +title: "Layout: Excerpt (Generated with Separator Tag)" excerpt_separator: "" categories: - Layout @@ -8,11 +8,10 @@ tags: - content - excerpt - 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. - -## Headline Goes Here +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`. Be sure to test the formatting of the auto-generated excerpt, to ensure that it doesn't create any layout problems. diff --git a/example/_posts/2012-05-22-markup-text-readability.md b/example/_posts/2012-05-22-markup-text-readability.md index e0dde8e..9970eff 100644 --- a/example/_posts/2012-05-22-markup-text-readability.md +++ b/example/_posts/2012-05-22-markup-text-readability.md @@ -1,10 +1,11 @@ --- 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: - sample post - readability - 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. diff --git a/example/_posts/2013-01-05-markup-title-with-markup.md b/example/_posts/2013-01-05-markup-title-with-markup.md index 2ead3fc..2ce5f1b 100644 --- a/example/_posts/2013-01-05-markup-title-with-markup.md +++ b/example/_posts/2013-01-05-markup-title-with-markup.md @@ -6,9 +6,13 @@ tags: - css - html - 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**. -* The post title markup should be removed from the browser window / tab. \ No newline at end of file +**`page.title` example:** + +```yaml +title: "Markup: Title *with* **Markdown**"" +``` \ No newline at end of file diff --git a/example/_posts/2013-01-05-markup-title-with-special-characters.md b/example/_posts/2013-01-05-markup-title-with-special-characters.md index 075828a..1b5eceb 100644 --- a/example/_posts/2013-01-05-markup-title-with-special-characters.md +++ b/example/_posts/2013-01-05-markup-title-with-special-characters.md @@ -7,11 +7,16 @@ tags: - markup - post - 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. -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 + ---  +``` ## Latin Character Tests diff --git a/example/_posts/2013-01-09-markup-text-alignment.md b/example/_posts/2013-01-09-markup-text-alignment.md index e6fd09b..bc50755 100644 --- a/example/_posts/2013-01-09-markup-text-alignment.md +++ b/example/_posts/2013-01-09-markup-text-alignment.md @@ -1,5 +1,5 @@ --- -title: "Markup: Text Alignment" +title: "Markup: Text Alignment and Transformations" categories: - Markup tags: @@ -7,28 +7,105 @@ tags: - content - css - 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: + +``` +

Left aligned text.

+

Center aligned text.

+

Right aligned text.

+

Justified text.

+

No wrap text.

+``` + +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. -### 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. -{: 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. -{: 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. -{: 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. -{: style="text-align: justify;"} \ No newline at end of file +{: .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 +

Lowercased text.

+

Uppercased text.

+

Capitalized text.

+

Truncated text.

+

Small text.

+``` + +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} diff --git a/example/_posts/2013-01-10-markup-image-alignment.md b/example/_posts/2013-01-10-markup-image-alignment.md index b92dab6..60e6293 100644 --- a/example/_posts/2013-01-10-markup-image-alignment.md +++ b/example/_posts/2013-01-10-markup-image-alignment.md @@ -9,35 +9,52 @@ tags: - css - image - 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 + + + +``` + +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} -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! -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) -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} -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. And just when you thought we were done, we're going to do them all over again with captions!
- -
Look at 580 x 300 getting some love.
+ +
Look at 580 x 300 getting some love.
The figure above happens to be **centered**. The caption also has a link in it, just to see if it does anything funky. @@ -47,26 +64,26 @@ The figure above happens to be **centered**. The caption also has a link in it,
Itty-bitty caption.
-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! -And now for a **massively large image**. It also has **no alignment**. +And now for a massively large image with **no alignment**.
Massive image comment for your eyeballs.
-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.
-
Feels good to be right all the time.
+
Feels good to be on the 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. -And that's a wrap, yo! You survived the tumultuous waters of alignment. Image alignment achievement unlocked! +And that's a wrap, yo! You survived the tumultuous waters of alignment. Image alignment achievement unlocked! \ No newline at end of file diff --git a/example/_posts/2013-01-11-markup-html-tags-and-formatting.md b/example/_posts/2013-01-11-markup-html-elements-and-formatting.md similarity index 62% rename from example/_posts/2013-01-11-markup-html-tags-and-formatting.md rename to example/_posts/2013-01-11-markup-html-elements-and-formatting.md index 5a32de9..11a130b 100644 --- a/example/_posts/2013-01-11-markup-html-tags-and-formatting.md +++ b/example/_posts/2013-01-11-markup-html-elements-and-formatting.md @@ -1,17 +1,18 @@ --- -title: "Markup: HTML Tags and Formatting" -subtitle: "The common elements" +title: "Markup: HTML Elements and Formatting" +sub_title: "The common elements" categories: - Markup -tags: +elements: - content - css - formatting - html - 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 @@ -101,94 +102,49 @@ Do It Live 3. List item three 4. List item four -## Buttons - -Make any link standout more when applying the `.btn` class. - -```html -Success Button -``` - -[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 element
1 Infinite Loop
Cupertino, CA 95014
United States
-### Anchor Tag (aka. Link) +## Anchor element (aka. Link) This is an example of a [link](http://apple.com "Apple"). -### Abbreviation Tag +## Abbreviation element The abbreviation CSS stands for "Cascading Style Sheets". *[CSS]: Cascading Style Sheets -### Cite Tag +## Cite element "Code is poetry." ---Automattic -### Code Tag +## Code element 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 strikeout text. +This element will let you strikeout text. -### Emphasize Tag +## Emphasize element -The emphasize tag should _italicize_ text. +The emphasize element should _italicize_ text. -### Insert Tag +## Insert element -This tag should denote inserted text. +This element should denote inserted text. -### Keyboard Tag +## Keyboard element -This scarcely known tag emulates keyboard text, which is usually styled like the `` tag. +This scarcely known element emulates keyboard text, which is usually styled like the `` element. -### Preformatted Tag +## Preformatted element -This tag styles large blocks of code. +This element styles large blocks of code. 
 .post-title {
@@ -196,26 +152,26 @@ This tag styles large blocks of code.
 	font-weight: bold;
 	font-size: 38px;
 	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;
 }
-### Quote Tag +## Quote element Developers, developers, developers… –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 H2O, which should push the "2" down. -### Superscript Tag +## Superscript element Still sticking with science and Isaac Newton's E = MC2, which should lift the 2 up. -### Variable Tag +## Variable element This allows you to denote variables. \ No newline at end of file diff --git a/example/_posts/2013-05-22-markup-more-images.md b/example/_posts/2013-05-22-markup-more-images.md deleted file mode 100644 index 6fede00..0000000 --- a/example/_posts/2013-05-22-markup-more-images.md +++ /dev/null @@ -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 - -
- -
Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr.
-
- -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 -
- - -
Caption describing these two images.
-
-``` - -And you'll get something that looks like this: - -
- - -
Two images.
-
- -#### Three Up - -Apply the `third` class like so to display three images side by side that share the same caption. - -```html -
- - - -
Caption describing these three images.
-
-``` - -And you'll get something that looks like this: - -
- - - -
Three images.
-
diff --git a/example/_posts/2013-08-16-markup-syntax-highlighting.md b/example/_posts/2013-08-16-markup-syntax-highlighting.md index e9af95a..8d8ae90 100644 --- a/example/_posts/2013-08-16-markup-syntax-highlighting.md +++ b/example/_posts/2013-08-16-markup-syntax-highlighting.md @@ -1,7 +1,7 @@ --- title: "Markup: Syntax Highlighting" -excerpt: "Post displaying the various ways of highlighting code in Markdown." -modified: 2016-09-09T09:55:10-04:00 +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." +last_modified_at: 2017-03-09T10:27:01-05:00 tags: - code - syntax highlighting @@ -11,9 +11,16 @@ Syntax highlighting is a feature that displays source code, in different colors [^1]: -### 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 #container { @@ -23,37 +30,7 @@ GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/c } ``` -{% highlight scss %} -.highlight { - margin: 0; - padding: 1em; - font-family: $monospace; - font-size: $type-size-7; - line-height: 1.8; -} -{% endhighlight %} - -```html -{% raw %}{% endraw %} -``` - -{% highlight html linenos %} -{% raw %}{% endraw %} -{% endhighlight %} +Yet another code snippet for demonstration purposes: ```ruby module Jekyll @@ -75,7 +52,48 @@ module Jekyll 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 %}{% 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. @@ -92,8 +110,14 @@ Indentation matters. Be sure the indent of the code block aligns with the first 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 + +``` + +Which outputs as: