-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (105 loc) · 6.53 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Testing FITYME</title>
<link href="https://fonts.googleapis.com/css?family=Gaegu" rel="stylesheet">
<link rel="stylesheet" href="test/test.css">
<style>
/*Theme - monokai*/
@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade{10%{transform:scale(1, 1)}35%{transform:scale(1, 1.7)}40%{transform:scale(1, 1.7)}50%{opacity:1}60%{transform:scale(1, 1)}100%{transform:scale(1, 1);opacity:0}}[data-language] code,[class^="lang"] code,pre [data-language],pre [class^="lang"]{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";animation:fade-in 50ms ease-in-out 2s forwards}[data-language] code.rainbow,[class^="lang"] code.rainbow,pre [data-language].rainbow,pre [class^="lang"].rainbow{animation:none;transition:opacity 50ms ease-in-out}[data-language] code.loading,[class^="lang"] code.loading,pre [data-language].loading,pre [class^="lang"].loading{animation:none}[data-language] code.rainbow-show,[class^="lang"] code.rainbow-show,pre [data-language].rainbow-show,pre [class^="lang"].rainbow-show{opacity:1}pre{position:relative}pre.loading .preloader div{animation-play-state:running}pre.loading .preloader div:nth-of-type(1){background:#0081f5;animation:fade 1.5s 300ms linear infinite}pre.loading .preloader div:nth-of-type(2){background:#5000f5;animation:fade 1.5s 438ms linear infinite}pre.loading .preloader div:nth-of-type(3){background:#9000f5;animation:fade 1.5s 577ms linear infinite}pre.loading .preloader div:nth-of-type(4){background:#f50419;animation:fade 1.5s 715ms linear infinite}pre.loading .preloader div:nth-of-type(5){background:#f57900;animation:fade 1.5s 853ms linear infinite}pre.loading .preloader div:nth-of-type(6){background:#f5e600;animation:fade 1.5s 992ms linear infinite}pre.loading .preloader div:nth-of-type(7){background:#00f50c;animation:fade 1.5s 1130ms linear infinite}pre .preloader{position:absolute;top:12px;left:10px}pre .preloader div{width:12px;height:12px;border-radius:4px;display:inline-block;margin-right:4px;opacity:0;animation-play-state:paused;animation-fill-mode:forwards}pre{background-color:#000;word-wrap:break-word;margin:0px;padding:10px;color:#fff;font-size:14px;margin-bottom:20px}pre,code{font-family:'Monaco', 'Menlo', courier, monospace}pre{background:#272822}pre .comment{color:#75715E}pre .constant{color:#AE81FF}pre .storage{color:#66D9EF;font-style:italic}pre .string,pre .comment.docstring{color:#E6DB74}pre .support.tag{color:#fff}pre .keyword{color:#F92672}pre .selector,pre .storage.modifier.extends{color:#F92672}pre .inherited-class{font-style:italic}pre .operator,pre .support.tag-name,pre .entity.tag{color:#F92672}pre .entity,pre .support.attribute,pre .entity.attribute{color:#A6E22E}pre .entity.name.type,pre .entity.name.struct{color:#fff}pre .support,pre *[data-language="c"] .function.call{color:#66D9EF}pre .css-property,pre .storage.function{font-style:italic}pre .variable.global,pre .variable.class,pre .variable.instance{color:#A6E22E}[data-language="html"] .support.operator,.lang-html .support.operator,.language-html .support.operator{color:#fff}[data-language="javascript"] .variable.super,.lang-javascript .variable.super,.language-javascript .variable.super{color:#66D9EF}[data-language="js"] .variable.super,.lang-js .variable.super,.language-js .variable.super{color:#66D9EF}
</style>
</head>
<body>
<h1>FITYME</h1>
<h2>or <strong>FAKE IT `TIL YOU MAKE IT</strong> with css</h2>
<div class="sample">
<h3>Products</h3>
<pre>
<code data-language="css">
.ft-products
background #eee url(
fityme(318, 198,
rect(100%, 100%, 0, 8, #ffffff),
rect(200, 120, center, 16, #ccc, 5, true),
rect(270, 16, center, 148, #eee),
rect(220, 16, center, 168, #eee)
)
);
</code>
</pre>
<ul class="ft-products ft-3 ft-sm-2 ft-xs-1"></ul>
</div>
<div class="sample">
<h3>Videos</h3>
<pre>
<code data-language="css">
.ft-videos
background #eee url(
fityme(300, 208,
rect(100%, 120, 8, 8, #ccc),
rect(100%, 30, 8, 138, #ccc),
rect(60%, 30, 8, bottom, #ccc)
)
);
</code>
</pre>
<ul class="ft-videos ft-single-row"></ul>
</div>
<div class="sample">
<h3>Posts</h3>
<pre>
<code data-language="css">
.ft-posts
background #eee url(
fityme(100%, 300,
rect(100%, 100%, 0, 8, #ffffff),
sqr(100, 16, 16, #ccc),
rect(20%, 16, 126, 24, #eee),
rect(15%, 16, 126, 72, #eee),
rect(70%, 16, 16, 140, #eee),
rect(80%, 16, 16, 180, #eee),
rect(50%, 16, 16, 216, #eee)
)
);
</code>
</pre>
<ul class="ft-posts"></ul>
</div>
<div class="sample">
<h3>Profiles</h3>
<pre>
<code data-language="css">
.ft-profile
background #eee url(
fityme(200, 200,
circle(30, 16, 16, #ccc),
rect(100, 8, 90, 30, #ccc),
rect(90, 8, 90, 50, #ccc)
)
);
</code>
</pre>
<ul class="ft-profile"></ul>
</div>
<div class="sample">
<h3>Toolbar</h3>
<pre>
<code data-language="css">
.ft-toolbar
background #eee url(
fityme(200, 200,
circle(30, 16, 16, #ccc),
rect(100, 8, 90, 30, #ccc),
rect(90, 8, 90, 50, #ccc)
)
);
</code>
</pre>
<ul class="ft-toolbar ft-single-column"></ul>
</div>
<script src="./rainbow-custom.min.js"></script>
</body>
</html>