WIP: texts, form

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,17 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/test/unit/coverage/
+/test/e2e/reports/
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

README.md

@@ -0,0 +1,16 @@
+# Code in the Dark base template
+
+_Based in Florence from [cruip](https://cruip.com/)_
+
+## How to:
+* `$ npm install` or `$ yarn`
+
+To watch:
+
+* `$ yarn run watch`
+
+To build:
+
+* `$ yarn run build`
+
+More info see package.json

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "florence",
+  "version": "1.0.0",
+  "description": "Florence Template",
+  "author": "Pasquale Vitiello <[email protected]>",
+  "license": "GPLv3",
+  "repository": {
+    "type": "git",
+    "url": "https://bitbucket.org/pasqualevitiello/florence.git"
+  },
+  "bugs": {
+    "url": "https://bitbucket.org/pasqualevitiello/florence/issues"
+  },
+  "scripts": {
+    "clean": "rimraf dist/{css/*,js/*,images/*}",
+    "autoprefixer": "postcss -u autoprefixer -r dist/css/*",
+    "scss": "node-sass --output-style compressed -o dist/css src/scss",
+    "lint": "eslint src/js || true",
+    "lint-scss": "stylelint src/scss/*.scss --syntax scss || true",
+    "uglify": "mkdirp dist/js -p && uglifyjs src/js/*.js -m -c -o dist/js/main.min.js",
+    "imagemin": "imagemin src/images/* -o dist/images",
+    "serve": "browser-sync start --server --files \"dist/css/*.css, dist/js/*.js, **/*.html, !node_modules/**/*.html\"",
+    "build:css": "run-s lint-scss scss autoprefixer",
+    "build:js": "run-s lint uglify",
+    "build:images": "run-s imagemin",
+    "build": "run-s build:*",
+    "watch:css": "onchange \"src/scss\" -- run-s build:css",
+    "watch:js": "onchange \"src/js\" -- run-s build:js",
+    "watch:images": "onchange \"src/images\" -- run-s build:images",
+    "watch": "run-p serve watch:*",
+    "postinstall": "run-s build watch"
+  },
+  "devDependencies": {
+    "autoprefixer": "^9.0.1",
+    "browser-sync": "^2.12.8",
+    "eslint": "^5.2.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-promise": "^3.8.0",
+    "eslint-plugin-standard": "^3.1.0",
+    "imagemin-cli": "^3.0.0",
+    "mkdirp": "^0.5.1",
+    "node-sass": "^4.9.2",
+    "npm-run-all": "^4.1.3",
+    "onchange": "^4.1.0",
+    "postcss-cli": "^6.0.0",
+    "rimraf": "^2.5.4",
+    "stylelint": "^9.4.0",
+    "uglify-es": "^3.3.10"
+  },
+  "homepage": "https://bitbucket.org/pasqualevitiello/florence#readme",
+  "main": ".eslintrc.js"
+}

src/js/main.js

@@ -0,0 +1,91 @@
+(function () {
+  const win = window
+  const doc = document.documentElement
+
+  doc.classList.remove('no-js')
+  doc.classList.add('js')
+
+  // Reveal animations
+  if (document.body.classList.contains('has-animations')) {
+    /* global ScrollReveal */
+    const sr = window.sr = ScrollReveal()
+
+    sr.reveal('.hero-title, .hero-paragraph, .hero-cta', {
+      duration: 1000,
+      distance: '40px',
+      easing: 'cubic-bezier(0.5, -0.01, 0, 1.005)',
+      origin: 'bottom',
+      interval: 150
+    })
+  }
+
+  // Moving objects
+  const movingObjects = document.querySelectorAll('.is-moving-object')
+
+  // Throttling
+  function throttle (func, milliseconds) {
+    let lastEventTimestamp = null
+    let limit = milliseconds
+
+    return (...args) => {
+      let now = Date.now()
+
+      if (!lastEventTimestamp || now - lastEventTimestamp >= limit) {
+        lastEventTimestamp = now
+        func.apply(this, args)
+      }
+    }
+  }
+
+  // Init vars
+  let mouseX = 0
+  let mouseY = 0
+  let scrollY = 0
+  let coordinateX = 0
+  let coordinateY = 0
+  let winW = doc.clientWidth
+  let winH = doc.clientHeight
+
+  // Move Objects
+  function moveObjects (e, object) {
+    mouseX = e.pageX
+    mouseY = e.pageY
+    scrollY = win.scrollY
+    coordinateX = (winW / 2) - mouseX
+    coordinateY = (winH / 2) - (mouseY - scrollY)
+
+    for (let i = 0; i < object.length; i++) {
+      const translatingFactor = object[i].getAttribute('data-translating-factor') || 20
+      const rotatingFactor = object[i].getAttribute('data-rotating-factor') || 20
+      const perspective = object[i].getAttribute('data-perspective') || 500
+      let tranformProperty = []
+
+      if (object[i].classList.contains('is-translating')) {
+        tranformProperty.push('translate(' + coordinateX / translatingFactor + 'px, ' + coordinateY / translatingFactor + 'px)')
+      }
+
+      if (object[i].classList.contains('is-rotating')) {
+        tranformProperty.push('perspective(' + perspective + 'px) rotateY(' + -coordinateX / rotatingFactor + 'deg) rotateX(' + coordinateY / rotatingFactor + 'deg)')
+      }
+
+      if (object[i].classList.contains('is-translating') || object[i].classList.contains('is-rotating')) {
+        tranformProperty = tranformProperty.join(' ')
+
+        object[i].style.transform = tranformProperty
+        object[i].style.transition = 'transform 1s ease-out'
+        object[i].style.transformStyle = 'preserve-3d'
+        object[i].style.backfaceVisibility = 'hidden'
+      }
+    }
+  }
+
+  // Call function with throttling
+  if (movingObjects) {
+    win.addEventListener('mousemove', throttle(
+      function (e) {
+        moveObjects(e, movingObjects)
+      },
+      150
+    ))
+  }
+}())