jekyll-theme-marketing 0.3.0 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: f285bf5f01c7f083e450e3fd20155ca1e1da61dc
4
- data.tar.gz: 98fa71317a091b376ff630bd9c1592c65963e8a4
3
+ metadata.gz: 2eca1c61d528aac7269ec959477733071d8ec008
4
+ data.tar.gz: 9a3a26e1f5cd01e40231106fa65e20acabaca79b
5
5
  SHA512:
6
- metadata.gz: fce56bbeb603fe5476f54b096ed349dafefe7a80b934e5693ed8421bbb3174bb6edafc418614eeeaa8dde0cbb37120572cd673371b410ac98188fb8b921b8ecf
7
- data.tar.gz: ac5caa0e02efab9aac956c8b739291bf7ff3732222e424076916c1be97e92e6442e18d6b7cee42b33f3db8f313456ca2c6f912304ab855ed7d170675364de8e7
6
+ metadata.gz: 0e33e73c096587fd130a4af20556e0eb29247d419e0e6ec01ac8d089d883a7568d4f56d0e8b575079fe45a32fbfa0c0e5cf1e6b457457ecf79f79f822c5477b9
7
+ data.tar.gz: 3eacecc8e3545a963e0c3b51683f0ff9f7742c702094129e7a2a85f27a2fbb076d1e8f11f0b3893f711bcc37ebb996d93969aafb9ce5a0192354fbd91f635345
@@ -0,0 +1,49 @@
1
+ <div id="make-3D-space-{{ include.id }}" class="make-3D-space">
2
+ <div id="product-card-{{ include.id }}" class="product-card" data-id="{{ include.id }}">
3
+ <div id="product-front-{{ include.id }}" class="product-front">
4
+ <div class="shadow"></div>
5
+ <img src="{{ include.img }}" alt="{{ include.model }}" />
6
+ <a {{ include.href }}><div class="image_overlay"></div></a>
7
+ <div id="view_details-{{ include.id }}" class="view_details hide" data-id="{{ include.id }}">View details</div>
8
+ <div class="stats">
9
+ <a {{ include.href }}>
10
+ <div class="stats-container">
11
+ <span class="product_price">{{ include.price }} {{ include.currency }}</span>
12
+ <span class="product_name">{{ include.commercial }}</span>
13
+ <p>{{ include.desc }}</p>
14
+ <div class="product-options">
15
+ <strong>MODEL</strong>
16
+ <span>{{ include.model }}</span>
17
+ <strong>BRAND</strong>
18
+ <span>{{ include.brand }}</span>
19
+ </div>
20
+ </div>
21
+ </a>
22
+ </div>
23
+ </div>
24
+ <div id="product-back-{{ include.id }}" class="product-back">
25
+ <div class="shadow"></div>
26
+ <div id="carousel-{{ include.id }}" class="carousel">
27
+ <ul>
28
+ <li><img src="{{ include.img | replace: '.png', '_02.png' }}" alt="{{ include.model }}" /></li>
29
+ <li><img src="{{ include.img | replace: '.png', '_03.png' }}" alt="{{ include.model }}" /></li>
30
+ <li><img src="{{ include.img | replace: '.png', '_04.png' }}" alt="{{ include.model }}" /></li>
31
+ </ul>
32
+ <div class="arrows-perspective">
33
+ <div class="carouselPrev" data-id="{{ include.id }}">
34
+ <div class="y"></div>
35
+ <div class="x"></div>
36
+ </div>
37
+ <div class="carouselNext" data-id="{{ include.id }}">
38
+ <div class="y"></div>
39
+ <div class="x"></div>
40
+ </div>
41
+ </div>
42
+ </div>
43
+ <div id="flip-back-{{ include.id }}" class="flip-back" data-id="{{ include.id }}">
44
+ <div id="cy-{{ include.id }}" class="cy"></div>
45
+ <div id="cx-{{ include.id }}" class="cx"></div>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </div>
@@ -0,0 +1,3 @@
1
+ <!-- Google fonts -->
2
+ <link rel="stylesheet" type='text/css' href="https://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic">
3
+ <link rel='stylesheet' type='text/css' href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700">
data/_layouts/page.html CHANGED
@@ -15,6 +15,53 @@ layout: default
15
15
  {% assign i18n-subtitle = site.data.i18n.catalog[page.collection][site.lang][i18n-id].subtitle %}
16
16
  {% endif %}
17
17
  {% endif %}
18
+
19
+ <nav aria-label="breadcrumb">
20
+ <ol id="breadcrumb" class="breadcrumb">
21
+ {% for level in (-1..page.categories.size) %}
22
+ {% if forloop.first %}
23
+ <li class="breadcrumb-item home"><a href="{{ '/' | relative_url }}"><span class="glyphicon glyphicon-home"></span></a></li>
24
+ <li class="breadcrumb-item ellipsis hidden-xs hidden-sm hidden-md hidden-lg">...</li>
25
+ {% if page.menu-father %}
26
+ <li class="breadcrumb-item {{ page.collection }}"><a href="{{ page.collection | prepend: '/' | relative_url }}">{% if site.data.i18n.catalog[page.collection][site.lang][page.collection].title %}{{ site.data.i18n.catalog[page.collection][site.lang][page.collection].title }}{% else %}{{ page.collection | capitalize }}{% endif %}</a></li>
27
+ {% endif %}
28
+ {% elsif forloop.last %}
29
+ <li class="breadcrumb-item {{ i18n-id }} active" aria-current="page">{% if i18n-title %}{{ i18n-title }}{% else %}{{ page.title }}{% endif %}</li>
30
+ {% else %}
31
+ {% assign cat-num = forloop.index %}
32
+ {% assign url-size = page.url | size | minus: 2 %}
33
+ {% assign sections = page.url | slice: 1,url-size | split : '/' %}
34
+ {% capture level-url %}
35
+ {% for section in sections %}
36
+ {% if forloop.index > cat-num %} {% break %} {% endif %}
37
+ {{ section | append: '/' }}
38
+ {% endfor %}
39
+ {% endcapture %}
40
+ {% assign level-url = level-url | strip_newlines | replace: ' ', '' | relative_url %}
41
+ {% assign level-url-size = level-url | size | minus: 2 %}
42
+ {% assign level-i18n-id = level-url | slice: 1,level-url-size | replace: '/', '-' | remove_first: page.collection | remove_first: '-' %}
43
+ {% assign level-i18n-title = site.data.i18n.catalog[page.collection][site.lang][level-i18n-id].title %}
44
+ {% assign page-commercial-downcase = page.commercial | downcase | replace: ' ', '-' %}
45
+ {% unless page.categories[level] == page-commercial-downcase %}
46
+ <li class="breadcrumb-item {{ level-i18n-id }}"><a href="{{ level-url }}">{% if level-i18n-title %}{{ level-i18n-title }}{% else %}{{ page.categories[level] | replace: '-', ' ' | capitalize }}{% endif %}</a></li>
47
+ {% endunless %}
48
+ {% endif %}
49
+ {% endfor %}
50
+ </ol>
51
+ </nav>
52
+
53
+ <script>
54
+ var items = $('#breadcrumb > li.breadcrumb-item');
55
+ if (items.length > 3){
56
+ if (items.length > 4) $('li.breadcrumb-item.ellipsis').removeClass('hidden-xs');
57
+ if (items.length > 5) $('li.breadcrumb-item.ellipsis').removeClass('hidden-sm');
58
+ items.each(function( index ) {
59
+ if (index > 1 && index < items.length-3) $(this).addClass('hidden-sm');
60
+ if (index > 1 && index < items.length) if (index != items.length-2) $(this).addClass('hidden-xs');
61
+ });
62
+ }
63
+ </script>
64
+
18
65
  <h2 id="{{ i18n-id }}" class="post {{ class }}">{% if i18n-title %}{{ i18n-title }}{% else %}{{ page.title }}{% endif %}</h2>
19
66
  <h3 id="{{ i18n-id }}" class="post {{ class }}">{% if i18n-subtitle %}{{ i18n-subtitle }}{% else %}{{ page.subtitle }}{% endif %}</h3>
20
67
 
@@ -1,7 +1,16 @@
1
1
  ---
2
2
  layout: page
3
3
  tabs: [description, downloads, videos, special-offers]
4
+ special-offers:
5
+ format: letter
6
+ orientation: portrait
7
+ unit: in
8
+ width: 8
9
+ height: 9.1
10
+ margin: 0.25
11
+ dpi: 300
4
12
  ---
13
+ <script src="/node_modules/jspdf/dist/jspdf.min.js"></script>
5
14
  {% assign url-size = page.url | size | minus: 2 %}
6
15
  {% assign i18n-id = page.url | slice: 1,url-size | replace: '/', '-' | remove_first: collection.label | remove_first: '-' %}
7
16
  {% assign i18n-title = site.data.i18n.catalog[collection.label][site.lang][i18n-id].title %}
@@ -127,10 +136,35 @@ tabs: [description, downloads, videos, special-offers]
127
136
  {% else %}
128
137
  {% assign image-num = forloop.index | prepend: "_" %}
129
138
  {% endif %}
