diff --git a/components/footer/footer.scss b/components/footer/footer.scss
index d642c3d..a01b3e3 100644
--- a/components/footer/footer.scss
+++ b/components/footer/footer.scss
@@ -2,6 +2,7 @@
@import "../../src/scss/mixins.scss";
.component-footer {
+ position: absolute;
height: $footer-height;
width: 100%;
background: $gray;
diff --git a/components/header/header.html b/components/header/header.html
index 3c43e57..9999c09 100644
--- a/components/header/header.html
+++ b/components/header/header.html
@@ -1,3 +1,41 @@
diff --git a/components/header/header.js b/components/header/header.js
index b8f6f54..8d67a13 100644
--- a/components/header/header.js
+++ b/components/header/header.js
@@ -2,4 +2,27 @@
$(document).ready( () => {
console.log('Load component - header')
-})
\ No newline at end of file
+ const components = $('.component-header')
+
+ components.each( (i, e) => {
+ const component = $(e)
+ const hamburger = component.find('.hamburger')
+ const menu = component.find('.sidebar-menu')
+
+ hamburger.on('click', (e) => {
+ const hamburger = $(e.currentTarget)
+ hamburger.toggleClass('is-active')
+
+ if(hamburger.hasClass('is-active')){
+ menu.addClass('active')
+ //items.slideDown()
+ //$('html, body').css({overflow: 'hidden'})
+ } else {
+ menu.removeClass('active')
+ //items.slideUp()
+ //$('html, body').css({overflow: 'auto'})
+ }
+ })
+ })
+
+})
diff --git a/components/header/header.scss b/components/header/header.scss
index 6b86b9a..1d6a828 100644
--- a/components/header/header.scss
+++ b/components/header/header.scss
@@ -2,8 +2,104 @@
@import "../../src/scss/mixins.scss";
.component-header {
- height: $header-height;
+ position: fixed;
+ display: flex;
+ top: 0;
+ left: 0;
+ height: $header-height-mobile;
width: 100%;
background: $olive;
color: $white;
+
+ .hamburger {
+ display: flex;
+ margin-right: 20px;
+ }
+
+ .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;
+
+ .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;
+
+ .menu {
+ display: flex;
+ }
+
+ .sidebar-menu {
+ top: $header-height;
+ height: calc(100vh - #{$header-height});
+ }
+ }
}
diff --git a/package.json b/package.json
index b1e46df..a5b767d 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
- "name": "anes",
+ "name": "iolovolio",
"version": "1.0.0",
"description": "IoLoVolio",
"main": "index.js",
@@ -26,7 +26,7 @@
"babel-preset-env": "^1.7.0",
"base-href-webpack-plugin": "^2.0.0",
"bootstrap": "^4.3.1",
- "copy-webpack-plugin": "^5.0.3",
+ "copy-webpack-plugin": "^6.0.3",
"css-loader": "^3.5.1",
"es6-promise-promise": "^1.0.0",
"eslint": "^6.0.1",
@@ -36,6 +36,7 @@
"extract-loader": "^3.1.0",
"file-loader": "^4.0.0",
"glob": "^7.1.4",
+ "hamburgers": "^1.1.3",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"http-server": "^0.12.1",
diff --git a/pages/.htaccess b/pages/.htaccess
new file mode 100644
index 0000000..9b40104
--- /dev/null
+++ b/pages/.htaccess
@@ -0,0 +1,3 @@
+RewriteEngine On
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule ^([^\.]+)$ $1.php [NC,L]
diff --git a/pages/buy.ejs b/pages/buy.ejs
new file mode 100644
index 0000000..82ea089
--- /dev/null
+++ b/pages/buy.ejs
@@ -0,0 +1,83 @@
+
+
+
+
+ IoLovOlio
+
+
+
+
+
+
+ ${require('../components/header/header.html')}
+
+
+
+
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+
+
+
+
+
+ ${require('../components/footer/footer.html')}
+
+
+
diff --git a/pages/index.ejs b/pages/index.ejs
index 0c4113a..82ea089 100644
--- a/pages/index.ejs
+++ b/pages/index.ejs
@@ -14,7 +14,64 @@
- section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
diff --git a/pages/iolovolio.ejs b/pages/iolovolio.ejs
new file mode 100644
index 0000000..82ea089
--- /dev/null
+++ b/pages/iolovolio.ejs
@@ -0,0 +1,83 @@
+
+
+
+
+ IoLovOlio
+
+
+
+
+
+
+ ${require('../components/header/header.html')}
+
+
+
+
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+
+
+
+
+
+ ${require('../components/footer/footer.html')}
+
+
+
diff --git a/pages/learn.ejs b/pages/learn.ejs
new file mode 100644
index 0000000..82ea089
--- /dev/null
+++ b/pages/learn.ejs
@@ -0,0 +1,83 @@
+
+
+
+
+ IoLovOlio
+
+
+
+
+
+
+ ${require('../components/header/header.html')}
+
+
+
+
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+ section
+
+
+
+
+
+ ${require('../components/footer/footer.html')}
+
+
+
diff --git a/src/scss/fonts.scss b/src/scss/fonts.scss
index f6adca2..d7cd022 100644
--- a/src/scss/fonts.scss
+++ b/src/scss/fonts.scss
@@ -1,8 +1 @@
-@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- */
-}
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,700&display=swap');
diff --git a/src/scss/forms.scss b/src/scss/forms.scss
index 77276a5..86f8b96 100644
--- a/src/scss/forms.scss
+++ b/src/scss/forms.scss
@@ -10,6 +10,23 @@ button {
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,
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 7199958..72da058 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -101,6 +101,7 @@ button {
.main-content {
min-height: calc(100vh - #{$header-height} - #{$footer-height} - 50px);
+ padding: $header-height 40px 0 40px;
&.container-fluid {
&.full-width {
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 7e3f3a9..ccbc827 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -3,6 +3,7 @@
/* Libraries */
@import "./node_modules/bootstrap/scss/bootstrap-grid";
+@import "./node_modules/hamburgers/_sass/hamburgers/hamburgers";
/* Global setup */
@import "../scss/fonts.scss";
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index d0edb0e..98265f3 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -30,9 +30,8 @@ $container-max-widths: (
xl: 1560px
);
-
-$font-serif: 'Acumin Variable Concept';
-$font-sans: 'Acumin Variable Concept';
+$font-serif: 'Source Sans Pro';
+$font-sans: 'Source Sans Pro';
$icon: 'icomoon';
$black: #000;
@@ -44,11 +43,24 @@ $dark-gray: #393939;
$olive: #86876f;
$orange: #ddb279;
-$white-alpha: rgba(255, 255, 255, 0.8);
-$black-alpha: rgba(0, 0, 0, 0.8);
+$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 : 35px;
+$hamburger-layer-height : 1px;
+$hamburger-layer-spacing : 8px;
+$hamburger-layer-color : $white;
+$hamburger-layer-border-radius : 0;
+$hamburger-hover-opacity : 1;
+$hamburger-active-layer-color : $white;
+$hamburger-active-hover-opacity: $white;
+
$header-height: 120px;
-$header-height-mobile: 100px;
+$header-height-mobile: 50px;
$footer-height: 30px;
/* Font-size variables */
diff --git a/webpack.config.js b/webpack.config.js
index 14ec4b6..9658c06 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -42,34 +42,27 @@ module.exports = (env) => {
$: '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',
- },
- ])
+ new CopyWebpackPlugin({
+ patterns: [
+ {
+ context: componentPath,
+ from: '**/*.html',
+ to: distPath + '/components/[path]/[name].php',
+ },
+ {
+ context: imagesPath,
+ from: '*.*',
+ to: distPath + '/images',
+ }
+ ]
+ })
]
fs.readdirSync(pagesPath).forEach( (page) => {
plugins.push(
new HtmlWebpackPlugin({
template: path.resolve(pagesPath, page),
- filename: path.resolve(distPath, page.substr(0, page.lastIndexOf(".")) + ".html")
+ filename: path.resolve(distPath, page.substr(0, page.lastIndexOf(".")) + ".php")
})
)
})