diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..8b0913b --- /dev/null +++ b/.babelrc @@ -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" + ] +} diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..220693c --- /dev/null +++ b/.eslintrc.json @@ -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" + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e0d6b4f --- /dev/null +++ b/.gitignore @@ -0,0 +1,10 @@ +# Cache, temp and personal files + +/.htaccess +*.log +.sass-cache/ + +node_modules/ +public/ +package-lock.json + diff --git a/OLD/components/article/article.html b/OLD/components/article/article.html new file mode 100644 index 0000000..6b308ea --- /dev/null +++ b/OLD/components/article/article.html @@ -0,0 +1,33 @@ +
+
+
+
+
+ +
+ +
+ +
+ +
+
+

+ La tecnica dell'assaggio +

+ + Come degustare un olio extravergine + + + 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. + +
+ +
+
+ +
+
+
diff --git a/OLD/components/article/article.js b/OLD/components/article/article.js new file mode 100644 index 0000000..5c586fb --- /dev/null +++ b/OLD/components/article/article.js @@ -0,0 +1,5 @@ + +$(document).ready( () => { + console.log('Load component - article') + +}) \ No newline at end of file diff --git a/OLD/components/article/article.scss b/OLD/components/article/article.scss new file mode 100644 index 0000000..e70e6e5 --- /dev/null +++ b/OLD/components/article/article.scss @@ -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; + } + +} diff --git a/OLD/components/articleBox/articleBox.html b/OLD/components/articleBox/articleBox.html new file mode 100644 index 0000000..32b76b8 --- /dev/null +++ b/OLD/components/articleBox/articleBox.html @@ -0,0 +1,7 @@ +
+ + + Titolo articolo + + +
diff --git a/OLD/components/articleBox/articleBox.js b/OLD/components/articleBox/articleBox.js new file mode 100644 index 0000000..fe1befd --- /dev/null +++ b/OLD/components/articleBox/articleBox.js @@ -0,0 +1,5 @@ + +$(document).ready( () => { + console.log('Load component - articleBox') + +}) \ No newline at end of file diff --git a/OLD/components/articleBox/articleBox.scss b/OLD/components/articleBox/articleBox.scss new file mode 100644 index 0000000..e9db49e --- /dev/null +++ b/OLD/components/articleBox/articleBox.scss @@ -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;} + } + } + +} diff --git a/OLD/components/articleBox/articleBox2.html b/OLD/components/articleBox/articleBox2.html new file mode 100644 index 0000000..d548f30 --- /dev/null +++ b/OLD/components/articleBox/articleBox2.html @@ -0,0 +1,7 @@ +
+ + + Titolo articolo test 2 + + +
diff --git a/OLD/components/articleBox/articleBox3.html b/OLD/components/articleBox/articleBox3.html new file mode 100644 index 0000000..07ca4b2 --- /dev/null +++ b/OLD/components/articleBox/articleBox3.html @@ -0,0 +1,7 @@ +
+ + + Titolo articolo + + +
diff --git a/OLD/components/articleBox/articleBox4.html b/OLD/components/articleBox/articleBox4.html new file mode 100644 index 0000000..0844849 --- /dev/null +++ b/OLD/components/articleBox/articleBox4.html @@ -0,0 +1,7 @@ +
+ + + Titolo articolo + + +
diff --git a/OLD/components/articles/articles.html b/OLD/components/articles/articles.html new file mode 100644 index 0000000..41f229c --- /dev/null +++ b/OLD/components/articles/articles.html @@ -0,0 +1,53 @@ +
+
+
+
+
+ +
+ +
+ +
+ +
+ + +
+ ${require('../articleBox/articleBox.html')} +
+
+ ${require('../articleBox/articleBox2.html')} +
+
+ ${require('../articleBox/articleBox3.html')} +
+
+ ${require('../articleBox/articleBox4.html')} +
+
+ ${require('../articleBox/articleBox.html')} +
+
+ ${require('../articleBox/articleBox.html')} +
+
+ ${require('../articleBox/articleBox.html')} +
+
+ ${require('../articleBox/articleBox.html')} +
+
+
+ +
+
+
diff --git a/OLD/components/articles/articles.js b/OLD/components/articles/articles.js new file mode 100644 index 0000000..24ab23b --- /dev/null +++ b/OLD/components/articles/articles.js @@ -0,0 +1,5 @@ + +$(document).ready( () => { + console.log('Load component - articles') + +}) \ No newline at end of file diff --git a/OLD/components/articles/articles.scss b/OLD/components/articles/articles.scss new file mode 100644 index 0000000..380b646 --- /dev/null +++ b/OLD/components/articles/articles.scss @@ -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; + } +} diff --git a/OLD/components/footer/footer.html b/OLD/components/footer/footer.html new file mode 100644 index 0000000..cc3f26e --- /dev/null +++ b/OLD/components/footer/footer.html @@ -0,0 +1,18 @@ +
+
+ +
+
diff --git a/OLD/components/footer/footer.js b/OLD/components/footer/footer.js new file mode 100644 index 0000000..23dd2cf --- /dev/null +++ b/OLD/components/footer/footer.js @@ -0,0 +1,5 @@ + +$(document).ready( () => { + console.log('Load component - footer') + +}) \ No newline at end of file diff --git a/OLD/components/footer/footer.scss b/OLD/components/footer/footer.scss new file mode 100644 index 0000000..72a5138 --- /dev/null +++ b/OLD/components/footer/footer.scss @@ -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; + } + } + } +} diff --git a/OLD/components/header/header.html b/OLD/components/header/header.html new file mode 100644 index 0000000..f9d5457 --- /dev/null +++ b/OLD/components/header/header.html @@ -0,0 +1,46 @@ +
+ +
+ + +
+ + +
+ + + + +
+ +
diff --git a/OLD/components/header/header.js b/OLD/components/header/header.js new file mode 100644 index 0000000..eec0076 --- /dev/null +++ b/OLD/components/header/header.js @@ -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') + } + }) + +}) diff --git a/OLD/components/header/header.scss b/OLD/components/header/header.scss new file mode 100644 index 0000000..763b852 --- /dev/null +++ b/OLD/components/header/header.scss @@ -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}); + } + } + } +} + diff --git a/OLD/components/home/home.html b/OLD/components/home/home.html new file mode 100644 index 0000000..1941b92 --- /dev/null +++ b/OLD/components/home/home.html @@ -0,0 +1,22 @@ +
+
+
+
+ + iolovolio acquistare + + Vai allo shop +
+
+ +
+
+ + iolovolio produrre + Avvisami quando l'opzione sarà attiva + + *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) +
+
+
+
diff --git a/OLD/components/home/home.js b/OLD/components/home/home.js new file mode 100644 index 0000000..2bfacb9 --- /dev/null +++ b/OLD/components/home/home.js @@ -0,0 +1,5 @@ +/* +$(document).ready( () => { + console.log('Load component - home') + +})*/ diff --git a/OLD/components/home/home.scss b/OLD/components/home/home.scss new file mode 100644 index 0000000..1f08ad1 --- /dev/null +++ b/OLD/components/home/home.scss @@ -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%); + } + } +} diff --git a/OLD/components/pdp/pdp.html b/OLD/components/pdp/pdp.html new file mode 100644 index 0000000..dbcecaa --- /dev/null +++ b/OLD/components/pdp/pdp.html @@ -0,0 +1,41 @@ +
+
+
+
+
+ +
+ +
+ +
+ +
+
+

