-
Notifications
You must be signed in to change notification settings - Fork 28
/
Copy pathindex.js
75 lines (64 loc) · 4.25 KB
/
index.js
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
<!DOCTYPE html>
riot.tag2('html', '<head> <title>tofuness - eex</title> <meta charset="utf-8"> <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"> </head> <body> <div id="about"> <div id="about-title"> <span id="eex">eex</span> is a collection of web eexperiments </div> <div id="about-description"> Built by <a href="https://github.com/tofuness">Dennis Jin</a> / <a href="https://dennisjin.com">dennisjin.com</a>.<span class="mobile-newline"></span> Open-sourced on <a href="https://github.com/tofuness/eex">Github</a>. </div> <div id="about-list"> <a class="about-item" href="life"> Canvas Life ↱ <span class="latest">latest</span> </a> <a class="about-item" href="satoshi"> Satoshi Visualizer ↱ </a> <a class="about-item" href="moire"> Moiré Pattern ↱ </a> <a class="about-item" href="springy"> Springy Letters ↱ </a> <a class="about-item" href="einstein"> Einstein Waves ↱ </a> <a class="about-item" href="vectorfield"> Vector Field ↱ </a> <a class="about-item" href="book"> Studies In a Dying Culture ↱ </a> <a class="about-item" href="sine"> Sine Wave and Circles ↱ </a> </div> </div> </body>', '* { box-sizing: border-box; } html { overflow-x: hidden; font-family: Arial, sans-serif; background: #111; } #about-description a, #about-description a:visited { color: #fff; text-decoration: none; box-shadow: 0 1px 0 #fff; } #about-description a:hover { color: #fff; box-shadow: 0 2px 0 #fff; } #eex { cursor: default; font-weight: 700; } #about { color: #fff; text-align: center; } #about-title { padding: 40px 20px 10px 20px; font-size: 18px; } #about-description { color: #999; font-size: 12px; line-height: 1.5; } #about-list { padding-top: 40px; width: 100%; } .about-item { padding: 0 20px; overflow: hidden; display: block; margin-bottom: 20px; width: 100%; white-space: nowrap; text-overflow: ellipsis; color: #666; font-size: 82px; text-decoration: none; text-align: center; transform: translateX(0); -webkit-transition: all 240ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 240ms cubic-bezier(0.165, 0.84, 0.44, 1); } .about-item:hover { color: #fff; transform: translateX(10px); } .latest { padding: 0 10px; background: #999; } @media (max-width : 730px) { .mobile-newline:after { content: \'\\a\'; white-space: pre; } }', '', function(opts) {
/*!
* FitText.js 1.0 jQuery free version
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
* Modified by Slawomir Kolodziej http://slawekk.info
*
* Date: Tue Aug 09 2011 10:45:54 GMT+0200 (CEST)
*/
(function(){
var css = function (el, prop) {
return window.getComputedStyle ? getComputedStyle(el).getPropertyValue(prop) : el.currentStyle[prop];
};
var addEvent = function (el, type, fn) {
if (el.addEventListener)
el.addEventListener(type, fn, false);
else
el.attachEvent('on'+type, fn);
};
var extend = function(obj,ext){
for(var key in ext)
if(ext.hasOwnProperty(key))
obj[key] = ext[key];
return obj;
};
window.fitText = function (el, kompressor, options) {
var settings = extend({
'minFontSize' : -1/0,
'maxFontSize' : 1/0
},options);
var fit = function (el) {
var compressor = kompressor || 1;
var resizer = function () {
el.style.fontSize = Math.max(Math.min(el.clientWidth / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)) + 'px';
};
// Call once to set.
resizer();
// Bind events
// If you have any js library which support Events, replace this part
// and remove addEvent function (or use original jQuery version)
addEvent(window, 'resize', resizer);
};
if (el.length)
for(var i=0; i<el.length; i++)
fit(el[i]);
else
fit(el);
// return set of elements
return el;
};
})();
window.onload = function() {
var items = document.querySelectorAll('.about-item');
for (var i = 0; i < items.length; i++) {
window.fitText(items.item(i), 1.5, {
maxFontSize: 82,
minFontSize: 11
});
}
}
});