Expose headline and caption font size for card-mod (#252)

README.md

@@ -157,10 +157,13 @@ Below are the available CSS variables that you can modify:
 
 - `--text-color`: The text color of inactive card.
 - `--text-color-active`: The text color for card with active warnings.
+- `--inactive-background-color`: This background color when there are no warnings active.
 - `--red-level-color`: The background color for red level alerts.
 - `--orange-level-background-color`: The background color for orange level alerts.
-- `--yellow-level-background-color`: The background color for yellow-level alerts.
-- `--inactive-background-color`: This variable defines the background color when there are no warnings active.
+- `--yellow-level-background-color`: The background color for yellow level alerts.
+- `--headline-font-size`: Font size of headline (alert name). **Note**: in order for this to
+  work properly you need to set [scaling-mode](https://github.com/MrBartusek/MeteoalarmCard/blob/master/dosc/scaling-mode.md) to `disabled`
+- `--caption-font-size`: Font size for caption element. 
 
 ## Contributing
 

src/styles.ts

@@ -8,11 +8,13 @@ export default css`
 
 		--text-color: inherit;
 		--text-color-active: white;
+		--headline-font-size: 22px;
+		--caption-font-size: 13px;
 
+		--inactive-background-color: inherit;
 		--red-level-color: var(---error-color, #db4437);
 		--orange-level-background-color: #ee5a24;
 		--yellow-level-background-color: var(--warning-color, #ffa600);
-		--inactive-background-color: inherit;
 	}
 
 	ha-card {
@@ -57,7 +59,7 @@ export default css`
 
 	.headline {
 		flex: 1;
-		font-size: 22px;
+		font-size: var(--headline-font-size);
 		line-height: normal;
 		margin: auto;
 		margin-left: 18px;
@@ -74,7 +76,7 @@ export default css`
 		display: flex;
 		align-items: center;
 		margin: 10px 12px;
-		font-size: 13px;
+		font-size: var(--caption-font-size);
 		line-height: normal;
 	}