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