├── .gitignore ├── assets ├── fonts │ ├── MaisonNeue-Book.eot │ ├── MaisonNeue-Book.svg │ ├── MaisonNeue-Book.ttf │ └── MaisonNeue-Book.woff ├── images │ ├── displacement-2.png │ ├── displacement-3.jpg │ ├── displacement-4.jpg │ ├── displacement.jpg │ ├── division.jpg │ ├── dmap-clouds-01.jpg │ ├── facebook.jpg │ ├── logo.png │ ├── paper.jpg │ ├── profile-1.jpg │ ├── profile-2.jpg │ ├── profile-3.jpg │ ├── single-1.png │ ├── stack │ │ ├── home-1.jpg │ │ ├── home-10.jpg │ │ ├── home-2.jpg │ │ ├── home-3.jpg │ │ ├── home-4.jpg │ │ ├── home-5.jpg │ │ ├── home-6.jpg │ │ ├── home-7.jpg │ │ ├── home-8.jpg │ │ ├── home-9.jpg │ │ ├── letter-mask-1.jpg │ │ ├── letter-mask-10.jpg │ │ ├── letter-mask-11.jpg │ │ ├── letter-mask-12.jpg │ │ ├── letter-mask-13.jpg │ │ ├── letter-mask-14.jpg │ │ ├── letter-mask-15.jpg │ │ ├── letter-mask-16.jpg │ │ ├── letter-mask-2.jpg │ │ ├── letter-mask-3.jpg │ │ ├── letter-mask-4.jpg │ │ ├── letter-mask-5.jpg │ │ ├── letter-mask-6.jpg │ │ ├── letter-mask-7.jpg │ │ ├── letter-mask-8.jpg │ │ ├── letter-mask-9.jpg │ │ ├── preloader-background-1.jpg │ │ ├── preloader-background-2.jpg │ │ ├── preloader-background-3.jpg │ │ ├── single-1.jpg │ │ └── single-2.jpg │ ├── svg │ │ ├── logo-mask.svg │ │ └── logo.svg │ └── wood.jpg ├── js │ ├── app.js │ ├── config.js │ ├── framework.js │ ├── lib │ │ ├── jello.js │ │ └── smooth │ │ │ ├── diary.js │ │ │ └── single.js │ ├── main.js │ ├── routes.js │ ├── sections │ │ ├── about.js │ │ ├── contact.js │ │ ├── default.js │ │ ├── home.js │ │ ├── preloader.js │ │ └── section.js │ └── utils.js └── less │ ├── import │ ├── _about.less │ ├── _contact.less │ ├── _home.less │ ├── _preloader.less │ ├── _single.less │ └── _typography.less │ ├── layout.less │ └── require │ ├── _fonts.less │ ├── _gradients.less │ ├── _grid.less │ ├── _keyframes.less │ ├── _medias.less │ ├── _mixin.less │ ├── _normalize.less │ ├── _swiper.less │ └── _var.less ├── build ├── app.js ├── app.min.css └── app.min.js ├── favicon.ico ├── functions.php ├── gulp ├── index.js ├── tasks │ ├── aliases.js │ ├── javascript.js │ ├── serve.js │ └── styles.js └── utils │ └── handleErrors.js ├── gulpfile.js ├── includes ├── custom_post_types.php ├── custom_taxonomies.php └── lib │ └── Mobile_Detect.php ├── index.php ├── package.json ├── screenshot.png ├── single.php ├── style.css ├── templates ├── about.php ├── contact.php └── home.php ├── views ├── _base.twig ├── _basefooter.twig ├── _baseheader.twig ├── about │ └── about.twig ├── contact │ └── contact.twig ├── home │ └── home.twig └── single │ └── single.twig └── wp-config.php /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .DS_Store 4 | assets/js/lib/gsap -------------------------------------------------------------------------------- /assets/fonts/MaisonNeue-Book.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/fonts/MaisonNeue-Book.eot -------------------------------------------------------------------------------- /assets/fonts/MaisonNeue-Book.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/fonts/MaisonNeue-Book.ttf -------------------------------------------------------------------------------- /assets/fonts/MaisonNeue-Book.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/fonts/MaisonNeue-Book.woff -------------------------------------------------------------------------------- /assets/images/displacement-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/displacement-2.png -------------------------------------------------------------------------------- /assets/images/displacement-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/displacement-3.jpg -------------------------------------------------------------------------------- /assets/images/displacement-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/displacement-4.jpg -------------------------------------------------------------------------------- /assets/images/displacement.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/displacement.jpg -------------------------------------------------------------------------------- /assets/images/division.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/division.jpg -------------------------------------------------------------------------------- /assets/images/dmap-clouds-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/dmap-clouds-01.jpg -------------------------------------------------------------------------------- /assets/images/facebook.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/facebook.jpg -------------------------------------------------------------------------------- /assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/logo.png -------------------------------------------------------------------------------- /assets/images/paper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/paper.jpg -------------------------------------------------------------------------------- /assets/images/profile-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/profile-1.jpg -------------------------------------------------------------------------------- /assets/images/profile-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/profile-2.jpg -------------------------------------------------------------------------------- /assets/images/profile-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/profile-3.jpg -------------------------------------------------------------------------------- /assets/images/single-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/single-1.png -------------------------------------------------------------------------------- /assets/images/stack/home-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/home-1.jpg -------------------------------------------------------------------------------- /assets/images/stack/home-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/home-10.jpg -------------------------------------------------------------------------------- /assets/images/stack/home-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/home-2.jpg -------------------------------------------------------------------------------- /assets/images/stack/home-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/home-3.jpg -------------------------------------------------------------------------------- /assets/images/stack/home-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/home-4.jpg -------------------------------------------------------------------------------- /assets/images/stack/home-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/home-5.jpg -------------------------------------------------------------------------------- /assets/images/stack/home-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/home-6.jpg -------------------------------------------------------------------------------- /assets/images/stack/home-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/home-7.jpg -------------------------------------------------------------------------------- /assets/images/stack/home-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/home-8.jpg -------------------------------------------------------------------------------- /assets/images/stack/home-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/home-9.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-1.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-10.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-11.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-12.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-13.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-14.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-15.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-16.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-2.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-3.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-4.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-5.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-6.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-7.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-8.jpg -------------------------------------------------------------------------------- /assets/images/stack/letter-mask-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/letter-mask-9.jpg -------------------------------------------------------------------------------- /assets/images/stack/preloader-background-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/preloader-background-1.jpg -------------------------------------------------------------------------------- /assets/images/stack/preloader-background-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/preloader-background-2.jpg -------------------------------------------------------------------------------- /assets/images/stack/preloader-background-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/preloader-background-3.jpg -------------------------------------------------------------------------------- /assets/images/stack/single-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/single-1.jpg -------------------------------------------------------------------------------- /assets/images/stack/single-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/stack/single-2.jpg -------------------------------------------------------------------------------- /assets/images/svg/logo-mask.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/images/svg/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/images/wood.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/assets/images/wood.jpg -------------------------------------------------------------------------------- /assets/js/app.js: -------------------------------------------------------------------------------- 1 | import framework from 'framework' 2 | import config from 'config' 3 | import utils from 'utils' 4 | import gsap from 'gsap' 5 | import SplitText from 'gsap-splitext' 6 | import classes from 'dom-classes' 7 | 8 | TweenLite.defaultEase = Expo.easeOut 9 | 10 | class Biggie { 11 | 12 | constructor(opt) { 13 | 14 | this.animating = false 15 | this.open = false 16 | 17 | this.handler = this.handler.bind(this) 18 | this.animateMenuIn = this.animateMenuIn.bind(this) 19 | this.animateMenuOut = this.animateMenuOut.bind(this) 20 | } 21 | 22 | init() { 23 | 24 | utils.biggie.addRoutingEL([config.$name]) 25 | utils.biggie.addRoutingEL(config.$nav) 26 | utils.biggie.addRoutingEL(config.$all) 27 | 28 | this.trigger = config.$body.querySelector('.mobile-menu') 29 | this.menu = config.$body.querySelector('.menu') 30 | this.a = utils.js.arrayFrom(this.menu.querySelectorAll('a')) 31 | 32 | this.trigger.onclick = this.handler 33 | this.a.forEach((el) => el.onclick = this.handler) 34 | } 35 | 36 | handler(e) { 37 | 38 | e.preventDefault() 39 | 40 | if(this.animating) return 41 | 42 | const target = e.srcElement 43 | const href = target.getAttribute('href') 44 | 45 | // console.log(target.hasAttribute('href'), href) 46 | 47 | this.open === true ? this.animateMenuOut() : this.animateMenuIn() 48 | 49 | target.hasAttribute('href') && framework.go(href) 50 | } 51 | 52 | animateMenuIn() { 53 | 54 | this.open = true 55 | this.animating = true 56 | 57 | this.trigger.innerHTML = 'Close' 58 | 59 | classes.add(config.$body, 'has-menu-open') 60 | 61 | const tl = new TimelineMax({ paused: true, onComplete: () => { 62 | this.animating = false 63 | }}) 64 | tl.to(this.menu, 1, { autoAlpha: 1 }) 65 | tl.staggerFrom(this.a, 1, { y: '100%', autoAlpha: 0 }, .02, 0) 66 | tl.restart() 67 | } 68 | 69 | animateMenuOut() { 70 | 71 | this.animating = true 72 | 73 | this.trigger.innerHTML = 'Menu' 74 | 75 | classes.remove(config.$body, 'has-menu-open') 76 | 77 | const tl = new TimelineMax({ paused: true, onComplete: () => { 78 | this.open = false 79 | this.animating = false 80 | }}) 81 | tl.to(this.menu, 1, { autoAlpha: 0 }) 82 | tl.staggerTo(this.a, 1, { autoAlpha: 0, clearProps: 'opacity, hidden, transform' }, -.02, 0) 83 | tl.restart() 84 | } 85 | } 86 | 87 | module.exports = Biggie -------------------------------------------------------------------------------- /assets/js/config.js: -------------------------------------------------------------------------------- 1 | import domselect from 'dom-select' 2 | import utils from './utils' 3 | import prefix from 'prefix' 4 | 5 | const config = { 6 | 7 | PATH: '', 8 | 9 | prevRoute: '/', 10 | routes: { 11 | default: '/', 12 | home: '/diary' 13 | }, 14 | 15 | $html: document.documentElement, 16 | $body: document.body, 17 | $view: domselect('#js-view'), 18 | $logo: domselect('.logo'), 19 | $name: domselect('.name'), 20 | $arrow: domselect('.arrow'), 21 | $bar: domselect('nav'), 22 | $nav: domselect.all('nav a'), 23 | $all: domselect.all('.project-list a'), 24 | 25 | width: window.innerWidth, 26 | height: window.innerHeight, 27 | 28 | formats: ['mp4'], 29 | 30 | prefix: { 31 | transform: prefix('transform') 32 | }, 33 | 34 | mouseMultiplier: 1, 35 | firefoxMultiplier: 50, 36 | ease: .1, 37 | 38 | isMobile: window.innerWidth <= 768, 39 | hasVideo: true, 40 | hasBlendMode: 'backgroundBlendMode' in document.body.style 41 | } 42 | 43 | export default config -------------------------------------------------------------------------------- /assets/js/framework.js: -------------------------------------------------------------------------------- 1 | import bigwheel from 'bigwheel'; 2 | 3 | /* ---------- 4 | create our framework instance 5 | see https://github.com/bigwheel-framework/documentation/blob/master/quickstart.md#bigwheel-quick-start 6 | ---------- */ 7 | var framework = bigwheel((done) => { 8 | done({ 9 | overlap: true, 10 | initSection: require('./sections/preloader'), 11 | routes: require('./routes') 12 | }); 13 | }); 14 | 15 | export default framework -------------------------------------------------------------------------------- /assets/js/lib/jello.js: -------------------------------------------------------------------------------- 1 | import config from 'config' 2 | import PIXI from 'pixi.js' 3 | 4 | export default class Jello { 5 | 6 | constructor(options = {}) { 7 | 8 | this.defaults = {} 9 | this.options = options 10 | this.container = options.container 11 | 12 | this.imgWidth = options.images[0].width 13 | this.imgHeight = options.images[0].height 14 | this.imgRatio = this.imgHeight / this.imgWidth 15 | this.winWidth = config.width 16 | 17 | this.bgArray = options.images 18 | this.bgSpriteArray = [] 19 | 20 | this.renderer = PIXI.autoDetectRenderer(this.winWidth, (this.winWidth * this.imgRatio)) 21 | this.stage = new PIXI.Container() 22 | this.imgContainer = new PIXI.Container() 23 | 24 | this.displacementSprite = PIXI.Sprite.fromImage(`${APP.THEME_URL}/assets/images/wood.jpg`) 25 | this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite) 26 | 27 | this.currentMap = {} 28 | this.counter = { image: 0, map: 0 } 29 | this.mapArray = [ 30 | { image: `${APP.THEME_URL}/assets/images/displacement-3.jpg`, speed: 1.5, scale: 250 }, 31 | { image: `${APP.THEME_URL}/assets/images/displacement-4.jpg`, speed: 1.5, scale: 250 } 32 | ] 33 | 34 | this.rAF = undefined 35 | this.requestAnimationFrame = this.requestAnimationFrame.bind(this) 36 | 37 | this.isDistorted = true 38 | this.isTransitioning = false 39 | } 40 | 41 | init() { 42 | 43 | this.defaults = { 44 | transition: 1, 45 | speed: 1, 46 | dispScale: 40, 47 | dispX: true, 48 | dispY: true, 49 | count: 0 50 | } 51 | 52 | this.update() 53 | // this.backgroundFill() 54 | this.buildStage() 55 | this.createBackgrounds() 56 | this.createFilters() 57 | 58 | this.requestAnimationFrame() 59 | 60 | this.renderer.view.setAttribute('class', 'jello-canvas') 61 | this.container.appendChild(this.renderer.view) 62 | } 63 | 64 | requestAnimationFrame() { 65 | 66 | this.displacementFilter.scale.x = this.settings.dispX ? this.settings.transition * this.settings.dispScale : 0 67 | this.displacementFilter.scale.y = this.settings.dispY ? this.settings.transition * (this.settings.dispScale + 10) : 0 68 | 69 | this.displacementSprite.x = Math.sin(this.settings.count * 0.15) * 200 70 | this.displacementSprite.y = Math.cos(this.settings.count * 0.13) * 200 71 | 72 | this.displacementSprite.rotation = this.settings.count * 0.06 73 | 74 | this.settings.count += 0.05 * this.settings.speed 75 | 76 | this.renderer.render(this.stage) 77 | 78 | this.rAF = requestAnimationFrame(this.requestAnimationFrame) 79 | } 80 | 81 | backgroundFill() { 82 | 83 | this.renderer.view.setAttribute('style', 'height:auto;width:100%;'); 84 | } 85 | 86 | buildStage() { 87 | 88 | this.imgContainer.position.x = this.imgWidth / 2 89 | this.imgContainer.position.y = this.imgHeight / 2 90 | 91 | this.stage.scale.x = this.stage.scale.y = this.winWidth / this.imgWidth; 92 | this.stage.interactive = true 93 | this.stage.addChild(this.imgContainer) 94 | } 95 | 96 | changeImage() { 97 | 98 | if(this.counter.image < (this.bgArray.length - 1)) { 99 | this.counter.image++ 100 | } else { 101 | this.counter.image = 0 102 | } 103 | 104 | this.bgSpriteArray.map((sprite, i) => TweenLite.to(sprite, 1.1, { alpha: i == this.counter.image ? 1 : 0, ease: Linear.easeNone })) 105 | } 106 | 107 | changeMap() { 108 | 109 | if(this.counter.map < (this.mapArray.length - 1)) { 110 | this.counter.map++ 111 | } else { 112 | this.counter.map = 0 113 | } 114 | 115 | this.currentMap = this.mapArray[this.counter.map] 116 | this.displacementSprite = PIXI.Sprite.fromImage(`${this.currentMap.image}`) 117 | this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite) 118 | 119 | this.createFilters() 120 | } 121 | 122 | toggleDistortion() { 123 | 124 | if(this.isDistorted) { 125 | 126 | this.distortionLevel(0) 127 | this.isDistorted = false 128 | } else { 129 | 130 | this.distortionLevel(1) 131 | this.isDistorted = true 132 | } 133 | } 134 | 135 | createBackgrounds() { 136 | 137 | this.bgArray.map((el) => { 138 | 139 | const bg = PIXI.Sprite.fromImage(el.image) 140 | 141 | // Set image anchor to the center of the image 142 | bg.anchor.x = 0.5 143 | bg.anchor.y = 0.5 144 | 145 | this.imgContainer.addChild(bg) 146 | this.bgSpriteArray.push(bg) 147 | 148 | // set first image alpha to 1, all else to 0 149 | bg.alpha = this.bgSpriteArray.length === 1 ? 1 : 0 150 | }) 151 | } 152 | 153 | createFilters() { 154 | 155 | this.stage.addChild(this.displacementSprite) 156 | 157 | this.displacementFilter.scale.x = this.displacementFilter.scale.y = this.winWidth / this.imgWidth 158 | 159 | this.imgContainer.filters = [this.displacementFilter] 160 | } 161 | 162 | distortionLevel(amt) { 163 | 164 | if(!this.isTransitioning){ 165 | 166 | this.isTransitioning = true 167 | 168 | TweenLite.to(this.settings, 1, { 169 | transition: amt, 170 | speed: this.currentMap.speed, 171 | dispScale: this.currentMap.scale, 172 | ease: Power2.easeInOut, 173 | onComplete: () => { 174 | this.isTransitioning = false; 175 | } 176 | }); 177 | } 178 | } 179 | 180 | update() { 181 | 182 | this.settings = Object.assign({}, this.defaults, this.options); 183 | } 184 | 185 | resize() {} 186 | 187 | destroy() { 188 | 189 | cancelAnimationFrame(this.rAF) 190 | this.settings = this.defaults 191 | this.bgArray = [] 192 | this.bgSpriteArray = [] 193 | 194 | this.stage.destroy() 195 | this.renderer.destroy() 196 | 197 | // PIXI.utils.textureCache = {} 198 | // PIXI.utils.baseTextureCache = {} 199 | } 200 | } -------------------------------------------------------------------------------- /assets/js/lib/smooth/diary.js: -------------------------------------------------------------------------------- 1 | import config from 'config' 2 | import utils from 'utils' 3 | import classes from 'dom-classes' 4 | import Smooth from 'smooth-scrolling' 5 | import _ from 'underscore' 6 | 7 | class Diary extends Smooth { 8 | 9 | constructor(opt) { 10 | 11 | super(opt) 12 | 13 | this.dom.left = utils.js.arrayFrom(opt.left) 14 | this.dom.right = utils.js.arrayFrom(opt.right) 15 | this.length = this.dom.left.length + this.dom.right.length 16 | 17 | this.autoScroll = true 18 | this.resizing = false 19 | this.idle = true 20 | this.cache = null 21 | this.debounce = _.debounce(this.debounce.bind(this), 50) 22 | } 23 | 24 | resize() { 25 | 26 | this.debounce() 27 | } 28 | 29 | debounce() { 30 | 31 | this.resizing = true 32 | 33 | this.dom.left.forEach((el, index) => el.style[config.prefix.transform] = `translate3d(-30%,${config.height*index}px,0)`) 34 | this.dom.right.forEach((el, index) => el.style[config.prefix.transform] = `translate3d(30%,-${config.height*index}px,0)`) 35 | 36 | this.vars.bounding = config.height * ((this.length / 2) - 1) + config.height / 2 37 | 38 | super.resize() 39 | 40 | this.resizing = false 41 | } 42 | 43 | calc(e) { 44 | 45 | super.calc(e) 46 | this.idle = e.deltaY === 0 47 | } 48 | 49 | run() { 50 | 51 | super.run() 52 | 53 | if(this.autoScroll && this.idle && this.vars.target < this.vars.bounding) 54 | this.vars.target += .3 55 | 56 | this.dom.left.forEach((el, index) => el.style[config.prefix.transform] = `translate3d(-30%,${(config.height*index) - this.vars.current}px,0)`) 57 | this.dom.right.forEach((el, index) => el.style[config.prefix.transform] = `translate3d(30%,${(config.height*(index*-1)) + this.vars.current}px,0)`) 58 | } 59 | 60 | destroy() { 61 | 62 | // this.dom.left.forEach((el, index) => el.style[config.prefix.transform] = '') 63 | // this.dom.right.forEach((el, index) => el.style[config.prefix.transform] = '') 64 | 65 | super.destroy() 66 | } 67 | } 68 | 69 | export default Diary -------------------------------------------------------------------------------- /assets/js/lib/smooth/single.js: -------------------------------------------------------------------------------- 1 | import config from 'config' 2 | import utils from 'utils' 3 | import Smooth from 'smooth-scrolling' 4 | import classes from 'dom-classes' 5 | 6 | class Custom extends Smooth { 7 | 8 | constructor(opt) { 9 | 10 | super(opt) 11 | 12 | this.dom.section = opt.section 13 | } 14 | 15 | resize() { 16 | 17 | super.resize() 18 | 19 | this.vars.bounding = this.dom.section.getBoundingClientRect().height - this.vars.height 20 | } 21 | 22 | run() { 23 | 24 | super.run() 25 | 26 | this.dom.section.style[this.prefix] = `translate3d(0,${-this.vars.current.toFixed(3)}px,0)` 27 | } 28 | 29 | destroy() { 30 | 31 | // this.dom.section.style[this.prefix] = '' 32 | 33 | super.destroy() 34 | } 35 | } 36 | 37 | export default Custom -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | import framework from 'framework' 2 | import config from 'config' 3 | import classes from 'dom-classes' 4 | import event from 'dom-event' 5 | import gsap from 'gsap' 6 | 7 | TweenLite.defaultEase = Expo.easeOut 8 | 9 | config.isMobile = config.width < 768 10 | config.hasBlendMode && classes.add(config.$body, 'has-blend-mode') 11 | 12 | require('fastclick')(document.body) 13 | 14 | framework.init() -------------------------------------------------------------------------------- /assets/js/routes.js: -------------------------------------------------------------------------------- 1 | /* ---------- 2 | all routes needs to be defined inline 3 | see https://github.com/bigwheel-framework/documentation/blob/master/routes-defining.md#as-section-standard-form 4 | ---------- */ 5 | module.exports = { 6 | '/': '/diary', 7 | '/diary': { section: require('./sections/home') }, 8 | '/diary/:id': { section: require('./sections/section') }, 9 | '/profile': { section: require('./sections/about') }, 10 | '/contact': { section: require('./sections/contact') }, 11 | '404': '/diary' 12 | } -------------------------------------------------------------------------------- /assets/js/sections/about.js: -------------------------------------------------------------------------------- 1 | import config from 'config' 2 | import utils from 'utils' 3 | import classes from 'dom-classes' 4 | import event from 'dom-events' 5 | import Default from './default' 6 | import Manager from 'slider-manager' 7 | import Jello from '../lib/jello' 8 | import {on, off} from 'dom-events' 9 | 10 | class About extends Default { 11 | 12 | constructor(opt) { 13 | 14 | super(opt) 15 | 16 | this.slug = 'about' 17 | 18 | this.goNext = this.goNext.bind(this) 19 | } 20 | 21 | init(req, done) { 22 | 23 | super.init(req, done) 24 | } 25 | 26 | dataAdded(done) { 27 | 28 | super.dataAdded() 29 | 30 | !config.isMobile && this.addEvents() 31 | 32 | done() 33 | } 34 | 35 | addEvents() { 36 | 37 | this.ui.index = utils.js.arrayFrom(this.ui.index) 38 | this.paragraphs = utils.js.arrayFrom(this.page.querySelectorAll('.p p')) 39 | 40 | config.$arrow.style.cursor = 'pointer' 41 | on(config.$arrow, 'click', this.goNext) 42 | 43 | this.addSplit() 44 | this.addJello() 45 | this.addSlider() 46 | } 47 | 48 | addSplit() { 49 | 50 | this.splits = [] 51 | 52 | this.paragraphs.forEach((el) => { 53 | 54 | const split = new SplitText(el, { type: 'lines, words' }) 55 | this.splits.push(split) 56 | }) 57 | } 58 | 59 | addSlider() { 60 | 61 | this.slider = new Manager({ 62 | length: this.paragraphs.length, 63 | loop: true, 64 | callback: (event) => this.onScroll(event) 65 | }) 66 | 67 | this.slider.init() 68 | this.slider.animating = true 69 | 70 | TweenMax.delayedCall(1.5, _ => { 71 | 72 | this.slider.animating = false 73 | this.slider.goTo(1) 74 | }) 75 | } 76 | 77 | addJello() { 78 | 79 | const hasRetina = utils.hardware.hasRetina() 80 | const images = [] 81 | 82 | APP.ABOUT.forEach((el) => { 83 | 84 | const image = hasRetina ? el.image.sizes.large : el.image.sizes.medium_large 85 | const width = hasRetina ? el.image.sizes['large-width'] : el.image.sizes['medium_large-width'] 86 | const height = hasRetina ? el.image.sizes['large-height'] : el.image.sizes['medium_large-height'] 87 | const obj = { image: image, width: width, height: height } 88 | images.push(obj) 89 | }) 90 | 91 | this.jello = new Jello({ 92 | container: this.ui.image, 93 | images: images 94 | }) 95 | 96 | this.jello.init() 97 | 98 | // console.log(this.jello) 99 | } 100 | 101 | onScroll(event) { 102 | 103 | if(config.isMobile) return 104 | 105 | const index = event.current 106 | const previous = event.previous 107 | const down = event.direction === 'downwards' 108 | 109 | this.jello.isTransitioning = true 110 | 111 | this.slider.animating = true 112 | index == this.paragraphs.length ? classes.add(config.$arrow, 'rotate') : classes.remove(config.$arrow, 'rotate') 113 | 114 | const stagger = index == 1 ? 'staggerFrom' : 'staggerTo' 115 | const inverse = index == 0 ? 1 : 0 116 | 117 | this.ui.index.forEach((el, loop) => { 118 | classes.remove(el, 'is-current-index') 119 | loop == index-1 && classes.add(el, 'is-current-index') 120 | }) 121 | 122 | const tl = new TimelineMax({ paused: true, onComplete: _ => { 123 | 124 | this.jello.isTransitioning = false 125 | this.splits[previous-1] && tl.set(this.splits[previous-1].words, { clearProps: 'opacity, visibility, transform' }) 126 | this.slider.animating = false 127 | }}) 128 | 129 | tl.set(config.$logo, { opacity: inverse }, index == 0 ? .6 : 0) 130 | tl.staggerTo(this.paragraphs, 1, { cycle: { opacity: (i) => index === 0 ? 0 : i === index-1 ? 1 : 0, delay: (i) => index === 0 ? .6 : i === index-1 ? 0 : .6 }}, 0, 0) 131 | 132 | this.splits[previous-1] && tl.staggerTo(this.splits[previous-1].words, .9, { autoAlpha: 0, y: '-100%', cycle: { scale: [.8, 1], rotationY: ['-5deg', '5deg'], skewX: ['-5deg', '5deg'] }, ease: Expo.easeInOut }, -.6 / this.splits[previous-1].words.length, 0) 133 | this.splits[index-1] && tl.staggerFrom(this.splits[index-1].words, .9, { autoAlpha: 0, y: '100%', cycle: { scale: [.8, 1.1], rotationY: ['-15deg', '15deg'], skewX: ['-10deg', '10deg'] }, ease: Expo.easeInOut }, .8 / this.splits[index-1].words.length, this.splits[previous-1] ? .6 : 0) 134 | 135 | tl.to(this.page.querySelector('.intrinsic'), 1, { autoAlpha: index == 0 ? 1 : .6, ease: Expo.easeInOut }, 0) 136 | 137 | if(this.jello) { 138 | 139 | tl.to(this.jello.settings, .6, { 140 | transition: 1, 141 | speed: .6, 142 | dispScale: 40, 143 | ease: Power2.easeOut 144 | }, 0) 145 | 146 | tl.add(() => this.jello.changeImage(), .35) 147 | 148 | tl.to(this.jello.settings, .6, { 149 | transition: 0, 150 | speed: 0, 151 | dispScale: 0, 152 | ease: Linear.easeNone 153 | }, 1) 154 | } 155 | 156 | tl.restart() 157 | } 158 | 159 | goNext(e) { 160 | 161 | const next = this.slider.index == this.slider.length ? 0 : this.slider.index+1 162 | 163 | this.slider.goTo(next) 164 | } 165 | 166 | removeEvents() { 167 | 168 | config.$arrow.style.cursor = '' 169 | off(config.$arrow, 'click', this.goNext) 170 | 171 | this.jello && this.jello.destroy() 172 | this.slider && this.slider.destroy() 173 | } 174 | 175 | animateIn(req, done) { 176 | 177 | classes.add(config.$body, `is-${this.slug}`) 178 | 179 | const tl = new TimelineMax({ paused: true, onComplete: done }) 180 | tl.to(this.page, 1.2, { autoAlpha: 1, ease: Expo.easeOut }) 181 | tl.to(this.page.querySelector('.intrinsic'), 5, { autoAlpha: config.isMobile ? .2 : 1, scale: 1, ease: Expo.easeOut }, .5) 182 | tl.restart() 183 | } 184 | 185 | animateOut(req, done) { 186 | 187 | this.slider && this.slider.index != 0 && this.slider.goTo(0) 188 | 189 | this.page.style.zIndex = '10' 190 | 191 | classes.remove(config.$body, `is-${this.slug}`) 192 | 193 | const tl = new TimelineMax({ paused: true, onComplete: done }) 194 | tl.to(this.page.querySelector('.intrinsic'), 1, { autoAlpha: 0, ease: Expo.easeOut }, this.slider ? this.slider.index / 2 : 0) 195 | tl.to(this.page, 1.1, { y: '100%' }) 196 | tl.restart() 197 | } 198 | 199 | resize(width, height) { 200 | 201 | super.resize(width, height) 202 | 203 | this.jello && this.jello.resize() 204 | } 205 | 206 | destroy(req, done) { 207 | 208 | super.destroy() 209 | 210 | !config.isMobile && this.removeEvents() 211 | 212 | this.page.parentNode.removeChild(this.page) 213 | 214 | done() 215 | } 216 | } 217 | 218 | module.exports = About -------------------------------------------------------------------------------- /assets/js/sections/contact.js: -------------------------------------------------------------------------------- 1 | import config from 'config' 2 | import utils from 'utils' 3 | import classes from 'dom-classes' 4 | import event from 'dom-events' 5 | import Default from './default' 6 | import Manager from 'slider-manager' 7 | 8 | class Contact extends Default { 9 | 10 | constructor(opt) { 11 | 12 | super(opt) 13 | 14 | this.slug = 'contact' 15 | } 16 | 17 | init(req, done) { 18 | 19 | super.init(req, done) 20 | } 21 | 22 | dataAdded(done) { 23 | 24 | super.dataAdded() 25 | 26 | this.addEvents() 27 | 28 | done() 29 | } 30 | 31 | addEvents() { 32 | 33 | } 34 | 35 | removeEvents() { 36 | 37 | 38 | } 39 | 40 | animateIn(req, done) { 41 | 42 | classes.add(config.$body, `is-${this.slug}`) 43 | 44 | const tl = new TimelineMax({ paused: true, onComplete: done }) 45 | tl.from(this.page, 1, { autoAlpha: 0 }) 46 | tl.staggerFrom(this.page.querySelectorAll('.p span'), 1, { y: '115%' }, .08, 0) 47 | tl.staggerFrom(this.page.querySelectorAll('.right .el'), 1, { x: '100%', autoAlpha: 0 }, .08, 0) 48 | tl.restart() 49 | } 50 | 51 | animateOut(req, done) { 52 | 53 | classes.remove(config.$body, `is-${this.slug}`) 54 | 55 | const tl = new TimelineMax({ paused: true, onComplete: done }) 56 | tl.staggerTo(this.page.querySelectorAll('.p span'), 1, { y: '-115%' }, .08, 0) 57 | tl.staggerTo(this.page.querySelectorAll('.right .el'), 1, { autoAlpha: 0 }, .08, 0) 58 | tl.to(this.page, 1, { autoAlpha: 0 }, '-=1') 59 | tl.restart() 60 | } 61 | 62 | resize(width, height) { 63 | 64 | super.resize(width, height) 65 | } 66 | 67 | destroy(req, done) { 68 | 69 | super.destroy() 70 | 71 | this.removeEvents() 72 | 73 | this.page.parentNode.removeChild(this.page) 74 | 75 | done() 76 | } 77 | } 78 | 79 | module.exports = Contact -------------------------------------------------------------------------------- /assets/js/sections/default.js: -------------------------------------------------------------------------------- 1 | import framework from 'framework' 2 | import config from 'config' 3 | import utils from 'utils' 4 | import classes from 'dom-classes' 5 | import query from 'query-dom-components' 6 | import _ from 'underscore' 7 | import $ from 'dom-select' 8 | 9 | class Default { 10 | 11 | constructor(opt) { 12 | 13 | opt = opt || {} 14 | 15 | this.isMobile = config.isMobile = config.width <= 768 16 | 17 | this.view = config.$view 18 | this.page = null 19 | 20 | this.debouncedResize = _.debounce(this.debounce.bind(this), 300) 21 | } 22 | 23 | init(req, done, options) { 24 | 25 | const opts = options || { sub: false } 26 | 27 | const view = this.view 28 | const ready = this.dataAdded.bind(this, done) 29 | const page = this.page = req.previous === undefined ? config.$view.querySelector('.page') : utils.biggie.loadPage(req, view, ready, opts) 30 | 31 | req.previous === undefined && (classes.remove(page, 'is-hidden'), this.dataAdded(done)) 32 | } 33 | 34 | dataAdded() { 35 | 36 | this.page.style.display = 'block' 37 | 38 | this.ui = query({ el: this.page, prefix: 'ui-' }) 39 | this.a = $.all('a', this.page) 40 | 41 | this.a && utils.biggie.addRoutingEL(this.a) 42 | 43 | // config.prevRoute = window.location.pathname 44 | } 45 | 46 | resize(width, height) { 47 | 48 | config.height = height 49 | config.width = width 50 | 51 | config.isMobile = config.width <= 768 52 | 53 | this.debouncedResize() 54 | } 55 | 56 | debounce() {} 57 | 58 | destroy() { 59 | 60 | // kill TweenMax delayedCalls 61 | // http://greensock.com/forums/topic/8917-all-the-methods-to-kill-a-tween/ 62 | // TweenMax.killAll(false, false, true, false) 63 | 64 | this.a && utils.biggie.removeRoutingEL(this.a) 65 | } 66 | } 67 | 68 | export default Default -------------------------------------------------------------------------------- /assets/js/sections/home.js: -------------------------------------------------------------------------------- 1 | import framework from 'framework' 2 | import config from 'config' 3 | import utils from 'utils' 4 | import create from 'dom-create-element' 5 | import classes from 'dom-classes' 6 | import Default from './default' 7 | import Smooth from '../lib/smooth/diary' 8 | import {on, off} from 'dom-events' 9 | 10 | class Home extends Default { 11 | 12 | constructor(opt) { 13 | 14 | super(opt) 15 | 16 | this.slug = 'home' 17 | this.ui = null 18 | this.all = false 19 | this.links = utils.js.arrayFrom(config.$all) 20 | 21 | this.state = { 22 | current: 1 23 | } 24 | 25 | this.animateInAll = this.animateInAll.bind(this) 26 | this.animateOutAll = this.animateOutAll.bind(this) 27 | this.changeMask = this.changeMask.bind(this) 28 | } 29 | 30 | init(req, done) { 31 | 32 | // req.previous && req.previous.route.substring(0, 5) === '/work' && req.previous.params && (this.index = req.previous.params.id) 33 | 34 | super.init(req, done) 35 | } 36 | 37 | dataAdded(done) { 38 | 39 | super.dataAdded() 40 | 41 | this.ui.close = config.$body.querySelector('.list-close') 42 | 43 | this.lazyLoad() 44 | 45 | !config.isMobile && this.addEvents() 46 | 47 | done() 48 | } 49 | 50 | addEvents() { 51 | 52 | this.els = utils.js.arrayFrom(this.page.querySelectorAll('.section a')) 53 | 54 | on(this.ui.all, 'click', this.animateInAll) 55 | on(this.ui.close, 'click', this.animateOutAll) 56 | 57 | this.els.forEach((el) => { 58 | on(el, 'click', this.onClick) 59 | on(el, 'mouseenter', this.changeZIndex) 60 | on(el, 'mouseleave', this.changeZIndex) 61 | }) 62 | 63 | this.links.forEach((el) => on(el, 'mouseenter', this.changeMask)) 64 | 65 | this.initSmooth() 66 | this.smooth.vs.off(this.smooth.calc) 67 | 68 | this.createCanvas() 69 | } 70 | 71 | lazyLoad() { 72 | 73 | this.lazyload = utils.js.arrayFrom(this.page.querySelectorAll('.el .el')) 74 | 75 | this.lazyload.forEach((el) => { 76 | 77 | const img = document.createElement('img') 78 | const image = el.getAttribute('data-src') 79 | 80 | img.onload = () => { 81 | 82 | el.style['background-image'] = `url('${image}')` 83 | 84 | requestAnimationFrame(() => el.opacity = 1) 85 | } 86 | 87 | img.src = image 88 | }) 89 | } 90 | 91 | initSmooth() { 92 | 93 | this.smooth = new Smooth({ 94 | extends: true, 95 | left: this.ui.left, 96 | right: this.ui.right, 97 | ease: .075 98 | }) 99 | 100 | this.smooth.init() 101 | } 102 | 103 | removeEvents() { 104 | 105 | off(this.ui.all, 'click', this.animateInAll) 106 | off(this.ui.close, 'click', this.animateOutAll) 107 | 108 | this.els.forEach((el) => { 109 | off(el, 'click', this.onClick) 110 | off(el, 'mouseenter', this.changeZIndex) 111 | off(el, 'mouseleave', this.changeZIndex) 112 | }) 113 | 114 | this.links.forEach((el) => off(el, 'mouseenter', this.changeMask)) 115 | 116 | this.smooth && this.smooth.destroy() 117 | } 118 | 119 | onClick() { 120 | 121 | classes.add(config.$body, 'is-loading') 122 | } 123 | 124 | createCanvas() { 125 | 126 | const canvas = this.canvas = document.querySelector('.canvas') 127 | const ctx = this.ctx = canvas.getContext('2d') 128 | } 129 | 130 | removeMask() { 131 | 132 | this.canvas = null 133 | } 134 | 135 | createMask(image) { 136 | 137 | const img = document.createElement('img') 138 | const mask = document.createElement('img') 139 | 140 | mask.onload = () => { 141 | 142 | const originwidth = mask.width 143 | const originheight = mask.height 144 | 145 | img.onload = () => { 146 | 147 | const width = img.width 148 | const height = img.height 149 | 150 | const newidth = (originwidth / originheight) * height 151 | const x = (newidth - width) / 2 152 | 153 | this.canvas.width = newidth 154 | this.canvas.height = height 155 | 156 | this.ctx.clearRect(0, 0, config.width, config.height) 157 | this.ctx.drawImage(mask, 0, 0, newidth, height) 158 | this.ctx.globalCompositeOperation = 'source-atop' 159 | this.ctx.drawImage(img, x, 0) 160 | } 161 | 162 | img.src = image 163 | } 164 | 165 | mask.src = config.$logo.getAttribute('data-svg') 166 | } 167 | 168 | changeMask(e) { 169 | 170 | const target = e.currentTarget 171 | const index = target.getAttribute('data-index') 172 | const image = target.getAttribute('data-mask') 173 | 174 | if(this.state.current == index) return 175 | 176 | this.state.current = index 177 | 178 | this.createMask(image) 179 | } 180 | 181 | changeZIndex(e) { 182 | 183 | const target = e.currentTarget 184 | 185 | target.style.zIndex = e.type == 'mouseenter' ? '5' : '' 186 | } 187 | 188 | animateInAll() { 189 | 190 | if(this.all) return 191 | 192 | this.all = true 193 | 194 | this.createMask(config.$logo.getAttribute('data-mask')) 195 | 196 | classes.remove(this.page, 'has-hover') 197 | classes.add(this.ui.all, 'is-hidden') 198 | classes.add(config.$logo, 'scaled') 199 | 200 | const tl = new TimelineMax({ paused: true, onComplete: () => { 201 | this.smooth && this.smooth.off() 202 | }}) 203 | tl.staggerTo(this.lazyload, 1.1, { cycle: { x: (index) => (index & 1) ? config.width/3 : -config.width/3 }, autoAlpha: 0, ease: Expo.easeOut }, 0, 0) 204 | tl.to(config.$body.querySelector('.project-list'), 1, { autoAlpha: 1 }, 1) 205 | tl.staggerFrom(config.$body.querySelectorAll('.project-list a'), 1.5, { cycle: { 206 | skewX: (index) => (index & 1) ? '-5deg' : '5deg', 207 | scale: (index) => (index & 1) ? '1.1' : '.9' 208 | }, autoAlpha: 0 }, .1, 0) 209 | tl.restart() 210 | } 211 | 212 | animateOutAll(onComplete) { 213 | 214 | if(!this.all) return 215 | 216 | classes.remove(config.$logo, 'scaled') 217 | classes.remove(this.ui.all, 'is-hidden') 218 | 219 | this.smooth && this.smooth.on() 220 | 221 | const tl = new TimelineMax({ paused: true, onComplete: () => { 222 | 223 | classes.add(this.page, 'has-hover') 224 | this.all = false 225 | typeof onComplete === 'function' && onComplete() 226 | }}) 227 | tl.staggerTo(this.lazyload, 1.1, { x: 0, autoAlpha: 1, ease: Expo.easeOut }, .02, 0) 228 | tl.to(config.$body.querySelector('.project-list'), .6, { autoAlpha: 0, clearProps: 'all', ease: Expo.easeOut }, 0) 229 | tl.restart() 230 | } 231 | 232 | animateIn(req, done) { 233 | 234 | const work = req.previous && req.previous.route === `/work/:id` 235 | 236 | classes.add(config.$body, `is-${this.slug}`) 237 | 238 | const half = config.height/2 239 | const tl = new TimelineMax({ paused: true, onComplete: () => { 240 | 241 | classes.add(this.page, 'has-hover') 242 | done() 243 | }}) 244 | tl.from(this.page, 1.1, { autoAlpha: 0, scale: 1.2, ease: Power2.easeInOut }, 0) 245 | tl.staggerTo(this.lazyload, 1, { autoAlpha: 1, ease: Expo.easeOut }, .08, 0) 246 | 247 | !config.isMobile && tl.add(() => this.smooth.vs.on(this.smooth.calc), 1) 248 | 249 | tl.restart() 250 | } 251 | 252 | animateOut(req, done) { 253 | 254 | this.page.style.zIndex = '10' 255 | 256 | const tween = () => { 257 | 258 | classes.remove(config.$body, `is-${this.slug}`) 259 | classes.remove(this.page, 'has-hover') 260 | 261 | !config.isMobile && this.removeEvents() 262 | 263 | const tl = new TimelineMax({ paused: true, onComplete: done }) 264 | tl.staggerTo(this.lazyload, 3, { autoAlpha: 0, ease: Expo.easeInOut }, .08, 0) 265 | tl.to(this.page, 1.3, { y: '100%', ease: Expo.easeInOut }, 0) 266 | tl.restart() 267 | } 268 | 269 | this.all ? this.animateOutAll(() => tween()) : tween() 270 | } 271 | 272 | resize(width, height) { 273 | 274 | super.resize(width, height) 275 | } 276 | 277 | debounce() { 278 | 279 | super.debounce() 280 | 281 | if(config.isMobile) { 282 | this.smooth && (this.smooth.destroy(), this.smooth = null) 283 | } else { 284 | !this.smooth && this.initSmooth() 285 | } 286 | } 287 | 288 | destroy(req, done) { 289 | 290 | super.destroy() 291 | 292 | this.removeMask() 293 | 294 | this.page.parentNode.removeChild(this.page) 295 | 296 | done() 297 | } 298 | } 299 | 300 | module.exports = Home -------------------------------------------------------------------------------- /assets/js/sections/preloader.js: -------------------------------------------------------------------------------- 1 | import config from 'config' 2 | import classes from 'dom-classes' 3 | import create from 'dom-create-element' 4 | import {on, off} from 'dom-events' 5 | import Biggie from '../app' 6 | 7 | class Preloader { 8 | 9 | constructor(onComplete) { 10 | 11 | this.preloaded = onComplete 12 | this.ready = this.ready.bind(this) 13 | this.view = config.$view 14 | this.el = null 15 | } 16 | 17 | init(req, done) { 18 | 19 | const preload = document.createElement('img') 20 | const int = Math.floor(Math.random()*APP.IMAGES.length) 21 | const random = APP.IMAGES[int] 22 | const image = config.isMobile ? random.image.sizes.large : random.image.url 23 | const template = `
` 24 | const page = this.view.firstChild 25 | 26 | const app = new Biggie() 27 | app.init() 28 | 29 | this.el = create({ 30 | selector: 'div', 31 | styles: 'preloader', 32 | html: template 33 | }) 34 | 35 | this.view.insertBefore(this.el, page) 36 | 37 | preload.onload = done 38 | preload.src = image 39 | } 40 | 41 | addEvents() { 42 | 43 | on(this.el, 'click', this.ready) 44 | on(config.$body, 'mousewheel', this.ready) 45 | } 46 | 47 | removeEvents() { 48 | 49 | off(this.el, 'click', this.ready) 50 | off(config.$body, 'mousewheel', this.ready) 51 | } 52 | 53 | resize(width, height) { 54 | 55 | config.width = width 56 | config.height = height 57 | } 58 | 59 | ready() { 60 | 61 | if(this.called) return 62 | 63 | this.called = true 64 | 65 | // TweenMax.set(config.$logo, { opacity: .95, 'will-change': 'transform, opacity' }, 1) 66 | 67 | classes.add(config.$logo, 'rotate') 68 | 69 | classes.remove(config.$body, 'is-loaded') 70 | classes.remove(config.$bar, 'hidden') 71 | classes.remove(config.$body.querySelector('.email'), 'hidden') 72 | 73 | requestAnimationFrame(_ => this.el.querySelector('.background').style.opacity = 0) 74 | 75 | this.preloaded() 76 | } 77 | 78 | animateIn(req, done) { 79 | 80 | classes.remove(config.$name, 'hidden') 81 | classes.add(config.$body, 'is-loaded') 82 | classes.remove(config.$logo, 'hidden') 83 | classes.remove(config.$arrow, 'hidden') 84 | 85 | this.el.style.opacity = 1 86 | 87 | requestAnimationFrame(_ => { 88 | 89 | this.el.querySelector('.background').style.opacity = 1 90 | this.el.querySelector('.background').style[config.prefix.transform] = 'none' 91 | }) 92 | 93 | TweenMax.delayedCall(.5, _ => { 94 | this.addEvents() 95 | done() 96 | }) 97 | } 98 | 99 | animateOut(req, done) { 100 | 101 | classes.remove(config.$html, 'is-preloader') 102 | 103 | done() 104 | } 105 | 106 | destroy(req, done) { 107 | 108 | this.removeEvents() 109 | 110 | TweenMax.delayedCall(1.5, _ => { 111 | 112 | this.view.removeChild(this.el) 113 | done() 114 | }) 115 | } 116 | } 117 | 118 | module.exports = Preloader -------------------------------------------------------------------------------- /assets/js/sections/section.js: -------------------------------------------------------------------------------- 1 | import framework from 'framework' 2 | import config from 'config' 3 | import utils from 'utils' 4 | import classes from 'dom-classes' 5 | import Default from './default' 6 | import Smooth from '../lib/smooth/single' 7 | 8 | class Section extends Default { 9 | 10 | constructor(opt) { 11 | 12 | super(opt) 13 | 14 | this.slug = 'section' 15 | } 16 | 17 | init(req, done) { 18 | 19 | this.prevRoute = req.previous ? req.previous.route : '/' 20 | 21 | super.init(req, done) 22 | } 23 | 24 | dataAdded(done) { 25 | 26 | super.dataAdded() 27 | 28 | !config.isMobile && this.addEvents() 29 | 30 | done() 31 | } 32 | 33 | addEvents() { 34 | 35 | this.smooth = new Smooth({ 36 | section: this.ui.section, 37 | ease: .075 38 | }) 39 | 40 | this.smooth.init() 41 | } 42 | 43 | removeEvents() { 44 | 45 | this.smooth && this.smooth.destroy() 46 | } 47 | 48 | animateIn(req, done) { 49 | 50 | classes.remove(config.$body, 'is-loading') 51 | 52 | const previous = req.previous && req.previous.route 53 | const home = req.previous && req.previous.route === (config.routes.default || config.routes.home) 54 | 55 | !previous && classes.add(config.$body, `is-${this.slug}`) 56 | 57 | const tl = new TimelineMax({ paused: true, onComplete: done }) 58 | tl.from(this.page, 1.2, { autoAlpha: 0, y: previous ? '-15%' : '0%', ease: Expo.easeInOut }, home ? 3 : 0) 59 | tl.staggerTo(this.page.querySelectorAll('.intrinsic .el'), 3.5, { opacity: 1, scale: 1 }, 1, .8) 60 | previous && tl.add(_ => classes.add(config.$body, `is-${this.slug}`), .8) 61 | tl.restart() 62 | } 63 | 64 | animateOut(req, done) { 65 | 66 | classes.remove(config.$body, `is-${this.slug}`) 67 | 68 | this.page.style.zIndex = '10' 69 | 70 | // const home = req.route === (config.routes.default || config.routes.home) 71 | // const work = req.route === config.routes.work 72 | 73 | const tl = new TimelineMax({ paused: true, onComplete: done }) 74 | tl.to(this.page, .6, { autoAlpha: 0, ease: Expo.easeOut }) 75 | tl.staggerTo(this.page.querySelectorAll('.intrinsic .el'), 1, { opacity: 0 }, .02, 0) 76 | tl.restart() 77 | } 78 | 79 | resize(width, height) { 80 | 81 | super.resize(width, height) 82 | } 83 | 84 | debounce() { 85 | 86 | super.debounce() 87 | 88 | if(config.isMobile) { 89 | this.smooth && (this.smooth.destroy(), this.smooth = null) 90 | } else { 91 | !this.smooth && (this.addEvents()) 92 | } 93 | } 94 | 95 | destroy(req, done) { 96 | 97 | super.destroy() 98 | 99 | !config.isMobile && this.removeEvents() 100 | 101 | this.page.parentNode.removeChild(this.page) 102 | 103 | done() 104 | } 105 | } 106 | 107 | module.exports = Section -------------------------------------------------------------------------------- /assets/js/utils.js: -------------------------------------------------------------------------------- 1 | import framework from 'framework' 2 | import ajax from 'please-ajax' 3 | import create from 'dom-create-element' 4 | import classes from 'dom-classes' 5 | 6 | const utils = { 7 | 8 | css: { 9 | 10 | getRect(top=0, right, bottom, left=0) { 11 | 12 | return `rect(${top}px, ${right}px, ${bottom}px, ${left}px)`; 13 | } 14 | }, 15 | 16 | js: { 17 | 18 | prependChild(el, parent) { 19 | 20 | parent.insertBefore(el, parent.firstChild); 21 | }, 22 | 23 | arrayFrom(opt) { 24 | 25 | return Array.prototype.slice.call(opt, 0); 26 | }, 27 | 28 | clamp(min, value, max) { 29 | 30 | return Math.max(min, Math.min(value, max)); 31 | }, 32 | 33 | scrollTop() { 34 | 35 | if (window.pageYOffset) return window.pageYOffset; 36 | return document.documentElement.clientHeight ? document.documentElement.scrollTop : document.body.scrollTop; 37 | } 38 | }, 39 | 40 | hardware: { 41 | 42 | hasRetina: () => { 43 | 44 | const mediaQuery = `(-webkit-min-device-pixel-ratio: 1.5), 45 | (min--moz-device-pixel-ratio: 1.5), 46 | (-o-min-device-pixel-ratio: 3/2), 47 | (min-resolution: 1.5dppx)`; 48 | 49 | return window.devicePixelRatio > 1 || window.matchMedia && window.matchMedia(mediaQuery).matches ? true : false; 50 | } 51 | }, 52 | 53 | biggie: { 54 | 55 | addRoutingEL(a) { 56 | 57 | utils.js.arrayFrom(a).forEach((el) => el.onclick = utils.biggie.handleRoute) 58 | }, 59 | 60 | removeRoutingEL(a) { 61 | 62 | utils.js.arrayFrom(a).forEach((el) => el.onclick = null) 63 | }, 64 | 65 | handleRoute(e) { 66 | 67 | const target = e.currentTarget 68 | 69 | if(classes.has(target, 'no-route') || target.getAttribute('target') === '_blank') return 70 | 71 | e.preventDefault() 72 | 73 | framework.go(target.getAttribute('href')) 74 | }, 75 | 76 | getSlug(req, options) { 77 | 78 | let route = req.route === "/" ? '/home' : req.route; 79 | const params = Object.keys(req.params).length === 0 && JSON.stringify(req.params) === JSON.stringify({}) 80 | 81 | if(!params) { 82 | 83 | for (var key in req.params) { 84 | if (req.params.hasOwnProperty(key)) { 85 | 86 | route.indexOf(key) > -1 && (route = route.replace(`:${key}`, options.sub ? '' : req.params[key])) 87 | } 88 | } 89 | } 90 | 91 | route.substring(route.length-1) == '/' && (route = route.slice(0, -1)) 92 | return route.substr(1) 93 | }, 94 | 95 | createPage(req, slug) { 96 | 97 | return create({ 98 | selector: 'section', 99 | id: `page-${slug.replace('/', '-')}`, 100 | styles: `page page-${slug.replace('/', '-')}` 101 | }) 102 | }, 103 | 104 | loadPage(req, view, done, options) { 105 | 106 | const slug = utils.biggie.getSlug(req, options) 107 | const page = utils.biggie.createPage(req, slug) 108 | 109 | ajax.get(`/${slug}`, { 110 | success: (object) => { 111 | 112 | const title = object.data.split(/(|<\/title>)/ig)[2] 113 | const inner = object.data.split(/(<body>|<\/body>)/ig)[2] 114 | page.innerHTML = inner 115 | document.title = title.replace(/&/g, '&') 116 | done() 117 | } 118 | }) 119 | 120 | return view.appendChild(page) 121 | } 122 | } 123 | } 124 | 125 | export default utils -------------------------------------------------------------------------------- /assets/less/import/_about.less: -------------------------------------------------------------------------------- 1 | .page-profile { 2 | background: @dark; 3 | .hidden(); 4 | 5 | .index { 6 | position: absolute; 7 | font-size: @14px; 8 | color: white; 9 | margin-top: -50px; 10 | opacity: 0; 11 | transition: opacity .6s linear; 12 | 13 | @media @mobile { 14 | display: none; 15 | } 16 | 17 | &.is-current-index { 18 | opacity: .2; 19 | transition-delay: 1s; 20 | } 21 | } 22 | 23 | .p { 24 | .absolute(); 25 | max-width: 900px; 26 | margin: auto; 27 | width: 100%; 28 | perspective: 600; 29 | 30 | @media @mobile { 31 | display: none; 32 | } 33 | 34 | p { 35 | font: @regular @30px/1.3 @font; 36 | color: white; 37 | opacity: 0; 38 | 39 | @media @mobile { 40 | font-size: @18px; 41 | opacity: 1; 42 | } 43 | 44 | > div { 45 | overflow: hidden; 46 | } 47 | } 48 | } 49 | 50 | .jello-canvas { 51 | position: absolute; top: 0; left: 50%; bottom: 0; 52 | height: 100%; 53 | transform: translateX(-50%); 54 | } 55 | 56 | .intrinsic { 57 | .absolute(); 58 | width: 25%; 59 | margin: auto; 60 | transform: scale(.9); 61 | padding-bottom: 30%; 62 | .hidden(); 63 | 64 | .el { 65 | display: none; 66 | } 67 | 68 | @media @mobile { 69 | width: 55%; 70 | padding-bottom: 100%; 71 | opacity: .2; 72 | 73 | .el { 74 | display: block; 75 | } 76 | } 77 | } 78 | 79 | .vertical-center { 80 | @media @mobile { 81 | position: fixed; 82 | } 83 | } 84 | 85 | .mobile-p { 86 | display: none; 87 | position: relative; 88 | max-width: 85%; 89 | margin: 75vh auto @180px; 90 | color: white; 91 | 92 | p { 93 | font: @regular @35px/1.3 @font; 94 | margin-bottom: @15px; 95 | } 96 | 97 | @media @mobile { 98 | display: block; 99 | } 100 | } 101 | } -------------------------------------------------------------------------------- /assets/less/import/_contact.less: -------------------------------------------------------------------------------- 1 | .page-contact { 2 | background: #bfbfbf; 3 | 4 | @media @mobile { 5 | padding: @180px @35px @80px; 6 | } 7 | 8 | span { 9 | cursor: auto; 10 | 11 | &.link { 12 | position: relative; 13 | 14 | &:after { 15 | background-color: @dark; 16 | transform: none; 17 | } 18 | } 19 | } 20 | 21 | .p { 22 | > div { 23 | display: block; 24 | overflow: hidden; 25 | } 26 | 27 | span { 28 | display: block; 29 | font: @regular @58px/1.1 @font; 30 | margin-bottom: @15px; 31 | 32 | @media @mobile { 33 | font-size: @30px; 34 | line-height: 1; 35 | } 36 | 37 | &.link { 38 | display: inline-block; 39 | 40 | &:after { 41 | height: 2px; 42 | } 43 | } 44 | } 45 | 46 | a { 47 | font: @regular @58px/1 @font; 48 | 49 | @media @mobile { 50 | font-size: @30px; 51 | line-height: 1; 52 | } 53 | 54 | &:after { 55 | height: 2px; 56 | background-color: @dark; 57 | } 58 | } 59 | } 60 | 61 | .right { 62 | position: absolute; 63 | top: 0; right: 0; 64 | 65 | @media @mobile { 66 | position: relative; top: auto; right: auto; 67 | margin-top: @35px; 68 | } 69 | 70 | .el { 71 | &:not(:first-child) { 72 | margin-top: @5px; 73 | } 74 | 75 | &:not(:last-child) { 76 | margin-bottom: @50px; 77 | 78 | @media @mobile { 79 | margin-bottom: @20px; 80 | } 81 | } 82 | 83 | a:after { 84 | background: @dark; 85 | } 86 | } 87 | 88 | p { 89 | font: @book @15px/1.3 @font; 90 | max-width: @150px; 91 | 92 | @media @mobile { 93 | font-size: @18px; 94 | } 95 | } 96 | } 97 | 98 | .credit { 99 | position: absolute; 100 | bottom: 140px; 101 | right: -50px; 102 | font: @regular @12px @font; 103 | transform: rotate(-90deg); 104 | 105 | @media @mobile { 106 | display: none; 107 | } 108 | } 109 | } -------------------------------------------------------------------------------- /assets/less/import/_home.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | Home 3 | ----- */ 4 | .page-diary { 5 | overflow: hidden; 6 | } 7 | 8 | .project-list { 9 | .absolute(); 10 | z-index: 1000; 11 | .hidden(); 12 | 13 | .list-close { 14 | position: absolute; 15 | top: 50%; 16 | left: 2.3rem; 17 | color: white; 18 | transform: translateY(-50%) rotate(-90deg); 19 | z-index: 900; 20 | } 21 | 22 | a { 23 | display: inline-block; 24 | font: @regular @28px/.9 @font; 25 | color: white; 26 | margin: 0 @15px @25px 0; 27 | 28 | &:after { 29 | bottom: 0px; 30 | height: 1px; 31 | transform: none; 32 | } 33 | } 34 | } 35 | 36 | .page-diary { 37 | background: @grey-light; 38 | 39 | .all { 40 | position: absolute; 41 | top: 50%; 42 | left: 3.125rem; 43 | color: white; 44 | transform: translateY(-50%) rotate(-90deg); 45 | transition: opacity .6s @easeOutExpo; 46 | z-index: 900; 47 | 48 | @media @mobile { 49 | display: none; 50 | } 51 | 52 | &.is-hidden { 53 | opacity: 0; 54 | pointer-events: none; 55 | } 56 | } 57 | 58 | .section { 59 | .absolute(); 60 | 61 | @media @mobile { 62 | padding: @120px @40px @40px; 63 | } 64 | } 65 | 66 | .el { 67 | display: block; 68 | .absolute(); 69 | 70 | .el { 71 | .hidden(); 72 | } 73 | 74 | &--left { 75 | transform: translateX(-10%); 76 | z-index: 1; 77 | 78 | label { 79 | top: 50%; 80 | transform: translate3d(-20%,-50%,0); 81 | } 82 | } 83 | 84 | &--right { 85 | transform: translateX(10%); 86 | 87 | label { 88 | top: 15%; 89 | right: 0; 90 | transform: translate3d(50%,0,0); 91 | } 92 | } 93 | 94 | @media @mobile { 95 | position: relative; 96 | top: auto; right: auto; bottom: auto; left: auto; 97 | 98 | label { 99 | display: none; 100 | } 101 | } 102 | 103 | label { 104 | position: absolute; 105 | font-size: @14px; 106 | color: white; 107 | font-weight: 500; 108 | opacity: 0; 109 | transition: opacity 1s @easeOutExpo; 110 | } 111 | } 112 | 113 | &:not(.has-hover) { 114 | .el { 115 | pointer-events: none; 116 | } 117 | } 118 | 119 | &.has-hover .el:hover { 120 | label { 121 | opacity: 1; 122 | } 123 | } 124 | 125 | .intrinsic { 126 | width: 25vw; 127 | margin: auto; 128 | 129 | @media @mobile { 130 | height: auto; 131 | padding-bottom: 0!important; 132 | margin-bottom: @40px; 133 | } 134 | 135 | &--landscape { 136 | width: 35vw; 137 | transform: translateX(-30%); 138 | padding-bottom: 20%; 139 | 140 | @media @mobile { 141 | width: 100%; 142 | height: 35%; 143 | transform: none; 144 | 145 | .el { 146 | height: 100%; 147 | } 148 | } 149 | } 150 | 151 | &--portrait { 152 | width: 25vw; 153 | transform: translateX(30%); 154 | padding-bottom: 35%; 155 | 156 | @media @mobile { 157 | width: 100%; 158 | height: 65%; 159 | transform: none; 160 | 161 | .el { 162 | height: 100%; 163 | } 164 | } 165 | } 166 | } 167 | } -------------------------------------------------------------------------------- /assets/less/import/_preloader.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | Preloader 3 | ----- */ 4 | .is-loading { 5 | 6 | } 7 | 8 | .preloader { 9 | .absolute(); 10 | transition: opacity .8s linear; 11 | opacity: 0; 12 | 13 | .background { 14 | .absolute(); 15 | background-position: center center; 16 | background-size: cover; 17 | background-repeat: no-repeat; 18 | transform: scale(1.2); 19 | transition: opacity .8s linear, transform 2.6s @easeOutExpo; 20 | } 21 | } -------------------------------------------------------------------------------- /assets/less/import/_single.less: -------------------------------------------------------------------------------- 1 | .single { 2 | .absolute(); 3 | background: white; 4 | 5 | h1 { 6 | font: @regular @16px/1.2 @font; 7 | max-width: @100px; 8 | margin-bottom: @25px; 9 | 10 | @media @mobile { 11 | font-size: @25px; 12 | font-weight: @regular; 13 | margin: -25vh auto 0; 14 | max-width: 40%; 15 | text-align: center; 16 | } 17 | } 18 | 19 | .share { 20 | margin-left: @100px; 21 | 22 | @media @mobile { 23 | display: none; 24 | } 25 | 26 | span { 27 | display: block; 28 | } 29 | 30 | a { 31 | margin-right: @5px; 32 | 33 | &:after { 34 | background-color: @dark; 35 | } 36 | } 37 | } 38 | 39 | .back { 40 | position: absolute; top: 0; right: 0; 41 | margin: @50px @50px 0 0; 42 | z-index: 2; 43 | 44 | @media @mobile { 45 | display: none; 46 | } 47 | 48 | &:after { 49 | background-color: @dark; 50 | } 51 | } 52 | 53 | .section { 54 | position: absolute; top: 0; left: 0; 55 | width: 100%; 56 | background: white; 57 | 58 | @media @mobile { 59 | padding: @40px; 60 | } 61 | 62 | .vertical-center { 63 | position: absolute; top: 0; left: 0; 64 | height: 100vh; 65 | } 66 | } 67 | 68 | .intrinsic { 69 | background: #d9d9d9; 70 | overflow: hidden; 71 | 72 | .el { 73 | transform: scale(1.3); 74 | opacity: 0; 75 | } 76 | 77 | &--landscape { 78 | padding-bottom: 70%; 79 | } 80 | } 81 | 82 | .image { 83 | &__right { 84 | width: 50%; 85 | margin: 0 0 0 auto; 86 | 87 | &.margin-top { 88 | margin-top: 25vh; 89 | } 90 | 91 | @media @mobile { 92 | width: 100%; 93 | 94 | &.margin-top { 95 | margin-top: 75vh; 96 | } 97 | } 98 | } 99 | 100 | &__left { 101 | width: 25%; 102 | margin-left: 16%; 103 | 104 | @media @mobile { 105 | width: 100%; 106 | margin-left: 0; 107 | } 108 | } 109 | 110 | @media @mobile { 111 | margin-bottom: @40px; 112 | } 113 | 114 | .intrinsic--portrait { 115 | padding-bottom: 150%; 116 | } 117 | } 118 | } -------------------------------------------------------------------------------- /assets/less/import/_typography.less: -------------------------------------------------------------------------------- 1 | a { 2 | color: @black; 3 | text-decoration: none; 4 | } 5 | 6 | a:not([class]), 7 | a.link, 8 | span.link { 9 | position: relative; 10 | display: inline-block; 11 | vertical-align: middle; 12 | cursor: pointer; 13 | overflow: hidden; 14 | 15 | &:after { 16 | content: ''; 17 | position: absolute; bottom: 1px; left: 0; 18 | .size(100%,1px); 19 | background: white; 20 | transform: scaleX(0); 21 | transform-origin: right; 22 | transition: transform .9s @easeOutExpo; 23 | } 24 | 25 | &:hover { 26 | &:after { 27 | transform: scaleX(1); 28 | transform-origin: left; 29 | } 30 | } 31 | } 32 | 33 | ul { 34 | list-style-type: none; 35 | } 36 | 37 | p { 38 | font: @14px/@25px @font; 39 | } 40 | 41 | h1 { 42 | // font-size: @75px; 43 | font: @regular 9.5vh/1 @font; 44 | } 45 | 46 | .blockquote { 47 | font: @book @28px/1.4 @font; 48 | margin: @140px 0 @40px; 49 | max-width: 90%; 50 | 51 | @media @mobile { 52 | font-size: @23px; 53 | max-width: 80%; 54 | } 55 | 56 | @media @tablet { 57 | font-size: @23px; 58 | max-width: 95%; 59 | } 60 | 61 | ~ p { 62 | margin-bottom: @140px; 63 | } 64 | } 65 | 66 | .close { 67 | position: absolute; top: 50%; 68 | .size(38px,38px); 69 | border-radius: 50%; 70 | border: 2px solid rgba(255,255,255,.2); 71 | transition: border 1s linear; 72 | transform: translate3d(-80px,-80%,0); 73 | cursor: pointer; 74 | .hidden(); 75 | 76 | .icon { 77 | .absolute(); 78 | .size(10px,10px); 79 | 80 | div { 81 | position: absolute; 82 | .size(10px,2px); 83 | overflow: hidden; 84 | transform-origin: 50% 50%; 85 | pointer-events: none; 86 | 87 | &:first-child { 88 | transform: translate3d(0,4px,0) rotate3d(0,0,1,45deg); 89 | } 90 | 91 | &:last-child { 92 | transform: translate3d(0,4px,0) rotate3d(0,0,1,-45deg); 93 | } 94 | 95 | &:before, 96 | &:after { 97 | content: ''; 98 | .absolute(); 99 | background: white; 100 | pointer-events: none; 101 | transition: transform .8s @easeOutExpo, background 1s linear; 102 | } 103 | 104 | &:before { 105 | transform: none; 106 | } 107 | &:after { 108 | transform: translate3d(100%,0,0); 109 | } 110 | } 111 | } 112 | 113 | svg ellipse { 114 | transition: stroke 1s linear; 115 | } 116 | 117 | &.is-dark { 118 | border-color: rgba(150,150,150,.2); 119 | opacity: .8; 120 | 121 | .icon div { 122 | &:before, 123 | &:after { 124 | background: rgba(80,80,80,.5); 125 | } 126 | } 127 | 128 | svg ellipse { 129 | stroke: #c6c6c6; 130 | } 131 | } 132 | 133 | &:hover { 134 | .icon { 135 | div { 136 | &:first-child { 137 | &:before { 138 | transition-delay: 0; 139 | } 140 | &:after { 141 | transition-delay: .6s; 142 | } 143 | } 144 | &:last-child { 145 | &:before { 146 | transition-delay: .2s; 147 | } 148 | &:after { 149 | transition-delay: .8s; 150 | } 151 | } 152 | 153 | &:before { 154 | transform: translate3d(-100%,0,0); 155 | } 156 | &:after { 157 | transform: none; 158 | } 159 | } 160 | } 161 | } 162 | } 163 | -------------------------------------------------------------------------------- /assets/less/layout.less: -------------------------------------------------------------------------------- 1 | @import "require/_normalize.less"; 2 | @import "require/_var.less"; 3 | @import "require/_mixin.less"; 4 | @import "require/_fonts.less"; 5 | @import "require/_grid.less"; 6 | @import "require/_keyframes.less"; 7 | @import "require/_gradients.less"; 8 | 9 | * { 10 | margin: 0; 11 | padding: 0; 12 | 13 | box-sizing: border-box; 14 | 15 | text-rendering: optimizeLegibility; 16 | 17 | -webkit-font-smoothing: antialiased; 18 | -moz-osx-font-smoothing: grayscale; 19 | 20 | -webkit-tap-highlight-color: rgba(0,0,0,0); 21 | } 22 | 23 | html, 24 | body{ 25 | overflow: hidden; 26 | background: @grey-light; 27 | backface-visibility: hidden; 28 | } 29 | 30 | html { 31 | font: 16.1px/1.3 @font; 32 | } 33 | 34 | a { 35 | &:focus { 36 | outline: none; 37 | } 38 | } 39 | 40 | .current() { 41 | color: @green; 42 | 43 | &:before { 44 | background: @green; 45 | transform: none; 46 | transform-origin: left; 47 | } 48 | } 49 | 50 | body { 51 | &:not(.is-contact) { 52 | user-select: none; 53 | } 54 | 55 | &.is-loaded { 56 | cursor: s-resize; 57 | } 58 | 59 | &.is-loading { 60 | cursor: progress; 61 | } 62 | 63 | > .logo { 64 | .absolute(); 65 | .size(auto,auto); 66 | pointer-events: none; 67 | z-index: 1000; 68 | 69 | transition: opacity 1s linear; 70 | 71 | // preloader state 72 | transform: scale(.13); 73 | will-change: transform; 74 | 75 | &.hidden { 76 | opacity: 0; 77 | } 78 | 79 | &.rotate { 80 | transform: scale(.13) rotate(-90deg); 81 | transition: opacity 1s linear, transform 2.5s @easeOutExpo; 82 | } 83 | 84 | &.scaled { 85 | transform: none; 86 | 87 | canvas { 88 | opacity: 1; 89 | } 90 | 91 | svg { 92 | opacity: 0; 93 | } 94 | } 95 | 96 | canvas { 97 | .absolute(); 98 | display: block; 99 | margin: auto; 100 | height: 100vh; 101 | opacity: 0; 102 | transition: opacity 3s @easeOutExpo; 103 | } 104 | 105 | svg { 106 | display: block; 107 | margin: auto; 108 | height: 100vh; 109 | transition: opacity 3s linear; 110 | 111 | @media @mobile { 112 | transform: translateX(-22%); 113 | } 114 | 115 | use { 116 | fill: white; 117 | } 118 | } 119 | } 120 | 121 | &.is-section { 122 | > .logo svg use, 123 | .name svg use, 124 | .arrow svg path { 125 | fill: @dark; 126 | transition: all 1s @easeOutExpo; 127 | } 128 | 129 | .mobile-menu { 130 | color: @dark; 131 | } 132 | 133 | .email { 134 | opacity: 0; 135 | pointer-events: none; 136 | } 137 | 138 | .vs-scrollbar .vs-scrolldrag { 139 | background: @dark; 140 | } 141 | } 142 | 143 | &.is-contact { 144 | .name svg use, 145 | .arrow svg path { 146 | fill: @dark; 147 | transition: all 1s @easeOutExpo; 148 | } 149 | 150 | .mobile-menu { 151 | color: @dark; 152 | } 153 | 154 | .email, 155 | .arrow { 156 | opacity: 0; 157 | pointer-events: none; 158 | } 159 | } 160 | 161 | &.has-menu-open { 162 | .logo { 163 | opacity: .2; 164 | } 165 | 166 | .email { 167 | opacity: 1; 168 | } 169 | } 170 | } 171 | 172 | /* ----- 173 | Nav 174 | ----- */ 175 | nav { 176 | position: absolute; 177 | z-index: 2; 178 | top: 0; left: 0; 179 | margin: @50px 0 0 @50px; 180 | z-index: 1100; 181 | transition: opacity 1s linear; 182 | 183 | @media @mobile { 184 | display: none; 185 | } 186 | 187 | &.hidden { 188 | opacity: 0; 189 | pointer-events: none; 190 | } 191 | 192 | a, 193 | span { 194 | font: @15px @font; 195 | margin: 0 @5px; 196 | color: white; 197 | cursor: pointer; 198 | padding-bottom: 2px; 199 | transition: color .8s @easeOutExpo; 200 | } 201 | 202 | .is-home &, 203 | .is-section & { 204 | a[href="/diary"] { 205 | &:after { 206 | transform: scaleX(1); 207 | transform-origin: left; 208 | } 209 | } 210 | } 211 | 212 | .is-about & { 213 | a[href="/profile"] { 214 | &:after { 215 | transform: scaleX(1); 216 | transform-origin: left; 217 | } 218 | } 219 | } 220 | 221 | .is-contact & { 222 | a[href="/contact"] { 223 | &:after { 224 | transform: scaleX(1); 225 | transform-origin: left; 226 | } 227 | } 228 | } 229 | 230 | .is-contact &, 231 | .is-section & { 232 | a, 233 | span { 234 | color: @dark; 235 | 236 | &:after { 237 | background-color: @dark; 238 | } 239 | } 240 | } 241 | } 242 | 243 | /* ----- 244 | Mobile menu 245 | ----- */ 246 | .mobile-menu { 247 | display: none; 248 | position: absolute; 249 | font-size: @24px; 250 | color: white; 251 | top: 0; left: 0; 252 | z-index: 30; 253 | margin: @50px 0 0 @50px; 254 | 255 | .is-preloader & { 256 | display: none; 257 | } 258 | 259 | @media @mobile { 260 | display: block; 261 | } 262 | } 263 | 264 | .menu { 265 | display: none; 266 | .fixed(); 267 | background: #333333; 268 | .hidden(); 269 | z-index: 25; 270 | 271 | .vertical-el { 272 | padding: 0 @40px; 273 | } 274 | 275 | .link { 276 | display: block; 277 | color: white; 278 | font: @regular @65px/1.3 @font; 279 | 280 | &:after { 281 | display: none; 282 | } 283 | } 284 | 285 | @media @mobile { 286 | display: block; 287 | } 288 | } 289 | 290 | /* ----- 291 | Logo 292 | ----- */ 293 | .name { 294 | display: block; 295 | position: absolute; bottom: 0; left: 0; 296 | margin: 0 0 @50px @50px; 297 | transition: opacity .9s linear; 298 | z-index: 900; 299 | 300 | .is-preloader & { 301 | display: none; 302 | } 303 | 304 | @media @mobile { 305 | top: 0; right: 0; 306 | left: auto; bottom: auto; 307 | margin: @50px @50px 0 0; 308 | } 309 | 310 | &.hidden { 311 | opacity: 0; 312 | pointer-events: none; 313 | 314 | @media @mobile { 315 | opacity: 1; 316 | pointer-events: auto; 317 | } 318 | } 319 | 320 | svg { 321 | width: 152px; 322 | height: 30px; 323 | 324 | @media @mobile { 325 | width: 95px; 326 | height: 25px; 327 | } 328 | 329 | use { 330 | fill: white; 331 | } 332 | } 333 | } 334 | 335 | .email { 336 | position: absolute;top: 6.5rem; right: -.5rem; 337 | color: white; 338 | font-size: @15px; 339 | transform: rotate3d(0,0,1,-90deg); 340 | z-index: 900; 341 | 342 | @media @mobile { 343 | opacity: 0; 344 | display: block; 345 | transform: none; 346 | top: auto; 347 | bottom: 0; 348 | right: auto; 349 | left: 0; 350 | margin: 0 0 @40px @40px; 351 | } 352 | 353 | &.hidden { 354 | opacity: 0; 355 | } 356 | } 357 | 358 | /* ----- 359 | Arrow 360 | ----- */ 361 | .arrow { 362 | position: absolute; bottom: 0; right: 0; 363 | margin: 0 @40px @40px 0; 364 | transition: opacity .9s linear; 365 | z-index: 900; 366 | 367 | &.hidden { 368 | opacity: 0; 369 | } 370 | 371 | &.rotate { 372 | svg { 373 | transform: rotateZ(180deg); 374 | } 375 | } 376 | 377 | svg { 378 | .size(40px,40px); 379 | fill: white; 380 | transition: fill 1s linear; 381 | transition: transform .9s @easeOutExpo; 382 | } 383 | 384 | @media @mobile { 385 | text-align: center; 386 | left: 0; 387 | margin: 0 auto 2.5rem auto; 388 | opacity: 0; 389 | pointer-events: none; 390 | 391 | .is-loaded & { 392 | opacity: 1; 393 | } 394 | 395 | svg { 396 | .size(60px,60px); 397 | } 398 | } 399 | } 400 | 401 | /* ----- 402 | Split text 403 | ----- */ 404 | .ui-split { 405 | > div { 406 | overflow: hidden; 407 | } 408 | } 409 | 410 | /* ----- 411 | Medias Queries 412 | ----- */ 413 | @import "require/_medias.less"; 414 | 415 | /* ----- 416 | Typography 417 | ----- */ 418 | @import "import/_typography.less"; 419 | 420 | /* ----- 421 | View 422 | ----- */ 423 | .page-view { 424 | .fixed(); 425 | 426 | .page { 427 | .fixed(); 428 | .size(100%,100%); 429 | display: none; 430 | 431 | @media @mobile { 432 | overflow-x: hidden; 433 | overflow-y: scroll; 434 | -webkit-overflow-scrolling: touch; 435 | } 436 | } 437 | } 438 | 439 | .page-clip { 440 | .absolute(); 441 | } 442 | 443 | /* ----- 444 | SVGs 445 | ----- */ 446 | .svg-defs { 447 | display: none; 448 | } 449 | 450 | /* ----- 451 | Utils 452 | ----- */ 453 | .vertical-center { 454 | display: table; 455 | position: relative; 456 | .size(100%,100%); 457 | 458 | .vertical-el { 459 | display: table-cell; 460 | vertical-align: middle 461 | } 462 | } 463 | 464 | /* ----- 465 | Intrinsic 466 | ----- */ 467 | .intrinsic { 468 | position: relative; 469 | padding-bottom: 110%; 470 | height: 0; 471 | 472 | &--portrait { 473 | padding-bottom: 36%; 474 | } 475 | 476 | &--landscape { 477 | padding-bottom: 20%; 478 | } 479 | 480 | &--16-9 { 481 | padding-bottom: 56%; 482 | } 483 | 484 | .layer { 485 | .absolute(); 486 | } 487 | 488 | .el { 489 | position: absolute; 490 | top: 0; left: 0; 491 | .size(100%,100%); 492 | background-position: center center; 493 | background-size: cover; 494 | background-repeat: no-repeat; 495 | } 496 | } 497 | 498 | /* ----- 499 | Smooth scrolling 500 | ----- */ 501 | .vs-section { 502 | position: fixed; top: 0; left: 0; right: 0; 503 | height: auto; 504 | } 505 | 506 | .vs-scrollbar { 507 | position: absolute; top: 0; right: 0; 508 | width: 3px; 509 | height: 100%; 510 | 511 | .vs-scrolldrag { 512 | position: absolute; 513 | width: 100%; 514 | height: auto; 515 | background: white; 516 | transition: background .6s @easeOutExpo; 517 | } 518 | } 519 | 520 | /* ----- 521 | Cover Video 522 | ----- */ 523 | .video-cover { 524 | display: block; 525 | position: absolute; 526 | left: 50%; top: 50%; 527 | height: 100%; // width: 177.77777778vh; 528 | min-width: 100vw; min-height: 56.25vw; 529 | pointer-events: none; 530 | transform: translate(-50%, -50%); 531 | } 532 | 533 | /* ----- 534 | Preloader 535 | ----- */ 536 | @import "import/_preloader.less"; 537 | 538 | /* ----- 539 | Home 540 | ----- */ 541 | @import "import/_home.less"; 542 | 543 | /* ----- 544 | Contact 545 | ----- */ 546 | @import "import/_contact.less"; 547 | 548 | /* ----- 549 | About 550 | ----- */ 551 | @import "import/_about.less"; 552 | 553 | /* ----- 554 | Single 555 | ----- */ 556 | @import "import/_single.less"; -------------------------------------------------------------------------------- /assets/less/require/_fonts.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | Typography, WebFonts 3 | ----- */ 4 | @font-face { 5 | font-family: @maison; 6 | src: url('@{base-fonts}MaisonNeue-Book.eot'); 7 | src: url('@{base-fonts}MaisonNeue-Book.eot?#iefix') format('embedded-opentype'), 8 | url('@{base-fonts}MaisonNeue-Book.woff') format('woff'), 9 | url('@{base-fonts}MaisonNeue-Book.ttf') format('truetype'), 10 | url('@{base-fonts}MaisonNeue-Book.svg#cfe9c4d435b13936a17ea5090528f1ab') format('svg'); 11 | font-style: normal; 12 | font-weight: @regular; 13 | } -------------------------------------------------------------------------------- /assets/less/require/_gradients.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | Gradients 3 | .gradient_color_axis-to-axis 4 | ----- */ -------------------------------------------------------------------------------- /assets/less/require/_grid.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | 12 columns Responsive Grid 3 | ----- */ 4 | .row { 5 | zoom: 1; 6 | &:before, &:after { 7 | content:'\0020'; 8 | display:block; 9 | overflow:hidden; 10 | visibility:hidden; 11 | width:0; 12 | height:0 13 | } 14 | &:after {clear:both;} 15 | } 16 | .device-content{ 17 | position: relative; 18 | width: 970px; 19 | .center-block(); 20 | } 21 | .column{ 22 | display: block; 23 | float: left; 24 | min-height: 1px; 25 | } 26 | .col-1{width:@col_1} 27 | .col-2{width:@col_2} 28 | .col-3{width:@col_3} 29 | .col-4{width:@col_4} 30 | .col-5{width:@col_5} 31 | .col-6{width:@col_6} 32 | .col-7{width:@col_7} 33 | .col-8{width:@col_8} 34 | .col-9{width:@col_9} 35 | .col-10{width:@col_10} 36 | .col-11{width:@col_11} 37 | .col-12{width:@col_12} 38 | img.scale-with-grid{ 39 | width: 100%; 40 | height: auto; 41 | display: block; 42 | } -------------------------------------------------------------------------------- /assets/less/require/_keyframes.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | CSS3 @keyframes 3 | ----- */ 4 | /* ----- 5 | Spinner 6 | ----- */ 7 | @keyframes spin { 8 | from {transform: rotate(0deg);} 9 | to {transform: rotate(360deg);} 10 | } -------------------------------------------------------------------------------- /assets/less/require/_medias.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | Media Queries 3 | ----- */ 4 | @mobile: ~"only screen and (max-width: 768px)"; 5 | @tablet: ~"only screen and (min-width: 769px) and (max-width: 1024px)"; 6 | @desktop: ~"only screen and (min-width: 1025px) and (max-width: 1128px)"; 7 | @desktop-xl: ~"only screen and (min-width: 1129px)"; 8 | 9 | @media @mobile { 10 | html{ 11 | font: 80%/1.5 @font; 12 | } 13 | 14 | .device-content{ 15 | width: 90%; 16 | } 17 | .not-mobile{ 18 | display: none; 19 | } 20 | } 21 | 22 | @media @tablet { 23 | html{ 24 | font: 90%/1.5 @font; 25 | } 26 | 27 | .device-content{ 28 | width: 700px; 29 | } 30 | .not-mobile{ 31 | display: none; 32 | } 33 | } 34 | 35 | @media @desktop { 36 | html{ 37 | font: 95%/1.5 @font; 38 | } 39 | 40 | .device-content{ 41 | width: 960px; 42 | } 43 | } 44 | 45 | /* ----- 46 | Retina 47 | ----- */ 48 | @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5){} 49 | -------------------------------------------------------------------------------- /assets/less/require/_mixin.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | Basic Mixin' 3 | ----- */ 4 | .size(@width, @height){ 5 | width: @width; 6 | height: @height; 7 | } /* .size(50px,30px); */ 8 | .center-block(){ 9 | display: block; 10 | margin-left: auto; 11 | margin-right: auto; 12 | } /* .center-block(); */ 13 | .scale-with-grid(){ 14 | max-width: 100%; 15 | height: auto; 16 | } /* .scale-with-grid(); */ 17 | .absolute(){ 18 | position: absolute; 19 | top: 0; right: 0; bottom: 0; left:0; 20 | margin: auto; 21 | } /* .absolute(); */ 22 | .fixed(){ 23 | position: fixed; 24 | top: 0; right: 0; bottom: 0; left:0; 25 | margin: auto; 26 | } /* .fixed(); */ 27 | .hidden(){ 28 | opacity: 0; 29 | visibility: hidden; 30 | } /* .hidden(); */ 31 | .visible(){ 32 | opacity: 1; 33 | visibility: visible; 34 | } /* .visible(); */ 35 | 36 | /* ----- 37 | Hover 38 | ----- */ 39 | .hover-color(@color){ 40 | &:hover{color: @color;} 41 | } 42 | .hover-bg(@color){ 43 | &:hover{background-color: @color;} 44 | } -------------------------------------------------------------------------------- /assets/less/require/_normalize.less: -------------------------------------------------------------------------------- 1 | html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}hr{height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],/* 1 */ 2 | input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} -------------------------------------------------------------------------------- /assets/less/require/_swiper.less: -------------------------------------------------------------------------------- 1 | /** 2 | * Swiper 3.0.4 3 | * Most modern mobile touch slider and framework with hardware accelerated transitions 4 | * 5 | * http://www.idangero.us/swiper/ 6 | * 7 | * Copyright 2015, Vladimir Kharlampidi 8 | * The iDangero.us 9 | * http://www.idangero.us/ 10 | * 11 | * Licensed under MIT 12 | * 13 | * Released on: March 6, 2015 14 | */ 15 | .swiper-container { 16 | margin: 0 auto; 17 | position: relative; 18 | overflow: hidden; 19 | height: 100%; 20 | z-index: 1; 21 | } 22 | .swiper-container-vertical > .swiper-wrapper { 23 | -webkit-box-orient: vertical; 24 | -moz-box-orient: vertical; 25 | -ms-flex-direction: column; 26 | -webkit-flex-direction: column; 27 | flex-direction: column; 28 | } 29 | .swiper-wrapper { 30 | position: relative; 31 | width: 100%; 32 | height: 100%; 33 | z-index: 1; 34 | display: -webkit-box; 35 | display: -moz-box; 36 | display: -ms-flexbox; 37 | display: -webkit-flex; 38 | display: flex; 39 | -webkit-transform-style: preserve-3d; 40 | -moz-transform-style: preserve-3d; 41 | -ms-transform-style: preserve-3d; 42 | transform-style: preserve-3d; 43 | -webkit-transition-property: -webkit-transform; 44 | -moz-transition-property: -moz-transform; 45 | -o-transition-property: -o-transform; 46 | -ms-transition-property: -ms-transform; 47 | transition-property: transform; 48 | -webkit-transform: translate3d(0px, 0, 0); 49 | -moz-transform: translate3d(0px, 0, 0); 50 | -o-transform: translate(0px, 0px); 51 | -ms-transform: translate3d(0px, 0, 0); 52 | transform: translate3d(0px, 0, 0); 53 | -webkit-box-sizing: content-box; 54 | -moz-box-sizing: content-box; 55 | box-sizing: content-box; 56 | } 57 | .swiper-container-multirow > .swiper-wrapper { 58 | -webkit-box-lines: multiple; 59 | -moz-box-lines: multiple; 60 | -ms-fles-wrap: wrap; 61 | -webkit-flex-wrap: wrap; 62 | flex-wrap: wrap; 63 | } 64 | .swiper-container-free-mode > .swiper-wrapper { 65 | -webkit-transition-timing-function: ease-out; 66 | -moz-transition-timing-function: ease-out; 67 | -ms-transition-timing-function: ease-out; 68 | -o-transition-timing-function: ease-out; 69 | transition-timing-function: ease-out; 70 | margin: 0 auto; 71 | } 72 | .swiper-slide { 73 | -webkit-transform-style: preserve-3d; 74 | -moz-transform-style: preserve-3d; 75 | -ms-transform-style: preserve-3d; 76 | transform-style: preserve-3d; 77 | -webkit-flex-shrink: 0; 78 | -ms-flex: 0 0 auto; 79 | flex-shrink: 0; 80 | width: 100%; 81 | height: 100%; 82 | background-size: cover; 83 | background-repeat: no-repeat; 84 | background-position: center center; 85 | position: relative; 86 | } 87 | /* IE10 Windows Phone 8 Fixes */ 88 | .swiper-wp8-horizontal { 89 | -ms-touch-action: pan-y; 90 | touch-action: pan-y; 91 | } 92 | .swiper-wp8-vertical { 93 | -ms-touch-action: pan-x; 94 | touch-action: pan-x; 95 | } 96 | /* Arrows */ 97 | .swiper-button-prev, 98 | .swiper-button-next { 99 | position: absolute; 100 | top: 50%; 101 | width: 27px; 102 | height: 44px; 103 | margin-top: -22px; 104 | z-index: 10; 105 | cursor: pointer; 106 | -moz-background-size: 27px 44px; 107 | -webkit-background-size: 27px 44px; 108 | background-size: 27px 44px; 109 | background-position: center; 110 | background-repeat: no-repeat; 111 | } 112 | .swiper-button-prev.swiper-button-disabled, 113 | .swiper-button-next.swiper-button-disabled { 114 | opacity: 0.35; 115 | cursor: auto; 116 | } 117 | .swiper-button-prev, 118 | .swiper-container-rtl .swiper-button-next { 119 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); 120 | left: 10px; 121 | right: auto; 122 | } 123 | .swiper-button-prev.swiper-button-black, 124 | .swiper-container-rtl .swiper-button-next.swiper-button-black { 125 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); 126 | } 127 | .swiper-button-prev.swiper-button-white, 128 | .swiper-container-rtl .swiper-button-next.swiper-button-white { 129 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); 130 | } 131 | .swiper-button-next, 132 | .swiper-container-rtl .swiper-button-prev { 133 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); 134 | right: 10px; 135 | left: auto; 136 | } 137 | .swiper-button-next.swiper-button-black, 138 | .swiper-container-rtl .swiper-button-prev.swiper-button-black { 139 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); 140 | } 141 | .swiper-button-next.swiper-button-white, 142 | .swiper-container-rtl .swiper-button-prev.swiper-button-white { 143 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); 144 | } 145 | /* Pagination Styles */ 146 | .swiper-pagination { 147 | position: absolute; 148 | text-align: center; 149 | -webkit-transition: 300ms; 150 | -moz-transition: 300ms; 151 | -o-transition: 300ms; 152 | transition: 300ms; 153 | -webkit-transform: translate3d(0, 0, 0); 154 | -ms-transform: translate3d(0, 0, 0); 155 | -o-transform: translate3d(0, 0, 0); 156 | transform: translate3d(0, 0, 0); 157 | z-index: 10; 158 | } 159 | .swiper-pagination.swiper-pagination-hidden { 160 | opacity: 0; 161 | } 162 | .swiper-pagination-bullet { 163 | width: 8px; 164 | height: 8px; 165 | display: inline-block; 166 | border-radius: 100%; 167 | background: #000; 168 | opacity: 0.2; 169 | } 170 | .swiper-pagination-clickable .swiper-pagination-bullet { 171 | cursor: pointer; 172 | } 173 | .swiper-pagination-white .swiper-pagination-bullet { 174 | background: #fff; 175 | } 176 | .swiper-pagination-bullet-active { 177 | opacity: 1; 178 | background: #007aff; 179 | } 180 | .swiper-pagination-white .swiper-pagination-bullet-active { 181 | background: #fff; 182 | } 183 | .swiper-pagination-black .swiper-pagination-bullet-active { 184 | background: #000; 185 | } 186 | .swiper-container-vertical > .swiper-pagination { 187 | right: 10px; 188 | top: 50%; 189 | -webkit-transform: translate3d(0px, -50%, 0); 190 | -moz-transform: translate3d(0px, -50%, 0); 191 | -o-transform: translate(0px, -50%); 192 | -ms-transform: translate3d(0px, -50%, 0); 193 | transform: translate3d(0px, -50%, 0); 194 | } 195 | .swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet { 196 | margin: 5px 0; 197 | display: block; 198 | } 199 | .swiper-container-horizontal > .swiper-pagination { 200 | bottom: 10px; 201 | left: 0; 202 | width: 100%; 203 | } 204 | .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet { 205 | margin: 0 5px; 206 | } 207 | /* 3D Container */ 208 | .swiper-container-3d { 209 | -webkit-perspective: 1200px; 210 | -moz-perspective: 1200px; 211 | -o-perspective: 1200px; 212 | perspective: 1200px; 213 | } 214 | .swiper-container-3d .swiper-wrapper, 215 | .swiper-container-3d .swiper-slide, 216 | .swiper-container-3d .swiper-slide-shadow-left, 217 | .swiper-container-3d .swiper-slide-shadow-right, 218 | .swiper-container-3d .swiper-slide-shadow-top, 219 | .swiper-container-3d .swiper-slide-shadow-bottom, 220 | .swiper-container-3d .swiper-cube-shadow { 221 | -webkit-transform-style: preserve-3d; 222 | -moz-transform-style: preserve-3d; 223 | -ms-transform-style: preserve-3d; 224 | transform-style: preserve-3d; 225 | } 226 | .swiper-container-3d .swiper-slide-shadow-left, 227 | .swiper-container-3d .swiper-slide-shadow-right, 228 | .swiper-container-3d .swiper-slide-shadow-top, 229 | .swiper-container-3d .swiper-slide-shadow-bottom { 230 | position: absolute; 231 | left: 0; 232 | top: 0; 233 | width: 100%; 234 | height: 100%; 235 | pointer-events: none; 236 | z-index: 10; 237 | } 238 | .swiper-container-3d .swiper-slide-shadow-left { 239 | background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); 240 | /* Safari 4+, Chrome */ 241 | background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 242 | /* Chrome 10+, Safari 5.1+, iOS 5+ */ 243 | background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 244 | /* Firefox 3.6-15 */ 245 | background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 246 | /* Opera 11.10-12.00 */ 247 | background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 248 | /* Firefox 16+, IE10, Opera 12.50+ */ 249 | } 250 | .swiper-container-3d .swiper-slide-shadow-right { 251 | background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); 252 | /* Safari 4+, Chrome */ 253 | background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 254 | /* Chrome 10+, Safari 5.1+, iOS 5+ */ 255 | background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 256 | /* Firefox 3.6-15 */ 257 | background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 258 | /* Opera 11.10-12.00 */ 259 | background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 260 | /* Firefox 16+, IE10, Opera 12.50+ */ 261 | } 262 | .swiper-container-3d .swiper-slide-shadow-top { 263 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); 264 | /* Safari 4+, Chrome */ 265 | background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 266 | /* Chrome 10+, Safari 5.1+, iOS 5+ */ 267 | background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 268 | /* Firefox 3.6-15 */ 269 | background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 270 | /* Opera 11.10-12.00 */ 271 | background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 272 | /* Firefox 16+, IE10, Opera 12.50+ */ 273 | } 274 | .swiper-container-3d .swiper-slide-shadow-bottom { 275 | background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); 276 | /* Safari 4+, Chrome */ 277 | background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 278 | /* Chrome 10+, Safari 5.1+, iOS 5+ */ 279 | background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 280 | /* Firefox 3.6-15 */ 281 | background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 282 | /* Opera 11.10-12.00 */ 283 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 284 | /* Firefox 16+, IE10, Opera 12.50+ */ 285 | } 286 | /* Coverflow */ 287 | .swiper-container-coverflow .swiper-wrapper { 288 | /* Windows 8 IE 10 fix */ 289 | -ms-perspective: 1200px; 290 | } 291 | /* Fade */ 292 | .swiper-container-fade.swiper-container-free-mode .swiper-slide { 293 | -webkit-transition-timing-function: ease-out; 294 | -moz-transition-timing-function: ease-out; 295 | -ms-transition-timing-function: ease-out; 296 | -o-transition-timing-function: ease-out; 297 | transition-timing-function: ease-out; 298 | } 299 | .swiper-container-fade .swiper-slide { 300 | pointer-events: none; 301 | } 302 | .swiper-container-fade .swiper-slide-active { 303 | pointer-events: auto; 304 | } 305 | /* Cube */ 306 | .swiper-container-cube { 307 | overflow: visible; 308 | } 309 | .swiper-container-cube .swiper-slide { 310 | pointer-events: none; 311 | visibility: hidden; 312 | -webkit-transform-origin: 0 0; 313 | -moz-transform-origin: 0 0; 314 | -ms-transform-origin: 0 0; 315 | transform-origin: 0 0; 316 | -webkit-backface-visibility: hidden; 317 | -moz-backface-visibility: hidden; 318 | -ms-backface-visibility: hidden; 319 | backface-visibility: hidden; 320 | width: 100%; 321 | height: 100%; 322 | } 323 | .swiper-container-cube.swiper-container-rtl .swiper-slide { 324 | -webkit-transform-origin: 100% 0; 325 | -moz-transform-origin: 100% 0; 326 | -ms-transform-origin: 100% 0; 327 | transform-origin: 100% 0; 328 | } 329 | .swiper-container-cube .swiper-slide-active, 330 | .swiper-container-cube .swiper-slide-next, 331 | .swiper-container-cube .swiper-slide-prev, 332 | .swiper-container-cube .swiper-slide-next + .swiper-slide { 333 | pointer-events: auto; 334 | visibility: visible; 335 | } 336 | .swiper-container-cube .swiper-cube-shadow { 337 | position: absolute; 338 | left: 0; 339 | bottom: 0px; 340 | width: 100%; 341 | height: 100%; 342 | background: #000; 343 | opacity: 0.6; 344 | -webkit-filter: blur(50px); 345 | filter: blur(50px); 346 | } 347 | .swiper-container-cube.swiper-container-vertical .swiper-cube-shadow { 348 | z-index: 0; 349 | } 350 | /* Scrollbar */ 351 | .swiper-scrollbar { 352 | border-radius: 10px; 353 | position: relative; 354 | -ms-touch-action: none; 355 | background: rgba(0, 0, 0, 0.1); 356 | } 357 | .swiper-container-horizontal > .swiper-scrollbar { 358 | position: absolute; 359 | left: 1%; 360 | bottom: 3px; 361 | z-index: 50; 362 | height: 5px; 363 | width: 98%; 364 | } 365 | .swiper-container-vertical > .swiper-scrollbar { 366 | position: absolute; 367 | right: 3px; 368 | top: 1%; 369 | z-index: 50; 370 | width: 5px; 371 | height: 98%; 372 | } 373 | .swiper-scrollbar-drag { 374 | height: 100%; 375 | width: 100%; 376 | position: relative; 377 | background: rgba(0, 0, 0, 0.5); 378 | border-radius: 10px; 379 | left: 0; 380 | top: 0; 381 | } 382 | .swiper-scrollbar-cursor-drag { 383 | cursor: move; 384 | } 385 | /* Preloader */ 386 | .swiper-lazy-preloader { 387 | width: 42px; 388 | height: 42px; 389 | position: absolute; 390 | left: 50%; 391 | top: 50%; 392 | margin-left: -21px; 393 | margin-top: -21px; 394 | z-index: 10; 395 | -webkit-transform-origin: 50%; 396 | -moz-transform-origin: 50%; 397 | transform-origin: 50%; 398 | -webkit-animation: swiper-preloader-spin 1s step-end infinite; 399 | -moz-animation: swiper-preloader-spin 1s step-end infinite; 400 | animation: swiper-preloader-spin 1s step-end infinite; 401 | } 402 | .swiper-lazy-preloader:after { 403 | display: block; 404 | content: ""; 405 | width: 100%; 406 | height: 100%; 407 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); 408 | background-position: 50%; 409 | -webkit-background-size: 100%; 410 | background-size: 100%; 411 | background-repeat: no-repeat; 412 | } 413 | .swiper-lazy-preloader-white:after { 414 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); 415 | } 416 | @-webkit-keyframes swiper-preloader-spin { 417 | 0% { 418 | -webkit-transform: rotate(0deg); 419 | } 420 | 8.33333333% { 421 | -webkit-transform: rotate(30deg); 422 | } 423 | 16.66666667% { 424 | -webkit-transform: rotate(60deg); 425 | } 426 | 25% { 427 | -webkit-transform: rotate(90deg); 428 | } 429 | 33.33333333% { 430 | -webkit-transform: rotate(120deg); 431 | } 432 | 41.66666667% { 433 | -webkit-transform: rotate(150deg); 434 | } 435 | 50% { 436 | -webkit-transform: rotate(180deg); 437 | } 438 | 58.33333333% { 439 | -webkit-transform: rotate(210deg); 440 | } 441 | 66.66666667% { 442 | -webkit-transform: rotate(240deg); 443 | } 444 | 75% { 445 | -webkit-transform: rotate(270deg); 446 | } 447 | 83.33333333% { 448 | -webkit-transform: rotate(300deg); 449 | } 450 | 91.66666667% { 451 | -webkit-transform: rotate(330deg); 452 | } 453 | 100% { 454 | -webkit-transform: rotate(360deg); 455 | } 456 | } 457 | @keyframes swiper-preloader-spin { 458 | 0% { 459 | transform: rotate(0deg); 460 | } 461 | 8.33333333% { 462 | transform: rotate(30deg); 463 | } 464 | 16.66666667% { 465 | transform: rotate(60deg); 466 | } 467 | 25% { 468 | transform: rotate(90deg); 469 | } 470 | 33.33333333% { 471 | transform: rotate(120deg); 472 | } 473 | 41.66666667% { 474 | transform: rotate(150deg); 475 | } 476 | 50% { 477 | transform: rotate(180deg); 478 | } 479 | 58.33333333% { 480 | transform: rotate(210deg); 481 | } 482 | 66.66666667% { 483 | transform: rotate(240deg); 484 | } 485 | 75% { 486 | transform: rotate(270deg); 487 | } 488 | 83.33333333% { 489 | transform: rotate(300deg); 490 | } 491 | 91.66666667% { 492 | transform: rotate(330deg); 493 | } 494 | 100% { 495 | transform: rotate(360deg); 496 | } 497 | } -------------------------------------------------------------------------------- /assets/less/require/_var.less: -------------------------------------------------------------------------------- 1 | /* ----- 2 | Path 3 | ----- */ 4 | @base-images: ~"../assets/images/"; 5 | @base-fonts: ~"../assets/fonts/"; 6 | 7 | /* ----- 8 | Colors 9 | ----- */ 10 | @white: #ffffff; 11 | @black: #000; 12 | @dark: #000; 13 | @green: #2c9d41; 14 | @grey-dark: #3a3a3a; 15 | @grey-light: #d9d9d9; 16 | @none: rgba(0,0,0,0); 17 | @base: @grey-light; 18 | 19 | /* ----- 20 | Font Family 21 | ----- */ 22 | @maison: "Maison Neue"; 23 | @font: @maison; 24 | 25 | /* ----- 26 | Font Weight 27 | ----- */ 28 | @book: 200; 29 | @regular: 400; 30 | @bold: 600; 31 | 32 | /* ----- 33 | Easings 34 | ----- */ 35 | @snap: cubic-bezier(0,1,.5,1); 36 | @easeOutCubic: cubic-bezier(.215,.61,.355,1); 37 | @easeInOutCubic: cubic-bezier(.645,.045,.355,1); 38 | @easeInCirc: cubic-bezier(.6,.04,.98,.335); 39 | @easeOutCirc: cubic-bezier(.075,.82,.165,1); 40 | @easeInOutCirc: cubic-bezier(.785,.135,.15,.86); 41 | @easeInExpo: cubic-bezier(.95,.05,.795,.035); 42 | @easeOutExpo: cubic-bezier(.19,1,.22,1); 43 | @easeInOutExpo: cubic-bezier(1,0,0,1); 44 | @easeInQuad: cubic-bezier(.55,.085,.68,.53); 45 | @easeOutQuad: cubic-bezier(.25,.46,.45,.94); 46 | @easeInOutQuad: cubic-bezier(.455,.03,.515,.955); 47 | @easeInQuart: cubic-bezier(.895,.03,.685,.22); 48 | @easeOutQuart: cubic-bezier(.165,.84,.44,1); 49 | @easeInOutQuart: cubic-bezier(.77,0,.175,1); 50 | @easeInQuint: cubic-bezier(.755,.05,.855,.06); 51 | @easeOutQuint: cubic-bezier(.23,1,.32,1); 52 | @easeInOutQuint: cubic-bezier(.86,0,.07,1); 53 | @easeInSine: cubic-bezier(.47,0,.745,.715); 54 | @easeOutSine: cubic-bezier(.39,.575,.565,1); 55 | @easeInOutSine: cubic-bezier(.445,.05,.55,.95); 56 | @easeInBack: cubic-bezier(.6,-.28,.735,.045); 57 | @easeOutBack: cubic-bezier(.175, .885,.32,1.275); 58 | @easeInOutBack: cubic-bezier(.68,-.55,.265,1.55); 59 | 60 | /* ----- 61 | Grid 62 | ----- */ 63 | @col_1: 8.33333333333%; 64 | @col_2: 16.6666666667%; 65 | @col_3: 25.0%; 66 | @col_4: 33.3333333333%; 67 | @col_5: 41.6666666667%; 68 | @col_6: 50.0%; 69 | @col_7: 58.3333333333%; 70 | @col_8: 66.6666666667%; 71 | @col_9: 75.0%; 72 | @col_10: 83.3333333333%; 73 | @col_11: 91.6666666667%; 74 | @col_12: 100%; 75 | 76 | /* ----- 77 | Font Sizes 78 | ----- */ 79 | @1px: 0.0625rem; 80 | @2px: 0.125rem; 81 | @3px: 0.1875rem; 82 | @4px: 0.25rem; 83 | @5px: 0.3125rem; 84 | @6px: 0.375rem; 85 | @7px: 0.4375rem; 86 | @8px: 0.5rem; 87 | @9px: 0.5625rem; 88 | @10px: 0.625rem; 89 | @11px: 0.6875rem; 90 | @12px: 0.75rem; 91 | @13px: 0.8125rem; 92 | @14px: 0.875rem; 93 | @15px: 0.9375rem; 94 | @16px: 1rem; 95 | @17px: 1.063rem; 96 | @18px: 1.125rem; 97 | @19px: 1.188rem; 98 | @20px: 1.25rem; 99 | @21px: 1.313rem; 100 | @22px: 1.375rem; 101 | @23px: 1.438rem; 102 | @24px: 1.5rem; 103 | @25px: 1.563rem; 104 | @26px: 1.625rem; 105 | @27px: 1.688rem; 106 | @28px: 1.75rem; 107 | @29px: 1.813rem; 108 | @30px: 1.875rem; 109 | @31px: 1.938rem; 110 | @32px: 2rem; 111 | @33px: 2.063rem; 112 | @34px: 2.125rem; 113 | @35px: 2.188rem; 114 | @36px: 2.25rem; 115 | @37px: 2.313rem; 116 | @38px: 2.375rem; 117 | @39px: 2.438rem; 118 | @40px: 2.5rem; 119 | @41px: 2.563rem; 120 | @42px: 2.625rem; 121 | @43px: 2.688rem; 122 | @44px: 2.75rem; 123 | @45px: 2.813rem; 124 | @46px: 2.875rem; 125 | @47px: 2.938rem; 126 | @48px: 3rem; 127 | @49px: 3.063rem; 128 | @50px: 3.125rem; 129 | @51px: 3.188rem; 130 | @52px: 3.25rem; 131 | @53px: 3.313rem; 132 | @54px: 3.375rem; 133 | @55px: 3.438rem; 134 | @56px: 3.5rem; 135 | @57px: 3.563rem; 136 | @58px: 3.625rem; 137 | @59px: 3.688rem; 138 | @60px: 3.75rem; 139 | @61px: 3.813rem; 140 | @62px: 3.875rem; 141 | @63px: 3.938rem; 142 | @64px: 4rem; 143 | @65px: 4.063rem; 144 | @66px: 4.125rem; 145 | @67px: 4.188rem; 146 | @68px: 4.25rem; 147 | @69px: 4.313rem; 148 | @70px: 4.375rem; 149 | @71px: 4.438rem; 150 | @72px: 4.5rem; 151 | @73px: 4.563rem; 152 | @74px: 4.625rem; 153 | @75px: 4.688rem; 154 | @76px: 4.75rem; 155 | @77px: 4.813rem; 156 | @78px: 4.875rem; 157 | @79px: 4.938rem; 158 | @80px: 5rem; 159 | @81px: 5.063rem; 160 | @82px: 5.125rem; 161 | @83px: 5.188rem; 162 | @84px: 5.25rem; 163 | @85px: 5.313rem; 164 | @86px: 5.375rem; 165 | @87px: 5.438rem; 166 | @88px: 5.5rem; 167 | @89px: 5.563rem; 168 | @90px: 5.625rem; 169 | @91px: 5.688rem; 170 | @92px: 5.75rem; 171 | @93px: 5.813rem; 172 | @94px: 5.875rem; 173 | @95px: 5.938rem; 174 | @96px: 6rem; 175 | @97px: 6.063rem; 176 | @98px: 6.125rem; 177 | @99px: 6.188rem; 178 | @100px: 6.25rem; 179 | @101px: 6.313rem; 180 | @102px: 6.375rem; 181 | @103px: 6.438rem; 182 | @104px: 6.5rem; 183 | @105px: 6.563rem; 184 | @106px: 6.625rem; 185 | @107px: 6.688rem; 186 | @108px: 6.75rem; 187 | @109px: 6.813rem; 188 | @110px: 6.875rem; 189 | @111px: 6.938rem; 190 | @112px: 7rem; 191 | @113px: 7.063rem; 192 | @114px: 7.125rem; 193 | @115px: 7.188rem; 194 | @116px: 7.25rem; 195 | @117px: 7.313rem; 196 | @118px: 7.375rem; 197 | @119px: 7.438rem; 198 | @120px: 7.5rem; 199 | @121px: 7.563rem; 200 | @122px: 7.625rem; 201 | @123px: 7.688rem; 202 | @124px: 7.75rem; 203 | @125px: 7.813rem; 204 | @126px: 7.875rem; 205 | @127px: 7.938rem; 206 | @128px: 8rem; 207 | @129px: 8.063rem; 208 | @130px: 8.125rem; 209 | @131px: 8.188rem; 210 | @132px: 8.25rem; 211 | @133px: 8.313rem; 212 | @134px: 8.375rem; 213 | @135px: 8.438rem; 214 | @136px: 8.5rem; 215 | @137px: 8.563rem; 216 | @138px: 8.625rem; 217 | @139px: 8.688rem; 218 | @140px: 8.75rem; 219 | @141px: 8.813rem; 220 | @142px: 8.875rem; 221 | @143px: 8.938rem; 222 | @144px: 9rem; 223 | @145px: 9.063rem; 224 | @146px: 9.125rem; 225 | @147px: 9.188rem; 226 | @148px: 9.25rem; 227 | @149px: 9.313rem; 228 | @150px: 9.375rem; 229 | @151px: 9.438rem; 230 | @152px: 9.5rem; 231 | @153px: 9.563rem; 232 | @154px: 9.625rem; 233 | @155px: 9.688rem; 234 | @156px: 9.75rem; 235 | @157px: 9.813rem; 236 | @158px: 9.875rem; 237 | @159px: 9.938rem; 238 | @160px: 10rem; 239 | @161px: 10.06rem; 240 | @162px: 10.13rem; 241 | @163px: 10.19rem; 242 | @164px: 10.25rem; 243 | @165px: 10.31rem; 244 | @166px: 10.38rem; 245 | @167px: 10.44rem; 246 | @168px: 10.5rem; 247 | @169px: 10.56rem; 248 | @170px: 10.63rem; 249 | @171px: 10.69rem; 250 | @172px: 10.75rem; 251 | @173px: 10.81rem; 252 | @174px: 10.88rem; 253 | @175px: 10.94rem; 254 | @176px: 11rem; 255 | @177px: 11.06rem; 256 | @178px: 11.13rem; 257 | @179px: 11.19rem; 258 | @180px: 11.25rem; 259 | @181px: 11.31rem; 260 | @182px: 11.38rem; 261 | @183px: 11.44rem; 262 | @184px: 11.5rem; 263 | @185px: 11.56rem; 264 | @186px: 11.63rem; 265 | @187px: 11.69rem; 266 | @188px: 11.75rem; 267 | @189px: 11.81rem; 268 | @190px: 11.88rem; 269 | @191px: 11.94rem; 270 | @192px: 12rem; 271 | @193px: 12.06rem; 272 | @194px: 12.13rem; 273 | @195px: 12.19rem; 274 | @196px: 12.25rem; 275 | @197px: 12.31rem; 276 | @198px: 12.38rem; 277 | @199px: 12.44rem; 278 | @200px: 12.5rem; 279 | @201px: 12.56rem; 280 | @202px: 12.63rem; 281 | @203px: 12.69rem; 282 | @204px: 12.75rem; 283 | @205px: 12.81rem; 284 | @206px: 12.88rem; 285 | @207px: 12.94rem; 286 | @208px: 13rem; 287 | @209px: 13.06rem; 288 | @210px: 13.13rem; 289 | @211px: 13.19rem; 290 | @212px: 13.25rem; 291 | @213px: 13.31rem; 292 | @214px: 13.38rem; 293 | @215px: 13.44rem; 294 | @216px: 13.5rem; 295 | @217px: 13.56rem; 296 | @218px: 13.63rem; 297 | @219px: 13.69rem; 298 | @220px: 13.75rem; 299 | @221px: 13.81rem; 300 | @222px: 13.88rem; 301 | @223px: 13.94rem; 302 | @224px: 14rem; 303 | @225px: 14.06rem; 304 | @226px: 14.13rem; 305 | @227px: 14.19rem; 306 | @228px: 14.25rem; 307 | @229px: 14.31rem; 308 | @230px: 14.38rem; 309 | @231px: 14.44rem; 310 | @232px: 14.5rem; 311 | @233px: 14.56rem; 312 | @234px: 14.63rem; 313 | @235px: 14.69rem; 314 | @236px: 14.75rem; 315 | @237px: 14.81rem; 316 | @238px: 14.88rem; 317 | @239px: 14.94rem; 318 | @240px: 15rem; 319 | @241px: 15.06rem; 320 | @242px: 15.13rem; 321 | @243px: 15.19rem; 322 | @244px: 15.25rem; 323 | @245px: 15.31rem; 324 | @246px: 15.38rem; 325 | @247px: 15.44rem; 326 | @248px: 15.5rem; 327 | @249px: 15.56rem; 328 | @250px: 15.63rem; 329 | @251px: 15.69rem; 330 | @252px: 15.75rem; 331 | @253px: 15.81rem; 332 | @254px: 15.88rem; 333 | @255px: 15.94rem; 334 | @256px: 16rem; 335 | @257px: 16.06rem; 336 | @258px: 16.13rem; 337 | @259px: 16.19rem; 338 | @260px: 16.25rem; 339 | @261px: 16.31rem; 340 | @262px: 16.38rem; 341 | @263px: 16.44rem; 342 | @264px: 16.5rem; 343 | @265px: 16.56rem; 344 | @266px: 16.63rem; 345 | @267px: 16.69rem; 346 | @268px: 16.75rem; 347 | @269px: 16.81rem; 348 | @270px: 16.88rem; 349 | @271px: 16.94rem; 350 | @272px: 17rem; 351 | @273px: 17.06rem; 352 | @274px: 17.13rem; 353 | @275px: 17.19rem; 354 | @276px: 17.25rem; 355 | @277px: 17.31rem; 356 | @278px: 17.38rem; 357 | @279px: 17.44rem; 358 | @280px: 17.5rem; 359 | @281px: 17.56rem; 360 | @282px: 17.63rem; 361 | @283px: 17.69rem; 362 | @284px: 17.75rem; 363 | @285px: 17.81rem; 364 | @286px: 17.88rem; 365 | @287px: 17.94rem; 366 | @288px: 18rem; 367 | @289px: 18.06rem; 368 | @290px: 18.13rem; 369 | @291px: 18.19rem; 370 | @292px: 18.25rem; 371 | @293px: 18.31rem; 372 | @294px: 18.38rem; 373 | @295px: 18.44rem; 374 | @296px: 18.5rem; 375 | @297px: 18.56rem; 376 | @298px: 18.63rem; 377 | @299px: 18.69rem; 378 | @300px: 18.75rem; 379 | @301px: 18.81rem; 380 | @302px: 18.88rem; 381 | @303px: 18.94rem; 382 | @304px: 19rem; 383 | @305px: 19.06rem; 384 | @306px: 19.13rem; 385 | @307px: 19.19rem; 386 | @308px: 19.25rem; 387 | @309px: 19.31rem; 388 | @310px: 19.38rem; 389 | @311px: 19.44rem; 390 | @312px: 19.5rem; 391 | @313px: 19.56rem; 392 | @314px: 19.63rem; 393 | @315px: 19.69rem; 394 | @316px: 19.75rem; 395 | @317px: 19.81rem; 396 | @318px: 19.88rem; 397 | @319px: 19.94rem; 398 | @320px: 20rem; 399 | @321px: 20.06rem; 400 | @322px: 20.13rem; 401 | @323px: 20.19rem; 402 | @324px: 20.25rem; 403 | @325px: 20.31rem; 404 | @326px: 20.38rem; 405 | @327px: 20.44rem; 406 | @328px: 20.5rem; 407 | @329px: 20.56rem; 408 | @330px: 20.63rem; 409 | @331px: 20.69rem; 410 | @332px: 20.75rem; 411 | @333px: 20.81rem; 412 | @334px: 20.88rem; 413 | @335px: 20.94rem; 414 | @336px: 21rem; 415 | @337px: 21.06rem; 416 | @338px: 21.13rem; 417 | @339px: 21.19rem; 418 | @340px: 21.25rem; 419 | @341px: 21.31rem; 420 | @342px: 21.38rem; 421 | @343px: 21.44rem; 422 | @344px: 21.5rem; 423 | @345px: 21.56rem; 424 | @346px: 21.63rem; 425 | @347px: 21.69rem; 426 | @348px: 21.75rem; 427 | @349px: 21.81rem; 428 | @350px: 21.88rem; 429 | @351px: 21.94rem; 430 | @352px: 22rem; 431 | @353px: 22.06rem; 432 | @354px: 22.13rem; 433 | @355px: 22.19rem; 434 | @356px: 22.25rem; 435 | @357px: 22.31rem; 436 | @358px: 22.38rem; 437 | @359px: 22.44rem; 438 | @360px: 22.5rem; 439 | @361px: 22.56rem; 440 | @362px: 22.63rem; 441 | @363px: 22.69rem; 442 | @364px: 22.75rem; 443 | @365px: 22.81rem; 444 | @366px: 22.88rem; 445 | @367px: 22.94rem; 446 | @368px: 23rem; 447 | @369px: 23.06rem; 448 | @370px: 23.13rem; 449 | @371px: 23.19rem; 450 | @372px: 23.25rem; 451 | @373px: 23.31rem; 452 | @374px: 23.38rem; 453 | @375px: 23.44rem; 454 | @376px: 23.5rem; 455 | @377px: 23.56rem; 456 | @378px: 23.63rem; 457 | @379px: 23.69rem; 458 | @380px: 23.75rem; 459 | @381px: 23.81rem; 460 | @382px: 23.88rem; 461 | @383px: 23.94rem; 462 | @384px: 24rem; 463 | @385px: 24.06rem; 464 | @386px: 24.13rem; 465 | @387px: 24.19rem; 466 | @388px: 24.25rem; 467 | @389px: 24.31rem; 468 | @390px: 24.38rem; 469 | @391px: 24.44rem; 470 | @392px: 24.5rem; 471 | @393px: 24.56rem; 472 | @394px: 24.63rem; 473 | @395px: 24.69rem; 474 | @396px: 24.75rem; 475 | @397px: 24.81rem; 476 | @398px: 24.88rem; 477 | @399px: 24.94rem; 478 | -------------------------------------------------------------------------------- /build/app.min.css: -------------------------------------------------------------------------------- 1 | html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}hr{height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@font-face{font-family:"Maison Neue";src:url(../assets/fonts/MaisonNeue-Book.eot);src:url(../assets/fonts/MaisonNeue-Book.eot?#iefix) format('embedded-opentype'),url(../assets/fonts/MaisonNeue-Book.woff) format('woff'),url(../assets/fonts/MaisonNeue-Book.ttf) format('truetype'),url(../assets/fonts/MaisonNeue-Book.svg#cfe9c4d435b13936a17ea5090528f1ab) format('svg');font-style:normal;font-weight:400}.row{zoom:1}.row:after,.row:before{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row:after{clear:both}.device-content{position:relative;width:970px;display:block;margin-left:auto;margin-right:auto}.column{display:block;float:left;min-height:1px}.col-1{width:8.33333333%}.col-2{width:16.66666667%}.col-3{width:25%}.col-4{width:33.33333333%}.col-5{width:41.66666667%}.col-6{width:50%}.col-7{width:58.33333333%}.col-8{width:66.66666667%}.col-9{width:75%}.col-10{width:83.33333333%}.col-11{width:91.66666667%}.col-12{width:100%}img.scale-with-grid{width:100%;height:auto;display:block}@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}*{margin:0;padding:0;-moz-box-sizing:border-box;box-sizing:border-box;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}body,html{overflow:hidden;background:#d9d9d9;-webkit-backface-visibility:hidden;backface-visibility:hidden}html{font:16.1px/1.3 "Maison Neue"}a:focus{outline:0}body:not(.is-contact){-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body.is-loaded{cursor:s-resize}body.is-loading{cursor:progress}body>.logo{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:auto;height:auto;pointer-events:none;z-index:1000;transition:opacity 1s linear;-webkit-transform:scale(.13);transform:scale(.13);will-change:transform}body>.logo.hidden{opacity:0}body>.logo.rotate{-webkit-transform:scale(.13) rotate(-90deg);transform:scale(.13) rotate(-90deg);transition:opacity 1s linear,-webkit-transform 2.5s cubic-bezier(.19,1,.22,1);transition:opacity 1s linear,transform 2.5s cubic-bezier(.19,1,.22,1)}body>.logo.scaled{-webkit-transform:none;transform:none}body>.logo.scaled canvas{opacity:1}body>.logo.scaled svg{opacity:0}body>.logo canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;margin:auto;height:100vh;opacity:0;transition:opacity 3s cubic-bezier(.19,1,.22,1)}body>.logo svg{display:block;margin:auto;height:100vh;transition:opacity 3s linear}@media only screen and (max-width:768px){body>.logo svg{-webkit-transform:translateX(-22%);transform:translateX(-22%)}}body>.logo svg use{fill:#fff}body.is-section .arrow svg path,body.is-section .name svg use,body.is-section>.logo svg use{fill:#000;transition:all 1s cubic-bezier(.19,1,.22,1)}body.is-section .mobile-menu{color:#000}body.is-section .email{opacity:0;pointer-events:none}body.is-section .vs-scrollbar .vs-scrolldrag{background:#000}body.is-contact .arrow svg path,body.is-contact .name svg use{fill:#000;transition:all 1s cubic-bezier(.19,1,.22,1)}body.is-contact .mobile-menu{color:#000}body.is-contact .arrow,body.is-contact .email{opacity:0;pointer-events:none}body.has-menu-open .logo{opacity:.2}body.has-menu-open .email{opacity:1}nav{position:absolute;top:0;left:0;margin:3.125rem 0 0 3.125rem;z-index:1100;transition:opacity 1s linear}@media only screen and (max-width:768px){nav{display:none}}nav.hidden{opacity:0;pointer-events:none}nav a,nav span{font:.9375rem "Maison Neue";margin:0 .3125rem;color:#fff;cursor:pointer;padding-bottom:2px;transition:color .8s cubic-bezier(.19,1,.22,1)}.is-about nav a[href="/profile"]:after,.is-contact nav a[href="/contact"]:after,.is-home nav a[href="/diary"]:after,.is-section nav a[href="/diary"]:after{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:left;transform-origin:left}.is-contact nav a,.is-contact nav span,.is-section nav a,.is-section nav span{color:#000}.is-contact nav a:after,.is-contact nav span:after,.is-section nav a:after,.is-section nav span:after{background-color:#000}.mobile-menu{display:none;position:absolute;font-size:1.5rem;color:#fff;top:0;left:0;z-index:30;margin:3.125rem 0 0 3.125rem}.is-preloader .mobile-menu{display:none}@media only screen and (max-width:768px){.mobile-menu{display:block}}.menu{display:none;position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;background:#333;opacity:0;visibility:hidden;z-index:25}.menu .vertical-el{padding:0 2.5rem}.menu .link{display:block;color:#fff;font:400 4.063rem/1.3 "Maison Neue"}.menu .link:after{display:none}@media only screen and (max-width:768px){.menu{display:block}}.name{display:block;position:absolute;bottom:0;left:0;margin:0 0 3.125rem 3.125rem;transition:opacity .9s linear;z-index:900}.is-preloader .name{display:none}@media only screen and (max-width:768px){.name{top:0;right:0;left:auto;bottom:auto;margin:3.125rem 3.125rem 0 0}}.name.hidden{opacity:0;pointer-events:none}@media only screen and (max-width:768px){.name.hidden{opacity:1;pointer-events:auto}}.name svg{width:152px;height:30px}@media only screen and (max-width:768px){.name svg{width:95px;height:25px}}.name svg use{fill:#fff}.email{position:absolute;top:6.5rem;right:-.5rem;color:#fff;font-size:.9375rem;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);z-index:900}@media only screen and (max-width:768px){.email{opacity:0;display:block;-webkit-transform:none;transform:none;top:auto;bottom:0;right:auto;left:0;margin:0 0 2.5rem 2.5rem}}.email.hidden{opacity:0}.arrow{position:absolute;bottom:0;right:0;margin:0 2.5rem 2.5rem 0;transition:opacity .9s linear;z-index:900}.arrow.hidden{opacity:0}.arrow.rotate svg{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}.arrow svg{width:40px;height:40px;fill:#fff;transition:fill 1s linear;transition:-webkit-transform .9s cubic-bezier(.19,1,.22,1);transition:transform .9s cubic-bezier(.19,1,.22,1)}@media only screen and (max-width:768px){.arrow{text-align:center;left:0;margin:0 auto 2.5rem;opacity:0;pointer-events:none}.is-loaded .arrow{opacity:1}.arrow svg{width:60px;height:60px}}.ui-split>div{overflow:hidden}@media only screen and (max-width:768px){html{font:80%/1.5 "Maison Neue"}.device-content{width:90%}.not-mobile{display:none}}@media only screen and (min-width:769px) and (max-width:1024px){html{font:90%/1.5 "Maison Neue"}.device-content{width:700px}.not-mobile{display:none}}@media only screen and (min-width:1025px) and (max-width:1128px){html{font:95%/1.5 "Maison Neue"}.device-content{width:960px}}a{color:#000;text-decoration:none}a.link,a:not([class]),span.link{position:relative;display:inline-block;vertical-align:middle;cursor:pointer;overflow:hidden}a.link:after,a:not([class]):after,span.link:after{content:'';position:absolute;bottom:1px;left:0;width:100%;height:1px;background:#fff;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:right;transform-origin:right;transition:-webkit-transform .9s cubic-bezier(.19,1,.22,1);transition:transform .9s cubic-bezier(.19,1,.22,1)}a.link:hover:after,a:not([class]):hover:after,span.link:hover:after{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:left;transform-origin:left}ul{list-style-type:none}p{font:.875rem/1.563rem "Maison Neue"}h1{font:400 9.5vh/1 "Maison Neue"}.blockquote{font:200 1.75rem/1.4 "Maison Neue";margin:8.75rem 0 2.5rem;max-width:90%}@media only screen and (max-width:768px){.blockquote{font-size:1.438rem;max-width:80%}}@media only screen and (min-width:769px) and (max-width:1024px){.blockquote{font-size:1.438rem;max-width:95%}}.blockquote~p{margin-bottom:8.75rem}.close{position:absolute;top:50%;width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.2);transition:border 1s linear;-webkit-transform:translate3d(-80px,-80%,0);transform:translate3d(-80px,-80%,0);cursor:pointer;opacity:0;visibility:hidden}.close .icon{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:10px;height:10px}.close .icon div{position:absolute;width:10px;height:2px;overflow:hidden;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;pointer-events:none}.close .icon div:first-child{-webkit-transform:translate3d(0,4px,0) rotate3d(0,0,1,45deg);transform:translate3d(0,4px,0) rotate3d(0,0,1,45deg)}.close .icon div:last-child{-webkit-transform:translate3d(0,4px,0) rotate3d(0,0,1,-45deg);transform:translate3d(0,4px,0) rotate3d(0,0,1,-45deg)}.close .icon div:after,.close .icon div:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;background:#fff;pointer-events:none;transition:-webkit-transform .8s cubic-bezier(.19,1,.22,1),background 1s linear;transition:transform .8s cubic-bezier(.19,1,.22,1),background 1s linear}.close .icon div:before{-webkit-transform:none;transform:none}.close .icon div:after{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.close svg ellipse{transition:stroke 1s linear}.close.is-dark{border-color:rgba(150,150,150,.2);opacity:.8}.close.is-dark .icon div:after,.close.is-dark .icon div:before{background:rgba(80,80,80,.5)}.close.is-dark svg ellipse{stroke:#c6c6c6}.close:hover .icon div:first-child:before{transition-delay:0}.close:hover .icon div:first-child:after{transition-delay:.6s}.close:hover .icon div:last-child:before{transition-delay:.2s}.close:hover .icon div:last-child:after{transition-delay:.8s}.close:hover .icon div:before{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.close:hover .icon div:after{-webkit-transform:none;transform:none}.page-view{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto}.page-view .page{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;height:100%;display:none}@media only screen and (max-width:768px){.page-view .page{overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch}}.page-clip{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.svg-defs{display:none}.vertical-center{display:table;position:relative;width:100%;height:100%}.vertical-center .vertical-el{display:table-cell;vertical-align:middle}.intrinsic{position:relative;padding-bottom:110%;height:0}.intrinsic--portrait{padding-bottom:36%}.intrinsic--landscape{padding-bottom:20%}.intrinsic--16-9{padding-bottom:56%}.intrinsic .layer{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.intrinsic .el{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center center;background-size:cover;background-repeat:no-repeat}.vs-section{position:fixed;top:0;left:0;right:0;height:auto}.vs-scrollbar{position:absolute;top:0;right:0;width:3px;height:100%}.vs-scrollbar .vs-scrolldrag{position:absolute;width:100%;height:auto;background:#fff;transition:background .6s cubic-bezier(.19,1,.22,1)}.video-cover{display:block;position:absolute;left:50%;top:50%;height:100%;min-width:100vw;min-height:56.25vw;pointer-events:none;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.preloader{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;transition:opacity .8s linear;opacity:0}.preloader .background{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;background-position:center center;background-size:cover;background-repeat:no-repeat;-webkit-transform:scale(1.2);transform:scale(1.2);transition:opacity .8s linear,-webkit-transform 2.6s cubic-bezier(.19,1,.22,1);transition:opacity .8s linear,transform 2.6s cubic-bezier(.19,1,.22,1)}.page-diary{overflow:hidden}.project-list{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;z-index:1000;opacity:0;visibility:hidden}.project-list .list-close{position:absolute;top:50%;left:2.3rem;color:#fff;-webkit-transform:translateY(-50%) rotate(-90deg);transform:translateY(-50%) rotate(-90deg);z-index:900}.project-list a{display:inline-block;font:400 1.75rem/.9 "Maison Neue";color:#fff;margin:0 .9375rem 1.563rem 0}.project-list a:after{bottom:0;height:1px;-webkit-transform:none;transform:none}.page-diary{background:#d9d9d9}.page-diary .all{position:absolute;top:50%;left:3.125rem;color:#fff;-webkit-transform:translateY(-50%) rotate(-90deg);transform:translateY(-50%) rotate(-90deg);transition:opacity .6s cubic-bezier(.19,1,.22,1);z-index:900}@media only screen and (max-width:768px){.page-diary .all{display:none}}.page-diary .all.is-hidden{opacity:0;pointer-events:none}.page-diary .section{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}@media only screen and (max-width:768px){.page-diary .section{padding:7.5rem 2.5rem 2.5rem}}.page-diary .el{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.page-diary .el .el{opacity:0;visibility:hidden}.page-diary .el--left{-webkit-transform:translateX(-10%);transform:translateX(-10%);z-index:1}.page-diary .el--left label{top:50%;-webkit-transform:translate3d(-20%,-50%,0);transform:translate3d(-20%,-50%,0)}.page-diary .el--right{-webkit-transform:translateX(10%);transform:translateX(10%)}.page-diary .el--right label{top:15%;right:0;-webkit-transform:translate3d(50%,0,0);transform:translate3d(50%,0,0)}@media only screen and (max-width:768px){.page-diary .el{position:relative;top:auto;right:auto;bottom:auto;left:auto}.page-diary .el label{display:none}}.page-diary .el label{position:absolute;font-size:.875rem;color:#fff;font-weight:500;opacity:0;transition:opacity 1s cubic-bezier(.19,1,.22,1)}.page-diary:not(.has-hover) .el{pointer-events:none}.page-diary.has-hover .el:hover label{opacity:1}.page-diary .intrinsic{width:25vw;margin:auto}@media only screen and (max-width:768px){.page-diary .intrinsic{height:auto;padding-bottom:0!important;margin-bottom:2.5rem}}.page-diary .intrinsic--landscape{width:35vw;-webkit-transform:translateX(-30%);transform:translateX(-30%);padding-bottom:20%}@media only screen and (max-width:768px){.page-diary .intrinsic--landscape{width:100%;height:35%;-webkit-transform:none;transform:none}.page-diary .intrinsic--landscape .el{height:100%}}.page-diary .intrinsic--portrait{width:25vw;-webkit-transform:translateX(30%);transform:translateX(30%);padding-bottom:35%}@media only screen and (max-width:768px){.page-diary .intrinsic--portrait{width:100%;height:65%;-webkit-transform:none;transform:none}.page-diary .intrinsic--portrait .el{height:100%}}.page-contact{background:#bfbfbf}@media only screen and (max-width:768px){.page-contact{padding:11.25rem 2.188rem 5rem}}.page-contact span{cursor:auto}.page-contact span.link{position:relative}.page-contact span.link:after{background-color:#000;-webkit-transform:none;transform:none}.page-contact .p>div{display:block;overflow:hidden}.page-contact .p span{display:block;font:400 3.625rem/1.1 "Maison Neue";margin-bottom:.9375rem}@media only screen and (max-width:768px){.page-contact .p span{font-size:1.875rem;line-height:1}}.page-contact .p span.link{display:inline-block}.page-contact .p span.link:after{height:2px}.page-contact .p a{font:400 3.625rem/1 "Maison Neue"}@media only screen and (max-width:768px){.page-contact .p a{font-size:1.875rem;line-height:1}}.page-contact .p a:after{height:2px;background-color:#000}.page-contact .right{position:absolute;top:0;right:0}@media only screen and (max-width:768px){.page-contact .right{position:relative;top:auto;right:auto;margin-top:2.188rem}}.page-contact .right .el:not(:first-child){margin-top:.3125rem}.page-contact .right .el:not(:last-child){margin-bottom:3.125rem}@media only screen and (max-width:768px){.page-contact .right .el:not(:last-child){margin-bottom:1.25rem}}.page-contact .right .el a:after{background:#000}.page-contact .right p{font:200 .9375rem/1.3 "Maison Neue";max-width:9.375rem}@media only screen and (max-width:768px){.page-contact .right p{font-size:1.125rem}}.page-contact .credit{position:absolute;bottom:140px;right:-50px;font:400 .75rem "Maison Neue";-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}@media only screen and (max-width:768px){.page-contact .credit{display:none}}.page-profile{background:#000;opacity:0;visibility:hidden}.page-profile .index{position:absolute;font-size:.875rem;color:#fff;margin-top:-50px;opacity:0;transition:opacity .6s linear}@media only screen and (max-width:768px){.page-profile .index{display:none}}.page-profile .index.is-current-index{opacity:.2;transition-delay:1s}.page-profile .p{position:absolute;top:0;right:0;bottom:0;left:0;max-width:900px;margin:auto;width:100%;-webkit-perspective:600;perspective:600}@media only screen and (max-width:768px){.page-profile .p{display:none}}.page-profile .p p{font:400 1.875rem/1.3 "Maison Neue";color:#fff;opacity:0}@media only screen and (max-width:768px){.page-profile .p p{font-size:1.125rem;opacity:1}}.page-profile .p p>div{overflow:hidden}.page-profile .jello-canvas{position:absolute;top:0;left:50%;bottom:0;height:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.page-profile .intrinsic{position:absolute;top:0;right:0;bottom:0;left:0;width:25%;margin:auto;-webkit-transform:scale(.9);transform:scale(.9);padding-bottom:30%;opacity:0;visibility:hidden}.page-profile .intrinsic .el{display:none}@media only screen and (max-width:768px){.page-profile .intrinsic{width:55%;padding-bottom:100%;opacity:.2}.page-profile .intrinsic .el{display:block}}@media only screen and (max-width:768px){.page-profile .vertical-center{position:fixed}}.page-profile .mobile-p{display:none;position:relative;max-width:85%;margin:75vh auto 11.25rem;color:#fff}.page-profile .mobile-p p{font:400 2.188rem/1.3 "Maison Neue";margin-bottom:.9375rem}@media only screen and (max-width:768px){.page-profile .mobile-p{display:block}}.single{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;background:#fff}.single h1{font:400 1rem/1.2 "Maison Neue";max-width:6.25rem;margin-bottom:1.563rem}@media only screen and (max-width:768px){.single h1{font-size:1.563rem;font-weight:400;margin:-25vh auto 0;max-width:40%;text-align:center}}.single .share{margin-left:6.25rem}@media only screen and (max-width:768px){.single .share{display:none}}.single .share span{display:block}.single .share a{margin-right:.3125rem}.single .share a:after{background-color:#000}.single .back{position:absolute;top:0;right:0;margin:3.125rem 3.125rem 0 0;z-index:2}@media only screen and (max-width:768px){.single .back{display:none}}.single .back:after{background-color:#000}.single .section{position:absolute;top:0;left:0;width:100%;background:#fff}@media only screen and (max-width:768px){.single .section{padding:2.5rem}}.single .section .vertical-center{position:absolute;top:0;left:0;height:100vh}.single .intrinsic{background:#d9d9d9;overflow:hidden}.single .intrinsic .el{-webkit-transform:scale(1.3);transform:scale(1.3);opacity:0}.single .intrinsic--landscape{padding-bottom:70%}.single .image__right{width:50%;margin:0 0 0 auto}.single .image__right.margin-top{margin-top:25vh}@media only screen and (max-width:768px){.single .image__right{width:100%}.single .image__right.margin-top{margin-top:75vh}}.single .image__left{width:25%;margin-left:16%}@media only screen and (max-width:768px){.single .image__left{width:100%;margin-left:0}}@media only screen and (max-width:768px){.single .image{margin-bottom:2.5rem}}.single .image .intrinsic--portrait{padding-bottom:150%} -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/favicon.ico -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | <?php 2 | include_once 'includes/custom_post_types.php'; 3 | include_once 'includes/custom_taxonomies.php'; 4 | include_once 'includes/lib/Mobile_Detect.php'; 5 | 6 | if ( ! class_exists( 'Timber' ) ) { 7 | add_action( 'admin_notices', function() { 8 | echo '<div class="error"><p>Timber not activated. Make sure you activate the plugin in <a href="' . esc_url( admin_url( 'plugins.php#timber' ) ) . '">' . esc_url( admin_url( 'plugins.php' ) ) . '</a></p></div>'; 9 | } ); 10 | return; 11 | } 12 | 13 | Timber::$dirname = array('views'); 14 | 15 | class Site extends TimberSite { 16 | 17 | function __construct() { 18 | 19 | show_admin_bar(false); 20 | 21 | add_theme_support( 'post-thumbnails' ); 22 | add_theme_support( 'menus' ); 23 | add_filter( 'timber_context', array( $this, 'add_to_context' ) ); 24 | add_filter( 'get_twig', array( $this, 'add_to_twig' ) ); 25 | add_action( 'init', array( $this, 'initAction' ) ); 26 | 27 | add_action( 'wp_footer', 'deregister_scripts' ); 28 | 29 | remove_action( 'wp_head', 'rest_output_link_wp_head'); 30 | remove_action( 'wp_head', 'wp_oembed_add_discovery_links'); 31 | remove_action( 'template_redirect', 'rest_output_link_header', 11, 0 ); 32 | remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); 33 | remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); 34 | remove_action( 'wp_print_styles', 'print_emoji_styles' ); 35 | remove_action( 'admin_print_styles', 'print_emoji_styles' ); 36 | 37 | remove_action('wp_head', 'wlwmanifest_link'); 38 | remove_action('wp_head', 'index_rel_link'); 39 | remove_action('wp_head', 'rsd_link'); 40 | remove_action('wp_head', 'wp_generator'); 41 | 42 | if( function_exists('acf_add_options_page') ) { 43 | acf_add_options_page(); 44 | } 45 | 46 | $this->detect = new Mobile_Detect; 47 | 48 | parent::__construct(); 49 | } 50 | 51 | function initAction() { 52 | custom_post_types(); 53 | custom_taxonomies(); 54 | } 55 | 56 | function add_to_context( $context ) { 57 | 58 | $context['IS_PREVIEW'] = isset($_GET["preview"]); 59 | $context['site'] = $this; 60 | 61 | $context['isAJAX'] = (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'); 62 | $context['option'] = get_fields('option'); 63 | 64 | $context['isMobile'] = $this->detect->isMobile(); 65 | $context['isTablet'] = $this->detect->isTablet(); 66 | 67 | $args = array('post_type' => 'work', 'posts_per_page' => -1, 'order_by' => 'date'); 68 | $context['diary'] = Timber::get_posts($args); 69 | 70 | return $context; 71 | } 72 | 73 | function add_to_twig( $twig ) { 74 | /* this is where you can add your own functions to twig */ 75 | $twig->addExtension( new Twig_Extension_StringLoader() ); 76 | 77 | $twig->addFilter('trimWords', new Twig_Filter_Function('trimWords')); 78 | $twig->addFilter('ti', new Twig_Filter_Function('convertToTimberImage')); 79 | $twig->addFilter('downsize', new Twig_Filter_Function('downsize')); 80 | return $twig; 81 | } 82 | 83 | } 84 | 85 | new Site(); 86 | 87 | function trimWords($string, $len = 50){ 88 | $text = TimberHelper::trim_words($string, $len, false); 89 | $last = $text[strlen($text) - 1]; 90 | if ( $last != '.') { 91 | $text .= ' … '; 92 | } 93 | return $text; 94 | } 95 | 96 | function deregister_scripts(){ 97 | wp_deregister_script( 'wp-embed' ); 98 | } 99 | 100 | function convertToTimberImage($imageArray) { 101 | return (is_array($imageArray)) ? new TimberImage($imageArray['ID']) : ''; 102 | } 103 | 104 | function downsize($image, $width, $height = 0){ 105 | if(get_class($image) != 'TimberImage') { return 'downsize should be applied to a TimberImage only'; } 106 | 107 | $src = $image->get_src(); 108 | 109 | $src = TimberImageHelper::img_to_jpg($src); 110 | 111 | if($image->width >= $width || ($height != 0 && $image->height >= $height)) { 112 | $src = TimberImageHelper::resize($src, $width, $height); 113 | } 114 | return $src; 115 | } 116 | -------------------------------------------------------------------------------- /gulp/index.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var tasks = fs.readdirSync('./gulp/tasks/'); 3 | 4 | tasks.forEach(function(task) { 5 | require('./tasks/' + task); 6 | }); -------------------------------------------------------------------------------- /gulp/tasks/aliases.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | 5 | gulp.task('default', ['less', 'js', 'serve']); -------------------------------------------------------------------------------- /gulp/tasks/javascript.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var watchify = require('watchify'); 5 | var browserify = require('browserify'); 6 | var babelify = require('babelify'); 7 | var changed = require('gulp-changed'); 8 | var uglify = require('gulp-uglify'); 9 | var rename = require('gulp-rename'); 10 | var gutil = require('gulp-util'); 11 | var assign = require('lodash.assign'); 12 | var source = require('vinyl-source-stream'); 13 | var buffer = require('vinyl-buffer'); 14 | 15 | var customOpts = { 16 | entries: ['assets/js/main.js'], 17 | debug: true 18 | }; 19 | 20 | var opts = assign({}, watchify.args, customOpts); 21 | var bundler = watchify(browserify(opts).transform(babelify, {presets: ["es2015"]})); 22 | var destination = './build'; 23 | 24 | gulp.task('js', bundle); 25 | bundler.on('update', bundle); 26 | bundler.on('log', gutil.log); 27 | 28 | function bundle() { 29 | return bundler.bundle() 30 | .on('error', gutil.log.bind(gutil, 'Browserify Error')) 31 | .pipe(source('app')) 32 | .pipe(changed(destination)) 33 | .pipe(rename({ extname: '.js' })) 34 | .pipe(gulp.dest(destination)) 35 | .pipe(buffer()) 36 | .pipe(uglify().on('error', gutil.log)) 37 | .pipe(rename({ extname: '.min.js' })) 38 | .pipe(gulp.dest(destination)) 39 | } -------------------------------------------------------------------------------- /gulp/tasks/serve.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | // var browserSync = require('browser-sync'); 5 | // var reload = browserSync.reload; 6 | 7 | gulp.task('serve', ['less', 'js'], function() { 8 | 9 | // browserSync({ 10 | // notify: false, 11 | // server: {baseDir: './'} 12 | // }); 13 | 14 | gulp.watch('assets/less/**/*.less', ['less']); 15 | gulp.watch('assets/js/**/*.js', ['js']); 16 | 17 | // gulp.watch(['*.html', 'build/*.css', 'build/*.js'], {cwd: ''}, reload); 18 | 19 | }); -------------------------------------------------------------------------------- /gulp/tasks/styles.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var gutil = require('gulp-util'); 5 | var less = require('gulp-less'); 6 | var autoprefixer = require('gulp-autoprefixer'); 7 | var minifycss = require('gulp-minify-css'); 8 | var rename = require("gulp-rename"); 9 | var browserSync = require('browser-sync'); 10 | 11 | gulp.task('less', function() { 12 | gulp.src('assets/less/layout.less') 13 | .pipe(less().on('error', gutil.log)) 14 | .pipe(autoprefixer({ 15 | browsers: ['last 2 versions'], 16 | cascade: false 17 | })) 18 | .pipe(minifycss()) 19 | .pipe(rename("app.min.css")) 20 | .pipe(gulp.dest('build/')) 21 | .pipe(browserSync.stream()); 22 | }); -------------------------------------------------------------------------------- /gulp/utils/handleErrors.js: -------------------------------------------------------------------------------- 1 | var notify = require("gulp-notify"); 2 | 3 | module.exports = function() { 4 | var args = Array.prototype.slice.call(arguments); 5 | 6 | // Send error to notification center with gulp-notify 7 | notify.onError({ 8 | title: "Compile Error", 9 | message: "<%= error.message %>" 10 | }).apply(this, args); 11 | 12 | // Keep gulp from hanging on this task 13 | this.emit('end'); 14 | }; -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | require('./gulp'); -------------------------------------------------------------------------------- /includes/custom_post_types.php: -------------------------------------------------------------------------------- 1 | <?php 2 | 3 | function custom_post_types() { 4 | 5 | work_post(); 6 | } 7 | 8 | function work_post() { 9 | $labels = array( 10 | 'name' => _x( 'Works', 'post type general name' ), 11 | 'singular_name' => _x( 'Work', 'post type singular name' ), 12 | 'add_new' => _x( 'Add Work', 'book' ), 13 | 'add_new_item' => __( 'Add New Work' ), 14 | 'edit_item' => __( 'Edit Work' ), 15 | 'new_item' => __( 'New Work' ), 16 | 'all_items' => __( 'All Works' ), 17 | 'view_item' => __( 'View Work' ), 18 | 'search_items' => __( 'Search Works' ), 19 | 'not_found' => __( 'No work found' ), 20 | 'not_found_in_trash' => __( 'No work found in the Trash' ), 21 | 'parent_item_colon' => '', 22 | 'menu_name' => 'Works' 23 | ); 24 | $args = array( 25 | 'labels' => $labels, 26 | 'description' => 'Work posts', 27 | 'public' => true, 28 | 'menu_position' => 5, 29 | 'supports' => array( 'title'), 30 | 'has_archive' => true, 31 | 'rewrite' => array('slug' => 'diary', 'with_front' => false) // with_front: false overides default permalink /blog 32 | ); 33 | register_post_type( 'Work', $args ); 34 | } -------------------------------------------------------------------------------- /includes/custom_taxonomies.php: -------------------------------------------------------------------------------- 1 | <?php 2 | 3 | function custom_taxonomies() { 4 | 5 | // toto_tax(); 6 | 7 | } 8 | 9 | function toto_tax() { 10 | // register custom taxonomy here 11 | } -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | <?php 2 | 3 | $context = Timber::get_context(); 4 | 5 | $args = array('post_type' => 'work', 'order_by' => 'date'); 6 | $context['works'] = Timber::get_posts($args); 7 | 8 | Timber::render('views/home/home.twig', $context); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bigwheel", 3 | "version": "1.0.0", 4 | "description": "bigwheel + gulp + browserify + babelify", 5 | "main": "gulpfile.js", 6 | "browser": { 7 | "framework": "./assets/js/framework", 8 | "config": "./assets/js/config", 9 | "utils": "./assets/js/utils", 10 | "gsap-splitext": "./assets/js/lib/gsap/src/uncompressed/utils/SplitText.js" 11 | }, 12 | "dependencies": { 13 | "bigwheel": "3.0.0", 14 | "bw-router": "^2.0.5", 15 | "bw-viewmediator": "2.1.0", 16 | "bw-vm": "^2.1.3", 17 | "dom-classes": "npm-dom/dom-classes", 18 | "dom-create-element": "^1.0.2", 19 | "dom-event": "npm-dom/dom-event", 20 | "dom-events": "npm-dom/dom-events", 21 | "dom-select": "npm-dom/dom-select", 22 | "gsap": "1.18.0", 23 | "hammerjs": "^2.0.6", 24 | "hamsterjs": "^1.1.2", 25 | "mo-js": "^0.147.4", 26 | "perfnow": "^0.2.0", 27 | "performance-now": "^0.2.0", 28 | "pixi-svg-graphics": "0.0.2", 29 | "pixi.js": "^3.0.10", 30 | "please-ajax": "^2.0.2", 31 | "prefix": "^0.2.4", 32 | "promise": "7.0.4", 33 | "query-dom-components": "0.0.7", 34 | "raf": "^3.2.0", 35 | "slider-manager": "^1.0.1", 36 | "smooth-scrolling": "^2.1.7", 37 | "three-fx-composer": "0.0.1" 38 | }, 39 | "devDependencies": { 40 | "babel-preset-es2015": "^6.5.0", 41 | "babelify": "^7.2.0", 42 | "browser-sync": "^2.9.3", 43 | "browserify": "^11.1.0", 44 | "connect-history-api-fallback": "^1.1.0", 45 | "es6-promise": "^3.0.2", 46 | "gulp": "^3.8.11", 47 | "gulp-autoprefixer": "^0.0.10", 48 | "gulp-changed": "^1.3.0", 49 | "gulp-concat": "^2.3.5", 50 | "gulp-less": "^3.0.5", 51 | "gulp-minify-css": "^0.3.13", 52 | "gulp-notify": "^2.0.1", 53 | "gulp-rename": "^1.2.2", 54 | "gulp-sourcemaps": "^1.5.2", 55 | "gulp-uglify": "^1.5.1", 56 | "gulp-util": "^3.0.4", 57 | "lodash.assign": "^3.2.0", 58 | "vinyl-buffer": "^1.0.0", 59 | "vinyl-source-stream": "^1.1.0", 60 | "vinyl-transform": "^1.0.0", 61 | "watchify": "^3.6.1" 62 | }, 63 | "browserify": { 64 | "transform": [ 65 | [ 66 | "babelify", 67 | { 68 | "only": "assets/js/", 69 | "presets": [ 70 | "es2015" 71 | ] 72 | } 73 | ] 74 | ] 75 | }, 76 | "scripts": { 77 | "test": "echo \"Error: no test specified\" && exit 1" 78 | }, 79 | "author": "Jam3", 80 | "license": "ISC" 81 | } 82 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suspendedanimations/alisharaf/761367bc2ad8e3faac9b4f385e2b246f6c00155d/screenshot.png -------------------------------------------------------------------------------- /single.php: -------------------------------------------------------------------------------- 1 | <?php 2 | $context = Timber::get_context(); 3 | $context['work'] = new TimberPost(); 4 | 5 | Timber::render('views/single/single.twig', $context); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: Ali Sharaf 3 | Theme URI: 4 | Author: Suspended Animations 5 | Author URI: http://www.sa-studio.fr 6 | Description: 7 | Version: 1.0 8 | Text Domain: 9 | */ -------------------------------------------------------------------------------- /templates/about.php: -------------------------------------------------------------------------------- 1 | <?php 2 | /** 3 | * Template Name: Profile Template 4 | */ 5 | 6 | $context = Timber::get_context(); 7 | $context['post'] = new TimberPost(); 8 | 9 | Timber::render('views/about/about.twig', $context); -------------------------------------------------------------------------------- /templates/contact.php: -------------------------------------------------------------------------------- 1 | <?php 2 | /** 3 | * Template Name: Contact Template 4 | */ 5 | 6 | $context = Timber::get_context(); 7 | 8 | // $args = array('post_type' => 'work', 'order_by' => 'date'); 9 | // $context['works'] = Timber::get_posts($args); 10 | 11 | Timber::render('views/contact/contact.twig', $context); -------------------------------------------------------------------------------- /templates/home.php: -------------------------------------------------------------------------------- 1 | <?php 2 | /** 3 | * Template Name: Home Template 4 | */ 5 | 6 | $context = Timber::get_context(); 7 | 8 | // $args = array('post_type' => 'work', 'order_by' => 'date'); 9 | // $context['works'] = Timber::get_posts($args); 10 | 11 | Timber::render('views/home/home.twig', $context); -------------------------------------------------------------------------------- /views/_base.twig: -------------------------------------------------------------------------------- 1 | {% include '_baseheader.twig' %} 2 | {% block content %} 3 | {% endblock %} 4 | {% include '_basefooter.twig' %} -------------------------------------------------------------------------------- /views/_basefooter.twig: -------------------------------------------------------------------------------- 1 | {% if not isAJAX %} 2 | </div> 3 | <script> 4 | window.APP = window.APP || {}; 5 | APP.VARS = {}; 6 | APP.BASE_URL = '{{ site.url }}'; 7 | APP.THEME_URL = '{{ site.theme.uri }}'; 8 | APP.AJAX_URL = '{{ function('admin_url', 'admin-ajax.php') }}'; 9 | APP.IMAGES = {{ option.images|json_encode() }} 10 | APP.ABOUT = {{ option.profile_images|json_encode() }} 11 | </script> 12 | <script type="text/javascript" src="{{ site.theme.link }}/build/app.js"></script> 13 | {{ wp_footer }} 14 | {% endif %} 15 | </body> 16 | </html> -------------------------------------------------------------------------------- /views/_baseheader.twig: -------------------------------------------------------------------------------- 1 | <!doctype html> 2 | <html lang="en" class="is-preloader{% if iOS %} {{ iOS }}{% endif %}{% if iPad %} ipad{% endif %}"> 3 | <head> 4 | <meta charset="UTF-8"> 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, minimal-ui, shrink-to-fit=no"> 7 | 8 | <meta property="og:type" content="website"> 9 | <meta property="og:title" content="{{ wp_title ? wp_title ~ ' | ' }}{{ site.name }}"> 10 | <meta property="og:site_name" content="{{ site.name }}"> 11 | <meta property="og:url" content="{{ site.link }}"> 12 | <meta property="og:image" content="{{ site.theme.link }}/assets/images/facebook.jpg"> 13 | <meta property="og:image:width" content="450"> 14 | <meta property="og:image:height" content="450"> 15 | <meta property="og:description" content="Awarded Digital Portrait Photographer of the year by Digital Photographer magazine in 2011, Bahraini photographer Ali Sharaf captures fashion through his lens and creates stories with every click."> 16 | 17 | <meta name="twitter:card" content="summary_large_image"> 18 | <meta name="twitter:site" content="@ali_sharaf"> 19 | <meta name="twitter:creator" content="@ali_sharaf"> 20 | <meta name="twitter:title" content="{{ wp_title ? wp_title ~ ' | ' }}{{ site.name }}"> 21 | <meta name="twitter:description" content="Awarded Digital Portrait Photographer of the year by Digital Photographer magazine in 2011, Bahraini photographer Ali Sharaf captures fashion through his lens and creates stories with every click."> 22 | <meta name="twitter:image" content="{{ site.theme.link }}/assets/images/twitter.jpg"> 23 | 24 | <title>{{ wp_title ? wp_title ~ ' | ' }}{{ site.name }} 25 | 26 | 31 | 32 | 33 | 34 | {{ wp_head }} 35 | 36 | 37 | {% if not isAJAX %}
38 | 39 | 40 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |
69 | {% set mask = diary[0] %} 70 | 76 |
77 | Close 78 |
79 |
80 |
81 | {% for post in diary %}{{ post.title }}{% endfor %} 82 |
83 |
84 |
85 |
86 | 91 | 96 | 101 |
102 |
103 |
104 | Diary 105 | Profile 106 | Contact 107 |
108 |
109 |
110 | Menu 111 | 112 |
{% endif %} -------------------------------------------------------------------------------- /views/about/about.twig: -------------------------------------------------------------------------------- 1 | {% extends "_base.twig" %} 2 | 3 | {% block content %} 4 | {% if not isAJAX %}{% endif %} 42 | {% endblock %} -------------------------------------------------------------------------------- /views/contact/contact.twig: -------------------------------------------------------------------------------- 1 | {% extends "_base.twig" %} 2 | 3 | {% block content %} 4 | {% if not isAJAX %}{% endif %} 47 | {% endblock %} -------------------------------------------------------------------------------- /views/home/home.twig: -------------------------------------------------------------------------------- 1 | {% extends "_base.twig" %} 2 | 3 | {% block content %} 4 | {% if not isAJAX %}{% endif %} 15 | {% endblock %} -------------------------------------------------------------------------------- /views/single/single.twig: -------------------------------------------------------------------------------- 1 | {% extends "_base.twig" %} 2 | 3 | {% block content %} 4 | {% if not isAJAX %}{% endif %} 30 | {% endblock %} -------------------------------------------------------------------------------- /wp-config.php: -------------------------------------------------------------------------------- 1 | Fku!Xjz!^3a3 ec0{k1NX#i9A7*cOSZqLc`ZF,#[vYdT0ysS[(54ugv!q&9UnX'); 50 | define('SECURE_AUTH_KEY', '/}zd9L=%i|+=&VUi,N10GO$G=k1LRO(:~T4dj_l6P^}]66?IE)XFx!Jc9#@Vecr2'); 51 | define('LOGGED_IN_KEY', ':#Ynmv(~aS*.D,EBk2WD5j;(:Al7--6.9Rt#kAhT!2mbWTwT6OE6G<`P65]Ncj~J'); 52 | define('NONCE_KEY', 'D/bM@Z^e1|)93|=aMccLx EDU%Y<.oG1LPw.9JeoM+9F*o/@YwTG8@WKH)9{MF)='); 53 | define('AUTH_SALT', '-0z8ooabt^zprBxN1UqnD|7m/OP6-?rRG|3!xpjG$W7d!qfg&ow]5_MQcUgT`znC'); 54 | define('SECURE_AUTH_SALT', 'Arf4ITMkK.J!@^!5M#BMmu,I]v/yuiG}Y=<~/9nU!;av;b>]]0$*'); 55 | define('LOGGED_IN_SALT', 'K[^f{%Z:~4$)}FR0a]Pt+k5]Cdu+vHv|D&t]+u[rCP7 |Dss);?oCk7$~O(z|^Va'); 56 | define('NONCE_SALT', '(z)mvR_1*AS(_Wo/Zxv6{P4vV i*v]M,<}H@88/EEddsP@}BsMtr:pLN#0v?CzON'); 57 | 58 | /**#@-*/ 59 | 60 | /** 61 | * WordPress Database Table prefix. 62 | * 63 | * You can have multiple installations in one database if you give each 64 | * a unique prefix. Only numbers, letters, and underscores please! 65 | */ 66 | $table_prefix = 'wp_'; 67 | 68 | /** 69 | * For developers: WordPress debugging mode. 70 | * 71 | * Change this to true to enable the display of notices during development. 72 | * It is strongly recommended that plugin and theme developers use WP_DEBUG 73 | * in their development environments. 74 | * 75 | * For information on other constants that can be used for debugging, 76 | * visit the Codex. 77 | * 78 | * @link https://codex.wordpress.org/Debugging_in_WordPress 79 | */ 80 | define('WP_DEBUG', false); 81 | 82 | /* That's all, stop editing! Happy blogging. */ 83 | 84 | /** Absolute path to the WordPress directory. */ 85 | if ( !defined('ABSPATH') ) 86 | define('ABSPATH', dirname(__FILE__) . '/'); 87 | 88 | /** Sets up WordPress vars and included files. */ 89 | require_once(ABSPATH . 'wp-settings.php'); 90 | --------------------------------------------------------------------------------