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;