Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-17 18:21:28 +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

28
src/styles/tailwind.css
View File

@ -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);
}