add logo

src/assets/icons/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="/mstile-70x70.png"/>
+      <square150x150logo src="/mstile-150x150.png"/>
+      <square310x310logo src="/mstile-310x310.png"/>
+      <wide310x150logo src="/mstile-310x150.png"/>
+      <TileColor>#3090de</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

src/jade/index.jade

@@ -8,13 +8,34 @@ html
     meta(charset='utf-8')
     meta(name='viewport', content='width=device-width, initial-scale=1')
     meta(name='apple-mobile-web-app-capable', content='yes')
+
+    link(rel='apple-touch-icon', sizes='57x57', href='icons/apple-touch-icon-57x57.png')
+    link(rel='apple-touch-icon', sizes='114x114', href='icons/apple-touch-icon-114x114.png')
+    link(rel='apple-touch-icon', sizes='72x72', href='icons/apple-touch-icon-72x72.png')
+    link(rel='apple-touch-icon', sizes='144x144', href='icons/apple-touch-icon-144x144.png')
+    link(rel='apple-touch-icon', sizes='60x60', href='icons/apple-touch-icon-60x60.png')
+    link(rel='apple-touch-icon', sizes='120x120', href='icons/apple-touch-icon-120x120.png')
+    link(rel='apple-touch-icon', sizes='76x76', href='icons/apple-touch-icon-76x76.png')
+    link(rel='apple-touch-icon', sizes='152x152', href='icons/apple-touch-icon-152x152.png')
+    link(rel='apple-touch-icon', sizes='180x180', href='icons/apple-touch-icon-180x180.png')
+    link(rel='icon', type='image/png', href='icons/favicon-192x192.png', sizes='192x192')
+    link(rel='icon', type='image/png', href='icons/favicon-160x160.png', sizes='160x160')
+    link(rel='icon', type='image/png', href='icons/favicon-96x96.png', sizes='96x96')
+    link(rel='icon', type='image/png', href='icons/favicon-16x16.png', sizes='16x16')
+    link(rel='icon', type='image/png', href='icons/favicon-32x32.png', sizes='32x32')
+    link(rel='shortcut icon', href='icons/favicon.ico')
+    link(rel='icon', href='icons/favicon.ico')
+    meta(name='msapplication-TileColor', content='#10558c')
+    meta(name='msapplication-TileImage', content='icons/mstile-144x144.png')
+
     script(src='//use.typekit.net/scb5xny.js')
     script.
       try{Typekit.load();}catch(e){};
 
   body
     .jumbo
-      div
+      #logo
+      .jumbo__container
         h1 <a target="_blank" href="https://slack.com/">Slack</a>-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja ammattilaisille.
 
     section

src/styles/style.styl

@@ -31,7 +31,7 @@ a
   background-size cover
   display table
 
-  div
+  .jumbo__container
     display table-cell
     vertical-align middle
     text-align center
@@ -39,7 +39,20 @@ a
     h1
       max-width 800px
       margin auto
-
+      @media screen and (max-width: 600px)
+        font-size 1.5em
+        margin-top 1em
+#logo
+  width 80px
+  height 80px
+  position absolute
+  top 1em
+  left 1em
+  background url('../images/logo.png')
+  background-size 100% 100%
+  @media screen and (max-width: 600px)
+    width 60px
+    height 60px
 section
   background #fff