m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-06-17 18:03:22 +02:00
Code Releases Activity

kick out prettier-stylelint

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-04-28 00:13:46 +02:00
parent 2e6dfdd46b
commit d1d6c4b1f0
Signed by: m
GPG Key ID: 606EEEF3C479A91F
16 changed files with 89 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.stylelintrc
View File

@ -2,12 +2,14 @@
"extends": [
"stylelint-config-standard",
"stylelint-config-css-modules",
"./node_modules/prettier-stylelint/config.js"
"stylelint-prettier/recommended"
],
"syntax": "scss",
"plugins": ["stylelint-prettier"],
"rules": {
"indentation": 4,
"number-leading-zero": "never",
"no-descending-specificity": null
"prettier/prettier": [true, {
"indentation": 4,
"no-descending-specificity": null
}]
}
}

7
package.json
View File

@ -15,8 +15,7 @@
"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}'",
"format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
"format": "prettier --write 'src/**/*.{js,jsx,css,scss}'",
"test": "npm run lint && jest --coverage",
"test:watch": "npm run lint && jest --coverage --watch",
"deploy": "./scripts/deploy.sh",
@ -74,14 +73,16 @@
"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": [

24
src/components/atoms/Button.module.scss
View File

@ -5,11 +5,11 @@
width: 100%;
color: $brand-cyan;
text-align: center;
border-radius: .25rem;
border-radius: 0.25rem;
padding: $spacer / 4 $spacer / 2;
transition-property: all;
background: rgba(#fff, .15);
border: .05rem solid rgba($brand-cyan, .75);
background: rgba(#fff, 0.15);
border: 0.05rem solid rgba($brand-cyan, 0.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: .2s ease-out;
margin-bottom: -.1rem;
transition: 0.2s ease-out;
margin-bottom: -0.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%), .75);
transform: translate3d(0, -.1rem, 0);
box-shadow: 0 6px 10px rgba($brand-main, .1),
0 10px 25px rgba($brand-main, .05);
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);
}
&:active {
transition: none;
background: rgba(#fff, .15);
background: rgba(#fff, 0.15);
}
:global(.dark) & {
@ -47,8 +47,8 @@
&:hover,
&:focus {
box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), .1),
0 10px 25px rgba(darken($brand-main, 20%), .2);
box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), 0.1),
0 10px 25px rgba(darken($brand-main, 20%), 0.2);
}
}
}

4
src/components/atoms/HostnameCheck.module.scss
View File

@ -7,10 +7,10 @@
padding: $spacer / 3;
font-size: $font-size-small;
font-weight: bold;
background: rgba($brand-light, .8);
background: rgba($brand-light, 0.8);
:global(.dark) & {
background: rgba($body-background-color--dark, .8);
background: rgba($body-background-color--dark, 0.8);
}
p {

2
src/components/atoms/Icons.module.scss
View File

@ -6,5 +6,5 @@
fill: $brand-grey-light;
stroke: none;
vertical-align: baseline;
margin-bottom: -.04rem;
margin-bottom: -0.04rem;
}

8
src/components/molecules/Availability.module.scss
View File

@ -1,7 +1,7 @@
@import 'variables';
.availability {
border-radius: .25rem;
border-radius: 0.25rem;
color: $text-color-light;
z-index: 2;
padding: $spacer / 2;
@ -17,12 +17,12 @@
}
a {
border-bottom: 1px solid rgba($brand-cyan, .4);
border-bottom: 1px solid rgba($brand-cyan, 0.4);
}
}
.available {
background: rgba($brand-light, .8);
background: rgba($brand-light, 0.8);
color: $brand-main;
position: fixed;
bottom: $spacer;
@ -30,7 +30,7 @@
transform: translateX(-50%);
:global(.dark) & {
background: rgba($body-background-color--dark, .8);
background: rgba($body-background-color--dark, 0.8);
color: $brand-light;
}
}

6
src/components/molecules/LogoUnit.module.scss
View File

@ -33,7 +33,7 @@
&::before,
&::after {
opacity: .4;
opacity: 0.4;
}
&::before {
@ -46,7 +46,7 @@
}
.minimal {
transform: scale(.7);
transform: scale(0.7);
transform-origin: top center;
transform-box: border-box;
@ -61,6 +61,6 @@
.logo {
margin-bottom: $spacer / 3;
opacity: .5;
opacity: 0.5;
}
}

12
src/components/molecules/Networks.module.scss
View File

