svn commit: r1928525 - in apr/site/trunk: docs xdocs/stylesheets

Author: brane
Date: Wed Sep 17 05:43:53 2025
New Revision: 1928525

Log:
Updated the site styles to use the recommended fonts.

* docs/style.css:
   - Introduced variables for most colors.
   - Use Open Sans Regular as the default text font, Montserrat for headings.
* xdocs/stylesheets/site.vsl:
   - Use heading styles without forced bold/strong, also in the navigation.

Modified:
   apr/site/trunk/docs/style.css
   apr/site/trunk/xdocs/stylesheets/site.vsl

Modified: apr/site/trunk/docs/style.css
==============================================================================
--- apr/site/trunk/docs/style.css	Wed Sep 17 05:35:21 2025	(r1928524)
+++ apr/site/trunk/docs/style.css	Wed Sep 17 05:43:53 2025	(r1928525)
@@ -1,5 +1,35 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
+:root {
+  /* Colors */
+  --apr-bg: #ffffff;
+  --apr-fg: #000000;
+  --apr-fg-a: #525D76;
+  --apr-bg-h1: #525D76;
+  --apr-fg-h1: #ffffff;
+  --apr-bg-h2: #828DA6;
+  --apr-fg-h2: #ffffff;
+
+
+  /* Global */
+  background: var(--apr-bg);
+  color: var(--apr-fg);
+
+  font-family: "Open Sans", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-size: medium;
+  font-variation-settings: "wdth" 100;
+}
+
+b, strong {
+  font-weight: 600;
+}
+
 a {
-  color: #525D76;
+  color: var(--apr-fg-a);
 }
 p.note {
   border-style: double;
@@ -45,21 +75,29 @@ td {
   font-size: small;
 }
 h1 {
-  background: #525D76;
-  color: #ffffff;
-  font-family: sans-serif;
-  font-size: medium;
-  font-weight: 500;
-  padding: 2px;
+  background: var(--apr-bg-h1);
+  color: var(--apr-fg-h1);
+  font-weight: 600;
 }
 h2 {
-  background: #828DA6;
-  color: #ffffff;
-  font-family: sans-serif;
+  background: var(--apr-bg-h2);
+  color: var(--apr-fg-h2);
+  font-weight: 300;
+}
+h1, h2 {
+  font-family: "Montserrat", sans-serif;
+  font-optical-sizing: auto;
   font-size: medium;
-  font-weight: 500;
-  padding: 2px;
+  padding: 0.25em;
+  padding-left: 0.5em;
+}
+#site-nav-menu > h1,
+#site-nav-menu > h2 {
+  background: var(--apr-bg);
+  color: var(--apr-fg);
+  padding: 0;
 }
+
 @media screen {
   #site-nav label, #hamburger {
     display: none;
@@ -78,3 +116,12 @@ h2 {
   #site-nav input:checked + #site-nav-menu { display: block; }
   #site-content { margin-left: 0px; }
 }
+
+
+/**
+ ** (Emacs)
+ ** Local Variables:
+ ** mode: css
+ ** css-indent-offset: 2
+ ** End:
+ **/

Modified: apr/site/trunk/xdocs/stylesheets/site.vsl
==============================================================================
--- apr/site/trunk/xdocs/stylesheets/site.vsl	Wed Sep 17 05:35:21 2025	(r1928524)
+++ apr/site/trunk/xdocs/stylesheets/site.vsl	Wed Sep 17 05:43:53 2025	(r1928525)
@@ -32,10 +32,10 @@
 #end
 #if ($level == 1)
 <div class="h1" id="$id">
-  <h1><strong>$heading</strong></h1>
+  <h1>$heading</h1>
 #elseif ($level == 2)
 <div class="h2" id="$id">
-  <h2><strong>$heading</strong></h2>
+  <h2>$heading</h2>
 #end
   <blockquote>
 ## Output the section-level children with transformers
@@ -66,10 +66,10 @@ $items
 #foreach ( $menu in $menus )
 #set ($title = $menu.getChild("title"))
 #if ($title.getAttributeValue("href"))
-      <p><b><a 
-href="$title.getAttributeValue("href")">$menu.getChildText("title")</a></b></p>
+      <h1><a 
+href="$title.getAttributeValue("href")">$menu.getChildText("title")</a></h1>
 #else
-      <p><b>$menu.getChildText("title")</b></p>
+      <h1>$menu.getChildText("title")</h1>
 #end
 #if ($menu.getChild("li"))
     <ul>