From 47c05887f5a66d7687982aec12b0e6279ca04091 Mon Sep 17 00:00:00 2001 From: Tyler Hallada Date: Sun, 13 Jul 2014 19:18:26 -0400 Subject: [PATCH] Style the blog --- _config.yml | 2 +- _layouts/default.html | 73 +++++++------ _layouts/post.html | 19 +++- blog/index.html | 32 ++++-- css/main.css | 235 ++++++++++++++++-------------------------- index.html | 2 +- 6 files changed, 164 insertions(+), 199 deletions(-) diff --git a/_config.yml b/_config.yml index 85daa77..af4c1b6 100644 --- a/_config.yml +++ b/_config.yml @@ -1,3 +1,3 @@ -name: Your New Jekyll Site +name: Tyler Hallada - Blog markdown: redcarpet pygments: true diff --git a/_layouts/default.html b/_layouts/default.html index 3c0837f..a993eac 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,44 +1,43 @@ - - - - - {{ page.title }} - + + + + + {{ page.title }} + - - + + + + - - + + - - + + -
-
-

{{ site.name }}

- home -
- - {{ content }} - -
-
-

- Tyler Hallada
- Programmer and writer
- tyler@hallada.net -

-
-
-

- github.com/thallada
- twitter.com/tyhallada
-

-
-
+ + + + + +
+
+

{{ site.name }}

+ home +
+ {{ content }} +
+
+

+ tyler@hallada.net +

- - +
+
+ diff --git a/_layouts/post.html b/_layouts/post.html index 04e3586..b05c365 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -1,9 +1,18 @@ --- layout: default --- -

{{ page.title }}

-

{{ page.date | date_to_string }}

- -
-{{ content }} +
+
+
+

{{ page.title }}

 +
+
+ {{ page.date | date_to_string }} +
+
+
+
+ {{ content }} +
+
diff --git a/blog/index.html b/blog/index.html index d4c73f0..6db1eec 100644 --- a/blog/index.html +++ b/blog/index.html @@ -1,13 +1,27 @@ --- layout: default -title: Tyler Hallada +title: Tyler Hallada - Blog --- -
-

Blog Posts

-
    - {% for post in site.posts %} -
  • {{ post.date | date_to_string }} » {{ post.title }}
    • - {% endfor %} -
-
+{% for post in site.posts %} +
+
+
+

{{ post.title }}

 +
+
+ {{ post.date | date_to_string }} +
+
+
+
+ {{ post.excerpt }} +
+
+
+
+ Read More » +
+
+
+{% endfor %} diff --git a/css/main.css b/css/main.css index 51e0679..77939a5 100755 --- a/css/main.css +++ b/css/main.css @@ -12,31 +12,61 @@ box-sizing: border-box; } -/* Global Reset */ -/** {*/ - /*margin: 0;*/ - /*padding: 0;*/ -/*}*/ +html { + width: 100%; + height: 100%; +} -/*makes the page overflow, so commenting out for now*/ -/*html, body { height: 100%; }*/ +body { + font-family: 'Open Sans', Arial, sans-serif; + font-style: normal; + font-weight: 400; + color: #444; +} -/*body {*/ - /*background-color: #FFF;*/ - /*font: 13.34px Helvetica, Arial, sans-serif;*/ - /*font-size: small;*/ - /*text-align: center;*/ -/*}*/ +strong { + font-weight: 400; + color: FireBrick; +} -/*h1, h2, h3, h4, h5, h6 {*/ - /*font-size: 100%; }*/ +h2 { + font-weight: 300; +} -/*h1 { margin-bottom: 1em; }*/ -/*p { margin: 1em 0; }*/ +hr { + width: 75%; +} -/*a { color: #00a; }*/ -/*a:hover { color: #000; }*/ -/*a:visited { color: #a0a; }*/ +a { + color:FireBrick; + text-decoration: none; +} + +a:visited { + color:#855C85; +} + +a:hover { + color:FireBrick; + text-decoration: underline; +} + +canvas { + position: fixed; + top: 0; + left: 0; +} + +blockquote { + margin-left: 20px; + margin-right: 20px; + padding-left: 1rem; + border-left: solid 3px #aaa; +} + +blockquote p { + margin-bottom: 6px; +} /*****************************************************************************/ /* @@ -106,94 +136,59 @@ img { width: auto; max-width: 100%; height: auto; } /*****************************************************************************/ /* -/* Home -/* -/*****************************************************************************/ -.posts { - list-style-type: none; - margin-bottom: 2em; -} - -.posts li { - line-height: 1.75em; -} - -.posts span { - color: #aaa; - font-family: Monaco, "Courier New", monospace; - font-size: 80%; -} - -/*****************************************************************************/ -/* -/* Site +/* Blog /* /*****************************************************************************/ -.site { - font-size: 115%; - text-align: justify; - width: 42em; - margin: 3em auto 2em; - line-height: 1.5em; -} - -.header a { - font-weight: bold; - text-decoration: none; -} - -.title { +h1.title { display: inline-block; - margin-bottom: 2em; + padding-right: 10px; + font-size: 2rem; + font-weight: 200; } -.title a { - color: #a00; +div.header a { + color: FireBrick; } -.title a:hover { - color: #000; +span.timestamp { + font-size: 0.85rem; } -.header a.extra { - color: #aaa; - margin-left: 1em; +@media (min-width: 40rem) { + span.timestamp { + float: right; + font-size: 0.85rem; + } } -.header a.extra:hover { - color: #000; +.post-header { + padding-bottom: 10px; } -.meta { - color: #aaa; -} - -.footer { - font-size: 80%; - color: #666; - border-top: 4px solid #eee; - margin-top: 2em; - overflow: hidden; -} - -.footer .contact { - float: left; - margin-right: 3em; -} - -.footer .contact a { - color: #8085C1; -} - -.footer .rss { - margin-top: 1.1em; - margin-right: -.2em; +a.read-more { float: right; + font-size: 0.85rem; } -.footer .rss img { - border: 0; +h2.post-title { + margin-top: 0; + margin-bottom: 10px; +} + +@media (min-width: 40rem) { + p.contact-links { + float: right; + } +} + +.contact { + text-align: center; + padding-bottom: 10px; +} + +div.more-row { + padding-top: 5px; } /*****************************************************************************/ @@ -241,8 +236,6 @@ img { width: auto; max-width: 100%; height: auto; } /*****************************************************************************/ #home { - font-family: 'Open Sans', Arial, sans-serif; - color: #444; display: block; position: relative; padding-top: 1.5rem; @@ -261,65 +254,13 @@ img { width: auto; max-width: 100%; height: auto; } user-select: none; } -html { - width: 100%; - height: 100%; -} - -h1 { +h1.big-name { font-size: 2rem; font-weight: 200; margin-top: 0; text-align: center; } -strong { - font-weight: 400; - color: FireBrick; -} - -h2 { - font-size: .9rem; - line-height: 2.5; - color: gray; - font-weight: 400; -} - -hr { - width: 75%; -} - -a { - color:FireBrick; - text-decoration: none; -} - -a:visited { - color:#663366; -} - -a:hover { - color:FireBrick; - text-decoration: underline; -} - -canvas { - position: fixed; - top: 0; - left: 0; -} - -blockquote { - margin-left: 20px; - margin-right: 20px; - padding-left: 1rem; - border-left: solid 3px #aaa; -} - -blockquote p { - margin-bottom: 6px; -} - #front-quote , #front-quote, p { margin-top: 0; margin-bottom: 0; @@ -377,9 +318,11 @@ blockquote p { a.no-decoration { color: #444; } + a.no-decoration:visited { color: #444; } + a.no-decoration:hover { color: #444; text-decoration: none; diff --git a/index.html b/index.html index 580d073..9860683 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ title: Tyler Hallada
-

Tyler Hallada

+

Tyler Hallada