fortytwo/me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change website font

Browse source 
I think Work Sans was too harsh. Nunito looks better.
This commit is contained in:
Naman Sood 2020-01-04 20:47:31 -05:00
parent bddc0bd69f
commit 3ccca72bc6
3 changed files with 27 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

19
css/style.css
View file

@ -8,7 +8,7 @@ html {
body {
margin: 0;
font-family: "Work Sans", sans-serif;
font-family: "Nunito", sans-serif;
}
body.dark-mode {
@ -63,7 +63,7 @@ body.dark-mode footer {
}
.main h1 {
font-size: 4rem;
font-weight: 500;
font-weight: 600;
margin: 0 0 2rem;
color: #333;
}
@ -85,19 +85,24 @@ body.dark-mode footer {
white-space: nowrap;
position: relative;
}
.main a:before {
.main a:before, .main a:after {
content: "";
bottom: 0.2rem;
bottom: 0.4rem;
left: 0;
width: 100%;
height: 0.1rem;
background: rgba(51, 51, 51, 0.2);
position: absolute;
transform: scaleX(0);
transform-origin: center left;
opacity: 0.2;
transition: all 0.2s ease;
}
.main a:before {
transform: scaleX(0);
transform-origin: center left;
}
.main a:after {
opacity: 0.5;
}
.main a:hover:before {
transform: scaleX(1);
opacity: 1;
@ -304,7 +309,7 @@ body.dark-mode footer {
#contact .contact-info-container a.contact-method i.email:before {
content: "@";
font-style: normal;
font-weight: 500;
font-weight: bold;
line-height: 5.5rem;
top: 0;
left: 0;

21
css/style.scss
View file

@ -8,7 +8,7 @@ html {
body {
margin: 0;
font-family: 'Work Sans', sans-serif;
font-family: 'Nunito', sans-serif;
}
body.dark-mode {
@ -74,7 +74,7 @@ body.dark-mode {
h1 {
font-size: 4rem;
font-weight: 500;
font-weight: 600;
margin: 0 0 2rem;
color: #333;
}
@ -99,20 +99,27 @@ body.dark-mode {
white-space: nowrap;
position: relative;
&:before {
&:before, &:after {
content: '';
bottom: 0.2rem;
bottom: 0.4rem;
left: 0;
width: 100%;
height: 0.1rem;
background: rgba(#333, 0.2);
position: absolute;
transform: scaleX(0);
transform-origin: center left;
opacity: 0.2;
transition: all 0.2s ease;
}
&:before {
transform: scaleX(0);
transform-origin: center left;
}
&:after {
opacity: 0.5;
}
&:hover:before {
transform: scaleX(1);
opacity: 1;
@ -348,7 +355,7 @@ body.dark-mode {
&:before {
content: '@';
font-style: normal;
font-weight: 500;
font-weight: bold;
line-height: 5.5rem;
top: 0;
left: 0;

2
index.html
View file

@ -12,7 +12,7 @@
<meta property="og:description" content="Web developer and technology enthusiast who's never gonna give you up.">
<meta property="og:image" content="https://nsood.in/screenshot.php">
<meta name="twitter:creator" content="@tendstofortytwo">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,500">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Nunito:400,600,700">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
</head>