Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-21 20:21:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

Add ability to customize font size

Browse Source 
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-<size> 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.
This commit is contained in:
Ryan Polley
2020-12-26 13:14:33 -06:00
parent c1cc9d0a69
commit abd24e7eb7
17 changed files with 118 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/templates/blocks/Awards/AwardsA.js
View File

@ -7,7 +7,7 @@ const AwardItem = ({ item, language }) => (
<div>
<div className="flex justify-between items-center">
<div className="flex flex-col text-left mr-2">
<h6 className="font-semibold">{item.title}</h6>
<h6 className="font-semibold text-sm">{item.title}</h6>
<span className="text-xs">{item.awarder}</span>
</div>
{item.date && (

2
src/templates/blocks/Certifications/CertificationsA.js
View File

@ -7,7 +7,7 @@ const CertificationItem = ({ item, language }) => (
<div>
<div className="flex justify-between items-center">
<div className="flex flex-col text-left mr-2">
<h6 className="font-semibold">{item.title}</h6>
<h6 className="font-semibold text-sm">{item.title}</h6>
<span className="text-xs">{item.issuer}</span>
</div>
{item.date && (

2
src/templates/blocks/Education/EducationA.js
View File

@ -10,7 +10,7 @@ const EducationItem = ({ item, language }) => {
<div>
<div className="flex justify-between items-center">
<div className="flex flex-col text-left mr-2">
<h6 className="font-semibold">{item.institution}</h6>
<h6 className="font-semibold text-sm">{item.institution}</h6>
<span className="text-xs">
<strong>{item.degree}</strong> {item.field}
</span>

2
src/templates/blocks/Hobbies/HobbiesA.js
View File

@ -4,7 +4,7 @@ import { safetyCheck } from '../../../utils';
const HobbyA = (x) => (
<div key={x.id}>
<h6 className="font-semibold">{x.name}</h6>
<h6 className="font-semibold text-sm">{x.name}</h6>
</div>
);

2
src/templates/blocks/Languages/LanguagesA.js
View File

@ -4,7 +4,7 @@ import { safetyCheck } from '../../../utils';
const LanguageItem = (x) => (
<div key={x.id} className="flex flex-col">
<h6 className="font-semibold">{x.name}</h6>
<h6 className="font-semibold text-sm">{x.name}</h6>
<span className="text-xs">{x.fluency}</span>
</div>
);

2
src/templates/blocks/Languages/LanguagesB.js
View File

@ -4,7 +4,7 @@ import { safetyCheck } from '../../../utils';
const LanguageItem = (x) => (
<div key={x.id} className="flex flex-col">
<h6 className="font-semibold">{x.name}</h6>
<h6 className="font-semibold text-sm">{x.name}</h6>
<span className="text-xs">{x.fluency}</span>
</div>
);

2
src/templates/blocks/Projects/ProjectsA.js
View File

@ -10,7 +10,7 @@ const ProjectItem = ({ item, language }) => {
<div>
<div className="flex justify-between items-center">
<div className="flex flex-col text-left mr-2">
<h6 className="font-semibold">{item.title}</h6>
<h6 className="font-semibold text-sm">{item.title}</h6>
{item.link && (
<a href={item.link} className="text-xs">
{item.link}

2
src/templates/blocks/References/ReferencesA.js
View File

@ -5,7 +5,7 @@ import { safetyCheck } from '../../../utils';
const ReferenceItem = (x) => (
<div key={x.id} className="flex flex-col">
<h6 className="font-semibold">{x.name}</h6>
<h6 className="font-semibold text-sm">{x.name}</h6>
<span className="text-xs">{x.position}</span>
<span className="text-xs">{x.phone}</span>
<span className="text-xs">{x.email}</span>

2
src/templates/blocks/References/ReferencesB.js
View File

@ -5,7 +5,7 @@ import { safetyCheck } from '../../../utils';
const ReferenceItem = (x) => (
<div key={x.id} className="flex flex-col">
<h6 className="font-semibold">{x.name}</h6>
<h6 className="font-semibold text-sm">{x.name}</h6>
<span className="text-xs">{x.position}</span>
<span className="text-xs">{x.phone}</span>
<span className="text-xs">{x.email}</span>

2
src/templates/blocks/Skills/SkillsA.js
View File

@ -4,7 +4,7 @@ import { safetyCheck } from '../../../utils';
const SkillItem = (x) => (
<div key={x.id} className="flex flex-col">
<h6 className="font-semibold">{x.name}</h6>
<h6 className="font-semibold text-sm">{x.name}</h6>
<span className="text-xs">{x.level}</span>
</div>
);

2
src/templates/blocks/Work/WorkA.js
View File

@ -10,7 +10,7 @@ const WorkItem = ({ item, language }) => {
<div>
<div className="flex justify-between items-center">
<div className="flex flex-col text-left mr-2">
<h6 className="font-semibold">{item.company}</h6>
<h6 className="font-semibold text-sm">{item.company}</h6>
<span className="text-xs">{item.position}</span>
</div>
{item.startDate && (