Change pixels to rems, change place of contents directory

Gruntfile.js

@@ -49,10 +49,10 @@ module.exports = function(grunt) {
           basePath: 'src/html/',
 
           content: function() {
-            var files = grunt.file.readJSON('src/html/contents.json');
+            var files = grunt.file.readJSON('src/contents.json');
             var content = {};
             for (var i = 0; i < files.length; i++) {
-              content[files[i]] = grunt.file.readJSON('src/html/contents/' + files[i] + '.json');
+              content[files[i]] = grunt.file.readJSON('src/contents/' + files[i] + '.json');
             }
             content.dev = grunt.config.dev;
             return content;
@@ -68,7 +68,7 @@ module.exports = function(grunt) {
             },
 
             assignColor: function(str) {
-              var colorSettings = grunt.file.readJSON('src/html/contents/color_palette.json'),
+              var colorSettings = grunt.file.readJSON('src/contents/color_palette.json'),
                 selectedColor = colorSettings.colorOptions[str] || 'initial';
               return selectedColor;
             },

README.md

@@ -13,13 +13,13 @@ A simple, modern CV / resume template. Click [here](http://www.smddzcy.com/cv/)
    npm install
    ```
 
-2. Fill in the `.json` files in `src/html/contents` with your information. [Click here to find out how to fill those files.](#filling-your-information)
+2. Fill in the `.json` files in `src/contents` with your information. [Click here to find out how to fill those files.](#filling-your-information)
 
 3. Run `grunt build` and get your fresh CV in the HTML format from `dist/index.html`.
 
 If you want it in the PDF format, you can print the page as a PDF, just like I do all the time. (*Just do not use Chrome to print, that has some real problems with printing*)
 
-**Note:** `src/html/contents/color_palette.json` contains the color settings of your CV. There are some fixed set of colors, and you can look at your options from that file (`colorOptions` field) or [here](https://raw.githubusercontent.com/smddzcy/cv/master/src/img/color-palette.jpg) or `src/img/color-palette.jpg` file.
+**Note:** `src/contents/color_palette.json` contains the color settings of your CV. There are some fixed set of colors, and you can look at your options from that file (`colorOptions` field) or [here](https://raw.githubusercontent.com/smddzcy/cv/master/src/img/color-palette.jpg) or `src/img/color-palette.jpg` file.
 
 ## Filling Your Information
 
@@ -210,7 +210,7 @@ You can pick one of the TODO's below and start contributing right away. Thank yo
 - [X] Carets on descriptions should be removed (or they should be optional), they're too distracting when the content is dense.
 - [ ] "Honors & Awards" part should definitely have descriptions.
 - [X] Print styles should be moved to its own file, and it should be called explicitly as a print stylesheet. (with `media="print"` in HTML)
-- [X] Documentation for color palette (`src/html/contents/color_palette.json`)
+- [X] Documentation for color palette (`src/contents/color_palette.json`)
 - [ ] Element ordering - Places of the elements should be changed easily
 - [ ] Font size - Font size should be optional, not hard-coded
 

src/less/base.less

@@ -1,22 +1,28 @@
 @import 'https://fonts.googleapis.com/css?family=EB+Garamond&subset=latin-ext';
 // @import url(https://fonts.googleapis.com/css?family=Lato);
 
+@rem: 16px;
+
 * {
   font-family: 'EB Garamond', serif;
 }
 
+html, body {
+  font-size: @rem;
+}
+
 h1,
 h2 {
   font-weight: 600;
 }
 
 h1 {
-  font-size: 20px;
+  font-size: 1.3rem;
   color: @dark-grey;
 }
 
 h2 {
-  font-size: 16px;
+  font-size: 1.05rem;
   color: @grey;
 }
 

src/less/header.less

@@ -3,18 +3,18 @@ header {
   border-bottom: 2px solid @grey;
 
   p {
-    padding-top: 15px;
+    padding-top: 0.8rem;
   }
 
   .name {
     // color: #4A4A4A;
     color: @dark-grey;
-    font-size: 28px;
+    font-size: 1.75rem;
     text-transform: uppercase;
   }
 
   .profession {
-    font-size: 20px;
+    font-size: 1.25rem;
     color: @grey;
   }
 

src/less/mobile.less

@@ -6,13 +6,13 @@
   #first-half-page {
     margin-left: 0 !important;
     margin-right: 0 !important;
-    padding-right: 17px;
+    padding-right: 1rem;
   }
 
   #second-half-page {
     margin-left: 0 !important;
     margin-right: 0 !important;
-    padding-left: 17px;
+    padding-left: 1rem;
   }
 
   header {
@@ -35,7 +35,7 @@
     }
 
     .info-pic + .info-left .name {
-      margin-top: 20px;
+      margin-top: 1.25rem;
     }
   }
 

src/less/section.less

@@ -4,10 +4,10 @@
 
 .section-header {
   display: table;
-  font-size: 24px;
+  font-size: 1.5rem;
   border-bottom: 2px @grey dashed;
-  margin-bottom: 12px;
-  margin-top: 10px;
+  margin-bottom: 0.7rem;
+  margin-top: 0.5rem;
 }
 
 main {
@@ -16,15 +16,15 @@ main {
   }
 
   section {
-    padding-bottom: 10px;
+    padding-bottom: 0.6rem;
     flex: 1 0 100%;
 
     .bullets {
       .padding-left-bs();
     }
 
     .section-inner-header + .bullets {
-      padding-top: 5px;
+      padding-top: 0.3rem;
     }
 
     h1,
@@ -33,7 +33,7 @@ main {
     h4,
     h5,
     h6 {
-      margin-bottom: 3px;
+      margin-bottom: 0.2rem;
     }
 
     ul {
@@ -48,7 +48,7 @@ main {
     }
 
     p {
-      padding: 5px 0;
+      padding: 0.3rem 0;
       margin-bottom: 0;
       color: @grey;
       line-height: 1.3;
@@ -61,7 +61,7 @@ main {
       }
 
       .location {
-        font-size: 14px;
+        font-size: 0.8rem;
       }
     }
   }