ilia/resume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

REMOVE auto adjust font

Browse Source
This commit is contained in:
unpregnant 2017-02-11 10:05:20 +01:00
parent 328e389098
commit a9cbbd6934
10 changed files with 83 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -127,6 +127,17 @@ Import new less file in `/less/fonts.less`:
## Adding a template
TODO
- add folder in resumes, convention: 'resume-X'
- add .less and .mustache with same naming
```html
<page class="a4">
<div id="resume1" class="resume">
<!-- Content goes here -->
</div>
</page>
```
- url
## Contribute

69
public/javascript.js
View File

@ -23,73 +23,6 @@ var getResumeDOMElement = function getResumeDOMElement() {
return page.children[0];
};
/**
* sets letiable 'page' to DOM-element of <page></page>
*/
var setPageDOMElement = function setPageDOMElement() {
page = document.getElementsByTagName('page')[0];
};
/**
* checks whether font needs to be fixed, and if fixes it
*/
var checkFont = function checkFont() {
var resume = getResumeDOMElement();
if (contentIsGreaterThanPage(resume)) fixFont();
};
/**
* checks whether content is greater than page
* @param {HTMLElement} resume
* @return {boolean} false if content fits to page
*/
var contentIsGreaterThanPage = 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 {number} font size of element
*/
var getFontSizeOfElement = function getFontSizeOfElement(element) {
var style = window.getComputedStyle(element, null).getPropertyValue('font-size');
return parseFloat(style);
};
/**
* sets font size of DOM-element
* @param {HTMLElement} element
* @param {number} fontSize
*/
var setFontSizeOfElement = function setFontSizeOfElement(element, fontSize) {
element.style.fontSize = fontSize + 'px';
};
/**
* decreases font size of all DOM-elements
*/
var decreaseFontSizes = function decreaseFontSizes() {
var current = void 0,
newFontSize = void 0;
for (var i = 0; i < elements.length; i++) {
current = elements[i];
newFontSize = getFontSizeOfElement(current) * 0.99;
setFontSizeOfElement(current, newFontSize);
}
};
/**
* decreases font size until content fits to page
*/
var fixFont = function fixFont() {
decreaseFontSizes();
var resume = getResumeDOMElement();
if (contentIsGreaterThanPage(resume)) fixFont();
};
/**
* checks if DOM-element has box-shadow
* @param {HTMLElement} element
@ -198,8 +131,6 @@ var fixResume = function fixResume() {
if (!isResume()) return;
getAllDOMElements();
fixBoxShadows();
setPageDOMElement();
checkFont();
};
fixResume();

2
public/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

28
resumes/resume-grey-boxes/resume-grey-boxes.less
View File

@ -1,3 +1,13 @@
@nameFontSize: 42px;
@cardTitleFontSize: 24px;
@cardTextFontSize: 14px;
@cardTextNameFontSize: 36px;
@chipFontSize: 13px;
@contactFontSize: 14px;
@contactIconFontSize: 8px;
@degreeFontSize: 18px;
@jobtitleFontSize: 18px;
.resume5 {
background: #ECEFF1;
}
@ -56,7 +66,7 @@
.name {
color: white;
margin-top: 16px;
font-size: 42px;
font-size: @nameFontSize;
font-weight: 300;
}
}
@ -86,7 +96,7 @@
display: block;
line-height: 32px;
margin-bottom: 8px;
font-size: 24px;
font-size: @cardTitleFontSize;
font-weight: 300;
padding: 24px;
background: #607D8B;
@ -97,11 +107,11 @@
line-height: 1.5;
font-family: "Roboto", sans-serif;
font-weight: normal;
font-size: 14px;
font-size: @cardTextFontSize;
color: black;
.name {
font-size: 36px;
font-size: @cardTextNameFontSize;
margin-top: 10px;
}
@ -119,7 +129,7 @@
.chip {
display: inline-block;
height: 32px;
font-size: 13px;
font-size: @chipFontSize;
font-weight: 500;
color: rgba(0, 0, 0, 0.6);
line-height: 32px;
@ -141,7 +151,7 @@
width: 100%;
padding: 2.5%;
font-weight: 300px;
font-size: 14px;
font-size: @contactFontSize;
text-align: center;
color: #455A64;
@ -156,14 +166,14 @@
i.fa {
margin-left: 10px;
margin-right: 10px;
font-size: 8px;
font-size: @contactIconFontSize;
color: #969da0;
}
}
}
.degree {
font-size: 18px;
font-size: @degreeFontSize;
}
.degree-description {
@ -219,7 +229,7 @@
line-height: 1.0;
font-family: Roboto,sans-serif;
font-weight: 400;
font-size: 18px;
font-size: @jobtitleFontSize;
color: #000;
}

6
resumes/resume-left-right/resume-left-right.less
View File

@ -3,6 +3,8 @@
@lightergrey: #616161;
@grey: #757575;
@whitegrey: #E0E0E0;
@nameFontSize: 35px;
@positionFontSize: smaller;
#resume1 {
font-family: 'Source Sans Pro', sans-serif;
@ -61,7 +63,7 @@
margin-top: 80px;
margin-bottom: 5px;
font-family: 'Open Sans', sans-serif;
font-size: 35px;
font-size: @nameFontSize;
font-weight: 600;
letter-spacing: 10px;
}
@ -69,7 +71,7 @@
.position {
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
font-size: smaller;
font-size: @positionFontSize;
color: @grey;
margin-bottom: 40px;
}

26
resumes/resume-oblique/resume-oblique.less
View File

@ -1,5 +1,13 @@
@triangle: #006064;
@link: black;
@nameFontSize: 50px;
@positionFontSize: 20px;
@firstRowIconFontSize: 17px;
@firstRowFontSize: 20px;
@educationFirstRowFontSize: 20px;
@skillIconFontSize: 17px;
@skillFontSize: 20px;
@contactFontSize: 20px;
#resume3 {
font-family: 'Open Sans Condensed', sans-serif;
@ -61,7 +69,7 @@
.name {
text-transform: uppercase;
Font-size: 50px;
font-size: @nameFontSize;
display: table-caption;
text-align: right;
line-height: 1.0;
@ -69,7 +77,7 @@
}
.position {
Font-size: 20px;
font-size: @positionFontSize;
display: table-caption;
text-align: right;
line-height: 1.0;
@ -93,11 +101,11 @@
}
.row:first-child {
font-size: 20px;
font-size: @firstRowFontSize;
text-transform: uppercase;
i {
font-size: 17px;
font-size: @firstRowIconFontSize;
}
}
}
@ -109,7 +117,7 @@
margin-bottom: 10px;
.row:first-child {
font-size: 20px;
font-size: @educationFirstRowFontSize;
text-transform: uppercase;
}
}
@ -123,12 +131,12 @@
float: left;
i {
font-size: 17px;
font-size: @skillIconFontSize;
margin-right: 15px;
}
.skill {
font-size: 20px;
font-size: @skillFontSize;
}
}
}
@ -136,7 +144,7 @@
.skills-other {
display: inline-block;
font-size: 20px;
font-size: @skillFontSize;
margin-top: 10px;
line-height: 1;
}
@ -147,7 +155,7 @@
a,
span {
display: inline-block;
font-size: 20px;
font-size: @contactFontSize;
padding-left: 0;
list-style: none;
margin-left: 0;

17
resumes/resume-side-bar/resume-side-bar.less
View File

@ -1,6 +1,11 @@
@dots: rgba(153, 153, 153, 0.6);
@links: black;
@skill: #333;
@nameFontSize: 50px;
@dotsFontSize: 10px;
@experienceFontSize: 19px;
@educationFontSize: 19px;
@skillFontSize: 13px;
#resume2 {
font-family: 'Raleway', sans-serif;
@ -33,7 +38,7 @@
&.person-name {
text-transform: uppercase;
font-size: 50px;
font-size: @nameFontSize;
letter-spacing: 10px;
}
@ -85,7 +90,7 @@
&.dots {
margin-top: 20px;
margin-bottom: 15px;
font-size: 10px;
font-size: @dotsFontSize;
color: @dots;
}
@ -112,11 +117,11 @@
.company {
text-transform: uppercase;
font-size: 19px;
font-size: @experienceFontSize;
}
.job-title {
font-size: 19px;
font-size: @experienceFontSize;
}
}
}
@ -128,7 +133,7 @@
margin-bottom: 10px;
.degree {
font-size: 19px;
font-size: @educationFontSize;
text-transform: uppercase;
margin-bottom: 3px;
}
@ -155,7 +160,7 @@
border: @skill 1px solid;
margin: 3px;
float: left;
font-size: 13px;
font-size: @skillFontSize;
.skill-name {
text-align: center;

5
resumes/resume-spotify/resume-spotify.less
View File

@ -4,13 +4,14 @@
@grey2: #9a9a9a;
@grey3: #767676;
@circle: #c6c6c6;
@fontSize: 20px;
@contactIconFontSize: 30px;
.resume6 {
background: @background;
font-family: 'TypoPRO Montserrat';
font-weight: 300;
}
@fontSize: 20px;
#resume6 {
color: white;
@ -159,7 +160,7 @@
i.fa {
color: rgba(154, 154, 154, 0.8);
font-size: 30px;
font-size: @contactIconFontSize;
margin-right: 20px;
margin-top: 2px;
}

26
resumes/resume-wanted/resume-wanted.less
View File

@ -4,6 +4,14 @@
@page4: #eaeaea;
@cardHeader: #CCC;
@skill: #223;
@cardHeaderIconFontSize: 32px;
@cardHeaderFontSize: 26px;
@nameFontSize: 35px;
@experienceFirstRowFontSize: 18px;
@experienceSecondRowFontSize: 15px;
@educationFirstRowFontSize: 18px;
@educationSecondRowFontSize: 15px;
@skillIconFontSize: 12px;
.resume4 {
background: @page4;
@ -48,14 +56,14 @@
i {
float: left;
font-size: 32px;
font-size: @cardHeaderIconFontSize;
color: @textLight;
}
h3 {
margin: 0;
float: left;
font-size: 26px;
font-size: @cardHeaderFontSize;
font-weight: 300;
margin-left: 10px;
color: @textLight;
@ -104,7 +112,7 @@
.name {
color: @textDark;
font-size: 35px;
font-size: @nameFontSize;
margin-top: 10px;
}
@ -130,12 +138,12 @@
.row {
&:first-child {
font-size: 18px;
font-size: @experienceFirstRowFontSize;
color: @textDark;
}
&:nth-child(2) {
font-size: 15px;
font-size: @experienceSecondRowFontSize;
color: @textLight;
}
}
@ -154,12 +162,12 @@
.row {
&:first-child {
font-size: 18px;
font-size: @educationFirstRowFontSize;
color: @textDark;
}
&:nth-child(2) {
font-size: 15px;
font-size: @educationSecondRowFontSize;
color: @textLight;
}
}
@ -176,13 +184,13 @@
.skill {
i {
margin-right: 5px;
font-size: 12px;
font-size: @skillIconFontSize;
}
width: 50%;
display: inline-block;
float: left;
width: 50%;
font-size: 18px;
font-size: @skill;
color: @skill;
}
}

70
src/javascript.js
View File

@ -21,74 +21,6 @@ const getResumeDOMElement = () => {
return page.children[0];
}
/**
* sets letiable 'page' to DOM-element of <page></page>
*/
const setPageDOMElement = () => {
page = document.getElementsByTagName('page')[0];
}
/**
* checks whether font needs to be fixed, and if fixes it
*/
const checkFont = () => {
const resume = getResumeDOMElement();
if (contentIsGreaterThanPage(resume)) fixFont();
}
/**
* checks whether content is greater than page
* @param {HTMLElement} resume
* @return {boolean} false if content fits to page
*/
const contentIsGreaterThanPage = resume => {
const pageHeight = page.offsetHeight;
const resumeHeight = resume.offsetHeight + marginBottom;
if (pageHeight < resumeHeight) return true;
else return false;
}
/**
* gets font size of DOM-elemnt
* @param {HTMLElement} element
* @return {number} font size of element
*/
const getFontSizeOfElement = element => {
const style = window
.getComputedStyle(element, null)
.getPropertyValue('font-size');
return parseFloat(style);
}
/**
* sets font size of DOM-element
* @param {HTMLElement} element
* @param {number} fontSize
*/
const setFontSizeOfElement = (element, fontSize) => {
element.style.fontSize = fontSize + 'px';
}
/**
* decreases font size of all DOM-elements
*/
const decreaseFontSizes = () => {
let current, newFontSize;
for (let i = 0; i < elements.length; i++) {
current = elements[i];
newFontSize = getFontSizeOfElement(current) * 0.99;
setFontSizeOfElement(current, newFontSize);
}
}
/**
* decreases font size until content fits to page
*/
const fixFont = () => {
decreaseFontSizes();
const resume = getResumeDOMElement();
if (contentIsGreaterThanPage(resume)) fixFont();
}
/**
* checks if DOM-element has box-shadow
@ -205,8 +137,6 @@ const fixResume = () => {
if (!isResume()) return;
getAllDOMElements();
fixBoxShadows();
setPageDOMElement();
checkFont();
}
fixResume();