diff --git a/README.md b/README.md index 5a225d7f..aad62f2b 100644 --- a/README.md +++ b/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). diff --git a/_config.yml b/_config.yml index 287a33c1..7e49b3ff 100644 --- a/_config.yml +++ b/_config.yml @@ -10,7 +10,14 @@ owner: avatar: bio-photo.jpg bio: "Just another boring, time traveling, tattooed, designer from Buffalo New York." email: michael@mademistakes.com + # Social networking links are used in author-bio sidebar. Update and remove as you like. twitter: "mmistakes" + facebook: "michaelrose" + github: "mmistakes" + linkedin: "michaelrose" + instagram: "mmistakes" + lastfm: "anotherjpeg" + tumblr: "mademistakes" # For Google Authorship https://plus.google.com/authorship google_plus: "https://plus.google.com/118238196859537351707/posts" diff --git a/_includes/author-bio.html b/_includes/author-bio.html index 49d8756f..9ef2e8cc 100644 --- a/_includes/author-bio.html +++ b/_includes/author-bio.html @@ -1,4 +1,11 @@ {{ site.owner.name }} bio photo

{{ site.owner.name }}

{{ site.owner.bio }}

-

Follow @{{ site.owner.twitter }}

\ No newline at end of file +{% if site.owner.twitter %}

Twitter

{% endif %} +{% if site.owner.facebook %}

Facebook

{% endif %} +{% if site.owner.google_plus %}

Google+

{% endif %} +{% if site.owner.linkedin %}

LinkedIn

{% endif %} +{% if site.owner.instagram %}

Instagram

{% endif %} +{% if site.owner.github %}

Github

{% endif %} +{% if site.owner.lastfm %}

Last.fm

{% endif %} +{% if site.owner.tumblr %}

Tumblr

