changed icons in footer: use fontawesom

change image for smaller screens

css/site.scss

@@ -95,8 +95,6 @@ a img {
   border: none;
 }
 
-p
-
 p img {
   &.left {
     float: left;
@@ -202,19 +200,22 @@ html {
 }
 
 footer {
+
   border-top: 1px solid $medium-grey;
   margin-top: 1em;
-  p {
+  div {
+    text-align: center;
     font-size: 0.8em;
     line-height: 1.1em;
     a {
+      color: $mouse-grey;
       &:visited {
         text-decoration: none;
         color: $mouse-grey;
       }
     }
     padding: 1em 0; }
- }
+} // footer
 
 article {
   margin-bottom: 1em;
@@ -244,7 +245,7 @@ article {
   }
   figure {
     margin: 0 0 1em; }
-}
+} // article
 
 .leftinfo {
   float: left;
@@ -355,15 +356,15 @@ div {
       margin-left: 10px;
     }
   }
-}
+} // div
 
 section#page img {
   float: left;
   margin-left: 1.5em;
   text-align: center; }
 
 #htmltagcloud {
-  width: auto;
+  width: 250px;
   font-family:"Lucida Sans","Lucida Grande","Lucida Sans Unicode",sans-serif;
   margin: 0;
   padding: 0em;
@@ -375,9 +376,9 @@ section#page img {
   font-size: 0.7em;
   a {
     &:link {
-      -webkit-border-radius: 20px;
-      -moz-border-radius: 20px;
-      border-radius: 20px;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      border-radius: 6px;
       border: 0 none;
       background-color: $cloud-black;
       color: #fff;
@@ -427,6 +428,19 @@ header.home {
 
 //width less then 1030px
 @media all and (max-width:64.375em) {
+  #htmltagcloud { width: 200px; }
+  header.home {
+    z-index: 90;
+    position: fixed;
+    left: 0;
+    margin-top: 0;
+    margin-left: 10px;
+    background: url("../images/mountainflake3.png") no-repeat;
+    background-size: 100% auto;
+    font-family: sans-serif;
+    width: 100px;
+  }
+  header h1 { a { height: 200px; } }
   div {
     &.information {
       width: 100%;
@@ -500,6 +514,7 @@ header.home {
 
 //width more then 1030px
 @media screen and (min-width:64.375em) {//1030px
+  header h1 { a { height: 100px; } }
   body {
     font-size:130%;
     max-width:95%;
@@ -516,7 +531,7 @@ header.home {
   }
 }
 //width more then 1200px
-@media screen and (min-width:75.000em) and (min-height:31.250em) {//1200x500px
+@media screen and (min-width:75.000em) {
   body {
     font-size:135%;
     max-width:75%;
@@ -533,7 +548,6 @@ header.home {
 
 header h1 {
   a {
-    height: 135px;
     display: block;
     line-height: 80px;
   }
@@ -606,10 +620,6 @@ dt a {
   background: $light-yellow none repeat scroll 0 0;
 }
 
-footer p a {
-  color: $mouse-grey;
-}
-
 section#page h1 {
   margin: 0 0 1em;
   font-weight: 500;

rakefile.rb

@@ -25,6 +25,11 @@
   sh "ghc --make #{input} -outputdir bin -o #{haky}"
 end
 
+desc 'guard site'
+task :guard do
+  sh "bundle exec guard"
+end
+
 task :clean_hakyll do
   begin
     sh "./#{haky} clean"

templates/default.html

@@ -11,6 +11,7 @@
     <![endif]-->
     <link rel="stylesheet" type="text/css" media="all" href="/css/site.css">
     <link rel="stylesheet" type="text/css" href="/css/syntax.css">
+    <link rel="stylesheet" type="text/css" href="/css/font-awesome.css">
     <link rel="alternate" type="application/rss+xml" title="coldflake blog" href="http://blog.coldflake.com/rss.xml">
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
     <link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic|Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
@@ -39,12 +40,28 @@ <h1><a href="/" title="back to post overview"></a></h1>
     <div class="container">
     $body$
     <footer>
-      <p><a href="/about.html" title="About"><span class="icon-user"></span> About</a> &middot;
-      <a href="http://twitter.com/marcontwit" title="My Twitter"><span class="icon-twitter"></span> Twitter</a> &middot;
-      <a href="https://github.com/marcmo" title="My Github profile"><span class="icon-github"></span> Github</a> &middot;
-      <a href="/rss.xml" title="Feed"><span class="icon-feed2"></span> RSS</a> &middot;
-      <a href="mailto:&#111;&#108;&#105;&#118;&#101;&#114;&#046;&#109;&#117;&#101;&#108;&#108;&#101;&#114;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;" title="Send me an email"><span class="icon-envelope-alt"></span> Email</a>
-      </p>
+      <div>
+        <a href="/about.html" title="About">
+          <i class="fa fa-user fa-lg" style="margin: 0 5px 0 0"></i>
+        </a>
+        &middot;
+        <a href="http://twitter.com/marcontwit" title="Follow me on Twitter">
+          <i class="fa fa-twitter fa-lg" style="margin: 0 5px 0 5px"></i>
+        </a>
+        &middot;
+        <a href="https://github.com/marcmo" title="My Github profile">
+          <i class="fa fa-github-square fa-lg" style="margin: 0 5px 0 5px"></i>
+        </a>
+        &middot;
+        <a href="/rss.xml" title="Feed">
+          <i class="fa fa-rss-square fa-lg" style="margin: 0 5px 0 5px"></i>
+        </a>
+        &middot;
+        <a
+          href="mailto:&#111;&#108;&#105;&#118;&#101;&#114;&#046;&#109;&#117;&#101;&#108;&#108;&#101;&#114;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;" title="drop me a line">
+          <i class="fa fa-envelope fa-lg" style="margin: 0 0 0 5px"></i>
+        </a>
+      </div>
     </footer>
     </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>