breath-web-app/docs/lib/app-about.html

A Web & Mobile App to help you focus on and calm your breathing.

<!--doctype html-->

<style>
.app-about--close .app-about {
  height: 1px;
  min-height: 0;
}

.app-about--end .app-about {
  display: none;
}

.app-about {
  background: #e8e8e8;
  border-top: 3px solid black;
  color: #333;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  position: absolute;

  overflow: hidden;
  min-height: 4rem;
  transition: all 1s;
}

.app-about a {
  color: navy;
}

.app-about h1 {
  font-size: calc(var(--zoom) * 1.5rem);
  word-spacing: -.1rem;
  transition: font-size 1s;
}

.app-about h1,
.app-about p {
  font-weight: normal;
  margin: 0 0 1rem;
  margin: 0 0 calc(var(--zoom) * .6rem);
}

.app-about sup {
  color: gray;
  font-style: italic;
  word-spacing: -.3rem;
}

.app-about > div {
  max-width: 38rem;
  margin: 1rem auto;
  padding: 0 1rem;
  padding: 0 calc(var(--zoom) * .6rem);
}

.app-about .close-btn {
  background: #d8d8d8;
  border: 2px solid #888;
  border-radius: 50%;
  color: #222;
  cursor: pointer;
  float: right;
  font-size: 2.5rem;
  line-height: .8;
  margin: 1rem;
  height: 3.6rem;
  width: 3.6rem;

  padding-bottom: .3rem;
}

.app-about .close-btn:hover,
.app-about .close-btn:focus {
  background: #fff;
}
</style>


<aside class="app-about">

  <button
    class="close-btn"
    type="button"
    title="&#10; CLOSE &#10;"
    onclick="appAboutClose(event);"
    >&times;</button>

  <div>
    <h1> Breath Web App<sup> beta</sup> </h1>

    <p>
      <a href="https://github.com/nfreear/breath#readme"
         target="_blank" rel="noopener"
         title="&#10; Opens in a new window &#10;">Find out more</a>
      |
      &copy; Nick Freear
      |
      License:
      <a href="https://github.com/nfreear/breath#license"
         target="_blank" rel="noopener"
         title="&#10; Opens in a new window &#10;">GPL</a> </p>
  </div>

</aside>