From 3b97799837681735b4a8e8977a16e8a1ee01e3f7 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 22:53:48 -0500 Subject: [PATCH 01/35] Separate global components into includes for convenience, and to familiarize users with includes structure --- lib/site_template/_includes/footer.html | 15 +++++++++++ lib/site_template/_includes/head.html | 13 +++++++++ lib/site_template/_includes/header.html | 4 +++ lib/site_template/_layouts/default.html | 35 ++++--------------------- 4 files changed, 37 insertions(+), 30 deletions(-) create mode 100644 lib/site_template/_includes/footer.html create mode 100644 lib/site_template/_includes/head.html create mode 100644 lib/site_template/_includes/header.html diff --git a/lib/site_template/_includes/footer.html b/lib/site_template/_includes/footer.html new file mode 100644 index 00000000..3f089589 --- /dev/null +++ b/lib/site_template/_includes/footer.html @@ -0,0 +1,15 @@ +
+
+

+ Your Name
+ What You Are
+ you@example.com +

+
+
+

+ github.com/yourusername
+ twitter.com/yourusername
+

+
+
\ No newline at end of file diff --git a/lib/site_template/_includes/head.html b/lib/site_template/_includes/head.html new file mode 100644 index 00000000..58fe7f3d --- /dev/null +++ b/lib/site_template/_includes/head.html @@ -0,0 +1,13 @@ + + + + {{ page.title }} + + + + + + + + + \ No newline at end of file diff --git a/lib/site_template/_includes/header.html b/lib/site_template/_includes/header.html new file mode 100644 index 00000000..6192b8d4 --- /dev/null +++ b/lib/site_template/_includes/header.html @@ -0,0 +1,4 @@ +
+

{{ site.name }}

+ home +
\ No newline at end of file diff --git a/lib/site_template/_layouts/default.html b/lib/site_template/_layouts/default.html index 22e7e3f2..947f3879 100644 --- a/lib/site_template/_layouts/default.html +++ b/lib/site_template/_layouts/default.html @@ -1,43 +1,18 @@ - - - - {{ page.title }} - - - + {% include head.html %} - - - -
-
-

{{ site.name }}

- home -
+ + {% include header.html %} {{ content }} -
-
-

- Your Name
- What You Are
- you@example.com -

-
-
-

- github.com/yourusername
- twitter.com/yourusername
-

-
-
+ {% include footer.html %} +
From 7b0bf0d85c47b7347dc75a6454d0ec8c8cc76b77 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 22:55:14 -0500 Subject: [PATCH 02/35] Add conditional to default to site.name if no page.title is set --- lib/site_template/_includes/head.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/site_template/_includes/head.html b/lib/site_template/_includes/head.html index 58fe7f3d..23dee154 100644 --- a/lib/site_template/_includes/head.html +++ b/lib/site_template/_includes/head.html @@ -1,7 +1,7 @@ - {{ page.title }} + {% if page.title %}{{ page.title }}{% else %}{{ site.name }}{% endif %} From b9875b7bc8873e6af47490822d17deb58968400d Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 22:56:04 -0500 Subject: [PATCH 03/35] Add description meta set in config, for teh google :heart: --- lib/site_template/_includes/head.html | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/site_template/_includes/head.html b/lib/site_template/_includes/head.html index 23dee154..e94bb982 100644 --- a/lib/site_template/_includes/head.html +++ b/lib/site_template/_includes/head.html @@ -3,6 +3,7 @@ {% if page.title %}{{ page.title }}{% else %}{{ site.name }}{% endif %} + From a1b60430d63ceeae63ec2c4a6e5f88748c8f0e3b Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 22:56:30 -0500 Subject: [PATCH 04/35] Add canonical meta set with config params for more google :heart: --- lib/site_template/_includes/head.html | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/site_template/_includes/head.html b/lib/site_template/_includes/head.html index e94bb982..ef54e080 100644 --- a/lib/site_template/_includes/head.html +++ b/lib/site_template/_includes/head.html @@ -4,6 +4,7 @@ {% if page.title %}{{ page.title }}{% else %}{{ site.name }}{% endif %} + From d52b9b7e5b6b7a989b47430f311a689ad7fd885f Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 22:57:10 -0500 Subject: [PATCH 05/35] Remove redundant home link --- lib/site_template/_includes/header.html | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/site_template/_includes/header.html b/lib/site_template/_includes/header.html index 6192b8d4..e9d7f858 100644 --- a/lib/site_template/_includes/header.html +++ b/lib/site_template/_includes/header.html @@ -1,4 +1,3 @@

{{ site.name }}

- home
\ No newline at end of file From 6d4e3f8c729dc56f22c6d3df3cc56631afc45231 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:00:37 -0500 Subject: [PATCH 06/35] Refactor header markup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - use anchor instead of h1 for site title, for semantic accuracy, and because post h1’s should be the post title - implement nav wrapper for nav links - use div.wrap for design structure --- lib/site_template/_includes/header.html | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/lib/site_template/_includes/header.html b/lib/site_template/_includes/header.html index e9d7f858..4c4130a6 100644 --- a/lib/site_template/_includes/header.html +++ b/lib/site_template/_includes/header.html @@ -1,3 +1,14 @@ -
-

{{ site.name }}

-
\ No newline at end of file +
+ +
+ + {{ site.name }} + + + +
+ +
\ No newline at end of file From 8fa48b492e85913d21e90fe4cc5b378e644e3aeb Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:02:04 -0500 Subject: [PATCH 07/35] Footer markup restructuring - rework footer to use columns - add additional area for generic text --- lib/site_template/_includes/footer.html | 38 ++++++++++++++++--------- 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/lib/site_template/_includes/footer.html b/lib/site_template/_includes/footer.html index 3f089589..37f20bba 100644 --- a/lib/site_template/_includes/footer.html +++ b/lib/site_template/_includes/footer.html @@ -1,15 +1,27 @@ -
-
-

- Your Name
- What You Are
- you@example.com -

+ \ No newline at end of file From d5ea6e47dd0fe28c66605ab75b3e4538dbc90fb8 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:02:41 -0500 Subject: [PATCH 08/35] Restructure default template to include page content wrap --- lib/site_template/_layouts/default.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/lib/site_template/_layouts/default.html b/lib/site_template/_layouts/default.html index 947f3879..61be651c 100644 --- a/lib/site_template/_layouts/default.html +++ b/lib/site_template/_layouts/default.html @@ -5,15 +5,15 @@ -
+ {% include header.html %} - {% include header.html %} +
+
+ {{ content }} +
+
- {{ content }} - - {% include footer.html %} - -
+ {% include footer.html %} From 1b54afe67a02350f15d603880f7959c1fef64764 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:03:13 -0500 Subject: [PATCH 09/35] remove extra line --- lib/site_template/_layouts/default.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/site_template/_layouts/default.html b/lib/site_template/_layouts/default.html index 61be651c..af415865 100644 --- a/lib/site_template/_layouts/default.html +++ b/lib/site_template/_layouts/default.html @@ -16,4 +16,4 @@ {% include footer.html %} - + \ No newline at end of file From fcd2383de3a899f9c9641986356b9eebec126031 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:04:44 -0500 Subject: [PATCH 10/35] Refactor post template - add article tags around post content - creates post header - add conditionals for extra options in meta --- lib/site_template/_layouts/post.html | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/lib/site_template/_layouts/post.html b/lib/site_template/_layouts/post.html index 04e3586b..838ad7a0 100644 --- a/lib/site_template/_layouts/post.html +++ b/lib/site_template/_layouts/post.html @@ -1,9 +1,15 @@ --- layout: default --- -

{{ page.title }}

-

{{ page.date | date_to_string }}

-
-{{ content }} -
+ +
+

{{ page.title }}

+

{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}

+
+ +
+ {{ content }} +
+ +
\ No newline at end of file From 16d8d051727cda630bd789c52736029bff8bdc6b Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:07:10 -0500 Subject: [PATCH 11/35] Adds a basic page template Many users moving to Jekyll from other popular blogging options (like Wordpress) will be used to thinking in terms of pages/posts. Having a page template like this will be convenient for those users. --- lib/site_template/_layouts/page.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 lib/site_template/_layouts/page.html diff --git a/lib/site_template/_layouts/page.html b/lib/site_template/_layouts/page.html new file mode 100644 index 00000000..59821b14 --- /dev/null +++ b/lib/site_template/_layouts/page.html @@ -0,0 +1,14 @@ +--- +layout: default +--- +
+ +
+

