m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-02-14 21:10:41 +01:00
Code Releases Activity

Revert "kick out prettier-stylelint"

Browse Source 
This reverts commit d1d6c4b1f01c78b017dc55f03f208b7985250bb2.
This commit is contained in:
Matthias Kretschmann 2019-04-28 00:18:40 +02:00
parent 7f0e1ca39d
commit 748a467928
Signed by: m
GPG Key ID: 606EEEF3C479A91F
16 changed files with 86 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.stylelintrc
View File

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

7
package.json
View File

@ -15,7 +15,8 @@
"lint": "npm run lint:js && npm run lint:css", "lint": "npm run lint:js && npm run lint:css",
"build": "./node_modules/gatsby/dist/bin/gatsby.js build", "build": "./node_modules/gatsby/dist/bin/gatsby.js build",
"dev": "./node_modules/gatsby/dist/bin/gatsby.js develop --host 0.0.0.0", "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": "npm run lint && jest --coverage",
"test:watch": "npm run lint && jest --coverage --watch", "test:watch": "npm run lint && jest --coverage --watch",
"deploy": "./scripts/deploy.sh", "deploy": "./scripts/deploy.sh",
@ -73,16 +74,14 @@
"jest-canvas-mock": "^2.0.0", "jest-canvas-mock": "^2.0.0",
"jest-dom": "^3.1.3", "jest-dom": "^3.1.3",
"ora": "^3.4.0", "ora": "^3.4.0",
"postcss-scss": "^2.0.0",
"prepend": "^1.0.2", "prepend": "^1.0.2",
"prettier": "^1.17.0", "prettier": "^1.17.0",
"prettier-stylelint": "^0.4.2",
"react-testing-library": "^7.0.0", "react-testing-library": "^7.0.0",
"slugify": "^1.3.4", "slugify": "^1.3.4",
"stylelint": "^10.0.1", "stylelint": "^10.0.1",
"stylelint-config-css-modules": "^1.3.0", "stylelint-config-css-modules": "^1.3.0",
"stylelint-config-prettier": "^5.1.0",
"stylelint-config-standard": "^18.3.0", "stylelint-config-standard": "^18.3.0",
"stylelint-prettier": "^1.0.6",
"why-did-you-update": "^1.0.6" "why-did-you-update": "^1.0.6"
}, },
"browserslist": [ "browserslist": [

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

@ -5,11 +5,11 @@
width: 100%; width: 100%;
color: $brand-cyan; color: $brand-cyan;
text-align: center; text-align: center;
border-radius: 0.25rem; border-radius: .25rem;
padding: $spacer / 4 $spacer / 2; padding: $spacer / 4 $spacer / 2;
transition-property: all; transition-property: all;
background: rgba(#fff, 0.15); background: rgba(#fff, .15);
border: 0.05rem solid rgba($brand-cyan, 0.75); border: .05rem solid rgba($brand-cyan, .75);
font-size: $font-size-small; font-size: $font-size-small;
text-transform: uppercase; text-transform: uppercase;
cursor: pointer; cursor: pointer;
@ -22,8 +22,8 @@
svg { svg {
fill: $brand-grey-light; fill: $brand-grey-light;
margin-right: $spacer / 3; margin-right: $spacer / 3;
transition: 0.2s ease-out; transition: .2s ease-out;
margin-bottom: -0.1rem; margin-bottom: -.1rem;
width: $font-size-small; width: $font-size-small;
height: $font-size-small; height: $font-size-small;
} }
@ -31,15 +31,15 @@
&:hover, &:hover,
&:focus { &:focus {
color: lighten($brand-cyan, 10%); color: lighten($brand-cyan, 10%);
border-color: rgba(lighten($brand-cyan, 10%), 0.75); border-color: rgba(lighten($brand-cyan, 10%), .75);
transform: translate3d(0, -0.1rem, 0); transform: translate3d(0, -.1rem, 0);
box-shadow: 0 6px 10px rgba($brand-main, 0.1), box-shadow: 0 6px 10px rgba($brand-main, .1),
0 10px 25px rgba($brand-main, 0.05); 0 10px 25px rgba($brand-main, .05);
} }
&:active { &:active {
transition: none; transition: none;
background: rgba(#fff, 0.15); background: rgba(#fff, .15);
} }
:global(.dark) & { :global(.dark) & {
@ -47,8 +47,8 @@
&:hover, &:hover,
&:focus { &:focus {
box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), 0.1), box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), .1),
0 10px 25px rgba(darken($brand-main, 20%), 0.2); 0 10px 25px rgba(darken($brand-main, 20%), .2);
} }
} }
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6
src/styles/_variables.scss
View File

@ -1,5 +1,5 @@
$projectImageMaxWidth: 1200px; $projectImageMaxWidth: 1200px;
$easing: cubic-bezier(0.75, 0, 0.08, 1); $easing: cubic-bezier(.75, 0, .08, 1);
// Colors // Colors
///////////////////////////////////// /////////////////////////////////////
@ -35,8 +35,8 @@ $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: 0.8rem; $font-size-small: .8rem;
$font-size-mini: 0.7rem; $font-size-mini: .7rem;
$font-size-h1: 2.5rem; $font-size-h1: 2.5rem;
$font-size-h2: 2rem; $font-size-h2: 2rem;

6
src/styles/global.scss
View File

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