75 changed files with 2189 additions and 0 deletions
@ -0,0 +1,17 @@ |
|||
{ |
|||
"presets": [ |
|||
["@babel/preset-env", { |
|||
"targets": { |
|||
"browsers": [ |
|||
"last 2 versions", |
|||
"ie >= 10" |
|||
] |
|||
}, |
|||
"useBuiltIns": "entry" |
|||
}] |
|||
], |
|||
"plugins": [ |
|||
["transform-class-properties", { "spec": true }], |
|||
"transform-object-assign" |
|||
] |
|||
} |
|||
@ -0,0 +1,34 @@ |
|||
{ |
|||
"extends": [ |
|||
"google", |
|||
"prettier" |
|||
], |
|||
"plugins": [ |
|||
"prettier" |
|||
], |
|||
"parser": "babel-eslint", |
|||
"parserOptions": { |
|||
"sourceType": "module" |
|||
}, |
|||
"env": { |
|||
"es6": true, |
|||
"node": true |
|||
}, |
|||
"rules": { |
|||
"comma-dangle": [2,"never"], |
|||
"no-invalid-this": 0, |
|||
"require-jsdoc": 0, |
|||
"max-len": ["error", { "code": 120 }], |
|||
|
|||
"object-curly-spacing": ["error", "never"], |
|||
"array-bracket-spacing": ["error", "never"], |
|||
"computed-property-spacing": ["error", "never"], |
|||
|
|||
"semi": ["error", "always"], |
|||
"arrow-parens": ["error", "always"], |
|||
|
|||
"no-mixed-spaces-and-tabs": "error", |
|||
"indent": ["error", 2], |
|||
"no-trailing-spaces": "error" |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
# Cache, temp and personal files |
|||
|
|||
/.htaccess |
|||
*.log |
|||
.sass-cache/ |
|||
|
|||
node_modules/ |
|||
public/ |
|||
package-lock.json |
|||
|
|||
@ -0,0 +1,33 @@ |
|||
<div class="component-article"> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-12 col-md-10 pb-4"> |
|||
<div class="row"> |
|||
|
|||
<div class="col-12 pb-4"> |
|||
<input type="text" class="input-gray" placeholder="Cerca..."> |
|||
</div> |
|||
|
|||
<div class="col-12"> |
|||
<img class="image" src="/images/articleHeader.png"> |
|||
</div> |
|||
<div class="col-12"> |
|||
<h2 class="title"> |
|||
La tecnica dell'assaggio |
|||
</h2> |
|||
<span class="subtitle"> |
|||
Come degustare un olio extravergine |
|||
</span> |
|||
<span class="text"> |
|||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
|||
</span> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-12 col-md-2 banner"> |
|||
<br><br>banner<br><br> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,5 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - article') |
|||
|
|||
}) |
|||
@ -0,0 +1,41 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-article { |
|||
padding: 40px 0; |
|||
|
|||
.banner { |
|||
background: $light-gray; |
|||
text-align: center; |
|||
} |
|||
|
|||
.image { |
|||
width: 100%; |
|||
} |
|||
|
|||
.title { |
|||
display: block; |
|||
font-size: $font-30; |
|||
font-weight: normal; |
|||
padding: 15px 0; |
|||
margin: 0; |
|||
color: $olive; |
|||
} |
|||
|
|||
.subtitle { |
|||
display: block; |
|||
font-size: $font-18; |
|||
font-weight: bold; |
|||
padding-bottom: 7px; |
|||
margin-bottom: 15px; |
|||
color: $dark-gray; |
|||
} |
|||
|
|||
.text { |
|||
display: block; |
|||
font-size: $font-16; |
|||
padding-bottom: 5px; |
|||
color: $dark-gray; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
<div class="component-articleBox"> |
|||
<a href="/article"> |
|||
<img class="image" src="/images/article1.png"> |
|||
<span class="title">Titolo articolo </span> |
|||
<span class="marker olive"></span> |
|||
</a> |
|||
</div> |
|||
@ -0,0 +1,5 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - articleBox') |
|||
|
|||
}) |
|||
@ -0,0 +1,60 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-articleBox { |
|||
|
|||
position: relative; |
|||
padding-bottom: 20px; |
|||
height: 100%; |
|||
|
|||
.image { |
|||
width: 100%; |
|||
padding-bottom: 10px; |
|||
} |
|||
|
|||
.title { |
|||
display: block; |
|||
width: 100%; |
|||
padding-right: 5px; |
|||
font-size: $font-16; |
|||
font-weight: 600; |
|||
line-height: $font-16; |
|||
color: $black; |
|||
} |
|||
|
|||
.marker { |
|||
position: absolute; |
|||
top: 10px; |
|||
left: 10px; |
|||
|
|||
&:before { |
|||
position: absolute; |
|||
content: '\e903'; |
|||
font-family: $icon; |
|||
font-size: 30px; |
|||
color: $white; |
|||
} |
|||
&:after { |
|||
position: absolute; |
|||
top: 4px; |
|||
left: 3px; |
|||
content: '\e903'; |
|||
font-family: $icon; |
|||
font-size: 24px; |
|||
color: $gray; |
|||
} |
|||
&.olive { |
|||
&:after {color: $olive;} |
|||
} |
|||
&.gray { |
|||
&:after {color: $dark-gray;} |
|||
} |
|||
&.white { |
|||
&:after {color: $white;} |
|||
} |
|||
&.orange { |
|||
&:after {color: $orange;} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
<div class="component-articleBox"> |
|||
<a href="/article"> |
|||
<img class="image" src="/images/article2.png"> |
|||
<span class="title">Titolo articolo test 2 </span> |
|||
<span class="marker gray"></span> |
|||
</a> |
|||
</div> |
|||
@ -0,0 +1,7 @@ |
|||
<div class="component-articleBox"> |
|||
<a href="/article"> |
|||
<img class="image" src="/images/article3.png"> |
|||
<span class="title">Titolo articolo </span> |
|||
<span class="marker white"></span> |
|||
</a> |
|||
</div> |
|||
@ -0,0 +1,7 @@ |
|||
<div class="component-articleBox"> |
|||
<a href="/article"> |
|||
<img class="image" src="/images/article4.png"> |
|||
<span class="title">Titolo articolo </span> |
|||
<span class="marker orange"></span> |
|||
</a> |
|||
</div> |
|||
@ -0,0 +1,53 @@ |
|||
<div class="component-articles"> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-12 col-md-10"> |
|||
<div class="row"> |
|||
|
|||
<div class="col-12 pb-1"> |
|||
<input type="text" class="input-gray" placeholder="Cerca..."> |
|||
</div> |
|||
|
|||
<div class="col-12 pb-4"> |
|||
<select class="select"> |
|||
<option value="">Filtra</option> |
|||
<option value="1">Opzione 1</option> |
|||
<option value="2">Opzione 2</option> |
|||
<option value="3">Opzione 3</option> |
|||
<option value="4">Opzione 4</option> |
|||
</select> |
|||
</div> |
|||
|
|||
|
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../articleBox/articleBox.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../articleBox/articleBox2.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../articleBox/articleBox3.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../articleBox/articleBox4.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../articleBox/articleBox.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../articleBox/articleBox.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../articleBox/articleBox.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../articleBox/articleBox.html')} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-12 col-md-2 banner"> |
|||
<br><br>banner |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,5 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - articles') |
|||
|
|||
}) |
|||
@ -0,0 +1,11 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-articles { |
|||
padding: 40px 0; |
|||
|
|||
.banner { |
|||
background: $light-gray; |
|||
text-align: center; |
|||
} |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
<div class="component-footer"> |
|||
<div class="container d-flex my-auto"> |
|||
<ul class="menu"> |
|||
<li class="item mr-md-4"> |
|||
<a href="/iolovolio" class="label"><b>io</b>lov<b>olio</b></a> |
|||
</li> |
|||
<li class="item"> |
|||
<a href="/terms" class="label">Termini servizio</a> |
|||
</li> |
|||
<li class="item"> |
|||
<a href="/privacy" class="label">Privacy</a> |
|||
</li> |
|||
<li class="item"> |
|||
<a href="/contacts" class="label">Contatti</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,5 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - footer') |
|||
|
|||
}) |
|||
@ -0,0 +1,48 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-footer { |
|||
//position: absolute; |
|||
display: flex; |
|||
padding: 10px 0; |
|||
text-align: center; |
|||
width: 100%; |
|||
bottom: 0; |
|||
background: $gray; |
|||
color: $white; |
|||
|
|||
.menu { |
|||
display: block; |
|||
height: 100%; |
|||
width: 100%; |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
|
|||
.item { |
|||
display: block; |
|||
color: $white; |
|||
margin: auto 20px auto 0; |
|||
font-size: $font-12; |
|||
letter-spacing: 2px; |
|||
padding: 5px; |
|||
|
|||
.label { |
|||
color: $white; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
@media (min-width: map-get($grid-breakpoints, 'md')) { |
|||
.component-footer { |
|||
height: $footer-height; |
|||
.menu { |
|||
display: flex; |
|||
.item { |
|||
display: flex; |
|||
padding: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,46 @@ |
|||
<header class="component-header"> |
|||
|
|||
<div class="container header-wrapper"> |
|||
<button class="hamburger hamburger--spin my-auto"> |
|||
<span class="hamburger-box"> |
|||
<span class="hamburger-inner"></span> |
|||
</span> |
|||
</button> |
|||
|
|||
<div class="actions"> |
|||
<button class="icon icon-user"></button> |
|||
<button class="icon icon-cart"><span class="qty">3</span></button> |
|||
</div> |
|||
|
|||
<ul class="menu"> |
|||
<li class="item <?php if(!$_GET['q'] || $_GET['q'] == 'iolovolio') { echo "active";}?>"> |
|||
<a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a> |
|||
</li> |
|||
<li class="item <?php if($_GET['q'] == 'buy' || $_GET['q'] == 'product') { echo "active";}?>"> |
|||
<a href="/buy" class="label">acquistare</a> |
|||
</li> |
|||
<li class="item <?php if($_GET['q'] == 'article' || $_GET['q'] == 'learn') { echo "active";}?>"> |
|||
<a href="/learn" class="label">imparare</a> |
|||
</li> |
|||
<li class="item disabled"> |
|||
<span class="label">produrre (coming soon)</span> |
|||
</li> |
|||
</ul> |
|||
|
|||
<ul class="sidebar-menu"> |
|||
<li class="item <?php if(!$_GET['q'] || $_GET['q'] == 'iolovolio') { echo "active";}?>"> |
|||
<a href="/iolovolio" class="label"><b>io</b>lov<b>olio ...</b></a> |
|||
</li> |
|||
<li class="item <?php if($_GET['q'] == 'buy' || $_GET['q'] == 'product') { echo "active";}?>"> |
|||
<a href="/buy" class="label">acquistare</a> |
|||
</li> |
|||
<li class="item <?php if($_GET['q'] == 'article' || $_GET['q'] == 'learn') { echo "active";}?>"> |
|||
<a href="/learn" class="label">imparare</a> |
|||
</li> |
|||
<li class="item disabled"> |
|||
<span class="label">produrre (coming soon)</span> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
</header> |
|||
@ -0,0 +1,23 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - header') |
|||
|
|||
const component = $('.component-header') |
|||
|
|||
const hamburger = component.find('.hamburger') |
|||
const menu = component.find('.sidebar-menu') |
|||
|
|||
hamburger.off('.click').on('click.click', (e) => { |
|||
const ham = $(e.currentTarget) |
|||
|
|||
ham.toggleClass('is-active') |
|||
console.log(ham, menu) |
|||
|
|||
if(ham.hasClass('is-active')){ |
|||
menu.addClass('active') |
|||
} else { |
|||
menu.removeClass('active') |
|||
} |
|||
}) |
|||
|
|||
}) |
|||
@ -0,0 +1,167 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-header { |
|||
position: fixed; |
|||
display: flex; |
|||
top: 0; |
|||
left: 0; |
|||
height: $header-height-mobile; |
|||
width: 100%; |
|||
background: $olive; |
|||
color: $white; |
|||
z-index: 200; |
|||
|
|||
.header-wrapper { |
|||
display: flex; |
|||
position: relative; |
|||
|
|||
.hamburger { |
|||
display: flex; |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.actions { |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
|
|||
.icon { |
|||
position: relative; |
|||
margin: 0 5px; |
|||
padding: 0; |
|||
background: none; |
|||
border: none; |
|||
color: $white; |
|||
font-size: $font-24; |
|||
|
|||
.qty { |
|||
position: absolute; |
|||
top: -5px; |
|||
right: -5px; |
|||
height: 15px; |
|||
width: 15px; |
|||
border-radius: 50%; |
|||
background: $orange; |
|||
color: $white; |
|||
font-size: $font-12; |
|||
line-height: $font-16; |
|||
font-family: $font-sans; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.menu { |
|||
display: none; |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
|
|||
.item { |
|||
display: flex; |
|||
color: $white; |
|||
margin: auto 20px; |
|||
font-size: $font-20; |
|||
letter-spacing: 2px; |
|||
|
|||
.label { |
|||
color: $white; |
|||
} |
|||
|
|||
&.active { |
|||
border-bottom: 2px solid $white; |
|||
} |
|||
|
|||
&.disabled { |
|||
.label { |
|||
color: $white-alpha; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.sidebar-menu { |
|||
position: fixed; |
|||
top: $header-height-mobile; |
|||
left: 0; |
|||
height: calc(100vh - #{$header-height-mobile}); |
|||
background: $olive; |
|||
display: block; |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
transform: translateX(-100%); |
|||
transition: transform .3s; |
|||
|
|||
.item { |
|||
display: block; |
|||
color: $white; |
|||
margin: 20px; |
|||
font-size: $font-20; |
|||
letter-spacing: 2px; |
|||
padding: 20px; |
|||
border-bottom: 1px dotted $gray; |
|||
|
|||
.label { |
|||
color: $white; |
|||
} |
|||
|
|||
&.active { |
|||
//border-bottom: 2px solid $white; |
|||
} |
|||
|
|||
&.disabled { |
|||
.label { |
|||
color: $white-alpha; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.active { |
|||
transform: translateX(0%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
@media (min-width: map-get($grid-breakpoints, 'md')) { |
|||
.component-header { |
|||
height: $header-height; |
|||
|
|||
.header-wrapper { |
|||
.actions { |
|||
position: absolute; |
|||
right: 0; |
|||
|
|||
.icon { |
|||
margin: 0 5px; |
|||
font-size: $font-30; |
|||
|
|||
.qty { |
|||
position: absolute; |
|||
top: -15px; |
|||
right: -15px; |
|||
height: 25px; |
|||
width: 25px; |
|||
font-size: $font-20; |
|||
line-height: $font-24; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.menu { |
|||
display: flex; |
|||
} |
|||
|
|||
.sidebar-menu { |
|||
top: $header-height; |
|||
height: calc(100vh - #{$header-height}); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,22 @@ |
|||
<div class="component-home"> |
|||
<div class="container my-auto"> |
|||
<div class="row"> |
|||
<div class="col-12 col-sm-6 col-md-4 order-1 order-md-0"> |
|||
<img class="drop" src="/images/drop1.png"> |
|||
<span class="title"><b>io</b>lov<b>olio</b> acquistare</span> |
|||
<span class="subtitle"></span> |
|||
<a href="/buy" class="button button-big w-100 text-uppercase">Vai allo shop</a> |
|||
</div> |
|||
<div class="col-12 col-md-4 order-0 order-md-1"> |
|||
<img class="logo" src="/images/logo.png"> |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-4 order-2 order-md-2"> |
|||
<img class="drop" src="/images/drop2.png"> |
|||
<span class="title"><b>io</b>lov<b>olio</b> produrre</span> |
|||
<span class="subtitle">Avvisami quando l'opzione sarà attiva</span> |
|||
<input type="text" class="input input-big" placeholder="latuamail@mail.com"> |
|||
<span class="privacy">*Autorizzo il trattamento dei miei dati personali ai sensi del Dlgs 196 del 30 giugno 2003 e dell'art. 13 GDPR (Regolamento UE 2016/679)</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,5 @@ |
|||
/* |
|||
$(document).ready( () => { |
|||
console.log('Load component - home') |
|||
|
|||
})*/ |
|||
@ -0,0 +1,54 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-home { |
|||
display: flex; |
|||
background: $olive; |
|||
min-height: calc(100vh - #{$footer-height}); |
|||
padding: $header-height-mobile 40px 0 40px; |
|||
|
|||
.drop { |
|||
width: 100%; |
|||
padding: 40px 70px 10px 70px; |
|||
} |
|||
|
|||
.title { |
|||
display: block; |
|||
color: $white; |
|||
font-size: $font-28; |
|||
text-align: center; |
|||
} |
|||
|
|||
.subtitle { |
|||
display: block; |
|||
min-height: 30px; |
|||
color: $white; |
|||
font-size: $font-18; |
|||
text-align: center; |
|||
} |
|||
|
|||
.privacy { |
|||
display: block; |
|||
color: $white; |
|||
font-size: $font-12; |
|||
text-align: left; |
|||
padding-bottom: 50px; |
|||
} |
|||
|
|||
.logo { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
@media (min-width: map-get($grid-breakpoints, 'md')) { |
|||
.component-home { |
|||
padding: $header-height 40px 0 40px; |
|||
|
|||
.logo { |
|||
width: calc(100% + 100px); |
|||
position: absolute; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,41 @@ |
|||
<div class="component-pdp"> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-12 col-md-10 pb-4"> |
|||
<div class="row"> |
|||
|
|||
<div class="col-12 pb-4"> |
|||
<input type="text" class="input-gray" placeholder="Cerca..."> |
|||
</div> |
|||
|
|||
<div class="col-12 col-sm-6 col-md-5"> |
|||
<img class="image" src="/images/prod2.png"> |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-4 px-3"> |
|||
<h2 class="title"> |
|||
Nome prodotto |
|||
</h2> |
|||
<span class="subtitle"> |
|||
Dettagli |
|||
</span> |
|||
<span class="text"> |
|||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
|||
</span> |
|||
</div> |
|||
<div class="col-12 col-sm-12 col-md-3"> |
|||
<span class="price">17,90 €</span> |
|||
<button class="button button-black w-100">Aggiungi al carrello</button> |
|||
<div class="related"> |
|||
<br><br>Prodotti correlati<br><br> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-12 col-md-2 banner"> |
|||
<br><br>banner<br><br> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,5 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - pdp') |
|||
|
|||
}) |
|||
@ -0,0 +1,54 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-pdp { |
|||
padding: 40px 0; |
|||
|
|||
.banner { |
|||
background: $light-gray; |
|||
text-align: center; |
|||
} |
|||
|
|||
.image { |
|||
width: 100%; |
|||
} |
|||
|
|||
.title { |
|||
display: block; |
|||
font-size: $font-30; |
|||
font-weight: normal; |
|||
padding: 0 0 30px 0; |
|||
margin: 0; |
|||
} |
|||
|
|||
.subtitle { |
|||
display: block; |
|||
font-size: $font-12; |
|||
text-transform: uppercase; |
|||
padding-bottom: 7px; |
|||
margin-bottom: 30px; |
|||
border-bottom: 1px solid $gray; |
|||
} |
|||
|
|||
.text { |
|||
display: block; |
|||
font-size: $font-12; |
|||
padding-bottom: 5px; |
|||
} |
|||
|
|||
.price { |
|||
display: block; |
|||
font-size: $font-26; |
|||
font-weight: normal; |
|||
text-align: right; |
|||
padding: 0 0 20px 0; |
|||
margin: 0; |
|||
} |
|||
|
|||
.related { |
|||
background: $light-gray; |
|||
text-align: center; |
|||
margin-top: 40px; |
|||
height: calc(100% - 130px); |
|||
} |
|||
} |
|||
@ -0,0 +1,53 @@ |
|||
<div class="component-plp"> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-12 col-md-10"> |
|||
<div class="row"> |
|||
|
|||
<div class="col-12 pb-1"> |
|||
<input type="text" class="input-gray" placeholder="Cerca..."> |
|||
</div> |
|||
|
|||
<div class="col-12 pb-4"> |
|||
<select class="select"> |
|||
<option value="">Filtra</option> |
|||
<option value="1">Opzione 1</option> |
|||
<option value="2">Opzione 2</option> |
|||
<option value="3">Opzione 3</option> |
|||
<option value="4">Opzione 4</option> |
|||
</select> |
|||
</div> |
|||
|
|||
|
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox2.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox3.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox4.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox.html')} |
|||
</div> |
|||
<div class="col-12 col-sm-6 col-md-3"> |
|||
${require('../productBox/productBox.html')} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-12 col-md-2 banner"> |
|||
<br><br>banner<br><br> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,5 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - plp') |
|||
|
|||
}) |
|||
@ -0,0 +1,12 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-plp { |
|||
padding: 40px 0; |
|||
|
|||
.banner { |
|||
background: $light-gray; |
|||
text-align: center; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
<div class="component-productBox"> |
|||
<a href="/product"> |
|||
<img class="image" src="/images/prod1.png"> |
|||
<div class="d-flex"> |
|||
<span class="title">Nome prodotto </span> |
|||
<span class="price">17,90 €</span> |
|||
</div> |
|||
</a> |
|||
<button class="button button-black add-to-cart">Aggiungi al carrello</button> |
|||
</div> |
|||
@ -0,0 +1,5 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - productBox') |
|||
|
|||
}) |
|||
@ -0,0 +1,40 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-productBox { |
|||
position: relative; |
|||
padding-bottom: 80px; |
|||
height: 100%; |
|||
|
|||
.image { |
|||
width: 100%; |
|||
padding-bottom: 10px; |
|||
} |
|||
|
|||
.title { |
|||
display: inline-block; |
|||
width: calc(100% - 70px); |
|||
padding-right: 5px; |
|||
font-size: $font-16; |
|||
font-weight: 600; |
|||
line-height: $font-16; |
|||
color: $black; |
|||
} |
|||
|
|||
.price { |
|||
display: inline-block; |
|||
width: 70px; |
|||
font-size: $font-16; |
|||
font-weight: light; |
|||
text-align: right; |
|||
white-space: no-wrap; |
|||
color: $black; |
|||
} |
|||
|
|||
.add-to-cart{ |
|||
position: absolute; |
|||
bottom: 20px; |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,10 @@ |
|||
<div class="component-productBox"> |
|||
<a href="/product"> |
|||
<img class="image" src="/images/prod2.png"> |
|||
<div class="d-flex"> |
|||
<span class="title">Nome prodotto Nome prodotto Nome prodotto </span> |
|||
<span class="price">170,90 €</span> |
|||
</div> |
|||
</a> |
|||
<button class="button button-black add-to-cart">Aggiungi al carrello</button> |
|||
</div> |
|||
@ -0,0 +1,10 @@ |
|||
<div class="component-productBox"> |
|||
<a href="/product"> |
|||
<img class="image" src="/images/prod3.png"> |
|||
<div class="d-flex"> |
|||
<span class="title">Nome prodotto</span> |
|||
<span class="price">7,90 €</span> |
|||
</div> |
|||
</a> |
|||
<button class="button button-black add-to-cart">Aggiungi al carrello</button> |
|||
</div> |
|||
@ -0,0 +1,10 @@ |
|||
<div class="component-productBox"> |
|||
<a href="/product"> |
|||
<img class="image" src="/images/prod4.png"> |
|||
<div class="d-flex"> |
|||
<span class="title">Nome prodotto</span> |
|||
<span class="price">8,90 €</span> |
|||
</div> |
|||
</a> |
|||
<button class="button button-black add-to-cart">Aggiungi al carrello</button> |
|||
</div> |
|||
@ -0,0 +1,8 @@ |
|||
RewriteEngine On |
|||
RewriteCond %{REQUEST_FILENAME} !-f |
|||
RewriteRule ^([^\.]+)$ index.php?q=$1 [NC,L] |
|||
# |
|||
# Rewritebase / |
|||
# RewriteCond %{REQUEST_FILENAME} !-f |
|||
# RewriteCond %{REQUEST_FILENAME} !-d |
|||
# RewriteRule ^(.*)$ index.php?q=$1 [L,QSA] |
|||
@ -0,0 +1,5 @@ |
|||
|
|||
${require('../components/article/article.html')} |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,5 @@ |
|||
|
|||
${require('../components/plp/plp.html')} |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,5 @@ |
|||
|
|||
${require('../components/home/home.html')} |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,32 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="it"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>IoLovOlio</title> |
|||
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> |
|||
<meta name="description" content="."> |
|||
<link rel="stylesheet" href="/assets/css/styles.css"> |
|||
</head> |
|||
<body> |
|||
|
|||
${require('../components/header/header.html')} |
|||
|
|||
|
|||
<?php |
|||
if(!$_GET['q'] || $_GET['q'] == 'home' || $_GET['q'] == 'iolovolio') { |
|||
@include 'home.php'; |
|||
} else { |
|||
?> |
|||
<main class="main-content"> |
|||
<?php |
|||
@include $_GET['q'].'.php'; |
|||
?> |
|||
</main> |
|||
<?php |
|||
} |
|||
?> |
|||
|
|||
${require('../components/footer/footer.html')} |
|||
|
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,5 @@ |
|||
|
|||
${require('../components/articles/articles.html')} |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,4 @@ |
|||
${require('../components/pdp/pdp.html')} |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,5 @@ |
|||
<div class="component-breadcrumb"> |
|||
<div class="row no-gutters"> |
|||
breadcrumb |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,5 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - breadcrumb') |
|||
|
|||
}) |
|||
@ -0,0 +1,8 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-breadcrumb { |
|||
width: 100%; |
|||
background: $brown; |
|||
height: 100px; |
|||
} |
|||
@ -0,0 +1,40 @@ |
|||
<header class="component-header"> |
|||
|
|||
<div class="container header-wrapper"> |
|||
|
|||
<img class="logo" src="/images/logoHeader.png"> |
|||
|
|||
<button class="hamburger hamburger--spring my-auto"> |
|||
<span class="hamburger-box"> |
|||
<span class="hamburger-inner"></span> |
|||
</span> |
|||
</button> |
|||
|
|||
|
|||
<nav class="menu-container"> |
|||
<span class="menu-label"> |
|||
<a href="/iolovolio" class="label">iolovolio</b></a> |
|||
</span> |
|||
|
|||
<ul class="menu"> |
|||
<li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>"> |
|||
<a href="/learn" class="label">conoscere</a> |
|||
</li> |
|||
<li class="item <?php if($_GET['q'] == 'produce') { echo "active";}?>"> |
|||
<a href="/produce" class="label">produrre</a> |
|||
</li> |
|||
<li class="item <?php if($_GET['q'] == 'buy') { echo "active";}?>"> |
|||
<a href="/buy" class="label">acquistare</a> |
|||
</li> |
|||
<li class="item <?php if($_GET['q'] == 'recount') { echo "active";}?>"> |
|||
<a href="/recount" class="label">raccontare</a> |
|||
</li> |
|||
</ul> |
|||
</nav> |
|||
</div> |
|||
|
|||
<?php |
|||
@include('components/breadcrumb/breadcrumb.php'); |
|||
?> |
|||
|
|||
</header> |
|||
@ -0,0 +1,26 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - header') |
|||
|
|||
const component = $('.component-header') |
|||
|
|||
const hamburger = component.find('.hamburger') |
|||
const menuContainer = component.find('.menu-container') |
|||
const menu = menuContainer.find('.menu') |
|||
|
|||
hamburger.off('.click').on('click.click', (e) => { |
|||
const ham = $(e.currentTarget) |
|||
console.log('toggle') |
|||
ham.toggleClass('is-active') |
|||
console.log(ham, menu) |
|||
|
|||
if(ham.hasClass('is-active')){ |
|||
menuContainer.addClass('active') |
|||
menu.slideDown() |
|||
} else { |
|||
menuContainer.removeClass('active') |
|||
menu.slideUp() |
|||
} |
|||
}) |
|||
|
|||
}) |
|||
@ -0,0 +1,110 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
@import "../../src/scss/mixins.scss"; |
|||
|
|||
.component-header { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
min-height: $header-height-mobile; |
|||
width: 100%; |
|||
background: $white; |
|||
color: $black; |
|||
z-index: 200; |
|||
|
|||
.header-wrapper { |
|||
display: flex; |
|||
position: relative; |
|||
min-height: $header-height-mobile; |
|||
|
|||
.logo { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
height: 70px; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
.hamburger { |
|||
position: absolute; |
|||
top: 45px; |
|||
right: 20px; |
|||
} |
|||
|
|||
.menu-container { |
|||
margin: 100px 0 20px auto; |
|||
|
|||
.menu-label { |
|||
//display: none; |
|||
position: absolute; |
|||
right: 35px; |
|||
top: 80px; |
|||
opacity: 0; |
|||
transition: transform .4s, right .4s, opacity .4s; |
|||
transform-origin: right; |
|||
transform: rotate(-90deg); |
|||
-webkit-backface-visibility: hidden; |
|||
|
|||
.label { |
|||
@include font-style($font-serif, 'regular', $font-18); |
|||
color: $brown; |
|||
transition: font-size .4s; |
|||
} |
|||
} |
|||
|
|||
.menu { |
|||
text-align: right; |
|||
display: none; |
|||
opacity: 0; |
|||
transition: opacity .4s; |
|||
|
|||
.item { |
|||
padding: 0 5px; |
|||
|
|||
.label { |
|||
@include font-style($font-serif, 'regular', $font-18); |
|||
color: $olive-dark; |
|||
} |
|||
|
|||
&:first-of-type { |
|||
padding-top: 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.active { |
|||
.menu-label { |
|||
opacity: 1; |
|||
transform: rotate(0deg); |
|||
right: 20px; |
|||
.label { |
|||
font-size:$font-14; |
|||
} |
|||
} |
|||
|
|||
.menu { |
|||
opacity: 1; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
@media (min-width: map-get($grid-breakpoints, 'md')) { |
|||
.component-header { |
|||
min-height: $header-height; |
|||
.header-wrapper { |
|||
min-height: $header-height; |
|||
.menu-container { |
|||
.menu-label { |
|||
//display: block; |
|||
opacity: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,18 @@ |
|||
|
|||
COMPDIR="components/$2" |
|||
|
|||
if [ ${1} = "add" ] |
|||
then |
|||
mkdir $COMPDIR |
|||
printf "<div class=\"component-$2\">\n <div class=\"row no-gutters\">\n </div>\n</div>" > "$COMPDIR/$2.html" |
|||
printf "@import \"../../src/scss/variables.scss\";\n@import \"../../src/scss/mixins.scss\";\n \n.component-$2 {\n\n}" > "$COMPDIR/$2.scss" |
|||
printf "\n\$(document).ready( () => {\n console.log('Load component - $2')\n\n})" > "$COMPDIR/$2.js" |
|||
echo "@import \"./components/$2/$2.scss\";" >> src/scss/main.scss |
|||
fi |
|||
|
|||
if [ ${1} = "del" ] |
|||
then |
|||
rm -rf $COMPDIR |
|||
sed -i "\/$2\/$2.scss/d" src/scss/main.scss |
|||
fi |
|||
|
|||
@ -0,0 +1,19 @@ |
|||
#!/bin/bash |
|||
|
|||
BASE="http://2.238.194.8/iolovolio/" |
|||
|
|||
BASE_PARSED=$(echo $BASE | sed 's/\//\\\//g') |
|||
|
|||
cd public |
|||
for f in *.php |
|||
do |
|||
sed -i "s/href\=\"\//href\=\"$BASE_PARSED/g" "$f" |
|||
sed -i "s/src\=\"\//src\=\"$BASE_PARSED/g" "$f" |
|||
sed -i "s/src\=\"\.\//src\=\"$BASE_PARSED/g" "$f" |
|||
done |
|||
cd .. |
|||
|
|||
#scp -r -i ./auth/marketmind.pem ./public/* ubuntu@18.194.83.82:/var/www/anesacademy.com/ |
|||
# rsync -avz --delete -e "ssh -i ./auth/marketmind.pem" ./public/* ubuntu@18.194.83.82:/var/www/anesacademy.com/ |
|||
rsync -avz --delete -e "ssh -p2222" ./public/* cdr@2.238.194.8:/www/iolovolio/ |
|||
# scp -r ./public/.htaccess cdr@2.238.194.8:/www/iolovolio/.htaccess |
|||
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 985 KiB |
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,57 @@ |
|||
{ |
|||
"name": "iolovolio", |
|||
"version": "1.0.0", |
|||
"description": "IoLoVolio", |
|||
"main": "index.js", |
|||
"repository": "http://git.dslak.it:3000/dslak/iolovolio.git", |
|||
"scripts": { |
|||
"dev": "nodemon --watch webpack.config.js --exec \"webpack --config webpack.config.js --watch --progress --mode development\"", |
|||
"prod": "webpack --config webpack.config.js --mode none --env.prod", |
|||
"deploy": "sh deploy.sh", |
|||
"add-comp": "sh ./comps.sh add", |
|||
"del-comp": "sh ./comps.sh del", |
|||
"preview": "http-server", |
|||
"clean": "rm -rf ./node_modules ./public ./package-lock.json" |
|||
}, |
|||
"author": "Dslak", |
|||
"license": "MIT", |
|||
"dependencies": { |
|||
"@babel/core": "^7.12.10", |
|||
"@babel/preset-env": "^7.12.10", |
|||
"autoprefixer": "^10.1.0", |
|||
"babel-eslint": "^10.1.0", |
|||
"babel-loader": "^8.2.2", |
|||
"babel-plugin-transform-class-properties": "^6.24.1", |
|||
"babel-plugin-transform-object-assign": "^6.22.0", |
|||
"base-href-webpack-plugin": "^2.0.0", |
|||
"bootstrap": "^4.5.3", |
|||
"copy-webpack-plugin": "^6.0.3", |
|||
"css-loader": "^5.0.1", |
|||
"es6-promise-promise": "^1.0.0", |
|||
"eslint": "^7.15.0", |
|||
"eslint-config-google": "^0.14.0", |
|||
"eslint-config-prettier": "^7.0.0", |
|||
"eslint-plugin-prettier": "^3.2.0", |
|||
"extract-loader": "^5.1.0", |
|||
"file-loader": "^6.2.0", |
|||
"glob": "^7.1.6", |
|||
"hamburgers": "^1.1.3", |
|||
"handlebars": "^4.7.6", |
|||
"html-loader": "^1.3.2", |
|||
"html-webpack-plugin": "^3.2.0", |
|||
"http-server": "^0.12.3", |
|||
"jquery": "^3.5.1", |
|||
"mini-css-extract-plugin": "^1.3.3", |
|||
"minimist": "^1.2.5", |
|||
"node-sass": "^5.0.0", |
|||
"nodemon": "^2.0.6", |
|||
"popper.js": "^1.16.1", |
|||
"postcss-loader": "^4.1.0", |
|||
"prettier": "^2.2.1", |
|||
"sass-loader": "^10.1.0", |
|||
"url-loader": "^4.1.1", |
|||
"webpack": "^4.44.2", |
|||
"webpack-cli": "^4.2.0", |
|||
"webpack-notifier": "^1.12.0" |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
RewriteEngine On |
|||
RewriteCond %{REQUEST_FILENAME} !-f |
|||
RewriteRule ^([^\.]+)$ index.php?q=$1 [NC,L] |
|||
# |
|||
# Rewritebase / |
|||
# RewriteCond %{REQUEST_FILENAME} !-f |
|||
# RewriteCond %{REQUEST_FILENAME} !-d |
|||
# RewriteRule ^(.*)$ index.php?q=$1 [L,QSA] |
|||
@ -0,0 +1,31 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="it"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>IoLovOlio</title> |
|||
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> |
|||
<meta name="description" content="."> |
|||
<link rel="stylesheet" href="/assets/css/styles.css"> |
|||
</head> |
|||
<body> |
|||
|
|||
${require('../components/header/header.html')} |
|||
|
|||
|
|||
<?php |
|||
if(!$_GET['q'] || $_GET['q'] == 'home' || $_GET['q'] == 'iolovolio') { |
|||
@include 'home.php'; |
|||
} else { |
|||
?> |
|||
<main class="main-content"> |
|||
<?php |
|||
@include $_GET['q'].'.php'; |
|||
?> |
|||
</main> |
|||
<?php |
|||
} |
|||
?> |
|||
|
|||
|
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,13 @@ |
|||
const autoprefixer = require('autoprefixer') |
|||
|
|||
module.exports = { |
|||
plugins: [ |
|||
autoprefixer({ |
|||
overrideBrowserslist: [ |
|||
'last 2 versions', |
|||
'> 1%', |
|||
'maintained node versions', |
|||
'not dead', 'ie >= 10'] |
|||
}) |
|||
] |
|||
} |
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,22 @@ |
|||
|
|||
window.readyResize = (callback, orientation = false) => { |
|||
if ($.isFunction(callback)) { |
|||
$(document).ready(()=>{ |
|||
callback() |
|||
}) |
|||
$(window).resize(()=>{ |
|||
console.log('Window resize ') |
|||
callback() |
|||
}) |
|||
if(orientation) { |
|||
window.addEventListener("orientationchange", () => { |
|||
const WCO = ($(window).width() > $(window).height()) ? "landscape" : "portrait" |
|||
console.log('Change orientation: ' + WCO) |
|||
callback() |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
@ -0,0 +1 @@ |
|||
@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display&family=Open+Sans:300,400,500,700&display=swap'); |
|||
@ -0,0 +1,232 @@ |
|||
|
|||
input, |
|||
button { |
|||
border: 1px solid $black; |
|||
background: $white; |
|||
border-radius: 0; |
|||
height: 28px; |
|||
} |
|||
|
|||
button { |
|||
border: none; |
|||
cursor: pointer; |
|||
outline: 0 !important; |
|||
|
|||
&:active, |
|||
&:focus, |
|||
&:visited, |
|||
&:hover { |
|||
outline: 0 !important; |
|||
} |
|||
|
|||
|
|||
&:-moz-focusring { |
|||
//color: transparent; |
|||
text-shadow: 0 0 0 $black; |
|||
} |
|||
|
|||
::-moz-focus-inner {border:0;} |
|||
|
|||
} |
|||
|
|||
input, |
|||
select, |
|||
textarea { |
|||
font-size: $font-12; |
|||
border-radius: 0; |
|||
background: $white; |
|||
width: 100%; |
|||
outline: none !important; |
|||
|
|||
&:active, |
|||
&:focus{ |
|||
outline: none !important; |
|||
} |
|||
|
|||
&:-moz-focusring { |
|||
//color: transparent; |
|||
text-shadow: 0 0 0 $black; |
|||
} |
|||
|
|||
&:-webkit-autofill { |
|||
-webkit-text-fill-color: $black; |
|||
box-shadow: 0 0 0px 1000px $white inset !important; |
|||
&:focus, |
|||
&:hover { |
|||
-webkit-text-fill-color: $black; |
|||
box-shadow: 0 0 0px 1000px $white inset !important; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
select, |
|||
input[type=text], |
|||
input[type=password], |
|||
input[type=email], |
|||
input[type=tel], |
|||
input[type=date] { |
|||
color: $dark-gray; |
|||
background: $white; |
|||
border-radius: 0; |
|||
height: auto; |
|||
display: block; |
|||
padding: 10px 10px; |
|||
border: 2px solid $white; |
|||
@include font-style( $font-sans, 'regular', $font-18); |
|||
box-shadow: unset; |
|||
text-transform: initial !important; |
|||
|
|||
& + .label-text, |
|||
& + label { |
|||
color: $gray; |
|||
top: -1*$font-10; |
|||
position: absolute; |
|||
display: block; |
|||
@include font-style($font-sans, 'regular', $font-10); |
|||
text-transform: uppercase; |
|||
} |
|||
|
|||
&:required { |
|||
& + .label-text, |
|||
& + label { |
|||
&::after { |
|||
content: ' *'; |
|||
} |
|||
|
|||
& ~ .error-message { |
|||
display: none; |
|||
color: $red; |
|||
@include font-style($font-sans, 'regular', $font-10); |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.has-error { |
|||
border-bottom: 1px solid $red; |
|||
& + .label-text, |
|||
& + label { |
|||
color: $red; |
|||
text-transform: uppercase; |
|||
& ~ .error-message { |
|||
display: block; |
|||
color: $red; |
|||
text-transform: uppercase; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.transparent { |
|||
background: transparent; |
|||
} |
|||
|
|||
&.input-gray { |
|||
border: 2px solid $light-gray; |
|||
background: $light-gray; |
|||
} |
|||
|
|||
&:disabled { |
|||
border-bottom: 2px solid $gray; |
|||
& + .label-text, |
|||
& + label { |
|||
color: $gray; |
|||
} |
|||
} |
|||
} |
|||
|
|||
select { |
|||
appearance: none; |
|||
background-image: url(/images/arrow-down.svg); |
|||
background-size: auto 40%; |
|||
background-repeat: no-repeat; |
|||
background-position: right 3px center; |
|||
border-bottom: 1px solid $gray; |
|||
|
|||
&:disabled { |
|||
background-image: url(/images/arrow-down.svg); |
|||
} |
|||
|
|||
&:focus { |
|||
//background-image: url(/images/arrow-up.svg); |
|||
} |
|||
} |
|||
|
|||
|
|||
.button { |
|||
color: $white; |
|||
background: transparent; |
|||
border-radius: 0; |
|||
height: auto; |
|||
display: block; |
|||
padding: 7px 15px; |
|||
border: 2px solid $white; |
|||
text-align: center; |
|||
@include font-style( $font-sans, 'regular', $font-14); |
|||
|
|||
&.button-big { |
|||
padding: 10px 20px; |
|||
font-size: $font-18; |
|||
} |
|||
|
|||
&.button-small { |
|||
height: 18px; |
|||
line-height: $font-6; |
|||
padding: 5px; |
|||
} |
|||
|
|||
&.button-black { |
|||
background: $dark-gray; |
|||
color: $white; |
|||
border: 2px solid $dark-gray; |
|||
} |
|||
|
|||
&:disabled { |
|||
opacity: 0.5; |
|||
} |
|||
} |
|||
|
|||
.checkbox { |
|||
display: inline-block; |
|||
position: relative; |
|||
padding-left: 25px; |
|||
margin-bottom: 12px; |
|||
cursor: pointer; |
|||
user-select: none; |
|||
width: 100%; |
|||
float: left; |
|||
line-height: 12px; |
|||
|
|||
.checkmark { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
height: 15px; |
|||
width: 15px; |
|||
background: none; |
|||
border: 1px solid $black; |
|||
&:disabled { |
|||
border-bottom: 1px solid $gray; |
|||
} |
|||
|
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
input { |
|||
position: absolute; |
|||
opacity: 0; |
|||
cursor: pointer; |
|||
height: 0; |
|||
width: 0; |
|||
&:checked ~ .checkmark { |
|||
background: $black; |
|||
&:after { |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,146 @@ |
|||
|
|||
body { |
|||
font-family: $font-sans; |
|||
font-weight: 400; |
|||
letter-spacing: 1px; |
|||
margin: 0; |
|||
color: $dark-gray; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
|
|||
ul { |
|||
list-style: none; |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
|
|||
a, |
|||
input, |
|||
select, |
|||
option, |
|||
button { |
|||
text-decoration: none; |
|||
outline: none; |
|||
&:active, |
|||
&:visited, |
|||
&:hover, |
|||
&:focus{ |
|||
outline: none; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
&::-moz-focus-inner { |
|||
border: 0 !important; |
|||
} |
|||
|
|||
} |
|||
|
|||
.font-serif { |
|||
font-family: $font-serif; |
|||
} |
|||
|
|||
.font-sans { |
|||
font-family: $font-sans; |
|||
} |
|||
|
|||
.text-right { |
|||
text-align: right; |
|||
} |
|||
|
|||
.text-left { |
|||
text-align: left; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
|
|||
@each $bp in $grid-breakpoints { |
|||
$key: nth($bp, 1); |
|||
$value: nth($bp, 2); |
|||
|
|||
@media (min-width: $value) { |
|||
.text-#{$key}-center{ |
|||
text-align: center; |
|||
} |
|||
.text-#{$key}-left { |
|||
text-align: left; |
|||
} |
|||
.text-#{$key}-right { |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.text-white { |
|||
color: $white; |
|||
} |
|||
|
|||
.text-black { |
|||
color: $black; |
|||
} |
|||
|
|||
.text-gray { |
|||
color: $gray; |
|||
} |
|||
|
|||
.text-bold { |
|||
font-weight: bold !important; |
|||
} |
|||
|
|||
.text-uppercase { |
|||
text-transform: uppercase; |
|||
} |
|||
|
|||
.w-100 { |
|||
width: 100% !important; |
|||
} |
|||
|
|||
.h-100 { |
|||
height: 100% !important; |
|||
} |
|||
|
|||
.middle { |
|||
@include middle(); |
|||
} |
|||
|
|||
.full-middle { |
|||
@include full-middle(); |
|||
} |
|||
|
|||
// Font size |
|||
@each $size in 10, 12, 13, 14, 15, 16, 18, 20, 22, 24, 25, 26, 28, 30, 32, 34, 36, 38, 40, 42, 46, 48, 50, 52, 54, 60, 72 { |
|||
.font-#{$size} {font-size: #{$size/16}rem !important;} |
|||
} |
|||
|
|||
.main-content { |
|||
|
|||
min-height: calc(100vh - #{$footer-height}); |
|||
padding: $header-height-mobile 10px 0 10px; |
|||
|
|||
@media (min-width: map-get($grid-breakpoints, 'md')) { |
|||
padding: $header-height 40px 0 40px; |
|||
} |
|||
|
|||
&.container-fluid { |
|||
&.full-width { |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
overflow-x: hidden; |
|||
} |
|||
} |
|||
|
|||
section { |
|||
margin: 50px auto; |
|||
&.container-full { |
|||
padding: 0; |
|||
max-width: initial; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.debug-border { |
|||
border: 1px solid red; |
|||
} |
|||
@ -0,0 +1,42 @@ |
|||
@font-face { |
|||
font-family: 'icomoon'; |
|||
src: url('../fonts/icomoon.eot'); |
|||
src: url('../fonts/icomoon.eot#iefix') format('embedded-opentype'), |
|||
url('../fonts/icomoon.ttf') format('truetype'), |
|||
url('../fonts/icomoon.woff') format('woff'), |
|||
url('../fonts/icomoon.svg#icomoon') format('svg'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
[class^="icon-"], [class*=" icon-"] { |
|||
/* use !important to prevent issues with browser extensions that change fonts */ |
|||
font-family: 'icomoon' !important; |
|||
speak: none; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
font-variant: normal; |
|||
text-transform: none; |
|||
line-height: 1; |
|||
|
|||
/* Better Font Rendering =========== */ |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
|
|||
.icon-arrow-down:before { |
|||
content: "\e900"; |
|||
} |
|||
.icon-arrow-right:before { |
|||
content: "\e901"; |
|||
} |
|||
.icon-cart:before { |
|||
content: "\e902"; |
|||
} |
|||
.icon-drop:before { |
|||
content: "\e903"; |
|||
} |
|||
.icon-user:before { |
|||
content: "\e904"; |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
@import "../scss/variables.scss"; |
|||
@import "../scss/mixins.scss"; |
|||
|
|||
/* Libraries */ |
|||
@import "./node_modules/bootstrap/scss/bootstrap-grid"; |
|||
@import "./node_modules/hamburgers/_sass/hamburgers/hamburgers"; |
|||
|
|||
/* Global setup */ |
|||
@import "../scss/fonts.scss"; |
|||
@import "../scss/icons.scss"; |
|||
@import "../scss/global.scss"; |
|||
@import "../scss/forms.scss"; |
|||
|
|||
@import "./components/header/header.scss"; |
|||
/* |
|||
@import "./components/footer/footer.scss"; |
|||
@import "./components/home/home.scss"; |
|||
@import "./components/plp/plp.scss"; |
|||
@import "./components/productBox/productBox.scss"; |
|||
@import "./components/pdp/pdp.scss"; |
|||
@import "./components/article/article.scss"; |
|||
@import "./components/articles/articles.scss"; |
|||
@import "./components/articleBox/articleBox.scss"; |
|||
*/ |
|||
@import "./components/breadcrumb/breadcrumb.scss"; |
|||
@ -0,0 +1,69 @@ |
|||
@import "../../src/scss/variables.scss"; |
|||
|
|||
@mixin font-style ( $font: $font-serif, $style: 'regular', $size: $font-12 , $ls: normal ) { |
|||
font-family: $font; |
|||
font-size: $size; |
|||
letter-spacing: $ls; |
|||
|
|||
@if $style == 'regular' { |
|||
font-weight: 400; |
|||
} @else if $style == 'light' { |
|||
font-weight: 200; |
|||
} @else if $style == 'medium' { |
|||
font-weight: 500; |
|||
} @else if $style == 'semibold' { |
|||
font-weight: 600; |
|||
} @else if $style == 'bold' { |
|||
font-weight: 700; |
|||
} @else if $style == 'regular-italic' { |
|||
font-weight: 400; |
|||
font-style: italic; |
|||
} @else if $style == 'light-italic' { |
|||
font-weight: 200; |
|||
font-style: italic; |
|||
} @else if $style == 'semibold-italic' { |
|||
font-weight: 600; |
|||
font-style: italic; |
|||
} @else if $style == 'bold-italic' { |
|||
font-weight: 700; |
|||
font-style: italic; |
|||
} @else { |
|||
font-weight: $style; |
|||
} |
|||
} |
|||
|
|||
@mixin middle() { |
|||
position: absolute; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
@mixin full-middle() { |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
@mixin middle-right() { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
@mixin middle-left() { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
@mixin reset() { |
|||
margin: 20px auto; |
|||
width: 100%; |
|||
max-width: $max-width; |
|||
padding: 60px $grid-gutter-width; |
|||
font-size: 16px; |
|||
letter-spacing: .08em; |
|||
} |
|||
@ -0,0 +1,100 @@ |
|||
// Bootstrap Settings |
|||
|
|||
$spacer: 20px; |
|||
$spacers: ( |
|||
0: 0, |
|||
1: ($spacer * .25), // 5px |
|||
2: ($spacer * .5), // 10px |
|||
3: $spacer, // 20px |
|||
4: ($spacer * 1.5), // 30px |
|||
5: ($spacer * 3), // 60px |
|||
6: ($spacer * 6), // 120px |
|||
); |
|||
|
|||
$grid-columns: 12; |
|||
$grid-gutter-width: 20px; |
|||
$grid-gutter-width-mobile: 5px; |
|||
|
|||
$grid-breakpoints: ( |
|||
xs: 0, // Mobile Portrait |
|||
sm: 768px, // Tablet Portrait |
|||
md: 1024px, // Tablet landscape/Small desktop |
|||
lg: 1280px, // Desktop |
|||
xl: 1600px, // Large desktop |
|||
); |
|||
|
|||
$container-max-widths: ( |
|||
sm: 708px, |
|||
md: 984px, |
|||
lg: 1200px, |
|||
xl: 1560px |
|||
); |
|||
|
|||
$font-serif: 'DM Serif Display'; |
|||
$font-sans: 'Open Sans'; |
|||
$icon: 'icomoon'; |
|||
|
|||
$black: #000; |
|||
$white: #fff; |
|||
$gray: #686868; |
|||
$light-gray: #f0efec; |
|||
$dark-gray: #393939; |
|||
|
|||
$olive: #86876f; |
|||
$olive-dark: #383920; |
|||
$orange: #ddb279; |
|||
$brown: #92704F; |
|||
|
|||
|
|||
$white-alpha: rgba(255, 255, 255, 0.5); |
|||
$black-alpha: rgba(0, 0, 0, 0.5); |
|||
|
|||
//Hamburgers settings |
|||
$hamburger-padding-x : 0; |
|||
$hamburger-padding-y : 6px; |
|||
$hamburger-layer-width : 30px; |
|||
$hamburger-layer-height : 3px; |
|||
$hamburger-layer-spacing : 8px; |
|||
$hamburger-layer-color : $olive-dark; |
|||
$hamburger-layer-border-radius : 0; |
|||
$hamburger-hover-opacity : 1; |
|||
$hamburger-active-layer-color : $olive-dark; |
|||
$hamburger-active-hover-opacity: $olive-dark; |
|||
|
|||
|
|||
$header-height: 200px; |
|||
$header-height-mobile: 110px; |
|||
$footer-height: 40px; |
|||
|
|||
/* Font-size variables */ |
|||
$font-6: 0.375rem; /* 6px */ |
|||
$font-8: 0.5rem; /* 8px */ |
|||
$font-10: 0.625rem; /* 10px */ |
|||
$font-11: 0.687rem; /* 11px */ |
|||
$font-12: 0.75rem; /* 12px */ |
|||
$font-13: 0.812rem; /* 13px */ |
|||
$font-14: 0.875rem; /* 14px */ |
|||
$font-15: 0.937rem; /* 15px */ |
|||
$font-16: 1rem; /* 16px */ |
|||
$font-18: 1.125rem; /* 18px */ |
|||
$font-20: 1.25rem; /* 20px */ |
|||
$font-22: 1.375rem; /* 22px */ |
|||
$font-24: 1.5rem; /* 24px */ |
|||
$font-25: 1.56rem; /* 24px */ |
|||
$font-26: 1.625rem; /* 26px */ |
|||
$font-28: 1.75rem; /* 28px */ |
|||
$font-30: 1.875rem; /* 30px */ |
|||
$font-32: 2rem; /* 32px */ |
|||
$font-34: 2.125rem; /* 34px */ |
|||
$font-36: 2.25rem; /* 36px */ |
|||
$font-38: 2.375rem; /* 38px */ |
|||
$font-40: 2.5rem; /* 40px */ |
|||
$font-42: 2.625rem; /* 42px */ |
|||
$font-44: 2.75rem; /* 44px */ |
|||
$font-46: 2.875rem; /* 46px */ |
|||
$font-48: 3rem; /* 48px */ |
|||
$font-50: 3.125rem; /* 50px */ |
|||
$font-52: 3.25rem; /* 52px */ |
|||
$font-54: 3.375rem; /* 54px */ |
|||
$font-60: 3.75rem; /* 60px */ |
|||
$font-72: 4.5rem; /* 72px */ |
|||
@ -0,0 +1,153 @@ |
|||
|
|||
const webpack = require('webpack') |
|||
const path = require('path') |
|||
const fs = require('fs') |
|||
|
|||
const WebpackNotifierPlugin = require('webpack-notifier') |
|||
const HtmlWebpackPlugin = require('html-webpack-plugin') |
|||
const CopyWebpackPlugin = require('copy-webpack-plugin') |
|||
const Handlebars = require('handlebars') |
|||
|
|||
const basePath = './' |
|||
const pagesPath = path.join(__dirname, './pages') |
|||
const distPath = path.join(__dirname, './public') |
|||
const componentPath = path.join(__dirname, './components') |
|||
const imagesPath = path.join(__dirname, './images') |
|||
const assetsPath = path.join(__dirname, './assets') |
|||
const docsPath = path.join(__dirname, './docs') |
|||
const srcPath = './src' |
|||
|
|||
let components = [] |
|||
let entries = [] |
|||
let plugins = [] |
|||
|
|||
module.exports = (env) => { |
|||
|
|||
const isProd = env && env.prod || false |
|||
|
|||
entries.push(srcPath + '/js/index.js') |
|||
entries.push(srcPath + '/scss/main.scss') |
|||
|
|||
fs.readdirSync(componentPath).forEach( (comp) => { |
|||
entries.push(componentPath + '/' + comp + '/' + comp + '.js') |
|||
}) |
|||
|
|||
plugins = [ |
|||
new HtmlWebpackPlugin(), |
|||
new WebpackNotifierPlugin({ |
|||
title: 'IoLovOlio', |
|||
contentImage: path.join(__dirname, basePath + '/images/logoWP.png'), |
|||
alwaysNotify: true |
|||
}), |
|||
new webpack.ProvidePlugin({ |
|||
$: 'jquery', |
|||
jQuery: 'jquery' |
|||
}), |
|||
new CopyWebpackPlugin({ |
|||
patterns: [ |
|||
{ |
|||
context: componentPath, |
|||
from: '**/*.html', |
|||
to: distPath + '/components/[path]/[name].php', |
|||
}, |
|||
{ |
|||
context: imagesPath, |
|||
from: '*.*', |
|||
to: distPath + '/images', |
|||
} |
|||
] |
|||
}) |
|||
] |
|||
|
|||
fs.readdirSync(pagesPath).forEach( (page) => { |
|||
if(page == '.htaccess') { |
|||
plugins.push( |
|||
new CopyWebpackPlugin({ |
|||
patterns: [ |
|||
{ |
|||
context: pagesPath, |
|||
from: '.htaccess', |
|||
to: distPath |
|||
} |
|||
] |
|||
}) |
|||
) |
|||
} else { |
|||
plugins.push( |
|||
new HtmlWebpackPlugin({ |
|||
template: path.resolve(pagesPath, page), |
|||
filename: path.resolve(distPath, page.substr(0, page.lastIndexOf(".")) + ".php"), |
|||
inject: page == 'index.ejs' |
|||
}) |
|||
) |
|||
} |
|||
}) |
|||
|
|||
|
|||
|
|||
return { |
|||
devtool: isProd ? '' : 'eval', |
|||
entry: entries, |
|||
output: { |
|||
path: path.join(distPath, '/assets/js'), |
|||
publicPath: './assets/js', |
|||
filename: 'bundle.js' |
|||
}, |
|||
module: { |
|||
rules: [ |
|||
// JS
|
|||
{ |
|||
test: /\.js$/, |
|||
exclude: /(node_modules|bower_components|vendor)/, |
|||
use: { |
|||
loader: 'babel-loader', |
|||
options: { |
|||
minified: false, |
|||
babelrc: true |
|||
} |
|||
}, |
|||
}, |
|||
// SCSS
|
|||
{ |
|||
test: /\.scss$/, |
|||
use: [ |
|||
{loader: 'file-loader', |
|||
options: { name: '../../assets/css/styles.css'} |
|||
}, |
|||
{loader: 'extract-loader'}, |
|||
{loader: 'css-loader'}, |
|||
{loader: 'postcss-loader'}, |
|||
{loader: 'sass-loader'} |
|||
] |
|||
}, |
|||
|
|||
// FONTS
|
|||
{ |
|||
test: /\.(woff|woff2|eot|ttf|svg)$/, |
|||
use: ['url-loader?limit=100000'] |
|||
}, |
|||
|
|||
// HTML
|
|||
{ |
|||
test: /\.html$/i, |
|||
loader: 'html-loader', |
|||
options: { |
|||
attributes: { |
|||
list: [ |
|||
{ tag: 'img', attribute: 'data-src', type: 'src'}, |
|||
{ tag: 'img', attribute: 'data-srcset', type: 'srcset'} |
|||
], |
|||
root: '.' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
plugins: plugins, |
|||
devtool: false, |
|||
performance: { |
|||
maxEntrypointSize: 512000, |
|||
maxAssetSize: 512000 |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue