m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-01-03 18:35:00 +01:00
Code Releases Activity

networks tweaks

Browse Source
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", "syntax": "scss",
"rules": { "rules": {
"indentation": 4, "indentation": 4,
"number-leading-zero": "never",
"no-descending-specificity": null "no-descending-specificity": null
} }
} }

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

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

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, .15), box-shadow: 0 3px 5px rgba($brand-main, 0.15),
0 5px 16px rgba($brand-main, .15); 0 5px 16px rgba($brand-main, 0.15);
margin: $spacer / 4 auto $spacer / 2 auto; margin: $spacer / 4 auto $spacer / 2 auto;
} }
} }

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

@ -22,9 +22,9 @@
margin: 0; margin: 0;
z-index: 2; z-index: 2;
padding: $spacer / 3 $spacer; padding: $spacer / 3 $spacer;
background: rgba($brand-cyan, .9); background: rgba($brand-cyan, 0.9);
transform: translate3d(0, -1rem, 0); transform: translate3d(0, -1rem, 0);
transition: transform .2s ease-out; transition: transform 0.2s ease-out;
} }
.project { .project {
@ -43,13 +43,13 @@
bottom: 0; bottom: 0;
z-index: 1; z-index: 1;
background: transparent; background: transparent;
transition: background .2s ease-out; transition: background 0.2s ease-out;
} }
&:hover, &:hover,
&:focus { &:focus {
&::after { &::after {
background: rgba($brand-cyan, .05); background: rgba($brand-cyan, 0.05);
} }
.title { .title {
@ -73,11 +73,11 @@
color: $brand-grey-dimmed; color: $brand-grey-dimmed;
font-size: $font-size-small; font-size: $font-size-small;
padding: $spacer / 6 $spacer / 2; padding: $spacer / 6 $spacer / 2;
background: rgba($brand-cyan, .9); background: rgba($brand-cyan, 0.9);
z-index: 10; z-index: 10;
opacity: 0; opacity: 0;
transform: translate3d(0, $spacer / 2, 0); transform: translate3d(0, $spacer / 2, 0);
transition: transform .25s ease-out; transition: transform 0.25s ease-out;
svg { svg {
fill: $brand-grey-dimmed; fill: $brand-grey-dimmed;

8
src/styles/_variables.scss
View File

@ -1,5 +1,5 @@
$projectImageMaxWidth: 1200px; $projectImageMaxWidth: 1200px;
$easing: cubic-bezier(.75, 0, .08, 1); $easing: cubic-bezier(0.75, 0, 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: .8rem; $font-size-small: 0.8rem;
$font-size-mini: .7rem; $font-size-mini: 0.7rem;
$font-size-h1: 2.5rem; $font-size-h1: 2.5rem;
$font-size-h2: 2rem; $font-size-h2: 2rem;
@ -67,7 +67,7 @@ $color-headings--dark: $brand-main-light;
///////////////////////////////////// /////////////////////////////////////
$spacer: ($font-size-base * $line-height); $spacer: ($font-size-base * $line-height);
$border-radius: .25rem; $border-radius: 0.25rem;
// Responsive breakpoints // Responsive breakpoints
///////////////////////////////////// /////////////////////////////////////

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