130
- {% capture product-special-offer-url %}
131
- {{ site.amazon-s3 }}/assets/img/catalog/special-offers/{{ page.collection }}/{{ page-categories }}{{ site.domain | replace:'.',' ' | truncatewords: 1,"" }}/{% if page.resources.special-offers.model %}{{ page.resources.special-offers.model | downcase }}{% else %}{{ page.title | downcase }}{% endif %}{{ image-num | append: ".png" }}
132
- {% endcapture %}
133
- <img src="{{ product-special-offer-url }}" alt="{{ page.title }}" class="img-center">
139
+ <div class="marketing-theme content-right">
140
+ <a class="btn btn-primary btn-sm" onclick="specialOffersPDF();">
141
+ <strong><span class="glyphicon glyphicon-download-alt"></span> {{ site.data.i18n.common.product-layout[site.lang].download }}</strong>
142
+ </a>
143
+ </div>
144
+ <div id="special-offers-{{ forloop.index }}">
145
+ <img id="special-offers-promo{{ forloop.index }}" src="/img/special-offers/{{ page.collection }}/{{ page-categories }}{% if page.resources.special-offers.model %}{{ page.resources.special-offers.model | downcase }}{% else %}{{ page.title | downcase }}{% endif %}{{ image-num | append: '.png' }}" alt="{{ page.title }}" title="{{ page.title }}">
146
+ <img id="special-offers-data{{ forloop.index }}" src="/img/special-offers/customers/{{ site.domain | replace:'.',' ' | truncatewords: 1,"" }}.png" alt="{{ page.title }}" title="{{ page.title }}">
147
+ <canvas id="special-offers-promoCanvas{{ forloop.index }}" class="hide" width="{{ layout.special-offers.width | times: layout.special-offers.dpi }}" height="{{ layout.special-offers.height | times: layout.special-offers.dpi }}"></canvas>
148
+ <canvas id="special-offers-dataCanvas{{ forloop.index }}" class="hide" width="{{ layout.special-offers.width | times: layout.special-offers.dpi }}" height="{{ layout.special-offers.height | minus: 10.5 | times: layout.special-offers.dpi | times: -1 }}"></canvas>
149
+ </div>
150
+ <script>
151
+ function specialOffersPDF(){
152
+ var doc = new jsPDF({
153
+ orientation: '{{ layout.special-offers.orientation }}',
154
+ unit: '{{ layout.special-offers.unit }}',
155
+ format: '{{ layout.special-offers.format }}'
156
+ })
157
+ var promo = document.getElementById("special-offers-promo{{ forloop.index }}");
158
+ var promoCanvas = document.getElementById("special-offers-promoCanvas{{ forloop.index }}");
159
+ var data = document.getElementById("special-offers-data{{ forloop.index }}");
160
+ var dataCanvas = document.getElementById("special-offers-dataCanvas{{ forloop.index }}");
161
+ promoCanvas.getContext("2d").drawImage(promo, 0, 0);
162
+ dataCanvas.getContext("2d").drawImage(data, 0, 0);
163
+ doc.addImage(promoCanvas.toDataURL(), 'PNG', {{ layout.special-offers.margin }}, {{ layout.special-offers.margin }}, {{ layout.special-offers.width }}, {{ layout.special-offers.height }},'promoImg','FAST')
164
+ doc.addImage(dataCanvas.toDataURL(), 'PNG', {{ layout.special-offers.margin }}, {{ layout.special-offers.margin }} + {{ layout.special-offers.height }}, {{ layout.special-offers.width }}, {{ 11 | minus: layout.special-offers.margin | minus: layout.special-offers.margin }} - {{ layout.special-offers.height }},'dataImg','FAST')
165
+ doc.save('{{ page.title }}.pdf')
166
+ }
167
+ </script>
134
168
  {% endfor %}
135
169
  </p>
136
170
  {% endunless %}
@@ -148,3 +182,4 @@ tabs: [description, downloads, videos, special-offers]
148
182
  </div>
149
183
  </div> <!-- /container -->
150
184
  <script src="/js/sliders/lightslider.js"></script>
