Re-style

Author: eldh

SectionIndex.coffee

@@ -24,14 +24,14 @@ module.exports = React.createClass
 			ul { className: 'post-list'},
 				_.map @getSectionItems(), (item) =>
 					# console.log item
-					li key: item.url,
+					li {className: 'post-list__item', key: item.url},
 						h3 {className: 'post-list__heading'},
 							SectionLink
 								item: item
 							, item.title
 							if item.isDraft then span className: 'draft-text', ' Draft'
+						p {className: 'post-list__preview'},
+							item.preview
 						if item.date
 							MomentDisplay
 								datetime: item.date
-						p {className: 'post-list__preview'},
-							item.preview

scss/_vars.scss

@@ -19,7 +19,7 @@ $background-alt-color: 							#eee!default;
 
 // Font and spacing
 $base-font-size:										20px!default;
-$base-line-height:									27px!default;
+$base-line-height:									30px!default;
 $base-spacing-unit:									$base-line-height!default;
 $half-spacing-unit:									$base-spacing-unit / 2!default;
 $line-height-ratio:									$base-line-height / $base-font-size!default;
@@ -55,14 +55,15 @@ $light-tint:												97%!default;
 
 // UI element colors
 
-$action-color:											$red!default;
+$action-color:											lighten($dark, 10%)!default;
 $action-color-light:								lighten($action-color, 10%)!default;
 $action-color-dark:									darken($action-color, 10%)!default;
 
 $sidebar-color:											darken($light, 100 - $tint);
 $sidebar-font-color:								$dark;
 
-$link-color: darken($action-color, 20%);
+$link-color: $action-color;
+$link-color-active: lighten($action-color, 20%);
 
 // Borders
 $border-color:											mix($background-color, $font-color, 85%)!default;

scss/components/_links.scss

@@ -3,8 +3,7 @@ a {
 	color: $link-color;
 	text-decoration: none;
 	&:hover {
-		text-decoration: underline;
-		color: $link-color;
+		color: $link-color-active;
 	}
 	&,
 	&:focus,

scss/components/_nav.scss

@@ -63,7 +63,9 @@ $line-height: 3px;
 	top: $half-spacing-unit;
 	right: $half-spacing-unit;
 	z-index: 100;
-	background-color: $sidebar-color;
+	@include media-query($max-width) {
+		background-color: $sidebar-color;
+	}
 	&:before {
 		top: $base-spacing-unit - $line-height * 2;
 	}

scss/components/_post-list.scss

@@ -11,10 +11,14 @@
 }
 .post-list__heading {
 	margin: 0;
+	font-weight: $fat;
 }
-.post-list__preview {
+.post-list__item {
 	margin-bottom: $base-spacing-unit * 2;
 }
+.post-list__preview {
+	margin-bottom: 0;
+}
 .draft-text {
 	font-family: $small-font;
 	color: #c40000;

scss/components/_post.scss

@@ -11,12 +11,6 @@
 	img {
 		width: 100%;
 	}
-
-	> * {
-		@include media-query('palm') {
-			@include font-size(16px);
-		}
-	}
 }
 .header-image {
 	width: 100%;

scss/components/_type.scss

@@ -28,7 +28,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 h1, h2, h3 {
 	text-rendering: optimizeLegibility;
-	font-style: italic;
+	// font-style: italic;
 }
 h1 {
 	@include font-size($h1-size);
@@ -39,21 +39,36 @@ h1 {
 	// text-transform: uppercase;
 	// letter-spacing: 1px;
 	// margin-top: $base-spacing-unit;
+	@include media-query('palm') {
+		@include font-size($h2-size);
+	}
 }
 h2 {
 	@include font-size($h2-size);
 	font-weight: $fat;
+	@include media-query('palm') {
+		@include font-size($h3-size);
+	}
 }
 h3 {
 	@include font-size($h3-size);
+	@include media-query('palm') {
+		@include font-size($h4-size);
+	}
 }
 h4 {
 	@include font-size($h4-size);
+	@include media-query('palm') {
+		@include font-size($h5-size);
+	}
 }
 h5 {
 	@include font-size($h5-size);
 	text-transform: uppercase;
 	margin-bottom: 0;
+	@include media-query('palm') {
+		@include font-size($h6-size);
+	}
 }
 p {
 	margin-bottom: $base-spacing-unit;
@@ -144,7 +159,7 @@ time {
 	font-family: $small-font;
 	color: $quiet-font-color;
 	font-weight: $bold;
-	@include font-size($deci-size);
+	@include font-size($milli-size);
 }
 
 @mixin font-size-micro () {
@@ -166,3 +181,10 @@ time {
 	@include font-size($deci-size);
 	// letter-spacing: 1px;
 }
+
+
+p, code, blockquote, pre {
+	@include media-query('palm') {
+		@include font-size(18px);
+	}
+}