34 changed files with 977 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,3 @@ |
|||
<div class="component-footer"> |
|||
footer |
|||
</div> |
|||
@ -0,0 +1,5 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - footer') |
|||
|
|||
}) |
|||
@ -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; |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
<header class="component-header"> |
|||
|
|||
</header> |
|||
@ -0,0 +1,5 @@ |
|||
|
|||
$(document).ready( () => { |
|||
console.log('Load component - header') |
|||
|
|||
}) |
|||
@ -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; |
|||
} |
|||
@ -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,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/ |
|||
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 839 KiB |
@ -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" |
|||
} |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
<!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')} |
|||
|
|||
<main class="main-content"> |
|||
|
|||
<section class="container"> |
|||
section |
|||
</section> |
|||
|
|||
|
|||
</main> |
|||
|
|||
${require('../components/footer/footer.html')} |
|||
|
|||
</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,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- */ |
|||
} |
|||
@ -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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -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; |
|||
} |
|||
@ -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,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"; |
|||
@ -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,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 */ |
|||
@ -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 |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue