ADD auto adjust font

This commit is contained in:
unpregnant 2017-02-22 20:01:30 +01:00
parent a47f66cfb9
commit 60b24d8645
20 changed files with 159 additions and 228 deletions

View File

@ -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 <page></page>
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 <page></page>
*/
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

View File

@ -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}
.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}

View File

@ -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}
#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}

View File

@ -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}
#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}

View File

@ -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}
#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}

View File

@ -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}
.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}

View File

@ -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}
.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}

View File

@ -1,5 +1,5 @@
<page class="a4 resume4">
<div id="resume5">
<div id="resume5" autofont>
<div class="introduction dp3">
<div class="wrapper">
<div class="img dp4">

View File

@ -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);
}

View File

@ -1,5 +1,5 @@
<page class="a4">
<div id="resume1" class="resume">
<div id="resume1" class="resume" autofont>
<div class="row text-center">
<span class="name">{{person.name.first}} {{person.name.last}}</span>
</div>

View File

@ -9,6 +9,7 @@
#resume1 {
font-family: 'Source Sans Pro', sans-serif;
font-size: @fontSize;
padding-bottom: 50px;
h3 {
margin-bottom: 0;

View File

@ -1,6 +1,6 @@
<page class="a4">
<div id="resume3" class="resume">
<div id="resume3" class="resume" autofont>
<div class="resume-header">
<div class="triangle"></div>
<div class="person-header">

View File

@ -11,6 +11,7 @@
#resume3 {
font-family: 'Open Sans Condensed', sans-serif;
padding-bottom: 50px;
h3 {
font-weight: bold;

View File

@ -1,5 +1,5 @@
<page class="a4">
<div id="resume2" class="resume">
<div id="resume2" class="resume" autofont>
<div class="top-row">
<span class="person-name"> {{person.name.first}} {{person.name.last}} </span>
<span class="person-position"> {{person.position}} </span>

View File

@ -9,6 +9,7 @@
#resume2 {
font-family: 'Raleway', sans-serif;
padding-bottom: 50px;
h3 {
text-transform: uppercase;

View File

@ -1,5 +1,5 @@
<page class="a4 resume6">
<div id="resume6" class="resume">
<div id="resume6" class="resume" autofont>
<div class="left-col">
<div class="person-box">
<div class="img"></div>

View File

@ -14,6 +14,7 @@
}
#resume6 {
padding-bottom: 50px;
color: white;
h3 {

View File

@ -1,6 +1,6 @@
<page class="a4 resume4">
<div id="resume4" class="resume">
<div id="resume4" class="resume" autofont>
<div class="resume-header">
<div class="box"></div>
<div class="person-header">

View File

@ -20,6 +20,7 @@
#resume4 {
font-family: 'Roboto', sans-serif;
color: @textDark;
padding-bottom: 50px;
a,
a:focus,

View File

@ -1,136 +1,95 @@
// all dom elements
let elements;
// minimum margin of content to bottom of page
var marginBottom = 0;
// DOM-element of <page></page>
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 <page></page>
*/
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();