{% endif %} \ No newline at end of file diff --git a/assets/css/ie.css b/assets/css/ie.css index 7c0be407..c2876f9a 100644 --- a/assets/css/ie.css +++ b/assets/css/ie.css @@ -1423,9 +1423,6 @@ html { display: inline; margin-right: 25px; } -.top-navigation li:after { - content: "."; -} .top-navigation li a { decoration: none; border-bottom: 0 solid transparent; diff --git a/assets/css/main.css b/assets/css/main.css index 04b92613..2de16435 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1394,12 +1394,6 @@ svg:not(:root) { font-weight: normal; font-style: normal; } -@media screen and (-webkit-min-device-pixel-ratio: 0) { - @font-face { - font-family: 'icomoon'; - src: url('../fonts/icomoon.svg#icomoon') format('svg'); - } -} /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { font-family: 'icomoon'; @@ -1417,11 +1411,16 @@ Instead of a list of all class selectors, you can use the generic selector below, but it's slower: [class*="icon-"] { */ -.icon-twitter, -.icon-feed, .icon-instagram, .icon-facebook, +.icon-twitter, .icon-google-plus, +.icon-feed, +.icon-feed-2, +.icon-linkedin, +.icon-tumblr, +.icon-lastfm, +.icon-mail, .icon-github { font-family: 'icomoon'; speak: none; @@ -1432,24 +1431,39 @@ you can use the generic selector below, but it's slower: line-height: 1; -webkit-font-smoothing: antialiased; } -.icon-twitter:before { - content: "\e000"; -} -.icon-feed:before { - content: "\e003"; -} .icon-instagram:before { content: "\e004"; } .icon-facebook:before { - content: "\e001"; + content: "\e003"; +} +.icon-twitter:before { + content: "\e007"; } .icon-google-plus:before { + content: "\e00a"; +} +.icon-feed:before { + content: "\e00b"; +} +.icon-feed-2:before { + content: "\e00c"; +} +.icon-linkedin:before { + content: "\e001"; +} +.icon-tumblr:before { content: "\e002"; } -.icon-github:before { +.icon-lastfm:before { content: "\e005"; } +.icon-mail:before { + content: "\e006"; +} +.icon-github:before { + content: "\e000"; +} /* Standard form controls ================================== */ form { margin: 0 0 5px 0; @@ -1766,9 +1780,6 @@ html { display: inline; margin-right: 25px; } -.top-navigation li:after { - content: "."; -} .top-navigation li a { decoration: none; border-bottom: 0 solid transparent; diff --git a/assets/fonts/icomoon.dev.svg b/assets/fonts/icomoon.dev.svg index 6c85ebd1..d90938b3 100644 --- a/assets/fonts/icomoon.dev.svg +++ b/assets/fonts/icomoon.dev.svg @@ -9,49 +9,86 @@ This is a custom SVG font generated by IcoMoon. - - - - - - + + + + + + + + + + + - \ No newline at end of file diff --git a/assets/fonts/icomoon.eot b/assets/fonts/icomoon.eot index c967e618..3542c70d 100644 Binary files a/assets/fonts/icomoon.eot and b/assets/fonts/icomoon.eot differ diff --git a/assets/fonts/icomoon.svg b/assets/fonts/icomoon.svg index c36f5331..c5eabeb9 100644 --- a/assets/fonts/icomoon.svg +++ b/assets/fonts/icomoon.svg @@ -9,49 +9,86 @@ This is a custom SVG font generated by IcoMoon. - - - - - - + + + + + + + + + + + - \ No newline at end of file diff --git a/assets/fonts/icomoon.ttf b/assets/fonts/icomoon.ttf index 693beca0..d436e090 100644 Binary files a/assets/fonts/icomoon.ttf and b/assets/fonts/icomoon.ttf differ diff --git a/assets/fonts/icomoon.woff b/assets/fonts/icomoon.woff index a6a5f357..941db0cd 100644 Binary files a/assets/fonts/icomoon.woff and b/assets/fonts/icomoon.woff differ diff --git a/assets/less/icomoon.less b/assets/less/icomoon.less index db11e6dd..3b1f1184 100644 --- a/assets/less/icomoon.less +++ b/assets/less/icomoon.less @@ -9,13 +9,6 @@ font-style: normal; } -@media screen and (-webkit-min-device-pixel-ratio:0) { - @font-face { - font-family: 'icomoon'; - src: url('../fonts/icomoon.svg#icomoon') format('svg'); - } -} - /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { font-family: 'icomoon'; @@ -34,7 +27,7 @@ Instead of a list of all class selectors, you can use the generic selector below, but it's slower: [class*="icon-"] { */ -.icon-twitter, .icon-feed, .icon-instagram, .icon-facebook, .icon-google-plus, .icon-github { +.icon-instagram, .icon-facebook, .icon-twitter, .icon-google-plus, .icon-feed, .icon-feed-2, .icon-linkedin, .icon-tumblr, .icon-lastfm, .icon-mail, .icon-github { font-family: 'icomoon'; speak: none; font-style: normal; @@ -44,21 +37,36 @@ you can use the generic selector below, but it's slower: line-height: 1; -webkit-font-smoothing: antialiased; } -.icon-twitter:before { - content: "\e000"; -} -.icon-feed:before { - content: "\e003"; -} .icon-instagram:before { content: "\e004"; } .icon-facebook:before { - content: "\e001"; + content: "\e003"; +} +.icon-twitter:before { + content: "\e007"; } .icon-google-plus:before { + content: "\e00a"; +} +.icon-feed:before { + content: "\e00b"; +} +.icon-feed-2:before { + content: "\e00c"; +} +.icon-linkedin:before { + content: "\e001"; +} +.icon-tumblr:before { content: "\e002"; } -.icon-github:before { +.icon-lastfm:before { content: "\e005"; -} \ No newline at end of file +} +.icon-mail:before { + content: "\e006"; +} +.icon-github:before { + content: "\e000"; +} diff --git a/assets/less/page.less b/assets/less/page.less index 38ab7c00..59c49e7f 100644 --- a/assets/less/page.less +++ b/assets/less/page.less @@ -35,9 +35,6 @@ html { list-style-type: none; display: inline; margin-right: 25px; - &:after { - content: "."; - } a { decoration: none; border-bottom: 0 solid transparent; diff --git a/images/texture-feature-01.jpg b/images/texture-feature-01.jpg index 245302b6..b6efa623 100644 Binary files a/images/texture-feature-01.jpg and b/images/texture-feature-01.jpg differ diff --git a/images/texture-feature-02.jpg b/images/texture-feature-02.jpg index 171f2a19..a6243779 100644 Binary files a/images/texture-feature-02.jpg and b/images/texture-feature-02.jpg differ diff --git a/images/texture-feature-03.jpg b/images/texture-feature-03.jpg index a1d847e2..387107df 100644 Binary files a/images/texture-feature-03.jpg and b/images/texture-feature-03.jpg differ diff --git a/images/texture-feature-04.jpg b/images/texture-feature-04.jpg index 653bfc8e..4fe1b392 100644 Binary files a/images/texture-feature-04.jpg and b/images/texture-feature-04.jpg differ diff --git a/images/texture-feature-05.jpg b/images/texture-feature-05.jpg index e9306f0c..4689ef13 100644 Binary files a/images/texture-feature-05.jpg and b/images/texture-feature-05.jpg differ diff --git a/theme-setup.md b/theme-setup.md index 76089a27..df08ff1b 100644 --- a/theme-setup.md +++ b/theme-setup.md @@ -111,6 +111,33 @@ Not sure if this only effects Kramdown or if it's an issue with Markdown in gene {% 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/) \ No newline at end of file