From f2321f1627ee79880e8296082bbae7a81898cf36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Boche=C5=84ski?= Date: Sat, 26 Jun 2021 19:15:50 +0200 Subject: Move 'assets/sass' -> 'assets/scss' MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We don't use SASS so this was misleading. Signed-off-by: Piotr Bocheński --- assets/sass/_abstract.scss | 7 --- assets/sass/_base.scss | 49 ----------------- assets/sass/_functions.scss | 3 -- assets/sass/_layout.scss | 34 ------------ assets/sass/_mixins.scss | 30 ----------- assets/sass/_typography.scss | 28 ---------- assets/sass/components/_404.scss | 8 --- assets/sass/components/_avatar.scss | 30 ----------- assets/sass/components/_contact.scss | 24 --------- assets/sass/components/_education.scss | 5 -- assets/sass/components/_experience.scss | 88 ------------------------------- assets/sass/components/_interests.scss | 12 ----- assets/sass/components/_languages.scss | 15 ------ assets/sass/components/_section.scss | 30 ----------- assets/sass/components/_side_section.scss | 39 -------------- assets/sass/components/_skills.scss | 35 ------------ assets/sass/main.scss | 29 ---------- assets/scss/_abstract.scss | 7 +++ assets/scss/_base.scss | 49 +++++++++++++++++ assets/scss/_functions.scss | 3 ++ assets/scss/_layout.scss | 34 ++++++++++++ assets/scss/_mixins.scss | 30 +++++++++++ assets/scss/_typography.scss | 28 ++++++++++ assets/scss/components/_404.scss | 8 +++ assets/scss/components/_avatar.scss | 30 +++++++++++ assets/scss/components/_contact.scss | 24 +++++++++ assets/scss/components/_education.scss | 5 ++ assets/scss/components/_experience.scss | 88 +++++++++++++++++++++++++++++++ assets/scss/components/_interests.scss | 12 +++++ assets/scss/components/_languages.scss | 15 ++++++ assets/scss/components/_section.scss | 30 +++++++++++ assets/scss/components/_side_section.scss | 39 ++++++++++++++ assets/scss/components/_skills.scss | 35 ++++++++++++ assets/scss/main.scss | 29 ++++++++++ layouts/partials/head.html | 2 +- 35 files changed, 467 insertions(+), 467 deletions(-) delete mode 100644 assets/sass/_abstract.scss delete mode 100644 assets/sass/_base.scss delete mode 100644 assets/sass/_functions.scss delete mode 100644 assets/sass/_layout.scss delete mode 100644 assets/sass/_mixins.scss delete mode 100644 assets/sass/_typography.scss delete mode 100644 assets/sass/components/_404.scss delete mode 100644 assets/sass/components/_avatar.scss delete mode 100644 assets/sass/components/_contact.scss delete mode 100644 assets/sass/components/_education.scss delete mode 100644 assets/sass/components/_experience.scss delete mode 100644 assets/sass/components/_interests.scss delete mode 100644 assets/sass/components/_languages.scss delete mode 100644 assets/sass/components/_section.scss delete mode 100644 assets/sass/components/_side_section.scss delete mode 100644 assets/sass/components/_skills.scss delete mode 100644 assets/sass/main.scss create mode 100644 assets/scss/_abstract.scss create mode 100644 assets/scss/_base.scss create mode 100644 assets/scss/_functions.scss create mode 100644 assets/scss/_layout.scss create mode 100644 assets/scss/_mixins.scss create mode 100644 assets/scss/_typography.scss create mode 100644 assets/scss/components/_404.scss create mode 100644 assets/scss/components/_avatar.scss create mode 100644 assets/scss/components/_contact.scss create mode 100644 assets/scss/components/_education.scss create mode 100644 assets/scss/components/_experience.scss create mode 100644 assets/scss/components/_interests.scss create mode 100644 assets/scss/components/_languages.scss create mode 100644 assets/scss/components/_section.scss create mode 100644 assets/scss/components/_side_section.scss create mode 100644 assets/scss/components/_skills.scss create mode 100644 assets/scss/main.scss diff --git a/assets/sass/_abstract.scss b/assets/sass/_abstract.scss deleted file mode 100644 index ffa098a..0000000 --- a/assets/sass/_abstract.scss +++ /dev/null @@ -1,7 +0,0 @@ -// WIDTHS -$width-left-col: 56rem; // 70% -$page-width: 80rem; -$width-right-col: $page-width - $width-left-col; - -// ANIMATIONS -$cubic: 0.63, 0.21, 0.76, 1.58; diff --git a/assets/sass/_base.scss b/assets/sass/_base.scss deleted file mode 100644 index 127b986..0000000 --- a/assets/sass/_base.scss +++ /dev/null @@ -1,49 +0,0 @@ -*, -*::after, -*::before { - margin: 0; - padding: 0; - box-sizing: inherit; -} - -html { - font-size: 62.5%; - background-color: $color-background; - - @media print { - background-color: $color-white; - } -} - -.content { - // A4 paper - width: $page-width; - min-height: paper_height($page-width); - background-color: $color-white; - - @media screen and (min-width: 60rem) { - margin: 6rem 0; - @include shadow(1); - @include hz-center; - } - @media print { - margin: 0; - height: paper_height($page-width) * $pages; - } -} - -body { - box-sizing: border-box; -} - -@media print { - @page { - margin: 0; - size: A4; - } -} - -::selection { - color: $color-white; - background-color: darken(rgba($color-primary, 0.6), 10%); -} diff --git a/assets/sass/_functions.scss b/assets/sass/_functions.scss deleted file mode 100644 index 94fe1cb..0000000 --- a/assets/sass/_functions.scss +++ /dev/null @@ -1,3 +0,0 @@ -@function paper_height($width) { - @return $width / 0.70695553; -} \ No newline at end of file diff --git a/assets/sass/_layout.scss b/assets/sass/_layout.scss deleted file mode 100644 index 6d95037..0000000 --- a/assets/sass/_layout.scss +++ /dev/null @@ -1,34 +0,0 @@ -.content { - position: absolute; - overflow: hidden; - - &__left { - float: left; - width: $width-left-col; - height: 100%; - padding: 3rem 4rem; - - @media screen { - &::after { - content: '2020 © by Inês Almeida | ines-almeida.com'; - height: 4rem; - width: 100%; - position: absolute; - bottom: 0.5rem; - color: darken($color-white, 10%); - } - } - } - - &__right { - position: absolute; - float: right; - width: $width-right-col; - background-color: $color-right-col; - height: 100%; - padding: 2rem 3rem; - right: 1rem; - - @include shadow(0.5); - } -} diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss deleted file mode 100644 index 1756e90..0000000 --- a/assets/sass/_mixins.scss +++ /dev/null @@ -1,30 +0,0 @@ -@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); -} - -@mixin hz-center { - position: absolute; - left: 50%; - transform: translateX(-50%); -} - -@mixin vt-center { - position: absolute; - top: 50%; - transform: translateY(-50%); -} - -@mixin all-center { - position: absolute; - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); -} - -@mixin avoid-break { - @media print { - page-break-inside: avoid; - } -} \ No newline at end of file diff --git a/assets/sass/_typography.scss b/assets/sass/_typography.scss deleted file mode 100644 index 20c6034..0000000 --- a/assets/sass/_typography.scss +++ /dev/null @@ -1,28 +0,0 @@ -body { - font-family: 'Roboto', sans-serif; - font-weight: 300; - line-height: 1.7; - font-size: 1.12rem; - color: $color-grey-dark; -} - -.mainHeading { - text-transform: uppercase; - font-size: 5rem; - color: $color-secondary; - - & span { - color: $color-primary; - } -} - -.section__title { - font-size: 2.1rem; - color: $color-grey-dark; -} - -h1, -h2 { - text-transform: uppercase; - font-family: 'Oswald', sans-serif; -} diff --git a/assets/sass/components/_404.scss b/assets/sass/components/_404.scss deleted file mode 100644 index d8174e8..0000000 --- a/assets/sass/components/_404.scss +++ /dev/null @@ -1,8 +0,0 @@ -.pageNotFound { - padding-top: 8rem; - @include hz-center; - - &__text { - padding-top: 3rem; - } -} \ No newline at end of file diff --git a/assets/sass/components/_avatar.scss b/assets/sass/components/_avatar.scss deleted file mode 100644 index 3ec7f29..0000000 --- a/assets/sass/components/_avatar.scss +++ /dev/null @@ -1,30 +0,0 @@ -.avatar { - width: 100%; - height: $width-right-col - 6rem; - position: relative; - overflow: hidden; - - &__container { - @include hz-center; - width: 100%; - clip-path: circle(50% at 50% 56%); - height: $width-right-col - 8rem; - text-align: center; - transition: all 0.3s cubic-bezier($cubic); - - &:hover { - width: 110%; - } - } - - &__img { - object-fit: cover; - width: 110%; - transition: all 0.3s cubic-bezier($cubic); - @include all-center; - - &:hover { - width: 105%; - } - } -} \ No newline at end of file diff --git a/assets/sass/components/_contact.scss b/assets/sass/components/_contact.scss deleted file mode 100644 index 18d1111..0000000 --- a/assets/sass/components/_contact.scss +++ /dev/null @@ -1,24 +0,0 @@ -.contact { - line-height: 2rem; - - &__item { - position: relative; - font-size: 1rem; - - & > i { - background-color: $color-primary; - color: $color-primary-text; - 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; - } - } -} \ No newline at end of file diff --git a/assets/sass/components/_education.scss b/assets/sass/components/_education.scss deleted file mode 100644 index be1863f..0000000 --- a/assets/sass/components/_education.scss +++ /dev/null @@ -1,5 +0,0 @@ -.education { - &__item { - @include avoid-break; - } -} \ No newline at end of file diff --git a/assets/sass/components/_experience.scss b/assets/sass/components/_experience.scss deleted file mode 100644 index 8071cec..0000000 --- a/assets/sass/components/_experience.scss +++ /dev/null @@ -1,88 +0,0 @@ -.experience { - &__item { - display: block; - @include avoid-break; - &:not(:first-child) { - padding-top: 1.5rem; - } - } - - &__header, - &__subheader { - display: block; - width: 100%; - height: 2.4rem; - } - - &__job { - position: relative; - transition: transform 0.2s cubic-bezier($cubic); - - &:hover { - transform: translateX(0.5rem); - } - } - - &__company, - &__position { - text-align: left; - width: 70%; - float: left; - } - - &__company { - color: $color-grey-dark; - } - - &__position { - text-transform: uppercase; - font-size: 1.3rem; - color: $color-grey-dark; - } - - &__date, - &__place { - float: right; - text-align: right; - width: 30%; - color: $color-secondary; - } - - &__date { - font-weight: 400; - } - - &__place { - &::before { - font-family: 'Material Icons'; - color: $color-primary; - font-size: 1.4rem; - content: 'place'; - display: inline-block; - padding-right: 3px; - vertical-align: middle; - font-weight: 900; - } - } - - &__bullet { - list-style-position: inside; - } - - &__badges { - display: block; - text-align: right; - margin-top: 0.5rem; - margin-bottom: 0.5rem; - } - - &__badge { - font-size: 0.9rem; - font-weight: 400; - display: inline-block; - background-color: $color-primary; - color: $color-primary-text; - border-radius: 1rem; - padding: 0.1rem 0.6rem; - } -} diff --git a/assets/sass/components/_interests.scss b/assets/sass/components/_interests.scss deleted file mode 100644 index 9759e20..0000000 --- a/assets/sass/components/_interests.scss +++ /dev/null @@ -1,12 +0,0 @@ -.interests { - display: block; - -moz-column-count: 2; - column-count: 2; - width: 100%; - text-align: right; - @include avoid-break; - - &__item:nth-child(n+4) { - text-align: left; - } -} \ No newline at end of file diff --git a/assets/sass/components/_languages.scss b/assets/sass/components/_languages.scss deleted file mode 100644 index fa5c94a..0000000 --- a/assets/sass/components/_languages.scss +++ /dev/null @@ -1,15 +0,0 @@ -.language { - &__item { - display: table; - width: 100%; - } - - &__name, - &__level { - display: table-cell; - width: 50%; - } - &__level { - text-align: right; - } -} \ No newline at end of file diff --git a/assets/sass/components/_section.scss b/assets/sass/components/_section.scss deleted file mode 100644 index e93846b..0000000 --- a/assets/sass/components/_section.scss +++ /dev/null @@ -1,30 +0,0 @@ -.section { - display: block; - margin-bottom: 2rem; - - &__heading { - width: 100%; - overflow: hidden; - } - - &__title { - position: relative; - - &::after { - content: ''; - position: absolute; - border-top: 1px solid; - border-bottom: 1px solid; - border-color: $color-secondary; - width: 50rem; - height: 4px; - margin-left: 1.5rem; - margin-top: 1.5rem; - transition: all 0.5s ease-in-out; - } - - &:hover::after { - border-color: $color-primary; - } - } -} diff --git a/assets/sass/components/_side_section.scss b/assets/sass/components/_side_section.scss deleted file mode 100644 index 3eae328..0000000 --- a/assets/sass/components/_side_section.scss +++ /dev/null @@ -1,39 +0,0 @@ -.sideSection { - display: block; - margin-bottom: 3rem; - @include avoid-break; - - &__heading { - width: 100%; - overflow: hidden; - text-align: center; - margin-bottom: 1rem; - } - - &__title { - position: relative; - - &::after, - &::before { - content: ''; - position: absolute; - border-top: 1px solid $color-secondary; - border-bottom: 1px solid $color-secondary; - width: 10rem; - height: 4px; - margin-top: 1.1rem; - } - - &::after { - margin-left: 1rem; - } - - &::before { - margin-left: -11rem; - } - } - - & li { - list-style: none; - } -} diff --git a/assets/sass/components/_skills.scss b/assets/sass/components/_skills.scss deleted file mode 100644 index 54b2162..0000000 --- a/assets/sass/components/_skills.scss +++ /dev/null @@ -1,35 +0,0 @@ -.skills { - &__group { - & span { - font-weight: 700; - display: inline-block; - - &::after{ - content: ":" - } - - &:hover ~ li { - background-color: $color-primary; - color: $color-white; - } - - } - - & li{ - display: inline-block; - font-weight: 400; - transition: all 0.2s ease-in-out; - padding: 0 1px; - border-radius: 2px; - - &:not(:last-child)::after{ - content: ", " - } - - &:hover { - background-color: $color-primary; - color: $color-white; - } - } - } -} \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss deleted file mode 100644 index 37b6fed..0000000 --- a/assets/sass/main.scss +++ /dev/null @@ -1,29 +0,0 @@ - -// HUGO variables -$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; -$pages: {{ .Site.Params.pages | default 1}} !default; - -@import "abstract"; -@import "functions"; -@import "mixins"; -@import "layout"; -@import "base"; -@import "typography"; - -@import "components/section"; -@import "components/side_section"; -@import "components/experience"; -@import "components/education"; -@import "components/contact"; -@import "components/avatar"; -@import "components/skills"; -@import "components/languages"; -@import "components/interests"; - -@import "components/404"; \ No newline at end of file diff --git a/assets/scss/_abstract.scss b/assets/scss/_abstract.scss new file mode 100644 index 0000000..ffa098a --- /dev/null +++ b/assets/scss/_abstract.scss @@ -0,0 +1,7 @@ +// WIDTHS +$width-left-col: 56rem; // 70% +$page-width: 80rem; +$width-right-col: $page-width - $width-left-col; + +// ANIMATIONS +$cubic: 0.63, 0.21, 0.76, 1.58; diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss new file mode 100644 index 0000000..127b986 --- /dev/null +++ b/assets/scss/_base.scss @@ -0,0 +1,49 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + font-size: 62.5%; + background-color: $color-background; + + @media print { + background-color: $color-white; + } +} + +.content { + // A4 paper + width: $page-width; + min-height: paper_height($page-width); + background-color: $color-white; + + @media screen and (min-width: 60rem) { + margin: 6rem 0; + @include shadow(1); + @include hz-center; + } + @media print { + margin: 0; + height: paper_height($page-width) * $pages; + } +} + +body { + box-sizing: border-box; +} + +@media print { + @page { + margin: 0; + size: A4; + } +} + +::selection { + color: $color-white; + background-color: darken(rgba($color-primary, 0.6), 10%); +} diff --git a/assets/scss/_functions.scss b/assets/scss/_functions.scss new file mode 100644 index 0000000..94fe1cb --- /dev/null +++ b/assets/scss/_functions.scss @@ -0,0 +1,3 @@ +@function paper_height($width) { + @return $width / 0.70695553; +} \ No newline at end of file diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss new file mode 100644 index 0000000..6d95037 --- /dev/null +++ b/assets/scss/_layout.scss @@ -0,0 +1,34 @@ +.content { + position: absolute; + overflow: hidden; + + &__left { + float: left; + width: $width-left-col; + height: 100%; + padding: 3rem 4rem; + + @media screen { + &::after { + content: '2020 © by Inês Almeida | ines-almeida.com'; + height: 4rem; + width: 100%; + position: absolute; + bottom: 0.5rem; + color: darken($color-white, 10%); + } + } + } + + &__right { + position: absolute; + float: right; + width: $width-right-col; + background-color: $color-right-col; + height: 100%; + padding: 2rem 3rem; + right: 1rem; + + @include shadow(0.5); + } +} diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss new file mode 100644 index 0000000..1756e90 --- /dev/null +++ b/assets/scss/_mixins.scss @@ -0,0 +1,30 @@ +@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); +} + +@mixin hz-center { + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +@mixin vt-center { + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +@mixin all-center { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} + +@mixin avoid-break { + @media print { + page-break-inside: avoid; + } +} \ No newline at end of file diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss new file mode 100644 index 0000000..20c6034 --- /dev/null +++ b/assets/scss/_typography.scss @@ -0,0 +1,28 @@ +body { + font-family: 'Roboto', sans-serif; + font-weight: 300; + line-height: 1.7; + font-size: 1.12rem; + color: $color-grey-dark; +} + +.mainHeading { + text-transform: uppercase; + font-size: 5rem; + color: $color-secondary; + + & span { + color: $color-primary; + } +} + +.section__title { + font-size: 2.1rem; + color: $color-grey-dark; +} + +h1, +h2 { + text-transform: uppercase; + font-family: 'Oswald', sans-serif; +} diff --git a/assets/scss/components/_404.scss b/assets/scss/components/_404.scss new file mode 100644 index 0000000..d8174e8 --- /dev/null +++ b/assets/scss/components/_404.scss @@ -0,0 +1,8 @@ +.pageNotFound { + padding-top: 8rem; + @include hz-center; + + &__text { + padding-top: 3rem; + } +} \ No newline at end of file diff --git a/assets/scss/components/_avatar.scss b/assets/scss/components/_avatar.scss new file mode 100644 index 0000000..3ec7f29 --- /dev/null +++ b/assets/scss/components/_avatar.scss @@ -0,0 +1,30 @@ +.avatar { + width: 100%; + height: $width-right-col - 6rem; + position: relative; + overflow: hidden; + + &__container { + @include hz-center; + width: 100%; + clip-path: circle(50% at 50% 56%); + height: $width-right-col - 8rem; + text-align: center; + transition: all 0.3s cubic-bezier($cubic); + + &:hover { + width: 110%; + } + } + + &__img { + object-fit: cover; + width: 110%; + transition: all 0.3s cubic-bezier($cubic); + @include all-center; + + &:hover { + width: 105%; + } + } +} \ No newline at end of file diff --git a/assets/scss/components/_contact.scss b/assets/scss/components/_contact.scss new file mode 100644 index 0000000..18d1111 --- /dev/null +++ b/assets/scss/components/_contact.scss @@ -0,0 +1,24 @@ +.contact { + line-height: 2rem; + + &__item { + position: relative; + font-size: 1rem; + + & > i { + background-color: $color-primary; + color: $color-primary-text; + 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; + } + } +} \ No newline at end of file diff --git a/assets/scss/components/_education.scss b/assets/scss/components/_education.scss new file mode 100644 index 0000000..be1863f --- /dev/null +++ b/assets/scss/components/_education.scss @@ -0,0 +1,5 @@ +.education { + &__item { + @include avoid-break; + } +} \ No newline at end of file diff --git a/assets/scss/components/_experience.scss b/assets/scss/components/_experience.scss new file mode 100644 index 0000000..8071cec --- /dev/null +++ b/assets/scss/components/_experience.scss @@ -0,0 +1,88 @@ +.experience { + &__item { + display: block; + @include avoid-break; + &:not(:first-child) { + padding-top: 1.5rem; + } + } + + &__header, + &__subheader { + display: block; + width: 100%; + height: 2.4rem; + } + + &__job { + position: relative; + transition: transform 0.2s cubic-bezier($cubic); + + &:hover { + transform: translateX(0.5rem); + } + } + + &__company, + &__position { + text-align: left; + width: 70%; + float: left; + } + + &__company { + color: $color-grey-dark; + } + + &__position { + text-transform: uppercase; + font-size: 1.3rem; + color: $color-grey-dark; + } + + &__date, + &__place { + float: right; + text-align: right; + width: 30%; + color: $color-secondary; + } + + &__date { + font-weight: 400; + } + + &__place { + &::before { + font-family: 'Material Icons'; + color: $color-primary; + font-size: 1.4rem; + content: 'place'; + display: inline-block; + padding-right: 3px; + vertical-align: middle; + font-weight: 900; + } + } + + &__bullet { + list-style-position: inside; + } + + &__badges { + display: block; + text-align: right; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + &__badge { + font-size: 0.9rem; + font-weight: 400; + display: inline-block; + background-color: $color-primary; + color: $color-primary-text; + border-radius: 1rem; + padding: 0.1rem 0.6rem; + } +} diff --git a/assets/scss/components/_interests.scss b/assets/scss/components/_interests.scss new file mode 100644 index 0000000..9759e20 --- /dev/null +++ b/assets/scss/components/_interests.scss @@ -0,0 +1,12 @@ +.interests { + display: block; + -moz-column-count: 2; + column-count: 2; + width: 100%; + text-align: right; + @include avoid-break; + + &__item:nth-child(n+4) { + text-align: left; + } +} \ No newline at end of file diff --git a/assets/scss/components/_languages.scss b/assets/scss/components/_languages.scss new file mode 100644 index 0000000..fa5c94a --- /dev/null +++ b/assets/scss/components/_languages.scss @@ -0,0 +1,15 @@ +.language { + &__item { + display: table; + width: 100%; + } + + &__name, + &__level { + display: table-cell; + width: 50%; + } + &__level { + text-align: right; + } +} \ No newline at end of file diff --git a/assets/scss/components/_section.scss b/assets/scss/components/_section.scss new file mode 100644 index 0000000..e93846b --- /dev/null +++ b/assets/scss/components/_section.scss @@ -0,0 +1,30 @@ +.section { + display: block; + margin-bottom: 2rem; + + &__heading { + width: 100%; + overflow: hidden; + } + + &__title { + position: relative; + + &::after { + content: ''; + position: absolute; + border-top: 1px solid; + border-bottom: 1px solid; + border-color: $color-secondary; + width: 50rem; + height: 4px; + margin-left: 1.5rem; + margin-top: 1.5rem; + transition: all 0.5s ease-in-out; + } + + &:hover::after { + border-color: $color-primary; + } + } +} diff --git a/assets/scss/components/_side_section.scss b/assets/scss/components/_side_section.scss new file mode 100644 index 0000000..3eae328 --- /dev/null +++ b/assets/scss/components/_side_section.scss @@ -0,0 +1,39 @@ +.sideSection { + display: block; + margin-bottom: 3rem; + @include avoid-break; + + &__heading { + width: 100%; + overflow: hidden; + text-align: center; + margin-bottom: 1rem; + } + + &__title { + position: relative; + + &::after, + &::before { + content: ''; + position: absolute; + border-top: 1px solid $color-secondary; + border-bottom: 1px solid $color-secondary; + width: 10rem; + height: 4px; + margin-top: 1.1rem; + } + + &::after { + margin-left: 1rem; + } + + &::before { + margin-left: -11rem; + } + } + + & li { + list-style: none; + } +} diff --git a/assets/scss/components/_skills.scss b/assets/scss/components/_skills.scss new file mode 100644 index 0000000..54b2162 --- /dev/null +++ b/assets/scss/components/_skills.scss @@ -0,0 +1,35 @@ +.skills { + &__group { + & span { + font-weight: 700; + display: inline-block; + + &::after{ + content: ":" + } + + &:hover ~ li { + background-color: $color-primary; + color: $color-white; + } + + } + + & li{ + display: inline-block; + font-weight: 400; + transition: all 0.2s ease-in-out; + padding: 0 1px; + border-radius: 2px; + + &:not(:last-child)::after{ + content: ", " + } + + &:hover { + background-color: $color-primary; + color: $color-white; + } + } + } +} \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss new file mode 100644 index 0000000..37b6fed --- /dev/null +++ b/assets/scss/main.scss @@ -0,0 +1,29 @@ + +// HUGO variables +$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; +$pages: {{ .Site.Params.pages | default 1}} !default; + +@import "abstract"; +@import "functions"; +@import "mixins"; +@import "layout"; +@import "base"; +@import "typography"; + +@import "components/section"; +@import "components/side_section"; +@import "components/experience"; +@import "components/education"; +@import "components/contact"; +@import "components/avatar"; +@import "components/skills"; +@import "components/languages"; +@import "components/interests"; + +@import "components/404"; \ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 01018b5..dabe8c1 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -8,6 +8,6 @@ - {{- $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }} + {{- $style := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }} -- cgit v1.2.3