kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-05-28 08:16:36 +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

13
src/_mixins.scss
View file

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

9
src/components/seo.js
View file

@ -65,15 +65,6 @@ function SEO({ description, meta, title }) {
},
].concat(meta)}
>
<script
src="https://kit.fontawesome.com/1377f925e0.js"
crossOrigin="anonymous"
></script>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Roboto&display=swap"
rel="stylesheet"
/>
<meta
name="battery-savings"
content="allow-reduced-framerate"

4
src/layouts/default.scss
View file

@ -1,5 +1,9 @@
@import "~@fontsource/anonymous-pro/index.css";
@import "~@fontsource/anonymous-pro/700.css";
@import "../variables";
* {
box-sizing: border-box;
}

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

11
src/templates/project.js
View file

@ -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"
>
<i
className="fab fa-github"
aria-hidden="true"
></i>{" "}
<Github height={15}/>{" "}
<Trans>projectViewGitHub</Trans>
</a>
) : null}
@ -113,10 +111,7 @@ const ProjectTemplate = ({ data }) => {
target="_blank"
rel="noreferrer"
>
<i
className="fas fa-external-link-alt"
aria-hidden="true"
></i>{" "}
<ExternalLink height={15}/>{" "}
<Trans>projectViewWebsite</Trans>
</a>
) : null}

1
src/templates/project.module.scss
View file

@ -82,6 +82,7 @@
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
a {