m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-22 17:23:22 +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 {

78
src/styles/_variables.scss
View File

@ -1,19 +1,18 @@
$typekit: 'dtg3zui'; $typekit: 'dtg3zui';
$projectImageMaxWidth: 1200px; $projectImageMaxWidth: 1200px;
$easing: cubic-bezier(.75, 0, .08, 1); $easing: cubic-bezier(.75, 0, .08, 1);
// Colors // Colors
///////////////////////////////////// /////////////////////////////////////
$brand-main: #015565; $brand-main: #015565;
$brand-cyan: #43a699; $brand-cyan: #43a699;
$brand-main-light: #88bec8; $brand-main-light: #88bec8;
$brand-light: #e7eef4; $brand-light: #e7eef4;
$brand-grey: #6b7f88;
$brand-grey-light: lighten($brand-grey, 15%);
$brand-grey-dimmed: lighten($brand-grey, 50%);
$brand-grey: #6b7f88;
$brand-grey-light: lighten($brand-grey, 15%);
$brand-grey-dimmed: lighten($brand-grey, 50%);
// Backgrounds // Backgrounds
///////////////////////////////////// /////////////////////////////////////
@ -21,52 +20,51 @@ $brand-grey-dimmed: lighten($brand-grey, 50%);
$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
///////////////////////////////////// /////////////////////////////////////
$text-color: $brand-grey; $text-color: $brand-grey;
$text-color-light: $brand-grey-light; $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
///////////////////////////////////// /////////////////////////////////////
$font-size-root : 18px; $font-size-root: 18px;
$font-size-base : 1rem; $font-size-base: 1rem;
$font-size-large : 1.2rem; $font-size-large: 1.2rem;
$font-size-small : .8rem; $font-size-small: .8rem;
$font-size-mini : .7rem; $font-size-mini: .7rem;
$font-size-h1 : 2.5rem; $font-size-h1: 2.5rem;
$font-size-h2 : 2rem; $font-size-h2: 2rem;
$font-size-h3 : 1.75rem; $font-size-h3: 1.75rem;
$font-size-h4 : $font-size-large; $font-size-h4: $font-size-large;
$font-size-h5 : $font-size-base; $font-size-h5: $font-size-base;
$font-size-h6 : $font-size-small; $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',
$font-weight-base : 400; Helvetica, Arial, sans-serif;
$font-color-base : $text-color; $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-family-headings: 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',
$font-weight-headings : 400; Helvetica, Arial, sans-serif;
$line-height-headings : 1.1; $font-weight-headings: 400;
$line-height-headings: 1.1;
$color-headings: $brand-main; $color-headings: $brand-main;
$color-headings--dark: $brand-main-light; $color-headings--dark: $brand-main-light;
// Components spacing // Components spacing
///////////////////////////////////// /////////////////////////////////////
$spacer: ($font-size-base * $line-height); $spacer: ($font-size-base * $line-height);