netbeans-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From chriz...@apache.org
Subject [1/2] incubator-netbeans-website git commit: Moved stuff from the bitbucket apache-incubation branch to this.
Date Tue, 22 Nov 2016 18:20:24 GMT
Repository: incubator-netbeans-website
Updated Branches:
  refs/heads/apache-incubation [created] dcabf79cc


http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/dcabf79c/scripts/components/contactForm/contactForm.js
----------------------------------------------------------------------
diff --git a/scripts/components/contactForm/contactForm.js b/scripts/components/contactForm/contactForm.js
new file mode 100644
index 0000000..3b68858
--- /dev/null
+++ b/scripts/components/contactForm/contactForm.js
@@ -0,0 +1,70 @@
+/* global grecaptcha */
+
+(function() {
+    'use strict';
+    
+    var http = new XMLHttpRequest(),
+
+        xhr = function(method, url, params, success, error, complete) {
+            http.onreadystatechange = function() {
+                if (http.readyState === 4 && http.status === 200) {
+                    success(http.responseText);
+                } else {
+                    error(http.responseText);
+                }
+            };
+
+            http.open(method, url, true);
+            
+            if (method === 'POST') {
+                //Send the proper header information along with the request
+                http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+                http.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+                
+                http.send('payload='+params);
+            }
+            
+            complete();
+        };
+    
+    document.querySelector('.submit').addEventListener('click', function() {
+        var captchaValue = document.querySelector('#g-recaptcha-response').value;
+        
+        checkForm().then(function(isFormValid) {
+            if (isFormValid && !!captchaValue) {
+                var validFields = [];
+                
+                setValidationClass('.g-recaptcha', true);
+
+                [].slice.call(document.querySelectorAll('#multi-form .validation-field.mf-valid [data-validators]')).forEach(function(field) {
+                    validFields.push({
+                        id: field.getAttribute('id'),
+                        value: field.getAttribute('id') === 'captcha' ? captchaValue : field.value,
+                        placeholder: field.getAttribute('data-placeholder'),
+                        validators: field.getAttribute('data-validators').split(' ')
+                    });
+                });
+                
+                xhr('POST', "backend/contact.php?extraParam=contact", JSON.stringify({data: validFields}), function() {
+                    document.querySelector('#responseMessage').innerText = 'Vielen Dank, die E-Mail wurde versandt.';
+                    document.contactForm.reset();
+
+                    removeClass(document.querySelector('#responseMessage'), 'error');
+                    addClass(document.querySelector('#responseMessage'), 'success');
+                }, function(res) {
+                    if (res) {
+                        document.querySelector('#responseMessage').innerHTML = res.statusText || "Oops da ist wohl was schiefgelaufen,<br />schreib uns bitte an kontakt@puls-webagentur.de";
+                        removeClass(document.querySelector('#responseMessage'), 'success');
+                        addClass(document.querySelector('#responseMessage'), 'error');
+                    } else {
+//                        console.log('Error: ', res || res.statusText);
+                    }
+                }, function() {
+                    grecaptcha.reset();
+                });
+            } else {
+                setValidationClass('.g-recaptcha', false);
+            }
+        });
+    }, true);
+}());
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/dcabf79c/scripts/components/contactForm/formValidation.js
----------------------------------------------------------------------
diff --git a/scripts/components/contactForm/formValidation.js b/scripts/components/contactForm/formValidation.js
new file mode 100644
index 0000000..bc774e6
--- /dev/null
+++ b/scripts/components/contactForm/formValidation.js
@@ -0,0 +1,211 @@
+/* global Q */
+
+(function () {
+    'use strict';
+
+    var validators = [],
+        validatorObject = {
+            isNotEmpty: function (field) {
+                var result = Q.defer(),
+                    isValid = (field.value !== '');
+
+                result.resolve({
+                    isValid: isValid,
+                    errorMessage: isValid ? '' : 'Bitte ' + field.getAttribute('data-placeholder') + ' angeben.'
+                });
+
+                return result.promise;
+            },
+
+            isMailValid: function (field) {
+                var result = Q.defer(),
+                    isValid = (/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,4})$/).test(field.value);
+
+                result.resolve({
+                    isValid: isValid,
+                    errorMessage: isValid ? '' : 'Bitte gib eine g├╝ltige E-Mailadresse an.'
+                });
+
+                return result.promise;
+            },
+
+            isCaptchaValid: function () {
+                var result = Q.defer();
+
+                result.resolve({
+                    isValid: true,
+                    errorMessage: ''
+                });
+
+                return result.promise;
+            }
+        },
+
+        isFieldValidatorValid = function (field) {
+            return Q.all(validators.map(function(validator) {
+                var result = Q.defer();
+                
+                validator(field).then(function(val) {
+                    if (!val.isValid) {
+                        result.resolve({
+                            isValid: false,
+                            errorMessage: val.errorMessage
+                        });
+                    }
+                    
+                    result.resolve({
+                        isValid: true,
+                        errorMessage: ''
+                    });
+                });
+
+                return result.promise;
+            }));
+        },
+
+        showError = function (validationField, errorMsg) {
+            validationField.querySelector('.error-message').innerText = errorMsg;
+            removeClass(validationField, 'mf-valid');
+            addClass(validationField, 'mf-error');
+        },
+
+        hideError = function (validationField) {
+            removeClass(validationField, 'mf-error');
+            addClass(validationField, 'mf-valid');
+        },
+
+        validateField = function (field) {
+            validators.length = 0;
+
+            field.getAttribute('data-validators').split(' ').forEach(function (validator) {
+                validators.push(validatorObject[validator]);
+            });
+            
+            var prom = Q.defer();
+            
+            isFieldValidatorValid(field).then(function(results) {
+                var invalidField = results.find(function(elem) {
+                    elem.isValid ? hideError(getParents(field, '.validation-field')) : showError(getParents(field, '.validation-field'), elem.errorMessage);
+                    
+                    return !elem.isValid;
+                });
+                
+                prom.resolve(invalidField ? invalidField.isValid : true);
+            });
+            
+            return prom.promise;
+        },
+
+        checkForm = function () {
+            var activeFieldset = document.querySelector('#multi-form fieldset.active'),
+                isFormValidResult = Q.defer();
+        
+            if (activeFieldset) {
+                var validatableFields = [].slice.call(activeFieldset.querySelectorAll('li.opened .validation-field [data-validators], div.opened .validation-field [data-validators]'));
+                
+                Q.all(validatableFields.map(function(validatableField) {
+                   return validateField(validatableField);
+                })).done(function(result) {
+                    var isOneFieldInvalid = result.find(function(elem) {
+                        return !elem;
+                    });
+                    
+                    var errorFields = document.querySelectorAll('#multi-form fieldset.active .validation-field.mf-error [data-validators], .opened .validation-field.mf-error [data-validators]');
+
+                    if (errorFields.length > 0) {
+                        errorFields[0].focus();
+                    }
+                    
+                    isFormValidResult.resolve(isOneFieldInvalid === undefined ? true : isOneFieldInvalid);
+                });
+                
+                return isFormValidResult.promise;
+            }
+        },
+
+        setValidationClass = function(selector, isValid) {
+            var field = getParents(document.querySelector(selector), '.validation-field');
+            
+            if (isValid) {
+                removeClass(field, 'mf-error');
+                addClass(field, 'mf-valid');
+            } else {
+                removeClass(field, 'mf-valid');
+                addClass(field, 'mf-error', 'setVal');
+            }
+        },
+        
+        addClass = function(elem, className, t) {
+            if (elem.className.indexOf(className) === -1) {
+                elem.className += ' ' + className;
+            }
+        },
+        
+        removeClass = function(elem, className) {
+            var classes = elem.className.replace(' ' + className, '');
+            elem.className = classes;
+        },
+        
+        getParents = function(el, findingElem) {
+            var parents = [],
+                p = el.parentNode;
+        
+            if (findingElem) {
+                var findingElements = [].slice.call(document.querySelectorAll(findingElem));
+                
+                var isParentOfChild = findingElements.some(function(elem) {
+                    return p === elem;
+                });
+                
+                if (isParentOfChild) {
+                    return p;
+                }
+                
+                while (p !== findingElem) {
+                    var o = p;
+                    p = o.parentNode;
+                }
+                
+                return p;
+            } else {
+                while (p !== document) {
+                    var o = p;
+
+                    parents.push(o);
+                    p = o.parentNode;
+                }
+
+                return parents;
+            }
+        };
+
+    [].slice.call(document.querySelectorAll('.validation-field [data-validators]')).forEach(function(validationField) {
+        validationField.addEventListener('focus', function () {
+            addClass(getParents(this, '.validation-field'), 'focused');
+        }, true);
+    });
+
+    [].slice.call(document.querySelectorAll('.validation-field [data-validators]')).forEach(function(validationField) {
+        validationField.addEventListener('blur', function () {
+            removeClass(getParents(this, '.validation-field'), 'focused');
+
+            if (this.getAttribute('type') === 'number' && typeof this.value === 'string') {
+                this.value = (this.value.replace(/[^0-9]+/g, ''));
+            }
+
+            validateField(this);
+        }, true);
+    });
+
+    [].slice.call(document.querySelectorAll('.validation-field [data-validators]')).forEach(function(validationField) {
+        validationField.addEventListener('keyup', function () {
+            validateField(this);
+        }, true);
+    });
+    
+    window.checkForm = checkForm;
+    window.validation = validateField;
+    window.setValidationClass = setValidationClass;
+    window.removeClass = removeClass;
+    window.addClass = addClass;
+}());
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/dcabf79c/scripts/components/contactForm/multiForm.css
----------------------------------------------------------------------
diff --git a/scripts/components/contactForm/multiForm.css b/scripts/components/contactForm/multiForm.css
new file mode 100644
index 0000000..7945aa4
--- /dev/null
+++ b/scripts/components/contactForm/multiForm.css
@@ -0,0 +1,2 @@
+#multi-form{width:100%;margin:0 auto}#multi-form *{outline:0}#multi-form ul{list-style:none}#multi-form ul li{list-style:none}#multi-form form{margin:0 auto;text-align:center}#multi-form form fieldset{box-sizing:border-box;width:100%;vertical-align:top;border:0;margin:0;padding:0}#multi-form form fieldset.mf-valid .fs-title:after{font-family:"pulsweb";content:"\f00c";color:green;margin-left:.5em;font-size:100%}#multi-form form textarea,#multi-form form input[type="text"]{border:0;border-bottom:1px solid #999;border-radius:2px;padding:.75em .5em;width:100%;box-sizing:border-box;font-size:15px}#multi-form form .action-button-wrapper .standalone{width:100%}#multi-form form .action-button-wrapper .standalone a{display:block;width:50%;margin:0 auto;padding:.5em}#multi-form form .action-button-wrapper div{display:inline-block;margin-top:.5em}#multi-form form .action-button-wrapper div:first-child{padding-right:.5em}#multi-form form .action-button-wrapper div:last-child{padding-left:.5em}#
 multi-form form label{color:white;margin-bottom:0}#multi-form form .submit{border:1px solid gray;border-radius:2px;width:auto;height:auto}.validation-field{position:relative;width:100%;margin-bottom:2em}.validation-field label{position:absolute;top:.5em;left:8px;color:#aaa !important;padding:0 5px;font-weight:100;transition:top 300ms ease-out, ackground-color 300ms ease-out, transform 300ms ease-out, left 300ms ease-out}.validation-field.focused label,.validation-field.mf-valid label{top:-.8em;left:0;transform:scale3d(0.85, 0.85, 1)}.validation-field.focused label,.validation-field.mf-valid label{background-color:#fff}.validation-field .validation-hint{position:absolute;right:.6em;top:.5em}.validation-field.mf-valid .validation-hint:after{font-family:"pulsweb";content:"\f00c";color:green;font-size:90%}.validation-field.mf-error textarea,.validation-field.mf-error iframe,.validation-field.mf-error [type="text"],.validation-field.mf-error [type="password"],.validation-field.mf-error [
 type="number"]{border-bottom:1px solid orange !important}.validation-field.mf-error .validation-hint:after{font-family:"Glyphicons Halflings";content:'!';color:orange}.validation-field .error-message{opacity:0;width:auto;padding:.5em;border-radius:1px;position:absolute;top:-3em;right:0;font-size:90%;white-space:nowrap;pointer-events:none}.validation-field.mf-error.focused .error-message{opacity:1;color:white;background:orange;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.validation-field.mf-error.focused .error-message:after{content:'';position:absolute;bottom:-.3em;right:1em;border-top:5px solid orange !important;border-left:10px solid transparent;border-right:10px solid transparent}#post .validation-field:first-child{padding-right:.5em}#post .validation-field:last-child{padding-left:.5em}#post .validation-field:first-child.mf-error .validation-hint,#post .validation-field:first-child.mf-valid .validation-hint{right:1.1em}.hidden-fields{display:none}.hidden
 -fields div,.hidden-fields label{display:none}#captcha{transform:scale(0.7);width:80px}#captcha>div>div{width:100% !important}@media (min-width: 450px){#captcha{transform:none;width:100%}}
+/*# sourceMappingURL=multiForm.css.map */

http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/dcabf79c/scripts/components/contactForm/multiForm.css.map
----------------------------------------------------------------------
diff --git a/scripts/components/contactForm/multiForm.css.map b/scripts/components/contactForm/multiForm.css.map
new file mode 100644
index 0000000..54b8860
--- /dev/null
+++ b/scripts/components/contactForm/multiForm.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAKA,WAAY,CACR,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,MAAM,CAEd,aAAE,CACE,OAAO,CAAE,CAAC,CAGd,cAAG,CACC,UAAU,CAAE,IAAI,CAGpB,iBAAM,CACF,UAAU,CAAE,IAAI,CAGpB,gBAAK,CACD,MAAM,CAAE,MAAM,CACd,UAAU,CAAE,MAAM,CAElB,yBAAS,CACL,UAAU,CAAE,UAAU,CACtB,KAAK,CAAE,IAAI,CACX,cAAc,CAAE,GAAG,CACnB,MAAM,CAAE,CAAC,CACT,MAAM,CAAE,CAAC,CACT,OAAO,CAAE,CAAC,CAIF,kDAAQ,CACJ,WAAW,CAAE,SAAS,CACtB,OAAO,CAAE,OAAO,CAChB,KAAK,CAAE,KAAK,CACZ,WAAW,CAAE,IAAI,CACjB,SAAS,CAAE,IAAI,CAM/B,6DAA6B,CACzB,MAAM,CAAE,CAAC,CACT,aAAa,CAAE,cAAc,CAC7B,aAAa,CAAE,GAAG,CAClB,OAAO,CAAE,UAAU,CACnB,KAAK,CAAE,IAAI,CACX,UAAU,CAAE,UAAU,CACtB,SAAS,CAAE,IAAI,CAGnB,mDAAmC,CAC/B,KAAK,CAAE,IAAI,CAEX,qDAAE,CACE,OAAO,CAAE,KAAK,CACd,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,MAAM,CACd,OAAO,CAAE,IAAI,CAIrB,2CAA2B,CACvB,OAAO,CAAE,YAAY,CACrB,UAAU,CAAE,IAAI,CAEhB,uDAAc,CACV,aAAa,CAAE,IAAI,CAGvB,sDAAa,CACT,YAAY,CAAE,IAAI,CAI1B,sBAAM,CACF,KAAK,CAAE,KAAK,CACZ,aAAa,CAAE,CAAC,CAGpB,wBAAQ,CACJ,MAAM,CAAE,cAAc,CACtB,aAAa,CAAE,GAAG,CAElB,KAAK,CAAE,IAAI,CACX,MAAM,CAAE
 ,IAAI,CAUxB,iBAAkB,CACd,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,IAAI,CACX,aAAa,CAAE,GAAG,CAElB,uBAAM,CACF,QAAQ,CAAE,QAAQ,CAClB,GAAG,CAAE,IAAI,CACT,IAAI,CAAE,GAAG,CACT,KAAK,CAAE,eAAe,CACtB,OAAO,CAAE,KAAK,CACd,WAAW,CAAE,GAAG,CAEhB,UAAU,CAAE,iGAAiG,CAI7G,gEAAM,CACF,GAAG,CAAE,KAAK,CACV,IAAI,CAAE,CAAC,CACP,SAAS,CAAE,sBAAoB,CAKnC,gEAAM,CACF,gBAAgB,CAAE,IAAI,CAI9B,kCAAiB,CACb,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,IAAI,CACX,GAAG,CAAE,IAAI,CAGb,iDAAkC,CAC9B,WAAW,CAAE,SAAS,CACtB,OAAO,CAAE,OAAO,CAChB,KAAK,CAAE,KAAK,CACZ,SAAS,CAAE,GAAG,CAId,sMAAoE,CA/CxE,aAAa,CAAE,2BAA2B,CAmDtC,iDAAuB,CACnB,WAAW,CAAE,sBAAsB,CACnC,OAAO,CAAE,GAAG,CACZ,KAAK,CAAE,MAAM,CAIrB,gCAAe,CACX,OAAO,CAAE,CAAC,CACV,KAAK,CAAE,IAAI,CACX,OAAO,CAAE,IAAI,CACb,aAAa,CAAE,GAAG,CAClB,QAAQ,CAAE,QAAQ,CAClB,GAAG,CAAE,IAAI,CACT,KAAK,CAAE,CAAC,CACR,SAAS,CAAE,GAAG,CACd,WAAW,CAAE,MAAM,CACnB,cAAc,CAAE,IAAI,CAGxB,iDAAkC,CAC9B,OAAO,CAAE,CAAC,CACV,KAAK,CAAE,KAAK,CACZ,UAAU,CAAE,MAAM,CAElB,kBAAkB,CAAE,OAAO,CAC3B,eAAe,CAAE,OAAO,CACxB,UAAU,CAAE,OAAO,CAEnB,uDAAQ,CAC
 J,OAAO,CAAE,EAAE,CACX,QAAQ,CAAE,QAAQ,CAClB,MAAM,CAAE,KAAK,CACb,KAAK,CAAE,GAAG,CACV,UAAU,CAAE,2BAA2B,CACvC,WAAW,CAAE,sBAAsB,CACnC,YAAY,CAAE,sBAAsB,CAM5C,mCAAc,CACV,aAAa,CAAE,IAAI,CAEvB,kCAAa,CACT,YAAY,CAAE,IAAI,CAGlB,2HAAyD,CACrD,KAAK,CAAE,KAAK,CAKxB,cAAe,CACX,OAAO,CAAE,IAAI,CAEb,uCAAW,CACP,OAAO,CAAE,IAAI,CAIrB,QAAS,CAOL,SAAS,CAAE,UAAS,CACpB,KAAK,CAAE,IAAI,CANP,gBAAM,CACF,KAAK,CAAE,eAAe,CAO9B,yBAA0B,CAV9B,QAAS,CAWD,SAAS,CAAE,IAAI,CACf,KAAK,CAAE,IAAI",
+"sources": ["multiForm.scss"],
+"names": [],
+"file": "multiForm.css"
+}

