From 60b24d86455c32fcffaeb6c1e733ad8ed88884c3 Mon Sep 17 00:00:00 2001 From: unpregnant Date: Wed, 22 Feb 2017 20:01:30 +0100 Subject: [PATCH] ADD auto adjust font --- public/javascript.js | 171 +++++++++------------ public/styles/resume-grey-boxes.min.css | 2 +- public/styles/resume-left-right.min.css | 2 +- public/styles/resume-oblique.min.css | 2 +- public/styles/resume-side-bar.min.css | 2 +- public/styles/resume-spotify.min.css | 2 +- public/styles/resume-wanted.min.css | 2 +- resumes/resume-grey-boxes/index.mustache | 2 +- resumes/resume-grey-boxes/style.less | 2 + resumes/resume-left-right/index.mustache | 2 +- resumes/resume-left-right/style.less | 1 + resumes/resume-oblique/index.mustache | 2 +- resumes/resume-oblique/style.less | 1 + resumes/resume-side-bar/index.mustache | 2 +- resumes/resume-side-bar/style.less | 1 + resumes/resume-spotify/index.mustache | 2 +- resumes/resume-spotify/style.less | 1 + resumes/resume-wanted/index.mustache | 2 +- resumes/resume-wanted/style.less | 1 + src/public/javascript.js | 185 +++++++++-------------- 20 files changed, 159 insertions(+), 228 deletions(-) diff --git a/public/javascript.js b/public/javascript.js index 3bdaca9..9dfad3e 100755 --- a/public/javascript.js +++ b/public/javascript.js @@ -1,132 +1,97 @@ 'use strict'; -// all dom elements -var elements = void 0; +// minimum margin of content to bottom of page +var marginBottom = 0; +// DOM-element of +var page; /** * gets all DOM-elements on page * @return {HTMLElement[]} DOM-elements */ -var getAllDOMElements = function getAllDOMElements() { - elements = document.getElementsByTagName('*'); -}; +function getAllDOMElements() { + return document.getElementsByTagName('*'); +} /** - * checks if DOM-element has box-shadow - * @param {HTMLElement} element - * @return {string} '' if no shadow, otherwise shadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px' + * gets DOM-element of #resumeX + * @return {HTMLElement} */ -var hasBoxShadow = function hasBoxShadow(element) { - var style = window.getComputedStyle(element, null).getPropertyValue('box-shadow'); - if (style != 'none') return style;else return ''; -}; +function getResumeDOMElement() { + return page.children[0]; +} /** - * gets absolute position of element + * sets variable "page" to DOM-element of + */ +function setPageDOMElement() { + page = document.getElementsByTagName('page')[0]; +} + +function autoFontEnabled(resume) { + return resume.hasAttribute('autofont'); +} + +/** + * checks whether font needs to be fixed, and if fixes it + */ +function checkFont() { + var resume = getResumeDOMElement(); + if (autoFontEnabled(resume) && contentIsGreaterThanPage(resume)) fixFont(); +} + +/** + * checks whether content is greater than page + * @param {HTMLElement} resume + * @return {Boolean} false if content fits to page + */ +function contentIsGreaterThanPage(resume) { + var pageHeight = page.offsetHeight; + var resumeHeight = resume.offsetHeight + marginBottom; + if (pageHeight < resumeHeight) return true;else return false; +} + +/** + * gets font size of DOM-elemnt * @param {HTMLElement} element - * @return {{}} + * @return {Number} font size of element */ -var getAbsolutePositionOfElement = function getAbsolutePositionOfElement(element) { - return { - top: element.getBoundingClientRect().top, - left: element.getBoundingClientRect().left - }; -}; +function getFontSizeOfElement(element) { + var style = window.getComputedStyle(element, null).getPropertyValue('font-size'); + return parseFloat(style); +} /** - * removes box shadow from element - * @param {HTMLElement} element - */ -var removeBoxShadowOfElement = function removeBoxShadowOfElement(element) { - element.style.boxShadow = 'none'; -}; - -/** - * gets border radius of element - * @param {HTMLElement} element - * @return {string} e.g. '50%' - */ -var getBorderRadiusOfElement = function getBorderRadiusOfElement(element) { - return window.getComputedStyle(element, null).getPropertyValue('border-radius'); -}; - -/** - * adds new box shadow + * sets font size of DOM-element * @param {HTMLElement} element - * @param {{}} position e.g. { left: 10, top: 100} - * @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px' + * @param {Number} fontSize */ -var addNewBoxShadow = function addNewBoxShadow(element, position, boxShadow) { - var div = document.createElement('div'); - div.style.height = element.offsetHeight; - div.style.width = element.offsetWidth; - div.style.borderRadius = getBorderRadiusOfElement(element); - div.style.position = 'absolute'; - div.style.boxShadow = boxShadow; - div.style.webkitPrintColorAdjust = 'exact'; - div.style.webkitFilter = 'opacity(1)'; - div.style.top = position.top; - div.style.left = position.left; - document.getElementsByTagName('body')[0].appendChild(div); -}; +function setFontSizeOfElement(element, fontSize) { + element.style.fontSize = fontSize + 'px'; +} /** - * fixes box shadow of element - * @param {HTMLElement} element - * @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px' + * decreases font size of all DOM-elements */ -var fixBoxShadow = function fixBoxShadow(element, boxShadow) { - var position = getAbsolutePositionOfElement(element); - removeBoxShadowOfElement(element); - addNewBoxShadow(element, position, boxShadow); -}; - -/** - * gets all elements with shadows - * @return {HTMLElement[]} elements with shadows - */ -var getElementsWithShadows = function getElementsWithShadows() { - var current = void 0, - boxShadow = void 0; - var ret = []; +function decreaseFontSizes() { + var elements = getAllDOMElements(); + var current; for (var i = 0; i < elements.length; i++) { current = elements[i]; - boxShadow = hasBoxShadow(current); - if (hasBoxShadow(current) != '') ret.push({ - element: current, - shadow: boxShadow - }); + var newFontSize = getFontSizeOfElement(current) * 0.99; + setFontSizeOfElement(current, newFontSize); } - return ret; -}; +} /** - * fixes shadows, since normal box-shadow cannot be printed in chrome, - * see: http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome + * decreases font size until content fits to page */ -var fixBoxShadows = function fixBoxShadows() { - var elementsWithShadow = getElementsWithShadows(); - for (var i = 0; i < elementsWithShadow.length; i++) { - fixBoxShadow(elementsWithShadow[i].element, elementsWithShadow[i].shadow); - } -}; +function fixFont() { + decreaseFontSizes(); + var resume = getResumeDOMElement(); + if (contentIsGreaterThanPage(resume)) fixFont(); +} -/** - * checks if the page contains a resume - * @return {Boolean} true if page contains resume - */ -var isResume = function isResume() { - if (document.getElementsByTagName('page')[0]) return true;else return false; -}; - -/** - * fixes resume - */ -var fixResume = function fixResume() { - if (!isResume()) return; - getAllDOMElements(); - fixBoxShadows(); -}; - -fixResume(); +setPageDOMElement(); +checkFont(); //# sourceMappingURL=javascript.js.map diff --git a/public/styles/resume-grey-boxes.min.css b/public/styles/resume-grey-boxes.min.css index d4e30de..49a2150 100755 --- a/public/styles/resume-grey-boxes.min.css +++ b/public/styles/resume-grey-boxes.min.css @@ -1 +1 @@ -.resume5{background:#eceff1}#resume5 .dp1{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)}#resume5 .dp2{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3)}#resume5 .dp3{box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.3)}#resume5 .dp4{box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.3)}#resume5 .dp5{box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.3)}#resume5 .introduction{height:25%;position:relative;background:#009688}#resume5 .introduction .wrapper{width:100%;display:inline-block;margin-top:50px;height:auto;position:relative;text-align:center}#resume5 .introduction .wrapper .img{background:url(/person.jpg);background-position:center;background-size:cover;height:100px;width:100px;margin-left:auto;margin-right:auto;border-radius:50%;display:inline-block;position:relative}#resume5 .introduction .wrapper .position{color:#fff}#resume5 .introduction .wrapper .name{color:#fff;margin-top:16px;font-size:42px;font-weight:300}#resume5 .resume-content{margin-top:20px}#resume5 .card-row{display:flex;padding-left:2.5%;padding-right:2.5%;margin-bottom:15px}#resume5 .card-row.multiple .card:last-child{margin-left:2.5%}#resume5 .card{flex:1;background:#fff;border-radius:2px}#resume5 .card .title{display:block;line-height:32px;margin-bottom:8px;font-size:24px;font-weight:300;padding:24px;background:#607d8b;color:#fff}#resume5 .card .text{line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;font-size:14px;color:#000}#resume5 .card .text .name{font-size:36px;margin-top:10px}#resume5 .card .text .row{padding:24px;border-bottom:1px solid #b0bec5}#resume5 .card .text .row:last-child{border-bottom:none}#resume5 .chip{display:inline-block;height:32px;font-size:13px;font-weight:500;color:rgba(0,0,0,.6);line-height:32px;padding:0 12px;border-radius:16px;background-color:#cfd8dc;margin-bottom:5px;margin-right:5px}#resume5 .resume-footer{background:rgba(51,51,51,.08);position:absolute;bottom:0;width:100%;display:flex}#resume5 .resume-footer .contact{width:100%;padding:2.5%;font-weight:300px;font-size:14px;text-align:center;color:#455a64}#resume5 .resume-footer .contact a,#resume5 .resume-footer .contact a:focus,#resume5 .resume-footer .contact a:hover,#resume5 .resume-footer .contact a:visited{color:#455a64;text-decoration:none}#resume5 .resume-footer .contact i.fa{margin-left:10px;margin-right:10px;font-size:8px;color:#969da0}#resume5 .degree{font-size:18px}#resume5 .degree-description{color:#455a64}#resume5 .skill-desc{color:#455a64}#resume5 .timeline{position:relative;margin-top:-6px}#resume5 .timeline .line{border-left:1px solid #b0bec5;height:100px;position:absolute;left:38px;height:100%;top:0}#resume5 .timeline .experience-block{padding-left:24px;padding-right:24px;display:inline-block;margin-bottom:20px}#resume5 .timeline .experience-block:first-of-type{padding-top:29px}#resume5 .timeline .experience-block .circle{height:30px;width:30px;display:inline-block;background:#009688;border-radius:50%;float:left;position:absolute;z-index:2}#resume5 .timeline .experience-block .job{margin-left:53px;margin-top:-5px;padding:10px;background:#cfd8dc;width:240px}#resume5 .timeline .experience-block .job .jobtitle{line-height:1;font-family:Roboto,sans-serif;font-weight:400;font-size:18px;color:#000}#resume5 .timeline .experience-block .job .company,#resume5 .timeline .experience-block .job .description,#resume5 .timeline .experience-block .job .timeperiod{line-height:1;color:#455a64} \ No newline at end of file +.resume5{background:#eceff1}#resume5{padding-bottom:50px}#resume5 .dp1{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)}#resume5 .dp2{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3)}#resume5 .dp3{box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.3)}#resume5 .dp4{box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.3)}#resume5 .dp5{box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.3)}#resume5 .introduction{height:25%;position:relative;background:#009688}#resume5 .introduction .wrapper{width:100%;display:inline-block;margin-top:50px;height:auto;position:relative;text-align:center}#resume5 .introduction .wrapper .img{background:url(/person.jpg);background-position:center;background-size:cover;height:100px;width:100px;margin-left:auto;margin-right:auto;border-radius:50%;display:inline-block;position:relative}#resume5 .introduction .wrapper .position{color:#fff}#resume5 .introduction .wrapper .name{color:#fff;margin-top:16px;font-size:42px;font-weight:300}#resume5 .resume-content{margin-top:20px}#resume5 .card-row{display:flex;padding-left:2.5%;padding-right:2.5%;margin-bottom:15px}#resume5 .card-row.multiple .card:last-child{margin-left:2.5%}#resume5 .card{flex:1;background:#fff;border-radius:2px}#resume5 .card .title{display:block;line-height:32px;margin-bottom:8px;font-size:24px;font-weight:300;padding:24px;background:#607d8b;color:#fff}#resume5 .card .text{line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;font-size:14px;color:#000}#resume5 .card .text .name{font-size:36px;margin-top:10px}#resume5 .card .text .row{padding:24px;border-bottom:1px solid #b0bec5}#resume5 .card .text .row:last-child{border-bottom:none}#resume5 .chip{display:inline-block;height:32px;font-size:13px;font-weight:500;color:rgba(0,0,0,.6);line-height:32px;padding:0 12px;border-radius:16px;background-color:#cfd8dc;margin-bottom:5px;margin-right:5px}#resume5 .resume-footer{background:rgba(51,51,51,.08);position:absolute;bottom:0;width:100%;display:flex}#resume5 .resume-footer .contact{width:100%;padding:2.5%;font-weight:300px;font-size:14px;text-align:center;color:#455a64}#resume5 .resume-footer .contact a,#resume5 .resume-footer .contact a:focus,#resume5 .resume-footer .contact a:hover,#resume5 .resume-footer .contact a:visited{color:#455a64;text-decoration:none}#resume5 .resume-footer .contact i.fa{margin-left:10px;margin-right:10px;font-size:8px;color:#969da0}#resume5 .degree{font-size:18px}#resume5 .degree-description{color:#455a64}#resume5 .skill-desc{color:#455a64}#resume5 .timeline{position:relative;margin-top:-6px}#resume5 .timeline .line{border-left:1px solid #b0bec5;height:100px;position:absolute;left:38px;height:100%;top:0}#resume5 .timeline .experience-block{padding-left:24px;padding-right:24px;display:inline-block;margin-bottom:20px}#resume5 .timeline .experience-block:first-of-type{padding-top:29px}#resume5 .timeline .experience-block .circle{height:30px;width:30px;display:inline-block;background:#009688;border-radius:50%;float:left;position:absolute;z-index:2}#resume5 .timeline .experience-block .job{margin-left:53px;margin-top:-5px;padding:10px;background:#cfd8dc;width:240px}#resume5 .timeline .experience-block .job .jobtitle{line-height:1;font-family:Roboto,sans-serif;font-weight:400;font-size:18px;color:#000}#resume5 .timeline .experience-block .job .company,#resume5 .timeline .experience-block .job .description,#resume5 .timeline .experience-block .job .timeperiod{line-height:1;color:#455a64} \ No newline at end of file diff --git a/public/styles/resume-left-right.min.css b/public/styles/resume-left-right.min.css index 4cac0c9..895748d 100755 --- a/public/styles/resume-left-right.min.css +++ b/public/styles/resume-left-right.min.css @@ -1 +1 @@ -#resume1{font-family:'Source Sans Pro',sans-serif;font-size:20px}#resume1 h3{margin-bottom:0}#resume1 a,#resume1 a:focus,#resume1 a:hover,#resume1 a:visited{color:#616161}#resume1 span{display:inline-block}#resume1 .row{width:100%}#resume1 .half{width:44%}#resume1 .half.left{float:left;text-align:right;padding-left:4%;padding-right:2%}#resume1 .half.right{float:right;text-align:left;padding-right:4%;padding-left:2%}#resume1 .center{margin-left:auto;margin-right:auto}#resume1 .text-center{text-align:center}#resume1 .name{border:1px solid #000;text-transform:uppercase;padding:10px 20px;margin-top:80px;margin-bottom:5px;font-family:'Open Sans',sans-serif;font-size:35px;font-weight:600;letter-spacing:10px}#resume1 .position{text-transform:uppercase;font-family:'Open Sans',sans-serif;font-size:smaller;color:#757575;margin-bottom:40px}#resume1 .image{width:100px;height:100px;margin-top:50px;margin-bottom:50px}#resume1 .image .img{width:100%;height:100%;border-radius:50%;background:url(/person.jpg);background-repeat:none;background-position:center;background-size:cover}#resume1 .contact{width:100%}#resume1 .experience .experience-block span{width:100%;color:#616161}#resume1 .experience .experience-block span.company{font-weight:700;padding-bottom:5px;padding-top:10px;color:#424242}#resume1 .experience .experience-block span.job-title{font-style:italic}#resume1 .education-block span{color:#616161}#resume1 .education-block span.degree{font-weight:700;padding-bottom:5px;padding-top:10px;color:#424242}#resume1 .skills-other{color:#616161;margin-bottom:10px}#resume1 .skills{margin-top:20px;margin-bottom:10px}#resume1 .skills .skill-block{padding-bottom:10px;display:inline-block}#resume1 .skills .skill-block .skill{width:100px;color:#616161;float:left}#resume1 .skills .skill-block .skill-bar{float:right;background:#e0e0e0;overflow:hidden;height:8px;border-radius:3px;margin-top:6.5px;position:relative;width:249px}#resume1 .skills .skill-block .skill-bar .level{background:#757575;height:100%}#resume1 .contact table{text-align:right;float:right;margin-top:5px;color:#616161;font-size:20px}#resume1 .contact table i{padding:2px;color:#616161}#resume1 .contact table tr td:nth-child(2){vertical-align:top} \ No newline at end of file +#resume1{font-family:'Source Sans Pro',sans-serif;font-size:20px;padding-bottom:50px}#resume1 h3{margin-bottom:0}#resume1 a,#resume1 a:focus,#resume1 a:hover,#resume1 a:visited{color:#616161}#resume1 span{display:inline-block}#resume1 .row{width:100%}#resume1 .half{width:44%}#resume1 .half.left{float:left;text-align:right;padding-left:4%;padding-right:2%}#resume1 .half.right{float:right;text-align:left;padding-right:4%;padding-left:2%}#resume1 .center{margin-left:auto;margin-right:auto}#resume1 .text-center{text-align:center}#resume1 .name{border:1px solid #000;text-transform:uppercase;padding:10px 20px;margin-top:80px;margin-bottom:5px;font-family:'Open Sans',sans-serif;font-size:35px;font-weight:600;letter-spacing:10px}#resume1 .position{text-transform:uppercase;font-family:'Open Sans',sans-serif;font-size:smaller;color:#757575;margin-bottom:40px}#resume1 .image{width:100px;height:100px;margin-top:50px;margin-bottom:50px}#resume1 .image .img{width:100%;height:100%;border-radius:50%;background:url(/person.jpg);background-repeat:none;background-position:center;background-size:cover}#resume1 .contact{width:100%}#resume1 .experience .experience-block span{width:100%;color:#616161}#resume1 .experience .experience-block span.company{font-weight:700;padding-bottom:5px;padding-top:10px;color:#424242}#resume1 .experience .experience-block span.job-title{font-style:italic}#resume1 .education-block span{color:#616161}#resume1 .education-block span.degree{font-weight:700;padding-bottom:5px;padding-top:10px;color:#424242}#resume1 .skills-other{color:#616161;margin-bottom:10px}#resume1 .skills{margin-top:20px;margin-bottom:10px}#resume1 .skills .skill-block{padding-bottom:10px;display:inline-block}#resume1 .skills .skill-block .skill{width:100px;color:#616161;float:left}#resume1 .skills .skill-block .skill-bar{float:right;background:#e0e0e0;overflow:hidden;height:8px;border-radius:3px;margin-top:6.5px;position:relative;width:249px}#resume1 .skills .skill-block .skill-bar .level{background:#757575;height:100%}#resume1 .contact table{text-align:right;float:right;margin-top:5px;color:#616161;font-size:20px}#resume1 .contact table i{padding:2px;color:#616161}#resume1 .contact table tr td:nth-child(2){vertical-align:top} \ No newline at end of file diff --git a/public/styles/resume-oblique.min.css b/public/styles/resume-oblique.min.css index eb7e795..7ec55ed 100755 --- a/public/styles/resume-oblique.min.css +++ b/public/styles/resume-oblique.min.css @@ -1 +1 @@ -#resume3{font-family:'Open Sans Condensed',sans-serif}#resume3 h3{font-weight:700;text-transform:uppercase;margin-bottom:10px}#resume3 a,#resume3 a:focus,#resume3 a:hover{color:#000;text-decoration:none}#resume3 .resume-header .triangle{width:0;height:0;border-style:solid;border-width:600px 0 0 1500px;border-color:#006064 transparent transparent transparent;position:absolute;left:-600px;top:0}#resume3 .resume-header .person-header{position:absolute;z-index:20;right:15%;top:200px}#resume3 .resume-header .person-header .person-wrapper{overflow:hidden;position:relative}#resume3 .resume-header .person-header .img{height:100%;width:100px;float:left;position:absolute;top:0;right:0;background:url(/person.jpg);background-position:center;background-size:cover}#resume3 .resume-header .person-header .person{float:right;color:#fff;margin-right:120px}#resume3 .resume-header .person-header .name{text-transform:uppercase;font-size:50px;display:table-caption;text-align:right;line-height:1;font-weight:700}#resume3 .resume-header .person-header .position{font-size:20px;display:table-caption;text-align:right;line-height:1;margin-top:10px}#resume3 .resume-content{margin-top:435px;margin-left:15%;width:70%}#resume3 .resume-content .experience .experience-block{line-height:1;margin-bottom:10px}#resume3 .resume-content .experience .experience-block:first-of-type{width:80%}#resume3 .resume-content .experience .experience-block .row:first-child{font-size:20px;text-transform:uppercase}#resume3 .resume-content .experience .experience-block .row:first-child i{font-size:17px}#resume3 .education-block{line-height:1;margin-bottom:10px}#resume3 .education-block .row:first-child{font-size:20px;text-transform:uppercase}#resume3 .skill-section .skills{width:100%}#resume3 .skill-section .skills .skill-block{width:50%;float:left}#resume3 .skill-section .skills .skill-block i{font-size:17px;margin-right:15px}#resume3 .skill-section .skills .skill-block .skill{font-size:20px}#resume3 .skills-other{display:inline-block;font-size:20px;margin-top:10px;line-height:1}#resume3 .contact{margin-top:50px}#resume3 .contact a,#resume3 .contact span{display:inline-block;font-size:20px;list-style:none;margin-top:0;line-height:1;float:left;padding-left:0;margin-left:0} \ No newline at end of file +#resume3{font-family:'Open Sans Condensed',sans-serif;padding-bottom:50px}#resume3 h3{font-weight:700;text-transform:uppercase;margin-bottom:10px}#resume3 a,#resume3 a:focus,#resume3 a:hover{color:#000;text-decoration:none}#resume3 .resume-header .triangle{width:0;height:0;border-style:solid;border-width:600px 0 0 1500px;border-color:#006064 transparent transparent transparent;position:absolute;left:-600px;top:0}#resume3 .resume-header .person-header{position:absolute;z-index:20;right:15%;top:200px}#resume3 .resume-header .person-header .person-wrapper{overflow:hidden;position:relative}#resume3 .resume-header .person-header .img{height:100%;width:100px;float:left;position:absolute;top:0;right:0;background:url(/person.jpg);background-position:center;background-size:cover}#resume3 .resume-header .person-header .person{float:right;color:#fff;margin-right:120px}#resume3 .resume-header .person-header .name{text-transform:uppercase;font-size:50px;display:table-caption;text-align:right;line-height:1;font-weight:700}#resume3 .resume-header .person-header .position{font-size:20px;display:table-caption;text-align:right;line-height:1;margin-top:10px}#resume3 .resume-content{margin-top:435px;margin-left:15%;width:70%}#resume3 .resume-content .experience .experience-block{line-height:1;margin-bottom:10px}#resume3 .resume-content .experience .experience-block:first-of-type{width:80%}#resume3 .resume-content .experience .experience-block .row:first-child{font-size:20px;text-transform:uppercase}#resume3 .resume-content .experience .experience-block .row:first-child i{font-size:17px}#resume3 .education-block{line-height:1;margin-bottom:10px}#resume3 .education-block .row:first-child{font-size:20px;text-transform:uppercase}#resume3 .skill-section .skills{width:100%}#resume3 .skill-section .skills .skill-block{width:50%;float:left}#resume3 .skill-section .skills .skill-block i{font-size:17px;margin-right:15px}#resume3 .skill-section .skills .skill-block .skill{font-size:20px}#resume3 .skills-other{display:inline-block;font-size:20px;margin-top:10px;line-height:1}#resume3 .contact{margin-top:50px}#resume3 .contact a,#resume3 .contact span{display:inline-block;font-size:20px;list-style:none;margin-top:0;line-height:1;float:left;padding-left:0;margin-left:0} \ No newline at end of file diff --git a/public/styles/resume-side-bar.min.css b/public/styles/resume-side-bar.min.css index adceade..87b05f1 100755 --- a/public/styles/resume-side-bar.min.css +++ b/public/styles/resume-side-bar.min.css @@ -1 +1 @@ -#resume2{font-family:Raleway,sans-serif}#resume2 h3{text-transform:uppercase;padding-top:0;margin-top:0;letter-spacing:5px;font-weight:400}#resume2 a,#resume2 a:focus,#resume2 a:hover,#resume2 a:visited{text-decoration:none}#resume2 .top-row{width:100%;padding-top:100px;padding-bottom:100px}#resume2 .top-row span{width:100%;display:block;text-align:center;font-weight:400}#resume2 .top-row span.person-name{text-transform:uppercase;font-size:50px;letter-spacing:10px}#resume2 .top-row span.person-position{letter-spacing:5px}#resume2 .left-col{width:26%;float:left;padding-left:8%;padding-right:4%}#resume2 .left-col .person-image .image-centerer{display:flex;justify-content:center;height:auto;overflow:hidden}#resume2 .left-col .person-image .image-centerer .img{flex:none;background:url(/person.jpg);background-position:center;background-size:cover;height:250px;width:100%}#resume2 .left-col .contact h3{text-align:center;margin-top:20px}#resume2 .left-col .contact .contact-row{text-align:center;letter-spacing:2px;margin-bottom:3px}#resume2 .left-col .contact .contact-row:first-of-type{margin-top:50px}#resume2 .left-col .contact .contact-row.dots{margin-top:20px;margin-bottom:15px;font-size:10px;color:rgba(153,153,153,.6)}#resume2 .left-col .contact .contact-row a{color:#000}#resume2 .right-col{width:50%;float:right;padding-left:4%;padding-right:8%}#resume2 .right-col .experience-block{margin-bottom:10px}#resume2 .right-col .experience-block .row:first-child{margin-bottom:3px}#resume2 .right-col .experience-block .row .company{text-transform:uppercase;font-size:19px}#resume2 .right-col .experience-block .row .job-title{font-size:19px}#resume2 .right-col .education{margin-top:50px}#resume2 .right-col .education .education-block{margin-bottom:10px}#resume2 .right-col .education .education-block .degree{font-size:19px;text-transform:uppercase;margin-bottom:3px}#resume2 .right-col .skills-block{margin-top:50px;position:relative}#resume2 .right-col .skills-block .skills{margin-bottom:10px;position:relative;margin-left:auto;margin-right:auto;display:inline-block;margin-bottom:20px}#resume2 .right-col .skills-block .skills .skill{width:80px;height:80px;border-radius:50%;position:relative;border:#333 1px solid;margin:3px;float:left;font-size:13px}#resume2 .right-col .skills-block .skills .skill .skill-name{text-align:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}#resume2 .right-col .skills-block .skills .skills-other{display:inline-block;width:100%;margin-top:20px} \ No newline at end of file +#resume2{font-family:Raleway,sans-serif;padding-bottom:50px}#resume2 h3{text-transform:uppercase;padding-top:0;margin-top:0;letter-spacing:5px;font-weight:400}#resume2 a,#resume2 a:focus,#resume2 a:hover,#resume2 a:visited{text-decoration:none}#resume2 .top-row{width:100%;padding-top:100px;padding-bottom:100px}#resume2 .top-row span{width:100%;display:block;text-align:center;font-weight:400}#resume2 .top-row span.person-name{text-transform:uppercase;font-size:50px;letter-spacing:10px}#resume2 .top-row span.person-position{letter-spacing:5px}#resume2 .left-col{width:26%;float:left;padding-left:8%;padding-right:4%}#resume2 .left-col .person-image .image-centerer{display:flex;justify-content:center;height:auto;overflow:hidden}#resume2 .left-col .person-image .image-centerer .img{flex:none;background:url(/person.jpg);background-position:center;background-size:cover;height:250px;width:100%}#resume2 .left-col .contact h3{text-align:center;margin-top:20px}#resume2 .left-col .contact .contact-row{text-align:center;letter-spacing:2px;margin-bottom:3px}#resume2 .left-col .contact .contact-row:first-of-type{margin-top:50px}#resume2 .left-col .contact .contact-row.dots{margin-top:20px;margin-bottom:15px;font-size:10px;color:rgba(153,153,153,.6)}#resume2 .left-col .contact .contact-row a{color:#000}#resume2 .right-col{width:50%;float:right;padding-left:4%;padding-right:8%}#resume2 .right-col .experience-block{margin-bottom:10px}#resume2 .right-col .experience-block .row:first-child{margin-bottom:3px}#resume2 .right-col .experience-block .row .company{text-transform:uppercase;font-size:19px}#resume2 .right-col .experience-block .row .job-title{font-size:19px}#resume2 .right-col .education{margin-top:50px}#resume2 .right-col .education .education-block{margin-bottom:10px}#resume2 .right-col .education .education-block .degree{font-size:19px;text-transform:uppercase;margin-bottom:3px}#resume2 .right-col .skills-block{margin-top:50px;position:relative}#resume2 .right-col .skills-block .skills{margin-bottom:10px;position:relative;margin-left:auto;margin-right:auto;display:inline-block;margin-bottom:20px}#resume2 .right-col .skills-block .skills .skill{width:80px;height:80px;border-radius:50%;position:relative;border:#333 1px solid;margin:3px;float:left;font-size:13px}#resume2 .right-col .skills-block .skills .skill .skill-name{text-align:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}#resume2 .right-col .skills-block .skills .skills-other{display:inline-block;width:100%;margin-top:20px} \ No newline at end of file diff --git a/public/styles/resume-spotify.min.css b/public/styles/resume-spotify.min.css index 316487d..5944ef6 100755 --- a/public/styles/resume-spotify.min.css +++ b/public/styles/resume-spotify.min.css @@ -1 +1 @@ -.resume6{background:#171717;font-family:'TypoPRO Montserrat';font-weight:300}#resume6{color:#fff}#resume6 h3{background:#1cb251;margin:0;text-align:center;font-weight:300;text-transform:uppercase;letter-spacing:9px;padding-top:20px;padding-bottom:20px;border-radius:35px}#resume6 .left-col{float:left;width:38%;padding:3%}#resume6 .left-col .person-box{width:100%;background:#282828}#resume6 .left-col .person-box .img{height:300px;width:100%;background:url(/person.jpg);background-size:cover;background-position:center}#resume6 .left-col .person-box .content{padding:7%}#resume6 .left-col .person-box .content .person-name{width:100%;margin-bottom:10px;font-size:20px}#resume6 .left-col .person-box .content .person-position{color:#767676;width:100%}#resume6 .left-col .skill{margin-bottom:35px;width:90%;margin-left:auto;margin-right:auto}#resume6 .left-col .skill .skill-name{color:#9a9a9a}#resume6 .left-col .skills-other{color:rgba(154,154,154,.8)}#resume6 .left-col .skills-block h3{margin-top:30px;margin-bottom:20px}#resume6 .left-col .skills-block .skill-bar{width:100%;background:#282828;height:10px;border-radius:20px;position:relative;overflow:hidden;margin-top:10px}#resume6 .left-col .skills-block .skill-bar .level{width:99%;position:absolute;background:#9a9a9a;height:10px}#resume6 .left-col .skills-block .skill-circle{position:relative;width:100%;margin-top:-15px;transform:translateX(-15px)}#resume6 .left-col .skills-block .skill-circle .circle{background:#c6c6c6;height:20px;width:20px;border-radius:50%;position:absolute}#resume6 .right-col{width:53%;float:left;padding-top:3%;padding-right:3%}#resume6 .right-col .education,#resume6 .right-col .experience{margin-bottom:20px}#resume6 .right-col .education .education-block,#resume6 .right-col .education .experience-block,#resume6 .right-col .experience .education-block,#resume6 .right-col .experience .experience-block{font-size:20px;padding:20px;border-bottom:1px #262626 solid;color:rgba(154,154,154,.8)}#resume6 .right-col .education .education-block:last-child,#resume6 .right-col .education .experience-block:last-child,#resume6 .right-col .experience .education-block:last-child,#resume6 .right-col .experience .experience-block:last-child{border-bottom:none}#resume6 .right-col .education .education-block .row:first-child,#resume6 .right-col .education .experience-block .row:first-child,#resume6 .right-col .experience .education-block .row:first-child,#resume6 .right-col .experience .experience-block .row:first-child{color:#9a9a9a}#resume6 .right-col .contact table{color:#9a9a9a;padding:20px;font-size:20px;font-weight:300}#resume6 .right-col .contact table a,#resume6 .right-col .contact table a:focus,#resume6 .right-col .contact table a:hover,#resume6 .right-col .contact table a:visited{color:#9a9a9a;text-decoration:none}#resume6 .right-col .contact table i.fa{color:rgba(154,154,154,.8);font-size:30px;margin-right:20px;margin-top:2px} \ No newline at end of file +.resume6{background:#171717;font-family:'TypoPRO Montserrat';font-weight:300}#resume6{padding-bottom:50px;color:#fff}#resume6 h3{background:#1cb251;margin:0;text-align:center;font-weight:300;text-transform:uppercase;letter-spacing:9px;padding-top:20px;padding-bottom:20px;border-radius:35px}#resume6 .left-col{float:left;width:38%;padding:3%}#resume6 .left-col .person-box{width:100%;background:#282828}#resume6 .left-col .person-box .img{height:300px;width:100%;background:url(/person.jpg);background-size:cover;background-position:center}#resume6 .left-col .person-box .content{padding:7%}#resume6 .left-col .person-box .content .person-name{width:100%;margin-bottom:10px;font-size:20px}#resume6 .left-col .person-box .content .person-position{color:#767676;width:100%}#resume6 .left-col .skill{margin-bottom:35px;width:90%;margin-left:auto;margin-right:auto}#resume6 .left-col .skill .skill-name{color:#9a9a9a}#resume6 .left-col .skills-other{color:rgba(154,154,154,.8)}#resume6 .left-col .skills-block h3{margin-top:30px;margin-bottom:20px}#resume6 .left-col .skills-block .skill-bar{width:100%;background:#282828;height:10px;border-radius:20px;position:relative;overflow:hidden;margin-top:10px}#resume6 .left-col .skills-block .skill-bar .level{width:99%;position:absolute;background:#9a9a9a;height:10px}#resume6 .left-col .skills-block .skill-circle{position:relative;width:100%;margin-top:-15px;transform:translateX(-15px)}#resume6 .left-col .skills-block .skill-circle .circle{background:#c6c6c6;height:20px;width:20px;border-radius:50%;position:absolute}#resume6 .right-col{width:53%;float:left;padding-top:3%;padding-right:3%}#resume6 .right-col .education,#resume6 .right-col .experience{margin-bottom:20px}#resume6 .right-col .education .education-block,#resume6 .right-col .education .experience-block,#resume6 .right-col .experience .education-block,#resume6 .right-col .experience .experience-block{font-size:20px;padding:20px;border-bottom:1px #262626 solid;color:rgba(154,154,154,.8)}#resume6 .right-col .education .education-block:last-child,#resume6 .right-col .education .experience-block:last-child,#resume6 .right-col .experience .education-block:last-child,#resume6 .right-col .experience .experience-block:last-child{border-bottom:none}#resume6 .right-col .education .education-block .row:first-child,#resume6 .right-col .education .experience-block .row:first-child,#resume6 .right-col .experience .education-block .row:first-child,#resume6 .right-col .experience .experience-block .row:first-child{color:#9a9a9a}#resume6 .right-col .contact table{color:#9a9a9a;padding:20px;font-size:20px;font-weight:300}#resume6 .right-col .contact table a,#resume6 .right-col .contact table a:focus,#resume6 .right-col .contact table a:hover,#resume6 .right-col .contact table a:visited{color:#9a9a9a;text-decoration:none}#resume6 .right-col .contact table i.fa{color:rgba(154,154,154,.8);font-size:30px;margin-right:20px;margin-top:2px} \ No newline at end of file diff --git a/public/styles/resume-wanted.min.css b/public/styles/resume-wanted.min.css index 7f4b922..b670e0c 100755 --- a/public/styles/resume-wanted.min.css +++ b/public/styles/resume-wanted.min.css @@ -1 +1 @@ -.resume4{background:#eaeaea}#resume4{font-family:Roboto,sans-serif;color:#223}#resume4 a,#resume4 a:focus,#resume4 a:hover{color:#223;text-decoration:none}#resume4 .card{border-radius:2px;border-radius:4px;margin-bottom:25px}#resume4 .card.contact,#resume4 .card.education{float:left}#resume4 .card.half{width:49%}#resume4 .card.half .card-content,#resume4 .card.half .card-header{padding:15px 8%;width:84%}#resume4 .card .card-header{width:92%;display:inline-block;padding:20px 4%;border-bottom:#ccc 1px solid}#resume4 .card .card-header i{float:left;font-size:32px;color:#545}#resume4 .card .card-header h3{margin:0;float:left;font-size:26px;font-weight:300;margin-left:10px;color:#545;margin-top:2px}#resume4 .card .card-content{width:92%;padding:20px 4%}#resume4 .resume-header .box{display:inline-block;background:#e56;height:150px;width:100%}#resume4 .resume-header .person-header{position:absolute;width:100%;top:50px}#resume4 .resume-header .person-header .img{background:url(/person.jpg);background-position:center;background-size:cover;background-repeat:no-repeat;height:200px;width:200px;border-radius:50%;border:#eaeaea 3px solid;position:relative;margin-left:auto;margin-right:auto;filter:grayscale(100%)}#resume4 .resume-header .person-header .person-wrapper{margin-left:auto;margin-right:auto;text-align:center}#resume4 .resume-header .person-header .person-wrapper .name{color:#223;font-size:35px;margin-top:10px}#resume4 .resume-header .person-header .person-wrapper .position{color:#545}#resume4 .resume-content{margin-top:200px;padding-left:5%;padding-right:5%}#resume4 .resume-content .experience-block{margin-bottom:10px;color:#223}#resume4 .resume-content .experience-block:last-of-type{margin-bottom:0}#resume4 .resume-content .experience-block .row:first-child{font-size:18px;color:#223}#resume4 .resume-content .experience-block .row:nth-child(2){font-size:15px;color:#545}#resume4 .resume-content .education{margin-right:2%}#resume4 .resume-content .education .education-block{margin-bottom:10px;color:#223}#resume4 .resume-content .education .education-block:last-of-type{margin-bottom:0}#resume4 .resume-content .education .education-block .row:first-child{font-size:18px;color:#223}#resume4 .resume-content .education .education-block .row:nth-child(2){font-size:15px;color:#545}#resume4 .resume-content .skills{width:100%}#resume4 .resume-content .skills .wrapper{display:inline-block;width:100%}#resume4 .resume-content .skills .wrapper .skill{display:inline-block;float:left;width:50%;font-size:#223;color:#223}#resume4 .resume-content .skills .wrapper .skill i{margin-right:5px;font-size:12px}#resume4 .resume-content .contact{color:#223}#resume4 .resume-content .contact a,#resume4 .resume-content .contact span{padding-bottom:5px;display:inline-block} \ No newline at end of file +.resume4{background:#eaeaea}#resume4{font-family:Roboto,sans-serif;color:#223;padding-bottom:50px}#resume4 a,#resume4 a:focus,#resume4 a:hover{color:#223;text-decoration:none}#resume4 .card{border-radius:2px;border-radius:4px;margin-bottom:25px}#resume4 .card.contact,#resume4 .card.education{float:left}#resume4 .card.half{width:49%}#resume4 .card.half .card-content,#resume4 .card.half .card-header{padding:15px 8%;width:84%}#resume4 .card .card-header{width:92%;display:inline-block;padding:20px 4%;border-bottom:#ccc 1px solid}#resume4 .card .card-header i{float:left;font-size:32px;color:#545}#resume4 .card .card-header h3{margin:0;float:left;font-size:26px;font-weight:300;margin-left:10px;color:#545;margin-top:2px}#resume4 .card .card-content{width:92%;padding:20px 4%}#resume4 .resume-header .box{display:inline-block;background:#e56;height:150px;width:100%}#resume4 .resume-header .person-header{position:absolute;width:100%;top:50px}#resume4 .resume-header .person-header .img{background:url(/person.jpg);background-position:center;background-size:cover;background-repeat:no-repeat;height:200px;width:200px;border-radius:50%;border:#eaeaea 3px solid;position:relative;margin-left:auto;margin-right:auto;filter:grayscale(100%)}#resume4 .resume-header .person-header .person-wrapper{margin-left:auto;margin-right:auto;text-align:center}#resume4 .resume-header .person-header .person-wrapper .name{color:#223;font-size:35px;margin-top:10px}#resume4 .resume-header .person-header .person-wrapper .position{color:#545}#resume4 .resume-content{margin-top:200px;padding-left:5%;padding-right:5%}#resume4 .resume-content .experience-block{margin-bottom:10px;color:#223}#resume4 .resume-content .experience-block:last-of-type{margin-bottom:0}#resume4 .resume-content .experience-block .row:first-child{font-size:18px;color:#223}#resume4 .resume-content .experience-block .row:nth-child(2){font-size:15px;color:#545}#resume4 .resume-content .education{margin-right:2%}#resume4 .resume-content .education .education-block{margin-bottom:10px;color:#223}#resume4 .resume-content .education .education-block:last-of-type{margin-bottom:0}#resume4 .resume-content .education .education-block .row:first-child{font-size:18px;color:#223}#resume4 .resume-content .education .education-block .row:nth-child(2){font-size:15px;color:#545}#resume4 .resume-content .skills{width:100%}#resume4 .resume-content .skills .wrapper{display:inline-block;width:100%}#resume4 .resume-content .skills .wrapper .skill{display:inline-block;float:left;width:50%;font-size:#223;color:#223}#resume4 .resume-content .skills .wrapper .skill i{margin-right:5px;font-size:12px}#resume4 .resume-content .contact{color:#223}#resume4 .resume-content .contact a,#resume4 .resume-content .contact span{padding-bottom:5px;display:inline-block} \ No newline at end of file diff --git a/resumes/resume-grey-boxes/index.mustache b/resumes/resume-grey-boxes/index.mustache index 047fb90..9ed537c 100755 --- a/resumes/resume-grey-boxes/index.mustache +++ b/resumes/resume-grey-boxes/index.mustache @@ -1,5 +1,5 @@ -
+
diff --git a/resumes/resume-grey-boxes/style.less b/resumes/resume-grey-boxes/style.less index e76e8a0..2d494d7 100755 --- a/resumes/resume-grey-boxes/style.less +++ b/resumes/resume-grey-boxes/style.less @@ -13,6 +13,8 @@ } #resume5 { + padding-bottom: 50px; + .dp1 { box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); } diff --git a/resumes/resume-left-right/index.mustache b/resumes/resume-left-right/index.mustache index 1d2b97b..0339ef7 100755 --- a/resumes/resume-left-right/index.mustache +++ b/resumes/resume-left-right/index.mustache @@ -1,5 +1,5 @@ -
+
{{person.name.first}} {{person.name.last}}
diff --git a/resumes/resume-left-right/style.less b/resumes/resume-left-right/style.less index 89fff39..c3cbfe5 100755 --- a/resumes/resume-left-right/style.less +++ b/resumes/resume-left-right/style.less @@ -9,6 +9,7 @@ #resume1 { font-family: 'Source Sans Pro', sans-serif; font-size: @fontSize; + padding-bottom: 50px; h3 { margin-bottom: 0; diff --git a/resumes/resume-oblique/index.mustache b/resumes/resume-oblique/index.mustache index 2108db4..edc2f36 100755 --- a/resumes/resume-oblique/index.mustache +++ b/resumes/resume-oblique/index.mustache @@ -1,6 +1,6 @@ -
+
diff --git a/resumes/resume-oblique/style.less b/resumes/resume-oblique/style.less index 6a4f6d1..bfff8da 100755 --- a/resumes/resume-oblique/style.less +++ b/resumes/resume-oblique/style.less @@ -11,6 +11,7 @@ #resume3 { font-family: 'Open Sans Condensed', sans-serif; + padding-bottom: 50px; h3 { font-weight: bold; diff --git a/resumes/resume-side-bar/index.mustache b/resumes/resume-side-bar/index.mustache index d0d4096..c0e91f3 100755 --- a/resumes/resume-side-bar/index.mustache +++ b/resumes/resume-side-bar/index.mustache @@ -1,5 +1,5 @@ -
+
{{person.name.first}} {{person.name.last}} {{person.position}} diff --git a/resumes/resume-side-bar/style.less b/resumes/resume-side-bar/style.less index d256576..dcc5e60 100755 --- a/resumes/resume-side-bar/style.less +++ b/resumes/resume-side-bar/style.less @@ -9,6 +9,7 @@ #resume2 { font-family: 'Raleway', sans-serif; + padding-bottom: 50px; h3 { text-transform: uppercase; diff --git a/resumes/resume-spotify/index.mustache b/resumes/resume-spotify/index.mustache index e5b0c0f..a366c65 100755 --- a/resumes/resume-spotify/index.mustache +++ b/resumes/resume-spotify/index.mustache @@ -1,5 +1,5 @@ -
+
diff --git a/resumes/resume-spotify/style.less b/resumes/resume-spotify/style.less index 38335b5..97084bb 100755 --- a/resumes/resume-spotify/style.less +++ b/resumes/resume-spotify/style.less @@ -14,6 +14,7 @@ } #resume6 { + padding-bottom: 50px; color: white; h3 { diff --git a/resumes/resume-wanted/index.mustache b/resumes/resume-wanted/index.mustache index 17c6de5..6815b2d 100755 --- a/resumes/resume-wanted/index.mustache +++ b/resumes/resume-wanted/index.mustache @@ -1,6 +1,6 @@ -
+
diff --git a/resumes/resume-wanted/style.less b/resumes/resume-wanted/style.less index 9c1f364..cec3d74 100755 --- a/resumes/resume-wanted/style.less +++ b/resumes/resume-wanted/style.less @@ -20,6 +20,7 @@ #resume4 { font-family: 'Roboto', sans-serif; color: @textDark; + padding-bottom: 50px; a, a:focus, diff --git a/src/public/javascript.js b/src/public/javascript.js index 45df53f..5665d4b 100755 --- a/src/public/javascript.js +++ b/src/public/javascript.js @@ -1,136 +1,95 @@ -// all dom elements -let elements; +// minimum margin of content to bottom of page +var marginBottom = 0; +// DOM-element of +var page; /** * gets all DOM-elements on page * @return {HTMLElement[]} DOM-elements */ -const getAllDOMElements = () => { - elements = document.getElementsByTagName('*'); -}; +function getAllDOMElements() { + return document.getElementsByTagName('*'); +} /** - * checks if DOM-element has box-shadow - * @param {HTMLElement} element - * @return {string} '' if no shadow, otherwise shadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px' + * gets DOM-element of #resumeX + * @return {HTMLElement} */ -const hasBoxShadow = element => { - const style = window - .getComputedStyle(element, null) - .getPropertyValue('box-shadow'); - if (style != 'none') return style; - else return ''; -}; +function getResumeDOMElement() { + return page.children[0]; +} /** - * gets absolute position of element - * @param {HTMLElement} element - * @return {{}} + * sets variable "page" to DOM-element of */ -const getAbsolutePositionOfElement = element => { - return { - top: element.getBoundingClientRect().top, - left: element.getBoundingClientRect().left - }; -}; +function setPageDOMElement() { + page = document.getElementsByTagName('page')[0]; +} +function autoFontEnabled(resume) { + return resume.hasAttribute('autofont'); +} /** - * removes box shadow from element - * @param {HTMLElement} element + * checks whether font needs to be fixed, and if fixes it */ -const removeBoxShadowOfElement = element => { - element.style.boxShadow = 'none'; -}; - +function checkFont() { + var resume = getResumeDOMElement(); + if (autoFontEnabled(resume) && contentIsGreaterThanPage(resume)) fixFont(); +} /** - * gets border radius of element - * @param {HTMLElement} element - * @return {string} e.g. '50%' + * checks whether content is greater than page + * @param {HTMLElement} resume + * @return {Boolean} false if content fits to page */ -const getBorderRadiusOfElement = element => { - return window - .getComputedStyle(element, null) - .getPropertyValue('border-radius'); -}; - -/** - * adds new box shadow - * @param {HTMLElement} element - * @param {{}} position e.g. { left: 10, top: 100} - * @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px' - */ -const addNewBoxShadow = (element, position, boxShadow) => { - let div = document.createElement('div'); - div.style.height = element.offsetHeight; - div.style.width = element.offsetWidth; - div.style.borderRadius = getBorderRadiusOfElement(element); - div.style.position = 'absolute'; - div.style.boxShadow = boxShadow; - div.style.webkitPrintColorAdjust = 'exact'; - div.style.webkitFilter = 'opacity(1)'; - div.style.top = position.top; - div.style.left = position.left; - document.getElementsByTagName('body')[0].appendChild(div); -}; - -/** - * fixes box shadow of element - * @param {HTMLElement} element - * @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px' - */ -const fixBoxShadow = (element, boxShadow) => { - const position = getAbsolutePositionOfElement(element); - removeBoxShadowOfElement(element); - addNewBoxShadow(element, position, boxShadow); -}; - -/** - * gets all elements with shadows - * @return {HTMLElement[]} elements with shadows - */ -const getElementsWithShadows = () => { - let current, boxShadow; - let ret = []; - for (let i = 0; i < elements.length; i++) { - current = elements[i]; - boxShadow = hasBoxShadow(current); - if (hasBoxShadow(current) != '') ret.push({ - element: current, - shadow: boxShadow - }); - } - return ret; -}; - -/** - * fixes shadows, since normal box-shadow cannot be printed in chrome, - * see: http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome - */ -const fixBoxShadows = () => { - const elementsWithShadow = getElementsWithShadows(); - for (let i = 0; i < elementsWithShadow.length; i++) { - fixBoxShadow(elementsWithShadow[i].element, elementsWithShadow[i].shadow); - } -}; - -/** - * checks if the page contains a resume - * @return {Boolean} true if page contains resume - */ -const isResume = () => { - if (document.getElementsByTagName('page')[0]) return true; +function contentIsGreaterThanPage(resume) { + var pageHeight = page.offsetHeight; + var resumeHeight = resume.offsetHeight + marginBottom; + if (pageHeight < resumeHeight) return true; else return false; -}; +} /** - * fixes resume + * gets font size of DOM-elemnt + * @param {HTMLElement} element + * @return {Number} font size of element */ -const fixResume = () => { - if (!isResume()) return; - getAllDOMElements(); - fixBoxShadows(); -}; +function getFontSizeOfElement(element) { + var style = window.getComputedStyle(element, null).getPropertyValue('font-size'); + return parseFloat(style); +} -fixResume(); +/** + * sets font size of DOM-element + * @param {HTMLElement} element + * @param {Number} fontSize + */ +function setFontSizeOfElement(element, fontSize) { + element.style.fontSize = fontSize + 'px'; +} + +/** + * decreases font size of all DOM-elements + */ +function decreaseFontSizes() { + var elements = getAllDOMElements(); + var current; + for (var i = 0; i < elements.length; i++) { + current = elements[i]; + var newFontSize = getFontSizeOfElement(current) * 0.99; + setFontSizeOfElement(current, newFontSize); + } +} + +/** + * decreases font size until content fits to page + */ +function fixFont() { + decreaseFontSizes(); + var resume = getResumeDOMElement(); + if (contentIsGreaterThanPage(resume)) fixFont(); +} + +setPageDOMElement(); +checkFont();