Merge branch 'master' into multilang_content

assets/scss/_base.scss

@@ -8,10 +8,10 @@
 
 html {
     font-size: 62.5%;
-    background-color: $color-background;
+    background-color: $color-page-background;
 
     @media print {
-        background-color: $color-white;
+        background-color: $color-light;
     }
 }
 
@@ -19,7 +19,7 @@ html {
     // A4 paper
     width: $page-width;
     min-height: paper_height($page-width);
-    background-color: $color-white;
+    background-color: $color-light;
 
     @media screen and (min-width: 60rem) {
         margin: 6rem 0;
@@ -44,6 +44,6 @@ body {
 }
 
 ::selection {
-    color: $color-white;
+    color: $color-light;
     background-color: darken(rgba($color-primary, 0.6), 10%);
 }

assets/scss/_layout.scss

@@ -15,7 +15,7 @@
                 width: 100%;
                 position: absolute;
                 bottom: 0.5rem;
-                color: darken($color-white, 10%);
+                color: darken($color-light, 10%);
             }
         }
     }
@@ -24,7 +24,8 @@
         position: absolute;
         float: right;
         width: $width-right-col;
-        background-color: $color-right-col;
+        background-color: $color-right-col-background;
+        color: $color-right-col-body-text;
         height: 100%;
         padding: 2rem 3rem;
         right: 1rem;

assets/scss/_mixins.scss

