mirror of
https://github.com/ineesalmeida/almeida-cv.git
synced 2025-01-18 02:40:25 +00:00
Made element colors more configurable based on type and location
This commit is contained in:
parent
f44d5f6cb7
commit
0d388f3f19
10 changed files with 47 additions and 30 deletions
|
@ -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%);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue