fix ie, fix mobile, update favicon, update readme

README.md

@@ -1,9 +1,9 @@
 # [Marksheet](http://marksheet.io): a free HTML and CSS tutorial
 
-[![Marksheet screenshot](https://raw.github.com/jgthms/marksheet/master/images/marksheet-free-guide-html-css.png)](http://marksheet.io)
+[![Marksheet screenshot](https://raw.github.com/jgthms/marksheet/master/images/marksheet-free-html-css-tutorial.png)](http://marksheet.io)
 
 # License
 
 The content of this project itself is licensed under the [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/).
 
-The underlying source code used to format and display that content is licensed under the [MIT license](http://opensource.org/licenses/mit-license.php).
+The underlying source code used to format and display that content is licensed under the [MIT license](http://opensource.org/licenses/mit-license.php).

_includes/head.html

@@ -10,6 +10,10 @@
   <meta property="og:site_name" content="MarkSheet">
   <meta property="og:image" content="http://marksheet.io/images/marksheet-facebook.png">
   <meta property="fb:app_id" content="470761896424893">
+  <link rel="icon" href="/favicon.ico">
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="/css/main.css">
+  <!--[if IE]>
+    <link rel="stylesheet" type="text/css" href="/css/ie.css" />
+  <![endif]-->
 </head>

_includes/header.html

@@ -1,6 +1,6 @@
 <header class="page-header">
   <div class="container">
-    <a class="logo" href="/index.html">
+    <a class="logo" href="http://marksheet.io">
       MarkSheet
     </a>
 

_posts/2015-03-06-html-structure.md

@@ -81,11 +81,11 @@ The `aside` element usually lives alongside the `main` and contains _additional_
 
 ### Section
 
-The `section` element allows to **group** 
+The `section` element allows to **group**
 
 Sections _themselves_ don't carry a specific meaning. It's more about the _relation between its child elements_ rather than its own meaning within the overall page.
 
-The [MarkSheet homepage](/index.html) displays 3 sections:
+The [MarkSheet homepage](http://marksheet.io) displays 3 sections:
 
 * the **heading** (logo, title, subtitle)
 * the **introduction** (_"Short"_, _"Simple"_, _"Free"_)

_sass/chapter.sass

@@ -45,6 +45,6 @@ html.route-chapter
     background: none
     box-shadow: none
     +desktop
-      padding: 60px
+      padding: 60px 60px 120px
   .page-footer
     display: none

_sass/components.sass

@@ -5,10 +5,14 @@
   position: fixed
   &:after
     +overlay
-    background: url("/images/pattern.png") repeat
+    background: rgba(black, .1)
     content: ""
     display: block
     mix-blend-mode: multiply
+  +from(700px)
+    &:after
+      background: url("/images/pattern.png") repeat
+      mix-blend-mode: multiply
 
 .page-body
   position: relative

_sass/elements.sass

@@ -196,8 +196,10 @@
   box-shadow: inset 0 1px 0 0 rgba(white, .3), 0 3px 5px rgba(black, .2)
   font-size: 20px
   padding: 20px 25px
+  strong
+    padding-bottom: 3px
   +desktop
-    border-radius: 7px
+    border-radius: 5px
     font-size: 24px
     padding: 25px 30px
     strong

_sass/functions.sass

@@ -55,20 +55,6 @@
   text-indent: -290486px
   width: $w
 
-=scrollbar($a, $b, $c: $background)
-  &::-webkit-scrollbar
-    background: $c
-    width: $a
-    +from($laptop)
-      width: $b
-  &::-webkit-scrollbar-thumb
-    background: $link
-
-$tablet: 768px
-$laptop: 992px
-$desktop: 1200px
-$widescreen: 1400px
-
 =from($device)
   @media screen and (min-width: $device)
     @content

css/ie.css

@@ -0,0 +1,3 @@
+.page-hero:after {
+  display: none;
+}