#!/bin/bash

cat <<HEADER
<style>
  .header-title {
    font-size: 1.8rem;
    text-align: left;
    line-break: anywhere;
  }

  .mobile { display: none; }

  @media screen and (max-width: 769px) {
    .mobile { display: block; }
    .desktop { display: none; }

    .header-title {
      font-size: 1.2rem;
    }
  }
</style>

<script type="text/javascript">
  let mobileText = '${HEADER_TITLE_MOBILE//\\/\\\\}';
  let desktopText = '${HEADER_TITLE//\\/\\\\}';
</script>
<script type="text/javascript" src="/static/header.js"></script>
<script type="text/javascript" src="/static/navigator.js"></script>

<header id="top-header">
  <h1 id="header-title" class="desktop header-title">
    $ <span class="text">${HEADER_TITLE//;/<br\/>$&ensp;}<br/></span>
  </h1>
  <h1 id="header-title-mobile" class="mobile header-title">
    $ <span class="text">${HEADER_TITLE_MOBILE//;/<br\/>$&ensp;}<br/></span>
  </h1>
</header>
HEADER