jekyll-theme-marketing 0.3.0 → 0.4.0

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.
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: