Permalink
Browse files

Modified some header styles, fonts and icons

  • Loading branch information...
1 parent 392801b commit df9c0b4e0f47d566b24f320f2ffbfd83919b438e @phillipkregg committed Mar 28, 2013
View
@@ -11,6 +11,7 @@ gem 'rails', '3.2.9'
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
+ gem 'bourbon'
gem 'neat'
gem "font-awesome-rails"
gem 'selectivizr-rails'
View
@@ -62,6 +62,7 @@ GEM
bourbon (>= 2.1)
sass (>= 3.2)
pg (0.14.1)
+ pg (0.14.1-x86-mingw32)
polyglot (0.3.3)
rack (1.4.5)
rack-cache (1.2)
@@ -100,6 +101,7 @@ GEM
rack (~> 1.0)
tilt (~> 1.1, != 1.3.0)
sqlite3 (1.3.7)
+ sqlite3 (1.3.7-x86-mingw32)
thor (0.17.0)
tilt (1.3.6)
treetop (1.4.12)
@@ -112,8 +114,10 @@ GEM
PLATFORMS
ruby
+ x86-mingw32
DEPENDENCIES
+ bourbon
coffee-rails (~> 3.2.1)
font-awesome-rails
jquery-rails
@@ -1,3 +0,0 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
@@ -19,16 +19,15 @@
// include sass files
@import "sass/variables";
+@import "sass/fonts/fonts";
@import "sass/layout/layout";
+@import "sass/mixins/mixins";
@import "sass/navbar/navbar";
@import "sass/post/post";
@import "sass/boxes/two_column_box";
@import "sass/articles/article";
-// fonts
-@import url(http://fonts.googleapis.com/css?family=Titillium+Web);
-@import url(http://fonts.googleapis.com/css?family=PT+Sans+Caption);
-@import url(http://fonts.googleapis.com/css?family=Vollkorn);
+
@@ -14,6 +14,13 @@ article {
}
+ .author {}
+
+ .article_content {
+
+ }
+
+
}
@@ -1,7 +1,7 @@
.two_column_box {
.box_header_container {
- background: black;
+ background: $boxHeaderBg;
overflow: auto;
.old_client_header {
@@ -22,15 +22,15 @@
@include span-columns(8 of 8);
@include pad(5px);
text-align: center;
- background: $medium_blue;
+ @include linear-gradient($medium_blue, $dark_blue);
color: white;
}
.box_left_column {
-
+ line-height: 20px;
@include span-columns(6);
}
.box_right_column {
-
+ line-height: 20px;
}
@@ -0,0 +1,12 @@
+
+// Open Sans
+@import url(http://fonts.googleapis.com/css?family=Open+Sans);
+
+// Titillium
+@import url(http://fonts.googleapis.com/css?family=Titillium+Web);
+
+// PT Sans
+@import url(http://fonts.googleapis.com/css?family=PT+Sans+Caption);
+
+// Vollkorn
+@import url(http://fonts.googleapis.com/css?family=Vollkorn);
@@ -1,5 +1,7 @@
-
+* {
+ font-family: 'Open Sans', sans-serif;
+}
body {
background: url('wow_bg.png') $medium_blue no-repeat center top;
@@ -0,0 +1,7 @@
+
+// Border Radius
+@mixin border-radius($radius) {
+ -webkit-border-radius: $radius;
+ -moz-border-radius: $radius;
+ border-radius: $radius;
+}
@@ -1,19 +1,20 @@
.breadcrumb_nav {
- background: black;
- color: $sky_blue;
- padding: 5px;
+ background: $breadCrumbContainerBg;
+ @include pad(5px);
font-size: 14px;
+ font-weight: 900;
font-family: 'PT Sans Caption', sans-serif;
.breadcrumb_link {
- padding: 5px;
+ @include pad(10px);
a {
- color: $sky_blue;
+ color: $breadCrumbColor;
}
}
.breadcrumb_link_last {
- color: gray;
+ @include pad(10px);
+ color: $currentBreadCrumbColor;
}
}
@@ -3,6 +3,13 @@
#social_icons {
float: right;
margin-right: 5px;
+ position: relative;
+ top: 10px;
+ color: white;
+
+ i {
+ margin: 10px;
+ }
}
@@ -1,24 +1,30 @@
.comment_container {
- margin-top: 20px;
+ margin-top: 40px;
min-height: 200px;
@include pad(10px);
- font-family: 'Titillium Web', sans-serif;
background: #AEEEEE;
+
.user_container {
- background: #37FDFC;
+ border: 1px solid $medium_blue;
@include span-columns(2 of 8);
+ @include pad(5px);
+ @include border-radius(10px);
}
.comment_box {
- @include span-columns(6 of 8);
+ @include span-columns(6 of 8);
+ @include box-shadow(0 0 5px 2px hsla(0, 0%, 0%, 0.65));
+ @include border-radius(10px);
background: white;
.comment_header {
- background: black;
+ @include border-top-radius(10px);
+ @include linear-gradient($medium_blue, $dark_blue);
color: white;
}
.comment_body {
- @include pad(10px);
+ @include pad(20px);
+
}
@@ -1,4 +1,16 @@
-
+// Main colors
$sky_blue: #B8D7FE;
-$medium_blue: #334F7D;
+$medium_blue: #334F7D;
+$dark_blue: #16233E;
+
+/******************* Element colors ********************/
+
+// Breadcrumbs
+$breadCrumbContainerBg: transparent;
+$breadCrumbColor: $medium_blue;
+$currentBreadCrumbColor: black;
+
+// 2 Column Box
+$boxHeaderBg: black;
+$subHeaderBg: $medium_blue;
@@ -20,7 +20,7 @@
</div>
<h5 class="author">
- <span>by Stephen King</span><span>3/3/2013</span>
+ <span>by Stephen King</span> 3/3/2013
</h5>
<p class="article_content">
@@ -34,7 +34,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>
- <img src="http://placehold.it/350x120"/>
+ <img src="http://placehold.it/600x120"/>
</article>
@@ -104,7 +104,7 @@
</div>
<div class="comment_footer">
- Footer Text
+
</div>
</div>
@@ -8,6 +8,9 @@
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
+ <!--[if lt IE 9]>
+ <script src="html5shiv.js"></script>
+ <![endif]-->
<%= csrf_meta_tags %>
</head>
<body>
@@ -33,9 +36,8 @@
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<div id="social_icons">
- <img src="http://placehold.it/30x30"/>
- <img src="http://placehold.it/30x30"/>
- <img src="http://placehold.it/30x30"/>
+ <i class="icon-facebook icon-large icon-white"></i>
+ <i class="icon-twitter icon-large icon-white"></i>
</div>
</ul>
Oops, something went wrong.

0 comments on commit df9c0b4

Please sign in to comment.