From e76c38db9dc28c1d0e09b603299bbb42882fa99a Mon Sep 17 00:00:00 2001 From: spencerwooo Date: Tue, 31 Aug 2021 17:56:20 +0100 Subject: [PATCH] configurable font family (google fonts) --- config/site.json | 5 +++++ pages/_document.tsx | 9 +++++++++ styles/globals.css | 2 -- styles/markdown-github.css | 6 ++---- tailwind.config.js | 3 ++- 5 files changed, 18 insertions(+), 7 deletions(-) diff --git a/config/site.json b/config/site.json index c4d555f..4da6eb3 100644 --- a/config/site.json +++ b/config/site.json @@ -1,6 +1,11 @@ { "icon": "/icons/128.png", "title": "Spencer's OneDrive Index", + "googleFont": "Rubik", + "googleFontWeights": [ + "400", + "600" + ], "footer": "Powered by onedrive-vercel-index. Made with ❤ by SpencerWoo.", "protectedRoutes": [ "/🌞 Private folder/u-need-a-password", diff --git a/pages/_document.tsx b/pages/_document.tsx index 8491adb..a8ddf44 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,4 +1,5 @@ import Document, { Head, Html, Main, NextScript } from 'next/document' +import siteConfig from '../config/site.json' class MyDocument extends Document { render() { @@ -7,6 +8,14 @@ class MyDocument extends Document { + + +
diff --git a/styles/globals.css b/styles/globals.css index 70ca3d1..7bf4c0d 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,5 +1,3 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); - @tailwind base; @tailwind components; @tailwind utilities; diff --git a/styles/markdown-github.css b/styles/markdown-github.css index 7c62259..90790db 100644 --- a/styles/markdown-github.css +++ b/styles/markdown-github.css @@ -62,8 +62,6 @@ line-height: 1.5; color: #24292e; background-color: #ffffff; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, - Segoe UI Emoji; font-size: 16px; line-height: 1.5; word-wrap: break-word; @@ -992,8 +990,8 @@ .markdown-body { /* color: #c9d1d9; */ /* background-color: #0d1117; */ - color: #F3F4F6; - background-color: #18181B; + color: #f3f4f6; + background-color: #18181b; } .markdown-body a { color: #58a6ff; diff --git a/tailwind.config.js b/tailwind.config.js index 874c065..8e671c7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,6 @@ const defaultTheme = require('tailwindcss/defaultTheme') const colors = require('tailwindcss/colors') +const siteConfig = require('./config/site.json') module.exports = { mode: 'jit', @@ -22,7 +23,7 @@ module.exports = { }, extend: { fontFamily: { - sans: ['Inter', '"Noto Sans SC"', ...defaultTheme.fontFamily.sans] + sans: [`"${siteConfig.googleFont}"`, '"Noto Sans SC"', ...defaultTheme.fontFamily.sans] }, colors: { gray: {