featured images section, mixins cleanup

_config.yml

@@ -32,4 +32,11 @@ picture:
         media: "(min-width: 26.667em)"
         width: "480"
       source_default: 
-        width: "320"
+        width: "320"
+    featured:
+      ppi: [1, 1.5]
+      attr:
+        class: "featured-image"
+        itemprop: "image"
+      source_default: 
+        width: "190"

_src/_includes/featured.html

@@ -0,0 +1,13 @@
+
+<aside class="row featured">
+    {% for post in site.posts %}
+        {% if post.featured  %}
+        <article class="col2">
+            <a class="featured-link" href="{{ post.url }}" title="{{ post.title }}">
+                {% picture featured {{ post.image }} %}
+                <h1 class="featured-title">{{ post.title }}</h1>
+            </a>
+        </article>
+        {% endif %}
+    {% endfor %}
+</aside>

_src/_posts/2011-12-15-badged.markdown

@@ -5,6 +5,7 @@ title: Badged - iOS Style Notification Badges for WordPress
 image: Badged-Teaser-kremalicious@2x.png
 author: Matthias Kretschmann
 moddate: 2013-11-10 07:56:46+00:00
+featured: true
 
 date: 2011-12-15 07:56:46+00:00
 wordpress_id: 1468

_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.markdown

@@ -5,6 +5,7 @@ title: Using <kbd> for fun and profit
 image: kremalicious-kbdfun-teaser.png
 style: poststyle-2300.min.css
 author: Matthias Kretschmann
+featured: true
 
 date: 2012-07-16 14:36:58+00:00
 wordpress_id: 2300

_src/_posts/2012-08-07-projectpurple.markdown

@@ -4,6 +4,7 @@ layout: post
 title: Project Purple
 image: Teaser-Project-Purple.png
 author: Matthias Kretschmann
+featured: true
 
 date: 2012-08-07 13:15:44+00:00
 wordpress_id: 2350

_src/assets/less/app.less

@@ -1,15 +0,0 @@
-
-
-
-/* ============================================================== */
-/*  Old Article Fixes */
-/* ============================================================== */
-
-// text-shadow article
-// fluid examples
-#post-39 .entry-content > div,
-#post-39 .entry-content img {
-	max-width: 100%;
-	height: auto !important;
-	margin-left: 0 !important;
-}

_src/assets/less/buttons.less

@@ -15,7 +15,7 @@
 	background: rgba(255,255,255,.1);
 	border: 1px solid rgba(94,131,162,.3);
 	border-bottom-color: rgba(94,131,162,.4);
-	border-radius: @border-radius-base;
+	.border-radius;
 	.box-shadow(~"0 1px 3px rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.7)");
 	.transition;
 	
@@ -103,26 +103,6 @@ a.btn-primary:visited {
 	display: block;
 }
 
-// assign default button styles to all this stuff
-.inline-download,
-.download {
-	.btn;
-}
-
-a[rel*="tag"] {
-	.btn-tag;
-}
-
-// Old Download Button Overwrites
-.inline-download:link {
-	display: block;
-	text-align: center;
-
-	img {
-		display: none;
-	}
-}
-
 
 // Socialite.js
 // replicate social buttons, but dim everything

_src/assets/less/content.less

@@ -6,7 +6,9 @@
 		padding: (@line-height-computed * 4) 0;
 	}
 	
-	&:first-child { padding-top: 0;	}
+	&:first-child { 
+        padding-top: @line-height-computed;
+    }
 }
 
 // post title
@@ -25,6 +27,10 @@
 	h1, h2 {
 		.heading-band;
 	}
+    
+    p:last-child {
+        margin-bottom: 0;
+    }
 }
 
 
@@ -315,4 +321,18 @@ table tbody tr:nth-child(odd) th {
 table tbody tr:hover td,
 table tbody tr:hover th {
   background-color: #f5f5f5;
+}
+
+
+//
+// Old Article Fixes
+//
+
+// text-shadow article
+// fluid examples
+#post-39 .entry-content > div,
+#post-39 .entry-content img {
+	max-width: 100%;
+	height: auto !important;
+	margin-left: 0 !important;
 }

