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 +4 -4
- data/_includes/body/product-cards/3d-space.html +49 -0
- data/_includes/head/fonts.html +3 -0
- data/_layouts/page.html +47 -0
- data/_layouts/product.html +39 -4
- data/_sass/breadcrumbs/_bootstrap.scss +13 -0
- data/_sass/common/_common.scss +17 -0
- data/_sass/layouts/_product.scss +14 -0
- data/_sass/product-cards/_3d-space.scss +438 -0
- data/assets/css/main.scss +14 -0
- data/assets/js/bootstrap/nav-tabs.js +36 -0
- data/assets/js/product-cards/3d-space.js +112 -0
- metadata +10 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2eca1c61d528aac7269ec959477733071d8ec008
|
4
|
+
data.tar.gz: 9a3a26e1f5cd01e40231106fa65e20acabaca79b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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>
|
data/_includes/head/fonts.html
CHANGED
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
|
|
data/_layouts/product.html
CHANGED
@@ -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
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
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,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,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.
|
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
|
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:
|