eSales Media Git repositories
Browse code

Use global variables for display text

Benjamin Roth authored on11/07/2025 16:08:36
Showing3 changed files
public/css/display-text.css
History View file @80adaa3
... ... 
@@ -1,9 +1,15 @@
1 
+:root {
2 
+  --vr-dt-inner-padding: 0;
3 
+  --vr-dt-font-size-small: clamp(1.25rem, 7vw, 2.5rem);
4 
+  --vr-dt-font-size-medium: clamp(1.333rem, 7vw, 2.75rem);
5 
+  --vr-dt-font-size-large: clamp(1.5rem, 7vw, 3rem);
6 
+}
7 
+
1 8 
 .content-display-text {
2 
-  --inner-padding: 0;
3 9 
   display: flex;
4 10 
   align-items: center;
5 11 
   justify-content: center;
6 
-  padding: var(--inner-padding);
12 
+  padding: var(--vr-dt-inner-padding);
7 13 
   position: relative;
8 14 
   font-size: clamp(1.25rem, 7vw, 2.5rem);
9 15 
   font-weight: 800;
... ... 
@@ -14,11 +20,11 @@
14 20 
   position: relative;
15 21 
 }
16 22 
 .content-display-text .text-small {
17 
-  font-size: clamp(1.25rem, 7vw, 2.5rem);
23 
+  font-size: var(--vr-dt-font-size-small);
18 24 
 }
19 25 
 .content-display-text .text-medium {
20 
-  font-size: clamp(1.333rem, 7vw, 2.75rem);
26 
+  font-size: var(--vr-dt-font-size-medium);
21 27 
 }
22 28 
 .content-display-text .text-large {
23 
-  font-size: clamp(1.5rem, 7vw, 3rem);
29 
+  font-size: var(--vr-dt-font-size-large);
24 30 
 }
public/css/display-text.min.css
History View file @80adaa3
... ... 
@@ -1 +1 @@
1 
-.content-display-text{--inner-padding:0;display:flex;align-items:center;justify-content:center;padding:var(--inner-padding);position:relative;font-weight:800;text-transform:uppercase;box-sizing:border-box}.content-display-text>.rte{position:relative}.content-display-text,.content-display-text .text-small{font-size:clamp(1.25rem,7vw,2.5rem)}.content-display-text .text-medium{font-size:clamp(1.333rem,7vw,2.75rem)}.content-display-text .text-large{font-size:clamp(1.5rem,7vw,3rem)}
2 1 
\ No newline at end of file
2 
+:root{--vr-dt-inner-padding:0;--vr-dt-font-size-small:clamp(1.25rem, 7vw, 2.5rem);--vr-dt-font-size-medium:clamp(1.333rem, 7vw, 2.75rem);--vr-dt-font-size-large:clamp(1.5rem, 7vw, 3rem)}.content-display-text{display:flex;align-items:center;justify-content:center;padding:var(--vr-dt-inner-padding);position:relative;font-size:clamp(1.25rem,7vw,2.5rem);font-weight:800;text-transform:uppercase;box-sizing:border-box}.content-display-text>.rte{position:relative}.content-display-text .text-small{font-size:var(--vr-dt-font-size-small)}.content-display-text .text-medium{font-size:var(--vr-dt-font-size-medium)}.content-display-text .text-large{font-size:var(--vr-dt-font-size-large)}
3 3 
\ No newline at end of file
public/css/display-text.scss
History View file @80adaa3
... ... 
@@ -1,10 +1,14 @@
1 
+:root {
2 
+  --vr-dt-inner-padding: 0;
3 
+  --vr-dt-font-size-small: clamp(1.25rem, 7vw, 2.5rem);
4 
+  --vr-dt-font-size-medium: clamp(1.333rem, 7vw, 2.75rem);
5 
+  --vr-dt-font-size-large: clamp(1.5rem, 7vw, 3rem);
6 
+}
1 7 
 .content-display-text {
2 
-  --inner-padding: 0;
3 
-
4 8 
   display: flex;
5 9 
   align-items: center;
6 10 
   justify-content: center;
7 
-  padding: var(--inner-padding);
11 
+  padding: var(--vr-dt-inner-padding);
8 12 
   position: relative;
9 13 
   font-size: clamp(1.25rem, 7vw, 2.5rem);
10 14 
   font-weight: 800;
... ... 
@@ -16,14 +20,14 @@
16 20 
   }
17 21
18 22 
   .text-small {
19 
-    font-size: clamp(1.25rem, 7vw, 2.5rem);
23 
+    font-size: var(--vr-dt-font-size-small);
20 24 
   }
21 25
22 26 
   .text-medium {
23 
-    font-size: clamp(1.333rem, 7vw, 2.75rem);
27 
+    font-size: var(--vr-dt-font-size-medium);
24 28 
   }
25 29
26 30 
   .text-large {
27 
-    font-size: clamp(1.5rem, 7vw, 3rem);
31 
+    font-size: var(--vr-dt-font-size-large);
28 32 
   }
29 33 
 }