🚀 Big News:Socket Has Acquired Secure Annex.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

rfs

Package Overview
Dependencies
Maintainers
1
Versions
47
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rfs - npm Package Compare versions

Comparing version
4.3.0
 to
4.4.0
+101
-98
.idea/workspace.xml

@@ -6,3 +6,2 @@ <?xml version="1.0" encoding="UTF-8"?>

<change type="MODIFICATION" beforePath="$PROJECT_DIR$/README.md" afterPath="$PROJECT_DIR$/README.md" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/scss/_rfs.scss" afterPath="$PROJECT_DIR$/scss/_rfs.scss" />
</list>

@@ -31,14 +30,14 @@ <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />

<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
<state split_layout="SPLIT">
<first_editor relative-caret-position="435">
<caret line="106" column="228" lean-forward="false" selection-start-line="106" selection-start-column="228" selection-end-line="106" selection-end-column="228" />
<state split_layout="FIRST">
<first_editor relative-caret-position="420">
<caret line="97" column="18" lean-forward="false" selection-start-line="97" selection-start-column="18" selection-end-line="97" selection-end-column="18" />
<folding>
<marker date="1510261407000" expanded="true" signature="1024:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1046:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1093:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1114:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1144:1199" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1155:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1194:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1198:1199" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1275:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1297:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1344:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1365:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1395:1450" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1406:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1445:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1449:1450" ph="{...}" />
</folding>

@@ -64,4 +63,4 @@ </first_editor>

<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="345">
<caret line="23" column="3" lean-forward="true" selection-start-line="23" selection-start-column="3" selection-end-line="24" selection-end-column="70" />
<state relative-caret-position="349">
<caret line="134" column="0" lean-forward="true" selection-start-line="134" selection-start-column="0" selection-end-line="134" selection-end-column="0" />
<folding />

@@ -90,2 +89,4 @@ </state>

<find>$mq-width</find>
<find>mobile</find>
<find>mobi</find>
</findStrings>

@@ -121,6 +122,6 @@ <replaceStrings>

<component name="PhpWorkspaceProjectConfiguration" backward_compatibility_performed="true" />
<component name="ProjectFrameBounds" extendedState="6">
<component name="ProjectFrameBounds">
<option name="y" value="23" />
<option name="width" value="1440" />
<option name="height" value="807" />
<option name="height" value="803" />
</component>

@@ -145,2 +146,4 @@ <component name="ProjectLevelVcsManager">

<panes>
<pane id="Scope" />
<pane id="Scratches" />
<pane id="ProjectPane">

@@ -162,4 +165,2 @@ <subPane>

</pane>
<pane id="Scratches" />
<pane id="Scope" />
</panes>

@@ -293,3 +294,5 @@ </component>

<workItem from="1510196558694" duration="420000" />
<workItem from="1510251066059" duration="4211000" />
<workItem from="1510251066059" duration="5763000" />
<workItem from="1510301401512" duration="18000" />
<workItem from="1510689066391" duration="2548000" />
</task>

@@ -299,6 +302,6 @@ <servers />

<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="60748000" />
<option name="totallyTimeSpent" value="64866000" />
</component>
<component name="ToolWindowManager">
<frame x="0" y="23" width="1440" height="803" extended-state="6" />
<frame x="0" y="23" width="1440" height="803" extended-state="0" />
<editor active="true" />

@@ -359,10 +362,10 @@ <layout>

<folding>
<marker date="1510261407000" expanded="true" signature="1024:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1046:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1093:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1114:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1144:1199" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1155:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1194:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1198:1199" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1275:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1297:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1344:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1365:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1395:1450" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1406:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1445:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1449:1450" ph="{...}" />
</folding>

@@ -428,10 +431,10 @@ </first_editor>

<folding>
<marker date="1510261407000" expanded="true" signature="1024:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1046:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1093:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1114:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1144:1199" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1155:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1194:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1198:1199" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1275:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1297:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1344:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1365:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1395:1450" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1406:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1445:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1449:1450" ph="{...}" />
</folding>

@@ -481,10 +484,10 @@ </first_editor>

<folding>
<marker date="1510261407000" expanded="true" signature="1024:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1046:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1093:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1114:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1144:1199" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1155:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1194:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1198:1199" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1275:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1297:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1344:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1365:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1395:1450" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1406:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1445:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1449:1450" ph="{...}" />
</folding>

@@ -510,10 +513,10 @@ </first_editor>

<folding>
<marker date="1510261407000" expanded="true" signature="1024:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1046:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1093:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1114:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1144:1199" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1155:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1194:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1198:1199" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1275:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1297:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1344:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1365:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1395:1450" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1406:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1445:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1449:1450" ph="{...}" />
</folding>

