[yelp-xsl] mal2html-links: Added "norwich" links style for new index splash design

[Shaun McCance <shaunm src gnome org>]

commit d15b4eb1a3ec25f1d0316c345c4b6d64748b92b5
Author: Shaun McCance <shaunm gnome org>
Date:   Thu Jan 30 16:15:01 2014 +0000

    mal2html-links: Added "norwich" links style for new index splash design

 xslt/mallard/html/mal2html-links.xsl |  114 ++++++++++++++++++++++++++++++++++
 xslt/mallard/html/mal2html-page.xsl  |   95 ++++++++++++++++++++++++++++
 2 files changed, 209 insertions(+), 0 deletions(-)
---
diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index 3bf23b7..7b95035 100644
--- a/xslt/mallard/html/mal2html-links.xsl
+++ b/xslt/mallard/html/mal2html-links.xsl
@@ -172,6 +172,13 @@ parameter will be used if provided.
               <xsl:with-param name="role" select="$role"/>
             </xsl:call-template>
           </xsl:when>
+          <xsl:when test="contains($style, ' norwich ')">
+            <xsl:call-template name="_mal2html.links.norwich">
+              <xsl:with-param name="node" select="$node"/>
+              <xsl:with-param name="links" select="$links"/>
+              <xsl:with-param name="role" select="$role"/>
+            </xsl:call-template>
+          </xsl:when>
           <xsl:when test="contains($style, ' linklist ')">
             <xsl:variable name="bold" select="contains($style, ' bold ')"/>
             <xsl:call-template name="mal2html.links.ul">
@@ -938,6 +945,113 @@ when determining which links to output.
   </xsl:for-each>
 </xsl:template>
 
+<!--#* _mal2html.links.norwich -->
+<xsl:template name="_mal2html.links.norwich">
+  <xsl:param name="node"/>
+  <xsl:param name="links"/>
+  <xsl:param name="role"/>
+  <div class="links-norwich">
+    <div class="links-norwich-primary">
+      <xsl:for-each select="$links">
+        <xsl:sort data-type="number" select="@groupsort"/>
+        <xsl:sort select="mal:title[ type = 'sort']"/>
+        <xsl:if test="position() &lt; 3">
+          <xsl:variable name="xref" select="@xref"/>
+          <xsl:for-each select="$mal.cache">
+            <xsl:variable name="target" select="key('mal.cache.key', $xref)"/>
+            <div class="links-norwich-big">
+              <a>
+                <xsl:attribute name="href">
+                  <xsl:call-template name="mal.link.target">
+                    <xsl:with-param name="xref" select="$xref"/>
+                  </xsl:call-template>
+                </xsl:attribute>
+                <xsl:attribute name="title">
+                  <xsl:call-template name="mal.link.tooltip">
+                    <xsl:with-param name="xref" select="$xref"/>
+                    <xsl:with-param name="role" select="$role"/>
+                  </xsl:call-template>
+                </xsl:attribute>
+                <!-- FIXME: role and dimensions -->
+                <xsl:if test="$target/mal:info/uix:thumb">
+                  <xsl:attribute name="style">
+                    <xsl:text>background-image: url(</xsl:text>
+                    <xsl:value-of select="$target/mal:info/uix:thumb/@src"/>
+                    <xsl:text>);</xsl:text>
+                  </xsl:attribute>
+                </xsl:if>
+                <span class="title">
+                  <xsl:call-template name="mal.link.content">
+                    <xsl:with-param name="node" select="."/>
+                    <xsl:with-param name="xref" select="$xref"/>
+                    <xsl:with-param name="role" select="$role"/>
+                  </xsl:call-template>
+                </span>
+                <xsl:if test="$target/mal:info/mal:desc">
+                  <div class="desc">
+                    <span class="desc">
+                      <xsl:variable name="desc">
+                        <xsl:apply-templates mode="mal2html.inline.mode"
+                                             select="$target/mal:info/mal:desc[1]/node()"/>
+                      </xsl:variable>
+                      <xsl:apply-templates mode="_mal2html.links.divs.nolink.mode"
+                                           select="exsl:node-set($desc)"/>
+                    </span>
+                  </div>
+                </xsl:if>
+              </a>
+            </div>
+          </xsl:for-each>
+        </xsl:if>
+      </xsl:for-each>
+    </div>
+    <div class="links-norwich-secondary">
+      <xsl:for-each select="$links">
+        <xsl:sort data-type="number" select="@groupsort"/>
+        <xsl:sort select="mal:title[ type = 'sort']"/>
+        <xsl:if test="position() &gt;= 3">
+          <xsl:variable name="xref" select="@xref"/>
+          <xsl:for-each select="$mal.cache">
+            <xsl:variable name="target" select="key('mal.cache.key', $xref)"/>
+            <xsl:variable name="thumbs" select="$target/mal:info/uix:thumb"/>
+            <div class="links-norwich-small">
+              <a>
+                <xsl:attribute name="href">
+                  <xsl:call-template name="mal.link.target">
+                    <xsl:with-param name="xref" select="$xref"/>
+                  </xsl:call-template>
+                </xsl:attribute>
+                <xsl:attribute name="title">
+                  <xsl:call-template name="mal.link.tooltip">
+                    <xsl:with-param name="xref" select="$xref"/>
+                    <xsl:with-param name="role" select="$role"/>
+                  </xsl:call-template>
+                </xsl:attribute>
+                <!-- FIXME: role and dimensions -->
+                <xsl:if test="$target/mal:info/uix:thumb">
+                  <xsl:attribute name="style">
+                    <xsl:text>background-image: url(</xsl:text>
+                    <xsl:value-of select="$target/mal:info/uix:thumb/@src"/>
+                    <xsl:text>);</xsl:text>
+                  </xsl:attribute>
+                </xsl:if>
+                <span class="title">
+                  <xsl:call-template name="mal.link.content">
+                    <xsl:with-param name="node" select="."/>
+                    <xsl:with-param name="xref" select="$xref"/>
+                    <xsl:with-param name="role" select="$role"/>
+                  </xsl:call-template>
+                </span>
+              </a>
+            </div>
+          </xsl:for-each>
+        </xsl:if>
+      </xsl:for-each>
+    </div>
+  </div>
+  <div class="clear"/>
+</xsl:template>
+
 
 <!--#* _mal2html.links.divs -->
 <xsl:template name="_mal2html.links.divs">
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 05aad2c..cb30753 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -1129,6 +1129,101 @@ div.links-grid > div.desc {
   }
 }
 
