diff --git a/package.json b/package.json index e4df3da..5fe8b62 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "dependencies": { "@babel/cli": "7.15.7", "@babel/plugin-transform-typescript": "7.15.4", + "@fontsource/anonymous-pro": "^4.5.0", "@mdx-js/mdx": "1.6.22", "@mdx-js/react": "1.6.22", "animejs": "3.2.1", @@ -42,6 +43,7 @@ "gatsby-transformer-sharp": "^3.14.0", "i18next": "21.0.2", "locale": "0.1.0", + "lucide-react": "^0.16.0", "prop-types": "15.7.2", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/src/_mixins.scss b/src/_mixins.scss index 8ac0c13..8223027 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -42,7 +42,7 @@ } @mixin buttonBasic { - display: block; + display: flex; padding: 10px; text-align: center; background: $accentColor; @@ -50,6 +50,12 @@ text-decoration: none; box-shadow: 0 0 33px -10px rgba($accentColor, 0.5); transition: box-shadow 0.25s; + align-items: center; + justify-content: center; + + svg { + margin-left: 10px; + } &:hover, &:active, @@ -66,7 +72,6 @@ @mixin homeBanner { background: lighten($background, 1); cursor: pointer; - display: block; text-decoration: none; color: inherit; transition: background-color 0.25s, color 0.25s; @@ -75,10 +80,6 @@ background: darken($accentColor, 1); } - img { - height: 50px; - } - > div { display: flex; height: 100%; diff --git a/src/components/seo.js b/src/components/seo.js index ca4757a..75c16d1 100644 --- a/src/components/seo.js +++ b/src/components/seo.js @@ -65,15 +65,6 @@ function SEO({ description, meta, title }) { }, ].concat(meta)} > - - - { } > Donate using PayPal - + diff --git a/src/pages/friends.js b/src/pages/friends.js index 9f88de8..a76a40b 100644 --- a/src/pages/friends.js +++ b/src/pages/friends.js @@ -6,6 +6,7 @@ import PropTypes from "prop-types"; import * as styles from "./friends.module.scss"; import { GatsbyImage, getImage } from "gatsby-plugin-image"; +import { Globe2 } from "lucide-react"; export const query = graphql` query AllFriendsQuery($language: String!) { @@ -122,10 +123,7 @@ const FriendsPage = ({ data }) => { target="_blank" rel="noreferrer" > - {" "} + {" "} {friend.url} diff --git a/src/pages/friends.module.scss b/src/pages/friends.module.scss index 32b526d..4ead5a5 100644 --- a/src/pages/friends.module.scss +++ b/src/pages/friends.module.scss @@ -61,19 +61,20 @@ .contactLink { transition: text-decoration 0.5s; text-decoration: underline dotted rgba(0, 0, 0, 0); - padding: 6px 0 6px 25px; + padding: 6px 0 6px 0; color: $textColor; transition: color 0.25s; + display: flex; + align-items: center; + + svg { + color: $accentColor; + margin-right: 10px; + } @media (prefers-color-scheme: light) { color: $lightTextColor; } - - > i { - color: $accentColor; - margin-left: -25px; - margin-right: 5px; - } } } } diff --git a/src/pages/index.js b/src/pages/index.js index 364cbf2..671baf1 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -14,6 +14,7 @@ import anime from "animejs"; import { tsParticles } from "tsparticles"; import * as particleConfig from "./index.particles.json"; +import { ArrowRight, AtSign, Camera, Github, Mail, MapPin, Phone } from "lucide-react"; export const query = graphql` query GetMetaAndProjects($language: String) { @@ -145,7 +146,7 @@ const IndexPage = (props) => { href={"tel:" + meta.contactPhone} rel="me" > - + {meta.contactPhone} { href={"mailto:" + meta.contactEmail} rel="me" > - + {meta.contactEmail} { rel="noreferrer " target="_blank" > - + homeMyLocation { rel="noreferrer me" target="_blank" > - + {meta.contactMastodon} { rel="noreferrer me" target="_blank" > - + {meta.contactGitHub} @@ -237,10 +238,10 @@ const IndexPage = (props) => { >
- {" "} + {" "} homeImageCredit - +
@@ -289,7 +290,7 @@ const IndexPage = (props) => { seeMore{" "} - +
@@ -298,7 +299,7 @@ const IndexPage = (props) => { donationCatchphrase - + diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index ff82086..3bdf9ba 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -93,8 +93,16 @@ .contactLink { transition: text-decoration 0.5s; text-decoration: underline dotted rgba(0, 0, 0, 0); - padding: 6px 0 6px 25px; + padding: 6px 0 6px 0; color: $textColor; + display: flex; + align-items: center; + + svg { + margin-right: 10px; + color: $accentColor; + flex-shrink: 0; + } @media (pointer: coarse), (pointer: none) { padding-top: 15px; @@ -167,6 +175,10 @@ .donationSection, .hireMeSection { @include homeBanner; + + svg { + height: 50px; + } } .creditSection { @@ -178,8 +190,13 @@ font-size: 1.2em; color: white; - > span > i { - line-height: 15px !important; + > span { + display: flex; + align-items: center; + + svg { + margin-right: 10px; + } } } } diff --git a/src/templates/project.js b/src/templates/project.js index a15b023..0affe61 100644 --- a/src/templates/project.js +++ b/src/templates/project.js @@ -7,6 +7,7 @@ import PropTypes from "prop-types"; import * as styles from "./project.module.scss"; import { MDXRenderer } from "gatsby-plugin-mdx"; import { GatsbyImage } from "gatsby-plugin-image"; +import { ExternalLink, Github } from "lucide-react"; export const query = graphql` query GetProject($urlname: String!, $lang: String!, $language: String!) { @@ -100,10 +101,7 @@ const ProjectTemplate = ({ data }) => { target="_blank" rel="noreferrer" > - {" "} + {" "} projectViewGitHub ) : null} @@ -113,10 +111,7 @@ const ProjectTemplate = ({ data }) => { target="_blank" rel="noreferrer" > - {" "} + {" "} projectViewWebsite ) : null} diff --git a/src/templates/project.module.scss b/src/templates/project.module.scss index c880b11..461d335 100644 --- a/src/templates/project.module.scss +++ b/src/templates/project.module.scss @@ -82,6 +82,7 @@ display: flex; justify-content: center; flex-wrap: wrap; + align-items: center; } a { diff --git a/yarn.lock b/yarn.lock index cf77cf7..8be416b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1131,6 +1131,11 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@fontsource/anonymous-pro@^4.5.0": + version "4.5.0" + resolved "https://registry.yarnpkg.com/@fontsource/anonymous-pro/-/anonymous-pro-4.5.0.tgz#cc618eb2692ed0414f45c5e1c2ab1efeb5ca10d7" + integrity sha512-4+JsJ0J/0NZvqiKv6TtkG5fCrs5RNSylAQ4vEifCRTlIZCWUDAjEmRz6s0DdRicTSLaOBoAUIp7efufWmHbpmw== + "@gatsbyjs/reach-router@^1.3.6": version "1.3.6" resolved "https://registry.yarnpkg.com/@gatsbyjs/reach-router/-/reach-router-1.3.6.tgz#4e8225836959be247890b66f21a3198a0589e34d" @@ -7979,6 +7984,11 @@ lru-queue@^0.1.0: dependencies: es5-ext "~0.10.2" +lucide-react@^0.16.0: + version "0.16.0" + resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.16.0.tgz#38573a3e287712cb1d56aa6dd46e47e3323ba8f4" + integrity sha512-R5chQb550S+znoZPAJTHRqAOq6NiMCr4Pm8C0irPBNPEjx3Oarvqt+dbiFu4DWaSR2bMh2iOj0IgtOepoPDdaQ== + make-dir@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"