XWIKI-21333: Update the weight and font size of headings (#2360)

xwiki · Oct 3, 2023 · a0202ec · a0202ec
1 parent b8f090b
commit a0202ec
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 18 deletions.
diff --git a/...-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less b/...-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/layout.less
@@ -264,6 +264,10 @@
   #document-title h1 {
     word-wrap: break-word;
   }
+  #document-title-input {
+    // Override the fixed height as the content is a large heading that would otherwise overflow.
+    height: auto;
+  }
   .document-menu, .document-info {
     margin-top: @line-height-computed;
   }

diff --git a/...go-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/type.less b/...go-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/type.less
@@ -15,29 +15,62 @@
 
 // Headings ===============================================================
 
-// Headings are using Modular Scale (i.e. there is an harmonious
-// relationship between values in the scale).
-// We are using http://www.modularscale.com/?1&em&1.125&web&table
-//
-// In addition, we ensure headings are always taller than regular text,
-// which seems more logical even if it does not follow the W3C
-// recommendations.
-//
-@font-size-h1: ceil((@font-size-base * 2.027));
-@font-size-h2: ceil((@font-size-base * 1.802));
-@font-size-h3: ceil((@font-size-base * 1.602));
-@font-size-h4: ceil((@font-size-base * 1.424));
-@font-size-h5: ceil((@font-size-base * 1.266));
-@font-size-h6: ceil((@font-size-base * 1.125));
-
-@font-size-document-title: ceil((@font-size-base * 2.42)); // ~34px
+
+// Since 15.9RC1: Defines the ratio between two headings levels (e.g., h1 is @font-size-headings-scale times larger than
+// h2)?
+@font-size-headings-scale: 1.250;
+@font-size-headings-scale-min: 1.125;
+@min-screen-size: 768;
+@max-screen-size: 1200;
+
+// Headings size is following a scale where each level is X times larger than the lower level.
+// Heading 5 is the same size as the base font size
+
+// H1
+@min-h1-font-size: unit(ceil((@font-size-base * pow(@font-size-headings-scale-min, 4))));
+@max-h1-font-size: unit(ceil((@font-size-base * pow(@font-size-headings-scale, 4))));
+@font-size-h1: ~"max(@{min-h1-font-size}px, min(@{max-h1-font-size}px, calc(@{min-h1-font-size}px + (@{max-h1-font-size} - @{min-h1-font-size}) * (100vw - @{min-screen-size}px) / (@{max-screen-size} - @{min-screen-size}))))";
+
+// H2
+@min-h2-font-size: unit(ceil((@font-size-base * pow(@font-size-headings-scale-min, 3))));
+@max-h2-font-size: unit(ceil((@font-size-base * pow(@font-size-headings-scale, 3))));
+@font-size-h2: ~"max(@{min-h2-font-size}px, min(@{max-h2-font-size}px, calc(@{min-h2-font-size}px + (@{max-h2-font-size} - @{min-h2-font-size}) * (100vw - @{min-screen-size}px) / (@{max-screen-size} - @{min-screen-size}))))";
+
+// H3
+@min-h3-font-size: unit(ceil((@font-size-base * pow(@font-size-headings-scale-min, 2))));
+@max-h3-font-size: unit(ceil((@font-size-base * pow(@font-size-headings-scale, 2))));
+@font-size-h3: ~"max(@{min-h3-font-size}px, min(@{max-h3-font-size}px, calc(@{min-h3-font-size}px + (@{max-h3-font-size} - @{min-h3-font-size}) * (100vw - @{min-screen-size}px) / (@{max-screen-size} - @{min-screen-size}))))";
+
+// H4
+@min-h4-font-size: unit(ceil((@font-size-base * pow(@font-size-headings-scale-min, 1))));
+@max-h4-font-size: unit(ceil((@font-size-base * pow(@font-size-headings-scale, 1))));
+@font-size-h4: ~"max(@{min-h4-font-size}px, min(@{max-h4-font-size}px, calc(@{min-h4-font-size}px + (@{max-h4-font-size} - @{min-h4-font-size}) * (100vw - @{min-screen-size}px) / (@{max-screen-size} - @{min-screen-size}))))";
+
+// H5
+// The computations are not required for h5 as it is always the size of the base font size.
+@font-size-h5: @font-size-base;
+
+// H6
+// Note that the h6 heading is actually getting larger as the screen width decreases.
+@min-h6-font-size: unit(ceil((@font-size-base * pow(@font-size-headings-scale, -1))));
+@max-h6-font-size: unit(ceil((@font-size-base * pow(@font-size-headings-scale-min, -1))));
+@font-size-h6: ~"max(@{min-h6-font-size}px, min(@{max-h6-font-size}px, calc(@{min-h6-font-size}px + (@{max-h6-font-size} - @{min-h6-font-size}) * (100vw - @{min-screen-size}px) / (@{max-screen-size} - @{min-screen-size}))))";
+
+// Document title
+// The document title is a h1 heading one size higher in the size scale 
+// (e.g., 1.250 larger than the content's h1 headings)
+@min-document-title-font-size: unit(ceil((@font-size-base * pow(@font-size-headings-scale-min, 5))));
+@max-document-title-font-size: unit(ceil((@font-size-base * pow(@font-size-headings-scale, 5))));
+@font-size-document-title: ~"max(@{min-document-title-font-size}px, min(@{max-document-title-font-size}px, calc(@{min-document-title-font-size}px + (@{max-document-title-font-size} - @{min-document-title-font-size}) * (100vw - @{min-screen-size}px) / (@{max-screen-size} - @{min-screen-size}))))";
+
 #document-title h1 {
   font-size: @font-size-document-title;
   margin-top: 0;
 }
 
 h1.xwikipaneltitle {
-  font-size: ceil((@font-size-base * 1.42)); // ~18px;
+  // Panels headings are the same size as the content's h4 headings.
+  font-size: @font-size-h4;
 }
 
 // Muted Usage ============================================================

diff --git a/...in/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/variables.less b/...in/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/variables.less
@@ -14,5 +14,5 @@
 // --------------------------------------------------
 
 @border-width:                   1px;
-@headings-font-weight:           400; // See: http://jira.xwiki.org/browse/XWIKI-10838
+@headings-font-weight:           600;
 @nav-tabs-active-link-hover-bg:  @xwiki-page-content-bg;