diff options
author | Inês Almeida <ineesalmeida@gmail.com> | 2021-08-24 22:43:06 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-08-24 22:43:06 +0300 |
commit | cff124684086a4b1afa6c003730d81b867b028a4 (patch) | |
tree | 90fc291b11929a218472d4df86b1af92d5ad33a2 | |
parent | f44d5f6cb73accfe2483d17cd92982fa1ea0315f (diff) | |
parent | 9db1cf349f58768b0745f745c74359a4814cb9a4 (diff) |
Merge pull request #16 from eshjordan/feature/references
References
Looking good, merging this PR!
-rw-r--r-- | assets/scss/_base.scss | 8 | ||||
-rw-r--r-- | assets/scss/_layout.scss | 5 | ||||
-rw-r--r-- | assets/scss/_mixins.scss | 6 | ||||
-rw-r--r-- | assets/scss/_typography.scss | 4 | ||||
-rw-r--r-- | assets/scss/components/_contact.scss | 4 | ||||
-rw-r--r-- | assets/scss/components/_experience.scss | 10 | ||||
-rw-r--r-- | assets/scss/components/_references.scss | 63 | ||||
-rw-r--r-- | assets/scss/components/_side_section.scss | 5 | ||||
-rw-r--r-- | assets/scss/components/_skills.scss | 4 | ||||
-rw-r--r-- | assets/scss/main.scss | 21 | ||||
-rw-r--r-- | exampleSite/config.toml | 11 | ||||
-rw-r--r-- | exampleSite/data/content.yaml | 21 | ||||
-rw-r--r-- | i18n/de.toml | 3 | ||||
-rw-r--r-- | i18n/en.toml | 3 | ||||
-rw-r--r-- | i18n/pl.toml | 3 | ||||
-rw-r--r-- | layouts/index.html | 1 | ||||
-rw-r--r-- | layouts/partials/_references.html | 32 |
17 files changed, 174 insertions, 30 deletions
diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss index 127b986..bb0df1d 100644 --- a/assets/scss/_base.scss +++ b/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%); } diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss index 6d95037..634c2dc 100644 --- a/assets/scss/_layout.scss +++ b/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; diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss index 1756e90..ffe344c 100644 --- a/assets/scss/_mixins.scss +++ b/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 { diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss index 20c6034..38e47d9 100644 --- a/assets/scss/_typography.scss +++ b/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, diff --git a/assets/scss/components/_contact.scss b/assets/scss/components/_contact.scss index 18d1111..1f0ad91 100644 --- a/assets/scss/components/_contact.scss +++ b/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%; diff --git a/assets/scss/components/_experience.scss b/assets/scss/components/_experience.scss index 8071cec..5a0458c 100644 --- a/assets/scss/components/_experience.scss +++ b/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; } diff --git a/assets/scss/components/_references.scss b/assets/scss/components/_references.scss new file mode 100644 index 0000000..80bb9a9 --- /dev/null +++ b/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; + } +} diff --git a/assets/scss/components/_side_section.scss b/assets/scss/components/_side_section.scss index 3eae328..d7a9b26 100644 --- a/assets/scss/components/_side_section.scss +++ b/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; diff --git a/assets/scss/components/_skills.scss b/assets/scss/components/_skills.scss index 54b2162..9c117ae 100644 --- a/assets/scss/components/_skills.scss +++ b/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; } } } diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 4897445..8142e82 100644 --- a/assets/scss/main.scss +++ b/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"; diff --git a/exampleSite/config.toml b/exampleSite/config.toml index b160eb9..777bb61 100644 --- a/exampleSite/config.toml +++ b/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 diff --git a/exampleSite/data/content.yaml b/exampleSite/data/content.yaml index 8779390..88aa868 100644 --- a/exampleSite/data/content.yaml +++ b/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: diff --git a/i18n/de.toml b/i18n/de.toml index 9679b5f..abd2e7d 100644 --- a/i18n/de.toml +++ b/i18n/de.toml @@ -7,6 +7,9 @@ other = "Erfahrung" [education] other = "Bildung" +[references] +other = "Referenzen" + [skills] other = "Skills" diff --git a/i18n/en.toml b/i18n/en.toml index 86833ae..22d13c7 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -7,6 +7,9 @@ other = "Experience" [education] other = "Education" +[references] +other = "References" + [skills] other = "Skills" diff --git a/i18n/pl.toml b/i18n/pl.toml index 98071a5..c9c9291 100644 --- a/i18n/pl.toml +++ b/i18n/pl.toml @@ -7,6 +7,9 @@ other = "Doświadczenie" [education] other = "Wykształcenie" +[references] +other = "Referencje" + [skills] other = "Umiejętności" diff --git a/layouts/index.html b/layouts/index.html index 5081ad6..fa0fd5a 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -9,6 +9,7 @@ {{ partial "_profile.html" . }} {{ partial "_experience.html" . }} {{ partial "_education.html" . }} + {{ partial "_references.html" . }} </div> <div class="content__right"> diff --git a/layouts/partials/_references.html b/layouts/partials/_references.html new file mode 100644 index 0000000..2de14fe --- /dev/null +++ b/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 }} |