From abd24e7eb7845b91e75defe1c1f925f2bfbac9f4 Mon Sep 17 00:00:00 2001 From: Ryan Polley Date: Sat, 26 Dec 2020 13:14:33 -0600 Subject: [PATCH] Add ability to customize font size Added an ability to customize font sizes. This is set at a new section in the settings. The controler for this sets a number of css variables which are used in css rules that override tailwind's text- to use the font size and line spacing contained in the variable. The control itself is a simple logarithmic slider that controls a "scale factor" by which all the text sizes in a resume are scaled by. --- src/components/builder/right/RightSidebar.js | 3 ++ .../builder/right/sections/FontSizes.js | 52 +++++++++++++++++++ src/data/fontSizeVarsDefault.js | 18 +++++++ src/data/rightSections.js | 5 ++ src/i18n/locales/en.json | 1 + src/styles/tailwind.css | 28 ++++++++++ src/templates/blocks/Awards/AwardsA.js | 2 +- .../blocks/Certifications/CertificationsA.js | 2 +- src/templates/blocks/Education/EducationA.js | 2 +- src/templates/blocks/Hobbies/HobbiesA.js | 2 +- src/templates/blocks/Languages/LanguagesA.js | 2 +- src/templates/blocks/Languages/LanguagesB.js | 2 +- src/templates/blocks/Projects/ProjectsA.js | 2 +- .../blocks/References/ReferencesA.js | 2 +- .../blocks/References/ReferencesB.js | 2 +- src/templates/blocks/Skills/SkillsA.js | 2 +- src/templates/blocks/Work/WorkA.js | 2 +- 17 files changed, 118 insertions(+), 11 deletions(-) create mode 100644 src/components/builder/right/sections/FontSizes.js create mode 100644 src/data/fontSizeVarsDefault.js diff --git a/src/components/builder/right/RightSidebar.js b/src/components/builder/right/RightSidebar.js index 413c7664..f702b6fe 100644 --- a/src/components/builder/right/RightSidebar.js +++ b/src/components/builder/right/RightSidebar.js @@ -10,6 +10,7 @@ import Fonts from './sections/Fonts'; import Layout from './sections/Layout'; import Settings from './sections/Settings'; import Templates from './sections/Templates'; +import FontSizes from './sections/FontSizes'; const getComponent = (id) => { switch (id) { @@ -27,6 +28,8 @@ const getComponent = (id) => { return Settings; case 'about': return About; + case 'font-sizes': + return FontSizes; default: throw new Error(); } diff --git a/src/components/builder/right/sections/FontSizes.js b/src/components/builder/right/sections/FontSizes.js new file mode 100644 index 00000000..03d4b738 --- /dev/null +++ b/src/components/builder/right/sections/FontSizes.js @@ -0,0 +1,52 @@ +/* eslint-disable jsx-a11y/control-has-associated-label */ +import React, { memo, useState, useEffect } from 'react'; +import fontSizeVarsDefault from '../../../../data/fontSizeVarsDefault'; +import Heading from '../../../shared/Heading'; + +/* font size control */ +const FontSizes = ({ id }) => { + // precompute some stuff for the logarithmic slider + const logMax = 2.5; + const logDefault = 1; + const logMin = 0.6; + const steps = 20; + const logRange = logMax / logMin; + const logStepSize = logRange ** (1 / steps); + const min = 0; + const max = min + steps - 1; + const scaleDefault = Math.log(logDefault / logMin) / Math.log(logStepSize); + const [fontScale, setFontScale] = useState(scaleDefault); + + // translate a linearly scaled value from the slider into a scale factor + const scale = (value) => logStepSize ** (value - min) * logMin; + + useEffect(() => { + /* loop through the css variables we need to set and set them to the default + for that variable multiplied by the scale factor */ + for (const [key, sizeDefault] of Object.entries(fontSizeVarsDefault)) { + document.documentElement.style.setProperty( + key, + `${scale(fontScale) * sizeDefault}rem`, + ); + } + }, [fontScale]); + + const onChange = (event) => setFontScale(event.target.value); + + return ( +
+ + + +
+ ); +}; + +export default memo(FontSizes); diff --git a/src/data/fontSizeVarsDefault.js b/src/data/fontSizeVarsDefault.js new file mode 100644 index 00000000..7a89848c --- /dev/null +++ b/src/data/fontSizeVarsDefault.js @@ -0,0 +1,18 @@ +const fontSizeVarsDefault = { + '--text-xs-size': 0.75, + '--text-sm-size': 0.875, + '--text-lg-size': 1.125, + '--text-xl-size': 1.25, + '--text-2xl-size': 1.5, + '--text-3xl-size': 1.875, + '--text-4xl-size': 2.25, + '--text-xs-line-height': 1, + '--text-sm-line-height': 1.25, + '--text-lg-line-height': 1.75, + '--text-xl-line-height': 1.75, + '--text-2xl-line-height': 2, + '--text-3xl-line-height': 2.25, + '--text-4xl-line-height': 2.5, +}; + +export default fontSizeVarsDefault; diff --git a/src/data/rightSections.js b/src/data/rightSections.js index 2b008865..5d0f0153 100644 --- a/src/data/rightSections.js +++ b/src/data/rightSections.js @@ -6,6 +6,7 @@ import { MdInfo, MdSettings, MdStyle, + MdFormatSize, } from 'react-icons/md'; export default [ @@ -25,6 +26,10 @@ export default [ id: 'fonts', icon: MdFontDownload, }, + { + id: 'font-sizes', + icon: MdFormatSize, + }, { id: 'actions', icon: MdImportExport, diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 1be5a910..757f409e 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -87,6 +87,7 @@ "templates": "Templates", "layout": "Layout", "colors": "Colors", + "font-sizes": "Font Sizes", "fonts": "Fonts", "actions": "Actions", "settings": "Settings", diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index b5c61c95..7fcc9a4d 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -1,3 +1,31 @@ @tailwind base; @tailwind components; @tailwind utilities; +#page .text-xs { + font-size: var(--text-xs-size); + line-height: var(--text-xs-line-height); +} +#page .text-sm { + font-size: var(--text-sm-size); + line-height: var(--text-sm-line-height); +} +#page .text-lg { + font-size: var(--text-lg-size); + line-height: var(--text-lg-line-height); +} +#page .text-xl { + font-size: var(--text-xl-size); + line-height: var(--text-xl-line-height); +} +#page .text-2xl { + font-size: var(--text-2xl-size); + line-height: var(--text-2xl-line-height); +} +#page .text-3xl { + font-size: var(--text-3xl-size); + line-height: var(--text-3xl-line-height); +} +#page .text-4xl { + font-size: var(--text-4xl-size); + line-height: var(--text-4xl-line-height); +} \ No newline at end of file diff --git a/src/templates/blocks/Awards/AwardsA.js b/src/templates/blocks/Awards/AwardsA.js index cecd24b8..832e677a 100644 --- a/src/templates/blocks/Awards/AwardsA.js +++ b/src/templates/blocks/Awards/AwardsA.js @@ -7,7 +7,7 @@ const AwardItem = ({ item, language }) => (
-
{item.title}
+
{item.title}
{item.awarder}
{item.date && ( diff --git a/src/templates/blocks/Certifications/CertificationsA.js b/src/templates/blocks/Certifications/CertificationsA.js index 45a22a5e..595a5c33 100644 --- a/src/templates/blocks/Certifications/CertificationsA.js +++ b/src/templates/blocks/Certifications/CertificationsA.js @@ -7,7 +7,7 @@ const CertificationItem = ({ item, language }) => (
-
{item.title}
+
{item.title}
{item.issuer}
{item.date && ( diff --git a/src/templates/blocks/Education/EducationA.js b/src/templates/blocks/Education/EducationA.js index 4793524f..458eeb12 100644 --- a/src/templates/blocks/Education/EducationA.js +++ b/src/templates/blocks/Education/EducationA.js @@ -10,7 +10,7 @@ const EducationItem = ({ item, language }) => {
-
{item.institution}
+
{item.institution}
{item.degree} {item.field} diff --git a/src/templates/blocks/Hobbies/HobbiesA.js b/src/templates/blocks/Hobbies/HobbiesA.js index d68f2d56..c6b44374 100644 --- a/src/templates/blocks/Hobbies/HobbiesA.js +++ b/src/templates/blocks/Hobbies/HobbiesA.js @@ -4,7 +4,7 @@ import { safetyCheck } from '../../../utils'; const HobbyA = (x) => (
-
{x.name}
+
{x.name}
); diff --git a/src/templates/blocks/Languages/LanguagesA.js b/src/templates/blocks/Languages/LanguagesA.js index 2315e01f..985a6e2e 100644 --- a/src/templates/blocks/Languages/LanguagesA.js +++ b/src/templates/blocks/Languages/LanguagesA.js @@ -4,7 +4,7 @@ import { safetyCheck } from '../../../utils'; const LanguageItem = (x) => (
-
{x.name}
+
{x.name}
{x.fluency}
); diff --git a/src/templates/blocks/Languages/LanguagesB.js b/src/templates/blocks/Languages/LanguagesB.js index b05b1f83..793063fd 100644 --- a/src/templates/blocks/Languages/LanguagesB.js +++ b/src/templates/blocks/Languages/LanguagesB.js @@ -4,7 +4,7 @@ import { safetyCheck } from '../../../utils'; const LanguageItem = (x) => (
-
{x.name}
+
{x.name}
{x.fluency}
); diff --git a/src/templates/blocks/Projects/ProjectsA.js b/src/templates/blocks/Projects/ProjectsA.js index b7e601e4..c2005ea1 100644 --- a/src/templates/blocks/Projects/ProjectsA.js +++ b/src/templates/blocks/Projects/ProjectsA.js @@ -10,7 +10,7 @@ const ProjectItem = ({ item, language }) => {
-
{item.title}
+
{item.title}
{item.link && ( {item.link} diff --git a/src/templates/blocks/References/ReferencesA.js b/src/templates/blocks/References/ReferencesA.js index 5c9aa1a8..9e410d15 100644 --- a/src/templates/blocks/References/ReferencesA.js +++ b/src/templates/blocks/References/ReferencesA.js @@ -5,7 +5,7 @@ import { safetyCheck } from '../../../utils'; const ReferenceItem = (x) => (
-
{x.name}
+
{x.name}
{x.position} {x.phone} {x.email} diff --git a/src/templates/blocks/References/ReferencesB.js b/src/templates/blocks/References/ReferencesB.js index b5de74fd..ce331225 100644 --- a/src/templates/blocks/References/ReferencesB.js +++ b/src/templates/blocks/References/ReferencesB.js @@ -5,7 +5,7 @@ import { safetyCheck } from '../../../utils'; const ReferenceItem = (x) => (
-
{x.name}
+
{x.name}
{x.position} {x.phone} {x.email} diff --git a/src/templates/blocks/Skills/SkillsA.js b/src/templates/blocks/Skills/SkillsA.js index c5f4eac1..15a9f9fd 100644 --- a/src/templates/blocks/Skills/SkillsA.js +++ b/src/templates/blocks/Skills/SkillsA.js @@ -4,7 +4,7 @@ import { safetyCheck } from '../../../utils'; const SkillItem = (x) => (
-
{x.name}
+
{x.name}
{x.level}
); diff --git a/src/templates/blocks/Work/WorkA.js b/src/templates/blocks/Work/WorkA.js index fca95ed3..cc4aa2b5 100644 --- a/src/templates/blocks/Work/WorkA.js +++ b/src/templates/blocks/Work/WorkA.js @@ -10,7 +10,7 @@ const WorkItem = ({ item, language }) => {
-
{item.company}
+
{item.company}
{item.position}
{item.startDate && (