Massive overhaul on entire site

.eslintrc

@@ -10,7 +10,8 @@
   "env": {
     "mocha": true,
     "node": true,
-    "es6": true
+    "es6": true,
+    "browser": true
   },
   "rules": {
     "require-await": 0,

.gitignore

@@ -63,3 +63,4 @@ typings/
 public/main.css
 public/main.css.map
 public/main.js
+*.mov

app/footer.js

@@ -0,0 +1,29 @@
+const m = require('mithril')
+
+const Footer = {
+  oninit: function() {
+  },
+
+  view: function() {
+    return [
+      m('div.innerbox', [
+        m('div.image'),
+        m('aside', [
+          m('h3', 'Hafðu samband'),
+          m('p', `
+            Sendu okkur email og lýstu þínum þörfum og við munum koma til móts
+            við þín. Við erum ekki feimnir og höfum alltaf gaman að því að
+            hefja nýja vináttusambönd við alla okkar viðskiptavini.
+          `),
+          m('h5', 'nfp@nfp.is'),
+        ]),
+      ]),
+    ]
+  },
+}
+
+/*
+ <a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by pikisuperstar - www.freepik.com</a> 
+*/
+
+module.exports = Footer

app/front/index.js

@@ -1,50 +1,247 @@
 const m = require('mithril')
+const Helper = require('../helper')
 
 const Front = {
-  view: function() {
+  oninit: function(vnode) {
+    Helper.init(vnode, 'frontpage', {
+      ratio: 0.85,
+    })
+  },
+
+  view: function(vnode) {
     return [
-      m('header', m('h1', 'NFP ehf.')),
+      m('header', {
+        oncreate: function(subnode) {
+          vnode.state.domContainer = subnode.dom
+          Helper.checkCreated(vnode)
+          Helper.scrollAddItem(vnode, {
+            dom: subnode.dom,
+            className: 'visible',
+          })
+        },
+      }, m('div.container', [
+          m('video', {
+              oncreate: function(subnode) {
+                vnode.state.domVideo = subnode.dom
+                Helper.checkCreated(vnode)
+              },
+              preload: 'none',
+              loop: true,
+              muted: true,
+              playsinline: true,
+            }, [
+              m('source', {
+                src: vnode.state.videoUrl,
+                type: 'video/mp4',
+              }),
+              m('source', {
+                src: '/assets/cover/frontpage.webm',
+                type: 'video/webm',
+              }),
+            ]
+          ),
+          m('div',
+            m('img', {
+              oncreate: function(subnode) {
+                vnode.state.domImg = subnode.dom
+                Helper.lazyLoadImage(vnode, 'domImg', '/assets/cover/frontpage.jpg')
+                Helper.checkCreated(vnode)
+              },
+              src: 'data:image/jpeg;base64,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',
+            })
+          ),
+          m('nav', [
+            m(m.route.Link, { class: 'title', href: '/' }, m('span', 'NFP ehf.')),
+            m('div.filler'),
+            m(m.route.Link, { href: '/hosting-solutions' }, [ 'Hýsingarlausnir', m('div') ]),
+            m(m.route.Link, { href: '/programming-solutions' }, [ 'Forritunarlausnir', m('div') ]),
+            m(m.route.Link, { href: '/video-solutions' }, [ 'Videólausnir', m('div') ]),
+          ]),
+          m('div.content', [
+            m('h1', 'Næsta kynslóð'),
+            m('h2', 'með nútíma lausnir!'),
+          ]),
+        ])
+      ),
       m('main', [
-        m('section',
+        // Solutions
-          m('p', `
+        m('article.solution', [
-            Software development, video production,
+          m('h3', [
-            live streaming, software operations
+            'Við erum með lausnina',
-            or whatever your needs may be, NFP ehf.
+            m('div.left'),
-            has the resource and technical knowledge
+            m('div.right'),
-            to approach any and all needs.
+          ]),
-          `)
-        ),
-        m('aside',
-          m('span', 'Contact us'),
-          m('h3', 'nfp@nfp.is')
-        ),
           m('section', [
-          m('h5', 'Sample of our clients'),
+            m('aside', [
-          m('div.clients', [
+              m('div.item', {
-            m('a.client.stjornarrad', {
+                oncreate: function(subnode) {
-              href: 'https://www.stjornarradid.is/',
+                  Helper.scrollAddItem(vnode, {
-              target: '_blank',
+                    dom: subnode.dom,
-            }, 'Stjórnarráðið'),
+                    className: 'visible',
-            m('a.client.aranja', {
+                    threshold: -100,
-              href: 'https://aranja.com/',
+                  })
-              target: '_blank',
+                },
-            }, 'Aranja'),
+              }, [
-            m('a.client.jokula', {
+                m('h5', 'Þínar þarfir'),
-              href: 'http://jokula.is/',
+                m('p', `
-              target: '_blank',
+                  Hvað svo sem þarfir þínar kunna að vera, að þá munt
-            }, 'Jokula'),
+                  komast í samband við lið sem hefur tugi ára reynslu
-            m('a.client.filadelfia', {
+                  í að vinna með fólki og leysa vandamál. Við erum
-              href: 'http://filadelfia.is/',
+                  stoltir að koma alltaf með einfalda lausn en líka
-              target: '_blank',
+                  ódýra, allt til að mæta hverjum og einum og þeirra
-            }, 'Filadelfia'),
+                  þarfir.
+                `),
+              ]),
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h5', 'Okkar lausnir'),
+                m('p', `
+                  Hvort heldur sem þú ert að leitast eftir hugbúnað,
+                  hýsingu, vefsíðu eða forritunarlausnum að þá erum
+                  við fjölhæfir og alltaf tilbúnir til leiks. Við
+                  elskum að taka að okkur krefjandi verkefni.
+                `),
+              ]),
+            ]),
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                })
+              },
+              style: {
+                backgroundImage: 'url("/assets/images/solutions.svg")',
+              },
+            }),
+          ]),
+        ]),
+        // Solutions
+        m('article.hosting', [
+          m('section', [
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Hýsingarlausnir sniðnar að þínum þörfum'),
+                m('p', `
+                  Hvort heldur sem þig vantar vefsíðuhýsingu,
+                  sýndarvélar, gagnageymslu eða einhvers konar vennsl
+                  á myndagögnum, að þá getum við fundið lausn sem
+                  hentar þér.
+                `),
+                m(m.route.Link, { class: 'next', href: '/hosting-solutions' }, 'Lesa meira'),
+              ]),
+            ]),
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                })
+              },
+              style: {
+                backgroundImage: 'url("/assets/images/hosting.svg")',
+              },
+            }),
+          ]),
+        ]),
+        // Programming
+        m('article.programming', [
+          m('section', [
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Forritunarlausnir'),
+                m('p', `
+                  Við höfum með okkur yfir 20 ára reynslu í forritun og
+                  hugbúnaðargerð. Ef þig vantar sérlausn eða aðstoð með
+                  þín verkefni að þá getum við hjálpað þér að leysa úr því.
+                `),
+                m(m.route.Link, { class: 'next', href: '/programming-solutions' }, 'Lesa meira'),
+              ]),
+            ]),
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                })
+              },
+              style: {
+                backgroundImage: 'url("/assets/images/programming.svg")',
+              },
+            }),
+          ]),
+        ]),
+        // Programming
+        m('article.video', [
+          m('section', [
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Streymi og vídeólausnir'),
+                m('p', `
+                  Það skiptir engu þó þú sért með þúsund manna
+                  ráðstefnur eða litla hádegisfundi í fundarsölum.
+                  Það getur alltaf borgað sig að bjóða upp á streymi
+                  fyrir þá sem ekki geta komist. Við höfum mörg ára
+                  reynslu í því og getum unnið í hvaða sal sem er.
+                `),
+                m(m.route.Link, { class: 'next', href: '/video-solutions' }, 'Lesa meira'),
+              ]),
+            ]),
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                })
+              },
+              style: {
+                backgroundImage: 'url("/assets/images/video.svg")',
+              },
+            }),
           ]),
         ]),
-        m('footer',
-          m('span', m.trust('Copyright © 2018 NFP ehf. :: Kennitala: 250689-2849 :: 0133-26-011111')),
-        ),
       ]),
     ]
   },
 }
 
+/*
+<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by macrovector - www.freepik.com</a>
+*/
+
 module.exports = Front

app/helper.js

@@ -0,0 +1,219 @@
+const Helper = {
+  init: function(vnode, filename, options) {
+    vnode.state.domImg = null
+    vnode.state.domVideo = null
+    vnode.state.domContainer = null
+
+    vnode.state.videoShow = false
+    vnode.state.videoFilename = filename
+    vnode.state.resizePauseTimeout = null
+    vnode.state.resizeTimeout = null
+    vnode.state.videoResizeThrottler = Helper.resizeThrottler.bind(vnode.state, vnode)
+    vnode.state.scrollListener = null
+    vnode.state.scrollListenerTicking = false
+    vnode.state.scrollListenerWaiting = []
+    vnode.state.videoVisibilityHidden = ''
+    vnode.state.videoVisibilityEvent = null
+    vnode.state.videoVisibilityChanged = null
+    vnode.state.videoResizeRatio = options && options.ratio || 1
+    vnode.state.videoUrl = screen.width > 1280
+      ? '/assets/cover/' + filename + '_1080.mp4'
+      : '/assets/cover/' + filename + '_720.mp4'
+  },
+
+  clear: function(vnode) {
+    vnode.state.scrollListenerWaiting.splice(0, vnode.state.scrollListenerWaiting.length)
+    window.removeEventListener('resize', vnode.state.videoResizeThrottler)
+    window.removeEventListener('scroll', vnode.state.scrollListener, false)
+    window.removeEventListener(vnode.state.videoVisibilityEvent, vnode.state.videoVisibilityChanged)
+  },
+
+  scrollListener: function(vnode) {
+    if (!vnode.state.scrollListenerWaiting.length) return
+    
+    let scrollTop = window.pageYOffset
+    let height = window.innerHeight
+
+    for (var i = 0; i < vnode.state.scrollListenerWaiting.length; i++) {
+      Helper.scrollItemIsVisible(vnode, vnode.state.scrollListenerWaiting[i], scrollTop, height)
+    }
+  },
+
+  scrollCheckEmpty: function(vnode) {
+    if (vnode.state.scrollListenerWaiting.length) return
+
+    vnode.state.scrollListener = null
+    window.removeEventListener('scroll', vnode.state.scrollListener, false)
+  },
+
+  scrollAddItem: function(vnode, options) {
+    let bound = options.dom.getBoundingClientRect()
+    let scrollTop = window.pageYOffset
+
+    let item = {
+      dom: options.dom,
+      threshold: options.threshold || 100,
+      top: Math.round(bound.top) + Math.round(scrollTop),
+      className: ' ' + options.className,
+      ticking: false,
+    }
+
+    vnode.state.scrollListenerWaiting.push(item)
+
+    if (!vnode.state.scrollListener) {
+      vnode.state.scrollListener = Helper.scrollListener.bind(vnode.state, vnode)
+      window.addEventListener('scroll', vnode.state.scrollListener, false)
+    }
+    Helper.scrollItemIsVisible(vnode, item, window.pageYOffset, window.innerHeight)
+  },
+
+  scrollResetBound: function(vnode) {
+    let scrollTop = window.pageYOffset
+
+    vnode.state.scrollListenerWaiting.forEach(function (item) {
+      let bound = item.dom.getBoundingClientRect()
+      item.top = Math.round(bound.top) + Math.round(scrollTop)
+    })
+  },
+
+  scrollItemIsVisible: function(vnode, item, scrollTop, height) {
+    if (item.ticking) return
+
+    if (item.top - item.threshold < scrollTop + height) {
+      item.ticking = true
+
+      requestAnimationFrame(function() {
+        item.dom.className += item.className
+        let index = vnode.state.scrollListenerWaiting.indexOf(item)
+
+        if (index >= 0) {
+          vnode.state.scrollListenerWaiting.splice(index, 1)
+        }
+        Helper.scrollCheckEmpty(vnode)
+      })
+    }
+  },
+
+  checkCreated: function(vnode) {
+    if (!vnode.state.domImg || !vnode.state.domVideo || !vnode.state.domContainer) return
+
+    vnode.state.videoShow = Boolean(vnode.state.domVideo.play)
+
+    window.addEventListener('resize', vnode.state.videoResizeThrottler, false)
+
+    Helper.resizeHandler(vnode)
+    if (vnode.state.videoShow) {
+      vnode.state.domVideo.play()
+
+      if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support 
+        vnode.state.videoVisibilityHidden = 'hidden'
+        vnode.state.videoVisibilityEvent = 'visibilitychange'
+      } else if (typeof document.msHidden !== 'undefined') {
+        vnode.state.videoVisibilityHidden = 'msHidden'
+        vnode.state.videoVisibilityEvent = 'msvisibilitychange'
+      } else if (typeof document.webkitHidden !== 'undefined') {
+        vnode.state.videoVisibilityHidden = 'webkitHidden'
+        vnode.state.videoVisibilityEvent = 'webkitvisibilitychange'
+      }
+
+      if (vnode.state.videoVisibilityHidden && vnode.state.videoVisibilityEvent) {
+        vnode.state.videoVisibilityChanged = Helper.visibilityChanged.bind(this, vnode)
+
+        document.addEventListener(vnode.state.videoVisibilityEvent, vnode.state.videoVisibilityChanged, false)
+      }
+    }
+  },
+
+  visibilityChanged: function(vnode) {
+    if (document[vnode.state.videoVisibilityHidden]) {
+      vnode.state.domVideo.pause()
+    } else {
+      vnode.state.domVideo.play()
+    }
+  },
+
+  resizeThrottler: function(vnode) {
+    if (vnode.state.videoShow) {
+      if (!vnode.state.resizePauseTimeout) {
+        vnode.state.domVideo.pause()
+      }
+      clearTimeout(vnode.state.resizePauseTimeout)
+      vnode.state.resizePauseTimeout = setTimeout(function () {
+        vnode.state.resizePauseTimeout = null
+
+        requestAnimationFrame(function() {
+          Helper.scrollResetBound(vnode)
+          vnode.state.domVideo.play()
+        })
+      }, 250)
+    }
+
+    if (!vnode.state.resizeTimeout) {
+      vnode.state.resizeTimeout = setTimeout(function () {
+        vnode.state.resizeTimeout = null
+        Helper.resizeHandler(vnode)
+      }, 66)
+    }
+  },
+
+  resizeHandler: function(vnode) {
+    var height = Helper.getHeight(vnode)
+    var width = document.documentElement.clientWidth
+
+    Helper.scaleContainer(vnode, height)
+    Helper.scaleContainerContent(vnode, 'domImg', true, width, height)
+    Helper.scaleContainerContent(vnode, 'domVideo', false, width, height)
+  },
+
+  lazyLoadImage: function(vnode, name, url) {
+    if (!vnode.state[name]) return
+
+    var img = document.createElement('img')
+    img.onload = function() {
+      vnode.state[name].src = url
+    }
+    img.src = url
+  },
+
+  scaleContainer: function(vnode, height) {
+    if (!vnode.state.domContainer) return
+    vnode.state.domContainer.setAttribute('style', 'height: ' + height + 'px;')
+  },
+
+  scaleContainerContent: function(vnode, name, forceHeight, width, height) {
+    if (!vnode.state[name]) return
+
+    var videoRatio = 0.5625
+    var windowRatio = height / width
+
+    if (windowRatio > videoRatio) {
+      var videoWidth = height / videoRatio
+      var marginFromLeft = -(videoWidth - width) / 2 + 'px'
+        vnode.state[name].setAttribute('style',
+            'margin-top: 0; margin-left: ' + marginFromLeft + ';' +
+            'width: ' + videoWidth + 'px; height: ' + height + 'px')
+    } else {
+        if (forceHeight) {
+            vnode.state[name].setAttribute('style',
+                'width: ' + width + 'px; height: ' + height + 'px')
+        } else {
+            vnode.state[name].setAttribute('style',
+                'width: ' + width + 'px;')
+        }
+    }
+  },
+
+  getHeight: function(vnode) {
+    var height = document.documentElement.clientHeight + 5
+    if (height < 485) {
+        height = 485
+    } else {
+      height = height * vnode.state.videoResizeRatio
+    }
+    return height
+  },
+}
+
+window.helper = Helper
+
+module.exports = Helper

app/hosting/index.js

@@ -0,0 +1,212 @@
+const m = require('mithril')
+const Helper = require('../helper')
+
+const Hosting = {
+  oninit: function(vnode) {
+    Helper.init(vnode, 'hosting')
+  },
+
+  onremove: function(vnode) {
+    Helper.clear(vnode)
+  },
+
+  view: function(vnode) {
+    return [
+      m('header.hosting', {
+        oncreate: function(subnode) {
+          vnode.state.domContainer = subnode.dom
+          Helper.checkCreated(vnode)
+          Helper.scrollAddItem(vnode, {
+            dom: subnode.dom,
+            className: 'visible',
+          })
+        },
+      }, m('div.container', [
+          m('video', {
+              oncreate: function(subnode) {
+                vnode.state.domVideo = subnode.dom
+                Helper.checkCreated(vnode)
+              },
+              preload: 'none',
+              loop: true,
+              muted: true,
+              playsinline: true,
+            }, [
+              m('source', {
+                src: vnode.state.videoUrl,
+                type: 'video/mp4',
+              }),
+              m('source', {
+                src: '/assets/cover/hosting.webm',
+                type: 'video/webm',
+              }),
+            ]
+          ),
+          m('div',
+            m('img', {
+              oncreate: function(subnode) {
+                vnode.state.domImg = subnode.dom
+                Helper.lazyLoadImage(vnode, 'domImg', '/assets/cover/hosting.jpg')
+                Helper.checkCreated(vnode)
+              },
+              src: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCABaAKADASIAAhEBAxEB/8QAGgAAAwEBAQEAAAAAAAAAAAAAAQIDAAQFBv/EABcBAQEBAQAAAAAAAAAAAAAAAAEAAgP/2gAMAwEAAhADEAAAAfisu652ITFMJkZ5vRZXzRl0L0OdOmc8y1nmutJtHFctzBsVtFkoYmgpWfSeLxpsnSIyaFhWOXqRxm5g0mLo2HEGARqGAr0GiylNNKqobSZB6TNtE+e8am2cUJKJmBDbZexpmih2gBhU0pOqmTZRNptWibplyoihkIrIIVzPc+l25h1x0rz5qxyCzyfDkKJQA406jIQ5WIZSttiy5NTBcRQoT0lUlV0D/8QAHRAAAgMBAQEBAQAAAAAAAAAAAAEQESACMRJBMP/aAAgBAQABBQKy82fvPh0VLEIYznbF7z4OKGhwhjFNlyzn3mHhn6joYi4ssuV7zDw45GP+PPqhllw45GMZe16oeuRsYxZss5FD0hwxFFFFFFCFtilizRQ82WNjFLiyyyz6PoubLLwpYoQ5YtWXCliwoYpelLP/xAAaEQACAwEBAAAAAAAAAAAAAAABEQAQIDBA/9oACAEDAQE/AbVv0vTyjAC6Ii7f/8QAHREAAwEBAQADAQAAAAAAAAAAAAEREBICEyAhMf/aAAgBAgEBPwH8JnWIhBeof3KzoueVRqDYspS6nBu4oMXg+M4H5mcnJzkLDo6G1MXo6LlyE+lLv//EABQQAQAAAAAAAAAAAAAAAAAAAHD/2gAIAQEABj8CcP/EABsQAQEBAQEBAQEAAAAAAAAAAAEAERAhIDFB/9oACAEBAAE/ISepLObM3qExJ4HsPPjb8bxfNMngMft+PibD02ez8d7bL2/PT9cb8BZeS8hnxnn+347jjHwSy+Sj8tnHBZX9l53/AFwNpbx7Py2dtsstsuC4UsMsMxi9l5bK22WeOU8ifMRhGMOMvLZ9sskk4cs8HOBZtlixDGGGG0kSODlb1vHq89memG2Zq1bLPG2ylLLrOP1HG23hiy+R+Dx+o+z83//aAAwDAQACAAMAAAAQQxMUBpQhhWsZvsfymwhtADDvcnRC6d2P9ahJ5zPOwQHzNBJeJ9ae+/zQ637l/8QAGhEAAwEBAQEAAAAAAAAAAAAAAAERECEgMf/aAAgBAwEBPxDpfBuCFIfBKeWLolrqKyl2Y8bxUJrKirVOtHYNglWNbylkyeYTf//EABoRAQEBAQEBAQAAAAAAAAAAAAEAESEQMUH/2gAIAQIBAT8Q24/J58lfPAJO5zJxMBiBXT43BI8bjl1JkcQMsWnn4Jfpvt27YXkqbfEqTwJtygg1tl2wbG5sCd4yPDuzHwdY6nEngypUtrf/xAAbEAEBAQEBAQEBAAAAAAAAAAABABEhEDFBIP/aAAgBAQABPxBCQOwrGJ5ckX7ATl8JLXxU8jw5ehWcjL8nZWy8uU9N8I+2ZDF44+79w0uGcfviqOLOyM8PmfMPZz150mZ46od8KDYyTuMEdXG0L53D6pjcSly2vnz8eDu3l3ZeS74JNJyx50J147ep0Q43EAwn2W+WM7CbIycy5nBF2j+AkbcbhC2d8E/JNllk2TLS8keI9Byu3K4Slbvg3bM8V2fJuvgIIO363Hjp66JdMsHwCM5bCEHG4XSH9uXqQQ+TxL4CzhjC6TF5kp+w74eEPJjfg5zxPl4XazOy1jUlQ8ly2VmTPo+19JIXx4Pfz7PiPD6+h6//2Q==',
+            })
+          ),
+          m('nav', [
+            m(m.route.Link, { class: 'title', href: '/' }, m('span', 'NFP ehf.')),
+            m('div.filler'),
+            m(m.route.Link, { class: 'active', href: '/hosting-solutions' }, [ 'Hýsingarlausnir', m('div') ]),
+            m(m.route.Link, { href: '/programming-solutions' }, [ 'Forritunarlausnir', m('div') ]),
+            m(m.route.Link, { href: '/video-solutions' }, [ 'Videólausnir', m('div') ]),
+          ]),
+          m('div.content', [
+            m('h1', 'Hýsingar sem þú getur treyst'),
+            m('h2', 'Sýndarvélar, Wordpress, geymsluhýsing, og hvað eina!'),
+          ]),
+        ])
+      ),
+      m('main', [
+        // Solutions
+        m('article.hostintro', [
+          m('section', [
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                })
+              },
+              style: {
+                backgroundImage: 'url("/assets/images/hostintro.svg")',
+              },
+            }),
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Vefhýsing'),
+                m('p', `
+                  Við höfum boðið okkar viðskiptavinum upp á
+                  margskonar lausnir þegar kemur að hýsa þeirra vefi.
+                  Meðal þess sem við höfum reynslu af er bæði að
+                  setja upp sýndarvélar sem þú getur haft fulla umsjá
+                  með og gert hvað svo sem þig lystir með en við
+                  einnig sérhæfum okkur í að bjóða upp á lausnir
+                  þar sem við setjum allt upp og sjáum um allan umsjá
+                  og leyft þér að hafa athyglina frekar á þín málefni.
+                `),
+                m('p', `
+                  Ef þig vantar Wordpress/PHP uppsetningu eða
+                  kannski ert með sérhæfari síðu og vilt nota
+                  docker eða node að þá skiptir það okkur ekki
+                  neinu máli. Okkar kerfi geta séð um að mæta þínum
+                  þörfum.
+                `),
+              ]),
+            ]),
+          ]),
+        ]),
+        m('article.hoststorage', [
+          m('section', [
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                })
+              },
+              style: {
+                backgroundImage: 'url("/assets/images/hostfile.svg")',
+              },
+            }),
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Gagnageymslur og myndavennsl'),
+                m('p', `
+                  Að vera með örugga geymslu fyrir gögn getur verið mjög
+                  mikilvægt fyrir fyrirtæki. NFP ehf. hefur boðið upp á
+                  stórar gagnageymslur á okkar vélbúnaði fyrir fyrirtæki
+                  til að geyma sín afrit eða vinnlugögn sem þeirra
+                  starfsmanna þurfa hafa aðgang að og vinna með hvar
+                  svo sem þeir eru staddir í heiminum.
+                `),
+                m('p', `
+                  Við höfum líka haft góða reynslu að sjá um vinnslu og
+                  hýsingu á myndum og þess háttar og séð um öll vennsl
+                  sem krafist er til þeirra. Hvort heldur sem það er að
+                  enkóða vídeó fæla eða ljósmyndir í mismunandi upplausnum
+                  fyrir vefsíðubirtingar hvað svo sem þarf að gera.
+                `),
+              ]),
+            ]),
+          ]),
+        ]),
+        m('article.hostmanaged', [
+          m('section', [
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                })
+              },
+              style: {
+                backgroundImage: 'url("/assets/images/hostmanaged.svg")',
+              },
+            }),
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Láttu okkur sjá um viðhaldið'),
+                m('p', `
+                  Það getur reynst kúnst að viðhalda sýndarvélum og
+                  heimasíðum. Það er alls ekki fyrir alla að gera
+                  Wordpress uppfærslur eða gera prófanir á öryggisafrit
+                  og að þau séu að afritast rétt.
+                `),
+                m('p', `
+                  Viðhald á búnaði ætti alls ekki að vera eitthvað sem
+                  allir kunna. Þess vegna höfum við boðið upp á þann
+                  valkost að sjá um allt svoleiðis eftir aðstæðum fyrir
+                  þá sem vilja eignast þann kost. Við gerum reglulegar
+                  uppfærslur og fylgjumst með netheiminum og því sem
+                  er að gerast þar.
+                `),
+              ]),
+            ]),
+          ]),
+        ]),
+      ]),
+    ]
+  },
+}
+
+/*
+<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by macrovector - www.freepik.com</a>
+*/
+
+module.exports = Hosting

app/main.js

@@ -13,6 +13,30 @@
 window.components = {}
 
 const m = require('mithril')
-const Front = require('./front')
 
-m.mount(document.getElementById('container'), Front)
+m.route.setOrig = m.route.set
+m.route.set = function(path, data, options){
+  m.route.setOrig(path, data, options)
+  window.scrollTo(0, 0)
+}
+
+m.route.linkOrig = m.route.link
+m.route.link = function(vnode){
+  m.route.linkOrig(vnode)
+  window.scrollTo(0, 0)
+}
+
+const Front = require('./front')
+const Hosting = require('./hosting')
+const Programming = require('./programming')
+const Streaming = require('./streaming')
+const Footer = require('./footer')
+
+m.route.prefix = ''
+m.route(document.getElementById('container'), '/', {
+  '/': Front,
+  '/hosting-solutions': Hosting,
+  '/programming-solutions': Programming,
+  '/video-solutions': Streaming,
+})
+m.mount(document.getElementById('footer'), Footer)

app/programming/index.js

@@ -0,0 +1,206 @@
+const m = require('mithril')
+const Helper = require('../helper')
+
+const Programming = {
+  oninit: function(vnode) {
+    Helper.init(vnode, 'programming')
+  },
+
+  onremove: function(vnode) {
+    Helper.clear(vnode)
+  },
+
+  view: function(vnode) {
+    return [
+      m('header.programming', {
+        oncreate: function(subnode) {
+          vnode.state.domContainer = subnode.dom
+          Helper.checkCreated(vnode)
+          Helper.scrollAddItem(vnode, {
+            dom: subnode.dom,
+            className: 'visible',
+          })
+        },
+      }, m('div.container', [
+          m('video', {
+              oncreate: function(subnode) {
+                vnode.state.domVideo = subnode.dom
+                Helper.checkCreated(vnode)
+              },
+              preload: 'none',
+              loop: true,
+              muted: true,
+              playsinline: true,
+            }, [
+              m('source', {
+                src: vnode.state.videoUrl,
+                type: 'video/mp4',
+              }),
+              m('source', {
+                src: '/assets/cover/programming.webm',
+                type: 'video/webm',
+              }),
+            ]
+          ),
+          m('div',
+            m('img', {
+              oncreate: function(subnode) {
+                vnode.state.domImg = subnode.dom
+                Helper.lazyLoadImage(vnode, 'domImg', '/assets/cover/programming.jpg')
+                Helper.checkCreated(vnode)
+              },
+              src: ' data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wgARCABaAKADASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAQIDAAQF/8QAFwEBAQEBAAAAAAAAAAAAAAAAAQACA//aAAwDAQACEAMQAAAB8adF6cJioGIqprZ2RWdHICE0FoBe/PXXNpOqQleOO3YCmuZyGXA0F50gqyICGNYOsEgpObzztZUnnp1HDfPBhSYqaLzeHDFyuc0qNKnE0NUmozsqcPVhPfOw58NxHTXSNdTSOudMi00gpoqQaG2HY6qCra5846lnnFgMxUUrYVRAKzK7bNnKFtShsVWiUrkKKApqtefocvLoVxzC6G5CoGaXgKhBno4XT//EABsQAAMBAQEBAQAAAAAAAAAAAAABERAgMBIC/9oACAEBAAEFAnkITqlHixof5GvN8TaUfcITiE4ePKPaUomXwePxXVPo+hsvknkyD8aUvCFtGy+DKUpcQtflCEIQmXqEIQhMhCE2HzyvC9JHyP8AJCEJtKUvaPzr5fP/xAAaEQADAAMBAAAAAAAAAAAAAAAAAREQEiAC/9oACAEDAQE/AUUpS4oxU88PlC4eKI1EsQ1NSEIJcU2KXLKXEz6EylEQh//EABkRAAIDAQAAAAAAAAAAAAAAAAARASAwEP/aAAgBAgEBPwG8cnKcGPrGO6EIWUUkYz//xAAUEAEAAAAAAAAAAAAAAAAAAABw/9oACAEBAAY/AnD/xAAcEAEBAQEBAQADAAAAAAAAAAABABEQICEwMUH/2gAIAQEAAT8hWyeFkFkFudvqD7OPAKT4SyILISQWcBDnLXLZPMsmEJk2RwyDrZTwrbeWnKxeDxifdnHgemz5CXxlknN8DODJZPneuLS+Xzwb0M2fLLyGyl8t4pss9Jw+cZkQbZeB6AwNjm1mWX3asT8LZY4GZ4ZFI4PN4JLnnDhx8H8np4/rl8f/2gAMAwEAAgADAAAAEBr/AJK106M1iZzHPUQsF7qTyBHmplEJPpqBT2lWE8Kfxs8s7ywQsqGwhiTaN5D/xAAbEQEBAQEBAAMAAAAAAAAAAAABABEQITFRYf/aAAgBAwEBPxBZCiMNWHB+rCSxtljajZ2Gb4djEHoDAYSI1yR8zDUJAW23mKX92jAStWoXjPYIZJDhT1g2L//EABkRAQEBAQEBAAAAAAAAAAAAAAEAERAhIP/aAAgBAgEBPxBsLIJL2zhyBNt5GT8PwY5krKlcXPibbLPfU9nssWFhIW2y8IWWXi1av//EAB0QAQEBAQEBAAMBAAAAAAAAAAEAERAhMSBBUWH/2gAIAQEAAT8QSas1/wATi1suQt4mEid8MoBey14Z2LIttJx4Pq+YmBl/OXeDfqQZxObQtb25ARjYgpBBycQkrwfEHYJAJk8S96BWyMdEGC0t9ivEvDOHkJyzMXjIkhlm3rBJ+Q+yeRoxk9jgE3eXK8YHbUqaVIZaQaRC4sfk0q2TtlllggFjktKpiNkZacOIYJq28sssmWPyVatWrcu8R7l4NbTKkbIGxsySG8XrPM6SE6z5tbdtJ4vqDln8FDrhhxvLS+SH6hk7YsD15YXgWCHJhYIWZZvLaVIPkH8hP1A35CRiTJ1aJq5bJl5edl+EFnvOQn2/i//Z',
+            })
+          ),
+          m('nav', [
+            m(m.route.Link, { class: 'title', href: '/' }, m('span', 'NFP ehf.')),
+            m('div.filler'),
+            m(m.route.Link, { href: '/hosting-solutions' }, [ 'Hýsingarlausnir', m('div') ]),
+            m(m.route.Link, { class: 'active', href: '/programming-solutions' }, [ 'Forritunarlausnir', m('div') ]),
+            m(m.route.Link, { href: '/video-solutions' }, [ 'Videólausnir', m('div') ]),
+          ]),
+          m('div.content', [
+            m('h1', 'Sérfræðingar í forritun'),
+            m('h2', 'Meira en 20 ára reynsla!'),
+          ]),
+        ])
+      ),
+      m('main', [
+        // Solutions
+        m('article.programmingintro', [
+          m('section', [
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                })
+              },
+              style: {
+                backgroundImage: 'url("/assets/images/programmingintro.svg")',
+              },
+            }),
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Vefsíðuforritun'),
+                m('p', `
+                  Með margra ára reynslu í forritun og mikla þekkingu þegar
+                  kemur að vefsíðugerð, að þá er ekkert sem hefur stoppað okkur
+                  í að leysa krefjandi verkefni. Hvort heldur sem það er flókin
+                  útfærsla á hönnun og innleiðing þess í HTML/CSS eða setja
+                  upp greiðslugáttir og áskriftaleiðir hjá mismunandi aðilum
+                  að þá erum við sérfræðingar í þeim hlutum.
+                `),
+                m('p', `
+                  Forritunartungumál skipta okkur ekki máli enda er það bara
+                  tól til að vinna með. Hvaða tækni sem þú notar, node eða
+                  python eða C# eða hvað svo sem það er, að þá lætur það ekkert
+                  stoppa okkur.
+                `),
+              ]),
+            ]),
+          ]),
+        ]),
+        m('article.programmingstore', [
+          m('section', [
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                })
+              },
+              style: {
+                backgroundImage: 'url("/assets/images/programmingstore.svg")',
+              },
+            }),
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Sölukerfi og vefverslun'),
+                m('p', `
+                  Okkar mesta stolt var að búa til sölukerfi frá grunni í
+                  síðuformi, byggt frá grunni til að vera einföld í notkun
+                  og henta lítil fyrirtæki. Sölukerfið býður upp á pantana-
+                  og birgðakerfi sem og vefverslunarframenda. Allt kerfið er
+                  svo hægt að fá í einum pakka, með eða án posa og tilbúið til
+                  notkunar.
+                `),
+                m('p', `
+                  Við höfum einnig breytt vefverslunarframendanum til að passa
+                  fyrir hvert fyrirtæki og þeirra vörumerki. Við vinnum með
+                  hverjum og einum og pössum upp á að skilja aldrei frá hlutum
+                  fyrr en allir eru sáttir.
+                `),
+              ]),
+            ]),
+          ]),
+        ]),
+        m('article.programmingcontracting', [
+          m('section', [
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                })
+              },
+              style: {
+                backgroundImage: 'url("/assets/images/programmingcontractor.svg")',
+              },
+            }),
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Verktakavinna heim til þín'),
+                m('p', `
+                  Ef það er tímapressa hjá þér, að þá erum við alltaf tilbúnir
+                  að koma beint inn í hús til ykkar og vinna verktakavinnu
+                  á ykkar vinnustað. Við vinnum alltaf með ykkar fólki og
+                  getum aðlagast hvaða vinnureglum sem er.
+                `),
+                m('p', `
+                  Okkar fólk hefur verið vel tekið hvert sem við förum og
+                  höfum alltaf skilið hlutum frá okkur í tilbúnu formi.
+                  Hverjar svo sem sem vandamálin kunna að liggja að þá geturðu
+                  treyst því að við munum finna lausn saman og redda málunum.
+                `),
+              ]),
+            ]),
+          ]),
+        ]),
+      ]),
+    ]
+  },
+}
+
+/*
+<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by macrovector - www.freepik.com</a>
+*/
+
+module.exports = Programming

app/streaming/index.js

@@ -0,0 +1,119 @@
+const m = require('mithril')
+const Helper = require('../helper')
+
+const Streaming = {
+  oninit: function(vnode) {
+    Helper.init(vnode, 'streaming')
+  },
+
+  onremove: function(vnode) {
+    Helper.clear(vnode)
+  },
+
+  view: function(vnode) {
+    return [
+      m('header.streaming', {
+        oncreate: function(subnode) {
+          vnode.state.domContainer = subnode.dom
+          Helper.checkCreated(vnode)
+          Helper.scrollAddItem(vnode, {
+            dom: subnode.dom,
+            className: 'visible',
+          })
+        },
+      }, m('div.container', [
+          m('video', {
+              oncreate: function(subnode) {
+                vnode.state.domVideo = subnode.dom
+                Helper.checkCreated(vnode)
+              },
+              preload: 'none',
+              loop: true,
+              muted: true,
+              playsinline: true,
+            }, [
+              m('source', {
+                src: vnode.state.videoUrl,
+                type: 'video/mp4',
+              }),
+              m('source', {
+                src: '/assets/cover/streaming.webm',
+                type: 'video/webm',
+              }),
+            ]
+          ),
+          m('div',
+            m('img', {
+              oncreate: function(subnode) {
+                vnode.state.domImg = subnode.dom
+                Helper.lazyLoadImage(vnode, 'domImg', '/assets/cover/streaming.jpg')
+                Helper.checkCreated(vnode)
+              },
+              src: ' data:image/jpeg;base64,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',
+            })
+          ),
+          m('nav', [
+            m(m.route.Link, { class: 'title', href: '/' }, m('span', 'NFP ehf.')),
+            m('div.filler'),
+            m(m.route.Link, { href: '/hosting-solutions' }, [ 'Hýsingarlausnir', m('div') ]),
+            m(m.route.Link, { href: '/programming-solutions' }, [ 'Forritunarlausnir', m('div') ]),
+            m(m.route.Link, { class: 'active', href: '/video-solutions' }, [ 'Videólausnir', m('div') ]),
+          ]),
+          m('div.content', [
+            m('h1', 'Ráðstefnur og fundir'),
+            m('h2', 'Streymi- og vídeóupptökulausnir!'),
+          ]),
+        ])
+      ),
+      m('main', [
+        // Solutions
+        m('article.hostintro', [
+          m('section', [
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                })
+              },
+              style: {
+                backgroundImage: 'url("/assets/images/videoconference.svg")',
+              },
+            }),
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Það er ekkert eins leiðinglegt og að missa af viðburði'),
+                m('p', `
+                  Fyrir þá sem ekki komast eða fyrir þá sem eiga við fötlun að
+                  stríða, getur verið erfitt fyrir þá að komast á fundi eða
+                  viðburði. Þessvegna höfum við boðið upp á fundarstreymi og
+                  ráðstefnustreymi fyrir hvaða viðburð sem er.
+                `),
+                m('p', `
+                  Innifalið er alltaf streymigluggi, upptöku og úrvinnslu
+                  gagna með sundurbrotið vídeó eftir ræðumanni eða umræðuefni,
+                  tilbúið til birtingar á netinu eða henda í youtube.
+                `),
+              ]),
+            ]),
+          ]),
+        ]),
+      ]),
+    ]
+  },
+}
+
+/*
+<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by macrovector - www.freepik.com</a>
+*/
+
+module.exports = Streaming