_src/assets/less/featured.less

@@ -0,0 +1,38 @@
+/////////////////////////////////////
+// Featured posts styles
+/////////////////////////////////////
+
+.featured {
+    .divider-bottom;
+    padding-bottom: @line-height-computed;
+    
+    @media @breakpoint2 { 
+        padding-bottom: @line-height-computed*3;
+    }
+}
+
+.featured-link {
+    display: block;
+    margin-bottom: @line-height-computed;
+    
+    @media @breakpoint2 { 
+        margin-bottom: 0;
+        
+        &:hover {
+            .scale(1.03);
+        }
+    }
+}
+
+.featured-title {
+    .h6;
+    font-size: .8em;
+    margin: 0;
+    .visuallyhidden;
+}
+
+.featured-image {
+    display: block;
+    
+    img { margin-bottom: 0; }
+}

_src/assets/less/grid.less

@@ -65,7 +65,7 @@
 	.col6 { margin-left: 0; }
 
 	.col1 { width: 13%; }
-	.col2 { width: 28%; }
+	.col2 { width: 30.6%; }
 	.col3 { width: 48%; }
 	.col4 { width: 65%; }
 	.col5 { width: 82%; }

_src/assets/less/kremalicious3.less

@@ -44,18 +44,16 @@
 @import 'code.less';
 @import 'syntax.less';
 
-// WP Content
+// Content
 @import 'content.less';
+@import 'featured.less';
 
 // Alerts
-@import 'alerts.less';
+//@import 'alerts.less';
 
 // Navigation
 @import 'navigation.less';
 
-// App
-@import 'app.less';
-
 // Animations
 @import 'animations.less';
 

_src/assets/less/media.less

@@ -7,11 +7,10 @@
 /////////////////////////////////////
 
 img,
