diff --git a/index.html b/index.html index 918471b..93a7d92 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ title: RubyGems Blog --- -
+
{% for post in site.posts limit:1 %} {% assign index = true %} {% assign content = post.content %} diff --git a/javascripts/application.js b/javascripts/application.js index 70a1a40..5b77d8e 100644 --- a/javascripts/application.js +++ b/javascripts/application.js @@ -7,4 +7,6 @@ $(function() { $('body > footer').addClass('stickbottom'); } + $('.other-posts').height($(document).height() - 780); + }); diff --git a/stylesheets/application.css b/stylesheets/application.css index 0217c23..ef3b46f 100644 --- a/stylesheets/application.css +++ b/stylesheets/application.css @@ -503,18 +503,21 @@ code { font-size: 90%; font-weight: 400; } -body > header, article, body > footer { +body > header, article, body > footer, .allcontent { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; margin: auto; - max-width: 1140px; + max-width: 1260px; padding: 0 2em; } +.allcontent { + position: relative; } + body > header { background: #b92731; - height: 115px; + height: 240px; max-width: 100%; overflow: auto; padding: 0; @@ -528,13 +531,13 @@ body > header { -moz-box-sizing: border-box; box-sizing: border-box; margin: auto; - max-width: 1140px; + max-width: 1260px; padding: 0 2em; } body > header nav > a { color: #eee; display: block; float: left; - margin-top: 1.5em; + margin-top: 81px; text-decoration: none; } body > header nav > a:hover, body > header nav > a:visited { color: #eee; } @@ -562,7 +565,8 @@ body > header { margin: -0.25em 0 0 4.65em; } } body > header .rubygems-actions { float: right; - margin-top: .25em; } + margin-top: 64px; + width: 280px; } @media (max-width: 650px) { body > header .rubygems-actions { float: left; } } @@ -587,7 +591,7 @@ body > header { font-weight: 600; padding: 0.2em 0.4em; } body > header .rubygems-actions form input[type="text"] { - width: 200px; } + width: 195px; } @media (max-width: 650px) { body > header .rubygems-actions form input[type="text"] { width: 140px; } } @@ -611,7 +615,7 @@ body > footer { -moz-box-sizing: border-box; box-sizing: border-box; margin: auto; - max-width: 1140px; + max-width: 560px; padding: 0 2em; } body > footer.stickbottom { position: absolute; @@ -631,10 +635,14 @@ body > footer { height: 55px; } article { + background: #f9f9f9; + border-radius: 3px; margin-bottom: 2.5em; - max-width: 600px; + max-width: 560px; padding: 1em 2em; - position: relative; } + position: relative; + position: relative; + top: -200px; } article h3, article h4, article h5, article h6 { border-top: 2px solid #999999; display: inline-block; @@ -648,7 +656,7 @@ article { font-size: 220%; font-weight: 900; line-height: 1em; - margin: 2em 0 0 0; + margin: 1em 0 0 0; text-transform: capitalize; } article hgroup .meta p { font-family: "ff-meta-serif-sc-web-pro", serif; @@ -691,7 +699,7 @@ article { font-size: 110%; font-weight: 600; margin: 0 auto 2.5em auto; - max-width: 1140px; + max-width: 1260px; padding: 0 2em; position: relative; -webkit-transition: 0.2s; @@ -702,36 +710,21 @@ article { .allposts:hover { left: -3px; } -.all-content { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: block; - margin: auto; - max-width: 1140px; - overflow: hidden; - padding: 0 2em; - position: relative; } - .all-content article:first-child { - float: left; - padding: 0; } - .other-posts { opacity: .4; overflow-y: scroll; position: absolute; top: 0px; - right: -10px; + right: 2em; bottom: 0px; -webkit-transition: all 0.15s ease-out 0; -moz-transition: all 0.15s ease-out 0; -ms-transition: all 0.15s ease-out 0; -o-transition: all 0.15s ease-out 0; transition: all 0.15s ease-out 0; - width: 35%; } + width: 280px; } .other-posts:hover { - opacity: 1; - right: 0; } + opacity: 1; } .other-posts > h2 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -741,7 +734,7 @@ article { font-weight: 900; line-height: 1em; margin: 2em 0 0 0; - max-width: 600px; + max-width: 560px; text-transform: capitalize; } .other-posts .content-index { -webkit-box-sizing: border-box; @@ -777,8 +770,10 @@ article { overflow: auto; text-decoration: none; } .other-posts .content-index li > a article { + background: none; margin-bottom: 0; - padding: 0; } + padding: 0; + position: static; } @media (max-width: 650px) { .other-posts .content-index li > a article { padding: 0; } } diff --git a/stylesheets/scss/_base-variables.scss b/stylesheets/scss/_base-variables.scss index c7c3395..91f71f3 100644 --- a/stylesheets/scss/_base-variables.scss +++ b/stylesheets/scss/_base-variables.scss @@ -1,5 +1,5 @@ -$max-article-width: 600px; -$max-width: 1140px; +$max-article-width: 560px; +$max-width: 1260px; $red: rgb(185, 39, 49); $red-dark: #300405; diff --git a/stylesheets/scss/_layout.scss b/stylesheets/scss/_layout.scss index 30e2c36..dc6d1f4 100644 --- a/stylesheets/scss/_layout.scss +++ b/stylesheets/scss/_layout.scss @@ -1,4 +1,4 @@ -body > header, article, body > footer { +body > header, article, body > footer, .allcontent { @include box-sizing(border-box); display: block; margin: auto; @@ -6,9 +6,13 @@ body > header, article, body > footer { padding: 0 2em; } +.allcontent { + position: relative; +} + body > header { background: $red; - height: 115px; + height: 240px; max-width: 100%; overflow: auto; padding: 0; @@ -30,7 +34,7 @@ body > header { color: #eee; display: block; float: left; - margin-top: 1.5em; + margin-top: 81px; text-decoration: none; &:hover, &:visited { @@ -68,7 +72,8 @@ body > header { .rubygems-actions { float: right; - margin-top: .25em; + margin-top: 64px; + width: 280px; @include mobile { float: left; @@ -103,7 +108,7 @@ body > header { padding: .2em .4em; &[type="text"] { - width: 200px; + width: 195px; @include mobile { width: 140px; @@ -134,7 +139,7 @@ body > footer { nav { @include box-sizing(border-box); margin: auto; - max-width: $max-width; + max-width: $max-article-width; padding: 0 2em; } diff --git a/stylesheets/scss/_post.scss b/stylesheets/scss/_post.scss index cf9c40c..c58ff73 100644 --- a/stylesheets/scss/_post.scss +++ b/stylesheets/scss/_post.scss @@ -1,8 +1,12 @@ article { + background: #f9f9f9; + border-radius: 3px; margin-bottom: 2.5em; max-width: $max-article-width; padding: 1em 2em; position: relative; + position: relative; + top: -200px; h3, h4, h5, h6 { border-top: 2px solid #999; @@ -20,7 +24,7 @@ article { font-size: 220%; font-weight: 900; line-height: 1em; - margin: 2em 0 0 0; + margin: 1em 0 0 0; text-transform: capitalize; } diff --git a/stylesheets/scss/_posts-index.scss b/stylesheets/scss/_posts-index.scss index 437d369..e64725e 100644 --- a/stylesheets/scss/_posts-index.scss +++ b/stylesheets/scss/_posts-index.scss @@ -1,28 +1,12 @@ -.all-content { - @include box-sizing(border-box); - display: block; - margin: auto; - max-width: $max-width; - overflow: hidden; - padding: 0 2em; - position: relative; - - article:first-child { - float: left; - padding: 0; - } -} - .other-posts { opacity: .4; overflow-y: scroll; - @include position(absolute, 0px -10px 0px 0); + @include position(absolute, 0px 2em 0px 0); @include transition; - width: 35%; + width: 280px; &:hover { opacity: 1; - right: 0; } > h2 { @@ -77,8 +61,10 @@ text-decoration: none; article { + background: none; margin-bottom: 0; padding: 0; + position: static; @include mobile { padding: 0;