Merge pull request #223 from OrenSchwartz/material_dark_with_about_and_knowledge

added support for about and knowledge/ additional skills in material_…

src/resumes/material-dark.vue

@@ -75,7 +75,7 @@
       </div>
     </a>
 
-    <div class="item last">
+    <div class="item">
       <div class="section-headline">
         {{ lang.skills }}
       </div>
@@ -90,15 +90,27 @@
         </div>
       </div>
     </div>
+
+    <div class="item last">
+      <div v-if="person.knowledge" class="section-headline">
+        {{ lang.additionalSkills }}
+      </div>
+      <div v-if="person.knowledge" class="skill">
+        <div class="right">
+          <span>{{person.knowledge}}</span>
+        </div>
+      </div>
+    </div>
   </div>
 
   <div class="rightCol">
     <div class="title">
       <h2>{{person.name.first}} {{person.name.middle}} {{person.name.last}}</h2>
-      <div>{{person.position}}</div>
+      <div class="description">{{person.position}}</div>
+      <span class="about">{{person.about}}</span>
     </div>
 
-    <div class="section-headline">{{ lang.experience }}</div>
+    <div class="section-headline experience">{{ lang.experience }}</div>
     <div class="block" v-for="experience in person.experience" :key="experience.company">
       <a
       :href="experience.website">
@@ -160,7 +172,7 @@ a {
 .title {
   right:25px;
   padding-left:20px;
-  padding-top:20px;
+  padding-top:10px;
   bottom:25px;
   h2 {
     text-transform:uppercase;
@@ -200,6 +212,10 @@ a {
     text-transform:uppercase;
     opacity:0.8;
   }
+  .description {
+    margin-top: -20px;
+    margin-botton: 20px;
+  }
 }
 .section-headline {
   text-transform:uppercase;
@@ -208,8 +224,8 @@ a {
   font-size:10pt;
   opacity:0.8;
   margin-left:20px;
-  margin-top:40px;
-  margin-bottom:20px;
+  margin-top:12px;
+  margin-bottom:6px;
   color:#3f3d3c;
 }
 .c {
@@ -271,6 +287,16 @@ h4 {
   float:right;
   display:flex;
   flex-direction:column;
+  .experience {
+    margin-top: 40px;
+  }
+  .about {
+    display: block;
+    margin-top:8px !important;
+    font-weight:375;
+    font-size: 16px;
+    color:rgba(0,0,0,0.541176);
+  }
   .block {
     width:90%;
     position:relative;
@@ -404,6 +430,9 @@ h4 {
       clear:both;
       width:97%;
       padding-top:4px;
+      span {
+        font-size: 13px;
+      }
       .left {
         float:left;
         width:10%;
@@ -445,9 +474,15 @@ h4 {
       }
     }
   }
-  .item.last .text {
-    border-bottom-style:none;
-    padding-bottom:0;
+  .item.last{ 
+    .text {
+      border-bottom-style:none;
+      padding-bottom:0;
+    }
+
+    .section-headline {
+      margin-top: 0 !important;
+    }
   }
 }
 #myselfpic {