Use text templates for Mallard CSS

1 files changed, 493 insertions, 0 deletions

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>