1
0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-06-16 17:33:22 +02:00
This commit is contained in:
Matthias Kretschmann 2018-09-17 21:30:04 +02:00
parent efcb84b594
commit 8b15a69f61
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 7 additions and 3 deletions

View File

@ -78,7 +78,7 @@ All project images make use of the excellent [gatsby-image](https://github.com/g
All together, Gatsby automatically generates all required image sizes for delivering responsible, responsive images to visitors, including lazy loading of all images. Also includes the [intersection-observer polyfill](https://github.com/w3c/IntersectionObserver) to make lazy loading work properly in Safari. All together, Gatsby automatically generates all required image sizes for delivering responsible, responsive images to visitors, including lazy loading of all images. Also includes the [intersection-observer polyfill](https://github.com/w3c/IntersectionObserver) to make lazy loading work properly in Safari.
All project images use one single component defined in [`src/components/molecules/ProjectImage.jsx`](src/components/atoms/ProjectImage.jsx). In there, one main GraphQL query fragment is defined, which then gets used throughout other GraphQL queries. All project images use one single component defined in [`src/components/molecules/ProjectImage.jsx`](src/components/molecules/ProjectImage.jsx). In there, one main GraphQL query fragment is defined, which then gets used throughout other GraphQL queries.
### 💎 Importing SVG assets ### 💎 Importing SVG assets
@ -88,7 +88,7 @@ All SVG assets under `src/images/` will be converted to React components before
import Logo from './components/svg/Logo' import Logo from './components/svg/Logo'
``` ```
That's done with a simple bash script under [`scripts/svg.sh`](src/scripts/svg.sh) That's done with a simple bash script under [`scripts/svg.sh`](scripts/svg.sh)
### 🍬 Typekit component ### 🍬 Typekit component

View File

@ -14,9 +14,13 @@
.project { .project {
flex: 0 0 calc(50% - #{$spacer}); flex: 0 0 calc(50% - #{$spacer});
text-align: center; text-align: center;
margin-bottom: $spacer * 2; margin-bottom: $spacer * 6;
position: relative; position: relative;
@media (min-width: 55rem) {
margin-bottom: $spacer * 2;
}
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }