Made element colors more configurable based on type and location

This commit is contained in:
Jordan Esh 2021-08-08 22:29:08 +10:00
parent f44d5f6cb7
commit 0d388f3f19
10 changed files with 47 additions and 30 deletions

View file

@ -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%);
}

View file

@ -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;

View file

@ -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 {

View file

@ -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,

View file

@ -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%;

View file

@ -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;
}

View file

@ -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;

View file

@ -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;
}
}
}

View file

@ -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";

View file

@ -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