-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
284 lines (183 loc) · 13.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<!DOCTYPE html>
<html lang="en" id="easy-reader_net" itemscope itemtype="http://schema.org/Blog" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta charset="utf-8"/>
<meta http-equiv="Content-Language" content="en"/>
<title>Holiday Greetings & Games - The Easy Designs Blog</title>
<meta name="robots" content="index,follow,archive" />
<meta name="geo.position" content="35 02 00 N,085 18 00 W" />
<meta name="geo.placename" content="Chattanooga" />
<meta name="geo.region" content="US-TN" />
<link rel="canonical_url" href="https://blog.easy-designs.net/archives/holiday-greetings-games/" />
<meta property="og:site_name" content="The Easy Designs Blog" />
<meta property="og:image" content="https://b.ed-cdn.com/img/facebook-icon.png?v=20111226" />
<meta property="og:locale" content="en_US" />
<meta property="fb:admins" content="aaronmgustafson" />
<meta name="twitter:card" value="summary"/>
<meta name="twitter:site" value="@EasyDesigns"/>
<meta name="twitter:domain" content="Easy Design’s Blog">
<meta name="twitter:creator" value="@AaronGustafson">
<meta property="og:type" content="article" />
<meta property="og:title" content="Holiday Greetings & Games" />
<meta property="description" content="This has been one crazy Fall work-wise, so I apologize for the scarcity of posts, but I do have a few holiday treats for you." />
<meta property="og:description" itemprop="description" content="This has been one crazy Fall work-wise, so I apologize for the scarcity of posts, but I do have a few holiday treats for you." />
<meta property="og:url" content="https://blog.easy-designs.net/archives/holiday-greetings-games/" />
<meta name="medium" content="blog" />
<meta name="MSSmartTagsPreventParsing" content="true"/>
<meta name="Copyright" content="(c) Copyright 2005–2017. All rights reserved unless otherwise indicated."/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta name="Rating" content="General"/>
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<meta name="viewport" content="width=device-width"/>
<link rel="home" href="../../index.html"/>
<link rel="copyright" href="/index.html#copyright"/>
<link rel="shortcut icon" type="image/ico" href="../../favicon.ico"/>
<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if (gt IE 8)|(IE 6)|(IEMobile)]><!-->
<link rel="stylesheet" href="/css/main.css">
<!--<![endif]-->
<!--[if (lte IE 8)&(gte IE 7)&(!IEMobile)]><link rel="stylesheet" href="/css/main-old-ie.css"><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" media="all" href="/css/ie8.css"/><![endif]-->
<!--[if IEMobile 7]><link rel="stylesheet" type="text/css" media="all" href="/css/ie7-mobile.css"/><![endif]-->
<!--[if (lte IE 7)&!(IEMobile)]><link rel="stylesheet" type="text/css" media="all" href="/css/ie7.css"/><![endif]-->
<!--[if (lte IE 6)&!(IEMobile)]><link rel="stylesheet" type="text/css" media="all" href="/css/ie6.css"/><![endif]-->
<link rel="alternate" type="application/rss+xml" title="All Posts" href="../../rss/posts.rss"/>
</head>
<body id="single-entry" class="hentry">
<header role="banner" id="page-header" class="jeff">
<h4 id="logo"><a href="/index.html" title="Return to the homepage">
<a href="/index.html">The Easy Designs Blog</a>
</a></h4>
</header>
<section id="content">
<div role="main" id="main">
<article role="article" class="focal">
<header>
<h1 itemprop="name" class="entry-title">Holiday Greetings & Games</h1>
<h3 class="meta byline author vcard">Posted by <a class="fn" href="/archives/by-author/aaron-gustafson/index.html">Aaron Gustafson</a> on
<time class="published updated" datetime="2005-12-19T11:20:14" pubdate="pudate">19 December 2005</time> |
<a rel="bookmark" href="./index.html">Permalink</a></h3>
</header>
<div class="entry-content">
<p>This has been one crazy Fall work-wise, so I apologize for the scarcity of posts, but I do have a few holiday treats for you.</p>
<p>From my day job at <a href="http://www.cronin-co.com">Cronin and Company</a>, we’ve got Cronin’s “<a href="http://www.croninholiday.com">Grab Bag of Goodness</a>.” As with most internal projects, this was a major rush job. I take no credit for the design (which was handed to me with no wiggle room), but when it comes to the <span class="caps">CSS</span> and <span class="caps">DOM</span> Scripting, that I’ll proudly take credit for. Use the code “9301″ to get in. Of particular note in this piece:</p>
<ul>
<li>Taking a page from Dan’s <a href="http://www.simplebits.com/notebook/2005/10/05/bplogos.html">Bulletproof Logos</a>, most all of the text is in (shock) images. Toss in the text as an <code>alt</code> attribute and with images and <span class="caps">CSS</span> off, you’re still golden. As this was a one-off, sIFR seemed like overkill.</li>
<li>Ooh, check out that marquee. Brings back memories, doesn’t it. Well, this one’s a little different. The markup is an <code>ul</code> and each item is a <code>li</code>. <span class="caps">CSS</span> makes it all <code>display: inline;</code> and then JavaScript keeps reducing the <code>margin-left</code> of the first <code>li</code> by 2px until the absolute value of it’s <code>margin-left</code> is greater than the <code>li</code>’s width. That <code>li</code> is then plucked from the front of the list and appended to the end. Though I am not a big fan of scrolling marquees, this was a pretty fun experiment. </li>
<li>Those animated icons you can click to make a donation are actually form controls. Originally, I had made them into custom submit <code>input</code>s, but Safari’s inability to customize certain form controls made me abandon that element in favor of <code>button</code>. It’s a great effect too (<abbr title="in my humble opinion"><span class="caps">IMHO</span></abbr><abbr>).</abbr></li>
</ul>
<p>Then there’s the <a href="http://www.easy-designs.net">Easy Designs</a> holiday card. I will spare the commentary on this one with the exception of giving major props to Dave for building the game in a day. I’m pretty darn proud of it, especially since we pretty much went from concept to execution in a matter of days (yeah, procrastination’s a bitch). If you’re interested, you can <a href="http://www.easy-designs.net/holiday/2005/email.html">see a rough approximation of the email that went out</a> (our first <a href="http://www.campaignmonitor.com">Campaign Monitor</a> mailing) or simply <a href="http://www.easy-designs.net/holiday/2005/">play the game</a>.</p>
</div>
<section id="bookmark">
<h2>Like it? Share it</h2>
<p class="twitter"><a href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fblog.easy-designs.net%2Farchives%2Fholiday-greetings-games%2F&source=tweetbutton&text=Holiday+Greetings+&+Games&url=https%3A%2F%2Fblog.easy-designs.net%2Farchives%2Fholiday-greetings-games%2F&via=EasyDesigns"><img src="/css/button-twitter-enabled.png" alt="Tweet"/></a></p>
<p class="facebook"><a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fblog.easy-designs.net%2Farchives%2Fholiday-greetings-games%2F"><img src="/css/button-facebook-enabled.png" alt="Like on Facebook"/></a></p>
<p class="linkedin"><a href="https://www.linkedin.com/cws/share?url=https%3A%2F%2Fblog.easy-designs.net%2Farchives%2Fholiday-greetings-games%2F&original_referer=https%3A%2F%2Fblog.easy-designs.net%2Farchives%2Fholiday-greetings-games%2F"><img src="/css/button-linkedin-enabled.png" alt="Share on LinkedIn"/></a></p>
<p class="google_plus"><a href="https://plus.google.com/share?url=https%3A%2F%2Fblog.easy-designs.net%2Farchives%2Fholiday-greetings-games%2F"><img src="/css/button-googleplus-enabled.png" alt="Share on Google Plus"/></a></p>
</section>
</article>
<section class="sidebar" role="complementary"><div class="inner">
<div class="vcard">
<figure>
<img class="photo" src="https://a.ed-cdn.com/global/aaron-gustafson.jpg" alt="" />
<b class="frame"></b>
</figure>
<h2 class="fn">Aaron Gustafson</h2>
<p>Aaron has been working on the web for nearly 15 years and, in that time, has cultivated a love of web standards and an in-depth knowledge of website strategy and architecture, interface design, and numerous languages (including XHTML, CSS, JavaScript, and PHP).</p>
</div>
<ul class="browse author">
<li><a href="/archives/by-author/aaron-gustafson/index.html">See all of Aaron Gustafson’s posts</a></li>
<li><a rel="feed" href="/rss/by-author/aaron-gustafson.rss">Subscribe to Aaron Gustafson’s posts</a></li>
</ul>
<h2>Filed under</h2>
<ul class="browse">
<li><a rel="tag" href="/archives/by-category/potpourri/index.html">Potpourri</a></li>
</ul>
<h2>Tagged</h2>
<ul class="browse inline">
<li><a rel="tag" href="/archives/by-tag/business/index.html">business</a></li>
<li><a rel="tag" href="/archives/by-tag/projects-and-products/index.html">projects & products</a></li>
</ul>
</div></section>
<section id="comments" class="focal">
<a id="comment-loader" data-include-on-tap data-replace="./comments/index.html#comments" data-include-size="large" href="./comments/index.html#comments">View comments on this entry</a>
</section>
<ul id="pagination">
<li class="prev"><a href="../karova-redesigns/index.html">Previous Entry: <em>Karova redesigns</em></a></li>
<li class="next"><a href="../got-ajax-skills-odeo-beckons/index.html">Next Entry: <em>Got AJAX Skills? Odeo beckons</em></a></li>
</ul>
</div>
<section id="extras">
<aside id="about" class="promo"><div class="inner">
<article id="about-us">
<h2>Who are these people?</h2>
<p>We are the people that power <a rel="me" href="https://easy-designs.net/">Easy Designs</a>, a content-focused web development consultancy. We live to improve the usability, accessibility, “findability,” and interoperability of the web through the use of web standards, progressive enhancement, and other best practices. This is our blog.</p>
</article>
<article id="more">
<h2>Like what you are reading?</h2>
<ul>
<li><a href="../../rss/all-posts/index.html">Subscribe</a></li>
<li><a href="../index.html">View all Entries</a></li>
</ul>
<h2>Read our minds, fork our code</h2>
<ul id="social-links">
<li class="twitter"><a href="https://twitter.com/EasyDesigns">Follow us on Twitter</a></li>
<li class="facebook"><a href="https://www.facebook.com/EasyDesignsLLC">Like us on Facebook</a></li>
<li class="google"><a href="https://plus.google.com/u/0/108855855192834389606/posts">Follow us on Google+</a></li>
<li class="github"><a href="https://github.com/easy-designs">Fork us on Github</a></li>
</ul>
</article>
</div></aside>
<aside id="elsewhere" class="promo" data-append="/inc/elsewhere" data-include-size="large"></aside>
</section>
</section>
<search role="search">
<form id="search-form"
class="form form--search"
action="https://duckduckgo.com"
method="get">
<p>
<input type="hidden" id="prepend" value="site:blog.easy-designs.net">
<input type="hidden" name="kaf" value="1">
<input type="hidden" name="kh" value="1">
<label for="search">Search for</label>
<input type="search" id="search" name="q" value=""Web Design in a" xylophone" />
<button type="submit" name="sa" value="Search">Search</button>
</p>
</form>
<script>
(function(){
var $form = document.getElementById('search-form'),
$prepend = document.getElementById('prepend'),
$search = document.getElementById('search');
$form.addEventListener('submit', function(e){
$search.value = $prepend.value + " " + $search.value;
}, false);
})();
</script>
</search>
<footer role="contentinfo" id="page-footer" class="source-org vcard copyright">
<p style="overflow:hidden;"><span id="copyright">© Copyright 2005–2014
<a class="org fn url" href="https://easy-designs.net/">Easy Designs LLC</a>. All rights reserved unless otherwise indicated.</span>
<!--a href="//easy-designs.net/about/standards/">Got Standards?</a-->
</p>
</footer>
<nav id="easy-network">
<ul>
<li class="easy-designs"><a href="https://easy-designs.net/">
<span aria-hidden="true" data-icon=""></span><span>Easy Designs</span></a></li>
<li class="r4g"><a href="https://retreats4geeks.com/">
<span aria-hidden="true" data-icon=""></span><span>Retreats 4 Geeks</span></a></li>
<li class="easy-readers"><a href="https://easy-readers.net/">
<span aria-hidden="true" data-icon=""></span><span>Easy Readers</span></a></li>
<li class="cha-device-lab"><a href="https://chadevicelab.org/">
<span aria-hidden="true" data-icon=""></span><span>CHA Device Lab</span></a></li>
<li class="code-and-creativity"><a href="https://codeandcreativity.com/">
<span aria-hidden="true" data-icon=""></span><span>Code & Creativity</span></a></li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery.js?20130823"><\/script>')</script>
<script src="/js/main.js?20130823"></script>
</body>
</html>