app/styl/main.styl

@@ -1,14 +1,4 @@
 @require 'reset'
-@require 'fonts'
-
-body {
-  background: #eee;
-  color: black;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  font-family: 'Roboto', sans-serif;
-}
 
 #container {
   flex-grow: 2;
@@ -17,6 +7,215 @@ body {
 }
 
 header {
+  background: #444;
+  position: relative;
+  text-shadow: 0 0 10px black;
+
+  .container {
+    position: relative;
+    bottom: 0%;
+    left: 0%;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background: #000;
+    min-height: 485px;
+    
+    video {
+      width: 100%;
+      position: absolute;
+      z-index: 1;
+      bottom: 0;
+    }
+    
+    img {
+      width: 100%;
+      bottom: 0;
+      position: absolute;
+      z-index: 0;
+      min-height: 485px;
+    }
+  }
+  
+  nav {
+    display: flex;
+    z-index: 6;
+    position: absolute;
+    align-items: center;
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    padding: 10px;
+    
+    .filler {
+      flex: 2 1 auto;
+    }
+    
+    .title {
+      margin: 0 20px 0 50px;
+      height: 70px;
+      display: flex;
+      align-items: center;
+      padding-left: 90px;
+      background: url('./assets/logo_only.svg') no-repeat transparent;
+      background-position: left center;
+      background-size: auto 70px;
+      font-size: 1.6em;
+      color: white;
+      opacity: 0.6;
+    }
+    
+    a {
+      font-size: 1.2em;
+      color: white;
+      text-shadow: 0 0 20px black;
+      padding: 10px 20px;
+      text-decoration: none;
+      opacity: 0.6;
+      transition: opacity 0.5s;
+      position: relative;
+
+      & div {
+        position: absolute;
+        bottom: 0;
+        left: 20px;
+        right: 20px;
+        border-bottom: 2px solid white;
+        transition: transform 0.3s;
+        transform: scaleX(0);
+      }
+      
+      &:hover {
+        opacity: 1;
+        
+        & div {
+          transition: transform 0.7s;
+          transform: scaleX(1);
+        }
+      }
+      
+      &.active {
+        opacity: 1;
+        
+        & div {
+          transform: scaleX(1);
+        }
+      }
+    }
+  }
+  
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 5;
+    position: absolute;
+    top: 0px;
+    left: 0%;
+    height: 100%;
+    width: 100%;
+    min-height: 485px;
+    color: white;
+    text-transform: uppercase;
+    
+    
+    h1 {
+      text-align: center;
+      font-size: 7.3vw;
+      font-weight: bold;
+      padding: 10px;
+      transition: opacity 1s, transform 1s;
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    
+    h2 {
+      text-align: center;
+      font-size: 3vw;
+      transition: opacity 1.2s, transform 1.2s;
+      opacity: 0;
+      transform: translateY(50px);
+    }
+  }
+  
+  &.visible {
+    h1, h2 {
+      opacity: 1;
+      transform: translateY(0px);
+    }
+  }
+  
+  &.hosting {
+    h1 {
+      font-size: 4.8vw;
+      margin-bottom: 10px;
+    }
+    h2 {
+      font-size: 2.5vw;
+    }
+  }
+  
+  &.programming {
+    text-shadow: 0 0 30px black;
+    
+    nav a {
+      background: #0003;
+      border-radius: 20px;
+      box-shadow: 0 0 80px black;
+      text-shadow: 0 0 80px black;
+      opacity: 1;
+      color: #999;
+      transition: opacity 0.5 color 0.5s;
+      
+      &.title {
+        background: url('./assets/logo_only.svg') no-repeat transparent;
+        background-position: left center;
+        background-size: auto 70px;
+        opacity: 0.7;
+        color: white;
+        opacity: 0.6;
+        
+        &:hover {
+          opacity: 1;
+        }
+      }
+      
+      &:hover {
+        color: white;
+      }
+      
+      &.active {
+        color: white;
+      }
+    }
+
+    h1 {
+      font-size: 5.8vw;
+      margin-bottom: 10px;
+    }
+    h2 {
+      font-size: 3.5vw;
+    }
+    
+    h1, h2 {
+    }
+  }
+  
+  &.streaming {
+    text-shadow: 0 0 40px black;
+
+    h1 {
+      font-size: 6.6vw;
+      margin-bottom: 10px;
+    }
+    h2 {
+      font-size: 3vw;
+    }
+  }
+}
+
+/*header {
   margin-top: 4em;
   display: flex;
   flex-direction: column;
@@ -32,31 +231,430 @@ header {
     background-size: contain;
     max-width: 400px;
   }
-}
+}*/
-
-@media only screen and (max-width: 464px) {
-  header {
-    margin-top: 13.8%;
-  }
-}
-
-@media only screen and (min-width: 464px) {
-  header h1 {
-    align-self: center;
-    width: 400px;
-    height: 400px;
-    padding-top: 0;
-  }
-}
 
 main {
   display: flex;
   flex-direction: column;
-  margin-top: 3em;
   flex-grow: 2;
+  color: #333;
 }
 
