kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-06-05 12:12:04 +02:00
Code Issues Projects Releases Wiki Activity

Use Fontsource and Lucide

Browse source 
Replacing Google Fonts and FontAwesome
This commit is contained in:
Kevin Kandlbinder 2021-09-24 15:49:14 +02:00
parent 4fb0aae042
commit 833318ba3d
12 changed files with 69 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/pages/donate.js
View file

@ -6,6 +6,7 @@ import PropTypes from "prop-types";
import GitHubButton from "react-github-btn";
import * as styles from "./donate.module.scss";
import { ArrowRight } from "lucide-react";
export const query = graphql`
query ($language: String!) {
@ -127,10 +128,7 @@ const DonatePage = (props) => {
}
>
<span>Donate using PayPal</span>
<i
className="fas fa-fw fa-chevron-right"
aria-hidden="true"
></i>
<ArrowRight/>
</a>
</article>
</section>

6
src/pages/friends.js
View file

@ -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"
>
<i
className="fas fa-globe-europe"
aria-hidden="true"
></i>{" "}
<Globe2 height={20}/>{" "}
{friend.url}
</a>
</div>

15
src/pages/friends.module.scss
View file

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

19
src/pages/index.js
View file

@ -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"
>
<i className="fas fa-fw fa-phone"></i>
<Phone width={20} />
{meta.contactPhone}
</a>
<a
@ -153,7 +154,7 @@ const IndexPage = (props) => {
href={"mailto:" + meta.contactEmail}
rel="me"
>
<i className="far fa-fw fa-envelope"></i>
<Mail width={20}/>
{meta.contactEmail}
</a>
<a
@ -162,7 +163,7 @@ const IndexPage = (props) => {
rel="noreferrer "
target="_blank"
>
<i className="fas fa-fw fa-map-marker-alt"></i>
<MapPin width={20} />
<Trans>homeMyLocation</Trans>
</a>
<a
@ -171,7 +172,7 @@ const IndexPage = (props) => {
rel="noreferrer me"
target="_blank"
>
<i className="fab fa-fw fa-mastodon"></i>
<AtSign width={20}/>
{meta.contactMastodon}
</a>
<a
@ -182,7 +183,7 @@ const IndexPage = (props) => {
rel="noreferrer me"
target="_blank"
>
<i className="fab fa-fw fa-github"></i>
<Github width={20}/>
{meta.contactGitHub}
</a>
</div>
@ -237,10 +238,10 @@ const IndexPage = (props) => {
>
<div>
<span>
<i className="fas fa-fw fa-camera"></i>{" "}
<Camera/>{" "}
<Trans>homeImageCredit</Trans>
</span>
<i className="fas fa-fw fa-chevron-right"></i>
<ArrowRight/>
</div>
</a>
<section className="featuredSection">
@ -289,7 +290,7 @@ const IndexPage = (props) => {
</div>
<Link to="/projects" className={styles.seeMoreButton}>
<Trans>seeMore</Trans>{" "}
<i className="fas fa-fw fa-chevron-right"></i>
<ArrowRight/>
</Link>
</article>
</section>
@ -298,7 +299,7 @@ const IndexPage = (props) => {
<span>
<Trans>donationCatchphrase</Trans>
</span>
<i className="fas fa-fw fa-chevron-right"></i>
<ArrowRight/>
</div>
</Link>
</Layout>

23
src/pages/index.module.scss
View file

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