@@ -579,10 +582,10 @@ </first_editor>

<folding>
<marker date="1510261407000" expanded="true" signature="1024:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1046:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1093:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1114:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1144:1199" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1155:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1194:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1198:1199" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1275:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1297:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1344:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1365:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1395:1450" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1406:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1445:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1449:1450" ph="{...}" />
</folding>

@@ -608,10 +611,10 @@ </first_editor>

<folding>
<marker date="1510261407000" expanded="true" signature="1024:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1046:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1093:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1114:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1144:1199" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1155:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1194:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1198:1199" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1275:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1297:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1344:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1365:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1395:1450" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1406:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1445:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1449:1450" ph="{...}" />
</folding>

@@ -653,10 +656,10 @@ </first_editor>

<folding>
<marker date="1510261407000" expanded="true" signature="1024:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1046:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1093:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1114:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1144:1199" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1155:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1194:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1198:1199" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1275:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1297:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1344:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1365:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1395:1450" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1406:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1445:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1449:1450" ph="{...}" />
</folding>

@@ -698,10 +701,10 @@ </first_editor>

<folding>
<marker date="1510261407000" expanded="true" signature="1024:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1046:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1093:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1114:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1144:1199" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1155:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1194:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1198:1199" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1275:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1297:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1344:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1365:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1395:1450" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1406:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1445:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1449:1450" ph="{...}" />
</folding>

@@ -814,4 +817,4 @@ </first_editor>

<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="345">
<caret line="23" column="3" lean-forward="true" selection-start-line="23" selection-start-column="3" selection-end-line="24" selection-end-column="70" />
<state relative-caret-position="349">
<caret line="134" column="0" lean-forward="true" selection-start-line="134" selection-start-column="0" selection-end-line="134" selection-end-column="0" />
<folding />

@@ -823,14 +826,14 @@ </state>

<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
<state split_layout="SPLIT">
<first_editor relative-caret-position="435">
<caret line="106" column="228" lean-forward="false" selection-start-line="106" selection-start-column="228" selection-end-line="106" selection-end-column="228" />
<state split_layout="FIRST">
<first_editor relative-caret-position="420">
<caret line="97" column="18" lean-forward="false" selection-start-line="97" selection-start-column="18" selection-end-line="97" selection-end-column="18" />
<folding>
<marker date="1510261407000" expanded="true" signature="1024:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1046:1047" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1093:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1114:1115" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1144:1199" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1155:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1194:1197" ph="{...}" />
<marker date="1510261407000" expanded="true" signature="1198:1199" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1275:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1297:1298" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1344:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1365:1366" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1395:1450" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1406:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1445:1448" ph="{...}" />
<marker date="1510691598000" expanded="true" signature="1449:1450" ph="{...}" />
</folding>

@@ -837,0 +840,0 @@ </first_editor>

