From: Jonathan S. Katz <jonathan.katz@excoventures.com>
Date: Sun, 7 Feb 2021 22:12:03 +0000 (-0500)
Subject: Fix bolding of text on website
X-Git-Url: http://git.postgresql.org/gitweb/static/gitweb.js?a=commitdiff_plain;h=3a3185d2035cca9614611cce2b7f97e75eaa3013;p=pgweb.git

Fix bolding of text on website

Borrowing from 5112187fa[1] in the pgeu-system codebase,
this returns the ability to bold text within pgweb by ensuring
the Open Sans heavier fonts are loaded.

To accomplish this, this patch includes a few more changes:

- Normalize the heavier weights under 400, 600, 800.
- Ensure any font-weight settings using Open Sans match the
standards listed above.
- An adjutsment on the event archive page to ensure the font
weights are not too bold.

[1] https://git.postgresql.org/gitweb/?p=pgeu-system.git;a=commit;h=5112187fac45e0bcadb34e61c6e3e0ac398a5df3
---

diff --git a/media/css/main.css b/media/css/main.css
index cb74f211..8626fdc2 100644
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -16,6 +16,7 @@
 
 /** CUSTOM FONTS */
 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,800');
 
 /** GLOBAL CONFIGURATION */
 body {
@@ -39,7 +40,7 @@ dl, ol, ul {
 
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Open Sans', sans-serif;
-  font-weight: 700;
+  font-weight: 600;
   color: #336791;
   /*margin: 0 0 0.5em 0;*/
 }
@@ -122,7 +123,7 @@ a:hover, a:active {
 }
 
 b, strong, th {
-  font-weight: 700;
+  font-weight: 600;
   color: #474747 !important;
 }
 
@@ -576,6 +577,10 @@ ul.actions {
   margin-bottom: 0;
 }
 
+.nav-item > a {
+  font-weight: 400;
+}
+
 .logo {
   height: 2rem;
   margin-left: 5px;
@@ -595,6 +600,7 @@ ul.actions {
 
 #pgSideNav a {
   color: #336791;
+  font-weight: normal;
 }
 
 #pgSideNav ul {
@@ -611,7 +617,7 @@ ul.actions {
  */
 
 .docs-version-selected {
-  font-weight: 900;
+  font-weight: 600;
   text-decoration: underline;
 }
 
@@ -666,7 +672,7 @@ code,
   background-color: #f8f9fa;
   border-radius: .25rem;
   margin: .6rem 0;
-  font-weight: 300;
+  font-weight: 400;
 }
 
 #docContent .note pre,
@@ -701,19 +707,19 @@ code,
 
 #docContent .USERINPUT > code,
 #docContent .userinput > code {
-  font-weight: bolder;
+  font-weight: 600;
 }
 
 #docContent .REPLACEABLE,
 #docContent tt.REPLACEABLE,
 #docContent .replaceable {
-  font-weight: 900;
+  font-weight: 800;
   font-style: italic;
 }
 
 #docContent .REPLACEABLE > code,
 #docContent .replaceable > code {
-  font-weight: 900;
+  font-weight: 800;
 }
 
 /**
@@ -723,7 +729,7 @@ code,
 #docContent .TABLE,
 #docContent .TABLE b {
   color: #336791 !important;
-  font-weight: 900;
+  font-weight: 600;
 }
 
  #docContent table.table,
@@ -892,7 +898,7 @@ code,
 
 #docContent .TOC tt, #docContent .TOC dt a,
 #docContent .toc tt, #docContent .toc dt a {
-  font-weight: 300!important;
+  font-weight: 400;
 }
 
 #docContent .TOC dd, #docContent .TOC dl,
@@ -1039,13 +1045,13 @@ code,
 #docContent .VARIABLELIST dt,
 #docContent .variablelist dt {
   font-family: monospace;
-  font-weight: 300;
+  font-weight: 400;
 }
 
 #docContent .VARIABLELIST dt,
 #docContent .variablelist dt {
   font-family: monospace;
-  font-weight: 300;
+  font-weight: 400;
 }
 
 #docContent .variablelist dd {
@@ -1140,6 +1146,9 @@ pre.code {
 #pgContentWrap .newseventwrap h3 {
   font-size: 1.0em;
 }
+#pgContentWrap strong.event-highlight {
+  font-weight: 600;
+}
 hr.eventseparator {
   width: 80%;
   margin-bottom: 1em;
@@ -1590,7 +1599,6 @@ table.sponsor-table tbody tr td:nth-child(3) {
   /** NAVBAR */
   .nav-item > a {
     font-size: 0.95rem;
-    font-weight: 600;
   }
 }
 @media (max-width: 575px) {
diff --git a/templates/events/archive.html b/templates/events/archive.html
index 88738b8c..9eef13e4 100644
--- a/templates/events/archive.html
+++ b/templates/events/archive.html
@@ -21,9 +21,9 @@ whatsoever.</em>
   {% endif %}
   <a href="/about/event/{{event.title|slugify}}-{{event.id}}/">{{event.title}}</a>
 </div>
-<div>Date: <strong>{{event.displaydate|safe}}</strong></div>
-<div>Location: <strong>{{event.locationstring}}</strong></div>
-{%if event.language%}<div>Language: <strong>{{event.language}}</strong></div>{%endif%}
+<div>Date: <strong class="event-highlight">{{event.displaydate|safe}}</strong></div>
+<div>Location: <strong class="event-highlight">{{event.locationstring}}</strong></div>
+{%if event.language%}<div>Language: <strong class="event-highlight">{{event.language}}</strong></div>{%endif%}
 <div class="newseventwrap">
 {{event.summary|markdown|striptags}}
 </div>