UPDATE style structure

public/javascript.js

@@ -1,9 +1,5 @@
 'use strict';
 
-// minimum margin of content to bottom of page
-var marginBottom = 50;
-// DOM-element of <page></page>
-var page = void 0;
 // all dom elements
 var elements = void 0;
 
@@ -15,14 +11,6 @@ var getAllDOMElements = function getAllDOMElements() {
     elements = document.getElementsByTagName('*');
 };
 
-/**
- * gets DOM-element of #resumeX
- * @return {HTMLElement}
- */
-var getResumeDOMElement = function getResumeDOMElement() {
-    return page.children[0];
-};
-
 /**
  * checks if DOM-element has box-shadow
  * @param  {HTMLElement}  element

public/styles/resume-grey-boxes.min.css

@@ -0,0 +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}

public/styles/resume-left-right.min.css

@@ -0,0 +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}

public/styles/resume-oblique.min.css

@@ -0,0 +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}

public/styles/resume-side-bar.min.css

@@ -0,0 +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}

public/styles/resume-spotify.min.css

@@ -0,0 +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}

public/styles/resume-wanted.min.css

@@ -0,0 +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}

resumes/resume-grey-boxes/style.less

@@ -47,7 +47,7 @@
             text-align: center;
 
             .img {
-                background: url('person.jpg');
+                background: url('/person.jpg');
                 background-position: center;
                 background-size: cover;
                 height: 100px;

resumes/resume-oblique/style.less

@@ -56,7 +56,7 @@
                 position: absolute;
                 top: 0;
                 right: 0;
-                background: url('person.jpg');
+                background: url('/person.jpg');
                 background-position: center;
                 background-size: cover;
             }

resumes/resume-wanted/style.less

@@ -91,7 +91,7 @@
             top: 50px;
 
             .img {
-                background: url('person.jpg');
+                background: url('/person.jpg');
                 background-position: center;
                 background-size: cover;
                 background-repeat: no-repeat;

resumes/views/githubPages.mustache

@@ -1,24 +0,0 @@
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="public/style.min.css" rel=" stylesheet">
-    <title> Best resume ever </title>
-</head>
-
-<body>
-    <a href="https://github.com/SalamiMitPizza/best-resume-ever" target="_blank">
-        <div id="forkme">View on Github <img src="public/github.png" /></div>
-    </a>
-    <div id="readme">
-        {{{content}}}
-    </div>
-    <script>
-        var headline = document.getElementsByTagName('h1')[0];
-        headline.innerHTML += '<img src="public/suitcase.png" width="150" />';
-    </script>
-</body>
-
-</html>

resumes/views/layout.mustache

@@ -5,7 +5,8 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet">
-    <link href="/style.min.css" rel=" stylesheet">
+    <link href="/styles/style.min.css" rel=" stylesheet">
+    <link href="/styles/{{style}}.min.css" rel=" stylesheet">
     <title> Best resume ever </title>
 </head>
 

src/Server.js

@@ -38,10 +38,14 @@ const Server = {
      */
     setRoute: function(path, template) {
         app.get(path, (req, res) => {
+            let style = null;
+            const stylePath = path.replace('/', '');
+            if (path != '') style = stylePath;
             res.render('views/layout', {
                 partials: {
                     content: template
                 },
+                style: style,
                 resumes: resumes,
                 person: person
             });

src/StyleCompiler.js

@@ -38,25 +38,26 @@ const StyleCompiler = {
      * @return {Promise}
      */
     run: async function() {
-        const directories = Util.getResumesFromDirectories();
         const styleLess = await Util.readFileContent(path.join(__dirname, '../less/style.less'));
-        let css = await StyleCompiler.compile(styleLess);
+        const styleCss = await StyleCompiler.compile(styleLess);
+        const styleMinified = await StyleCompiler.minify(styleCss);
+        const stylePath = path.join(__dirname, '../public/styles/style.min.css');
+        await Util.writeFile(stylePath, styleMinified.styles);
+
+        const directories = Util.getResumesFromDirectories();
         const contents = await Promise.all(
             directories
-            .map(resume => Util.readFileContent(
-                path.join(__dirname, '../resumes/' + resume.path + '/style.less')
-            ))
+            .map(async(resume) => {
+                const resumeLess = await Util.readFileContent(
+                    path.join(__dirname, '../resumes/' + resume.path + '/style.less')
+                );
+                const resumeCss = await StyleCompiler.compile(resumeLess);
+                const resumeMinified = await StyleCompiler.minify(resumeCss);
+                //write file
+                const resumePath = path.join(__dirname, '../public/styles/' + resume.path + '.min.css');
+                await Util.writeFile(resumePath, resumeMinified.styles);
+            })
         );
-        const compiledContents = await Promise.all(
-            contents
-            .map(content => StyleCompiler.compile(content))
-        );
-        const ret = compiledContents.reduce((pre, cur) => pre += cur, css);
-        // minify
-        const minCSS = await StyleCompiler.minify(ret);
-        // write file
-        const p = path.join(__dirname, '../public/style.min.css');
-        await Util.writeFile(p, minCSS.styles);
     }
 };