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

networks tweaks

This commit is contained in:
Matthias Kretschmann 2019-11-09 19:59:10 +01:00
parent be8f668740
commit f919b227a3
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.stylelintrc
View File

@ -7,7 +7,6 @@
"syntax": "scss",
"rules": {
"indentation": 4,
"number-leading-zero": "never",
"no-descending-specificity": null
}
}

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

@ -5,9 +5,10 @@
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 20rem;
}
.title {
@ -15,20 +16,22 @@
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 {
margin-left: $spacer / 2;
margin-right: $spacer / 2;
margin-bottom: $spacer / 2;
text-align: center;
display: block;
flex: 1 1 (100% / 5);
flex: 0 1;
min-width: 2.5rem;
&,
svg {
transition: .2s $easing;
transition: 0.2s $easing;
}
svg {
@ -53,12 +56,13 @@
padding: $spacer / 4;
margin-left: $spacer / 4;
margin-right: $spacer / 4;
margin-bottom: $spacer / 4;
}
/* stylelint-disable no-descending-specificity */
svg {
width: .75rem;
height: .75rem;
opacity: .8;
width: $font-size-small;
height: $font-size-small;
opacity: 0.8;
}
}

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;
}
}

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

@ -22,9 +22,9 @@
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;
}
.project {
@ -43,13 +43,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 {
@ -73,11 +73,11 @@
color: $brand-grey-dimmed;
font-size: $font-size-small;
padding: $spacer / 6 $spacer / 2;
background: rgba($brand-cyan, .9);
background: rgba($brand-cyan, 0.9);
z-index: 10;
opacity: 0;
transform: translate3d(0, $spacer / 2, 0);
transition: transform .25s ease-out;
transition: transform 0.25s ease-out;
svg {
fill: $brand-grey-dimmed;

8
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;
@ -67,7 +67,7 @@ $color-headings--dark: $brand-main-light;
/////////////////////////////////////
$spacer: ($font-size-base * $line-height);
$border-radius: .25rem;
$border-radius: 0.25rem;
// Responsive breakpoints
/////////////////////////////////////

4
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,7 +93,7 @@ h6 {
a {
color: $brand-cyan;
text-decoration: none;
transition: .2s ease-out;
transition: 0.2s ease-out;
&:hover,
&:focus {