Merge pull request #2179 from Inist-CNRS/2164-customisation-du-thème-…

…voscouleurs-taille-des-polices-pour-headertitle-title-et-titlegraph allow to set font size
Inist-CNRS · Oct 4, 2024 · e0daf0b · e0daf0b
2 parents b363268 + 6f6a3c0
commit e0daf0b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/src/app/custom/themes/voscouleurs/css/styles.css b/src/app/custom/themes/voscouleurs/css/styles.css
@@ -14,7 +14,7 @@
 /*"color": {
 --bgBody: <%= custom.color.bgBody %>;
 --bgHeader: <%= custom.color.bgHeader %>;
---headerTitle: <%= custom.color.headerTitle %>;
+--titleHeader: <%= custom.color.titleHeader %>;
 --bgContent: <%= custom.color.bgContent %>;
 --bgFacet: <%= custom.color.bgFacet %>;
 --titles: <%= custom.color.titles %>;
@@ -46,7 +46,7 @@ body {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     color: var(--text) !important;
 }
-/*bgHeader + --headerTitle*/
+/*bgHeader + --titleHeader*/
 header {
     background: var(--bgHeader);
 }
@@ -60,8 +60,9 @@ header #banner.container {
 }
 #banner h1,
 #banner p {
-    color: var(--headerTitle) !important;
-    font-family: var(--font-headerTitle) !important;    
+    color: var(--titleHeader) !important;
+    font-family: var(--font-titleHeader) !important;
+    font-size: var(--fontSize-titleHeader) !important;
 }
 header a.logo,
 header a.logo img {
@@ -114,12 +115,14 @@ h5 {
 h1,
 h2 {
     color: var(--titles) !important;
+    font-size: var(--fontSize-title) !important;
 }
 /*titleGraph*/
 .property.format_fieldClone .property_label,
 .graph-results .MuiCardHeader-content {
     color: var(--titleGraph) !important;
     font-family: var(--font-titleGraph) !important;
+    font-size: var(--fontSize-titleGraph) !important;
 }
 /*link in text*/
 a {

diff --git a/src/app/custom/themes/voscouleurs/index.ejs b/src/app/custom/themes/voscouleurs/index.ejs
@@ -22,21 +22,24 @@
     <style>
     /* import palette */
         <%=theme.cssVariable %>
-    /* import config theme color */    
-        <% if (custom.font) {%> 
+    /* import config theme color */
+        <% if (custom.font) {%>
         :root {
         --font-title: <%= custom.font.title %>;
-        --font-headerTitle: <%= custom.font.headerTitle %>;
+        --fontSize-title: <%= custom.font.titleSize %>;
+        --font-titleHeader: <%= custom.font.titleHeader %>;
+        --fontSize-titleHeader: <%= custom.font.titleHeaderSize %>;
         --font-titleGraph: <%= custom.font.titleGraph %>;
+        --fontSize-titleGraph: <%= custom.font.titleGraphSize %>;
         }
         <% } %>
-    /* import config theme color */    
-        <% if (custom.color) {%> 
+    /* import config theme color */
+        <% if (custom.color) {%>
         :root {
         --bgBody: <%= custom.color.bgBody %>;
         --bgContrast: <%= custom.color.bgContrast %>;
         --bgHeader: <%= custom.color.bgHeader %>;
-        --headerTitle: <%= custom.color.headerTitle %>;
+        --titleHeader: <%= custom.color.titleHeader %>;
         --bgContent: <%= custom.color.bgContent %>;
         --bgFacet: <%= custom.color.bgFacet %>;
         --titles: <%= custom.color.titles %>;
@@ -48,7 +51,7 @@
         --buttonHover: <%= custom.color.buttonHover %>;
         --textContrast: <%= custom.color.textContrast %>;
         }
-        <% } %>        
+        <% } %>
     </style>
 </head>
 

diff --git a/src/app/custom/themes/voscouleurs/lodex-theme.json b/src/app/custom/themes/voscouleurs/lodex-theme.json
@@ -28,8 +28,11 @@
                 "information": "utiliser strictement https://fonts.google.com/",
                 "family": "nom d'une famille de googlefont construit le lien dans head ",
                 "title": "nom de cette font pour les titres déclaration css",
+                "titleSize": "taille maximale de cette font pour les titres déclaration css",
                 "titleGraph": "nom de cette font pour les titres des graphiques",
-                "headerTitle": "nom de cette font pour les titres de la banière"
+                "titleGraphSize": "taille de cette font pour les titres des graphiques",
+                "titleHeader": "nom de cette font pour les titres de la banière",
+                "titleHeaderSize": "taille de cette font pour les titres de la banière"
             },
             "color": {
                 "info-theme": "EN DEVELOPPEMENT : les trois couleurs suivantes permettent de mémoriser les codes hexadecimaux de 2 couleurs qui font l'identité de votre organisme",
@@ -40,7 +43,7 @@
                 "bgBody": "black",
                 "bgContrast": "white",
                 "bgHeader": "",
-                "headerTitle": "",
+                "titleHeader": "",
                 "bgContent": "",
                 "bgFacet": "",
                 "titles": "",