185
+ <script src="/assets/js/bootstrap/nav-tabs.js"></script>
@@ -0,0 +1,13 @@
1
+ nav ol.breadcrumb{
2
+ background: #fff;
3
+ font-size: 1.1em;
4
+ margin-left: 20px;
5
+ margin-top: 3px;
6
+ padding-top: 20px;
7
+
8
+ li{
9
+ a{
10
+ color: $font-color-menu;
11
+ }
12
+ }
13
+ }
@@ -0,0 +1,17 @@
1
+ .marketing-theme{
2
+ &.clean-view{
3
+ margin-top: 30px;
4
+ padding-bottom: 30px;
5
+ }
6
+
7
+ &.content-centered {
8
+ display: flex;
9
+ justify-content: center;
10
+ align-items: center;
11
+ }
12
+
13
+ &.content-right{
14
+ display: flex;
15
+ justify-content: flex-end;
16
+ }
17
+ }
@@ -0,0 +1,14 @@
1
+ div#special-offers{
2
+ #special-offers-object{
3
+ height: 1000px;
4
+ }
5
+ }
6
+
7
+ // Extra small devices (portrait phones, less than 576px)
8
+ @media (max-width: 575.98px) {
9
+ div#special-offers{
10
+ #special-offers-object{
11
+ height: 100%;
12
+ }
13
+ }
14
+ }
@@ -0,0 +1,438 @@
1
+ /* Generals resets and unimportant stuff */
2
+ * { margin: 0px; padding: 0px; }
3
+ body {
4
+ background: #eaebec;
5
+ font-family: "Open Sans", sans-serif;
6
+ }
7
+
8
+ /* --- Product Card ---- */
9
+ .make-3D-space{
10
+ perspective: 800px;
11
+ width:340px;
12
+ height:500px;
13
+ transform-style: preserve-3d;
14
+ transition: transform 5s;
15
+ }
16
+ .product-front, .product-back{
17
+ width:335px;
18
+ height:500px;
19
+ background:#fff;
20
+ position:absolute;
21
+ left:-5px;
22
+ top:-5px;
23
+ -webkit-transition: all 100ms ease-out;
24
+ -moz-transition: all 100ms ease-out;
25
+ -o-transition: all 100ms ease-out;
26
+ transition: all 100ms ease-out;
27
+ }
28
+ .product-back{
29
+ display:none;
30
+ transform: rotateY( 180deg );
31
+ }
32
+ .product-card.animate .product-back, .product-card.animate .product-front{
33
+ top:0px;
34
+ left:0px;
35
+ -webkit-transition: all 100ms ease-out;
36
+ -moz-transition: all 100ms ease-out;
37
+ -o-transition: all 100ms ease-out;
38
+ transition: all 100ms ease-out;
39
+ }
40
+ .product-card{
41
+ width:325px;
42
+ height:490px;
43
+ position:absolute;
44
+ top:10px;
45
+ left:10px;
46
+ overflow:hidden;
47
+ transform-style: preserve-3d;
48
+ -webkit-transition: 100ms ease-out;
49
+ -moz-transition: 100ms ease-out;
50
+ -o-transition: 100ms ease-out;
51
+ transition: 100ms ease-out;
52
+
53
+ border: 1px solid #eee;
54
+ border-radius: 5px;
55
+ -moz-border-radius: 5px;
56
+ }
57
+ div.product-card.flip-10{
58
+ -webkit-transform: rotateY( -10deg );
59
+ -moz-transform: rotateY( -10deg );
60
+ -o-transform: rotateY( -10deg );
61
+ transform: rotateY( -10deg );
62
+ transition: 50ms ease-out;
63
+ }
64
+ div.product-card.flip90{
65
+ -webkit-transform: rotateY( 90deg );
66
+ -moz-transform: rotateY( 90deg );
67
+ -o-transform: rotateY( 90deg );
68
+ transform: rotateY( 90deg );
69
+ transition: 100ms ease-in;
70
+ }
71
+ div.product-card.flip190{
72
+ -webkit-transform: rotateY( 190deg );
73
+ -moz-transform: rotateY( 190deg );
74
+ -o-transform: rotateY( 190deg );
75
+ transform: rotateY( 190deg );
76
+ transition: 100ms ease-out;
77
+ }
78
+ div.product-card.flip180{
79
+ -webkit-transform: rotateY( 180deg );
80
+ -moz-transform: rotateY( 180deg );
81
+ -o-transform: rotateY( 180deg );
82
+ transform: rotateY( 180deg );
83
+ transition: 150ms ease-out;
84
+ }
85
+ .product-card.animate{
86
+ top:5px;
87
+ left:5px;
88
+ width:335px;
89
+ height:500px;
90
+ box-shadow:0px 13px 21px -5px rgba(0, 0, 0, 0.3);
91
+ -webkit-transition: 100ms ease-out;
92
+ -moz-transition: 100ms ease-out;
93
+ -o-transition: 100ms ease-out;
94
+ transition: 100ms ease-out;
95
+ }
96
+ .stats-container{
97
+ border-top: 1px solid #eee;
98
+ background:#fff;
99
+ position:absolute;
100
+ top:386px;
101
+ left:0;
102
+ width:265px;
103
+ height:300px;
104
+ padding:27px 35px 35px;
105
+ box-sizing: content-box;
106
+ -webkit-transition: all 200ms ease-out;
107
+ -moz-transition: all 200ms ease-out;
108
+ -o-transition: all 200ms ease-out;
109
+ transition: all 200ms ease-out;
110
+ }
111
+ .product-card.animate .stats-container{
112
+ top:272px;
113
+ -webkit-transition: all 200ms ease-out;
114
+ -moz-transition: all 200ms ease-out;
115
+ -o-transition: all 200ms ease-out;
116
+ transition: all 200ms ease-out;
117
+ }
118
+ .stats-container .product_name{
119
+ font-size:22px;
120
+ color:#393c45;
121
+ }
122
+ .stats-container p{
123
+ font-size:16px;
124
+ color:#b1b1b3;
125
+ padding:2px 0 12px 0;
126
+ }
127
+ .stats-container .product_price{
128
+ float:right;
129
+ color:#048ce2;
130
+ font-size:22px;
131
+ font-weight:600;
132
+ }
133
+ .image_overlay{
134
+ position:absolute;
135
+ top:0;
136
+ left:0;
137
+ width:100%;
138
+ height:100%;
139
+ background:#048ce2;
140
+ opacity:0;
141
+ }
142
+ .product-card.animate .image_overlay{
143
+ opacity:0.6;
144
+ -webkit-transition: all 200ms ease-out;
145
+ -moz-transition: all 200ms ease-out;
146
+ -o-transition: all 200ms ease-out;
147
+ transition: all 200ms ease-out;
148
+ }
149
+ .product-options{
150
+ padding:2px 0 0;
151
+ }
152
+ .product-options strong{
153
+ font-weight:700;
154
+ color:#393c45;
155
+ font-size:14px;
156
+ }
157
+ .product-options span{
158
+ color:#969699;
159
+ font-size:14px;
160
+ display:block;
161
+ margin-bottom:8px;
162
+ }
163
+ .view_details{
164
+ position:absolute;
165
+ top:112px;
166
+ left:50%;
167
+ margin-left:-85px;
168
+ border:2px solid #fff;
169
+ color:#fff;
170
+ font-size:19px;
171
+ text-align:center;
172
+ text-transform:uppercase;
173
+ font-weight:700;
174
+ padding:10px 0;
175
+ width:172px;
176
+ opacity:0;
177
+ -webkit-transition: all 200ms ease-out;
178
+ -moz-transition: all 200ms ease-out;
179
+ -o-transition: all 200ms ease-out;
180
+ transition: all 200ms ease-out;
181
+ }
182
+ .view_details:hover{
183
+ background:#fff;
184
+ color:#48cfad;
185
+ cursor:pointer;
186
+
187
+ }
188
+ .product-card.animate .view_details{
189
+ opacity:1;
190
+ width:152px;
191
+ font-size:15px;
192
+ margin-left:-75px;
193
+ top:115px;
194
+ -webkit-transition: all 200ms ease-out;
195
+ -moz-transition: all 200ms ease-out;
196
+ -o-transition: all 200ms ease-out;
197
+ transition: all 200ms ease-out;
198
+ }
199
+ div.colors div{
200
+ margin-top:3px;
201
+ width:15px;
202
+ height:15px;
203
+ margin-right:5px;
204
+ float:left;
205
+ }
206
+ div.colors div span{
207
+ width:15px;
208
+ height:15px;
209
+ display:block;
210
+ border-radius:50%;
211
+ }
212
+ div.colors div span:hover{
213
+ width:17px;
214
+ height:17px;
215
+ margin:-1px 0 0 -1px;
216
+ }
217
+ div.c-blue span{background:#6e8cd5;}
218
+ div.c-red span{background:#f56060;}
219
+ div.c-green span{background:#44c28d;}
220
+ div.c-white span{
221
+ background:#fff;
222
+ width:14px;
223
+ height:14px;
224
+ border:1px solid #e8e9eb;
225
+ }
226
+ div.shadow{
227
+ width:335px;height:520px;
228
+ opacity:0;
229
+ position:absolute;
230
+ top:0;
231
+ left:0;
232
+ z-index:3;
233
+ display:none;
234
+ background: -webkit-linear-gradient(left,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
235
+ background: -o-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
236
+ background: -moz-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
237
+ background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.2));
238
+ }
239
+ .product-back div.shadow{
240
+ z-index:10;
241
+ opacity:1;
242
+ background: -webkit-linear-gradient(left,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
243
+ background: -o-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
244
+ background: -moz-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
245
+ background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
246
+ }
247
+ .flip-back{
248
+ position:absolute;
249
+ top:20px;
250
+ right:20px;
251
+ width:30px;
252
+ height:30px;
253
+ cursor:pointer;
254
+ }
255
+ .cx, .cy{
256
+ background:#d2d5dc;
257
+ position:absolute;
258
+ width:0px;
259
+ top:15px;
260
+ right:15px;
261
+ height:3px;
262
+ -webkit-transition: all 250ms ease-in-out;
263
+ -moz-transition: all 250ms ease-in-out;
264
+ -ms-transition: all 250ms ease-in-out;
265
+ -o-transition: all 250ms ease-in-out;
266
+ transition: all 250ms ease-in-out;
267
+ }
268
+ .flip-back:hover .cx, .flip-back:hover .cy{
269
+ background:#979ca7;
270
+ -webkit-transition: all 250ms ease-in-out;
271
+ -moz-transition: all 250ms ease-in-out;
272
+ -ms-transition: all 250ms ease-in-out;
273
+ -o-transition: all 250ms ease-in-out;
274
+ transition: all 250ms ease-in-out;
275
+ }
276
+ .cx.s1, .cy.s1{
277
+ right:0;
278
+ width:30px;
279
+ -webkit-transition: all 100ms ease-out;
280
+ -moz-transition: all 100ms ease-out;
281
+ -ms-transition: all 100ms ease-out;
282
+ -o-transition: all 100ms ease-out;
283
+ transition: all 100ms ease-out;
284
+ }
285
+ .cy.s2{
286
+ -ms-transform: rotate(50deg);
287
+ -webkit-transform: rotate(50deg);
288
+ transform: rotate(50deg);
289
+ -webkit-transition: all 100ms ease-out;
290
+ -moz-transition: all 100ms ease-out;
291
+ -ms-transition: all 100ms ease-out;
292
+ -o-transition: all 100ms ease-out;
293
+ transition: all 100ms ease-out;
294
+ }
295
+ .cy.s3{
296
+ -ms-transform: rotate(45deg);
297
+ -webkit-transform: rotate(45deg);
298
+ transform: rotate(45deg);
299
+ -webkit-transition: all 100ms ease-out;
300
+ -moz-transition: all 100ms ease-out;
301
+ -ms-transition: all 100ms ease-out;
302
+ -o-transition: all 100ms ease-out;
303
+ transition: all 100ms ease-out;
304
+ }
305
+ .cx.s1{
306
+ right:0;
307
+ width:30px;
308
+ -webkit-transition: all 100ms ease-out;
309
+ -moz-transition: all 100ms ease-out;
310
+ -ms-transition: all 100ms ease-out;
311
+ -o-transition: all 100ms ease-out;
312
+ transition: all 100ms ease-out;
313
+ }
314
+ .cx.s2{
315
+ -ms-transform: rotate(140deg);
316
+ -webkit-transform: rotate(140deg);
317
+ transform: rotate(140deg);
318
+ -webkit-transition: all 100ms ease-out;
319
+ -moz-transition: all 100ms ease-out;
320
+ -ms-transition: all 100ease-out;
321
+ -o-transition: all 100ms ease-out;
322
+ transition: all 100ms ease-out;
323
+ }
324
+ .cx.s3{
325
+ -ms-transform: rotate(135deg);
326
+ -webkit-transform: rotate(135deg);
327
+ transform: rotate(135deg);
328
+ -webkit-transition: all 100ease-out;
329
+ -moz-transition: all 100ms ease-out;
330
+ -ms-transition: all 100ms ease-out;
331
+ -o-transition: all 100ms ease-out;
332
+ transition: all 100ms ease-out;
333
+ }
334
+ .carousel{
335
+ width:335px;
336
+ height:500px;
337
+ overflow:hidden;
338
+ position:relative;
339
+
340
+ }
341
+ .carousel ul{
342
+ position:absolute;
343
+ top:0;
344
+ left:0;
345
+ padding:0;
346
+ }
347
+ .carousel li{
348
+ width:335px;
349
+ height:500px;
350
+ float:left;
351
+ overflow:hidden;
352
+ }
353
+ .arrows-perspective{
354
+ width:335px;
355
+ height:55px;
356
+ position: absolute;
357
+ top: 218px;
358
+ transform-style: preserve-3d;
359
+ transition: transform 5s;
360
+ perspective: 335px;
361
+ }
362
+ .carouselPrev, .carouselNext{
363
+ width: 50px;
364
+ height: 55px;
365
+ background: #ccc;
366
+ position: absolute;
367
+ top:0;
368
+ transition: all 200ms ease-out;
369
+ opacity:0.9;
370
+ cursor:pointer;
371
+ }
372
+ .carouselNext{
373
+ top:0;
374
+ right: -26px;
375
+ -webkit-transform: rotateY( -117deg );
376
+ -moz-transform: rotateY( -117deg );
377
+ -o-transform: rotateY( -117deg );
378
+ transform: rotateY( -117deg );
379
+ transition: all 200ms ease-out;
380
+
381
+ }
382
+ .carouselNext.visible{
383
+ right:0;
384
+ opacity:0.8;
385
+ background: #efefef;
386
+ -webkit-transform: rotateY( 0deg );
387
+ -moz-transform: rotateY( 0deg );
388
+ -o-transform: rotateY( 0deg );
389
+ transform: rotateY( 0deg );
390
+ transition: all 200ms ease-out;
391
+ }
392
+ .carouselPrev{
393
+ left:-26px;
394
+ top:0;
395
+ -webkit-transform: rotateY( 117deg );
396
+ -moz-transform: rotateY( 117deg );
397
+ -o-transform: rotateY( 117deg );
398
+ transform: rotateY( 117deg );
399
+ transition: all 200ms ease-out;
400
+
401
+ }
402
+ .carouselPrev.visible{
403
+ left:0;
404
+ opacity:0.8;
405
+ background: #eee;
406
+ -webkit-transform: rotateY( 0deg );
407
+ -moz-transform: rotateY( 0deg );
408
+ -o-transform: rotateY( 0deg );
409
+ transform: rotateY( 0deg );
410
+ transition: all 200ms ease-out;
411
+ }
412
+ .carousel .x, .carousel .y{
413
+ height:2px;
414
+ width:15px;
415
+ background:#48cfad;
416
+ position:absolute;
417
+ top:31px;
418
+ left:17px;
419
+ -ms-transform: rotate(45deg);
420
+ -webkit-transform: rotate(45deg);
421
+ transform: rotate(45deg);
422
+ }
423
+ .carousel .x{
424
+ -ms-transform: rotate(135deg);
425
+ -webkit-transform: rotate(135deg);
426
+ transform: rotate(135deg);
427
+ top:21px;
428
+ }
429
+ .carousel .carouselNext .x{
430
+ -ms-transform: rotate(45deg);
431
+ -webkit-transform: rotate(45deg);
432
+ transform: rotate(45deg);
433
+ }
434
+ .carousel .carouselNext .y{
435
+ -ms-transform: rotate(135deg);
436
+ -webkit-transform: rotate(135deg);
437
+ transform: rotate(135deg);
438
+ }
@@ -0,0 +1,14 @@
1
+ ---
2
+ # Only the main Sass file needs front matter (the dashes are enough)
3
+ ---
4
+ // Define charset
5
+ @charset "utf-8";
6
+
7
+ // Define variables
8
+ $font-color-menu: {{ site.css.menu.font-color }};
9
+
10
+ // Import partials.
11
+ @import "layouts/product";
12
+ @import "common/common";
13
+ @import "breadcrumbs/bootstrap";
14
+ @import "product-cards/3d-space";
@@ -0,0 +1,36 @@
1
+ jQuery(document).ready(function(){
2
+ // Javascript to enable link to tab
3
+ var url = document.location.toString();
4
+ if (url.match('#')) {
5
+ $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
6
+ }
7
+
8
+ // If this snippet is activated it will go down to the clicked tab and,
9
+ // on a page refresh... it will remember the active tab.
10
+ //
11
+ // $('.nav-tabs a').on('shown.bs.tab', function (e) {
12
+ // window.location.hash = e.target.hash;
13
+ // })
14
+
15
+ // TODO: This snippet is to fix the offset of the header-wrapper when scrolling to an active tab,
16
+ // but it is based on a landing page (one page website), we need to fix this and make it functional for a nab-tab page
17
+ //
18
+ // $('a[href*=#]:not([href=#])').click(function() {
19
+ // if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
20
+ // || location.hostname == this.hostname) {
21
+ //
22
+ // var target = $(this.hash),
23
+ // headerHeight = $(".header-wrapper").height() + 5; // Get fixed header height
24
+ // target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
25
+ //
26
+ // if (target.length) {
27
+ // console.log(target.offset().top - headerHeight);
28
+ // $('html,body').animate({
29
+ // scrollTop: target.offset().top - headerHeight
30
+ // }, 500);
31
+ // return false;
32
+ // }
33
+ // }
34
+ // });
35
+
36
+ });
@@ -0,0 +1,112 @@
1
+ jQuery(document).ready(function(){
2
+
3
+ // Lift card and show stats on Mouseover
4
+ jQuery('.product-card').hover(function(){
5
+ var id = jQuery(this).data('id');
6
+ jQuery('#product-card-'+id).addClass('animate');
7
+ jQuery('#carousel-'+id+' div.carouselNext, #carousel-'+id+' div.carouselPrev').addClass('visible');
8
+ }, function(){
9
+ var id = jQuery(this).data('id');
10
+ jQuery('#product-card-'+id).removeClass('animate');
11
+ jQuery('#carousel-'+id+' div.carouselNext, #carousel-'+id+' div.carouselPrev').removeClass('visible');
12
+ });
13
+
14
+ // Flip card to the back side
15
+ jQuery('.view_details').click(function(){
16
+ var id = jQuery(this).data('id');
17
+ jQuery('#carousel-'+id+' div.carouselNext, #carousel-'+id+' div.carouselPrev').removeClass('visible');
18
+ jQuery('#product-card-'+id).addClass('flip-10');
19
+ setTimeout(function(){
20
+ jQuery('#product-card-'+id).removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo( 80 , 1, function(){
21
+ jQuery('#product-front-'+id+', #product-front-'+id+' div.shadow').hide();
22
+ });
23
+ }, 50);
24
+
25
+ setTimeout(function(){
26
+ jQuery('#product-card-'+id).removeClass('flip90').addClass('flip190');
27
+ jQuery('#product-back-'+id).show().find('div.shadow').show().fadeTo( 90 , 0);
28
+ setTimeout(function(){
29
+ jQuery('#product-card-'+id).removeClass('flip190').addClass('flip180').find('div.shadow').hide();
30
+ setTimeout(function(){
31
+ jQuery('#product-card-'+id).css('transition', '100ms ease-out');
32
+ jQuery('#cx-'+id+', #cy-'+id).addClass('s1');
33
+ setTimeout(function(){jQuery('#cx-'+id+', #cy-'+id).addClass('s2');}, 100);
34
+ setTimeout(function(){jQuery('#cx-'+id+', #cy-'+id).addClass('s3');}, 200);
35
+ jQuery('#carousel-'+id+' div.carouselNext, #carousel-'+id+' div.carouselPrev').addClass('visible');
36
+ }, 100);
37
+ }, 100);
38
+ }, 150);
39
+ });
40
+
41
+ // Flip card back to the front side
42
+ jQuery('.flip-back').click(function(){
43
+ var id = jQuery(this).data('id');
44
+ jQuery('#product-card-'+id).removeClass('flip180').addClass('flip190');
45
+ setTimeout(function(){
46
+ jQuery('#product-card-'+id).removeClass('flip190').addClass('flip90');
47
+
48
+ jQuery('#product-back-'+id+' div.shadow').css('opacity', 0).fadeTo( 100 , 1, function(){
49
+ jQuery('#product-back-'+id+', #product-back-'+id+' div.shadow').hide();
50
+ jQuery('#product-front-'+id+', #product-front-'+id+' div.shadow').show();
51
+ });
52
+ }, 50);
53
+
54
+ setTimeout(function(){
55
+ jQuery('#product-card-'+id).removeClass('flip90').addClass('flip-10');
56
+ jQuery('#product-front-'+id+' div.shadow').show().fadeTo( 100 , 0);
57
+ setTimeout(function(){
58
+ jQuery('#product-front-'+id+' div.shadow').hide();
59
+ jQuery('#product-card-'+id).removeClass('flip-10').css('transition', '100ms ease-out');
60
+ jQuery('#cx-'+id+', #cy-'+id).removeClass('s1 s2 s3');
61
+ }, 100);
62
+ }, 150);
63
+
64
+ });
65
+
66
+
67
+ /* ---- Image Gallery Carousel ---- */
68
+ var carouselSlideWidth = 335;
69
+ var isAnimating = false;
70
+
71
+ function initializeCarousel(id){
72
+ var carouselWidth = 0;
73
+ // building the width of the casousel
74
+ jQuery('#carousel-'+id+' li').each(function(){
75
+ carouselWidth += carouselSlideWidth;
76
+ });
77
+ var carousel = jQuery('#carousel-'+id+' ul');
78
+ jQuery(carousel).css('width', carouselWidth);
79
+
80
+ return carouselWidth;
81
+ }
82
+
83
+ // Load Next Image
84
+ jQuery('div.carouselNext').on('click', function(){
85
+ var id = jQuery(this).data('id');
86
+ var carousel = jQuery('#carousel-'+id+' ul');
87
+ carouselWidth = initializeCarousel(id);
88
+ console.log(carouselWidth);
89
+ var currentLeft = Math.abs(parseInt(jQuery(carousel).css("left")));
90
+ var newLeft = currentLeft + carouselSlideWidth;
91
+ if(newLeft == carouselWidth || isAnimating === true){return;}
92
+ jQuery('#carousel-'+id+' ul').css({'left': "-" + newLeft + "px",
93
+ "transition": "300ms ease-out"
94
+ });
95
+ isAnimating = true;
96
+ setTimeout(function(){isAnimating = false;}, 300);
97
+ });
98
+
99
+ // Load Previous Image
100
+ jQuery('div.carouselPrev').on('click', function(){
101
+ var id = jQuery(this).data('id');
102
+ var carousel = jQuery('#carousel-'+id+' ul');
103
+ var currentLeft = Math.abs(parseInt(jQuery(carousel).css("left")));
104
+ var newLeft = currentLeft - carouselSlideWidth;
105
+ if(newLeft < 0 || isAnimating === true){return;}
106
+ jQuery('#carousel-'+id+' ul').css({'left': "-" + newLeft + "px",
107
+ "transition": "300ms ease-out"
108
+ });
109
+ isAnimating = true;
110
+ setTimeout(function(){isAnimating = false;}, 300);
111
+ });
112
+ });
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-marketing
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.0
4
+ version: 0.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Edgar Tinajero
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2018-03-13 00:00:00.000000000 Z
11
+ date: 2018-04-03 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -63,6 +63,7 @@ files:
63
63
  - README.md
64
64
  - _includes/body/footer.html
65
65
  - _includes/body/header.html
66
+ - _includes/body/product-cards/3d-space.html
66
67
  - _includes/body/scripts.html
67
68
  - _includes/head/firebase/sdk.html
68
69
  - _includes/head/fonts.html
@@ -77,7 +78,14 @@ files:
77
78
  - _layouts/plaintext.html
78
79
  - _layouts/post.html
79
80
  - _layouts/product.html
81
+ - _sass/breadcrumbs/_bootstrap.scss
82
+ - _sass/common/_common.scss
83
+ - _sass/layouts/_product.scss
84
+ - _sass/product-cards/_3d-space.scss
85
+ - assets/css/main.scss
80
86
  - assets/img/common/favicon.ico
87
+ - assets/js/bootstrap/nav-tabs.js
88
+ - assets/js/product-cards/3d-space.js
81
89
  - assets/xml/opensearch.xml
82
90
  homepage: https://github.com/cetinajero/jekyll-theme-marketing
83
91
  licenses: