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