http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/dcabf79c/scripts/components/contactForm/multiForm.scss
----------------------------------------------------------------------
diff --git a/scripts/components/contactForm/multiForm.scss b/scripts/components/contactForm/multiForm.scss
new file mode 100644
index 0000000..28e9e34
--- /dev/null
+++ b/scripts/components/contactForm/multiForm.scss
@@ -0,0 +1,226 @@
+/* 
+    Created on : 02.03.2015, 22:25:12
+    Author     : Chris
+*/
+
+#multi-form {
+    width: 100%;
+    margin: 0 auto;
+
+    * {
+        outline: 0;
+    }
+
+    ul {
+        list-style: none;
+    }
+
+    ul li {
+        list-style: none;
+    }
+
+    form {
+        margin: 0 auto;
+        text-align: center;
+
+        fieldset {
+            box-sizing: border-box;
+            width: 100%;
+            vertical-align: top;
+            border: 0;
+            margin: 0;
+            padding: 0;
+
+            &.mf-valid {
+                .fs-title {
+                    &:after {
+                        font-family: "pulsweb";
+                        content: "\f00c";
+                        color: green;
+                        margin-left: .5em;
+                        font-size: 100%;
+                    }
+                }
+            }
+        }
+
+        textarea, input[type="text"] {
+            border: 0;
+            border-bottom: 1px solid #999;
+            border-radius: 2px;
+            padding: .75em .5em;
+            width: 100%;
+            box-sizing: border-box;
+            font-size: 15px;
+        }
+
+        .action-button-wrapper .standalone {
+            width: 100%;
+
+            a {
+                display: block;
+                width: 50%;
+                margin: 0 auto;
+                padding: .5em;
+            }
+        }
+
+        .action-button-wrapper div {
+            display: inline-block;
+            margin-top: .5em;
+
+            &:first-child {
+                padding-right: .5em;
+            }
+
+            &:last-child {
+                padding-left: .5em;
+            }
+        }
+
+        label {
+            color: white;
+            margin-bottom: 0;
+        }
+        
+        .submit {
+            border: 1px solid gray;
+            border-radius: 2px;
+            /*padding: .5em .7em;*/
+            width: auto;
+            height: auto;
+        }
+    }
+}
+
+/* Style for validation. */
+@mixin errorStyle() {
+    border-bottom: 1px solid orange !important;
+}
+
+.validation-field {
+    position: relative;
+    width: 100%;
+    margin-bottom: 2em;
+
+    label {
+        position: absolute;
+        top: .5em;
+        left: 8px;
+        color: #aaa !important;
+        padding: 0 5px;
+        font-weight: 100;
+
+        transition: top 300ms ease-out, ackground-color 300ms ease-out, transform 300ms ease-out, left 300ms ease-out;
+    }
+
+    &.focused, &.mf-valid {
+        label {
+            top: -.8em;
+            left: 0;
+            transform: scale3d(.85, .85, 1);
+        }
+    }
+
+    &.focused, &.mf-valid {
+        label {
+            background-color: #fff;
+        }
+    }
+
+    .validation-hint {
+        position: absolute;
+        right: .6em;
+        top: .5em;
+    }
+
+    &.mf-valid .validation-hint:after {
+        font-family: "pulsweb";
+        content: "\f00c";
+        color: green;
+        font-size: 90%;
+    }
+
+    &.mf-error {
+        textarea, iframe, [type="text"], [type="password"], [type="number"] {
+            @include errorStyle();
+        }        
+
+        .validation-hint:after {
+            font-family: "Glyphicons Halflings";
+            content: '!';
+            color: orange;
+        }
+    }
+
+    .error-message {
+        opacity: 0;
+        width: auto;
+        padding: .5em;
+        border-radius: 1px;
+        position: absolute;
+        top: -3em;
+        right: 0;
+        font-size: 90%;
+        white-space: nowrap;
+        pointer-events: none;
+    }
+
+    &.mf-error.focused .error-message {
+        opacity: 1;
+        color: white;
+        background: orange;
+
+        -webkit-transition: all .3s;
+        -moz-transition: all .3s;
+        transition: all .3s;
+
+        &:after {
+            content: '';
+            position: absolute;
+            bottom: -.3em;
+            right: 1em;
+            border-top: 5px solid orange !important;
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+        }
+    }
+}
+
+#post .validation-field {
+    &:first-child {
+        padding-right: .5em;
+    }
+    &:last-child {
+        padding-left: .5em;
+    }
+    &:first-child {
+        &.mf-error .validation-hint, &.mf-valid .validation-hint {
+            right: 1.1em;
+        }
+    }
+}
+
+.hidden-fields {
+    display: none;
+
+    div, label {
+        display: none;
+    }
+}
+
+#captcha {
+    > div {
+        > div {
+            width: 100% !important;
+        }
+    }
+
+    transform: scale(.7);
+    width: 80px;
+
+    @media (min-width: 450px) {
+        transform: none;
+        width: 100%;
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/dcabf79c/scripts/onepager.js
----------------------------------------------------------------------
diff --git a/scripts/onepager.js b/scripts/onepager.js
new file mode 100644
index 0000000..3d89297
--- /dev/null
+++ b/scripts/onepager.js
@@ -0,0 +1,155 @@
+(function () {
+    'use strict';
+
+    var burgerMenu = document.querySelector('#burger-menu'),
+        links = [].slice.call(document.querySelectorAll('.nav-link')),
+    
+        body = document.querySelector('body'),
+
+        addClass = function (elem, className) {
+            if (elem.className.indexOf(className) === -1) {
+                elem.className += ' ' + className;
+            }
+        },
+
+        removeClass = function (elem, className) {
+            var classes = elem.className.replace(' ' + className, '');
+            elem.className = classes;
+        },
+
+        toggle = function (elem, expr, className) {
+            if (expr) {
+                addClass(elem, className);
+            } else {
+                removeClass(elem, className);
+            }
+        },
+
+        setPushStateUrl = function (target) {
+            window.history.pushState(null, target.text, target);
+        };
+        
+        if (!window.location.hostname === 'localhost') {
+            var path = window.location.pathname.replace('/', '');
+
+            if (path) {
+                window.scrollTo(0, document.querySelector('#' + path).offsetTop);
+            }
+        }
+
+    [].slice.call(document.querySelectorAll('.ripple-btn')).forEach(function (btn) {
+        btn.addEventListener('mousedown', function (event) {
+            var ripple = this.querySelector('.ripple');
+
+            addClass(ripple, 'visible');
+            ripple.style.transform = 'translate(-50%, -50%) translate(' + event.layerX + 'px, ' + event.layerY + 'px) scale(0.0001, 0.0001)';
+
+            setTimeout(function () {
+                ripple.style.transform = ripple.style.transform.replace(' scale(0.0001, 0.0001)', '');
+            }, 200);
+        }, true);
+
+        btn.addEventListener('mouseup', function () {
+            var ripple = this.querySelector('.ripple');
+
+            removeClass(ripple, 'visible');
+        }, true);
+    });
+
+    links.forEach(function (link) {
+        link.addEventListener('click', function (e) {
+            var targetSection = document.querySelector('#' + this.getAttribute('href')),
+                endPos = targetSection.offsetTop,
+                startPos = window.scrollY;
+
+            e.preventDefault();
+
+            window.removeEventListener('scroll', onScrollMethod);
+
+            setPushStateUrl(this);
+
+            if (startPos <= endPos) {
+                animForward(startPos, endPos);
+            } else {
+                animBackward(startPos, endPos);
+            }
+
+            window.addEventListener('scroll', onScrollMethod);
+        }, true);
+    });
+    
+    document.querySelector('div.search').addEventListener('click', function() {
+        var searchField = document.querySelector('.search-field');
+        
+        toggle(searchField, searchField.className.indexOf('active') === -1 , 'active');
+    });
+
+    var animForward = function (startPos, endPos) {
+        var incrementer = .1,
+            step = function () {
+                var diffEndStart = (endPos - startPos);
+
+                incrementer += 1.25;
+
+                if (diffEndStart < 40) {
+                    startPos += diffEndStart;
+                } else {
+                    startPos += (1 * incrementer);
+                }
+
+                window.scrollTo(0, startPos);
+
+                if (startPos < endPos) {
+                    window.requestAnimationFrame(step);
+                }
+            };
+
+        window.requestAnimationFrame(step);
+    };
+
+    var animBackward = function (startPos, endPos) {
+        var incrementer = .1,
+            step = function () {
+                var diffEndStart = (startPos - endPos);
+
+                incrementer += 1.25;
+
+                if (diffEndStart < 40) {
+                    startPos -= diffEndStart;
+                } else {
+                    startPos -= (1 * incrementer);
+                }
+
+                window.scrollTo(0, startPos);
+
+                if (startPos > endPos) {
+                    window.requestAnimationFrame(step);
+                }
+            };
+
+        window.requestAnimationFrame(step);
+    };
+
+    document.querySelector('.back-to-top').addEventListener('click', function () {
+        window.history.replaceState(null, null, '/');
+
+        animBackward(window.scrollY, 0);
+    }, true);
+
+    burgerMenu.addEventListener('click', function () {
+        if (body.className.indexOf('active') === -1) {
+            addClass(body, 'active');
+        } else {
+            removeClass(body, 'active');
+
+            body.removeEventListener('click', this);
+        }
+    }, true);
+
+    var onScrollMethod = function () {
+        toggle(document.querySelector('header'), document.body.scrollTop >= 100, 'active');
+        toggle(document.querySelector('body'), document.body.scrollTop >= 280, 'scrolled');
+    };
+
+    window.addEventListener('scroll', onScrollMethod);
+}());

http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/dcabf79c/styles/onepager.scss
----------------------------------------------------------------------
diff --git a/styles/onepager.scss b/styles/onepager.scss
new file mode 100644
index 0000000..9faaac9
--- /dev/null
+++ b/styles/onepager.scss
@@ -0,0 +1,991 @@
+/* 
+    Created on : 05.08.2016, 17:11:56
+    Author     : Chris
+*/
+
+$default-color: #fff;
+$primary-color: #4181c1;
+$secondary-color: #ebebeb;
+$alternative-color: #272727;
+
+$symbolic-color-php: #6c7eb7; // PHP
+$symbolic-color-html5: #e44d26; // HTML5
+$symbolic-color-css3: #016fba; // CSS3
+$symbolic-color-less: #2b4e85; // LESS
+$symbolic-color-sass: #cf649a; // SASS
+$symbolic-color-markdown: #000; // MarkDown
+$symbolic-color-ftl: #444; // FTL
+$symbolic-color-json: #1984a4; // JSON
+$symbolic-color-jsx: #333; // JSX
+$symbolic-color-ini: #ff6600; // Ini
+$symbolic-color-js: #d6ba33; // JS
+$symbolic-color-java: #e00024; // JAVA
+$symbolic-color-sql: #444; // SQL
+$symbolic-color-cpp: #348ab9; // CPP
+$symbolic-color-xml: #666; // XML
+$symbolic-color-jade: #47c17b; // JADE
+$symbolic-color-twig: #899914; // Twig
+$symbolic-color-groovy: #6398aa; // Groovy
+$symbolic-color-yaml: #888; // Yaml
+
+$symbolic-color-fb: #3b5998; // fb
+$symbolic-color-twitter: #1da1f2; // twitter
+$symbolic-color-plus: #db4437; // plus
+$symbolic-color-slack: #766fba; // slack
+$symbolic-color-youtube: #e62117; // youtube
+
+
+// Sizes
+$small: 768px;
+$medium: 1024px;
+$large: 1260px;
+
+$headerHeight: 50px;
+
+@mixin margin-bottom-reset() {
+    margin: 0;
+    padding: 0;
+}
+
+@mixin fullWidth() {
+    width: 100%;
+    margin: 0 auto;
+    box-sizing: border-box; 
+}
+
+@mixin box-shadow($rotated: 1) {
+    box-shadow: 0 3px * $rotated 4px 0 rgba(0, 0, 0, .12), 0 1px * $rotated 2px 0 rgba(0, 0, 0, .24);
+}
+
+@mixin box-shadow-active($rotated: 1) {
+    box-shadow: 0 6px * $rotated 7px 0 rgba(0, 0, 0, .2), 0 1px 10px * $rotated 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
+}
+
+@mixin text-shadow($rotated: 1) {
+    text-shadow: 0 3px 4px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+}
+
+@mixin inner-fullwidth() {
+    @include fullWidth();
+    padding: 35px 15px;
+    max-width: 1200px;
+}
+
+@font-face {
+    font-family: 'PulsIcons';
+    src: url('../fonts/puls.ttf') format('truetype'),
+        url('../fonts/puls.woff') format('woff'),
+        url('../fonts/puls.svg') format('svg');
+}
+
+@keyframes show-hide-ripple {
+    from {
+        transform: scale(0);
+        opacity: .5;
+    }
+    to {
+        transform: scale(30);
+        opacity: 0;
+    }
+}
+
+body {
+    @include margin-bottom-reset();
+
+    font-family: 'Open Sans', sans-serif;
+    line-height: 24px;
+    size: 16px;
+    color: #333;
+    font-weight: 300;
+    width: 100%;
+
+    ul, ol, li, h1, h2, h3, p, div, img {
+        @include margin-bottom-reset();
+    }
+
+    h1, h2, h3 {
+        margin-bottom: 10px;
+    }
+
+    a {
+        color: $alternative-color;
+        text-decoration: none;
+
+        &.external {
+            text-decoration: underline;
+            font-weight: bold;
+        }
+
+        &.no-deco {
+            color: white;
+        }
+    }
+
+    .alternative-color {
+        a:not(.next-section) {
+            color: lighten($primary-color, 15%);
+        }
+    }
+
+    .with-icon {
+        &:after {
+            font-family: 'PulsIcons';
+        }
+    }
+
+    img {
+        max-width: 100%;
+        width: 100%;
+        display: block;
+    }
+
+    ul {
+        list-style: none;
+        margin-left: 0;
+    }
+
+    header, footer {
+        @include margin-bottom-reset();
+        @include fullWidth();
+    }
+
+    header {
+        position: fixed;
+        height: $headerHeight;
+        color: $secondary-color;
+        background-color: transparent;
+        transition: background-color 500ms ease;
+        z-index: 1;
+        user-select: none;
+        -webkit-user-select: none;
+
+        .inner {
+            padding-top: 0;
+            padding-bottom: 0;
+            height: 100%;
+
+            nav {
+                align-items: flex-start;
+                display: flex;
+                flex: 1;
+
+                #burger-menu {
+                    min-width: 30px;
+                    max-width: 30px;
+                    height: 25px;
+                    position: relative;
+                    z-index: 1;
+                    align-self: center;
+
+                    > div {
+                        border: 2px solid $alternative-color;
+                        transition: all 300ms ease-out;
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        top: 10px;
+
+                        &:first-child {
+                            top: 0px;
+                        }
+
+                        &:last-child {
+                            top: 20px;
+                        }
+                    }
+                }
+
+                ul {
+                    background-color: rgba(0, 0, 0, .9);
+                    display: block;
+                    height: 10000%;
+                    left: 0;
+                    min-width: 150px;
+                    padding-top: $headerHeight + 25;
+                    width: 60%;
+                    position: absolute;
+                    transform: translate3d(-700px, 0, 0);
+                    transition: transform 300ms ease-out;
+
+                    li {
+                        display: block;
+                        margin-bottom: 5px;
+
+                        .nav-link {
+                            color: inherit;
+                            display: block;
+                            padding: 5px 20px;
+                            transition: color 200ms ease-in;
+
+                            &.active {
+                                color: $primary-color;
+                            }
+                        }
+                    }
+                }
+            }
+
+            #logo {
+                align-self: center;
+                color: $primary-color;
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+
+                img {
+                    width: 75px;
+                    margin-right: -1em;
+                }
+
+                div {
+                    align-content: center;
+                    align-items: center;
+                }
+            }
+        }
+
+        .search {
+            color: $alternative-color;
+            align-self: center;
+            font-size: 125%;
+            margin: 0 .25em;
+
+            &:after {
+                content: '\f002';
+            }
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+
+        .search-field {
+            @include inner-fullwidth();
+            @include box-shadow();
+
+            display: flex;
+            padding: 0;
+            height: 0;
+            overflow: hidden;
+            transition: height 200ms ease-out;
+            position: absolute;
+            right: 0;
+
+            input[type="text"] {
+                outline: 0;
+                padding: .25em;
+                font-size: 120%;
+                flex: 1 0 80%;
+            }
+
+            button {
+                margin: 0;
+                flex: 1 0 5%;
+                align-self: auto;
+                background-color: $alternative-color;
+                color: $secondary-color;
+                border: 0;
+            }
+
+            &.active {
+                height: 40px;
+            }
+
+            @media (min-width: 600px) {
+                max-width: 600px;
+                margin: 0;
+            }
+
+            @media (min-width: $small) {
+                right: 8em;
+            }
+        }
+
+        &.active {
+            background-color: lighten($alternative-color, 75%);
+            box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .12),
+                0 1px 2px 0 rgba(0, 0, 0, .24);
+        }
+    }
+
+    main {
+        section {
+            position: relative;
+            padding-top: $headerHeight;
+            height: 100vh;
+
+            .next-section {
+                @include box-shadow(-1);
+
+                position: absolute;
+                bottom: .75em;
+                left: 50%;
+                margin-left: -25px;
+                line-height: 1;
+                color: $secondary-color;
+                font-size: 175%;
+                padding: .5em .7em;
+                line-height: 1;
+                border-radius: 50%;
+                background-color: rgba(0, 0, 0, .3);
+                border: 1px solid $secondary-color;
+                transform: rotate3d(1, 0, 0, 180deg);
+                text-shadow: 0 0 4px rgba(0, 0, 0, 1);
+                transition: text-shadow 500ms ease-out, box-shadow 250ms ease-out;
+
+                &:after {
+                    font-family: 'PulsIcons';
+                    content: '\f102';
+                }
+
+                &:hover {
+                    cursor: pointer;
+                }
+
+                &:active {
+                    text-shadow: 0 -1px 6px rgba(0, 0, 0, 1);
+                    box-shadow: 0 -6px 7px 0 rgba(0, 0, 0, .2), 0 -1px 10px 0 rgba(0, 0, 0, .12), 0 -2px 4px -1px rgba(0, 0, 0, .2);
+                }
+            }
+
+            .languages, .technologies {
+                display: flex;
+                flex-direction: row;
+                max-width: 640px;
+                margin: 2em auto;
+                overflow-x: scroll;
+
+                > li {
+                    display: flex;
+                }
+
+                @media(min-width: $small) {
+                    flex-wrap: wrap;
+                    justify-content: space-between;
+                    overflow-x: hidden;
+                }
+            }
+
+            .languages {
+                align-content: center;
+
+                > li {
+                    .php {
+                        background-color: $symbolic-color-php;
+                    }
+
+                    .js {
+                        background-color: $symbolic-color-js;
+                    }
+
+                    .java {
+                        background-color: $symbolic-color-java;
+                    }
+
+                    .groovy {
+                        background-color: $symbolic-color-groovy;
+                    }
+
+                    .html5 {
+                        background-color: $symbolic-color-html5;
+                    }
+
+                    .css3 {
+                        background-color: $symbolic-color-css3;
+                    }
+
+                    .less {
+                        background-color: $symbolic-color-less;
+                    }
+
+                    .sass {
+                        background-color: $symbolic-color-sass;
+                    }
+
+                    .ftl {
+                        background-color: $symbolic-color-ftl;
+                    }
+
+                    .json {
+                        background-color: $symbolic-color-json;
+                    }
+
+                    .jsx {
+                        background-color: $symbolic-color-jsx;
+                    }
+
+                    .ini {
+                        background-color: $symbolic-color-ini;
+                    }
+
+                    .markdown {
+                        background-color: $symbolic-color-markdown;
+                    }
+
+                    .jade {
+                        background-color: $symbolic-color-jade;
+                    }
+
+                    .twig {
+                        background-color: $symbolic-color-twig;
+                    }
+
+                    .sql {
+                        background-color: $symbolic-color-sql;
+                    }
+
+                    .yaml {
+                        background-color: $symbolic-color-yaml;
+                    }
+
+                    .cpp {
+                        background-color: $symbolic-color-cpp;
+                    }
+
+                    .xml {
+                        background-color: $symbolic-color-xml;
+                    }
+                }
+            }
+
+            .technologies {
+                max-width: 795px;
+
+                > li {
+                    max-width: 85px;
+                    text-align: center;
+                    margin: .5em;
+                    font-weight: bold;
+                    font-size: 70%;
+                    display: inline-table;
+
+                    .name {
+                        display: none;
+                    }
+
+                    @media(min-width: $small) {
+                        .name {
+                            display: block;
+                        }
+                    }
+                }
+            }
+
+            &:not(.banner) {
+                height: auto;
+
+                p {
+                    text-align: center;
+                }
+
+                @media(min-width: $small) {
+                    height: auto;
+                }
+            }
+
+            &#languages {
+                height: auto;
+
+                .inner {
+                    height: 100%;
+                    padding-bottom: 6em;
+                }
+            }
+
+            &#plugins {
+                .inner {
+                    padding-bottom: 6em;
+                }
+            }
+        }
+    }
+
+    footer {
+        background: #fff;
+        box-sizing: border-box;
+
+        .back-to-top {
+            @include box-shadow();
+
+            position: fixed;
+            padding: .5em .7em;
+            line-height: 1;
+            bottom: .75em;
+            right: .75em;
+            background-color: $primary-color;
+            border-radius: 50%;
+            transition: box-shadow 250ms ease-out, opacity 250ms ease-out, visibility 250ms ease-out;
+            color: $secondary-color;
+            opacity: 0;
+            visibility: hidden;
+            font-size: 150%;
+
+            &:after {
+                content: '\f102';
+            }
+
+            &:hover {
+                cursor: pointer;
+            }
+
+            &:active {
+                @include box-shadow-active();
+            }
+        }
+
+        .social-links {
+            display: flex;
+
+            > li {
+                display: flex;
+
+                a {
+                    width: 50px;
+                    height: 50px;
+                    line-height: 50px;
+                    color: white;
+                    font-size: 130%;
+                    margin: .25em;
+                    transition: box-shadow 250ms ease-out, opacity 250ms ease-out, visibility 250ms ease-out;
+
+                    &:active {
+                        @include box-shadow-active();
+                    }
+                }                
+
+                .fb {
+                    background-color: $symbolic-color-fb;
+
+                    &:after {
+                        content: '\f09a';
+                    }
+                }
+                .twitter {
+                    background-color: $symbolic-color-twitter;
+
+                    &:after {
+                        content: '\f099';
+                    }
+                }
+                .plus {
+                    background-color: $symbolic-color-plus;
+
+                    &:after {
+                        content: '\ea8b';
+                    }
+                }
+                .slack {
+                    background-color: $symbolic-color-slack;
+
+                    &:after {
+                        content: '\f198';
+                    }
+                }
+                .youtube {
+                    background-color: $symbolic-color-youtube;
+
+                    &:after {
+                        content: '\ea9d';
+                    }
+                }
+            }
+        }
+    }
+
+    .circle {
+        @include box-shadow();
+        @include text-shadow();
+
+        border-radius: 50%;
+        font-weight: bold;
+        font-size: 100%;
+        background-color: black;
+        width: 75px;
+        height: 75px;
+        line-height: 75px;
+        margin: .5em;
+        text-align: center;
+        flex: 1 0 50%;
+
+        &.small {
+            font-size: 80%;
+            line-height: 3;
+        }
+
+        &.tech {
+            max-width: 100%;
+            max-height: 100%;
+            margin: 0;
+            background-color: transparent;
+            box-shadow: none;
+        }
+    }
+
+    .download-links {
+        margin-top: .5em;
+        font-weight: bold;
+        font-size: 90%;
+        display: flex;
+        justify-content: center;
+
+        a {
+            @include box-shadow();
+
+            padding: 1em;
+            white-space: nowrap;
+            color: white;
+            background-color: orangered;
+            cursor: pointer;
+            border-radius: 2px;
+            transition: box-shadow 250ms ease-out;
+            margin: 0;
+
+            &:active {
+                @include box-shadow-active();
+            }
+        }
+    }
+
+    &.scrolled {
+        footer {
+            .back-to-top {
+                visibility: visible;
+                opacity: 1;
+            }
+        }
+    }
+
+    &.active {
+        .clickable-background {
+            bottom: 0;
+            display: block;
+            left: 0;
+            opacity: .5;
+            position: absolute;
+            right: 0;
+            top: $headerHeight;
+            background-color: rgba(0, 0, 0, 1);
+            z-index: 1;
+        }
+
+        header {
+            nav {
+                #burger-menu {
+                    > div {
+                        border: 2px solid #ccc;
+
+                        &:first-child {
+                            transform: rotate3d(0, 0, 1, 45deg);
+                            top: 10px;
+                        }
+
+                        &:nth-child(2n) {
+                            opacity: 0;
+                        }
+
+                        &:last-child {
+                            transform: rotate3d(0, 0, 1, -45deg);
+                            top: 10px;
+                        }
+                    }
+                }
+
+                ul {
+                    transform: translate3d(0, 0, 0);
+                }
+            }
+        }
+    }
+
+    .primary-color {
+        background-color: $primary-color;
+        color: #fff;
+    }
+
+    .secondary-color {
+        background-color: $secondary-color;
+    }
+
+    .default-color {
+        background-color: $default-color;
+    }
+
+    .alternative-color {
+        background-color: $alternative-color;
+        color: #ddd;
+    }
+
+    .ripple-btn {
+    }
+
+    .inner {
+        @include inner-fullwidth();
+        padding-bottom: 80px;
+
+        @media(min-width: $small) {
+            padding-bottom: 50px;
+        }
+    }
+
+    .flex-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        @media(min-width: $medium) {
+            flex-wrap: wrap;
+
+            > * {
+                flex: 1;
+            }
+        }
+    }
+
+    .flex-container-small {
+        display: flex;
+        justify-content: space-between;
+
+        > * {
+        }
+    }
+
+    .font-light {
+        color: lighten($alternative-color, 2%);
+    }
+
+    .left {
+        text-align: left;        
+    }
+
+    .center {
+        text-align: center;
+    }
+
+    .right {
+        text-align: right;
+    }
+
+    .title-img {
+        width: 100%;
+        height: 107%;
+        position: absolute;
+        z-index: -2;
+        background-color: #eee;
+
+        .img-wrapper {
+            position: absolute;
+            left: 1em;
+            right: 1em;
+            bottom: 0;
+
+            img {
+                position: absolute;
+                bottom: -3em;
+                left: 0;
+                right: 0;
+                margin: 0 auto;
+                box-sizing: border-box;
+                display: none;
+                box-shadow: 0px -2px 12px 3px lighten($alternative-color, 60%);
+
+                @media(min-device-width: 600px) and (max-device-width: 800px) {
+                    @media (min-height: 400px) and (orientation: portrait) {
+                        max-width: 768px;
+                        display: block;
+                        bottom: 20em;
+                    }
+                }
+
+                @media(min-width: 650px) {
+                    @media (min-height: 425px) {
+                        max-width: 768px;
+                        display: block;
+                    }
+                }
+
+                @media(min-width: 810px) {
+                    @media (min-height: 500px) {
+                        max-width: 760px;
+                        bottom: -3em;
+                    }
+
+                    @media (min-height: 700px) {
+                        max-width: 850px;
+                    }
+
+                    @media (min-height: 850px) {
+                        max-width: 1200px;
+                    }
+                }
+            }
+        }
+    }
+
+    .banner {
+        text-align: center;
+        box-sizing: border-box;
+
+        .inner {
+            height: auto;
+            padding: 3vh 15px;
+            color: $alternative-color;
+            justify-content: flex-start;
+
+            &.flex-container-small {
+                flex-direction: column;
+                align-items: center;
+
+                .desc {
+                    max-width: 500px;
+                    margin-top: 2em;
+                }
+
+                .headline-with-downloads {
+                    .download-links a {
+                        &:last-child {
+                            display: none;
+                        }
+                    }
+                }
+
+                /* Phone Landscape */
+                @media screen and (min-width: 500px) 
+                    and (min-height: 320px)
+                    and (orientation: landscape) {
+                    flex-direction: row-reverse;
+                    align-items: flex-start;
+                    justify-content: center;
+
+                    .desc {
+                        margin-right: 1em;
+                        margin-top: 0;
+                    }
+                }
+            }
+
+            .slogan {
+                color: inherit;
+                display: inline-block;
+                padding: 25px;
+                margin-bottom: 1em;
+                background: rgba(255, 255, 255, .7);
+
+                h1 {
+                    font-weight: 800;
+                    box-sizing: border-box;
+                    color: $primary-color;
+                    text-shadow: 1px 1px 2px lighten($primary-color, 25%);
+                    white-space: nowrap;
+                }
+            }
+
+            p {
+                text-align: justify;
+
+                &:not(:last-child) {
+                    margin-bottom: 1em;
+                }
+            }
+
+
+            @media(min-width: $small) {
+                padding: 10vh 15px;
+
+                &.flex-container-small {
+                    flex-direction: row-reverse;
+                    justify-content: center;
+                    align-items: stretch;
+
+                    .headline-with-downloads {
+                        display: flex;
+                        flex-direction: column;
+
+                        .download-links a {
+                            &:first-child {
+                                margin-right: .5em;
+                            }
+
+                            &:last-child {
+                                display: block;
+                            }
+                        }
+                    }
+
+                    .slogan {
+                        max-width: 300px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                    }
+
+                    .desc {
+                        margin-right: 1em;
+                        margin-top: 0;
+                    }
+                }
+            }
+        }
+
+        /* Portrait Nexus 7 */
+        @media only screen 
+        and (min-device-width: 600px) 
+            and (max-device-width: 960px)
+            and (orientation: portrait) 
+            and (-webkit-min-device-pixel-ratio: 1) {
+            height: 70vh;
+        }
+    }
+
+    @media(min-width: $medium) {
+        header {
+            .inner {
+                nav {
+                    flex: 2;
+
+                    #burger-menu {
+                        display: none;
+                    }
+
+                    ul {
+                        @include margin-bottom-reset();
+
+                        display: flex;
+                        background: none;
+                        transform: translate3d(0, 0, 0);
+                        height: auto;
+                        position: static;
+                        margin-top: 0;
+                        width: auto;
+
+                        li {
+                            margin: 0 2.5em 0 0;
+                            padding: 0;
+                            cursor: pointer;
+                            white-space: nowrap;
+                            color: $alternative-color;
+
+                            .nav-link {
+                                padding: 1em 0;
+
+                                &:hover {
+                                    color: $primary-color;
+                                }
+                            }
+
+                            &:last-child {
+                                margin-right: 0;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        body {
+            .nav-link:hover {
+                color: #222;
+                border-bottom: 2px solid;
+            }
+        }
+    }
+}
\ No newline at end of file


Mime
View raw message