{{ page.title }}

+
+ +
+ {{ content }} +
+ +
\ No newline at end of file From 1687f0855d0421c01de03eeba353785be7f4ac8a Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:09:19 -0500 Subject: [PATCH 12/35] Add placeholder Projects page --- lib/site_template/projects/index.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 lib/site_template/projects/index.md diff --git a/lib/site_template/projects/index.md b/lib/site_template/projects/index.md new file mode 100644 index 00000000..c4587134 --- /dev/null +++ b/lib/site_template/projects/index.md @@ -0,0 +1,14 @@ +--- +layout: page +title: Projects +--- + +Just a sample of another page that you could include for some purpose in the primary navigation. + +This could be a great place to list your own projects. But to get you started, here's some handy links: + +- [List of Jekyll-powered websites](https://github.com/jekyll/jekyll/wiki/Sites) +- [Octopress, a Jekyll based blog framework](https://github.com/octopress/) +- [Jekyll documentation](http://jekyllrb.com/) +- [Jekyll source on GitHub](https://github.com/jekyll/jekyll) +- [Available plugins](http://jekyllrb.com/docs/plugins/#available_plugins) \ No newline at end of file From 53ae5a7b0f992b0a3dd3e8b68065e743a7a70649 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:09:28 -0500 Subject: [PATCH 13/35] Add placeholder About page --- lib/site_template/about/index.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 lib/site_template/about/index.md diff --git a/lib/site_template/about/index.md b/lib/site_template/about/index.md new file mode 100644 index 00000000..09ac935c --- /dev/null +++ b/lib/site_template/about/index.md @@ -0,0 +1,10 @@ +--- +layout: page +title: About +--- + +This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/) + +You can find the source code for the Jekyll new theme at: [github.com/jglovier/jekyll-new](https://github.com/jglovier/jekyll-new) + +You can find the source code for Jekyll at [github.com/jekyll/jekyll](https://github.com/jekyll/jekyll) \ No newline at end of file From 240bbf4abba11acaf029e46efb31c3ac7a1ce309 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:10:25 -0500 Subject: [PATCH 14/35] Adds feed.xml file for generating an RSS feed --- lib/site_template/feed.xml | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 lib/site_template/feed.xml diff --git a/lib/site_template/feed.xml b/lib/site_template/feed.xml new file mode 100644 index 00000000..15b90dd6 --- /dev/null +++ b/lib/site_template/feed.xml @@ -0,0 +1,21 @@ +--- +layout: none +--- + + + + {{ site.name | xml_escape }} + {{ site.description | xml_escape }} + {{ site.url }} + + {% for post in site.posts limit:10 %} + + {{ post.title | xml_escape }} + {{ post.content | xml_escape }} + {{ post.date | date: "%a, %d %b %Y %H:%M:%S %z" }} + {{ site.url }}/{{ post.url }} + {{ site.url }}/{{ post.url }} + + {% endfor %} + + \ No newline at end of file From b3a2ea4e3e3c84b0bbc199df5383af0324ee4df9 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:12:42 -0500 Subject: [PATCH 15/35] =?UTF-8?q?Software=20with=20Personality=E2=84=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/site_template/_config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/site_template/_config.yml b/lib/site_template/_config.yml index 627c7898..a6d90379 100644 --- a/lib/site_template/_config.yml +++ b/lib/site_template/_config.yml @@ -1,3 +1,3 @@ -name: Your New Jekyll Site +name: Dat site title tho markdown: redcarpet highlighter: pygments From 287851ebb452535fbdf094097362f9339aaedbfa Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:13:43 -0500 Subject: [PATCH 16/35] Add site.description for use in site head document meta, and feed.xml template --- lib/site_template/_config.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/site_template/_config.yml b/lib/site_template/_config.yml index a6d90379..7142ebe0 100644 --- a/lib/site_template/_config.yml +++ b/lib/site_template/_config.yml @@ -1,3 +1,4 @@ name: Dat site title tho markdown: redcarpet highlighter: pygments +description: "Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." From e398c3b16c8ca118705bd3718dd700b92eb87e5b Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:14:01 -0500 Subject: [PATCH 17/35] Add site.url for use in head canonical meta and feed.xml template --- lib/site_template/_config.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/site_template/_config.yml b/lib/site_template/_config.yml index 7142ebe0..d9fdcfc0 100644 --- a/lib/site_template/_config.yml +++ b/lib/site_template/_config.yml @@ -2,3 +2,4 @@ name: Dat site title tho markdown: redcarpet highlighter: pygments description: "Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." +url: "http://yourdomain.com" From 8d05a54590d830c90fb8424a193891def6bb9766 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:14:20 -0500 Subject: [PATCH 18/35] demonstrate use of permalink settings --- lib/site_template/_config.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/site_template/_config.yml b/lib/site_template/_config.yml index d9fdcfc0..a783a97f 100644 --- a/lib/site_template/_config.yml +++ b/lib/site_template/_config.yml @@ -3,3 +3,4 @@ markdown: redcarpet highlighter: pygments description: "Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." url: "http://yourdomain.com" +permalink: /posts/:title From 3d464688fcd86f43afe21974863e591598570dcc Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:15:37 -0500 Subject: [PATCH 19/35] Remove to avoid confusion with site.title --- lib/site_template/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/site_template/index.html b/lib/site_template/index.html index c7268192..282b85c8 100644 --- a/lib/site_template/index.html +++ b/lib/site_template/index.html @@ -1,6 +1,5 @@ --- layout: default -title: Your New Jekyll Site ---
From e5cf3cbbc18c0b9c5c22a8d97f9ce578eeb37698 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:16:11 -0500 Subject: [PATCH 20/35] Slightly friendlier and personal date formatting; classes for dem styles, yo --- lib/site_template/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/site_template/index.html b/lib/site_template/index.html index 282b85c8..01b8272b 100644 --- a/lib/site_template/index.html +++ b/lib/site_template/index.html @@ -6,7 +6,7 @@ layout: default