-figure,
-.wp-caption {
+figure {
 	max-width: 100%;
 	height: auto;
-	border-radius: 5px;
+	.border-radius;
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
@@ -19,16 +18,7 @@ figure,
 
 img {
 	vertical-align: middle;
-	.box-shadow(0 1px 3px rgba(0,0,0,.3));
-}
-
-a.linkedImage img {
-	border: 2px solid @link-color;
-	.transition(border .2s ease-in-out);
-}
-
-.linkedImage:hover img {
-	border-color: @link-color-hover;
+	.box-shadow(0 1px 3px rgba(0,0,0,.2));
 }
 
 .teaser,
@@ -38,43 +28,26 @@ a.linkedImage img {
 }
 
 
-// WORDPRESS MEDIA 
-/////////////////////////////////////
+//
+// Media Positioning
+//
 
 img.alignleft,
-img.left, // some old articles markup
-.imgleft, // some old articles markup
-.wp-caption.alignleft,
 img.alignright,
-img.right, // some old articles markup
-.imgright, // some old articles markup
-.wp-caption.alignright,
-img.aligncenter,
-.wp-caption.aligncenter, {
+img.aligncenter {
 	float: none;
 	display: block;
 	margin: @line-height-computed auto;
 }
 
-.wp-caption {
-	img { margin-bottom: .5em; }
-	p { margin: 0; }
-}
-
-.wp-caption-text {
-	font-size: .9em;
-	line-height: @line-height-computed;
-	.dimmed
-}
-
 @media @breakpoint2 {
-	img.alignleft,
-	img.left, // some old articles markup
-	.imgleft, // some old articles markup
-	.wp-caption.alignleft { margin: 0 @line-height-computed @line-height-computed 0; float: left; }
+	img.alignleft { 
+        margin: 0 @line-height-computed @line-height-computed 0; 
+        float: left;
+    }
 	
-	img.alignright,
-	img.right, // some old articles markup
-	.imgright, // some old articles markup
-	.wp-caption.alignright { margin: 0 0 @line-height-computed @line-height-computed; float: right;	}
+	img.alignright { 
+        margin: 0 0 @line-height-computed @line-height-computed; 
+        float: right;
+    }
 }

_src/assets/less/mixins.less

@@ -10,12 +10,13 @@
 	background-repeat: no-repeat;
 	background-position: center top;
 	height: 60px;
+    
+    @media @highDPI {
+    	background-image: url('../img/logo@2x.png');
+    	background-size: 128px 120px;
+    }
 }
 
-.logo_2x {
-	background-image: url('../img/logo@2x.png');
-	.background-size(128px 120px);
-}
 
 // Dimmed Text
 /////////////////////////////////////
@@ -27,51 +28,44 @@
 
 // Dashed Dividers
 /////////////////////////////////////
+
+.divider-top,
+.divider-bottom {
+    position: relative;
+    
+    &:before {
+		content: "";
+		position: absolute;
+		left: 0;
+        height: 1px;
+    }
+}
+
 .divider-top {
-	position: relative;
 	border-top: 1px dashed #afc3cb;
 	padding-top: 1em;
+    
 	&:after {
 		content: "";
 		position: absolute;
 		left: 0;
+        height: 1px;
 		top: 0;
 		width: 100%;
-		height: 1px;
 		border-top: 1px dashed #fff;
 	}
 }
-// so we can reset only one item out of multiple
-.no-divider-top {
-	border-top: none;
-	padding-top: 0;
-	&::after {
-		display: none
-	}
-}
 
 .divider-bottom {
-	position: relative;
 	border-bottom: 1px dashed #afc3cb;
 	padding-bottom: 1em;
-	&::before {
-		content: "";
-		position: absolute;
-		left: 0;
+    
+	&:before {
 		bottom: -2px;
 		width: 100%;
-		height: 1px;
 		border-bottom: 1px dashed #fff;
 	}
 }
-// so we can reset only one item out of multiple
-.no-divider-bottom {
-	border-bottom: none;
-	padding-bottom: 0;
-	&::before {
-		display: none
-	}
-}
 
 
 // Heading band
@@ -91,6 +85,12 @@
 // CSS3 PROPERTIES
 /////////////////////////////////////
 
+// Border Radius
+.border-radius(@radius: @border-radius-base) {
+    border-radius: @radius;
+    background-clip: padding-box;
+}
+
 // Single side border-radius
 .border-top-radius(@radius) {
   border-top-right-radius: @radius;
@@ -118,79 +118,57 @@
 // Transitions
 .transition(@transition: all .2s ease-in-out 0s) {
   -webkit-transition: @transition;
-     -moz-transition: @transition;
-       -o-transition: @transition;
           transition: @transition;
 }
 .transition-delay(@transition-delay) {
   -webkit-transition-delay: @transition-delay;
-     -moz-transition-delay: @transition-delay;
-       -o-transition-delay: @transition-delay;
           transition-delay: @transition-delay;
 }
 .transition-duration(@transition-duration) {
   -webkit-transition-duration: @transition-duration;
-     -moz-transition-duration: @transition-duration;
-       -o-transition-duration: @transition-duration;
           transition-duration: @transition-duration;
 }
 .transition-property(@property) {
 	-webkit-transition-property: @property;
-	   -moz-transition-property: @property;
-	     -o-transition-property: @property;
 	        transition-property: @property;
 }
 
-// Transformations
-.rotate(@degrees) {
-  -webkit-transform: rotate(@degrees);
-     -moz-transform: rotate(@degrees);
-      -ms-transform: rotate(@degrees);
-       -o-transform: rotate(@degrees);
-          transform: rotate(@degrees);
-}
-.scale(@ratio) {
-  -webkit-transform: scale(@ratio);
-     -moz-transform: scale(@ratio);
-      -ms-transform: scale(@ratio);
-       -o-transform: scale(@ratio);
-          transform: scale(@ratio);
-}
-.translate(@x, @y) {
-  -webkit-transform: translate(@x, @y);
-     -moz-transform: translate(@x, @y);
-      -ms-transform: translate(@x, @y);
-       -o-transform: translate(@x, @y);
-          transform: translate(@x, @y);
-}
-.skew(@x, @y) {
-  -webkit-transform: skew(@x, @y);
-     -moz-transform: skew(@x, @y);
-      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
-       -o-transform: skew(@x, @y);
-          transform: skew(@x, @y);
-}
-.translate3d(@x, @y, @z) {
-  -webkit-transform: translate3d(@x, @y, @z);
-     -moz-transform: translate3d(@x, @y, @z);
-       -o-transform: translate3d(@x, @y, @z);
-          transform: translate3d(@x, @y, @z);
-}
-
 // Animations
 .animation(@animation) {
   -webkit-animation: @animation;
-     -moz-animation: @animation;
-       -o-animation: @animation;
           animation: @animation;
 }
 .animation-delay(@delay) {
   -webkit-animation-delay: @delay;
-     -moz-animation-delay: @delay;
-       -o-animation-delay: @delay;
           animation-delay: @delay;
 }
 
+// Transformations
+.rotate(@degrees) {
+  -webkit-transform: rotate(@degrees);
+      -ms-transform: rotate(@degrees);
+          transform: rotate(@degrees);
+}
+.scale(@ratio) {
+  -webkit-transform: scale(@ratio);
+      -ms-transform: scale(@ratio);
+          transform: scale(@ratio);
+}
+.translate(@x, @y) {
+  -webkit-transform: translate(@x, @y);
+      -ms-transform: translate(@x, @y);
+          transform: translate(@x, @y);
+}
+.skew(@x, @y) {
+  -webkit-transform: skew(@x, @y);
+      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
+          transform: skew(@x, @y);
+}
+.translate3d(@x, @y, @z) {
+  -webkit-transform: translate3d(@x, @y, @z);
+          transform: translate3d(@x, @y, @z);
+}
+
 // Backface visibility
 // Prevent browsers from flickering when using CSS 3D transforms.
 // Default value is `visible`, but can be changed to `hidden
@@ -208,14 +186,6 @@
           background-clip: @clip;
 }
 
-// Background sizing
-.background-size(@size) {
-  -webkit-background-size: @size;
-     -moz-background-size: @size;
-       -o-background-size: @size;
-          background-size: @size;
-}
-
 // Box sizing
 .box-sizing(@boxmodel) {
   -webkit-box-sizing: @boxmodel;
@@ -229,7 +199,6 @@
   -webkit-user-select: @select;
      -moz-user-select: @select;
       -ms-user-select: @select;
-       -o-user-select: @select;
           user-select: @select;
 }
 
@@ -255,7 +224,6 @@
   -webkit-hyphens: @mode;
      -moz-hyphens: @mode;
       -ms-hyphens: @mode;
-       -o-hyphens: @mode;
           hyphens: @mode;
 }
 
@@ -269,12 +237,10 @@
   // Creates two color stops, start and end, by specifying a color and position for each color stop.
   // Color stops are not available in IE9 and below.
   .horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
-    background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
     background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
     background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
     background-image:  linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
     background-repeat: repeat-x;
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
   }
 
   // Vertical gradient, from top to bottom
@@ -282,11 +248,9 @@
   // Creates two color stops, start and end, by specifying a color and position for each color stop.
   // Color stops are not available in IE9 and below.
   .vertical(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
-    background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
     background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
     background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
     background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
     background-repeat: repeat-x;
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
   }
 }

