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

ADD font instructions to readme

Browse Source
This commit is contained in:
unpregnant 2017-02-08 20:04:36 +01:00
parent d0fce03261
commit 639c28695c
2 changed files with 55 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
README.md
View File

@ -48,7 +48,7 @@ Feel free to adjust stylings. This project uses LESS. Under `/less` global styli
Each resume has its own directory. For example 'resume-1' is under `/resumes/resume-1`. Each resume directory contains a Mustache template and a less-file. Font-sizes and box-shadows are being adjusted automatically.
#### Font-Sizes
### Font-Sizes
Font-sizes adjust automatically depending on how much content your resume has. The bottom margin of the content is defined in `/public/javascript.js`:
@ -71,7 +71,7 @@ If you want to deactivate the automatic font adjustment just remove this line fr
checkFont();
```
#### CSS3 Box-Shadows
### CSS3 Box-Shadows
Due to this [Chrome bug](http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome), CSS3 box-shadows are not rendered properly in the PDF files. The solution is to add this styling to elements with box-shadows:
@ -87,16 +87,42 @@ Unfortunately, fonts and images get blurred and lose quality. Therefore `fixBoxS
3. adding a new and absolute positioned element (with same size, position, border-radius and box-shadow) to the HTMl body,
4. and adding the stylings for `-webkit-print-color-adjust` and `-webkit-filter` to the new element.
If shadows may be displayed wrong, please check that the element with a box-shadow has a proper height, width and positioning;
If shadows may be displayed wrong, please check that the element with a box-shadow has a proper height, width and positioning.
### Icons
This project contains the [Google Material](https://material.io/icons/) and [fontawesome](http://fontawesome.io/icons/) icon set.
### Adjusting PDF-generation and page size
[mixu/electroshot](https://github.com/mixu/electroshot) is used to generate PDFs. `convertToPdf()` in `/src/htmlToPdf.js` runs a short bash script for each resume running under `localhost:3000/resumes/resume-X`. By default PDF equals A4. For more PDF settings check [mixu/electroshot](https://github.com/mixu/electroshot).
[electroshot](https://github.com/mixu/electroshot) is used to generate PDFs. `convertToPdf()` in `/src/htmlToPdf.js` runs a short bash script for each resume running under `localhost:3000/resumes/resume-X`. By default the PDF size is A4. For more PDF settings check [mixu/electroshot](https://github.com/mixu/electroshot).
### Adding fonts
TODO
To add a font to the project, search for the npm-module of the desired font, e.g. [roboto-fontface](https://www.npmjs.com/package/roboto-fontface) for font face 'Roboto'. Add dependency to `package.json` with `npm i --save`, e.g. `npm i --save roboto-fontface`.
Create a new less file in `/less/fonts`, e.g. 'roboto.less'. `/node_modules` are accessable through localhost:3000. That means if the corresponding woff-file is under `/node_modules/roboto-fontface/anyFont.woff` the source url needs to equal `/roboto-fontface/anyFont.woff`:
```less
@font-face {
font-family: 'Roboto';
src: url('/roboto-fontface/fonts/Roboto/Roboto-Thin.eot');
src: local('Roboto Thin'), local('Roboto-Thin'), url('/roboto-fontface/fonts/Roboto/Roboto-Thin.woff') format('woff'), url('/roboto-fontface/fonts/Roboto/Roboto-Thin.ttf') format('truetype')
font-weight: 100;
font-style: normal;
}
```
Import new less file in `/less/fonts.less`:
```less
@import "fonts/opensans.less";
@import "fonts/montserrat.less";
@import "fonts/raleway.less";
@import "fonts/opensans-condensed.less";
@import "fonts/material-design-icons.less";
@import "fonts/roboto.less";
```
## Adding a template

29
index.html
View File

@ -49,7 +49,7 @@
<h3 id="adjustingstylingsandlayout">Adjusting stylings and layout</h3>
<p>Feel free to adjust stylings. This project uses LESS. Under <code>/less</code> global stylings are defined. You will find here imported fonts and the page layout.</p>
<p>Each resume has its own directory. For example 'resume-1' is under <code>/resumes/resume-1</code>. Each resume directory contains a Mustache template and a less-file. Font-sizes and box-shadows are being adjusted automatically.</p>
<h4 id="fontsizes">Font-Sizes</h4>
<h3 id="fontsizes">Font-Sizes</h3>
<p>Font-sizes adjust automatically depending on how much content your resume has. The bottom margin of the content is defined in <code>/public/javascript.js</code>:</p>
<pre><code class="javascript language-javascript">// minimum margin of content to bottom of page
var marginBottom = 50; // in px
@ -62,7 +62,7 @@ var marginBottom = 50; // in px
<p>If you want to deactivate the automatic font adjustment just remove this line from <code>/public/javascript.js</code>:</p>
<pre><code class="javascript language-javascript">checkFont();
</code></pre>
<h4 id="css3boxshadows">CSS3 Box-Shadows</h4>
<h3 id="css3boxshadows">CSS3 Box-Shadows</h3>
<p>Due to this <a href="http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome">Chrome bug</a>, CSS3 box-shadows are not rendered properly in the PDF files. The solution is to add this styling to elements with box-shadows:</p>
<pre><code class="css language-css">-webkit-print-color-adjust:exact;
-webkit-filter:opacity(1);
@ -74,11 +74,30 @@ var marginBottom = 50; // in px
<li>adding a new and absolute positioned element (with same size, position, border-radius and box-shadow) to the HTMl body,</li>
<li>and adding the stylings for <code>-webkit-print-color-adjust</code> and <code>-webkit-filter</code> to the new element.</li>
</ol>
<p>If shadows may be displayed wrong, please check that the element with a box-shadow has a proper height, width and positioning;</p>
<p>If shadows may be displayed wrong, please check that the element with a box-shadow has a proper height, width and positioning.</p>
<h3 id="icons">Icons</h3>
<p>This project contains the <a href="https://material.io/icons/">Google Material</a> and <a href="http://fontawesome.io/icons/">fontawesome</a> icon set. </p>
<h3 id="adjustingpdfgenerationandpagesize">Adjusting PDF-generation and page size</h3>
<p><a href="https://github.com/mixu/electroshot">mixu/electroshot</a> is used to generate PDFs. <code>convertToPdf()</code> in <code>/src/htmlToPdf.js</code> runs a short bash script for each resume running under <code>localhost:3000/resumes/resume-X</code>. By default PDF equals A4. For more PDF settings check <a href="https://github.com/mixu/electroshot">mixu/electroshot</a>.</p>
<p><a href="https://github.com/mixu/electroshot">electroshot</a> is used to generate PDFs. <code>convertToPdf()</code> in <code>/src/htmlToPdf.js</code> runs a short bash script for each resume running under <code>localhost:3000/resumes/resume-X</code>. By default the PDF size is A4. For more PDF settings check <a href="https://github.com/mixu/electroshot">mixu/electroshot</a>.</p>
<h3 id="addingfonts">Adding fonts</h3>
<p>TODO</p>
<p>To add a font to the project, search for the npm-module of the desired font, e.g. <a href="https://www.npmjs.com/package/roboto-fontface">roboto-fontface</a> for font face 'Roboto'. Add dependency to <code>package.json</code> with <code>npm i --save</code>, e.g. <code>npm i --save roboto-fontface</code>.</p>
<p>Create a new less file in <code>/less/fonts</code>, e.g. 'roboto.less'. <code>/node_modules</code> are accessable through localhost:3000. That means if the corresponding woff-file is under <code>/node_modules/roboto-fontface/anyFont.woff</code> the source url needs to equal <code>/roboto-fontface/anyFont.woff</code>:</p>
<pre><code class="less language-less">@font-face {
font-family: 'Roboto';
src: url('/roboto-fontface/fonts/Roboto/Roboto-Thin.eot');
src: local('Roboto Thin'), local('Roboto-Thin'), url('/roboto-fontface/fonts/Roboto/Roboto-Thin.woff') format('woff'), url('/roboto-fontface/fonts/Roboto/Roboto-Thin.ttf') format('truetype')
font-weight: 100;
font-style: normal;
}
</code></pre>
<p>Import new less file in <code>/less/fonts.less</code>:</p>
<pre><code class="less language-less">@import "fonts/opensans.less";
@import "fonts/montserrat.less";
@import "fonts/raleway.less";
@import "fonts/opensans-condensed.less";
@import "fonts/material-design-icons.less";
@import "fonts/roboto.less";
</code></pre>
<h2 id="addingatemplate">Adding a template</h2>
<p>TODO</p>
<h2 id="buildwith">Build With</h2>