From 64b69505bf47dc3d376060f6294fe6ac4f09535e Mon Sep 17 00:00:00 2001 From: Jonatan Nilsson Date: Mon, 23 Dec 2019 02:38:56 +0000 Subject: [PATCH] Made site mobile friendly --- app/footer.js | 50 +++-- app/front/index.js | 80 ++++---- app/helper.js | 70 +++++-- app/hosting/index.js | 88 ++++----- app/main.js | 12 +- app/programming/index.js | 76 ++++---- app/streaming/index.js | 32 ++-- app/styl/main.styl | 389 +++++++++++++++++++++++++++++++++++++-- 8 files changed, 590 insertions(+), 207 deletions(-) diff --git a/app/footer.js b/app/footer.js index fcec685..31e8f78 100644 --- a/app/footer.js +++ b/app/footer.js @@ -1,21 +1,43 @@ -const m = require('mithril') +var m = require('mithril') +var Helper = require('./helper') -const Footer = { - oninit: function() { +var Footer = { + oninit: function(vnode) { + vnode.state.scrollListenerWaiting = [] }, - view: function() { + view: function(vnode) { 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'), + m('div.outerbox', [ + m('div.innerbox', [ + m('div.image', { + oncreate: function(subnode) { + Helper.scrollAddItem(vnode, { + dom: subnode.dom, + className: 'visible', + threshold: -100, + img: '/assets/images/contact.svg', + }) + }, + }), + m('aside', [ + m('h3', 'Hafðu samband'), + m('p', ` + Sendu okkur tölvupóst og lýstu þínum þörfum. Við munum setja okkur + inn í málin og finna lausnir. Við bjóðum persónulega og + metnaðarfulla þjónustu fyrir alla okkar viðskiptavini. + `), + m('h5', 'nfp@nfp.is'), + ]), + ]), + m('div.meta', [ + m('span', 'NFP ehf.'), + m('span', 'nfp@nfp.is'), + m('span', 'kt. 410915-1380'), + m('span', [ + 'Bakgrunnsmyndir frá ', + m('a', { href: 'https://www.freepik.com/pikisuperstar' }, 'pikisuperstar úr freepik.com'), + ]), ]), ]), ] diff --git a/app/front/index.js b/app/front/index.js index 18d140e..74333dc 100644 --- a/app/front/index.js +++ b/app/front/index.js @@ -1,10 +1,10 @@ -const m = require('mithril') -const Helper = require('../helper') +var m = require('mithril') +var Helper = require('../helper') -const Front = { +var Front = { oninit: function(vnode) { Helper.init(vnode, 'frontpage', { - ratio: 0.85, + ratio: 0.91, }) }, @@ -20,7 +20,7 @@ const Front = { }) }, }, m('div.container', [ - m('video', { + !vnode.state.isMobile ? m('video', { oncreate: function(subnode) { vnode.state.domVideo = subnode.dom Helper.checkCreated(vnode) @@ -39,7 +39,12 @@ const Front = { type: 'video/webm', }), ] - ), + ) : m('div', { + oncreate: function(subnode) { + vnode.state.domVideo = subnode.dom + Helper.checkCreated(vnode) + }, + }), m('div', m('img', { oncreate: function(subnode) { @@ -58,8 +63,8 @@ const Front = { 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('h1', 'Nýjir tímar kalla á nýjar lausnir'), + m('h2', '...og við erum með þær'), ]), ]) ), @@ -67,7 +72,7 @@ const Front = { // Solutions m('article.solution', [ m('h3', [ - 'Við erum með lausnina', + 'Hvað getum við gert fyrir þig?', m('div.left'), m('div.right'), ]), @@ -84,12 +89,10 @@ const Front = { }, [ m('h5', 'Þínar þarfir'), m('p', ` - Hvað svo sem þarfir þínar kunna að vera, að þá munt - komast í samband við lið sem hefur tugi ára reynslu - í að vinna með fólki og leysa vandamál. Við erum - stoltir að koma alltaf með einfalda lausn en líka - ódýra, allt til að mæta hverjum og einum og þeirra - þarfir. + Þarfir fólks og fyrirtækja eru margvíslegar og krefjast + oft sérstæðrar nálgunar. Starfslið okkar hefur víðtæka + reynslu í þarfagreiningu og útfærslum á ýmsum sviðum + hins stafræna nútíma. `), ]), m('div.item', { @@ -103,10 +106,10 @@ const Front = { }, [ 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. + Hvort sem þú ert að leitast eftir hýsingu, hugbúnaðargerð, + vefhönnun, streymi- eða upptökulausnum, þá erum við með + þekkinguna og reynsluna. Við erum alltaf tilbúnir til + leiks og elskum að taka að okkur krefjandi verkefni. `), ]), ]), @@ -116,11 +119,9 @@ const Front = { dom: subnode.dom, className: 'visible', threshold: -100, + img: '/assets/images/solutions.svg', }) }, - style: { - backgroundImage: 'url("/assets/images/solutions.svg")', - }, }), ]), ]), @@ -137,11 +138,10 @@ const Front = { }) }, }, [ - m('h3', 'Hýsingarlausnir sniðnar að þínum þörfum'), + m('h3', 'Hýsingarlausnir'), 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 + Hvort heldur sem þig vantar vefhýsingu, sýndarvélar eða + geymslu og meðhöndlun gagna þá getum við fundið lausn sem hentar þér. `), m(m.route.Link, { class: 'next', href: '/hosting-solutions' }, 'Lesa meira'), @@ -153,11 +153,9 @@ const Front = { dom: subnode.dom, className: 'visible', threshold: -100, + img: '/assets/images/hosting.svg', }) }, - style: { - backgroundImage: 'url("/assets/images/hosting.svg")', - }, }), ]), ]), @@ -176,9 +174,9 @@ const Front = { }, [ 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í. + Ef þig vantar sérlausn eða aðstoð með þín verkefni að þá + getum við hjálpað þér. Við höfum yfir 20 ára reynslu í + forritun og hugbúnaðargerð. `), m(m.route.Link, { class: 'next', href: '/programming-solutions' }, 'Lesa meira'), ]), @@ -189,11 +187,9 @@ const Front = { dom: subnode.dom, className: 'visible', threshold: -100, + img: '/assets/images/programming.svg', }) }, - style: { - backgroundImage: 'url("/assets/images/programming.svg")', - }, }), ]), ]), @@ -210,13 +206,11 @@ const Front = { }) }, }, [ - m('h3', 'Streymi og vídeólausnir'), + m('h3', 'Streymi- og upptökulausnir'), 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. + Hvort sem er að ræða fundi eða ráðstefnur þá tökum við að + okkur upptökur og streymingu á þeim. Við höfum margra ára + reynslu og getum unnið í hvaða sal sem er. `), m(m.route.Link, { class: 'next', href: '/video-solutions' }, 'Lesa meira'), ]), @@ -227,11 +221,9 @@ const Front = { dom: subnode.dom, className: 'visible', threshold: -100, + img: '/assets/images/video.svg', }) }, - style: { - backgroundImage: 'url("/assets/images/video.svg")', - }, }), ]), ]), diff --git a/app/helper.js b/app/helper.js index 1b698f3..62a9393 100644 --- a/app/helper.js +++ b/app/helper.js @@ -1,8 +1,9 @@ -const Helper = { +var Helper = { init: function(vnode, filename, options) { vnode.state.domImg = null vnode.state.domVideo = null vnode.state.domContainer = null + vnode.state.isMobile = Helper.isMobile() vnode.state.videoShow = false vnode.state.videoFilename = filename @@ -10,7 +11,6 @@ const Helper = { 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 @@ -21,6 +21,14 @@ const Helper = { : '/assets/cover/' + filename + '_720.mp4' }, + isMobile: function() { + var check = false; + (function(a) { + if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true + })(navigator.userAgent || navigator.vendor || window.opera); + return check + }, + clear: function(vnode) { vnode.state.scrollListenerWaiting.splice(0, vnode.state.scrollListenerWaiting.length) window.removeEventListener('resize', vnode.state.videoResizeThrottler) @@ -31,8 +39,8 @@ const Helper = { scrollListener: function(vnode) { if (!vnode.state.scrollListenerWaiting.length) return - let scrollTop = window.pageYOffset - let height = window.innerHeight + var scrollTop = window.pageYOffset + var height = window.innerHeight for (var i = 0; i < vnode.state.scrollListenerWaiting.length; i++) { Helper.scrollItemIsVisible(vnode, vnode.state.scrollListenerWaiting[i], scrollTop, height) @@ -47,14 +55,16 @@ const Helper = { }, scrollAddItem: function(vnode, options) { - let bound = options.dom.getBoundingClientRect() - let scrollTop = window.pageYOffset + var bound = options.dom.getBoundingClientRect() + var scrollTop = window.pageYOffset - let item = { + var item = { dom: options.dom, threshold: options.threshold || 100, top: Math.round(bound.top) + Math.round(scrollTop), + bottom: Math.round(bound.bottom) + Math.round(scrollTop), className: ' ' + options.className, + img: options.img || null, ticking: false, } @@ -68,10 +78,10 @@ const Helper = { }, scrollResetBound: function(vnode) { - let scrollTop = window.pageYOffset + var scrollTop = window.pageYOffset vnode.state.scrollListenerWaiting.forEach(function (item) { - let bound = item.dom.getBoundingClientRect() + var bound = item.dom.getBoundingClientRect() item.top = Math.round(bound.top) + Math.round(scrollTop) }) }, @@ -82,15 +92,31 @@ const Helper = { 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 (item.img) { + Helper.lazyLoadImage(vnode, null, item.img, function() { + item.dom.style.backgroundImage = 'url("' + item.img + '")' - if (index >= 0) { - vnode.state.scrollListenerWaiting.splice(index, 1) - } - Helper.scrollCheckEmpty(vnode) - }) + requestAnimationFrame(function() { + item.dom.className += item.className + var index = vnode.state.scrollListenerWaiting.indexOf(item) + + if (index >= 0) { + vnode.state.scrollListenerWaiting.splice(index, 1) + } + Helper.scrollCheckEmpty(vnode) + }) + }) + } else { + requestAnimationFrame(function() { + item.dom.className += item.className + var index = vnode.state.scrollListenerWaiting.indexOf(item) + + if (index >= 0) { + vnode.state.scrollListenerWaiting.splice(index, 1) + } + Helper.scrollCheckEmpty(vnode) + }) + } } }, @@ -165,12 +191,16 @@ const Helper = { Helper.scaleContainerContent(vnode, 'domVideo', false, width, height) }, - lazyLoadImage: function(vnode, name, url) { - if (!vnode.state[name]) return + lazyLoadImage: function(vnode, name, url, cb) { + if (!vnode.state[name] && !cb) return var img = document.createElement('img') img.onload = function() { - vnode.state[name].src = url + if (cb) { + cb() + } else { + vnode.state[name].src = url + } } img.src = url }, diff --git a/app/hosting/index.js b/app/hosting/index.js index 334b8d7..2ae2057 100644 --- a/app/hosting/index.js +++ b/app/hosting/index.js @@ -1,7 +1,7 @@ -const m = require('mithril') -const Helper = require('../helper') +var m = require('mithril') +var Helper = require('../helper') -const Hosting = { +var Hosting = { oninit: function(vnode) { Helper.init(vnode, 'hosting') }, @@ -60,8 +60,8 @@ const Hosting = { 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('h1', 'Hýsingarlausnir sem þú getur treyst'), + m('h2', 'SÝNDARVÉLAR, WORDPRESS, GEYMSLUHÝSING, OG HVAÐ EINA!'), ]), ]) ), @@ -75,11 +75,9 @@ const Hosting = { dom: subnode.dom, className: 'visible', threshold: -100, + img: '/assets/images/hostintro.svg', }) }, - style: { - backgroundImage: 'url("/assets/images/hostintro.svg")', - }, }), m('aside', [ m('div.item', { @@ -93,21 +91,20 @@ const Hosting = { }, [ 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. + Við getum 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 að setja upp sýndarvélar sem þú + getur haft fulla umsjá með og gert hvað svo sem þig lystir + með en einnig sérhæfum okkur í að bjóða upp á + alsherjarlausnir þar sem við sjáum um alla uppsetningu og + umsjón svo að þú getir haft athyglina á öðrum þáttum + reksturs þíns. `), 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. + Ef þig vantar Wordpress/PHP uppsetningu eða hefur sérhæfða + síðu og vilt nota docker eða node þá munar okkur ekki um + það. Okkar kerfi geta séð um að mæta þínum þörfum hverjar + sem þær eru. `), ]), ]), @@ -121,11 +118,9 @@ const Hosting = { dom: subnode.dom, className: 'visible', threshold: -100, + img: '/assets/images/hostfile.svg', }) }, - style: { - backgroundImage: 'url("/assets/images/hostfile.svg")', - }, }), m('aside', [ m('div.item', { @@ -137,21 +132,20 @@ const Hosting = { }) }, }, [ - m('h3', 'Gagnageymslur og myndavennsl'), + m('h3', 'Gagnageymslur og skölun myndefnis'), 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. + Örugg geymsla gagna er sífellt mikilvægari þáttur fyrir + fyrirtæki. NFP ehf. hefur boðið upp á gagnageymslu fyrir + fyrirtæki til að geyma sín afrit eða vinnslugögn sem + starfsmenn geta haft aðgang að og unnið með hvar 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. + Við getum einnig séð um hvers kyns meðhöndlun myndgagna + svo sem endurkóðun upptökuefnis til að lágmarka rýmisþörf + með bestu mögulegu gæðum eða skölun á myndum fyrir + vefsíðubirtingar. Lausnir okkar eru skilvirkar og + afkastamiklar. `), ]), ]), @@ -165,11 +159,9 @@ const Hosting = { dom: subnode.dom, className: 'visible', threshold: -100, + img: '/assets/images/hostmanaged.svg', }) }, - style: { - backgroundImage: 'url("/assets/images/hostmanaged.svg")', - }, }), m('aside', [ m('div.item', { @@ -183,18 +175,16 @@ const Hosting = { }, [ 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. + Það getur verið kúnst að viðhalda sýndarvélum og + heimasíðum og Það er ekki á allra hendi að framkvæma + Wordpress uppfærslur eða prófanir á öryggisafritum. `), 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. + Þú átt að geta einbeitt þér að þínu sérsviði. Þess vegna + bjóðum við upp á að sjá um allt sem kemur að viðhaldi og + gæðaeftirliti. Við fylgjumst vel með þróuninni, gerum + reglulegar uppfærslur og tryggjum að allt virki sem + skildi. `), ]), ]), diff --git a/app/main.js b/app/main.js index 7b7ca11..b2981a5 100644 --- a/app/main.js +++ b/app/main.js @@ -12,7 +12,7 @@ //in the console. window.components = {} -const m = require('mithril') +var m = require('mithril') m.route.setOrig = m.route.set m.route.set = function(path, data, options){ @@ -26,11 +26,11 @@ m.route.link = function(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') +var Front = require('./front') +var Hosting = require('./hosting') +var Programming = require('./programming') +var Streaming = require('./streaming') +var Footer = require('./footer') m.route.prefix = '' m.route(document.getElementById('container'), '/', { diff --git a/app/programming/index.js b/app/programming/index.js index 5563faa..8ea5068 100644 --- a/app/programming/index.js +++ b/app/programming/index.js @@ -1,7 +1,7 @@ -const m = require('mithril') -const Helper = require('../helper') +var m = require('mithril') +var Helper = require('../helper') -const Programming = { +var Programming = { oninit: function(vnode) { Helper.init(vnode, 'programming') }, @@ -75,11 +75,9 @@ const Programming = { dom: subnode.dom, className: 'visible', threshold: -100, + img: '/assets/images/programmingintro.svg', }) }, - style: { - backgroundImage: 'url("/assets/images/programmingintro.svg")', - }, }), m('aside', [ m('div.item', { @@ -93,18 +91,18 @@ const Programming = { }, [ 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. + Með margra ára reynslu í forritun og yfirgripsmikla + þekkingu þegar kemur að vefsíðugerð, er ekkert sem stoppar + okkur í að leysa krefjandi verkefni. Hvort heldur sem um + er að ræða útfærslu á hönnun og innleiðing hennar í + HTML/CSS eða uppsetningu greiðslugátta og áskriftaleiða + hjá mismunandi aðilum að þá erum við sérfræðingar á því + sviði. `), 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. + Við getum unnið með hvaða forritunartungumál sem er. + Hvaða tækni sem þú notar, node, python, C# eða hvað + annað tungumál, þá látum við ekkert stoppa okkur. `), ]), ]), @@ -118,11 +116,9 @@ const Programming = { dom: subnode.dom, className: 'visible', threshold: -100, + img: '/assets/images/programmingstore.svg', }) }, - style: { - backgroundImage: 'url("/assets/images/programmingstore.svg")', - }, }), m('aside', [ m('div.item', { @@ -136,18 +132,17 @@ const Programming = { }, [ 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. + Við höfum hannað og þróað sölukerfi frá grunni í síðuformi. + Það er byggt til að vera einfalt í notkun og henta fyrir + lítil og meðalstór fyrirtæki. Sölukerfið býður upp á + pantanakerfi, verkbókhald og birgðakerfi sem og + vefverslunarframenda og tengingu við posa. `), 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. + Við getum aðlagað vefverslunarframendanum til að passa + fyrir hvert fyrirtæki og þeirra vöruframboði. Við vinnum + náið með hverjum og einum viðskiptavini og skilum af okkur + lausn sem uppfyllir þarfir þeirra. `), ]), ]), @@ -161,11 +156,9 @@ const Programming = { dom: subnode.dom, className: 'visible', threshold: -100, + img: '/assets/images/programmingcontractor.svg', }) }, - style: { - backgroundImage: 'url("/assets/images/programmingcontractor.svg")', - }, }), m('aside', [ m('div.item', { @@ -177,18 +170,19 @@ const Programming = { }) }, }, [ - m('h3', 'Verktakavinna heim til þín'), + m('h3', 'Verktakavinna'), 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. + Ef það er tímapressa hjá þér, að þá getum við komið beint + til ykkar og unnið verktakavinnu á ykkar vinnustað. Við + getum unnið náið með ykkar fólki og 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. + Okkar fólki hefur verið vel tekið hvert sem við förum og + við höfum ætíð kappkostað að skila frá okkur góðu verki. + Hverjar svo sem sem vandamálin kunna að liggja að þá + geturðu treyst því að við munum finna lausn á þeim + saman og redda málunum. `), ]), ]), diff --git a/app/streaming/index.js b/app/streaming/index.js index 7487b79..c7df9ea 100644 --- a/app/streaming/index.js +++ b/app/streaming/index.js @@ -1,7 +1,7 @@ -const m = require('mithril') -const Helper = require('../helper') +var m = require('mithril') +var Helper = require('../helper') -const Streaming = { +var Streaming = { oninit: function(vnode) { Helper.init(vnode, 'streaming') }, @@ -60,8 +60,8 @@ const Streaming = { 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('h1', 'Streymi- og upptökulausnir'), + m('h2', 'Fyrir ráðstefnur og fundi á tækniöld'), ]), ]) ), @@ -75,11 +75,9 @@ const Streaming = { dom: subnode.dom, className: 'visible', threshold: -100, + img: '/assets/images/videoconference.svg', }) }, - style: { - backgroundImage: 'url("/assets/images/videoconference.svg")', - }, }), m('aside', [ m('div.item', { @@ -91,17 +89,19 @@ const Streaming = { }) }, }, [ - m('h3', 'Það er ekkert eins leiðinglegt og að missa af viðburði'), + m('h3', 'Ekki missa af neinu!'), 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. + Aðstæður fólks eru æði ólíkar og ekki geta allir komist á + alla viðburði, hvort sem er vegna fjarlægðar, fötlunar eða + tímaleysis. Við bjóðum upp á upptöku og streymiþjónustu + fyrir hvers kyns viðburði til að færa þá nær fólki í tíma + og rúmi. `), 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. + Innifalið í þjónustunni er streymigluggi, upptaka og + úrvinnsla myndefnis með sundurgreiningu eftir ræðumanni + eða umræðuefni, tilbúið til birtingar á netinu og/eða + í varðveislu á stafrænu formi. `), ]), ]), diff --git a/app/styl/main.styl b/app/styl/main.styl index 1faa9ef..5fab2b3 100644 --- a/app/styl/main.styl +++ b/app/styl/main.styl @@ -57,7 +57,10 @@ header { display: flex; align-items: center; padding-left: 90px; - background: url('./assets/logo_only.svg') no-repeat transparent; + background-repeat: no-repeat; + background-color: transparent; + background-image: url('data:image/svg+xml;utf8,') + // background: url('./assets/logo_only.svg') no-repeat transparent; background-position: left center; background-size: auto 70px; font-size: 1.6em; @@ -121,16 +124,21 @@ header { h1 { + padding-left: 15px; + padding-right: 15px; text-align: center; - font-size: 7.3vw; + font-size: 4.6vw; font-weight: bold; padding: 10px; transition: opacity 1s, transform 1s; opacity: 0; transform: translateY(30px); + margin-bottom: 10px; } h2 { + padding-left: 15px; + padding-right: 15px; text-align: center; font-size: 3vw; transition: opacity 1.2s, transform 1.2s; @@ -148,7 +156,7 @@ header { &.hosting { h1 { - font-size: 4.8vw; + font-size: 4.3vw; margin-bottom: 10px; } h2 { @@ -160,7 +168,7 @@ header { text-shadow: 0 0 30px black; nav a { - background: #0003; + background-color: #0003; border-radius: 20px; box-shadow: 0 0 80px black; text-shadow: 0 0 80px black; @@ -169,10 +177,6 @@ header { 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; @@ -206,7 +210,7 @@ header { text-shadow: 0 0 40px black; h1 { - font-size: 6.6vw; + font-size: 5.7vw; margin-bottom: 10px; } h2 { @@ -449,10 +453,11 @@ article { aside { align-items: center; + max-width: none; .item { - width: 50%; - min-width: 500px; + width: 100%; + max-width: 600px; text-align: left; } } @@ -490,10 +495,12 @@ article { aside { align-items: center; + max-width: none; .item { - width: 50%; - min-width: 500px; + padding-left: 20px; + width: 100%; + max-width: 600px; text-align: left; } } @@ -544,10 +551,11 @@ article { aside { align-items: center; + max-width: none; .item { - width: 50%; - min-width: 500px; + width: 100%; + max-width: 600px; text-align: left; } } @@ -589,10 +597,15 @@ footer { background: #29688c; padding: 100px; - .innerbox { + .outerbox { + display: flex; + flex-direction: column; min-height: 50vh; background: white; box-shadow: 0 0 10px #020024; + } + + .innerbox { padding: 50px; display: flex; justify-content: center; @@ -649,7 +662,349 @@ footer { background-position: center; background-size: 90% auto; background-repeat: no-repeat; - background-image: url('/assets/images/contact.svg'); + + transition: opacity 1.2s, transform 1.2s; + opacity: 0; + transform: translate(0px, 50%); + + &.visible { + transform: translate(0px, 0px); + opacity: 1; + } + } + } + + .meta { + display: flex; + justify-content: center; + flex-wrap: wrap; + padding: 40px 0 10px; + color: #777; + line-height: 1.6em; + + span { + margin: 0 10px; + } + + a { + color: #29688c; + text-decoration: none; + } + } +} + +@media only screen and (max-width: 1000px) { + article { + font-size: 0.9em; + } + + footer { + font-size: 0.9em; + + .innerbox { + flex-direction: column; + align-items: center; + height: auto; + + aside h3 { + padding: 30px 20px 20px; + } + + .image { + width: 100%; + max-width: 600px; + height: 300px; + flex: 0 0 300px; + background-size: contain; + } + } + + .meta { + padding: 0px 0 30px; + } + } +} + +@media only screen and (max-width: 810px) { + article.solution h3 { + font-size: 2em; + } +} + +@media only screen and (max-width: 800px) { + header { + .container nav { + flex-wrap: wrap; + justify-content: center; + + a.title { + width 100%; + flex: 2 0 100%; + justify-content: center; + background-position: calc(50% - 60px) center; + padding-left: 100px; + margin-left: 0; + margin-right: 0; + margin-bottom: 15px; + } + + .filler { + flex: 0 0 0; + } + } + + .content { + h1 { + font-size: 2.3em; + } + + h2 { + font-size: 1.5em; + } + } + + &.hosting { + h1 { + font-size: 2.3em; + } + h2 { + font-size: 1.5em; + } + } + + &.programming { + nav a { + &.title { + background-position: calc(50% - 60px) center; + } + } + + h1 { + font-size: 5.8vw; + margin-bottom: 10px; + } + h2 { + font-size: 3.5vw; + } + + h1, h2 { + } + } + } + + article { + height: auto !important; + + section { + flex-direction: column; + align-items: center; + padding-top: 20px; + padding-bottom: 20px; + + aside { + order: 2; + } + + .image { + order: 1; + width: 100%; + background-size: contain; + flex: 0 0 300px; + transform: translate(0, 50%); + } + } + + &.programming { + max-height: none; + min-height: auto; + padding: 0 40px 300px; + + section { + } + + aside { + margin-top: 10px; + width: 100%; + + .item { + width: 100%; + min-width: auto; + } + } + + h3 { + align-self: center; + } + + .image { + width: 100%; + height: 300px; + max-width: none; + background-position: right bottom; + background-size: contain; + transform: translate(50%, 0); + } + + .visible.image { + transform: translate(0px, 0px); + } + } + + &.hostintro { + h3 { + padding: 30px 0 30px; + } + + .image { + transform: translate(0, 50%); + } + + .visible.image { + transform: translate(0px, 0px); + } + } + + &.hoststorage { + min-height: auto; + padding: 0; + + section { + justify-content: flex-start; + padding-bottom: 0; + } + + aside { + order: 1; + padding: 0 50px; + } + + .image { + width: 100%; + height: auto; + background-position: center; + padding-top: 66%; + position: relative; + order: 2; + } + } + + &.hostmanaged { + min-height: auto; + padding: 0; + + section { + justify-content: flex-start; + padding-bottom: 0; + } + + aside { + order: 1; + padding: 0 50px; + } + + aside .item { + padding-left: 0; + } + .image { + position: relative; + width: 100%; + padding-top: 68%; + height: auto; + order: 2; + } + } + + &.programmingintro { + .image { + transform: translate(0, 50%); + } + + .visible.image { + transform: translate(0px, 0px); + } + + h3 { + padding: 30px 0 30px; + } + } + + &.programmingstore { + aside { + order: 1; + flex: 0 1 auto; + } + + h3 { + align-self: flex-start; + padding: 10px 0 40px; + } + + .image { + position: relative; + order: 2; + width: 100%; + padding-top: 430px; + height: auto; + background-size: auto 100%; + background-position: center -17px; + transform: translate(0, 50%); + } + + .visible.image { + transform: translate(0px, 0px); + } + } + + &.programmingcontracting { + h3 { + padding: 30px 0 30px; + } + .image { + transform: translate(0, 50%); + } + + .visible.image { + transform: translate(0px, 0px); + } + } + } +} + +@media only screen and (max-width: 680px) { + footer { + padding: 100px 20px; + } +} + +@media only screen and (max-width: 500px) { + header .content { + top: 60px; + } + + article { + padding-left: 10px; + padding-right: 10px; + font-size: 0.8em; + + &.hoststorage { + aside { + padding: 0 10px; + } + } + + &.hostmanaged { + aside { + padding: 0 10px; + } + } + } + + footer { + padding: 100px 20px; + font-size: 0.8em; + + .innerbox { + padding: 50px 15px; } } }