Permalink
Browse files

quick’n’dirty prototype

  • Loading branch information...
1 parent 7dec012 commit a6ee9956271d220fb2a8264bc92c2aa49e1ddab0 @kunstreich kunstreich committed May 20, 2010
View
@@ -0,0 +1,4 @@
+# Can ignore specific files
+.DS_Store
+.htaccess
+index.php
View
@@ -0,0 +1,27 @@
+<?php include 'inc/doctype.inc.php'; ?>
+
+ <title>Typekit Loader | Demo 1</title>
+ <style>
+ #spinner{position:fixed;top:20px;left:20px;height:44px;width:200px;background: url(spinners/typekit-spinner-1.gif) no-repeat 0 0; }
+ html.wf-active #spinner { background-position: -200px 0; }
+ html .container, html.wf-loading .container { display: block; opacity: .15; }
+ html.wf-active .container { display: block; opacity: 1; }
+ </style>
+
+ <?php include 'inc/ressources.inc.php'; ?>
+
+ <script>
+ WebFont.load({
+ typekit: {
+ id: 'yfi4tji'
+ },
+ active: function() {
+ $('#spinner').fadeOut(1200);
+ }
+ });
+ </script>
+</head>
+<body>
+ <div id="spinner"></div>
+
+ <?php include 'inc/content.inc.php'; ?>
View
@@ -0,0 +1,30 @@
+<?php include 'inc/doctype.inc.php'; ?>
+
+ <title>Typekit Loader | Demo 2</title>
+ <style>
+ #spinner{ z-index:100;position:fixed;bottom:0;right:0;height:25px;width:80px;background: url(spinners/typekit-spinner-2.gif) no-repeat 0 0; }
+ html.wf-active #spinner { background-position: -80px 0; }
+ html .container, html.wf-loading .container { display: block; opacity: .15; }
+ html.wf-active .container { display: block; opacity: 1; }
+ html.wf-active img.typekit-badge {display:none; }
+ </style>
+
+ <?php include 'inc/ressources.inc.php'; ?>
+
+ <script>
+ WebFont.load({
+ typekit: {
+ id: 'yfi4tji'
+ },
+ active: function() {
+ $('#spinner').fadeOut(1000);
+ $('img.typekit-badge').fadeIn(2500);
+ }
+ });
+ </script>
+</head>
+<body>
+ <div id="spinner"></div>
+
+ <?php include 'inc/typekit-badge.inc.php'; ?>
+ <?php include 'inc/content.inc.php'; ?>
View
@@ -0,0 +1,29 @@
+<?php include 'inc/doctype.inc.php'; ?>
+
+ <title>Typekit Loader | Demo 3</title>
+ <style>
+ #spinner{z-index:100;position:fixed;bottom:0;right:0;height:25px;width:80px;background: url(spinners/typekit-spinner-3.gif) no-repeat 0 0;}
+ html.wf-active #spinner { background-position: -80px 0; }
+ html .container, html.wf-loading .container { display: block; opacity: .15; }
+ html.wf-active .container { display: block; opacity: 1; }
+ </style>
+
+ <?php include 'inc/ressources.inc.php'; ?>
+
+ <script>
+ WebFont.load({
+ typekit: {
+ id: 'yfi4tji'
+ },
+ active: function() {
+ $('#spinner').fadeOut(1000);
+ $('img.typekit-badge').fadeIn(2500);
+ }
+ });
+ </script>
+</head>
+<body>
+ <div id="spinner"></div>
+
+ <?php include 'inc/typekit-badge.inc.php'; ?>
+ <?php include 'inc/content.inc.php'; ?>
View
@@ -0,0 +1,87 @@
+ <div class="container">
+ <h1 class="">
+ Quick’n’dirty and not yet unobstrusive…
+ </h1>
+ <div class="span-6">
+ <h2>
+ Demos
+ </h2>
+ <p>
+ Source files are Fireworks PNGs
+ </p>
+ <ul>
+ <li><a href="demo-1">Demo 1</a> &#x2192; <a href="src/typekit-spinner-1.png">src</a></li>
+ <li><a href="demo-2">Demo 2</a> &#x2192; <a href="src/typekit-spinner-2.png">src</a></li>
+ <li><a href="demo-3">Demo 3</a> &#x2192; <a href="src/typekit-spinner-3.png">src</a></li>
+ </ul>
+ </div>
+ <div class="span-6">
+ <h2>
+ Lorem Ipsum Dolor
+ </h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </div>
+ <div class="span-6">
+ <h2>
+ Lorem Ipsum Dolor
+ </h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </div>
+ <div class="span-6 last">
+ <h2>
+ Lorem Ipsum Dolor
+ </h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </div>
+ <div class="span-12">
+ <h3>
+ Lorem Ipsum Dolor
+ </h3>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </div>
+ <blockquote class="span-10 box last">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </blockquote>
+ <div class="span-6">
+ <h2>
+ Lorem Ipsum Dolor
+ </h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </div>
+ <div class="span-6">
+ <h2>
+ Lorem Ipsum Dolor
+ </h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </div>
+ <div class="span-6">
+ <h2>
+ Lorem Ipsum Dolor
+ </h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </div>
+ <div class="span-6 last">
+ <h2>
+ Lorem Ipsum Dolor
+ </h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </div>
+ </div>
+</body>
+</html>
View
@@ -0,0 +1,4 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
View
@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="screen.css" type="text/css" media="screen" charset="utf-8">
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
@@ -0,0 +1 @@
+<img width="80" height="25" src="typekit-badge.gif" class="typekit-badge" alt="Fonts by Typekit" title="Information about the fonts used on this site" style="position: fixed; z-index: 1; right: 0pt; bottom: 0pt; cursor: pointer; border: 0pt none; content: normal; display: inline; height: 25px; left: auto; margin: 0pt; orphans: 2; outline: medium none; padding: 0pt; page-break-after: auto; page-break-before: auto; page-break-inside: auto; table-layout: auto; text-indent: 0pt; top: auto; unicode-bidi: normal; vertical-align: baseline; visibility: visible; widows: 2; width: 80px;" id="typekit-badge-yfi4tji">
Oops, something went wrong.

0 comments on commit a6ee995

Please sign in to comment.