m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-23 01:29:41 +01:00
Code Releases Activity

project image shadow tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-05-13 01:39:50 +02:00
parent ca1810392b
commit 8a5eab5860
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 63 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.stylelintrc
View File

@ -5,6 +5,9 @@
"syntax": "scss", "syntax": "scss",
"rules": { "rules": {
"indentation": 4, "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"
} }
} }

10
src/components/atoms/ProjectImage.scss
View File

@ -5,13 +5,21 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
display: block; 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) { @media (min-width: $projectImageMaxWidth) {
max-width: $projectImageMaxWidth; max-width: $projectImageMaxWidth;
border-radius: .25rem; border-radius: .25rem;
overflow: hidden; 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 { .project__image {

4
src/components/molecules/ProjectLinks.scss
View File

@ -40,7 +40,9 @@
&:hover, &:hover,
&:focus { &:focus {
transform: translate3d(0, -.1rem, 0); 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 { &:active {

10
src/components/molecules/ProjectNav.scss
View File

@ -11,7 +11,15 @@ $breakpoint-project-nav: 45rem;
.project__nav__image { .project__nav__image {
margin: 0; 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 { .project__nav__item {

10
src/styles/_variables.scss
View File

@ -14,14 +14,12 @@ $brand-grey: #6b7f88;
$brand-grey-light: lighten($brand-grey, 15%); $brand-grey-light: lighten($brand-grey, 15%);
$brand-grey-dimmed: lighten($brand-grey, 50%); $brand-grey-dimmed: lighten($brand-grey, 50%);
// Backgrounds // Backgrounds
///////////////////////////////////// /////////////////////////////////////
$body-background-color: $brand-light; $body-background-color: $brand-light;
$body-background-color--dark: darken($brand-grey, 30%); $body-background-color--dark: darken($brand-grey, 30%);
// Text Colors // Text Colors
///////////////////////////////////// /////////////////////////////////////
@ -31,7 +29,6 @@ $text-color-light: $brand-grey-light;
$text-color--dark: $brand-grey-light; $text-color--dark: $brand-grey-light;
$text-color-light--dark: $brand-grey; $text-color-light--dark: $brand-grey;
// Typography // Typography
///////////////////////////////////// /////////////////////////////////////
@ -52,13 +49,15 @@ $font-size-h6 : $font-size-small;
$line-height: 1.5; $line-height: 1.5;
$line-height-small: 1.1428571429; $line-height-small: 1.1428571429;
$font-family-base : 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif; $font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
Helvetica, Arial, sans-serif;
$font-weight-base: 400; $font-weight-base: 400;
$font-color-base: $text-color; $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-family-headings: 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',
Helvetica, Arial, sans-serif;
$font-weight-headings: 400; $font-weight-headings: 400;
$line-height-headings: 1.1; $line-height-headings: 1.1;
@ -69,4 +68,3 @@ $color-headings--dark: $brand-main-light;
///////////////////////////////////// /////////////////////////////////////
$spacer: ($font-size-base * $line-height); $spacer: ($font-size-base * $line-height);