From 8a5eab5860239ca979e73e9f85c4f0799d437be2 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 13 May 2018 01:39:50 +0200 Subject: [PATCH] project image shadow tweaks --- .stylelintrc | 5 +- src/components/atoms/ProjectImage.scss | 10 ++- src/components/molecules/ProjectLinks.scss | 4 +- src/components/molecules/ProjectNav.scss | 10 ++- src/styles/_variables.scss | 78 +++++++++++----------- 5 files changed, 63 insertions(+), 44 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index f537488..d329a86 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -5,6 +5,9 @@ "syntax": "scss", "rules": { "indentation": 4, - "number-leading-zero": "never" + "number-leading-zero": "never", + "declaration-colon-space-after": "always-single-line", + "declaration-colon-newline-after": "always-multi-line", + "value-list-comma-newline-after": "always-multi-line" } } diff --git a/src/components/atoms/ProjectImage.scss b/src/components/atoms/ProjectImage.scss index 8dbf9cf..a987897 100644 --- a/src/components/atoms/ProjectImage.scss +++ b/src/components/atoms/ProjectImage.scss @@ -5,13 +5,21 @@ margin-left: auto; margin-right: auto; display: block; - box-shadow: 0 3px 5px rgba($brand-main, .15), 0 5px 16px rgba($brand-main, .15); + box-shadow: + 0 3px 5px rgba($brand-main, .15), + 0 5px 16px rgba($brand-main, .15); @media (min-width: $projectImageMaxWidth) { max-width: $projectImageMaxWidth; border-radius: .25rem; overflow: hidden; } + + .dark & { + box-shadow: + 0 3px 5px rgba(darken($brand-main, 20%), .15), + 0 5px 16px rgba(darken($brand-main, 20%), .15); + } } .project__image { diff --git a/src/components/molecules/ProjectLinks.scss b/src/components/molecules/ProjectLinks.scss index 11b00f4..e939dfc 100644 --- a/src/components/molecules/ProjectLinks.scss +++ b/src/components/molecules/ProjectLinks.scss @@ -40,7 +40,9 @@ &:hover, &:focus { transform: translate3d(0, -.1rem, 0); - box-shadow: 0 6px 10px rgba($brand-main, .1), 0 10px 25px rgba($brand-main, .1); + box-shadow: + 0 6px 10px rgba($brand-main, .1), + 0 10px 25px rgba($brand-main, .1); } &:active { diff --git a/src/components/molecules/ProjectNav.scss b/src/components/molecules/ProjectNav.scss index 54ad5a9..0594f7d 100644 --- a/src/components/molecules/ProjectNav.scss +++ b/src/components/molecules/ProjectNav.scss @@ -11,7 +11,15 @@ $breakpoint-project-nav: 45rem; .project__nav__image { margin: 0; - box-shadow: 0 3px 5px rgba($brand-main, .15), 0 5px 16px rgba($brand-main, .15); + box-shadow: + 0 3px 5px rgba($brand-main, .15), + 0 5px 16px rgba($brand-main, .15); + + .dark & { + box-shadow: + 0 3px 5px rgba(darken($brand-main, 20%), .15), + 0 5px 16px rgba(darken($brand-main, 20%), .15); + } } .project__nav__item { diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 29b45ac..dff9670 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,19 +1,18 @@ -$typekit: 'dtg3zui'; -$projectImageMaxWidth: 1200px; -$easing: cubic-bezier(.75, 0, .08, 1); +$typekit: 'dtg3zui'; +$projectImageMaxWidth: 1200px; +$easing: cubic-bezier(.75, 0, .08, 1); // Colors ///////////////////////////////////// -$brand-main: #015565; -$brand-cyan: #43a699; -$brand-main-light: #88bec8; -$brand-light: #e7eef4; - -$brand-grey: #6b7f88; -$brand-grey-light: lighten($brand-grey, 15%); -$brand-grey-dimmed: lighten($brand-grey, 50%); +$brand-main: #015565; +$brand-cyan: #43a699; +$brand-main-light: #88bec8; +$brand-light: #e7eef4; +$brand-grey: #6b7f88; +$brand-grey-light: lighten($brand-grey, 15%); +$brand-grey-dimmed: lighten($brand-grey, 50%); // Backgrounds ///////////////////////////////////// @@ -21,52 +20,51 @@ $brand-grey-dimmed: lighten($brand-grey, 50%); $body-background-color: $brand-light; $body-background-color--dark: darken($brand-grey, 30%); - // Text Colors ///////////////////////////////////// -$text-color: $brand-grey; -$text-color-light: $brand-grey-light; +$text-color: $brand-grey; +$text-color-light: $brand-grey-light; -$text-color--dark: $brand-grey-light; +$text-color--dark: $brand-grey-light; $text-color-light--dark: $brand-grey; - // Typography ///////////////////////////////////// -$font-size-root : 18px; +$font-size-root: 18px; -$font-size-base : 1rem; -$font-size-large : 1.2rem; -$font-size-small : .8rem; -$font-size-mini : .7rem; +$font-size-base: 1rem; +$font-size-large: 1.2rem; +$font-size-small: .8rem; +$font-size-mini: .7rem; -$font-size-h1 : 2.5rem; -$font-size-h2 : 2rem; -$font-size-h3 : 1.75rem; -$font-size-h4 : $font-size-large; -$font-size-h5 : $font-size-base; -$font-size-h6 : $font-size-small; +$font-size-h1: 2.5rem; +$font-size-h2: 2rem; +$font-size-h3: 1.75rem; +$font-size-h4: $font-size-large; +$font-size-h5: $font-size-base; +$font-size-h6: $font-size-small; -$line-height : 1.5; -$line-height-small : 1.1428571429; +$line-height: 1.5; +$line-height-small: 1.1428571429; -$font-family-base : 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif; -$font-weight-base : 400; -$font-color-base : $text-color; +$font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue', + Helvetica, Arial, sans-serif; +$font-weight-base: 400; +$font-color-base: $text-color; -$font-family-monospace : Menlo, Monaco, Consolas, 'Courier New', monospace; +$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; -$font-family-headings : 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',Helvetica,Arial,sans-serif; -$font-weight-headings : 400; -$line-height-headings : 1.1; +$font-family-headings: 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue', + Helvetica, Arial, sans-serif; +$font-weight-headings: 400; +$line-height-headings: 1.1; -$color-headings: $brand-main; -$color-headings--dark: $brand-main-light; +$color-headings: $brand-main; +$color-headings--dark: $brand-main-light; // Components spacing ///////////////////////////////////// -$spacer: ($font-size-base * $line-height); - +$spacer: ($font-size-base * $line-height);