m
/
portfolio
mirror of https://github.com/kremalicious/portfolio.git
1
0
Fork 0
Code Releases Activity

project image shadow tweaks

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",
"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"
}
}

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

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

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

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

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

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

78
src/styles/_variables.scss
View File

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