This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

Added onload fade-in

  • Loading branch information...
1 parent 8c9bc26 commit 2b06fc72d8c776f54f250c88b553159467041d66 @jonikorpi committed Oct 2, 2011
Showing with 34 additions and 2 deletions.
  1. +3 −0 framelessgrid.com/assets/main.css
  2. +29 −0 framelessgrid.com/assets/main.less
  3. +2 −2 framelessgrid.com/index.html
@@ -46,6 +46,9 @@ a:active{color:#616161;border-bottom-color:#616161;}
img::selection{background:transparent;}
img::-moz-selection{background:transparent;}
body{-webkit-tap-highlight-color:rgba(232, 76, 56, 0.38);}
+h1,h2,h3,p,#nav li{opacity:1;visibility:visible;-webkit-transition:opacity 0.382s ease-in-out;-moz-transition:opacity 0.382s ease-in-out;transition:opacity 0.382s ease-in-out;}
+.wf-loading h1,.wf-loading h2,.wf-loading h3,.wf-loading p,.wf-loading #nav li{opacity:0;}
+.ie.wf-loading h1,.ie.wf-loading h2,.ie.wf-loading h3,.ie.wf-loading p,.ie.wf-loading #nav li{visibility:hidden;}
#masthead,#introduction,article section,#colophon{padding:0 1.0588235294117647em;margin:0 auto;max-width:32.470588235294116em;}
#masthead{padding-top:1.411764705882353em;text-align:center;}
#nav{padding:1.411764705882353em 0 0;height:2.823529411764706em;width:15.529411764705882em;margin:0 auto;}
@@ -303,6 +303,35 @@ body {
}
+/*
+ Fade-in
+*/
+
+h1, h2, h3, p, #nav li {
+ opacity: 1;
+ visibility: visible;
+ -webkit-transition: opacity 0.382s ease-in-out;
+ -moz-transition: opacity 0.382s ease-in-out;
+ transition: opacity 0.382s ease-in-out;
+}
+
+.wf-loading h1,
+.wf-loading h2,
+.wf-loading h3,
+.wf-loading p,
+.wf-loading #nav li {
+ opacity: 0;
+}
+
+.ie.wf-loading h1,
+.ie.wf-loading h2,
+.ie.wf-loading h3,
+.ie.wf-loading p,
+.ie.wf-loading #nav li {
+ visibility: hidden;
+}
+
+
/*
Common styles
*/
@@ -8,11 +8,11 @@
<title>Frameless</title>
+ <script>try{Typekit.load();}catch(e){};TypekitConfig={kitId:"zbh6eqe",scriptTimeout:4000},function(){var a=document.getElementsByTagName("html")[0];a.className+=" wf-loading";var b=setTimeout(function(){a.className=a.className.replace(/(\s|^)wf-loading(\s|$)/g,""),a.className+=" wf-inactive"},TypekitConfig.scriptTimeout),c=document.createElement("script");c.src="//use.typekit.com/"+TypekitConfig.kitId+".js",c.type="text/javascript",c.async="true",c.onload=c.onreadystatechange=function(){var a=this.readyState;if(!a||a=="complete"||a=="loaded"){clearTimeout(b);try{Typekit.load(TypekitConfig)}catch(c){}}};var d=document.getElementsByTagName("script")[0];d.parentNode.insertBefore(c,d)}()</script>
+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="assets/main.css"/>
- <script type="text/javascript" src="http://use.typekit.com/zbh6eqe.js"></script>
- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

0 comments on commit 2b06fc7

Please sign in to comment.