www: Update layout/sidebar to look a bit more modern

Centers the main container and limits it to 1400px width, making it easier to look at on a widescreen display.

Makes the sidebar look like buttons, not just text with a background.
Changes it so that the entire button there is a link, not just the text - feels much better to use :)
Adds a bit of padding for better UX, plus adjusts colors, borders and spacing etc.

Part-of: <https://gitlab.freedesktop.org/gstreamer/www/-/merge_requests/105>

2 files changed, 41 insertions, 19 deletions

diff --git a/src/copy/gstreamer.css b/src/copy/gstreamer.css
index 0cfb7dba..115a6822 100644
--- a/src/copy/gstreamer.css
+++ b/src/copy/gstreamer.css
@@ -1,5 +1,7 @@
 body {
   font-family: sans-serif;
+  max-width: 1400px;
+  margin: 0 auto;
 }
 
 h1, h2, h3 {
@@ -19,32 +21,50 @@ a:link { color: #0000FF; text-decoration: none; }
 a:visited { color: #6666CC; text-decoration: none; }
 a:hover { color: #FF3333; text-decoration: underline; }
 
-td.gstnavside-r, td.gstnavside-g, td.gstnavside-b {
-  border-left-width: 4px;
-  border-left-style: solid;
-}
-
-td.gstnavside-r { background-color:#CCAAAA; border-left-color: #CCAAAA; }
-td.gstnavside-g { background-color:#AACCAA; border-left-color: #AACCAA; }
-td.gstnavside-b { background-color:#AAAACC; border-left-color: #AAAACC; }
 td.gstnavside-r:hover { border-left-color: #FFAAAA; }
 td.gstnavside-g:hover { border-left-color: #AAFFAA; }
 td.gstnavside-b:hover { border-left-color: #AAAAFF; }
 
+td.gstnavside-sep { padding: 0 }
+
 a.gstnavside-r, a.gstnavside-g, a.gstnavside-b {
+  /* 150px table width - 20px padding */
+  width: 130px;
+  display: inline-block;
+  font-weight: 600;
   text-decoration: none; font-family: "Arial", sans-serif;
-  padding-left: 3px;
-  padding-right: 3px;
+  padding: 8px 10px;
+  border-radius: 4px;
+  border: 1px solid rgb(0 0 0 / 20%);
+  transition: all 0.1s ease-out, background 0s;
+}
+a.gstnavside-r:hover, a.gstnavside-g:hover, a.gstnavside-b:hover {
+  box-shadow: 0 0px 5px rgb(0 0 0 / 0.3);
 }
+a.gstnavside-r { background-color:#CCAAAA; }
+a.gstnavside-g { background-color:#AACCAA; }
+a.gstnavside-b { background-color:#AAAACC; }
+a.gstnavside-r:active { background-color: #bb9e9e; }
+a.gstnavside-g:active { background-color: #9ebe9e; }
+a.gstnavside-b:active { background-color: #9e9ebe; }
 a.gstnavside-r:link, a.gstnavside-g:link, a.gstnavside-b:link { 
   color: #000000;
 }
 a.gstnavside-r:visited, a.gstnavside-g:visited, a.gstnavside-b:visited {
   color: #000000;
 }
-a.gstnavside-r:hover { color: #CC3333; }
-a.gstnavside-g:hover { color: #33CC33; }
-a.gstnavside-b:hover { color: #3333CC; }
+a.gstnavside-r:hover { 
+  color: #9e2222;
+  border-color: #9e2222ad;
+}
+a.gstnavside-g:hover { 
+  color: #037403;
+  border-color: #097e09ad;
+}
+a.gstnavside-b:hover { 
+  color: #353598;
+  border-color: #353598ad;
+}
 
 .right { text-align: right; }
 
diff --git a/src/htdocs/header.xsl b/src/htdocs/header.xsl
index 59083785..23fea9d8 100644
--- a/src/htdocs/header.xsl
+++ b/src/htdocs/header.xsl
@@ -16,7 +16,7 @@
     <tr>
       <td bgcolor="#FFFFFF" valign="top">
         <!-- table inside the graphics for menu items -->
-        <table border="0" cellpadding="2" cellspacing="0">
+        <table border="0" cellpadding="1" cellspacing="0">
           <tr><td colspan="2"><img src="&site;/images/1x1.gif" alt="" border="0" width="2" height="2" /></td></tr>
           <xsl:for-each select="item">
           <tr>
@@ -31,18 +31,20 @@
                   </xsl:attribute>
                   <xsl:choose>
                     <xsl:when test="substring(@href, 1, 7) = 'http://'">
-                      <b><a href="{@href}">
+                      <a href="{@href}">
                         <xsl:attribute name="class">
                           <xsl:value-of select="@class" />
                         </xsl:attribute>
-                        <xsl:value-of select="." /></a></b>
+                        <xsl:value-of select="." />
+                      </a>
                     </xsl:when>
                     <xsl:otherwise>
-                      <b><a href="&site;{@href}" class="gstnavside">
+                      <a href="&site;{@href}" class="gstnavside">
                         <xsl:attribute name="class">
                           <xsl:value-of select="@class" />
                         </xsl:attribute>
-                       <xsl:value-of select="." /></a></b>
+                        <xsl:value-of select="." />
+                      </a>
                     </xsl:otherwise>
                   </xsl:choose>
                 </td>
@@ -50,7 +52,7 @@
             </xsl:choose>
             <td><img src="&site;/images/1x1.gif" border="0" width="2" height="2" alt="" /></td>
           </tr>
-          <tr><td colspan="3"><img src="&site;/images/1x1.gif" border="0" width="2" height="2" alt="" /></td></tr>
+          <tr><td colspan="3"><img src="&site;/images/1x1.gif" border="0" width="2" height="1" alt="" /></td></tr>
           </xsl:for-each>
         </table>
       </td>