diff --git a/README.md b/README.md index 48fcb32..8953926 100644 --- a/README.md +++ b/README.md @@ -14,3 +14,37 @@ It requires Node.js 22 or newer. 7. When you are satisfied with the results run `npm run export` to generate the static site. * The results of the export can be found in the `out` folder. +## Customizing Colors and Fonts + +The `portfolio.json` file may include a `style` section to override the default +colors and fonts. The following keys are supported: + +``` +{ + "style": { + "colors": { + "text": "#ffddff", + "background": "#111111", + "accent": "#ad71fb", + "accentAlt": "#ffddff", + "iconBackground": "#dfdfdf", + "icon": "#111111" + }, + "fonts": { + "body": "'lato', sans-serif", + "header": "'PT Sans', sans-serif", + "googleFontsUrl": "//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400" + } + } +} +``` + +Any of these values can be omitted to use their defaults. The fonts URL +defaults to the value in `DEFAULT_GOOGLE_FONTS_URL` inside `pages/index.js`. + +### Using Google Fonts + +1. Browse or search fonts at [fonts.google.com](https://fonts.google.com). +2. Add each font to your selection then open the **Get embed code** panel. +3. Copy the `href` attribute from the `` tag and place it in + `style.fonts.googleFontsUrl`. diff --git a/pages/index.js b/pages/index.js index 4b0740b..569a927 100644 --- a/pages/index.js +++ b/pages/index.js @@ -11,6 +11,9 @@ import { } from '@fortawesome/free-brands-svg-icons' import { faAt } from '@fortawesome/free-solid-svg-icons' +const DEFAULT_GOOGLE_FONTS_URL = + '//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400' + export async function getStaticProps() { const fs = require('fs') const path = require('path') @@ -81,13 +84,26 @@ const icons = { } export default function Home({ data, headerPictureUrl, faviconUrl, faviconType, portfolioEntries, description }) { + const styleVars = [] + const colors = data.style?.colors || {} + const fonts = data.style?.fonts || {} + if (colors.text) styleVars.push(`--color-text: ${colors.text}`) + if (colors.background) styleVars.push(`--color-background: ${colors.background}`) + if (colors.accent) styleVars.push(`--color-accent: ${colors.accent}`) + if (colors.accentAlt) styleVars.push(`--color-accent-alt: ${colors.accentAlt}`) + if (colors.iconBackground) styleVars.push(`--color-icon-background: ${colors.iconBackground}`) + if (colors.icon) styleVars.push(`--color-icon: ${colors.icon}`) + if (fonts.body) styleVars.push(`--font-body: ${fonts.body}`) + if (fonts.header) styleVars.push(`--font-header: ${fonts.header}`) + return ( <> {data.pageTitle ? data.pageTitle : data.title} {faviconUrl && } - + + {styleVars.length > 0 && } {data.googleAnalyticsID && ( <> diff --git a/portfolio.default.json b/portfolio.default.json index 470a81d..77b54f0 100644 --- a/portfolio.default.json +++ b/portfolio.default.json @@ -7,6 +7,21 @@ }, "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac laoreet dui. Suspendisse sed risus elit. Sed a commodo leo. Proin vulputate convallis ultrices. Praesent ut mi vitae dui interdum ullamcorper sit amet sit amet justo. Sed non fringilla felis. Curabitur vel elementum sem, tempus tincidunt justo. Nunc et nibh imperdiet, mollis mi ut, tristique orci. Mauris sit amet ligula purus. Etiam fermentum, neque quis cursus posuere, ligula magna vehicula diam, ut dapibus velit ex id ante.", "gravatarEmail": "test@gravatar.com", + "style": { + "colors": { + "text": "#ffddff", + "background": "#111111", + "accent": "#ad71fb", + "accentAlt": "#ffddff", + "iconBackground": "#dfdfdf", + "icon": "#111111" + }, + "fonts": { + "body": "'lato', sans-serif", + "header": "'PT Sans', sans-serif", + "googleFontsUrl": "//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400" + } + }, "footer": "Use this repo for your own portfolio site!", "headerPicture": { "linkUrl": "http://example.com/header.png", diff --git a/styles/styles.css b/styles/styles.css index 7835022..8c64440 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1,20 +1,20 @@ body { - color: #ffddff; - font-family: "lato", sans-serif; - background-color: #111111; + color: var(--color-text, #ffddff); + font-family: var(--font-body, 'lato', sans-serif); + background-color: var(--color-background, #111111); } h1, h2, h3, h4, h5 { - font-family: "PT Sans", sans-serif; + font-family: var(--font-header, 'PT Sans', sans-serif); font-weight: 700; - color: #ad71fb; + color: var(--color-accent, #ad71fb); } a { - color: #ad71fb; + color: var(--color-accent, #ad71fb); } a:visited, a:hover { - color: #ffddff; + color: var(--color-accent-alt, #ffddff); } @media only screen and (max-width: 650px) { @@ -57,8 +57,8 @@ a:visited, a:hover { /*Github has its own circle*/ } .portfolio__element__icon { - background-color: #dfdfdf; - color: #111111; + background-color: var(--color-icon-background, #dfdfdf); + color: var(--color-icon, #111111); width: 70px; height: 70px; padding: 29px; @@ -69,7 +69,7 @@ a:visited, a:hover { font-size: 70px; } .portfolio__element:not(.portfolio__element--github):hover .portfolio__element__icon, .portfolio__element .portfolio__element:not(.portfolio__element--github):active .portfolio__element__icon { - background-color: #ad71fb; + background-color: var(--color-accent, #ad71fb); transition: all 0.2s ease-in 0.1s; } .portfolio__element--github .portfolio__element__icon { @@ -78,14 +78,14 @@ a:visited, a:hover { text-align: center; padding: 0; border-radius: 0; - color: #dfdfdf; + color: var(--color-icon-background, #dfdfdf); background-color: initial; } .portfolio__element--github .portfolio__element__icon svg { font-size: 128px; } .portfolio__element--github:hover .portfolio__element__icon, .portfolio__element--github .portfolio__element--github:active .portfolio__element__icon { - color: #ad71fb; + color: var(--color-accent, #ad71fb); transition: all 0.2s ease-in 0.1s; /*Size transitions must be done differently*/ }