Document variables.less color and font customization

README.md

@@ -95,7 +95,7 @@ There are two main content layouts: `post.html` (for posts) and `page.html` (for
 
 #### Feature Images
 
-A good rule of thumb is to keep feature images nice and wide so you don't push the body text too far down. An image cropped around around 1024 x 512 pixels will keep file size down with an acceptable resolution for most devices. On my personal site I use [Picturefill](https://github.com/scottjehl/picturefill) to serve the same image responsively in four different flavors (small, medium, large, and extra large). In the interest of keeping things simple with this theme I left that script out, but you can certainly [add it back in](https://github.com/mmistakes/made-mistakes#articles-and-pages) or give [Adaptive Images](http://adaptive-images.com/) a try.
+A good rule of thumb is to keep feature images nice and wide so you don't push the body text too far down. An image cropped around around 1024 x 256 pixels will keep file size down with an acceptable resolution for most devices. If you want to serve these images responsively I'd suggest looking at [Picturefill](https://github.com/scottjehl/picturefill) or [Adaptive Images](http://adaptive-images.com/).
 
 The two layouts make the assumption that the feature images live in the *images* folder. To add a feature image to a post or page just include the filename in the front matter like so. 
 
@@ -151,6 +151,32 @@ Not sure if this only effects Kramdown or if it's an issue with Markdown in gene
 
 Twitter cards make it possible to attach images and post summaries to Tweets that link to your content. Summary Card meta tags have been added to `head.html` to support this, you just need to [validate and apply your domain](https://dev.twitter.com/docs/cards) to turn it on.
 
+## Further Customization
+
+To make things easier I use LESS to build Minimal Mistakes' stylesheets. If you want to make some minor cosmetic alterations, take a look at `variables.less` in `assets/less/`. Changing some of the following variables can help make the theme your own. Just compile `main.less` and `ie.less` using your preprocessor of choice and off you go -- I like [CodeKit](http://incident57.com/codekit/) and [Prepros](http://alphapixels.com/prepros/).
+
+``` css
+// TYPOGRAPHY ================================================
+@basefont: 'PT Serif', serif;
+@baseheadingfont: 'PT Sans Narrow', sans-serif;
+@codefont: Monaco, Courier New, monospace;
+
+// COLOR ====================================================
+@bodycolor      : #ebebeb;
+@textcolor      : #333332;
+@basecolor      : #343434;    
+@compcolor      : spin(@basecolor, 180); 
+@bordercolor    : @basecolor;
+@white          : #fff;
+@black          : #000;
+@accentcolor    : @black;
+/* Links ================================================= */
+@linkcolor          : #343434;
+@linkcolorhover     : darken(@linkcolor, 10);
+@linkcolorvisited   : lighten(@linkcolorhover, 20);
+@linkcolorfocus     : darken(@linkcolorvisited, 10);
+```
+
 ## Questions?
 
 Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter [@mmistakes](http://twitter.com/mmistakes) or [file a GitHub Issue](https://github.com/mmistakes/minimal-mistakes/issues/new).

_config.yml

@@ -2,7 +2,7 @@ title:            Minimal Mistakes
 tagline:          Jekyll Theme
 description:      A responsive Jekyll theme with editorial design tendencies.
 #Comment out url when working locally to resolve base urls correctly
-#url:              http://mmistakes.github.io/minimal-mistakes
+url:              http://mmistakes.github.io/minimal-mistakes
 
 # Owner/author information
 owner:

theme-setup.md

@@ -111,6 +111,33 @@ Not sure if this only effects Kramdown or if it's an issue with Markdown in gene
 <iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>
 {% endhighlight %}
 
+## Further Customization
+
+To make things easier I use LESS to build Minimal Mistakes' stylesheets. If you want to make some minor cosmetic alterations, take a look at `variables.less` in `assets/less/`. Changing some of the following variables can help make the theme your own. Just compile `main.less` and `ie.less` using your preprocessor of choice and off you go --- I like [CodeKit](http://incident57.com/codekit/) and [Prepros](http://alphapixels.com/prepros/).
+
+{% highlight css %}
+// TYPOGRAPHY ================================================
+@basefont: 'PT Serif', serif;
+@baseheadingfont: 'PT Sans Narrow', sans-serif;
+@codefont: Monaco, Courier New, monospace;
+
+// COLOR ====================================================
+@bodycolor      : #ebebeb;
+@textcolor      : #333332;
+@basecolor      : #343434;    
+@compcolor      : spin(@basecolor, 180); 
+@bordercolor    : @basecolor;
+@white          : #fff;
+@black          : #000;
+@accentcolor    : @black;
+/* Links ================================================= */
+@linkcolor          : #343434;
+@linkcolorhover     : darken(@linkcolor, 10);
+@linkcolorvisited   : lighten(@linkcolorhover, 20);
+@linkcolorfocus     : darken(@linkcolorvisited, 10);
+{% endhighlight %}
+
+
 [^1]: Used to generate absolute urls in *sitemap.xml*, *feed.xml*, and for canonical urls in *head.html*. Don't include a trailing `\` in your base url ie: http://mademistakes.com. When developing locally remove or comment out this line so local css, js, and images are used.
 
 [^2]: Feature images supplied by [Love Textures](http://www.lovetextures.com/)