flowtime-rails 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE +24 -0
- data/README.md +40 -0
- data/Rakefile +1 -0
- data/flowtime-rails.gemspec +19 -0
- data/lib/flowtime-rails.rb +28 -0
- data/lib/flowtime-rails/engine.rb +19 -0
- data/lib/flowtime-rails/version.rb +5 -0
- data/vendor/assets/javascripts/brav1toolbox.js +201 -0
- data/vendor/assets/javascripts/flowtime.js +2102 -0
- data/vendor/assets/stylesheets/flowtime.css +262 -0
- data/vendor/assets/stylesheets/themes/default.css +422 -0
- metadata +59 -0
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
/* STRUCTURE */
|
|
2
|
+
|
|
3
|
+
html, body {
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 100%;
|
|
6
|
+
-webkit-text-size-adjust:none;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
body {
|
|
10
|
+
white-space: nowrap; /* disable the wrapping of the space between articles */
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.flowtime {
|
|
14
|
+
font-size: 0; /* removes the white spaces between inline-block elements */
|
|
15
|
+
/* WARNING! this technique does non remove the white-space in Safari for Windows */
|
|
16
|
+
/* unless you use this hack: http://absolide.tumblr.com/post/36597829434/safari-inline-block-white-spaces-bug-fix */
|
|
17
|
+
/* you can use any other white-space removal technique as per: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
|
|
18
|
+
width: 100%;
|
|
19
|
+
height: 100%;
|
|
20
|
+
-o-transform-origin: 0 0;
|
|
21
|
+
-ms-transform-origin: 0 0;
|
|
22
|
+
-moz-transform-origin: 0 0;
|
|
23
|
+
-webkit-transform-origin: 0 0;
|
|
24
|
+
transform-origin: 0 0;
|
|
25
|
+
-o-transform: translateZ(0);
|
|
26
|
+
-ms-transform: translateZ(0);
|
|
27
|
+
-moz-transform: translateZ(0);
|
|
28
|
+
-webkit-transform: translateZ(0);
|
|
29
|
+
transform: translateZ(0);
|
|
30
|
+
-o-backface-visibility: hidden;
|
|
31
|
+
-ms-backface-visibility: hidden;
|
|
32
|
+
-moz-backface-visibility: hidden;
|
|
33
|
+
-webkit-backface-visibility: hidden;
|
|
34
|
+
backface-visibility: hidden;
|
|
35
|
+
-o-transition: -o-transform 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
36
|
+
-moz-transition: -moz-transform 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
37
|
+
-webkit-transition: -webkit-transform 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
38
|
+
transition: transform 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
39
|
+
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.flowtime.no-transition {
|
|
43
|
+
-o-transition: -o-transform 0s;
|
|
44
|
+
-moz-transition: -moz-transform 0s;
|
|
45
|
+
-webkit-transition: -webkit-transform 0s;
|
|
46
|
+
transition: transform 0s;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* SECTIONS (COLUMNS) */
|
|
50
|
+
|
|
51
|
+
/* base section */
|
|
52
|
+
.ft-section {
|
|
53
|
+
width: 100%;
|
|
54
|
+
height: 100%;
|
|
55
|
+
|
|
56
|
+
position: relative;
|
|
57
|
+
-o-transform: translateZ(0);
|
|
58
|
+
-ms-transform: translateZ(0);
|
|
59
|
+
-moz-transform: translateZ(0);
|
|
60
|
+
-webkit-transform: translateZ(0);
|
|
61
|
+
transform: translateZ(0);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* section and section thumb alignment */
|
|
65
|
+
.ft-section, .ft-section-thumb {
|
|
66
|
+
font-size: 16px; /* reset the regular font size, in the old way… */
|
|
67
|
+
font-size: 1rem; /* and in the modern way */
|
|
68
|
+
white-space: normal;
|
|
69
|
+
display: inline-block; /* let the block elements stay on the same line */
|
|
70
|
+
/* used together the white-space: nowrap; declaration */
|
|
71
|
+
/* the elements doesn't break the line */
|
|
72
|
+
vertical-align: top; /* fix the default alignement for the inline-block elements (default: baseline) */
|
|
73
|
+
/* if different from "top" set Flowtime.slideWithPx(true) */
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* PAGES */
|
|
77
|
+
|
|
78
|
+
/* base page */
|
|
79
|
+
.ft-page {
|
|
80
|
+
-moz-box-sizing: border-box;
|
|
81
|
+
-webkit-box-sizing: border-box;
|
|
82
|
+
box-sizing: border-box;
|
|
83
|
+
width: 100%;
|
|
84
|
+
height: 100%;
|
|
85
|
+
position: relative;
|
|
86
|
+
z-index: auto;
|
|
87
|
+
-o-transform: translateZ(0);
|
|
88
|
+
-ms-transform: translateZ(0);
|
|
89
|
+
-moz-transform: translateZ(0);
|
|
90
|
+
-webkit-transform: translateZ(0);
|
|
91
|
+
transform: translateZ(0);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.ft-page.actual {
|
|
95
|
+
z-index: 100;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* pages in overview mode */
|
|
99
|
+
.ft-overview .ft-page {
|
|
100
|
+
opacity: 0.5;
|
|
101
|
+
cursor: pointer;
|
|
102
|
+
-o-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
103
|
+
-moz-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
104
|
+
-webkit-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
105
|
+
transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
106
|
+
-o-transform: scale(0.95);
|
|
107
|
+
-ms-transform: scale(0.95);
|
|
108
|
+
-moz-transform: scale(0.95);
|
|
109
|
+
-webkit-transform: scale(0.95);
|
|
110
|
+
transform: scale(0.95);
|
|
111
|
+
-o-transform-origin: 50% 50%;
|
|
112
|
+
-ms-transform-origin: 50% 50%;
|
|
113
|
+
-moz-transform-origin: 50% 50%;
|
|
114
|
+
-webkit-transform-origin: 50% 50%;
|
|
115
|
+
transform-origin: 50% 50%;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.ft-overview .ft-page * {
|
|
119
|
+
pointer-events: none;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* JAVASCRIPT NAVIGATION HOOKS */
|
|
123
|
+
|
|
124
|
+
.ft-absolute-nav {
|
|
125
|
+
overflow: hidden;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
.ft-absolute-nav .flowtime {
|
|
130
|
+
position: absolute;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* EYE CANDY OVERRIDABLE CLASSES AND PROPERTIES */
|
|
134
|
+
|
|
135
|
+
/* FRAGMENTS */
|
|
136
|
+
|
|
137
|
+
.ft-fragment {
|
|
138
|
+
opacity: 0;
|
|
139
|
+
-o-transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
|
|
140
|
+
-moz-transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
|
|
141
|
+
-webkit-transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
|
|
142
|
+
transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
|
|
143
|
+
-o-transform: translateZ(0);
|
|
144
|
+
-ms-transform: translateZ(0);
|
|
145
|
+
-moz-transform: translateZ(0);
|
|
146
|
+
-webkit-transform: translateZ(0);
|
|
147
|
+
transform: translateZ(0);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.ft-fragment.revealed.step {
|
|
151
|
+
opacity: 0.3;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.ft-fragment.revealed.shy {
|
|
155
|
+
opacity: 0;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.ft-fragment.revealed,
|
|
159
|
+
.ft-fragment.revealed-temp,
|
|
160
|
+
.ft-fragment.revealed.actual {
|
|
161
|
+
opacity: 1;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* DEFAULT PROGRESS */
|
|
165
|
+
|
|
166
|
+
.ft-default-progress {
|
|
167
|
+
position: fixed;
|
|
168
|
+
bottom: 16px;
|
|
169
|
+
bottom: 1rem;
|
|
170
|
+
right: 16px;
|
|
171
|
+
right: 1rem;
|
|
172
|
+
z-index: 1000;
|
|
173
|
+
opacity: 0.3;
|
|
174
|
+
-o-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
175
|
+
-moz-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
176
|
+
-webkit-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
177
|
+
transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.ft-default-progress:hover {
|
|
181
|
+
opacity: 1;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* default progress disappears when in overview mode */
|
|
185
|
+
.ft-overview .ft-default-progress {
|
|
186
|
+
opacity: 0;
|
|
187
|
+
pointer-events: none;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
/* default progress page thumb */
|
|
191
|
+
.ft-page-thumb {
|
|
192
|
+
-moz-box-sizing: border-box;
|
|
193
|
+
-webkit-box-sizing: border-box;
|
|
194
|
+
box-sizing: border-box;
|
|
195
|
+
width: 1rem;
|
|
196
|
+
height: 0.7rem;
|
|
197
|
+
margin-right: 1px;
|
|
198
|
+
margin-bottom: 1px;
|
|
199
|
+
background-color: rgba(0,0,0,0.7);
|
|
200
|
+
cursor: pointer;
|
|
201
|
+
-o-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
202
|
+
-moz-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
203
|
+
-webkit-transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
204
|
+
transition: all 0.5s cubic-bezier(.77, .10, .22, 1);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.ft-page-thumb:hover {
|
|
208
|
+
background-color: rgba(255,255,255,0.7);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.ft-page-thumb.actual {
|
|
212
|
+
background-color: rgba(255,255,255,0.5);
|
|
213
|
+
border: 1px solid #ffffff;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* overview mode page highlighting */
|
|
217
|
+
|
|
218
|
+
.ft-overview .ft-page.actual {
|
|
219
|
+
opacity: 0.25;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.ft-overview .ft-page.hilite {
|
|
223
|
+
opacity: 1;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.ft-overview .ft-page:hover {
|
|
227
|
+
opacity: 1;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* HARDWARE ACCELERATED ELEMENTS */
|
|
231
|
+
/* I've not used * because causes issues with current Chrome */
|
|
232
|
+
|
|
233
|
+
img {
|
|
234
|
+
-o-transform: translate3d(0, 0, 0);
|
|
235
|
+
-ms-transform: translate3d(0, 0, 0);
|
|
236
|
+
-moz-transform: translate3d(0, 0, 0);
|
|
237
|
+
-webkit-transform: translate3d(0, 0, 0);
|
|
238
|
+
transform: translate3d(0, 0, 0);
|
|
239
|
+
-o-backface-visibility: hidden;
|
|
240
|
+
-ms-backface-visibility: hidden;
|
|
241
|
+
-moz-backface-visibility: hidden;
|
|
242
|
+
-webkit-backface-visibility: hidden;
|
|
243
|
+
backface-visibility: hidden;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/* PARALLAX MANAGEMENT */
|
|
247
|
+
|
|
248
|
+
.parallax {
|
|
249
|
+
position: relative;
|
|
250
|
+
-o-transition: all 0.5s cubic-bezier(.50, .10, .50, 1);
|
|
251
|
+
-moz-transition: all 0.5s cubic-bezier(.50, .10, .50, 1);
|
|
252
|
+
-webkit-transition: all 0.5s cubic-bezier(.50, .10, .50, 1);
|
|
253
|
+
transition: all 0.5s cubic-bezier(.50, .10, .50, 1);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.ft-overview .parallax {
|
|
257
|
+
-o-transform: translate3d(0, 0, 0) !important;
|
|
258
|
+
-ms-transform: translate3d(0, 0, 0) !important;
|
|
259
|
+
-moz-transform: translate3d(0, 0, 0) !important;
|
|
260
|
+
-webkit-transform: translate3d(0, 0, 0) !important;
|
|
261
|
+
transform: translate3d(0, 0, 0) !important;
|
|
262
|
+
}
|
|
@@ -0,0 +1,422 @@
|
|
|
1
|
+
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 22, 2012 05:21:39 PM America/New_York */
|
|
2
|
+
@font-face {
|
|
3
|
+
font-family: 'ChunkFiveRegular';
|
|
4
|
+
src: url('../../assets/fonts/Chunkfive-webfont.eot');
|
|
5
|
+
src: url('../../assets/fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
|
|
6
|
+
url('../../assets/fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'),
|
|
7
|
+
url('../../assets/fonts/Chunkfive-webfont.woff') format('woff'),
|
|
8
|
+
url('../../assets/fonts/Chunkfive-webfont.ttf') format('truetype');
|
|
9
|
+
font-weight: bold;
|
|
10
|
+
font-style: normal;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on December 29, 2012 05:04:11 AM America/New_York */
|
|
14
|
+
|
|
15
|
+
@font-face {
|
|
16
|
+
font-family: 'AmaranthRegular';
|
|
17
|
+
src: url('../../assets/fonts/Amaranth-webfont.eot');
|
|
18
|
+
src: url('../../assets/fonts/Amaranth-webfont.eot?#iefix') format('embedded-opentype'),
|
|
19
|
+
url('../../assets/fonts/Amaranth-webfont.woff') format('woff'),
|
|
20
|
+
url('../../assets/fonts/Amaranth-webfont.ttf') format('truetype'),
|
|
21
|
+
url('../../assets/fonts/Amaranth-webfont.svg#AmaranthRegular') format('svg');
|
|
22
|
+
font-weight: normal;
|
|
23
|
+
font-style: normal;
|
|
24
|
+
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@font-face {
|
|
28
|
+
font-family: 'AmaranthItalic';
|
|
29
|
+
src: url('../../assets/fonts/Amaranth-Italic-webfont.eot');
|
|
30
|
+
src: url('../../assets/fonts/Amaranth-Italic-webfont.eot?#iefix') format('embedded-opentype'),
|
|
31
|
+
url('../../assets/fonts/Amaranth-Italic-webfont.woff') format('woff'),
|
|
32
|
+
url('../../assets/fonts/Amaranth-Italic-webfont.ttf') format('truetype'),
|
|
33
|
+
url('../../assets/fonts/Amaranth-Italic-webfont.svg#AmaranthItalic') format('svg');
|
|
34
|
+
font-weight: normal;
|
|
35
|
+
font-style: italic;
|
|
36
|
+
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@font-face {
|
|
40
|
+
font-family: 'AmaranthBold';
|
|
41
|
+
src: url('../../assets/fonts/Amaranth-Bold-webfont.eot');
|
|
42
|
+
src: url('../../assets/fonts/Amaranth-Bold-webfont.eot?#iefix') format('embedded-opentype'),
|
|
43
|
+
url('../../assets/fonts/Amaranth-Bold-webfont.woff') format('woff'),
|
|
44
|
+
url('../../assets/fonts/Amaranth-Bold-webfont.ttf') format('truetype'),
|
|
45
|
+
url('../../assets/fonts/Amaranth-Bold-webfont.svg#AmaranthBold') format('svg');
|
|
46
|
+
font-weight: bold;
|
|
47
|
+
font-style: normal;
|
|
48
|
+
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@font-face {
|
|
52
|
+
font-family: 'AmaranthBoldItalic';
|
|
53
|
+
src: url('../../assets/fonts/Amaranth-BoldItalic-webfont.eot');
|
|
54
|
+
src: url('../../assets/fonts/Amaranth-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
|
|
55
|
+
url('../../assets/fonts/Amaranth-BoldItalic-webfont.woff') format('woff'),
|
|
56
|
+
url('../../assets/fonts/Amaranth-BoldItalic-webfont.ttf') format('truetype'),
|
|
57
|
+
url('../../assets/fonts/Amaranth-BoldItalic-webfont.svg#AmaranthBoldItalic') format('svg');
|
|
58
|
+
font-weight: bold;
|
|
59
|
+
font-style: italic;
|
|
60
|
+
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* theme */
|
|
64
|
+
|
|
65
|
+
html {
|
|
66
|
+
font-size: 100%;
|
|
67
|
+
line-height: 1.5rem;
|
|
68
|
+
background-color: #333333;
|
|
69
|
+
color: #ffffff;
|
|
70
|
+
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
body {
|
|
74
|
+
font-family: "AmaranthRegular", sans-serif;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.navigation, .credits, .switches {
|
|
78
|
+
display: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.ft-page {
|
|
82
|
+
padding: 2rem;
|
|
83
|
+
background-color: #424242;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.flowtime h1,
|
|
87
|
+
.flowtime h2,
|
|
88
|
+
.flowtime h3,
|
|
89
|
+
.flowtime h4,
|
|
90
|
+
.flowtime h5,
|
|
91
|
+
.flowtime h6,
|
|
92
|
+
.flowtime p,
|
|
93
|
+
.flowtime ul,
|
|
94
|
+
.flowtime ol,
|
|
95
|
+
.flowtime dl,
|
|
96
|
+
.flowtime li,
|
|
97
|
+
.flowtime dt,
|
|
98
|
+
.flowtime dd {
|
|
99
|
+
display: block;
|
|
100
|
+
-o-transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
|
|
101
|
+
-moz-transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
|
|
102
|
+
-webkit-transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
|
|
103
|
+
transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/* headings */
|
|
107
|
+
|
|
108
|
+
.flowtime h1,
|
|
109
|
+
.flowtime h2,
|
|
110
|
+
.flowtime h3,
|
|
111
|
+
.flowtime h4,
|
|
112
|
+
.flowtime h5,
|
|
113
|
+
.flowtime h6 {
|
|
114
|
+
font-family: "AmaranthBold";
|
|
115
|
+
font-weight: bold;
|
|
116
|
+
color: #cccccc;
|
|
117
|
+
text-shadow: 1px 2px 0 rgba(255,255,255,0.2);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.flowtime h1 {
|
|
121
|
+
font-size: 3.5rem;
|
|
122
|
+
line-height: 3rem;
|
|
123
|
+
margin: 1rem 0 2rem 0;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.flowtime h2 {
|
|
127
|
+
font-size: 2.5rem;
|
|
128
|
+
line-height: 2.5rem;
|
|
129
|
+
margin: 2rem 0;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.flowtime h3 {
|
|
133
|
+
font-size: 2rem;
|
|
134
|
+
line-height: 2rem;
|
|
135
|
+
margin: 2rem 0;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.flowtime h4,
|
|
139
|
+
.flowtime h5,
|
|
140
|
+
.flowtime h6 {
|
|
141
|
+
font-size: 1.75rem;
|
|
142
|
+
line-height: 2rem;
|
|
143
|
+
margin: 2rem 0;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* paragraph */
|
|
147
|
+
|
|
148
|
+
.flowtime p {
|
|
149
|
+
font-size: 1.75rem;
|
|
150
|
+
line-height: 2rem;
|
|
151
|
+
margin: 2rem 0;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* lists */
|
|
155
|
+
|
|
156
|
+
.flowtime ul,
|
|
157
|
+
.flowtime ol,
|
|
158
|
+
.flowtime dl {
|
|
159
|
+
font-size: 1.75rem;
|
|
160
|
+
line-height: 2rem;
|
|
161
|
+
margin: 2rem 0;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.flowtime ul,
|
|
165
|
+
.flowtime ol,
|
|
166
|
+
.flowtime dl {
|
|
167
|
+
margin: 0 2rem;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.flowtime li,
|
|
171
|
+
.flowtime dd {
|
|
172
|
+
line-height: 1.75rem;
|
|
173
|
+
margin-bottom: 1rem;
|
|
174
|
+
position: relative;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.flowtime dt {
|
|
178
|
+
position: relative;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.flowtime ul li:before,
|
|
182
|
+
.flowtime dl dt:before {
|
|
183
|
+
content: "\2022";
|
|
184
|
+
text-align: right;
|
|
185
|
+
color: #ffdd00;
|
|
186
|
+
margin-right: 0.5rem;
|
|
187
|
+
display: inline-block;
|
|
188
|
+
position: absolute;
|
|
189
|
+
left: -1rem;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.flowtime ol {
|
|
193
|
+
counter-reset: list;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.flowtime ol li:before {
|
|
197
|
+
content: counter(list) ".";
|
|
198
|
+
counter-increment: list;
|
|
199
|
+
font-size: 0.75em;
|
|
200
|
+
color: #ffdd00;
|
|
201
|
+
margin-right: 0.5rem;
|
|
202
|
+
display: inline-block;
|
|
203
|
+
position: relative;
|
|
204
|
+
top: -0.075em;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.flowtime dl dd {
|
|
208
|
+
font-size: 0.8em;
|
|
209
|
+
margin-left: 1rem;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.flowtime small {
|
|
213
|
+
font-size: 0.6em;
|
|
214
|
+
vertical-align: middle;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.flowtime pre,
|
|
218
|
+
.flowtime code {
|
|
219
|
+
font-family: monospace;
|
|
220
|
+
margin: 1rem 0;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.flowtime strong {
|
|
224
|
+
font-weight: bold;
|
|
225
|
+
color: #ffdd00;
|
|
226
|
+
text-shadow: 1px 2px 0 #000000, 1px -1px 0 rgba(0,0,0,0.3), -1px -1px 0 rgba(0,0,0,0.3), -1px 1px 0 rgba(0,0,0,0.3)
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
/* quotes and citations */
|
|
230
|
+
|
|
231
|
+
.flowtime q {
|
|
232
|
+
quotes: "“" "”";
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.flowtime q:before {
|
|
236
|
+
content: open-quote;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.flowtime q:after {
|
|
240
|
+
content: close-quote;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.flowtime blockquote {
|
|
244
|
+
font-size: 1.5rem;
|
|
245
|
+
margin: 1.5rem 2rem;
|
|
246
|
+
padding: 1rem;
|
|
247
|
+
background-color: rgba(0,0,0,0.3);
|
|
248
|
+
border-left: 0.5rem solid rgba(255,255,255,0.5);
|
|
249
|
+
border-radius: 0.5rem;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.flowtime q,
|
|
253
|
+
.flowtime cite,
|
|
254
|
+
.flowtime blockquote {
|
|
255
|
+
font-style: italic;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* variations */
|
|
259
|
+
|
|
260
|
+
.flowtime .small {
|
|
261
|
+
font-size: 0.6em;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.flowtime .attention {
|
|
265
|
+
color: #ff0000;
|
|
266
|
+
text-shadow: 1px 2px 0 #000000, 1px -1px 0 rgba(0,0,0,0.3), -1px -1px 0 rgba(0,0,0,0.3), -1px 1px 0 rgba(0,0,0,0.3)
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.flowtime sup {
|
|
270
|
+
font-size: 0.7em;
|
|
271
|
+
position: relative;
|
|
272
|
+
top: -0.5em;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
/* links and focus */
|
|
276
|
+
|
|
277
|
+
.flowtime a,
|
|
278
|
+
.flowtime a:link,
|
|
279
|
+
.flowtime a:visited,
|
|
280
|
+
.flowtime a:hover,
|
|
281
|
+
.flowtime a:active,
|
|
282
|
+
.flowtime a:focus,
|
|
283
|
+
.flowtime a:hover img,
|
|
284
|
+
.flowtime a:active img,
|
|
285
|
+
.flowtime a:focus img {
|
|
286
|
+
color: #32affc;
|
|
287
|
+
text-shadow: 1px 1px 0 #000000;
|
|
288
|
+
-o-transition: all 0.3s;
|
|
289
|
+
-moz-transition: all 0.3s;
|
|
290
|
+
-webkit-transition: all 0.3s;
|
|
291
|
+
transition: all 0.3s;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.flowtime a:hover,
|
|
295
|
+
.flowtime a:active,
|
|
296
|
+
.flowtime a:focus,
|
|
297
|
+
.flowtime a:hover img,
|
|
298
|
+
.flowtime a:active img,
|
|
299
|
+
.flowtime a:focus img {
|
|
300
|
+
color: #ff9900;
|
|
301
|
+
outline: none;
|
|
302
|
+
background-color: rgba(255,255,255,0.2);
|
|
303
|
+
-webkit-box-shadow: 1px 2px 10px 0 rgba(0,0,0,0.5);
|
|
304
|
+
box-shadow: 1px 2px 10px 0 rgba(0,0,0,0.5);
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.flowtime a:hover img,
|
|
308
|
+
.flowtime a:active img,
|
|
309
|
+
.flowtime a:focus img {
|
|
310
|
+
-webkit-box-shadow: 1px 2px 10px 5px rgba(0,0,0,0.5);
|
|
311
|
+
box-shadow: 1px 2px 10px 5px rgba(0,0,0,0.5);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
/* stackable content */
|
|
315
|
+
|
|
316
|
+
.flowtime .stack {
|
|
317
|
+
width: 100%;
|
|
318
|
+
height: 100%;
|
|
319
|
+
margin: 1rem 0;
|
|
320
|
+
position: relative;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.flowtime .stacked {
|
|
324
|
+
width: 100%;
|
|
325
|
+
position: absolute;
|
|
326
|
+
top: 0;
|
|
327
|
+
left: 0;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.flowtime img {
|
|
331
|
+
max-width: 100%;
|
|
332
|
+
max-height: 100%;
|
|
333
|
+
display: block;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
/* horizontally and vertically centered stackable content */
|
|
337
|
+
|
|
338
|
+
.flowtime .stack-center {
|
|
339
|
+
text-align: center;
|
|
340
|
+
white-space: nowrap;
|
|
341
|
+
position: absolute;
|
|
342
|
+
top: 2rem;
|
|
343
|
+
right: 2rem;
|
|
344
|
+
bottom: 2rem;
|
|
345
|
+
left: 2rem;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.flowtime .stack-center:before {
|
|
349
|
+
content: "";
|
|
350
|
+
height: 100%;
|
|
351
|
+
display: inline-block;
|
|
352
|
+
vertical-align: middle;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.flowtime .stack-center .stacked-center {
|
|
356
|
+
white-space: normal;
|
|
357
|
+
max-width: 100%;
|
|
358
|
+
max-height: 100%;
|
|
359
|
+
display: inline-block;
|
|
360
|
+
vertical-align: middle;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
/* media queries */
|
|
364
|
+
|
|
365
|
+
@media screen and (min-height: 41em) and (min-width: 80em)
|
|
366
|
+
{
|
|
367
|
+
html {
|
|
368
|
+
font-size: 120%;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.ft-page {
|
|
372
|
+
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
@media screen and (min-height: 50em) and (min-width: 90em)
|
|
377
|
+
{
|
|
378
|
+
html {
|
|
379
|
+
font-size: 140%;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.ft-page {
|
|
383
|
+
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
@media screen and (max-device-height: 578px)
|
|
388
|
+
{
|
|
389
|
+
html {
|
|
390
|
+
font-size: 50%;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.ft-page {
|
|
394
|
+
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
/* parallax demo */
|
|
398
|
+
|
|
399
|
+
.parallax-demo {
|
|
400
|
+
overflow: hidden;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.parallax-demo .kingmix {
|
|
404
|
+
position: absolute;
|
|
405
|
+
left: 20%;
|
|
406
|
+
bottom: -10%;
|
|
407
|
+
z-index: 50;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.parallax-demo .sax {
|
|
411
|
+
position: absolute;
|
|
412
|
+
left: 6%;
|
|
413
|
+
bottom: -18%;
|
|
414
|
+
z-index: 40;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.parallax-demo .tone {
|
|
418
|
+
position: absolute;
|
|
419
|
+
left: 49%;
|
|
420
|
+
bottom: -32%;
|
|
421
|
+
z-index: 30;
|
|
422
|
+
}
|