+ Nome prodotto +

+ + Dettagli + + + 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. + +
+
+ 17,90 € + +
+

Prodotti correlati

+
+
+ + +
+
+ +
+
+
diff --git a/OLD/components/pdp/pdp.js b/OLD/components/pdp/pdp.js new file mode 100644 index 0000000..5dc5ec4 --- /dev/null +++ b/OLD/components/pdp/pdp.js @@ -0,0 +1,5 @@ + +$(document).ready( () => { + console.log('Load component - pdp') + +}) \ No newline at end of file diff --git a/OLD/components/pdp/pdp.scss b/OLD/components/pdp/pdp.scss new file mode 100644 index 0000000..603f6e0 --- /dev/null +++ b/OLD/components/pdp/pdp.scss @@ -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); + } +} diff --git a/OLD/components/plp/plp.html b/OLD/components/plp/plp.html new file mode 100644 index 0000000..6cda930 --- /dev/null +++ b/OLD/components/plp/plp.html @@ -0,0 +1,53 @@ +
+
+
+
+
+ +
+ +
+ +
+ +
+ + +
+ ${require('../productBox/productBox.html')} +
+
+ ${require('../productBox/productBox2.html')} +
+
+ ${require('../productBox/productBox3.html')} +
+
+ ${require('../productBox/productBox4.html')} +
+
+ ${require('../productBox/productBox.html')} +
+
+ ${require('../productBox/productBox.html')} +
+
+ ${require('../productBox/productBox.html')} +
+
+ ${require('../productBox/productBox.html')} +
+
+
+ +
+
+
diff --git a/OLD/components/plp/plp.js b/OLD/components/plp/plp.js new file mode 100644 index 0000000..fa0f8b0 --- /dev/null +++ b/OLD/components/plp/plp.js @@ -0,0 +1,5 @@ + +$(document).ready( () => { + console.log('Load component - plp') + +}) \ No newline at end of file diff --git a/OLD/components/plp/plp.scss b/OLD/components/plp/plp.scss new file mode 100644 index 0000000..9a8368a --- /dev/null +++ b/OLD/components/plp/plp.scss @@ -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; + } + +} diff --git a/OLD/components/productBox/productBox.html b/OLD/components/productBox/productBox.html new file mode 100644 index 0000000..443d55e --- /dev/null +++ b/OLD/components/productBox/productBox.html @@ -0,0 +1,10 @@ +
+ + +
+ Nome prodotto + 17,90 € +
+ + +
diff --git a/OLD/components/productBox/productBox.js b/OLD/components/productBox/productBox.js new file mode 100644 index 0000000..7ccd94d --- /dev/null +++ b/OLD/components/productBox/productBox.js @@ -0,0 +1,5 @@ + +$(document).ready( () => { + console.log('Load component - productBox') + +}) \ No newline at end of file diff --git a/OLD/components/productBox/productBox.scss b/OLD/components/productBox/productBox.scss new file mode 100644 index 0000000..282a7ae --- /dev/null +++ b/OLD/components/productBox/productBox.scss @@ -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%; + } +} + diff --git a/OLD/components/productBox/productBox2.html b/OLD/components/productBox/productBox2.html new file mode 100644 index 0000000..58a0d79 --- /dev/null +++ b/OLD/components/productBox/productBox2.html @@ -0,0 +1,10 @@ +
+ + +
+ Nome prodotto Nome prodotto Nome prodotto + 170,90 € +
+ + +
diff --git a/OLD/components/productBox/productBox3.html b/OLD/components/productBox/productBox3.html new file mode 100644 index 0000000..32210e0 --- /dev/null +++ b/OLD/components/productBox/productBox3.html @@ -0,0 +1,10 @@ +
+ + +
+ Nome prodotto + 7,90 € +
+ + +
diff --git a/OLD/components/productBox/productBox4.html b/OLD/components/productBox/productBox4.html new file mode 100644 index 0000000..0f08f59 --- /dev/null +++ b/OLD/components/productBox/productBox4.html @@ -0,0 +1,10 @@ +
+ + +
+ Nome prodotto + 8,90 € +
+ + +
diff --git a/OLD/pages/.htaccess b/OLD/pages/.htaccess new file mode 100644 index 0000000..74b5589 --- /dev/null +++ b/OLD/pages/.htaccess @@ -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] diff --git a/OLD/pages/article.ejs b/OLD/pages/article.ejs new file mode 100644 index 0000000..c5f8b1a --- /dev/null +++ b/OLD/pages/article.ejs @@ -0,0 +1,5 @@ + + ${require('../components/article/article.html')} + + + diff --git a/OLD/pages/buy.ejs b/OLD/pages/buy.ejs new file mode 100644 index 0000000..ca7ccee --- /dev/null +++ b/OLD/pages/buy.ejs @@ -0,0 +1,5 @@ + + ${require('../components/plp/plp.html')} + + + diff --git a/OLD/pages/home.ejs b/OLD/pages/home.ejs new file mode 100644 index 0000000..331e28a --- /dev/null +++ b/OLD/pages/home.ejs @@ -0,0 +1,5 @@ + + ${require('../components/home/home.html')} + + + diff --git a/OLD/pages/index.ejs b/OLD/pages/index.ejs new file mode 100644 index 0000000..88383a8 --- /dev/null +++ b/OLD/pages/index.ejs @@ -0,0 +1,32 @@ + + + + + IoLovOlio + + + + + + + ${require('../components/header/header.html')} + + + +
+ +
+ + + ${require('../components/footer/footer.html')} + + + diff --git a/OLD/pages/learn.ejs b/OLD/pages/learn.ejs new file mode 100644 index 0000000..1be7946 --- /dev/null +++ b/OLD/pages/learn.ejs @@ -0,0 +1,5 @@ + + ${require('../components/articles/articles.html')} + + + diff --git a/OLD/pages/product.ejs b/OLD/pages/product.ejs new file mode 100644 index 0000000..3f9b49c --- /dev/null +++ b/OLD/pages/product.ejs @@ -0,0 +1,4 @@ +${require('../components/pdp/pdp.html')} + + + diff --git a/components/breadcrumb/breadcrumb.html b/components/breadcrumb/breadcrumb.html new file mode 100644 index 0000000..06bb696 --- /dev/null +++ b/components/breadcrumb/breadcrumb.html @@ -0,0 +1,5 @@ +
+
+ breadcrumb +
+
diff --git a/components/breadcrumb/breadcrumb.js b/components/breadcrumb/breadcrumb.js new file mode 100644 index 0000000..f6df84b --- /dev/null +++ b/components/breadcrumb/breadcrumb.js @@ -0,0 +1,5 @@ + +$(document).ready( () => { + console.log('Load component - breadcrumb') + +}) \ No newline at end of file diff --git a/components/breadcrumb/breadcrumb.scss b/components/breadcrumb/breadcrumb.scss new file mode 100644 index 0000000..55907a5 --- /dev/null +++ b/components/breadcrumb/breadcrumb.scss @@ -0,0 +1,8 @@ +@import "../../src/scss/variables.scss"; +@import "../../src/scss/mixins.scss"; + +.component-breadcrumb { + width: 100%; + background: $brown; + height: 100px; +} diff --git a/components/header/header.html b/components/header/header.html new file mode 100644 index 0000000..929db92 --- /dev/null +++ b/components/header/header.html @@ -0,0 +1,40 @@ +
+ +
+ + + + + + + +
+ + + +
diff --git a/components/header/header.js b/components/header/header.js new file mode 100644 index 0000000..9bebade --- /dev/null +++ b/components/header/header.js @@ -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() + } + }) + +}) diff --git a/components/header/header.scss b/components/header/header.scss new file mode 100644 index 0000000..ce2115d --- /dev/null +++ b/components/header/header.scss @@ -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; + } + } + } + } +} + diff --git a/comps.sh b/comps.sh new file mode 100644 index 0000000..41b7b94 --- /dev/null +++ b/comps.sh @@ -0,0 +1,18 @@ + +COMPDIR="components/$2" + +if [ ${1} = "add" ] +then + mkdir $COMPDIR + printf "
\n
\n
\n
" > "$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 + diff --git a/deploy.sh b/deploy.sh new file mode 100644 index 0000000..372155a --- /dev/null +++ b/deploy.sh @@ -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 diff --git a/images/arrow-down.svg b/images/arrow-down.svg new file mode 100644 index 0000000..1820970 --- /dev/null +++ b/images/arrow-down.svg @@ -0,0 +1,34 @@ + + + + + + + image/svg+xml + + + + + + + + + diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..af7721f Binary files /dev/null and b/images/logo.png differ diff --git a/images/logoHeader.png b/images/logoHeader.png new file mode 100644 index 0000000..e91fe0f Binary files /dev/null and b/images/logoHeader.png differ diff --git a/package.json b/package.json new file mode 100644 index 0000000..8d3fb46 --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/pages/.htaccess b/pages/.htaccess new file mode 100644 index 0000000..74b5589 --- /dev/null +++ b/pages/.htaccess @@ -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] diff --git a/pages/index.ejs b/pages/index.ejs new file mode 100644 index 0000000..677bcba --- /dev/null +++ b/pages/index.ejs @@ -0,0 +1,31 @@ + + + + + IoLovOlio + + + + + + + ${require('../components/header/header.html')} + + + +
+ +
+ + + + + diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..02d7892 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,13 @@ +const autoprefixer = require('autoprefixer') + +module.exports = { + plugins: [ + autoprefixer({ + overrideBrowserslist: [ + 'last 2 versions', + '> 1%', + 'maintained node versions', + 'not dead', 'ie >= 10'] + }) + ] +} diff --git a/src/fonts/066ce24dae3730ed6c648b09efaea93a.eot b/src/fonts/066ce24dae3730ed6c648b09efaea93a.eot new file mode 100644 index 0000000..231fba0 Binary files /dev/null and b/src/fonts/066ce24dae3730ed6c648b09efaea93a.eot differ diff --git a/src/fonts/066ce24dae3730ed6c648b09efaea93a.ttf b/src/fonts/066ce24dae3730ed6c648b09efaea93a.ttf new file mode 100644 index 0000000..0ca9a90 Binary files /dev/null and b/src/fonts/066ce24dae3730ed6c648b09efaea93a.ttf differ diff --git a/src/fonts/066ce24dae3730ed6c648b09efaea93a.woff2 b/src/fonts/066ce24dae3730ed6c648b09efaea93a.woff2 new file mode 100644 index 0000000..f5319ad Binary files /dev/null and b/src/fonts/066ce24dae3730ed6c648b09efaea93a.woff2 differ diff --git a/src/fonts/icomoon.eot b/src/fonts/icomoon.eot new file mode 100644 index 0000000..9af123c Binary files /dev/null and b/src/fonts/icomoon.eot differ diff --git a/src/fonts/icomoon.svg b/src/fonts/icomoon.svg new file mode 100644 index 0000000..f8a03fe --- /dev/null +++ b/src/fonts/icomoon.svg @@ -0,0 +1,15 @@ + + + +Generated by IcoMoon + + + + + + + + + + + \ No newline at end of file diff --git a/src/fonts/icomoon.ttf b/src/fonts/icomoon.ttf new file mode 100644 index 0000000..e70ccd6 Binary files /dev/null and b/src/fonts/icomoon.ttf differ diff --git a/src/fonts/icomoon.woff b/src/fonts/icomoon.woff new file mode 100644 index 0000000..28d9002 Binary files /dev/null and b/src/fonts/icomoon.woff differ diff --git a/src/fonts/selection.json b/src/fonts/selection.json new file mode 100644 index 0000000..da89864 --- /dev/null +++ b/src/fonts/selection.json @@ -0,0 +1 @@ +{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M90.467 231.356c-10.031 0.021-19.188 3.748-26.178 9.883l0.045-0.039c-8.36 7.337-13.608 18.044-13.608 29.977 0 10.064 3.734 19.257 9.891 26.268l-0.039-0.045 421.444 481.644c7.338 8.359 18.045 13.607 29.978 13.607s22.64-5.248 29.939-13.562l0.039-0.045 421.444-481.644c6.119-6.966 9.853-16.158 9.853-26.223 0-11.933-5.249-22.64-13.563-29.938l-0.045-0.039c-6.964-6.112-16.152-9.842-26.21-9.842-11.928 0-22.631 5.244-29.929 13.552l-0.039 0.045-391.489 447.378-391.489-447.378c-7.337-8.355-18.041-13.6-29.97-13.6-0.026 0-0.052 0-0.078 0l0.004-0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["arrow-down"]},"attrs":[{}],"properties":{"order":281,"id":4,"name":"arrow-down","prevSize":32,"code":59648},"setIdx":0,"setId":0,"iconIdx":0},{"icon":{"paths":["M231.352 933.537c0.021 10.031 3.748 19.188 9.883 26.178l-0.039-0.045c7.337 8.36 18.044 13.608 29.977 13.608 10.064 0 19.257-3.734 26.268-9.891l-0.045 0.039 481.644-421.444c8.359-7.338 13.607-18.045 13.607-29.978s-5.248-22.64-13.562-29.939l-0.045-0.039-481.644-421.444c-6.966-6.119-16.158-9.853-26.223-9.853-11.933 0-22.64 5.249-29.938 13.563l-0.039 0.045c-6.112 6.964-9.842 16.152-9.842 26.21 0 11.928 5.244 22.631 13.552 29.929l0.045 0.039 447.378 391.489-447.378 391.489c-8.355 7.337-13.6 18.041-13.6 29.97 0 0.026 0 0.052 0 0.078l-0-0.004z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["arrow-right"]},"attrs":[{}],"properties":{"order":282,"id":3,"name":"arrow-right","prevSize":32,"code":59649},"setIdx":0,"setId":0,"iconIdx":1},{"icon":{"paths":["M58.668 71.087c-0.009-0-0.019-0-0.029-0-16.622 0-30.098 13.475-30.098 30.098 0 0 0 0 0 0l-0-0c-0 0.009-0 0.019-0 0.029 0 16.622 13.475 30.098 30.098 30.098 0.010 0 0.021-0 0.031-0l110.19 0c35.747 0 66.548 23.965 75.215 58.52l54.523 215.974c0.203 0.786 0.374 1.356 0.561 1.917l-0.061-0.212 64.487 257.976c6.74 26.727 30.784 45.558 58.373 45.558h513.306c33.232 0 60.195-26.963 60.195-60.195v-360.467c0-33.233-26.963-60.195-60.195-60.195h-603.423c-5.105 0-10.117 0.721-14.961 1.969l-14.373-56.992c-15.317-61.068-70.636-104.078-133.647-104.078zM331.84 290.382h603.423v106.194c-1.498-0.272-3.225-0.433-4.989-0.441l-0.008-0h-201.396c-0.009-0-0.019-0-0.030-0-16.622 0-30.098 13.475-30.098 30.098 0 0 0 0 0 0l-0-0c-0 0-0 0-0 0 0 16.622 13.475 30.098 30.098 30.098 0.010 0 0.021-0 0.031-0l201.394 0c0.009 0 0.020 0 0.031 0 1.754 0 3.473-0.15 5.145-0.438l-0.179 0.025v194.93h-513.306l-48.644-194.518h177.794c0.009 0 0.019 0 0.029 0 16.622 0 30.098-13.475 30.098-30.098 0-0-0-0-0-0l-0-0c0-0 0-0 0-0 0-16.622-13.475-30.098-30.098-30.098-0.010 0-0.021 0-0.031 0l-192.841-0zM566.772 523.434c-0-0-0-0-0-0-16.622 0-30.098 13.475-30.098 30.098 0 0.010 0 0.021 0 0.031l-0-0.002c0.067 16.572 13.516 29.98 30.097 29.98 0 0 0-0 0-0l133.529 0c0 0 0 0 0 0 16.581 0 30.031-13.408 30.097-29.974l0-0.006c0-0.009 0-0.019 0-0.029 0-16.622-13.475-30.098-30.098-30.098-0 0-0 0-0 0l0-0zM432.391 752.341c-55.338 0-100.316 45-100.316 100.257 0 55.336 44.978 100.316 100.316 100.316 55.257 0 100.257-44.98 100.257-100.316 0-55.257-45-100.257-100.257-100.257zM728.9 752.341c-55.336 0-100.257 45-100.257 100.257 0 55.336 44.921 100.316 100.257 100.316 55.257 0 100.257-44.98 100.257-100.316 0-55.257-45-100.257-100.257-100.257zM432.391 812.536c22.102 0 40.062 17.959 40.062 40.062 0 22.181-17.96 40.12-40.062 40.12-22.182 0-40.12-17.939-40.12-40.12 0-22.103 17.939-40.062 40.12-40.062zM728.9 812.536c22.104 0 40.062 17.959 40.062 40.062 0 22.181-17.958 40.12-40.062 40.12-22.182 0-40.062-17.939-40.062-40.12 0-22.103 17.88-40.062 40.062-40.062z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["cart"]},"attrs":[{}],"properties":{"order":283,"id":2,"name":"cart","prevSize":32,"code":59650},"setIdx":0,"setId":0,"iconIdx":2},{"icon":{"paths":["M809.466 665.511c0 164.284-133.182 297.466-297.466 297.466s-297.466-133.182-297.466-297.466c0-164.284 297.466-604.488 297.466-604.488s297.466 440.204 297.466 604.488z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["drop"]},"attrs":[{}],"properties":{"order":284,"id":1,"name":"drop","prevSize":32,"code":59651},"setIdx":0,"setId":0,"iconIdx":3},{"icon":{"paths":["M512.003 53.459c-127.764 0-231.657 103.977-231.657 231.74 0 89.876 51.445 167.88 126.412 206.275-85.198 37.947-144.78 123.37-144.78 222.485v194.439c0 34.308 27.835 62.142 62.142 62.142h375.761c34.308 0 62.142-27.834 62.142-62.142v-194.439c0-99.119-59.586-184.546-144.756-222.491 74.988-38.396 126.471-116.395 126.471-206.269 0-127.763-103.97-231.74-231.734-231.74zM512.003 115.601c93.7 0 169.592 75.98 169.592 169.598s-75.892 169.516-169.592 169.516c-93.617 0-169.516-75.898-169.516-169.516s75.899-169.598 169.516-169.598zM505.447 532.632h13.188c100.092 0 181.245 81.156 181.245 181.328v194.439h-375.761v-194.439c0-100.171 81.157-181.328 181.328-181.328z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["user"]},"attrs":[{}],"properties":{"order":285,"id":0,"name":"user","prevSize":32,"code":59652},"setIdx":0,"setId":0,"iconIdx":4}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":false,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"autoHost":true},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"UntitledProject":"ZjQ5ODNjZDkzZGRhNGRlZDg3YmQ2Njc5YTQyNWU2Y2QjMSMxNTY0MDUxMDkxIyMj"},"showGrid":false}} \ No newline at end of file diff --git a/src/js/index.js b/src/js/index.js new file mode 100644 index 0000000..abc34e7 --- /dev/null +++ b/src/js/index.js @@ -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() + }) + } + } +} + + + diff --git a/src/scss/fonts.scss b/src/scss/fonts.scss new file mode 100644 index 0000000..030f235 --- /dev/null +++ b/src/scss/fonts.scss @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display&family=Open+Sans:300,400,500,700&display=swap'); diff --git a/src/scss/forms.scss b/src/scss/forms.scss new file mode 100644 index 0000000..5625f8f --- /dev/null +++ b/src/scss/forms.scss @@ -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; + } + } + } +} diff --git a/src/scss/global.scss b/src/scss/global.scss new file mode 100644 index 0000000..6755fb2 --- /dev/null +++ b/src/scss/global.scss @@ -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; +} diff --git a/src/scss/icons.scss b/src/scss/icons.scss new file mode 100644 index 0000000..bf5429c --- /dev/null +++ b/src/scss/icons.scss @@ -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"; +} diff --git a/src/scss/main.scss b/src/scss/main.scss new file mode 100644 index 0000000..938fb64 --- /dev/null +++ b/src/scss/main.scss @@ -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"; diff --git a/src/scss/mixins.scss b/src/scss/mixins.scss new file mode 100644 index 0000000..fc687a7 --- /dev/null +++ b/src/scss/mixins.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; +} diff --git a/src/scss/variables.scss b/src/scss/variables.scss new file mode 100644 index 0000000..4e52fa6 --- /dev/null +++ b/src/scss/variables.scss @@ -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 */ diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..d3c008e --- /dev/null +++ b/webpack.config.js @@ -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 + } + } +}