Blog Posts

\ No newline at end of file From a11f01784ac2f808db1e6eea8bcf372018c2455a Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:16:23 -0500 Subject: [PATCH 21/35] Add link for RSS subscription --- lib/site_template/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/site_template/index.html b/lib/site_template/index.html index 01b8272b..46895032 100644 --- a/lib/site_template/index.html +++ b/lib/site_template/index.html @@ -9,4 +9,7 @@ layout: default
  • {{ post.date | date: "%b %-d, %Y" }} {{ post.title }}
    • {% endfor %} + +

    subscribe via RSS

    +
    \ No newline at end of file From 67733072374d400744f96a99730d4506c3ddee2a Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:16:47 -0500 Subject: [PATCH 22/35] Use class instead of id for CSS specificity :heart: --- lib/site_template/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/site_template/index.html b/lib/site_template/index.html index 46895032..d7db6e62 100644 --- a/lib/site_template/index.html +++ b/lib/site_template/index.html @@ -2,8 +2,9 @@ layout: default --- -

    Blog Posts

    +
    +
      {% for post in site.posts %}
    • {{ post.date | date: "%b %-d, %Y" }} {{ post.title }}
      • From 1e28eee0c7f0a68178f2aa21c9a0fb5f1d85f23e Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:17:05 -0500 Subject: [PATCH 23/35] Copy tweaks - brevity FTW --- lib/site_template/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/site_template/index.html b/lib/site_template/index.html index d7db6e62..a14fd240 100644 --- a/lib/site_template/index.html +++ b/lib/site_template/index.html @@ -2,9 +2,10 @@ layout: default --- -

      Blog Posts

      +

      Posts

      +
        {% for post in site.posts %}
      • {{ post.date | date: "%b %-d, %Y" }} {{ post.title }}
        • From cac15574e7cde939b9f37a0f9ab92b904664cfcf Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:21:15 -0500 Subject: [PATCH 24/35] Dem new styles tho - Uses new typography, including Helvetica light, larger font-sizes, and px values - Wider site width, larger margins, and overall more whitespace - Responsive down to mobile --- lib/site_template/css/main.css | 299 +++++++++++++++++++-------------- 1 file changed, 176 insertions(+), 123 deletions(-) diff --git a/lib/site_template/css/main.css b/lib/site_template/css/main.css index 2ce8e749..59356e3d 100755 --- a/lib/site_template/css/main.css +++ b/lib/site_template/css/main.css @@ -1,10 +1,6 @@ -/*****************************************************************************/ -/* -/* Common -/* -/*****************************************************************************/ +/* Base */ +/* ----------------------------------------------------------*/ -/* Global Reset */ * { margin: 0; padding: 0; @@ -14,154 +10,211 @@ html, body { height: 100%; } body { background-color: #FFF; - font: 13.34px Helvetica, Arial, sans-serif; - font-size: small; - text-align: center; + font-family: Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 300; + background-color: #fdfdfd; } -h1, h2, h3, h4, h5, h6 { - font-size: 100%; } +h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; } -h1 { margin-bottom: 1em; } -p { margin: 1em 0; } +a { color: #2a7ae2; text-decoration: none; } +a:hover { color: #000; text-decoration: underline; } +a:visited { color: #205caa; } -a { color: #00a; } -a:hover { color: #000; } -a:visited { color: #a0a; } +/* Utility */ -/*****************************************************************************/ -/* -/* Home -/* -/*****************************************************************************/ -.posts { - list-style-type: none; - margin-bottom: 2em; +.wrap:before, +.wrap:after { content:""; display:table; } +.wrap:after { clear: both; } +.wrap { + max-width: 750px; + padding: 0 30px; + margin: 0 auto; + zoom: 1; } -.posts li { - line-height: 1.75em; + +/* Layout Styles */ +/* ----------------------------------------------------------*/ + +/* Site header */ + +.site-header { + border-top: 5px solid #333; + border-bottom: 1px solid #e8e8e8; + min-height: 56px; + background-color: white; } -.posts span { - color: #aaa; - font-family: Monaco, "Courier New", monospace; - font-size: 80%; -} - -/*****************************************************************************/ -/* -/* Site -/* -/*****************************************************************************/ - -.site { - font-size: 115%; - text-align: justify; - width: 42em; - margin: 0 auto 2em; - padding-top: 3em; - line-height: 1.5em; -} - -@media screen and (max-width: 44em) { - .site { - width: 90%; - } -} - -.header a { - font-weight: bold; - text-decoration: none; -} - -.title { - display: inline-block; - margin-bottom: 2em; -} - -.title a { - color: #a00; -} - -.title a:hover { - color: #000; -} - -.header a.extra { - color: #aaa; - margin-left: 1em; -} - -.header a.extra:hover { - color: #000; -} - -.meta { - color: #aaa; -} - -.footer { - font-size: 80%; - color: #666; - border-top: 4px solid #eee; - margin-top: 2em; - overflow: hidden; -} - -.footer .contact { +.site-title, +.site-title:hover, +.site-title:visited { + display: block; + color: #333; + font-size: 26px; + letter-spacing: -1px; float: left; - margin-right: 3em; + line-height: 56px; } -.footer .contact a { - color: #8085C1; -} - -.footer .rss { - margin-top: 1.1em; - margin-right: -.2em; +.site-nav { float: right; + line-height: 56px; } -.footer .rss img { - border: 0; +.site-nav > a { + margin-left: 20px; + color: #727272; + letter-spacing: -.5px; } -/*****************************************************************************/ -/* -/* Posts -/* -/*****************************************************************************/ +/* Site footer */ -/* standard */ -.post pre { - border: 1px solid #ddd; - background-color: #eef; - padding: 0 .4em; +.site-footer { + border-top: 1px solid #e8e8e8; + padding: 30px 0; } -.post ul, .post ol { - margin-left: 1.35em; +.footer-heading { + font-size: 18px; + font-weight: 300; + letter-spacing: -.5px; + margin-bottom: 15px; } +.site-footer .column { float: left; margin-bottom: 15px; } + +.footer-col-1 { width: 250px; margin-right: 10px } +.footer-col-2 { width: 215px; margin-right: 10px } +.footer-col-3 { width: 265px; } + +.site-footer ul { list-style: none; } + +.site-footer li, +.site-footer p { + font-size: 15px; + letter-spacing: -.3px; + color: #828282; +} + + +/* Page Content styles */ +/* ----------------------------------------------------------*/ + +.page-content { + padding: 30px 0; + background-color: #fff; +} + + +/* Home styles */ +/* ----------------------------------------------------------*/ + +.home h1 { margin-bottom: 25px; } + +.posts { list-style-type: none; } + +.posts li { margin-bottom: 30px; } + +.posts .post-link { + font-size: 24px; + letter-spacing: -1px; + line-height: 1; +} + +.posts .post-date { + display: block; + font-size: 15px; + color: #818181; +} + + +/* Post styles */ +/* ----------------------------------------------------------*/ + +.post-header { margin: 10px 0 30px; } + +.post-header h1 { + font-size: 42px; + letter-spacing: -1.75px; + line-height: 1; + font-weight: 300; +} + +.post-header .meta { + font-size: 15px; + color: #818181; + margin-top: 5px; +} + +.post-content { margin: 0 0 30px; } + +.post-content > * { margin: 20px 0; } + + +.post-content h1, +.post-content h2, +.post-content h3, +.post-content h4, +.post-content h5, +.post-content h6 { + line-height: 1; + font-weight: 300; + margin: 40px 0 20px; +} + +.post-content h2 { + font-size: 32px; + letter-spacing: -1.25px; +} + +.post-content h3 { + font-size: 26px; + letter-spacing: -1px; +} + +.post-content h4 { + font-size: 20px; + letter-spacing: -1px; +} + +.post-content blockquote { + border-left: 4px solid #e8e8e8; + padding-left: 20px; + font-size: 18px; + opacity: .6; + letter-spacing: -1px; + font-style: italic; + margin: 30px 0; +} + +.post-content ul, +.post-content ol { padding-left: 20px; } + +.post pre, .post code { - border: 1px solid #ddd; + border: 1px solid #d5d5e9; background-color: #eef; - padding: 0 .2em; + padding: 8px 12px; + border-radius: 3px; + font-size: 15px; } -.post pre code { - border: none; -} +.post code { padding: 1px 5px; } + +.post ul, +.post ol { margin-left: 1.35em; } + +.post pre code { border: none; } /* terminal */ .post pre.terminal { border: 1px solid #000; background-color: #333; color: #FFF; + border-radius: 3px; } -.post pre.terminal code { - background-color: #333; -} +.post pre.terminal code { background-color: #333; } From bd80ce4c61d48afdd85538014340011ce4624853 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:24:30 -0500 Subject: [PATCH 25/35] Adds another placeholder post to illustrate post content styles --- ...s-post-demonstrates-post-content-styles.md | 88 +++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 lib/site_template/_posts/0000-00-00-this-post-demonstrates-post-content-styles.md diff --git a/lib/site_template/_posts/0000-00-00-this-post-demonstrates-post-content-styles.md b/lib/site_template/_posts/0000-00-00-this-post-demonstrates-post-content-styles.md new file mode 100644 index 00000000..6285f5d1 --- /dev/null +++ b/lib/site_template/_posts/0000-00-00-this-post-demonstrates-post-content-styles.md @@ -0,0 +1,88 @@ +--- +layout: post +title: "This post demonstrates post content styles" +categories: sample +author: "Bart Simpson" +meta: "Springfield" +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. + +## Some great heading (h2) + +Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. + +Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. + +## Another great heading (h2) + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. + +### Some great subheading (h3) + +Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. + +Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. + +### Some great subheading (h3) + +Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. + +> This quote will change your life. It will reveal the secrets of the universe, and all the wonders of humanity. Don't misuse it. + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. + +### Some great subheading (h3) + +Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. + +```html + + + + +

        Hello, World!

        + + +``` + + +In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. + +#### You might want a sub-subheading (h4) + +In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. + +In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. + +#### But it's probably overkill (h4) + +In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. + +### Oh hai, an unordered list!! + +In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. + +- First item, yo +- Second item, dawg +- Third item, what what?! +- Fourth item, fo sheezy my neezy + +### Oh hai, an ordered list!! + +In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. + +1. First item, yo +2. Second item, dawg +3. Third item, what what?! +4. Fourth item, fo sheezy my neezy + + + +## Headings are cool! (h2) + +Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. + +Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. + +Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. \ No newline at end of file From 28554fd3077d1072eb63bcc1edf3acdd18cb2bda Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Sat, 15 Feb 2014 23:27:34 -0500 Subject: [PATCH 26/35] For the love of perf, add syntax.css rules to main.css and call only one stylesheet --- lib/site_template/_includes/head.html | 3 -- lib/site_template/css/main.css | 64 +++++++++++++++++++++++++++ lib/site_template/css/syntax.css | 60 ------------------------- 3 files changed, 64 insertions(+), 63 deletions(-) delete mode 100644 lib/site_template/css/syntax.css diff --git a/lib/site_template/_includes/head.html b/lib/site_template/_includes/head.html index ef54e080..b3bed7b5 100644 --- a/lib/site_template/_includes/head.html +++ b/lib/site_template/_includes/head.html @@ -6,9 +6,6 @@ - - - diff --git a/lib/site_template/css/main.css b/lib/site_template/css/main.css index 59356e3d..0d0972f5 100755 --- a/lib/site_template/css/main.css +++ b/lib/site_template/css/main.css @@ -218,3 +218,67 @@ a:visited { color: #205caa; } } .post pre.terminal code { background-color: #333; } + +/* Syntax highlighting styles */ +/* ----------------------------------------------------------*/ + +.highlight { background: #ffffff; } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { font-weight: bold } /* Keyword */ +.highlight .o { font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { font-weight: bold } /* Keyword.Constant */ +.highlight .kd { font-weight: bold } /* Keyword.Declaration */ +.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #d14 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #d14 } /* Literal.String.Backtick */ +.highlight .sc { color: #d14 } /* Literal.String.Char */ +.highlight .sd { color: #d14 } /* Literal.String.Doc */ +.highlight .s2 { color: #d14 } /* Literal.String.Double */ +.highlight .se { color: #d14 } /* Literal.String.Escape */ +.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ +.highlight .si { color: #d14 } /* Literal.String.Interpol */ +.highlight .sx { color: #d14 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d14 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/lib/site_template/css/syntax.css b/lib/site_template/css/syntax.css deleted file mode 100644 index 2774b764..00000000 --- a/lib/site_template/css/syntax.css +++ /dev/null @@ -1,60 +0,0 @@ -.highlight { background: #ffffff; } -.highlight .c { color: #999988; font-style: italic } /* Comment */ -.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ -.highlight .k { font-weight: bold } /* Keyword */ -.highlight .o { font-weight: bold } /* Operator */ -.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ -.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ -.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ -.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ -.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #aa0000 } /* Generic.Error */ -.highlight .gh { color: #999999 } /* Generic.Heading */ -.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ -.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ -.highlight .go { color: #888888 } /* Generic.Output */ -.highlight .gp { color: #555555 } /* Generic.Prompt */ -.highlight .gs { font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ -.highlight .gt { color: #aa0000 } /* Generic.Traceback */ -.highlight .kc { font-weight: bold } /* Keyword.Constant */ -.highlight .kd { font-weight: bold } /* Keyword.Declaration */ -.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ -.highlight .kr { font-weight: bold } /* Keyword.Reserved */ -.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ -.highlight .m { color: #009999 } /* Literal.Number */ -.highlight .s { color: #d14 } /* Literal.String */ -.highlight .na { color: #008080 } /* Name.Attribute */ -.highlight .nb { color: #0086B3 } /* Name.Builtin */ -.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ -.highlight .no { color: #008080 } /* Name.Constant */ -.highlight .ni { color: #800080 } /* Name.Entity */ -.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ -.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ -.highlight .nn { color: #555555 } /* Name.Namespace */ -.highlight .nt { color: #000080 } /* Name.Tag */ -.highlight .nv { color: #008080 } /* Name.Variable */ -.highlight .ow { font-weight: bold } /* Operator.Word */ -.highlight .w { color: #bbbbbb } /* Text.Whitespace */ -.highlight .mf { color: #009999 } /* Literal.Number.Float */ -.highlight .mh { color: #009999 } /* Literal.Number.Hex */ -.highlight .mi { color: #009999 } /* Literal.Number.Integer */ -.highlight .mo { color: #009999 } /* Literal.Number.Oct */ -.highlight .sb { color: #d14 } /* Literal.String.Backtick */ -.highlight .sc { color: #d14 } /* Literal.String.Char */ -.highlight .sd { color: #d14 } /* Literal.String.Doc */ -.highlight .s2 { color: #d14 } /* Literal.String.Double */ -.highlight .se { color: #d14 } /* Literal.String.Escape */ -.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ -.highlight .si { color: #d14 } /* Literal.String.Interpol */ -.highlight .sx { color: #d14 } /* Literal.String.Other */ -.highlight .sr { color: #009926 } /* Literal.String.Regex */ -.highlight .s1 { color: #d14 } /* Literal.String.Single */ -.highlight .ss { color: #990073 } /* Literal.String.Symbol */ -.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #008080 } /* Name.Variable.Class */ -.highlight .vg { color: #008080 } /* Name.Variable.Global */ -.highlight .vi { color: #008080 } /* Name.Variable.Instance */ -.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ From 3e6f2d8cef1e5636034886b2700c1ec54325185e Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 17 Feb 2014 12:42:15 -0500 Subject: [PATCH 27/35] :fire: permalink option so default date permalink method is left in tact --- lib/site_template/_config.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/site_template/_config.yml b/lib/site_template/_config.yml index a783a97f..d9fdcfc0 100644 --- a/lib/site_template/_config.yml +++ b/lib/site_template/_config.yml @@ -3,4 +3,3 @@ markdown: redcarpet highlighter: pygments description: "Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." url: "http://yourdomain.com" -permalink: /posts/:title From 893b664f348210fb0833972e0b1b7a10cf83b231 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 17 Feb 2014 16:36:21 -0500 Subject: [PATCH 28/35] Adds mobile styling for menu at sub 600px viewport widths --- lib/site_template/_includes/header.html | 7 +++- lib/site_template/css/main.css | 55 ++++++++++++++++++++++++- 2 files changed, 58 insertions(+), 4 deletions(-) diff --git a/lib/site_template/_includes/header.html b/lib/site_template/_includes/header.html index 4c4130a6..e0679dce 100644 --- a/lib/site_template/_includes/header.html +++ b/lib/site_template/_includes/header.html @@ -5,8 +5,11 @@ {{ site.name }}
      diff --git a/lib/site_template/css/main.css b/lib/site_template/css/main.css index 0d0972f5..ff15cb39 100755 --- a/lib/site_template/css/main.css +++ b/lib/site_template/css/main.css @@ -64,7 +64,9 @@ a:visited { color: #205caa; } line-height: 56px; } -.site-nav > a { +.site-nav .menu-icon { display: none; } + +.site-nav .page-link { margin-left: 20px; color: #727272; letter-spacing: -.5px; @@ -281,4 +283,53 @@ a:visited { color: #205caa; } .highlight .vc { color: #008080 } /* Name.Variable.Class */ .highlight .vg { color: #008080 } /* Name.Variable.Global */ .highlight .vi { color: #008080 } /* Name.Variable.Instance */ -.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ \ No newline at end of file +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ + + +/* media queries */ +/* ----------------------------------------------------------*/ + +@media screen and (max-width: 600px) { + + .wrap { padding: 0 12px; } + + .site-nav { + position: fixed; + z-index: 10; + top: 14px; right: 8px; + background-color: white; + border-radius: 5px; + border: 1px solid #e8e8e8; + cursor: pointer; + } + + .site-nav .menu-icon { + display: block; + font-size: 24px; + color: #505050; + float: right; + width: 36px; + text-align: center; + line-height: 36px; + } + + .site-nav .trigger { + clear: both; + margin-bottom: 5px; + display: none; + } + + .site-nav:hover .trigger, + .site-nav:active .trigger { + display: block; + } + + .site-nav .page-link { + display: block; + text-align: right; + line-height: 1.25; + padding: 5px 10px; + margin: 0; + } + +} \ No newline at end of file From 1c5ed75e7203df06fcff050b3ecd8b95f16d54a9 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 17 Feb 2014 16:52:48 -0500 Subject: [PATCH 29/35] Replace unicode menu icon with inline SVG MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - unicode menu icon doesn’t render pixel crisp (has some anti-aliasing), whereas SVG renders pixel optimized - using inline SVG (instead of a referenced, attached file, will save an http request --- lib/site_template/_includes/header.html | 12 +++++++++++- lib/site_template/css/main.css | 2 ++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/lib/site_template/_includes/header.html b/lib/site_template/_includes/header.html index e0679dce..a0bac0fa 100644 --- a/lib/site_template/_includes/header.html +++ b/lib/site_template/_includes/header.html @@ -5,7 +5,17 @@ {{ site.name }}