Added fonts
This commit is contained in:
parent
6f7ba84e18
commit
00de7a5d00
3
TODO
3
TODO
@ -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
|
||||
|
@ -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')} />
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user