Added fonts

This commit is contained in:
Maxi Ferreira 2021-11-30 21:52:32 -08:00
parent 6f7ba84e18
commit 00de7a5d00
7 changed files with 15 additions and 15 deletions

3
TODO
View File

@ -1,9 +1,10 @@
[ ] Update README
[ ] Install Fonts
[ ] Style Code blocks
[x] Style Code blocks
[x] Highlight current navigation item
[ ] Use css variables
[ ] Dark mode
[x] Resize Logo
[ ] Reading time
[x] Bio component
[ ] Add social image

View File

@ -33,8 +33,9 @@ const { title, description, permalink } = Astro.props;
<meta property="twitter:image" content="https://astro.build/social.jpg?v=1" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href={Astro.resolve('../styles/global.css')} />

View File

@ -10,7 +10,7 @@
footer {
color: #AAA;
font-size: 1em;
font-family: Rubik, sans-serif;
font-family: var(--font-family-sans);
margin: 1em auto;
max-width: 1400px;
padding: 1em 2em;

View File

@ -7,7 +7,7 @@ const { current = '' } = Astro.props;
align-items: flex-end;
display: flex;
flex: 1;
font-family: Rubik, sans-serif;
font-family: var(--font-family-sans);
font-weight: 700;
justify-content: flex-end;
text-transform: uppercase;

View File

@ -33,7 +33,7 @@ const {title, description, publishDate, author, heroImage, permalink, alt} = con
header p {
color: #AAA;
text-transform: uppercase;
font-family: Rubik, sans-serif;
font-family: var(--font-family-sans);
font-weight: 600;
}

View File

@ -1,10 +1,6 @@
---
import BaseLayout from '../../layouts/BaseLayout.astro';
interface MarkdownFrontmatter {
publishDate: number;
}
const title = 'Blog';
const description = 'Latest articles.';
const permalink = 'https://example.com/blog';
@ -36,7 +32,7 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(
<style>
h2,
.post-item-footer {
font-family: Rubik, sans-serif;
font-family: var(--font-family-sans);
font-weight: 700;
}

View File

@ -2,6 +2,8 @@
--background-body: #fff;
--text-main: #36393b;
--primary-color: #548E9B;
--font-family-serif: Merriweather, serif;
--font-family-sans: 'Fira Sans', sans-serif;
}
/* :root {
@ -16,7 +18,7 @@
body {
margin: 0;
font-family: Merriweather, serif;
font-family: var(--font-family-serif);
font-size: 16px;
line-height: 1.6;
background-color: var(--background-body);
@ -24,14 +26,14 @@ body {
}
h1, h2, h3, h4, h5, h6 {
font-family: Rubik, sans-serif;
font-family: var(--font-family-sans);
font-weight: 700;
line-height: 1.2;
margin: 0 0 0.5em 0;
}
h1 {
font-family: Merriweather, serif;
font-family: var(--font-family-serif);
font-size: 4em;
margin: 0 0 1em 0;
}
@ -162,7 +164,7 @@ figure {
table {
border-collapse: collapse;
font-family: Rubik, sans-serif;
font-family: var(--font-family-sans);
font-size: 1.125em;
margin: 2em 0;
}