+div.links-norwich {
+  width: 900px;
+}
+div.links-norwich-primary {
+  float: left;
+  vertical-align: top;
+  margin: 0; padding: 0;
+}
+div.links-norwich-big {
+  vertical-align: top;
+  display: inline-block;
+  background: </xsl:text><xsl:value-of select="$color.blue_background"/><xsl:text>;
+  background: radial-gradient(ellipse 800px 1200px at 100% 20px, </xsl:text>
+    <xsl:value-of select="$color.blue_background"/><xsl:text>, </xsl:text>
+    <xsl:value-of select="$color.blue_border"/><xsl:text>);
+  margin: 0 20px 20px 0;
+}
+div.links-norwich-big + div.links-norwich-big {
+  background: </xsl:text><xsl:value-of select="$color.yellow_background"/><xsl:text>;
+  background: radial-gradient(ellipse 800px 1200px at 100% 20px, </xsl:text>
+    <xsl:value-of select="$color.yellow_background"/><xsl:text>, </xsl:text>
+    <xsl:value-of select="$color.yellow_border"/><xsl:text>);
+}
+div.links-norwich-big a {
+  display: block;
+  width: 230px;
+  height: 500px;
+  height: 320px;
+  padding: 9px;
+  font-size: 1.2em;
+  color:  </xsl:text><xsl:value-of select="$color.text"/><xsl:text>;
+  border: solid 1px </xsl:text><xsl:value-of select="$color.blue_border"/><xsl:text>;
+  background-repeat: no-repeat;
+  background-position: right -80px bottom -80px;
+}
+div.links-norwich-big a:hover {
+  border: solid 1px </xsl:text><xsl:value-of select="$color.blue_border"/><xsl:text>;
+  box-shadow: 2px 2px 2px </xsl:text><xsl:value-of select="$color.blue_border"/><xsl:text>;
+}
+div.links-norwich-big a span.title {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+div.links-norwich-big a .desc {
+  color:  </xsl:text><xsl:value-of select="$color.text"/><xsl:text>;
+  font-weight: normal;
+}
+div.links-norwich-secondary {
+  vertical-align: top;
+  margin: 0; padding: 0;
+}
+div.links-norwich-small {
+  display: inline-block;
+  vertical-align: top;
+  background: </xsl:text><xsl:value-of select="$color.gray_background"/><xsl:text>;
+  margin: 0 20px 20px 0;
+}
+div.links-norwich-small a {
+  display: block;
+  width: 140px;
+  height: 140px;
+  padding: 9px;
+  font-weight: bold;
+  color:  </xsl:text><xsl:value-of select="$color.text"/><xsl:text>;
+  border: solid 1px </xsl:text><xsl:value-of select="$color.gray_border"/><xsl:text>;
+  background-repeat: no-repeat;
+  background-position: right 4px bottom 4px;
+}
+div.links-norwich-small a:hover {
+  border: solid 1px </xsl:text><xsl:value-of select="$color.gray_border"/><xsl:text>;
+  box-shadow: 2px 2px 2px </xsl:text><xsl:value-of select="$color.blue_border"/><xsl:text>;
+}
+ media only screen and (max-width: 900px) {
+  div.links-norwich {
+    width: 720px;
+  }
+}
+ media only screen and (max-width: 720px) {
+  div.links-norwich {
+    width: 540px;
+  }
+}
+ media only screen and (max-width: 540px) {
+  div.links-norwich {
+    width: 100%;
+  }
+  div.links-norwich-big {
+    width: 100%;
+    margin-right: 0;
+  }
+  div.links-norwich-big a {
+    width: auto;
+  }
+}
+
 div.links-twocolumn {
   display: inline-block;
   width: 48%;