_src/assets/less/navigation.less

@@ -17,20 +17,6 @@
     li { display: inline-block; }
 }
 
-a.nav-main-link {
-	.btn-tag;
-	.h6;
-	color: @text-color-light;
-    padding: @line-height-computed/4 @line-height-computed/2;
-    display: block;
-    float: left;
-    border-radius: @border-radius-base;
-	
-	li:first-child & { margin-left: 0 }
-    
-    // active state
-    .current_page_item & { background: rgba(255,255,255,.7) }
-}
 
 // Pager
 /////////////////////////////////////

_src/assets/less/scaffolding.less

@@ -25,10 +25,6 @@ body {
 		// display toned down logo
 		// by default
 		.logo;
-		
-		@media @highDPI {
-			.logo_2x
-		}
 	}
 	
 	.banner-logo {
@@ -41,11 +37,7 @@ body {
 		width: 128px;
 		margin-left: auto;
 		margin-right: auto;
-	
-		@media @highDPI {
-			.logo_2x;
-		}
-		
+
 		// hide by default
 		opacity: 0;
 		// show smooooothly on hover

_src/assets/less/typography.less

@@ -143,33 +143,13 @@ blockquote {
 // Unordered and Ordered lists
 ul,
 ol {
-  margin-top: 0;
-  margin-bottom: @line-height-computed;
-}
-ul ul,
-ul ol,
-ol ol,
-ol ul {
-  margin-bottom: 0;
+    margin-top: 0;
+    margin-bottom: @line-height-computed;
+    list-style: none;
+    padding-left: 2em;
 }
 
-// List options
-.list-unstyled {
-  padding-left: 0;
-  list-style: none;
-}
-
-nav ul, nav ol {
-	.list-unstyled;
-}
-
-.entry-content ul,
-.entry-content ol {
-	list-style: none;
-	padding-left: 2em;
-}
-
-.entry-content li {
+ul li {
 	position: relative;
 	margin-bottom: .5em;
 	
@@ -191,30 +171,47 @@ nav ul, nav ol {
 	}
 }
 
-.entry-content ol li:before {
-	position: absolute;
-	left: -2em;
-	top: 0;
-}
-
-.entry-content ol {
+ol {
 	counter-reset: ol-counter;
+    
+    li {
+        position: relative;
+    }
+    li:before {
+    	position: absolute;
+    	left: -2em;
+    	top: 0;
+    	color: #fff;
+    	content: counter(ol-counter);
+    	counter-increment: ol-counter;
+    	font-style: italic;
+    	background: @text-color-dimmed;
+    	border-radius: 1.2em;
+    	width: 1.2em;
+    	display: block;
+    	height: 1.2em;
+    	text-align: center;
+    	line-height: 1.1em;
+    	top: .2em;
+    	.box-shadow(0 1px 0 rgba(255,255,255,.7));
+    }
 }
 
-.entry-content ol li:before {
-	color: #fff;
-	content: counter(ol-counter);
-	counter-increment: ol-counter;
-	font-style: italic;
-	background: @text-color-dimmed;
-	border-radius: 1.2em;
-	width: 1.2em;
-	display: block;
-	height: 1.2em;
-	text-align: center;
-	line-height: 1.1em;
-	top: .2em;
-	.box-shadow(0 1px 0 rgba(255,255,255,.7));
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin-bottom: 0;
+}
+
+// List options
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+nav ul, nav ol {
+	.list-unstyled;
 }
 
 

_src/assets/less/variables.less

@@ -23,7 +23,7 @@
 @font-size-small:         	ceil(@font-size-base * 0.8);
 @font-size-mini:          	ceil(@font-size-base * 0.7);
 
-@line-height-base:			1.5;	// 27/18
+@line-height-base:			1.45;
 @line-height-computed:    	floor(@font-size-base * @line-height-base);
 
 @headings-font-family:    	@font-family-serif;

_src/index.html

@@ -4,6 +4,10 @@ title: kremalicious
 description: 'Blog of designer & developer Matthias Kretschmann'
 ---
 
+{% if paginator.next_page == 2 %}
+    {% include featured.html %}
+{% endif %}
+
 <section role="main" id="main" class="row">
     
     {% for post in paginator.posts %}