@ -15,8 +15,8 @@
font-size: $font-size-mini;
color: $brand-grey-light;
opacity: 0;
transform: translate3d(0, .5rem, 0);
transition: .2s $easing;
transform: translate3d(0, 0.5rem, 0);
transition: 0.2s $easing;
}
.link {
@ -28,7 +28,7 @@
&,
svg {
transition: .2s $easing;
transition: 0.2s $easing;
}
svg {
@ -57,8 +57,8 @@
/* stylelint-disable no-descending-specificity */
svg {
width: .75rem;
height: .75rem;
opacity: .8;
width: 0.75rem;
height: 0.75rem;
opacity: 0.8;
}
}

10
src/components/molecules/ProjectImage.module.scss
View File

@ -4,18 +4,18 @@
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, 0.15),
0 5px 16px rgba($brand-main, 0.15);
@media (min-width: $projectImageMaxWidth) {
max-width: $projectImageMaxWidth;
border-radius: .25rem;
border-radius: 0.25rem;
overflow: hidden;
}
:global(.dark) & {
box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), .15),
0 5px 16px rgba(darken($brand-main, 20%), .15);
box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.15),
0 5px 16px rgba(darken($brand-main, 20%), 0.15);
}
img {

8
src/components/molecules/ProjectNav.module.scss
View File

@ -52,12 +52,12 @@
.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, 0.15),
0 5px 16px rgba($brand-main, 0.15);
:global(.dark) & {
box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), .15),
0 5px 16px rgba(darken($brand-main, 20%), .15);
box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.15),
0 5px 16px rgba(darken($brand-main, 20%), 0.15);
}
}

6
src/components/molecules/ProjectTechstack.module.scss
View File

@ -14,9 +14,9 @@
justify-content: center;
padding: $spacer / 4;
text-align: center;
background: rgba(#fff, .15);
border-radius: .25rem;
border: .05rem solid transparent;
background: rgba(#fff, 0.15);
border-radius: 0.25rem;
border: 0.05rem solid transparent;
color: $brand-grey-light;
font-size: $font-size-small;

14
src/components/molecules/ThemeSwitch.module.scss
View File

@ -7,15 +7,15 @@
z-index: 10;
svg {
width: .8rem;
height: .8rem;
margin-top: -.05rem;
width: 0.8rem;
height: 0.8rem;
margin-top: -0.05rem;
fill: $brand-grey-light;
&:last-child {
margin-top: -.1rem;
width: .7rem;
height: .7rem;
margin-top: -0.1rem;
width: 0.7rem;
height: 0.7rem;
}
}
}
@ -47,7 +47,7 @@ $knob-space: 1px;
height: $knob-size;
background-color: $brand-grey-light;
border-radius: 15rem;
transition: transform .2s $easing;
transition: transform 0.2s $easing;
transform: translate3d(0, 0, 0);
}
}

4
src/pages/404.module.scss
View File

@ -11,8 +11,8 @@
display: block;
width: auto;
height: 300px;
box-shadow: 0 3px 5px rgba($brand-main, .15),
0 5px 16px rgba($brand-main, .15);
box-shadow: 0 3px 5px rgba($brand-main, 0.15),
0 5px 16px rgba($brand-main, 0.15);
margin: $spacer / 4 auto $spacer / 2 auto;
}
}

48
src/pages/index.module.scss
View File

@ -22,9 +22,29 @@
margin: 0;
z-index: 2;
padding: $spacer / 3 $spacer;
background: rgba($brand-cyan, .9);
background: rgba($brand-cyan, 0.9);
transform: translate3d(0, -1rem, 0);
transition: transform .2s ease-out;
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;
}
}
.project {
@ -43,13 +63,13 @@
bottom: 0;
z-index: 1;
background: transparent;
transition: background .2s ease-out;
transition: background 0.2s ease-out;
}
&:hover,
&:focus {
&::after {
background: rgba($brand-cyan, .05);
background: rgba($brand-cyan, 0.05);
}
.title {
@ -65,23 +85,3 @@
}
}
}
.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;
}
}

6
src/styles/_variables.scss
View File

@ -1,5 +1,5 @@
$projectImageMaxWidth: 1200px;
$easing: cubic-bezier(.75, 0, .08, 1);
$easing: cubic-bezier(0.75, 0, 0.08, 1);
// Colors
/////////////////////////////////////
@ -35,8 +35,8 @@ $font-size-root: 18px;
$font-size-base: 1rem;
$font-size-large: 1.2rem;
$font-size-small: .8rem;
$font-size-mini: .7rem;
$font-size-small: 0.8rem;
$font-size-mini: 0.7rem;
$font-size-h1: 2.5rem;
$font-size-h2: 2rem;

6
src/styles/global.scss
View File

@ -29,7 +29,7 @@ body {
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
background: $body-background-color;
transition: background .2s $easing;
transition: background 0.2s $easing;
&.dark {
background-color: $body-background-color--dark;
@ -93,12 +93,12 @@ h6 {
a {
color: $brand-cyan;
text-decoration: none;
transition: .2s ease-out;
transition: 0.2s ease-out;
&:hover,
&:focus {
color: lighten($brand-cyan, 10%);
transform: translate3d(0, -.1rem, 0);
transform: translate3d(0, -0.1rem, 0);
}
}