mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-23 01:29:41 +01:00
parent
7f0e1ca39d
commit
748a467928
10
.stylelintrc
10
.stylelintrc
@ -2,14 +2,12 @@
|
||||
"extends": [
|
||||
"stylelint-config-standard",
|
||||
"stylelint-config-css-modules",
|
||||
"stylelint-prettier/recommended"
|
||||
"./node_modules/prettier-stylelint/config.js"
|
||||
],
|
||||
"syntax": "scss",
|
||||
"plugins": ["stylelint-prettier"],
|
||||
"rules": {
|
||||
"prettier/prettier": [true, {
|
||||
"indentation": 4,
|
||||
"no-descending-specificity": null
|
||||
}]
|
||||
"indentation": 4,
|
||||
"number-leading-zero": "never",
|
||||
"no-descending-specificity": null
|
||||
}
|
||||
}
|
||||
|
@ -15,7 +15,8 @@
|
||||
"lint": "npm run lint:js && npm run lint:css",
|
||||
"build": "./node_modules/gatsby/dist/bin/gatsby.js build",
|
||||
"dev": "./node_modules/gatsby/dist/bin/gatsby.js develop --host 0.0.0.0",
|
||||
"format": "prettier --write 'src/**/*.{js,jsx,css,scss}'",
|
||||
"format": "prettier --write 'src/**/*.{js,jsx}'",
|
||||
"format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
|
||||
"test": "npm run lint && jest --coverage",
|
||||
"test:watch": "npm run lint && jest --coverage --watch",
|
||||
"deploy": "./scripts/deploy.sh",
|
||||
@ -73,16 +74,14 @@
|
||||
"jest-canvas-mock": "^2.0.0",
|
||||
"jest-dom": "^3.1.3",
|
||||
"ora": "^3.4.0",
|
||||
"postcss-scss": "^2.0.0",
|
||||
"prepend": "^1.0.2",
|
||||
"prettier": "^1.17.0",
|
||||
"prettier-stylelint": "^0.4.2",
|
||||
"react-testing-library": "^7.0.0",
|
||||
"slugify": "^1.3.4",
|
||||
"stylelint": "^10.0.1",
|
||||
"stylelint-config-css-modules": "^1.3.0",
|
||||
"stylelint-config-prettier": "^5.1.0",
|
||||
"stylelint-config-standard": "^18.3.0",
|
||||
"stylelint-prettier": "^1.0.6",
|
||||
"why-did-you-update": "^1.0.6"
|
||||
},
|
||||
"browserslist": [
|
||||
|
@ -5,11 +5,11 @@
|
||||
width: 100%;
|
||||
color: $brand-cyan;
|
||||
text-align: center;
|
||||
border-radius: 0.25rem;
|
||||
border-radius: .25rem;
|
||||
padding: $spacer / 4 $spacer / 2;
|
||||
transition-property: all;
|
||||
background: rgba(#fff, 0.15);
|
||||
border: 0.05rem solid rgba($brand-cyan, 0.75);
|
||||
background: rgba(#fff, .15);
|
||||
border: .05rem solid rgba($brand-cyan, .75);
|
||||
font-size: $font-size-small;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
@ -22,8 +22,8 @@
|
||||
svg {
|
||||
fill: $brand-grey-light;
|
||||
margin-right: $spacer / 3;
|
||||
transition: 0.2s ease-out;
|
||||
margin-bottom: -0.1rem;
|
||||
transition: .2s ease-out;
|
||||
margin-bottom: -.1rem;
|
||||
width: $font-size-small;
|
||||
height: $font-size-small;
|
||||
}
|
||||
@ -31,15 +31,15 @@
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: lighten($brand-cyan, 10%);
|
||||
border-color: rgba(lighten($brand-cyan, 10%), 0.75);
|
||||
transform: translate3d(0, -0.1rem, 0);
|
||||
box-shadow: 0 6px 10px rgba($brand-main, 0.1),
|
||||
0 10px 25px rgba($brand-main, 0.05);
|
||||
border-color: rgba(lighten($brand-cyan, 10%), .75);
|
||||
transform: translate3d(0, -.1rem, 0);
|
||||
box-shadow: 0 6px 10px rgba($brand-main, .1),
|
||||
0 10px 25px rgba($brand-main, .05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transition: none;
|
||||
background: rgba(#fff, 0.15);
|
||||
background: rgba(#fff, .15);
|
||||
}
|
||||
|
||||
:global(.dark) & {
|
||||
@ -47,8 +47,8 @@
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), 0.1),
|
||||
0 10px 25px rgba(darken($brand-main, 20%), 0.2);
|
||||
box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), .1),
|
||||
0 10px 25px rgba(darken($brand-main, 20%), .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -7,10 +7,10 @@
|
||||
padding: $spacer / 3;
|
||||
font-size: $font-size-small;
|
||||
font-weight: bold;
|
||||
background: rgba($brand-light, 0.8);
|
||||
background: rgba($brand-light, .8);
|
||||
|
||||
:global(.dark) & {
|
||||
background: rgba($body-background-color--dark, 0.8);
|
||||
background: rgba($body-background-color--dark, .8);
|
||||
}
|
||||
|
||||
p {
|
||||
|
@ -6,5 +6,5 @@
|
||||
fill: $brand-grey-light;
|
||||
stroke: none;
|
||||
vertical-align: baseline;
|
||||
margin-bottom: -0.04rem;
|
||||
margin-bottom: -.04rem;
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
@import 'variables';
|
||||
|
||||
.availability {
|
||||
border-radius: 0.25rem;
|
||||
border-radius: .25rem;
|
||||
color: $text-color-light;
|
||||
z-index: 2;
|
||||
padding: $spacer / 2;
|
||||
@ -17,12 +17,12 @@
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid rgba($brand-cyan, 0.4);
|
||||
border-bottom: 1px solid rgba($brand-cyan, .4);
|
||||
}
|
||||
}
|
||||
|
||||
.available {
|
||||
background: rgba($brand-light, 0.8);
|
||||
background: rgba($brand-light, .8);
|
||||
color: $brand-main;
|
||||
position: fixed;
|
||||
bottom: $spacer;
|
||||
@ -30,7 +30,7 @@
|
||||
transform: translateX(-50%);
|
||||
|
||||
:global(.dark) & {
|
||||
background: rgba($body-background-color--dark, 0.8);
|
||||
background: rgba($body-background-color--dark, .8);
|
||||
color: $brand-light;
|
||||
}
|
||||
}
|
||||
|
@ -33,7 +33,7 @@
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
opacity: 0.4;
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
&::before {
|
||||
@ -46,7 +46,7 @@
|
||||
}
|
||||
|
||||
.minimal {
|
||||
transform: scale(0.7);
|
||||
transform: scale(.7);
|
||||
transform-origin: top center;
|
||||
transform-box: border-box;
|
||||
|
||||
@ -61,6 +61,6 @@
|
||||
|
||||
.logo {
|
||||
margin-bottom: $spacer / 3;
|
||||
opacity: 0.5;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
@ -15,8 +15,8 @@
|
||||
font-size: $font-size-mini;
|
||||
color: $brand-grey-light;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 0.5rem, 0);
|
||||
transition: 0.2s $easing;
|
||||
transform: translate3d(0, .5rem, 0);
|
||||
transition: .2s $easing;
|
||||
}
|
||||
|
||||
.link {
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
&,
|
||||
svg {
|
||||
transition: 0.2s $easing;
|
||||
transition: .2s $easing;
|
||||
}
|
||||
|
||||
svg {
|
||||
@ -57,8 +57,8 @@
|
||||
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
svg {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
opacity: 0.8;
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
@ -4,18 +4,18 @@
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
box-shadow: 0 3px 5px rgba($brand-main, 0.15),
|
||||
0 5px 16px rgba($brand-main, 0.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: 0.25rem;
|
||||
border-radius: .25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global(.dark) & {
|
||||
box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.15),
|
||||
0 5px 16px rgba(darken($brand-main, 20%), 0.15);
|
||||
box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), .15),
|
||||
0 5px 16px rgba(darken($brand-main, 20%), .15);
|
||||
}
|
||||
|
||||
img {
|
||||
|
@ -52,12 +52,12 @@
|
||||
|
||||
.image {
|
||||
margin: 0;
|
||||
box-shadow: 0 3px 5px rgba($brand-main, 0.15),
|
||||
0 5px 16px rgba($brand-main, 0.15);
|
||||
box-shadow: 0 3px 5px rgba($brand-main, .15),
|
||||
0 5px 16px rgba($brand-main, .15);
|
||||
|
||||
:global(.dark) & {
|
||||
box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.15),
|
||||
0 5px 16px rgba(darken($brand-main, 20%), 0.15);
|
||||
box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), .15),
|
||||
0 5px 16px rgba(darken($brand-main, 20%), .15);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -14,9 +14,9 @@
|
||||
justify-content: center;
|
||||
padding: $spacer / 4;
|
||||
text-align: center;
|
||||
background: rgba(#fff, 0.15);
|
||||
border-radius: 0.25rem;
|
||||
border: 0.05rem solid transparent;
|
||||
background: rgba(#fff, .15);
|
||||
border-radius: .25rem;
|
||||
border: .05rem solid transparent;
|
||||
color: $brand-grey-light;
|
||||
font-size: $font-size-small;
|
||||
|
||||
|
@ -7,15 +7,15 @@
|
||||
z-index: 10;
|
||||
|
||||
svg {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
margin-top: -0.05rem;
|
||||
width: .8rem;
|
||||
height: .8rem;
|
||||
margin-top: -.05rem;
|
||||
fill: $brand-grey-light;
|
||||
|
||||
&:last-child {
|
||||
margin-top: -0.1rem;
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
margin-top: -.1rem;
|
||||
width: .7rem;
|
||||
height: .7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -47,7 +47,7 @@ $knob-space: 1px;
|
||||
height: $knob-size;
|
||||
background-color: $brand-grey-light;
|
||||
border-radius: 15rem;
|
||||
transition: transform 0.2s $easing;
|
||||
transition: transform .2s $easing;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
@ -11,8 +11,8 @@
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 300px;
|
||||
box-shadow: 0 3px 5px rgba($brand-main, 0.15),
|
||||
0 5px 16px rgba($brand-main, 0.15);
|
||||
box-shadow: 0 3px 5px rgba($brand-main, .15),
|
||||
0 5px 16px rgba($brand-main, .15);
|
||||
margin: $spacer / 4 auto $spacer / 2 auto;
|
||||
}
|
||||
}
|
||||
|
@ -22,29 +22,9 @@
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
padding: $spacer / 3 $spacer;
|
||||
background: rgba($brand-cyan, 0.9);
|
||||
background: rgba($brand-cyan, .9);
|
||||
transform: translate3d(0, -1rem, 0);
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
.imageCount {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
right: 0;
|
||||
color: $brand-grey-dimmed;
|
||||
font-size: $font-size-small;
|
||||
padding: $spacer / 6 $spacer / 2;
|
||||
background: rgba($brand-cyan, 0.9);
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, $spacer / 2, 0);
|
||||
transition: transform 0.25s ease-out;
|
||||
|
||||
svg {
|
||||
fill: $brand-grey-dimmed;
|
||||
width: $font-size-mini;
|
||||
height: $font-size-mini;
|
||||
}
|
||||
transition: transform .2s ease-out;
|
||||
}
|
||||
|
||||
.project {
|
||||
@ -63,13 +43,13 @@
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background: transparent;
|
||||
transition: background 0.2s ease-out;
|
||||
transition: background .2s ease-out;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
&::after {
|
||||
background: rgba($brand-cyan, 0.05);
|
||||
background: rgba($brand-cyan, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -85,3 +65,23 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.imageCount {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
right: 0;
|
||||
color: $brand-grey-dimmed;
|
||||
font-size: $font-size-small;
|
||||
padding: $spacer / 6 $spacer / 2;
|
||||
background: rgba($brand-cyan, .9);
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, $spacer / 2, 0);
|
||||
transition: transform .25s ease-out;
|
||||
|
||||
svg {
|
||||
fill: $brand-grey-dimmed;
|
||||
width: $font-size-mini;
|
||||
height: $font-size-mini;
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
$projectImageMaxWidth: 1200px;
|
||||
$easing: cubic-bezier(0.75, 0, 0.08, 1);
|
||||
$easing: cubic-bezier(.75, 0, .08, 1);
|
||||
|
||||
// Colors
|
||||
/////////////////////////////////////
|
||||
@ -35,8 +35,8 @@ $font-size-root: 18px;
|
||||
|
||||
$font-size-base: 1rem;
|
||||
$font-size-large: 1.2rem;
|
||||
$font-size-small: 0.8rem;
|
||||
$font-size-mini: 0.7rem;
|
||||
$font-size-small: .8rem;
|
||||
$font-size-mini: .7rem;
|
||||
|
||||
$font-size-h1: 2.5rem;
|
||||
$font-size-h2: 2rem;
|
||||
|
@ -29,7 +29,7 @@ body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
min-height: 100vh;
|
||||
background: $body-background-color;
|
||||
transition: background 0.2s $easing;
|
||||
transition: background .2s $easing;
|
||||
|
||||
&.dark {
|
||||
background-color: $body-background-color--dark;
|
||||
@ -93,12 +93,12 @@ h6 {
|
||||
a {
|
||||
color: $brand-cyan;
|
||||
text-decoration: none;
|
||||
transition: 0.2s ease-out;
|
||||
transition: .2s ease-out;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: lighten($brand-cyan, 10%);
|
||||
transform: translate3d(0, -0.1rem, 0);
|
||||
transform: translate3d(0, -.1rem, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user