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.bio }}
-Follow @{{ site.owner.twitter }}
\ No newline at end of file +{% if site.owner.twitter %}{% endif %} +{% if site.owner.facebook %}{% endif %} +{% if site.owner.google_plus %}{% endif %} +{% if site.owner.linkedin %}{% endif %} +{% if site.owner.instagram %}{% endif %} +{% if site.owner.github %}{% endif %} +{% if site.owner.lastfm %}{% endif %} +{% if site.owner.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.