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/components/footer/footer.html b/components/footer/footer.html
new file mode 100644
index 0000000..6b32629
--- /dev/null
+++ b/components/footer/footer.html
@@ -0,0 +1,3 @@
+
diff --git a/components/footer/footer.js b/components/footer/footer.js
new file mode 100644
index 0000000..23dd2cf
--- /dev/null
+++ b/components/footer/footer.js
@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+ console.log('Load component - footer')
+
+})
\ No newline at end of file
diff --git a/components/footer/footer.scss b/components/footer/footer.scss
new file mode 100644
index 0000000..d642c3d
--- /dev/null
+++ b/components/footer/footer.scss
@@ -0,0 +1,9 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-footer {
+ height: $footer-height;
+ width: 100%;
+ background: $gray;
+ color: $white;
+}
diff --git a/components/header/header.html b/components/header/header.html
new file mode 100644
index 0000000..3c43e57
--- /dev/null
+++ b/components/header/header.html
@@ -0,0 +1,3 @@
+
diff --git a/components/header/header.js b/components/header/header.js
new file mode 100644
index 0000000..b8f6f54
--- /dev/null
+++ b/components/header/header.js
@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+ console.log('Load component - header')
+
+})
\ No newline at end of file
diff --git a/components/header/header.scss b/components/header/header.scss
new file mode 100644
index 0000000..6b86b9a
--- /dev/null
+++ b/components/header/header.scss
@@ -0,0 +1,9 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-header {
+ height: $header-height;
+ width: 100%;
+ background: $olive;
+ color: $white;
+}
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 "" > "$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..7d15cb4
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,17 @@
+#!/bin/bash
+
+BASE="http://www.anesacademy.com/"
+
+BASE_PARSED=$(echo $BASE | sed 's/\//\\\//g')
+
+cd public
+for f in *.html
+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/
diff --git a/images/drop1.png b/images/drop1.png
new file mode 100644
index 0000000..5aa423d
Binary files /dev/null and b/images/drop1.png differ
diff --git a/images/drop2.png b/images/drop2.png
new file mode 100644
index 0000000..356d1b1
Binary files /dev/null and b/images/drop2.png differ
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 0000000..fbbe144
Binary files /dev/null and b/images/logo.png differ
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..b1e46df
--- /dev/null
+++ b/package.json
@@ -0,0 +1,56 @@
+{
+ "name": "anes",
+ "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.9.0",
+ "@babel/preset-env": "^7.9.0",
+ "autoprefixer": "^9.7.6",
+ "babel-eslint": "^10.1.0",
+ "babel-loader": "^8.1.0",
+ "babel-plugin-transform-class-properties": "^6.24.1",
+ "babel-plugin-transform-object-assign": "^6.22.0",
+ "babel-preset-env": "^1.7.0",
+ "base-href-webpack-plugin": "^2.0.0",
+ "bootstrap": "^4.3.1",
+ "copy-webpack-plugin": "^5.0.3",
+ "css-loader": "^3.5.1",
+ "es6-promise-promise": "^1.0.0",
+ "eslint": "^6.0.1",
+ "eslint-config-google": "^0.13.0",
+ "eslint-config-prettier": "^6.10.1",
+ "eslint-plugin-prettier": "^3.1.0",
+ "extract-loader": "^3.1.0",
+ "file-loader": "^4.0.0",
+ "glob": "^7.1.4",
+ "html-loader": "^0.5.5",
+ "html-webpack-plugin": "^3.2.0",
+ "http-server": "^0.12.1",
+ "jquery": "^3.4.1",
+ "mini-css-extract-plugin": "^0.7.0",
+ "minimist": "^1.2.5",
+ "node-sass": "^4.12.0",
+ "nodemon": "^1.19.1",
+ "popper.js": "^1.15.0",
+ "postcss-loader": "^3.0.0",
+ "prettier": "^1.18.2",
+ "sass-loader": "^7.1.0",
+ "url-loader": "^2.0.1",
+ "webpack": "^4.42.1",
+ "webpack-cli": "^3.3.9",
+ "webpack-notifier": "^1.8.0"
+ }
+}
diff --git a/pages/index.ejs b/pages/index.ejs
new file mode 100644
index 0000000..0c4113a
--- /dev/null
+++ b/pages/index.ejs
@@ -0,0 +1,26 @@
+
+
+
+
+ IoLovOlio
+
+
+
+
+
+
+ ${require('../components/header/header.html')}
+
+
+
+
+
+
+
+
+ ${require('../components/footer/footer.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 @@
+
+
+
\ 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..f6adca2
--- /dev/null
+++ b/src/scss/fonts.scss
@@ -0,0 +1,8 @@
+@font-face {font-family: "Acumin Variable Concept";
+ src: url("/fonts/066ce24dae3730ed6c648b09efaea93a.eot"); /* IE9*/
+ src: url("/fonts/066ce24dae3730ed6c648b09efaea93a.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+ url("/fonts/066ce24dae3730ed6c648b09efaea93a.woff2") format("woff2"), /* chrome、firefox */
+ url("/fonts/066ce24dae3730ed6c648b09efaea93a.woff") format("woff"), /* chrome、firefox */
+ url("/fonts/066ce24dae3730ed6c648b09efaea93a.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
+ url("/fonts/066ce24dae3730ed6c648b09efaea93a.svg#Acumin Variable Concept") format("svg"); /* iOS 4.1- */
+}
diff --git a/src/scss/forms.scss b/src/scss/forms.scss
new file mode 100644
index 0000000..77276a5
--- /dev/null
+++ b/src/scss/forms.scss
@@ -0,0 +1,230 @@
+
+input,
+button {
+ border: 1px solid $black;
+ background: $white;
+ border-radius: 0;
+ height: 28px;
+}
+
+button {
+ border: none;
+ cursor: pointer;
+}
+
+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] {
+ border: none;
+ border-bottom: 1px solid $black;
+ height: 30px;
+ 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;
+ }
+
+ &:disabled {
+ border-bottom: 1px solid $gray;
+ & + .label-text,
+ & + label {
+ color: $gray;
+ }
+ }
+}
+
+fieldset,
+.fieldset {
+ position: relative;
+ padding-bottom: 35px;
+ .label-text {
+ color: $gray;
+
+ &.required {
+ &:after {
+ content: '*';
+ }
+ }
+ }
+
+ &.has-error {
+ .label-text {
+ color: $red;
+ text-transform: uppercase;
+ font-size: $font-10;
+ }
+ .error-message {
+ color: $red;
+ display: block !important;
+ text-transform: uppercase;
+ font-size: $font-10;
+ }
+ input {
+ border-bottom: 1px solid $red;
+ }
+ }
+}
+
+select {
+ appearance: none;
+ background-image: url(/images/arrow-down.svg);
+ background-size: auto 40%;
+ background-repeat: no-repeat;
+ background-position: right 3px center;
+
+ &:disabled {
+ background-image: url(/images/arrow-down-gray.svg);
+ }
+ &:focus {
+ //background-image: url(/images/arrow-up.svg);
+ }
+}
+
+
+.button {
+ border: none;
+ color: $black;
+ background: transparent;
+ border-radius: 0;
+ height: auto;
+ display: block;
+ padding: 10px 20px;
+ text-align: center;
+ @include font-style( $font-sans, 'regular', $font-18);
+ text-transform: uppercase;
+
+ &.button-blue {
+ background: $blue;
+ color: $white;
+ }
+
+ &.button-small {
+ height: 18px;
+ line-height: $font-6;
+ padding: 5px;
+ }
+
+ &: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..7199958
--- /dev/null
+++ b/src/scss/global.scss
@@ -0,0 +1,125 @@
+
+body {
+ font-family: $font-sans;
+ font-weight: 400;
+ margin: 0;
+ color: $black;
+ overflow-x: hidden;
+}
+
+
+ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+a,
+input,
+button {
+ text-decoration: none;
+ outline: none;
+ &:active,
+ &:visited,
+ &:hover,
+ &:focus{
+ outline: none;
+ text-decoration: none;
+ }
+}
+
+.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;
+}
+
+.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 - #{$header-height} - #{$footer-height} - 50px);
+
+ &.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..7e3f3a9
--- /dev/null
+++ b/src/scss/main.scss
@@ -0,0 +1,14 @@
+@import "../scss/variables.scss";
+@import "../scss/mixins.scss";
+
+/* Libraries */
+@import "./node_modules/bootstrap/scss/bootstrap-grid";
+
+/* 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";
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..d0edb0e
--- /dev/null
+++ b/src/scss/variables.scss
@@ -0,0 +1,85 @@
+// 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: 'Acumin Variable Concept';
+$font-sans: 'Acumin Variable Concept';
+$icon: 'icomoon';
+
+$black: #000;
+$white: #fff;
+$gray: #686868;
+$light-gray: #f0efec;
+$dark-gray: #393939;
+
+$olive: #86876f;
+$orange: #ddb279;
+
+$white-alpha: rgba(255, 255, 255, 0.8);
+$black-alpha: rgba(0, 0, 0, 0.8);
+
+$header-height: 120px;
+$header-height-mobile: 100px;
+$footer-height: 30px;
+
+/* 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..14ec4b6
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,141 @@
+
+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 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([
+ {
+ context: componentPath,
+ from: '**/*.html',
+ to: distPath + '/components',
+ },
+ ]),
+ new CopyWebpackPlugin([
+ {
+ context: imagesPath,
+ from: '*.*',
+ to: distPath + '/images',
+ },
+ ]),
+ new CopyWebpackPlugin([
+ {
+ context: docsPath,
+ from: '*.*',
+ to: distPath + '/docs',
+ },
+ ])
+ ]
+
+ fs.readdirSync(pagesPath).forEach( (page) => {
+ plugins.push(
+ new HtmlWebpackPlugin({
+ template: path.resolve(pagesPath, page),
+ filename: path.resolve(distPath, page.substr(0, page.lastIndexOf(".")) + ".html")
+ })
+ )
+ })
+
+
+
+ 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?$/,
+ use: {
+ loader: 'html-loader',
+ options: {
+ attrs: ['link:href', 'script:src', 'img:src'],
+ interpolate: true,
+ },
+ },
+ }
+ ]
+ },
+ plugins: plugins,
+ devtool: false,
+ performance: {
+ maxEntrypointSize: 512000,
+ maxAssetSize: 512000
+ }
+ }
+}