-section,
+article {
+  display: flex;
+  padding: 0 50px;
+  flex-direction: column;
+  min-height: 82vh;
+  height: 600px;
+  overflow: hidden;
+  
+  h3 {
+    font-size: 2em;
+    padding: 10px 20px 40px;
+    font-weight: bold;
+    text-align: center;
+    position: relative;
+    align-self: center;
+  }
+  
+  section {
+    display: flex;
+    flex: 2 1 auto;
+    justify-content: center;
+
+    aside {
+      flex: 0 1 50%;
+      max-width: 600px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      
+      .item {
+        display: flex;
+        flex-direction: column;
+      }
+
+      p {
+        font-size: 1.2em;
+        line-height: 1.4em;
+        margin-bottom: 50px;
+      }
+      
+      h5 {
+        text-align: center;
+        margin: 20px 10px;
+        font-size: 1.2em;
+        line-height: 1.4em;
+        font-weight: bold;
+        border-bottom: 2px solid #29688c;
+        padding: 10px 50px;
+        align-self: center;
+      }
+      
+      a {
+        text-decoration: none;
+        border: 2px solid #29688c;
+        align-self: center;
+        border-radius: 10px;
+        padding: 10px 30px 12px;
+        color: #29688c;
+        font-weight: bold;
+        font-size: 1.1em;
+      }
+      
+      p, h5, a, h3 {
+        transition: opacity 1.2s, transform 1.2s;
+        opacity: 0;
+        transform: translate(0px, 50px);
+      }
+    }
+    
+    .image {
+      flex: 0 1 50%;
+      max-width: 600px;
+      background-position: center;
+      background-size: 90% auto;
+      background-repeat: no-repeat;
+
+      transition: opacity 1.2s, transform 1.2s;
+      opacity: 0;
+      transform: translate(50%, 0px);
+    }
+  }
+  
+  .visible p,
+  .visible a,
+  .visible .image,
+  .visible h5,
+  .visible h3,
+  .visible.image {
+    opacity: 1;
+    transform: translate(0px, 0px);
+  }
+  
+  &.solution {
+    box-shadow: 0 5px 50px #0005;
+    background: #e9e9e9;
+    margin: 0 0 5vh;
+    height: 800px;
+    
+    h3 {
+      font-size: 5vh;
+      padding: 5vh 20px;
+      font-weight: bold;
+      text-align: center;
+      position: relative;
+      align-self: center;
+      
+      .left, .right {
+        position: absolute;
+        top: 50%;
+        margin-top: 0px;
+        border-bottom: 2px solid #29688c;
+      }
+
+      .left {
+        right: 100%;
+        left: -9999px;
+      }
+      
+      .right {
+        left: 100%;
+        right: -9999px;
+      }
+    }
+  }
+  
+  &.hosting {
+    height: 600px;
+  }
+  
+  &.programming {
+    background: #29688c;
+    background: linear-gradient(150deg, #020024 15%, #29688c 100%);
+    color: white;
+    position: relative;
+    min-height: auto;
+    height: 70vw;
+    max-height: 80vh;
+    min-height: 600px;
+    
+    section {
+    }
+    
+    aside {
+      align-self: flex-start;
+      position: relative;
+      z-index: 2;
+      margin-top: 5vh;
+      flex: 1 1 auto;
+      width: 90%;
+      max-width: 1440px;
+      
+      .item {
+        width: 50%;
+        min-width: 500px;
+        text-align: left;
+      }
+    }
+    
+    h3 {
+      align-self: flex-start;
+      padding: 10px 0 40px;
+    }
+    
+    a {
+      border-color: white;
+      color: white;
+      align-self: flex-start;
+    }
+    
+    .image {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 87%;
+      height: 90%;
+      max-width: none;
+      background-position: right bottom;
+      background-size: contain;
+    }
+  }
+  
+  &.video {
+    min-height: 70vh;
+  }
+
+  &.hostintro {
+    .image {
+      transform: translate(-50%, 0px);
+    }
+    
+    .visible.image {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  &.hoststorage {
+    background: #29688c;
+    background: linear-gradient(150deg, #020024 15%, #29688c 100%);
+    color: white;
+    position: relative;
+    height: 80vh;
+    min-height: 600px;
+    
+    section {
+      justify-content: flex-end;
+    }
+    
+    aside {
+      align-items: center;
+
+      .item {
+        width: 50%;
+        min-width: 500px;
+        text-align: left;
+      }
+    }
+    
+    h3 {
+      align-self: flex-start;
+      padding: 10px 0 40px;
+    }
+    
+    .image {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 50%;
+      height: 90%;
+      max-width: none;
+      background-position: left center;
+      background-size: contain;
+      transform: translate(-50%, 0px);
+    }
+    
+    .visible.image {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  &.hostmanaged {
+    position: relative;
+    height: 80vh;
+    min-height: 600px;
+    
+    section {
+      justify-content: flex-end;
+    }
+    
+    aside {
+      align-items: center;
+
+      .item {
+        width: 50%;
+        min-width: 500px;
+        text-align: left;
+      }
+    }
+    
+    h3 {
+      align-self: flex-start;
+      padding: 10px 0 40px;
+    }
+    
+    .image {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 50%;
+      height: 90%;
+      max-width: none;
+      background-position: left center;
+      background-size: contain;
+      transform: translate(-50%, 0px);
+    }
+    
+    .visible.image {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  &.programmingintro {
+    .image {
+      transform: translate(-50%, 0px);
+    }
+    
+    .visible.image {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  &.programmingstore {
+    background: #29688c;
+    background: linear-gradient(30deg, #020024 15%, #29688c 100%);
+    color: white;
+    position: relative;
+    height: 80vh;
+    min-height: 600px;
+    
+    section {
+      justify-content: flex-start;
+    }
+    
+    aside {
+      align-items: center;
+
+      .item {
+        width: 50%;
+        min-width: 500px;
+        text-align: left;
+      }
+    }
+    
+    h3 {
+      align-self: flex-start;
+      padding: 10px 0 40px;
+    }
+    
+    .image {
+      position: absolute;
+      right: 0;
+      top: 5%;
+      width: 50%;
+      height: 90%;
+      max-width: none;
+      background-position: center;
+      background-size: contain;
+      transform: translate(50%, 0px);
+    }
+    
+    .visible.image {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  &.programmingcontracting {
+    .image {
+      transform: translate(-50%, 0px);
+    }
+    
+    .visible.image {
+      transform: translate(0px, 0px);
+    }
+  }
+}
+
+footer {
+  background: #29688c;
+  padding: 100px;
+  
+  .innerbox {
+    min-height: 50vh;
+    background: white;
+    box-shadow: 0 0 10px #020024;
+    padding: 50px;
+    display: flex;
+    justify-content: center;
+    height: 500px;
+    
+    aside {
+      flex: 0 1 50%;
+      max-width: 600px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      
+      h3 {
+        font-size: 2em;
+        padding: 10px 20px 40px;
+        font-weight: bold;
+        text-align: center;
+        position: relative;
+        align-self: center;
+      }
+
+      p {
+        font-size: 1.2em;
+        line-height: 1.4em;
+        margin-bottom: 50px;
+      }
+      
+      h5 {
+        text-align: center;
+        margin: 20px 10px;
+        font-size: 1.2em;
+        line-height: 1.4em;
+        font-weight: bold;
+        border-bottom: 2px solid #29688c;
+        padding: 10px 50px;
+        align-self: center;
+      }
+      
+      a {
+        text-decoration: none;
+        border: 2px solid #29688c;
+        align-self: center;
+        border-radius: 10px;
+        padding: 10px 30px 12px;
+        color: #29688c;
+        font-weight: bold;
+        font-size: 1.1em;
+      }
+    }
+    
+    .image {
+      flex: 0 1 50%;
+      max-width: 600px;
+      background-position: center;
+      background-size: 90% auto;
+      background-repeat: no-repeat;
+      background-image: url('/assets/images/contact.svg');
+    }
+  }
+}
+
+/* section,
 aside {
   display: flex;
   flex-direction: column;
@@ -67,7 +665,7 @@ aside {
     text-align: center;
   }
 }
-
+<a href="https://www.freepik.com/free-photos-vectors/business">Business vector created by pikisuperstar - www.freepik.com</a>
 section {
   padding: 0.5em 1em 3em;
 
@@ -165,4 +763,4 @@ footer {
   section p {
     font-size: 1.1em;
   }
-}
+}*/

app/styl/reset.styl

@@ -3,19 +3,8 @@
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe,
+html, body, div, span,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+h1, h2, h3, h4, h5, h6, p, a, img, form, label, input {
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
@@ -23,42 +12,18 @@ time, mark, audio, video {
   font: inherit;
   vertical-align: baseline;
 }
-/* HTML5 display-role reset for older browsers */
+
-article, aside, details, figcaption, figure, 
+div, span, h1, h2, h3, h4, h5, h6, p, a, img, form, label, input,
-footer, header, hgroup, menu, nav, section {
+header, nav, main, article, section {
-  display: block;
+  box-sizing: border-box;
 }
+
 body {
     line-height: 1;
-}
+    font-family: Tahoma, sans-serif;
-ol, ul {
+    display: flex;
-  list-style: none;
+    flex-direction: column;
-}
+    min-height: 100vh;
-blockquote, q {
+    color: black;
-  quotes: none;
+    background: white;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-input {
-  font-size: 16px;
-  -webkit-appearance: none;
-  border-radius: 0;
-}
-
-button {
-  outline: none;
-  border: none;
-  cursor: pointer;
-}
-
-a {
-  text-decoration: none;
 }

package.json

@@ -5,16 +5,17 @@
   "main": "index.js",
   "scripts": {
     "build": "npm run build:styl && npm run build:js",
-    "build:js": "browserify app/main.js | uglifyjs --comments -o public/main.js",
+    "build:js": "browserify -p tinyify --no-commondir -o public/main.js app/main.js",
     "build:styl": "stylus app/styl/main.styl -c --out public",
-    "dev": "run-p watch:js watch:styl start",
+    "watch": "run-p watch:js watch:styl",
-    "dev:run": "npm install && npm run dev",
-    "docker": "docker run -it --rm --name nfpis -p 3000:3000 -v \"$PWD\":/usr/src/app -w /usr/src/app node:slim",
-    "docker:dev": "npm run docker -- npm run dev:run",
-    "start": "spserver -f ./public/index.html -s ./public -p 3000",
-    "test": "echo \"Error: no test specified\" && exit 1",
     "watch:js": "watchify app/main.js -o public/main.js --debug",
-    "watch:styl": "stylus -w -m app/styl/main.styl --out public"
+    "watch:styl": "stylus -w -m app/styl/main.styl --out public",
+    "dev": "run-p watch start",
+    "docker": "docker run -it --rm --name nfpis -p 3000:3000 -v \"$PWD\":/usr/src/app -w /usr/src/app node:slim",
+    "docker:dev": "npm run docker -- npm run dev",
+    "docker:install": "npm run docker -- npm install",
+    "start": "spserver -f ./public/index.html -s ./public -p 3000",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
@@ -27,13 +28,13 @@
   },
   "homepage": "https://github.com/nfp-projects/nfpis#readme",
   "devDependencies": {
-    "browserify": "^16.2.2",
+    "browserify": "^16.5.0",
-    "eslint": "^5.1.0",
+    "eslint": "^5.16.0",
-    "mithril": "^1.1.6",
+    "mithril": "^2.0.4",
     "npm-run-all": "^4.1.3",
-    "stylus": "^0.54.5",
+    "stylus": "^0.54.7",
-    "uglify-es": "^3.3.9",
+    "tinyify": "^2.5.1",
-    "watchify": "^3.11.0"
+    "watchify": "^3.11.1"
   },
   "dependencies": {
     "spserver": "^0.3.0"

public/assets/fonts/LICENSE.txt

@@ -1,202 +0,0 @@
-
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.

public/index.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="utf-8">
   <title>NFP ehf. - Programming, Video, Live & Operations Contractors</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <link href="/main.css" rel="stylesheet" />
@@ -21,6 +22,7 @@
 </head>
 <body>
   <div id="container"></div>
+  <footer id="footer"></footer>
   <script src="/main.js"></script>
 </body>
 </html>