From 8bee611bffc5a5a98dfc24f140e264037a7d0485 Mon Sep 17 00:00:00 2001
From: "Jonathan S. Katz" <jonathan.katz@excoventures.com>
Date: Wed, 6 Dec 2017 11:59:30 +0900
Subject: [PATCH] Replace frontpage header images with text

It's too much of a pain to regenerate the images when a header needs to
change in some way, and having text is better for searching too. This
slightly changes the strength of the headers, but mostly things look the
same as before.
---
 media/css/text.css   | 18 ++++++++++++++++++
 templates/index.html | 29 ++++++++++++++++-------------
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/media/css/text.css b/media/css/text.css
index 129735c5..5a1f666e 100644
--- a/media/css/text.css
+++ b/media/css/text.css
@@ -43,6 +43,12 @@ h4 {
   padding-right: 4px;
 }
 
+.txtHomeHeader {
+  color: #0094C7;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
 .txtNewsEvent {
   font-size: 0.9em;
   color: #0094C7;
@@ -133,6 +139,18 @@ a:visited                       { color:#004E66; text-decoration: underline; }
 a:active                        { color:#0085B0; text-decoration: underline; }
 a:hover                         { color:#000000; text-decoration: underline; }
 
+.txtHomeHeader a:link, .txtHomeHeader a:visited {
+  color: #0094C7;
+  margin: 0 auto;
+  text-decoration: none;
+}
+
+.txtHomeHeader a:hover {
+  color: #0094C7;
+  margin: 0 auto;
+  text-decoration: underline;
+}
+
 #pgFooter a:link                { color:#666; text-decoration: underline; }
 #pgFooter a:visited             { color:#666; text-decoration: underline; }
 #pgFooter a:active              { color:#666; text-decoration: underline; }
diff --git a/templates/index.html b/templates/index.html
index c105a008..0425d4c4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -34,7 +34,7 @@
               <div id="pgFrontUser">
                 <div id="pgFrontUserInner">
                   <div id="pgFrontUserWrap">
-                    <h2><img src="/media/img/hdr/hdr_featureduser.png" width="104" height="10" alt="Featured User" /></h2>
+                    <h3 class="txtHomeHeader">&gt;&nbsp; Featured User</h3>
                     <div id="pgFrontUserContent">
                       <div id="txtFrontUserText">{{quote.quote}}</div>
                       <div id="txtFrontUserName"><b>{{quote.who}}, <a href="{{quote.link}}">{{quote.org}}</a></b></div>
@@ -50,7 +50,7 @@
         </div> <!-- pgFrontContainer -->
         <div id="pgFrontRightContainer">
           <div id="pgFrontLatestReleases">
-            <h2><img src="/media/img/hdr/hdr_latestreleases.png" width="120" height="10" alt="Latest Releases" /></h2>
+            <h3 class="txtHomeHeader">&gt;&nbsp; Latest Releases</h3>
             <div id="pgFrontLatestReleasesWrap">
              {%for v in versions %}
              <b>{{v.numtree}}.{{v.latestminor}}</b> &middot; {{v.reldate}} &middot; <a href="/docs/{{v.numtree}}/static/{{v.relnotes}}">Notes</a>
@@ -60,7 +60,7 @@
 	    <div id="pgFrontLatestReleasesNote"><b><a href="/download">Download</a></b> | <a href="/versions.rss" title="Versions RSS Feed"><img class="pgRSSImage" src="/media/img/misc/ico_rss.png" width="28" height="13" alt="Versions RSS Feed" /></a><br /><a href="/support/versioning">Why should I upgrade?</a><br/><a href="/developer/roadmap/">Upcoming releases</a></div>
           </div> <!-- pgFrontLatestreleases -->
           <div id="pgFrontShortcuts">
-            <h2><img src="/media/img/hdr/hdr_shortcuts.png" width="85" height="10" alt="Shortcuts" /></h2>
+            <h3 class="txtHomeHeader">&gt;&nbsp; Shortcuts</h3>
             <div id="pgFrontShortcutsWrap">
               <ul id="pgFrontShortcutsList">
                 <li>
@@ -85,7 +85,7 @@
             </div>
           </div> <!-- pgFrontShortcuts -->
           <div id="pgFrontSupportUs">
-            <h2><img src="/media/img/hdr/hdr_supportus.png" width="81" height="10" alt="Support Us" /></h2>
+            <h3 class="txtHomeHeader">&gt;&nbsp; Support Us</h3>
             <div id="pgFrontSupportUsWrap">
               <div id="txtFrontSupportUsText">
                 PostgreSQL is free. Please support our work by making a <a href="/about/donate">donation</a>.
@@ -95,9 +95,10 @@
         </div> <!-- pgFrontRightContainer -->
         <div id="pgFrontBottomContainer">
          <div id="pgFrontNews" class="txtNewsEvent">
-           <a href="/about/newsarchive">
-           <img src="/media/img/hdr/hdr_latestnews.png" width="90" height="10" alt="Latest News" />
-           </a>
+           <h3 class="txtHomeHeader">
+             &gt;&nbsp;
+             <a href="/about/newsarchive">News</a>
+           </h3>
            <div class="pgNewsEventsWrap">
              {% for n in news %}
              <p>
@@ -122,9 +123,10 @@
            </div>
          </div> <!-- pgFrontNews -->
          <div id="pgFrontPlanet">
-           <a href="https://planet.postgresql.org">
-           <img src="/media/img/hdr/hdr_planetpg.png" width="140" height="10" alt="Planet PostgreSQL" />
-           </a>
+           <h3 class="txtHomeHeader">
+             &gt;&nbsp;
+             <a href="https://planet.postgresql.org">Planet PostgreSQL</a>
+           </h3>
            <div id="pgFrontPlanetWrap">
             {%for post in planet%}
             <p>
@@ -171,9 +173,10 @@
                </li>
              </ul>
            </div>
-           <a href="/about/events/">
-           <img src="/media/img/hdr/hdr_upcomingtraining.png" width="140" height="10" alt="Upcoming training" />
-           </a>
+           <h3 class="txtHomeHeader">
+             &gt;&nbsp;
+             <a href="/about/events/">TRAINING</a>
+           </h3>
            <div class="pgNewsEventsWrap">
              <div id="pgFrontTrainingSummary">
              {%if traininginfo.id__count %}
-- 
2.39.5