@@ -1,7 +1,7 @@
 @mixin shadow($distance) {
-    -webkit-box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-grey-dark, $distance * 0.3);
-    -moz-box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-grey-dark, $distance * 0.3);
-    box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-grey-dark, $distance * 0.3);
+    -webkit-box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-dark, $distance * 0.3);
+    -moz-box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-dark, $distance * 0.3);
+    box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-dark, $distance * 0.3);
 }
 
 @mixin hz-center {

assets/scss/_typography.scss

@@ -3,7 +3,7 @@ body {
     font-weight: 300;
     line-height: 1.7;
     font-size: 1.12rem;
-    color: $color-grey-dark;
+    color: $color-dark;
 }
 
 .mainHeading {
@@ -18,7 +18,7 @@ body {
 
 .section__title {
     font-size: 2.1rem;
-    color: $color-grey-dark;
+    color: $color-dark;
 }
 
 h1,

assets/scss/components/_contact.scss

@@ -6,8 +6,8 @@
         font-size: 1rem;
 
         & > i {
-            background-color: $color-primary;
-            color: $color-primary-text;
+            background-color: $color-right-col-icon-background;
+            color: $color-right-col-icon-primary;
             font-size: 1rem;
             text-align: center;
             border-radius: 50%;

assets/scss/components/_experience.scss

@@ -31,13 +31,13 @@
     }
 
     &__company {
-        color: $color-grey-dark;
+        color: $color-dark;
     }
 
     &__position {
         text-transform: uppercase;
         font-size: 1.3rem;
-        color: $color-grey-dark;
+        color: $color-dark;
     }
 
     &__date,
@@ -55,7 +55,7 @@
     &__place {
         &::before {
             font-family: 'Material Icons';
-            color: $color-primary;
+            color: $color-icon-background;
             font-size: 1.4rem;
             content: 'place';
             display: inline-block;
@@ -80,8 +80,8 @@
         font-size: 0.9rem;
         font-weight: 400;
         display: inline-block;
-        background-color: $color-primary;
-        color: $color-primary-text;
+        background-color: $color-icon-background;
+        color: $color-icon-primary;
         border-radius: 1rem;
         padding: 0.1rem 0.6rem;
     }

assets/scss/components/_references.scss

@@ -0,0 +1,63 @@
+.references {
+    &__item {
+        display: inline-block;
+        min-width: 49%;
+        @include avoid-break;
+        &:not(:first-child) {
+            padding-top: 1.5rem;
+        }
+    }
+
+    &__header,
+    &__subheader {
+        display: block;
+        width: 100%;
+    }
+
+    &__subheader {
+        margin-bottom: 0.5rem;
+    }
+
+    &__person {
+        position: relative;
+        transition: transform 0.2s cubic-bezier($cubic);
+
+        &:hover {
+            transform: translateX(0.5rem);
+        }
+    }
+
+    &__name,
+    &__relation {
+        text-align: left;
+        width: 100%;
+        color: $color-dark;
+    }
+
+    &__contact {
+        position: relative;
+        font-size: 1rem;
+
+        & > i {
+            background-color: $color-icon-background;
+            color: $color-icon-primary;
+            font-size: 1rem;
+            text-align: center;
+            border-radius: 50%;
+            padding-top: 0.5rem;
+            width: 2rem;
+            height: 2rem;
+            margin-right: 0.5rem;
+            margin-bottom: 0.5rem;
+        }
+        & > span {
+            @include vt-center;
+            min-height: 1.5rem;
+            line-height: 1.2rem;
+        }
+    }
+
+    & li {
+        list-style: none;
+    }
+}

assets/scss/components/_side_section.scss

@@ -8,6 +8,7 @@
         overflow: hidden;
         text-align: center;
         margin-bottom: 1rem;
+        color: $color-right-col-heading-text;
     }
 
     &__title {
@@ -17,8 +18,8 @@
         &::before {
             content: '';
             position: absolute;
-            border-top: 1px solid $color-secondary;
-            border-bottom: 1px solid $color-secondary;
+            border-top: 1px solid $color-right-col-heading-text;
+            border-bottom: 1px solid $color-right-col-heading-text;
             width: 10rem;
             height: 4px;
             margin-top: 1.1rem;

assets/scss/components/_skills.scss

@@ -10,7 +10,7 @@
 
             &:hover ~ li {
                 background-color: $color-primary;
-                color: $color-white;
+                color: $color-light;
             }
 
         }
@@ -28,7 +28,7 @@
 
             &:hover {
                 background-color: $color-primary;
-                color: $color-white;
+                color: $color-light;
             }
         }
     }

assets/scss/main.scss

@@ -1,10 +1,20 @@
+$color-light: {{ .Site.Params.colorLight | default "#fff"}} !default;
+$color-dark: {{ .Site.Params.colorDark | default "#666"}} !default;
+$color-page-background: {{ .Site.Params.colorPageBackground | default "#ddd" }} !default;
+
 $color-primary: {{ .Site.Params.colorPrimary | default "#e3bfb8"}} !default;
-$color-primary-text: {{ .Site.Params.colorPrimaryText | default "#fff"}} !default;
-$color-background: {{ .Site.Params.colorPageBackground | default "#ddd" }} !default;
-$color-right-col: {{ .Site.Params.colorRightColumnBackground | default "#f5f5f5" }} !default;
-$color-white: {{ .Site.Params.colorLight | default "#fff"}} !default;
+
 $color-secondary: {{ .Site.Params.colorSecondary | default "#aaa"}} !default;
-$color-grey-dark: {{ .Site.Params.colorDark | default "#666"}} !default;
+
+$color-icon-primary: {{ .Site.Params.colorIconPrimary | default "#fff"}} !default;
+$color-icon-background: {{ .Site.Params.colorIconBackground | default "#e3bfb8"}} !default;
+
+$color-right-col-background: {{ .Site.Params.colorRightColumnBackground | default "#f5f5f5" }} !default;
+$color-right-col-heading-text: {{ .Site.Params.colorRightColumnHeadingText | default "#666" }} !default;
+$color-right-col-body-text: {{ .Site.Params.colorRightColumnBodyText | default "#666" }} !default;
+$color-right-col-icon-primary: {{ .Site.Params.colorRightColumnIconPrimary | default "#fff" }} !default;
+$color-right-col-icon-background: {{ .Site.Params.colorRightColumnIconBackground | default "#e3bfb8" }} !default;
+
 $pages: {{ .Site.Params.pages | default 1}} !default;
 
 @import "abstract";
@@ -18,6 +28,7 @@ $pages: {{ .Site.Params.pages | default 1}} !default;
 @import "components/side_section";
 @import "components/experience";
 @import "components/education";
+@import "components/references";
 @import "components/contact";
 @import "components/avatar";
 @import "components/skills";

exampleSite/config.toml

@@ -10,11 +10,16 @@ baseURL = "https://example.com/"
 title = "Example - CV"
 
 [params]
-colorDark = "#666"
 colorLight = "#fff"
+colorDark = "#666"
 colorPageBackground = "#ddd"
 colorPrimary = "#e3bfb8"
-colorPrimaryText = "#fff"
-colorRightColumnBackground = "#f5f5f5"
 colorSecondary = "#aaa"
+colorIconPrimary = "#fff"
+colorIconBackground = "#e3bfb8"
+colorRightColumnBackground = "#f5f5f5"
+colorRightColumnHeadingText = "#666"
+colorRightColumnBodyText = "#666"
+colorRightColumnIconPrimary = "#fff"
+colorRightColumnIconBackground = "#e3bfb8"
 pages = 1

exampleSite/data/content.yaml

@@ -64,6 +64,27 @@ Education:
     Date: Sep 2012 - Nov 2017
     Details: Specialised in data analysis
 
+References:
+  - Name: Person One
+    Relation: Co-worker at Super Cool Company
+    Contacts:
+    - Icon: fas fa-phone
+      Info: +44 123 456 790
+    - Icon: fas fa-envelope
+      Info: contact@person-one.com
+    - Icon: fas fa-map-marker-alt
+      Info: Melbourne, Australia
+  - Name: Person Two
+    Relation: Boss at Super Cool Company
+    Contacts:
+    - Icon: fas fa-phone
+      Info: +44 123 456 791
+    - Icon: fas fa-envelope
+      Info: contact@person-two.com
+    - Icon: fas fa-map-marker-alt
+      Info: Sydney, Australia
+
+
 Skills:
   - Family: Programming
     Items:

i18n/de.toml

@@ -7,6 +7,9 @@ other = "Erfahrung"
 [education]
 other = "Bildung"
 
+[references]
+other = "Referenzen"
+
 [skills]
 other = "Skills"
 

i18n/en.toml

@@ -7,6 +7,9 @@ other = "Experience"
 [education]
 other = "Education"
 
+[references]
+other = "References"
+
 [skills]
 other = "Skills"
 

i18n/pl.toml

@@ -7,6 +7,9 @@ other = "Doświadczenie"
 [education]
 other = "Wykształcenie"
 
+[references]
+other = "Referencje"
+
 [skills]
 other = "Umiejętności"
 

layouts/index.html

@@ -10,6 +10,7 @@
             {{ partial "_profile.html" $data }}
             {{ partial "_experience.html" $data }}
             {{ partial "_education.html" $data }}
+            {{ partial "_references.html" $data }}
 
         </div>
         <div class="content__right">

layouts/partials/_references.html

@@ -0,0 +1,32 @@
+{{ if .Site.Data.content.References }}
+<div id="references" class="section">
+    <div class="section__heading">
+        <h2 class="section__title">{{ i18n "references" }}</h2>
+    </div>
+    <div class="section__content">
+        <div class="references">
+            {{ range .Site.Data.content.References }}
+            <div class="references__item">
+                <div class="references__person">
+                    <div class="references__header">
+                        <h3 class="references__name">
+                            {{ .Name | safeHTML}}
+                        </h3>
+                    </div>
+                    <div class="references__subheader">
+                        <h4 class="references__relation">
+                            {{ .Relation | safeHTML}}
+                        </h4>
+                    </div>
+                    {{ range .Contacts }}
+                        <li class="references__contact">
+                            <i class="{{ .Icon }}"></i><span>{{ .Info | safeHTML }}</span>
+                        </li>
+                    {{ end }}
+                </div>
+            </div>
+            {{ end }}
+        </div>
+    </div>
+</div>
+{{ end }}