Use text templates for Mallard CSS

4 files changed, 554 insertions, 554 deletions

diff --git a/test/lipsum/index.page b/test/lipsum/index.page
index 7a3b6f75..887faf39 100644
--- a/test/lipsum/index.page
+++ b/test/lipsum/index.page
@@ -9,6 +9,8 @@
     </credit>
 
     <desc>This is the index page, whence all other pages link.</desc>
+
+    <revision date="2020-10-16" status="review"/>
   </info>
 
   <title>Lorem ipsum</title>
@@ -22,6 +24,20 @@
   Vestibulum in pretium ligula. Cras dignissim nisl ligula, non semper diam lobortis sit amet.
   Donec cursus sollicitudin velit, at vulputate enim.</p>
 
-  <links type="topic"/>
+  <links type="topic">
+    <title>Regular links</title>
+  </links>
+
+  <links type="topic" style="2column">
+    <title>Two-column links</title>
+  </links>
+
+  <links type="topic" style="linklist">
+    <title>Link list</title>
+  </links>
+
+  <links type="topic" style="button">
+    <title>Link buttons</title>
+  </links>
 
 </page>
diff --git a/xslt/common/css/mallard-editor.css.tmpl b/xslt/common/css/mallard-editor.css.tmpl
new file mode 100644
index 00000000..91870036
--- /dev/null
+++ b/xslt/common/css/mallard-editor.css.tmpl
@@ -0,0 +1,19 @@
+<tmpl>
+div.note-version {
+  background-color: {{$color.bg.yellow}};
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+span.status {
+  font-size: 0.83em;
+  font-weight: normal;
+  padding-left: 0.2em;
+  padding-right: 0.2em;
+  color: {{$color.fg.dark}};
+  border: solid 1px {{$color.red}};
+  background-color: {{$color.bg.yellow}};
+}
+span.status-stub, span.status-draft, span.status-incomplete, span.status-outdated {
+  background-color: {{$color.bg.red}};
+}
+</tmpl>
diff --git a/xslt/common/css/mallard.css.tmpl b/xslt/common/css/mallard.css.tmpl
new file mode 100644
index 00000000..97d94d23
--- /dev/null
+++ b/xslt/common/css/mallard.css.tmpl
@@ -0,0 +1,493 @@
+<tmpl>
+<!-- links -->
+div.links .desc a {
+  color: inherit;
+}
+div.links .desc a:hover {
+  color: {{$color.fg.blue}};
+}
+a.bold { font-weight: bold; }
+
+<!-- link/@style = 'button' -->
+div.link-button {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+.link-button a {
+  display: inline-block;
+  background-color: {{$color.blue}};
+  color: {{$color.bg}};
+  text-shadow: {{$color.fg.blue}} 1px 1px 0px;
+  border: solid 1px {{$color.fg.blue}};
+  padding: 0.2em 0.83em 0.2em 0.83em;
+  border-radius: 4px;
+}
+.link-button a:visited {
+  color: {{$color.bg}};
+}
+.link-button a:hover {
+  text-decoration: none;
+  color: {{$color.bg}};
+  background-color: {{$_color.link_button_hover}};
+}
+div.link-button a .desc {
+  display: block;
+  font-weight: normal;
+  font-size: 0.83em;
+  color: {{$color.bg.gray}};
+}
+
+<!-- @style = 'float*' -->
+div.floatleft {
+  float: left;
+  margin-right: 1em;
+}
+div.floatright {
+  float: right;
+  margin-left: 1em;
+}
+div.floatstart {
+  float: {{$left}};
+  margin-{{$right}}: 1em;
+}
+div.floatend {
+  float: {{$right}};
+  margin-{{$left}}: 1em;
+}
+
+<!-- FIXME -->
+div.title-heading h1, div.title-heading h2, div.title-heading h3,
+div.title-heading h4, div.title-heading h5, div.title-heading h6 {
+  font-size: 1.72em;
+  font-weight: bold;
+}
+ul.links-heading > li { margin: 2em 0 2em 0; padding: 0; }
+div.links-heading > a { font-size: 1.72em; font-weight: bold; }
+ul.links-heading > li > div.desc { margin-top: 0.5em; }
+
+div.links-uix-hover {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+ul.links-uix-hover { flex-grow: 1; }
+ul.links-uix-hover li { margin: 0; padding: 0; }
+ul.links-uix-hover a {
+  display: block;
+  padding: 8px 1.2em;
+  border-bottom: none;
+}
+ul.links-uix-hover a:hover, ul.links-uix-hover a:focus {
+  background: {{$color.bg.blue}};
+}
+ul.links-uix-hover img {
+  display: block;
+  position: absolute;
+  top: 0; {{$left}}: 0;
+  visibility: hidden;
+  opacity: 0.0;
+  transition: opacity 0.6s, visibility 0.6s;
+}
+ul.links-uix-hover a:hover img, ul.links-uix-hover a:focus img {
+  visibility: visible;
+  opacity: 1.0;
+  transition: opacity 0.2s, visibility 0.2s;
+}
+@media only screen and (max-width: 480px) {
+  div.links-uix-hover-img { display: none; }
+  ul.links-uix-hover img { display: none; }
+  ul.links-uix-hover li {
+    margin-left: -10px; margin-right: -10px;
+  }
+  ul.links-uix-hover li a {
+    padding: 10px;
+  }
+}
+
+<!-- uix:overlay -->
+div.ui-overlay-screen {
+  position: fixed;
+  margin: 0;
+  left: 0; top: 0;
+  width: 100%; height: 100%;
+  background: {{$color.fg.dark}};
+  animation-name: yelp-overlay-screen;
+  animation-duration: 0.8s;
+  animation-fill-mode: forwards;
+}
+@keyframes yelp-overlay-screen {
+  from { opacity: 0.0; }
+  to   { opacity: 0.6; }
+}
+div.ui-overlay {
+  display: none;
+  position: fixed;
+  text-align: center;
+  top: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+}
+div.ui-overlay-show {
+  animation-name: yelp-overlay-slide;
+  animation-duration: 0.8s;
+  animation-fill-mode: forwards;
+}
+@keyframes yelp-overlay-slide {
+  from { transform: translateY(-400px) translateX(-50%); }
+  to   { transform: translateY(0) translateX(-50%); }
+}
+div.ui-overlay > div.inner {
+  display: inline-block;
+  padding: 8px;
+  background-color: {{$color.bg.gray}};
+  border-radius: 4px;
+  text-align: {{$left}};
+}
+div.ui-overlay img, div.ui-overlay video {
+  max-height: 80vh;
+  max-width: 90vw;
+}
+div.ui-overlay > div.inner > div.title { margin-top: -4px; }
+a.ui-overlay-close {
+  display: block;
+  float: {{$right}};
+  width: 30px; height: 30px;
+  font-size: 22px; line-height: 30px;
+  font-weight: bold;
+  margin-top: -28px;
+  margin-{{$right}}: -26px;
+  padding: 1px 2px 3px 2px;
+  text-align: center;
+  border: none;
+  border-radius: 50%;
+  background-color: {{$color.blue}};
+  color: {{$color.bg}};
+}
+div.links-tiles {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  justify-content: stretch;
+  vertical-align: top;
+  clear: both;
+  margin: 0 -10px;
+}
+div.links-tile {
+  max-width: 300px;
+  flex: 1 0 300px;
+  vertical-align: top;
+  margin: 0;
+  padding: 10px;
+}
+div.links-tiles > div.links-tile { max-width: none; }
+div.links-tile:empty { padding: 0 10px; height: 0; }
+div.links-tile > a {
+  display: block;
+  vertical-align: top;
+  padding: 10px;
+  border-radius: 4px;
+  border: none;
+}
+div.links-tile > a:hover {
+  background-color: {{$color.bg.blue}};
+}
+div.links-tile > a > span.links-tile-img {
+  display: block;
+  text-align: center;
+}
+div.links-tile > a > span.links-tile-img > img {
+  width: 100%;
+  border-radius: 3px;
+}
+div.links-tile > a > span.links-tile-text > span.title {
+  display: block;
+  font-weight: bold;
+}
+div.links-tile > a > span.links-tile-text > * + span.title {
+  margin-top: 0.5em;
+}
+div.links-tile > a > span.links-tile-text > span.desc {
+  display: block;
+  margin: 0.2em 0 0 0;
+  color: {{$color.fg.dark}};
+}
+
+<!-- links/@style = 'grid' -->
+div.links-grid-container {
+  margin-left: -10px;
+  margin-right: -10px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  justify-content: flex-start;
+  vertical-align: top;
+  clear: both;
+}
+div.links-grid {
+  flex: 1 0 300px;
+  padding: 10px;
+}
+div.links-grid:empty { padding: 0 10px; height: 0; }
+div.links-grid-link { font-weight: bold; }
+div.links-grid > div.desc {
+  margin: 0.2em 0 0 0;
+  color: {{$color.fg.dark}};
+}
+
+<!-- FIXME -->
+<!-- links/@style = 'norwich' -->
+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: {{$color.bg.blue}};
+  background: radial-gradient(ellipse 800px 1200px at 100% 20px, {{$color.bg.blue}}, {{$color.blue}});
+  margin: 0 20px 20px 0;
+}
+div.links-norwich-big + div.links-norwich-big {
+  background: {{$color.bg.yellow}};
+  background: radial-gradient(ellipse 800px 1200px at 100% 20px, {{$color.bg.yellow}}, {{$color.yellow}});
+}
+div.links-norwich-big a {
+  display: block;
+  width: 230px;
+  height: 500px;
+  height: 320px;
+  padding: 9px;
+  font-size: 1.2em;
+  color:  {{$color.fg}};
+  border: solid 1px {{$color.blue}};
+  background-repeat: no-repeat;
+  background-position: right -80px bottom -80px;
+}
+div.links-norwich-big a:hover {
+  border: solid 1px {{$color.blue}};
+  box-shadow: 2px 2px 2px {{$color.blue}};
+}
+div.links-norwich-big a span.title {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+div.links-norwich-big a .desc {
+  color:  {{$color.fg}};
+  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: {{$color.bg.gray}};
+  margin: 0 20px 20px 0;
+}
+div.links-norwich-small a {
+  display: block;
+  width: 140px;
+  height: 140px;
+  padding: 9px;
+  font-weight: bold;
+  color:  {{$color.fg}};
+  border: solid 1px {{$color.gray}};
+  background-repeat: no-repeat;
+  background-position: right 4px bottom 4px;
+}
+div.links-norwich-small a:hover {
+  border: solid 1px {{$color.gray}};
+  box-shadow: 2px 2px 2px {{$color.blue}};
+}
+@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;
+  }
+}
+
+<!-- links/@type = 'topic' and @style = '2column' -->
+div.links-divs {
+  margin-left: -10px;
+  margin-right: -10px;
+}
+a.linkdiv {
+  display: block;
+  margin: 0;
+  padding: 10px;
+  border-bottom: none;
+}
+a.linkdiv:hover {
+  text-decoration: none;
+  background-color: {{$color.bg.blue}};
+}
+a.linkdiv > span.title {
+  display: block;
+  margin: 0;
+  font-size: 1em;
+  font-weight: bold;
+  color: inherit;
+}
+a.linkdiv > span.desc {
+  display: block;
+  margin: 0.2em 0 0 0;
+  color: {{$color.fg.dark}};
+}
+span.linkdiv-dash { display: none; }
+div.links-twocolumn {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  justify-content: flex-start;
+  vertical-align: top;
+  margin-left: -10px;
+  margin-right: -10px;
+}
+div.links-twocolumn > div.links-divs {
+  flex: 1 0 320px;
+  vertical-align: top;
+  margin: 0;
+}
+
+<!-- FIXME -->
+div.comment {
+  padding: 0.5em;
+  border: solid 2px {{$color.red}};
+  background-color: {{$color.bg.red}};
+}
+div.comment div.comment {
+  margin: 1em 1em 0 1em;
+}
+div.comment div.cite {
+  margin: 0 0 0.5em 0;
+  font-style: italic;
+}
+
+<!-- FIXME -->
+div.tree > div.inner > div.title { margin-bottom: 0.5em; }
+ul.tree {
+  margin: 0; padding: 0;
+  list-style-type: none;
+}
+li.tree { margin: -2px 0 0 0; padding: 0; }
+li.tree div { margin: 0; padding: 0; }
+ul.tree ul.tree {
+  margin-{{$left}}: 1.44em;
+}
+div.tree-lines ul.tree { margin-left: 0; }
+
+<!-- FIXME -->
+span.hi {
+  background-color: {{$color.bg.yellow}};
+}
+span.hi.hi-ins {
+  background-color: {{$color.bg.green}};
+}
+span.hi.hi-del {
+  background-color: {{$color.bg.red}};
+  text-decoration: line-through;
+}
+span.hi.hi-ins ins { text-decoration: none; }
+span.hi.hi-del del { text-decoration: none; }
+span.hi.hi-red { background-color: {{$color.bg.red}}; }
+span.hi.hi-orange { background-color: {{$color.bg.orange}}; }
+span.hi.hi-yellow { background-color: {{$color.bg.yellow}}; }
+span.hi.hi-green { background-color: {{$color.bg.green}}; }
+span.hi.hi-blue { background-color: {{$color.bg.blue}}; }
+span.hi.hi-purple { background-color: {{$color.bg.purple}}; }
+span.hi.hi-gray { background-color: {{$color.bg.gray}}; }
+
+<!-- experimental/gloss -->
+dt.gloss-term {
+  margin-top: 1.2em;
+  font-weight: bold;
+  color: {{$color.fg.dark}};
+}
+dt.gloss-term:first-child, dt.gloss-term + dt.gloss-term { margin-top: 0; }
+dt.gloss-term + dd { margin-top: 0.2em; }
+dd.gloss-link {
+  margin: 0 0.2em 0 0.2em;
+  border-{{$left}}: solid 4px {{$color.blue}};
+  padding-{{$left}}: 1em;
+}
+dd.gloss-def {
+  margin: 0 0.2em 1em 0.2em;
+  border-{{$left}}: solid 4px {{$color.gray}};
+  padding-{{$left}}: 1em;
+}
+a.gloss-term {
+  position: relative;
+  border-bottom: dashed 1px {{$color.blue}};
+}
+a.gloss-term:hover {
+  text-decoration: none;
+  border-bottom-style: solid;
+}
+span.gloss-desc {
+  display: none;
+  position: absolute;
+  z-index: 100;
+  margin: 0;
+  {{$left}}: 0;
+  top: 1.2em;
+  padding: 0.2em 0.5em 0.2em 0.5em;
+  min-width: 12em;
+  max-width: 24em;
+  overflow: hidden;
+  color: {{$color.fg.dark}};
+  background-color: {{$color.bg.yellow}};
+  border: solid 1px {{$color.yellow}};
+  box-shadow: 2px 2px 4px {{$color.gray}};
+}
+a.gloss-term:hover span.gloss-desc, a.gloss-term:focus span.gloss-desc {
+  display: inline-block;
+  animation-name: yelp-gloss-fade;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+}
+@keyframes yelp-gloss-fade {
+  from { opacity: 0.0; }
+  to   { opacity: 1.0; }
+}
+
+<!-- conditional processing -->
+.if-if { display: none; }
+.if-choose, .if-when, .if-else { margin: 0; padding: 0; }
+.if-choose > .if-when { display: none; }
+.if-choose > .if-else { display: block; }
+.if-if.if__not-target-mobile { display: block; }
+.if-choose.if__not-target-mobile > .if-when { display: block; }
+.if-choose.if__not-target-mobile > .if-else { display: none; }
+@media only screen and (max-width: 480px) {
+  .if-if.if__target-mobile { display: block; }
+  .if-if.if__not-target-mobile { display: none; }
+  .if-choose.if__target-mobile > .if-when { display: block; }
+  .if-choose.if__target-mobile > .if-else { display: none; }
+  .if-choose.if__not-target-mobile > .if-when { display: none; }
+  .if-choose.if__not-target-mobile > .if-else { display: block; }
+}
+</tmpl>
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index f6f793b7..fe67287b 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -983,6 +983,15 @@ are processed in {mal2html.block.mode}.
   </xsl:if>
 </xsl:template>
 
+<!-- We need this in the CSS, but the text templates can't xsl:call-template -->
+<xsl:variable name="_color.link_button_hover">
+  <xsl:call-template name="color.blend">
+    <xsl:with-param name="bg" select="$color.blue"/>
+    <xsl:with-param name="fg" select="$color.bg"/>
+    <xsl:with-param name="mix" select="0.1"/>
+  </xsl:call-template>
+</xsl:variable>
+
 <!--%# html.css.mode -->
 <xsl:template mode="html.css.mode" match="mal:page">
   <xsl:param name="direction">
@@ -998,559 +1007,22 @@ are processed in {mal2html.block.mode}.
       <xsl:with-param name="direction" select="$direction"/>
     </xsl:call-template>
   </xsl:param>
-<xsl:text>
-<!-- links -->
-div.links .desc a {
-  color: inherit;
-}
-div.links .desc a:hover {
-  color: </xsl:text><xsl:value-of select="$color.fg.blue"/><xsl:text>;
-}
-a.bold { font-weight: bold; }
-
-<!-- link/@style = 'button' -->
-div.link-button {
-  font-size: 1.2em;
-  font-weight: bold;
-}
-.link-button a {
-  display: inline-block;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.blue"/><xsl:text>;
-  color: </xsl:text>
-    <xsl:value-of select="$color.bg"/><xsl:text>;
-  text-shadow: </xsl:text>
-    <xsl:value-of select="$color.fg.blue"/><xsl:text> 1px 1px 0px;
-  border: solid 1px </xsl:text>
-    <xsl:value-of select="$color.fg.blue"/><xsl:text>;
-  padding: 0.2em 0.83em 0.2em 0.83em;
-  border-radius: 4px;
-}
-.link-button a:visited {
-  color: </xsl:text>
-    <xsl:value-of select="$color.bg"/><xsl:text>;
-}
-.link-button a:hover {
-  text-decoration: none;
-  color: </xsl:text>
-    <xsl:value-of select="$color.bg"/><xsl:text>;
-  background-color: </xsl:text>
-<xsl:call-template name="color.blend">
-<xsl:with-param name="bg" select="$color.blue"/>
-<xsl:with-param name="fg" select="$color.bg"/>
-<xsl:with-param name="mix" select="0.1"/>
-</xsl:call-template><xsl:text>
-}
-div.link-button a .desc {
-  display: block;
-  font-weight: normal;
-  font-size: 0.83em;
-  color: </xsl:text>
-    <xsl:value-of select="$color.bg.gray"/><xsl:text>;
-}
-
-<!-- @style = 'float*' -->
-div.floatleft {
-  float: left;
-  margin-right: 1em;
-}
-div.floatright {
-  float: right;
-  margin-left: 1em;
-}
-div.floatstart {
-  float: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
-  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 1em;
-}
-div.floatend {
-  float: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
-}
-
-<!-- FIXME -->
-div.title-heading h1, div.title-heading h2, div.title-heading h3,
-div.title-heading h4, div.title-heading h5, div.title-heading h6 {
-  font-size: 1.72em;
-  font-weight: bold;
-}
-ul.links-heading > li { margin: 2em 0 2em 0; padding: 0; }
-div.links-heading > a { font-size: 1.72em; font-weight: bold; }
-ul.links-heading > li > div.desc { margin-top: 0.5em; }
-
-div.links-uix-hover {
-  position: relative;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: stretch;
-  justify-content: flex-start;
-}
-ul.links-uix-hover { flex-grow: 1; }
-ul.links-uix-hover li { margin: 0; padding: 0; }
-ul.links-uix-hover a {
-  display: block;
-  padding: 8px 1.2em;
-  border-bottom: none;
-}
-ul.links-uix-hover a:hover, ul.links-uix-hover a:focus {
-  background: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
-}
-ul.links-uix-hover img {
-  display: block;
-  position: absolute;
-  top: 0; </xsl:text><xsl:value-of select="$left"/><xsl:text>: 0;
-  visibility: hidden;
-  opacity: 0.0;
-  transition: opacity 0.6s, visibility 0.6s;
-}
-ul.links-uix-hover a:hover img, ul.links-uix-hover a:focus img {
-  visibility: visible;
-  opacity: 1.0;
-  transition: opacity 0.2s, visibility 0.2s;
-}
-@media only screen and (max-width: 480px) {
-  div.links-uix-hover-img { display: none; }
-  ul.links-uix-hover img { display: none; }
-  ul.links-uix-hover li {
-    margin-left: -10px; margin-right: -10px;
-  }
-  ul.links-uix-hover li a {
-    padding: 10px;
-  }
-}
-
-<!-- uix:overlay -->
-div.ui-overlay-screen {
-  position: fixed;
-  margin: 0;
-  left: 0; top: 0;
-  width: 100%; height: 100%;
-  background: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  animation-name: yelp-overlay-screen;
-  animation-duration: 0.8s;
-  animation-fill-mode: forwards;
-}
-@keyframes yelp-overlay-screen {
-  from { opacity: 0.0; }
-  to   { opacity: 0.6; }
-}
-div.ui-overlay {
-  display: none;
-  position: fixed;
-  text-align: center;
-  top: 30px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
-}
-div.ui-overlay-show {
-  animation-name: yelp-overlay-slide;
-  animation-duration: 0.8s;
-  animation-fill-mode: forwards;
-}
-@keyframes yelp-overlay-slide {
-  from { transform: translateY(-400px) translateX(-50%); }
-  to   { transform: translateY(0) translateX(-50%); }
-}
-div.ui-overlay > div.inner {
-  display: inline-block;
-  padding: 8px;
-  background-color: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
-  border-radius: 4px;
-  text-align: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
-}
-div.ui-overlay img, div.ui-overlay video {
-  max-height: 80vh;
-  max-width: 90vw;
-}
-div.ui-overlay > div.inner > div.title { margin-top: -4px; }
-a.ui-overlay-close {
-  display: block;
-  float: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
-  width: 30px; height: 30px;
-  font-size: 22px; line-height: 30px;
-  font-weight: bold;
-  margin-top: -28px;
-  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: -26px;
-  padding: 1px 2px 3px 2px;
-  text-align: center;
-  border: none;
-  border-radius: 50%;
-  background-color: </xsl:text><xsl:value-of select="$color.blue"/><xsl:text>;
-  color: </xsl:text><xsl:value-of select="$color.bg"/><xsl:text>;
-}
-div.links-tiles {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: stretch;
-  justify-content: stretch;
-  vertical-align: top;
-  clear: both;
-  margin: 0 -10px;
-}
-div.links-tile {
-  max-width: 300px;
-  flex: 1 0 300px;
-  vertical-align: top;
-  margin: 0;
-  padding: 10px;
-}
-div.links-tiles > div.links-tile { max-width: none; }
-div.links-tile:empty { padding: 0 10px; height: 0; }
-div.links-tile > a {
-  display: block;
-  vertical-align: top;
-  padding: 10px;
-  border-radius: 4px;
-  border: none;
-}
-div.links-tile > a:hover {
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.blue"/><xsl:text>;
-}
-div.links-tile > a > span.links-tile-img {
-  display: block;
-  text-align: center;
-}
-div.links-tile > a > span.links-tile-img > img {
-  width: 100%;
-  border-radius: 3px;
-}
-div.links-tile > a > span.links-tile-text > span.title {
-  display: block;
-  font-weight: bold;
-}
-div.links-tile > a > span.links-tile-text > * + span.title {
-  margin-top: 0.5em;
-}
-div.links-tile > a > span.links-tile-text > span.desc {
-  display: block;
-  margin: 0.2em 0 0 0;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-
-<!-- links/@style = 'grid' -->
-div.links-grid-container {
-  margin-left: -10px;
-  margin-right: -10px;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: stretch;
-  justify-content: flex-start;
-  vertical-align: top;
-  clear: both;
-}
-div.links-grid {
-  flex: 1 0 300px;
-  padding: 10px;
-}
-div.links-grid:empty { padding: 0 10px; height: 0; }
-div.links-grid-link { font-weight: bold; }
-div.links-grid > div.desc {
-  margin: 0.2em 0 0 0;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-
-<!-- FIXME -->
-<!-- links/@style = 'norwich' -->
-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.bg.blue"/><xsl:text>;
-  background: radial-gradient(ellipse 800px 1200px at 100% 20px, </xsl:text>
-    <xsl:value-of select="$color.bg.blue"/><xsl:text>, </xsl:text>
-    <xsl:value-of select="$color.blue"/><xsl:text>);
-  margin: 0 20px 20px 0;
-}
-div.links-norwich-big + div.links-norwich-big {
-  background: </xsl:text><xsl:value-of select="$color.bg.yellow"/><xsl:text>;
-  background: radial-gradient(ellipse 800px 1200px at 100% 20px, </xsl:text>
-    <xsl:value-of select="$color.bg.yellow"/><xsl:text>, </xsl:text>
-    <xsl:value-of select="$color.yellow"/><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.fg"/><xsl:text>;
-  border: solid 1px </xsl:text><xsl:value-of select="$color.blue"/><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"/><xsl:text>;
-  box-shadow: 2px 2px 2px </xsl:text><xsl:value-of select="$color.blue"/><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.fg"/><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.bg.gray"/><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.fg"/><xsl:text>;
-  border: solid 1px </xsl:text><xsl:value-of select="$color.gray"/><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"/><xsl:text>;
-  box-shadow: 2px 2px 2px </xsl:text><xsl:value-of select="$color.blue"/><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;
-  }
-}
-
-<!-- links/@type = 'topic' and @style = '2column' -->
-div.links-divs {
-  margin-left: -10px;
-  margin-right: -10px;
-}
-a.linkdiv {
-  display: block;
-  margin: 0;
-  padding: 10px;
-  border-bottom: none;
-}
-a.linkdiv:hover {
-  text-decoration: none;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.blue"/><xsl:text>;
-}
-a.linkdiv > span.title {
-  display: block;
-  margin: 0;
-  font-size: 1em;
-  font-weight: bold;
-  color: inherit;
-}
-a.linkdiv > span.desc {
-  display: block;
-  margin: 0.2em 0 0 0;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-span.linkdiv-dash { display: none; }
-div.links-twocolumn {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: stretch;
-  justify-content: flex-start;
-  vertical-align: top;
-  margin-left: -10px;
-  margin-right: -10px;
-}
-div.links-twocolumn > div.links-divs {
-  flex: 1 0 320px;
-  vertical-align: top;
-  margin: 0;
-}
-
-<!-- FIXME -->
-div.comment {
-  padding: 0.5em;
-  border: solid 2px </xsl:text>
-    <xsl:value-of select="$color.red"/><xsl:text>;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.red"/><xsl:text>;
-}
-div.comment div.comment {
-  margin: 1em 1em 0 1em;
-}
-div.comment div.cite {
-  margin: 0 0 0.5em 0;
-  font-style: italic;
-}
-
-<!-- FIXME -->
-div.tree > div.inner > div.title { margin-bottom: 0.5em; }
-ul.tree {
-  margin: 0; padding: 0;
-  list-style-type: none;
-}
-li.tree { margin: -2px 0 0 0; padding: 0; }
-li.tree div { margin: 0; padding: 0; }
-ul.tree ul.tree {
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1.44em;
-}
-div.tree-lines ul.tree { margin-left: 0; }
-
-<!-- FIXME -->
-span.hi {
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
-}
-span.hi.hi-ins {
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.green"/><xsl:text>;
-}
-span.hi.hi-del {
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.red"/><xsl:text>;
-  text-decoration: line-through;
-}
-span.hi.hi-ins ins { text-decoration: none; }
-span.hi.hi-del del { text-decoration: none; }
-span.hi.hi-red { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.red"/><xsl:text>; }
-span.hi.hi-orange { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.orange"/><xsl:text>; }
-span.hi.hi-yellow { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.yellow"/><xsl:text>; }
-span.hi.hi-green { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.green"/><xsl:text>; }
-span.hi.hi-blue { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.blue"/><xsl:text>; }
-span.hi.hi-purple { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.purple"/><xsl:text>; }
-span.hi.hi-gray { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.gray"/><xsl:text>; }
-
-<!-- experimental/gloss -->
-dt.gloss-term {
-  margin-top: 1.2em;
-  font-weight: bold;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-dt.gloss-term:first-child, dt.gloss-term + dt.gloss-term { margin-top: 0; }
-dt.gloss-term + dd { margin-top: 0.2em; }
-dd.gloss-link {
-  margin: 0 0.2em 0 0.2em;
-  border-</xsl:text><xsl:value-of select="$left"/><xsl:text>: solid 4px </xsl:text>
-    <xsl:value-of select="$color.blue"/><xsl:text>;
-  padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
-}
-dd.gloss-def {
-  margin: 0 0.2em 1em 0.2em;
-  border-</xsl:text><xsl:value-of select="$left"/><xsl:text>: solid 4px </xsl:text>
-    <xsl:value-of select="$color.gray"/><xsl:text>;
-  padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
-}
-a.gloss-term {
-  position: relative;
-  border-bottom: dashed 1px </xsl:text>
-    <xsl:value-of select="$color.blue"/><xsl:text>;
-}
-a.gloss-term:hover {
-  text-decoration: none;
-  border-bottom-style: solid;
-}
-span.gloss-desc {
-  display: none;
-  position: absolute;
-  z-index: 100;
-  margin: 0;
-  </xsl:text><xsl:value-of select="$left"/><xsl:text>: 0;
-  top: 1.2em;
-  padding: 0.2em 0.5em 0.2em 0.5em;
-  min-width: 12em;
-  max-width: 24em;
-  overflow: hidden;
-  color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
-  border: solid 1px </xsl:text>
-    <xsl:value-of select="$color.yellow"/><xsl:text>;
-  box-shadow: 2px 2px 4px </xsl:text>
-    <xsl:value-of select="$color.gray"/><xsl:text>;
-}
-a.gloss-term:hover span.gloss-desc, a.gloss-term:focus span.gloss-desc {
-  display: inline-block;
-  animation-name: yelp-gloss-fade;
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-}
-@keyframes yelp-gloss-fade {
-  from { opacity: 0.0; }
-  to   { opacity: 1.0; }
-}
-
-<!-- conditional processing -->
-.if-if { display: none; }
-.if-choose, .if-when, .if-else { margin: 0; padding: 0; }
-.if-choose > .if-when { display: none; }
-.if-choose > .if-else { display: block; }
-.if-if.if__not-target-mobile { display: block; }
-.if-choose.if__not-target-mobile > .if-when { display: block; }
-.if-choose.if__not-target-mobile > .if-else { display: none; }
-@media only screen and (max-width: 480px) {
-  .if-if.if__target-mobile { display: block; }
-  .if-if.if__not-target-mobile { display: none; }
-  .if-choose.if__target-mobile > .if-when { display: block; }
-  .if-choose.if__target-mobile > .if-else { display: none; }
-  .if-choose.if__not-target-mobile > .if-when { display: none; }
-  .if-choose.if__not-target-mobile > .if-else { display: block; }
-}
-</xsl:text>
-<xsl:if test="$mal2html.editor_mode">
-<xsl:text>
-div.note-version {
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-span.status {
-  font-size: 0.83em;
-  font-weight: normal;
-  padding-left: 0.2em;
-  padding-right: 0.2em;
-  color: </xsl:text>
-    <xsl:value-of select="$color.fg.dark"/><xsl:text>;
-  border: solid 1px </xsl:text>
-    <xsl:value-of select="$color.red"/><xsl:text>;
-  background-color: </xsl:text>
-    <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
-}
-span.status-stub, span.status-draft, span.status-incomplete, span.status-outdated { background-color: </xsl:text>
-  <xsl:value-of select="$color.bg.red"/><xsl:text>; }
-</xsl:text>
-</xsl:if>
+  <xsl:call-template name="tmpl.file">
+    <xsl:with-param name="file" select="'css/mallard.css.tmpl'"/>
+    <xsl:with-param name="node" select="."/>
+    <xsl:with-param name="direction" select="$direction"/>
+    <xsl:with-param name="left" select="$left"/>
+    <xsl:with-param name="right" select="$right"/>
+  </xsl:call-template>
+  <xsl:if test="$mal2html.editor_mode">
+    <xsl:call-template name="tmpl.file">
+      <xsl:with-param name="file" select="'css/mallard-editor.css.tmpl'"/>
+      <xsl:with-param name="node" select="."/>
+      <xsl:with-param name="direction" select="$direction"/>
+      <xsl:with-param name="left" select="$left"/>
+      <xsl:with-param name="right" select="$right"/>
+    </xsl:call-template>
+  </xsl:if>
 </xsl:template>
 
 <!--%# html.js.mode -->