+1
-1
package.json
{
"name": "rfs",
"version": "4.3.0",
"version": "4.4.0",
"description": "A scss-mixin for responsive font-sizes.",

@@ -5,0 +5,0 @@ "main": "scss/rfs.scss",

+18
-26
README.md
# RFS [![npm][npm-image]][npm-url]
[npm-image]: https://img.shields.io/npm/v/rfs.svg
[npm-url]: https://npmjs.org/package/rfs
RFS stands for Responsive Font-Size, easy to remember, easy to use. This approach **automatically calculates the correct font-size** for every screen width. You just have got to define your font-size for big screens and the font-size will automatically decrease for smaller screens. RFS is a **SCSS-mixin** which generates the responsive css for you.
RFS stands for Responsive Font-Size and is an easy to use **SCSS-mixin** which **automatically calculates the appropriate font-size** based on the dimensions of the monitor or device.
## Advantages
- Font sizes will **rescale for every screen width**, this prevents long words from being chopped off the screen on mobile devices
- The minimum font size will prevent the font-size from becoming too small so readability can be assured
- **Super easy** to use, no need to define complex configurations for each font-size
- Font sizes of all text elements will always remain in relation with each other
![RFS](http://i.imgur.com/gJH6m6g.gif)

@@ -56,8 +63,5 @@

```
In this case a value without unit was passed to RFS (`62`), which is interpreted as `62px`. It's also possible to pass
font-sizes in rem-units.
## Advantages
- Font sizes will **rescale for every screen width**, this prevents long words from being chopped off the screen
- **Super easy** to use, no need to define complex configurations for each font-size
- Font sizes of all text elements will always remain in relation with each other
- Rem-based font sizes will allow the user to change his default font size in his browser. People with limited vision can therefore increase their font size to increase readability.

@@ -68,3 +72,3 @@ ## Configuration

There are configuration variables which influence the calculation of the font size. If no unit is used, `px`-units will be assumed as unit. In the graph above, `$rfs-minimum-font-size` is set to `14`, `$rfs-breakpoint` is set to `1200`, and `$rfs-factor` is set to `5`, this is the default configuration.
There are configuration variables which influence the calculation of the font size. In the graph above, `$rfs-minimum-font-size` is set to `14px`, `$rfs-breakpoint` is set to `1200px`, and `$rfs-factor` is set to `5`, this is the default configuration.

@@ -81,3 +85,3 @@ **$rfs-minimum-font-size:** (in `px` or `rem`)

**$rfs-breakpoint:** (in `px`, `em` or `rem`)
This is the point where dynamic rescaling begins. Above this breakpoint, the font size will be equal to the font size you passed to the mixin.
Above this breakpoint, the font size will be equal to the font size you passed to the mixin; below the breakpoint, the font will dynamically scale.
*Default value: `1200px`*

@@ -90,25 +94,13 @@

**$rfs-factor:** (number)
This is the more complex part. If the font sizes would all resize to the same value when the screen width would be 0, there wouldn’t be a lot of difference between the font sizes on small screens. To prevent this, we brought the `$rfs-factor` to life.
Let’s take an example from the graph above: The font size `rfs(49)` at a screen of `0px` is `21px` and not `16px` because of this factor. This minimum font size is calculated like this:
Calculate the difference between the font-size (47) and `$rfs-minimum-font-size` (14)
`49 - 14 = 35`
Divide this number by the `$rfs-factor` (5)
`35 / 5 = 7`
Add this number to $rfs-minimum-font-size (14)
`7 + 14 = 21`
The higher `$rfs-factor`, the less difference there is between font sizes on small screens. The lower `$rfs-factor`, the less influence RFS has, which results in bigger font sizes for small screens. If `$rfs-factor` is set to 1, there wouldn’t be any difference at all. 1 is the lowest possible value.
This value determines the strength of font size resizing. The higher `$rfs-factor`, the less difference there is between font sizes on small screens. The lower `$rfs-factor`, the less influence RFS has, which results in bigger font sizes for small screens. If `$rfs-factor` is set to 1, there wouldn’t be any difference at all. 1 is the lowest possible value.
*Default value: `5`*
**$rfs-mobile-first** (Boolean)
Use mobile first rendering, enabling this can cause legacy browsers which doesn't support vw-units to incorrectly render the font-size.
*Default value: `false`*
**$rfs-two-dimensional** (Boolean)
Enabling the two dimensional media queries will determine the font size based on the smallest side of the screen with `vmin`. This prevents the font-size from changing if the device toggles between portrait and landscape mode.
Enabling the two dimensional media queries will determine the font size based on the smallest side of the screen with `vmin`. This prevents the font size from changing if the device toggles between portrait and landscape mode.
*Default value: `false`*
## Do's and don'ts
- Remember to set rfs on your font-size of your `html` or `body`, otherwise some text may not dynamically rescale
- Always set your line-heights relative (in `em` or unitless)
- More tips and tricks with examples can be found [on this article](https://medium.com/@martijn.cuppens/magic-font-resizing-with-rfs-b5d781296dd6)

@@ -115,0 +107,0 @@ ## Demos

+6
-24
scss/_rfs.scss

@@ -24,6 +24,2 @@ // RFS mixin.

// Use mobile first rendering, enabling this can cause legacy browsers
// which doesn't support vw-units to incorrectly render the font-size.
$rfs-mobile-first: false !default;
// Resize font-size based on screen height and width.

@@ -139,25 +135,11 @@ $rfs-two-dimensional: false !default;

@if $rfs-mobile-first {
font-size: $rfs-fluid;
font-size: $rfs-static;
@if $rfs-two-dimensional {
@media (min-width: #{$mq-value}) and (min-height: #{$mq-value}) {
font-size: $rfs-static;
}
} @else {
@media (min-width: #{$mq-value}) {
font-size: $rfs-static;
}
@if $rfs-two-dimensional {
@media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
font-size: $rfs-fluid;
}
} @else {
font-size: $rfs-static;
@if $rfs-two-dimensional {
@media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
font-size: $rfs-fluid;
}
} @else {
@media (max-width: #{$mq-value}) {
font-size: $rfs-fluid;
}
@media (max-width: #{$mq-value}) {
font-size: $rfs-fluid;
}

@@ -164,0 +146,0 @@ }