Last active
January 17, 2020 21:08
-
-
Save vviikk/7c92315bd5700cc5a85917e53d153504 to your computer and use it in GitHub Desktop.
Better Fluid type with custom properties
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
/* CONSTANTS */ | |
--FONT-SIZE-MIN: 16; | |
--FONT-SIZE-MAX: 26; | |
/* Notice, no calcs used yet */ | |
--FONT-SIZE-MIN-PX: (var(--FONT-SIZE-MIN) * 1px); | |
--FONT-SIZE-MAX-PX: (var(--FONT-SIZE-MAX) * 1px); | |
--BROWSER-WIDTH-MIN: 300; | |
--BROWSER-WIDTH-MAX: 1600; | |
--BROWSER-WIDTH-MIN-PX: (var(--BROWSER-WIDTH-MIN) * 1px); | |
--BROWSER-WIDTH-MAX-PX: (var(--BROWSER-WIDTH-MAX) * 1px); | |
--FONT-SIZE-DIFFERENCE: (var(--FONT-SIZE-MAX) - var(--FONT-SIZE-MIN)); | |
--FONT-SIZE-LOCK: ((100vw - var(--BROWSER-WIDTH-MIN-PX)) / (var(--BROWSER-WIDTH-MAX) - var(--BROWSER-WIDTH-MIN))); | |
} | |
html { | |
font-size: var(--font-size); | |
} | |
@media screen | |
and (min-width: 300px) /* Limitation of custom properties */ | |
and (max-width: 1600px) { /* - cant use in media queries. */ | |
html { | |
--font-size: calc( /* Only one calc() used */ | |
var(--FONT-SIZE-MIN-PX) + var(--FONT-SIZE-DIFFERENCE) | |
* var(--FONT-SIZE-LOCK) | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment