public/maint.html from sudara/alonetone

public/maint.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>alonetone is down for maintenance</title>

  <style type="text/css">

    @font-face {
      font-family: 'Alright-v2-Normal';
      src: url('https://cdn.alonetone.com/fonts/Alright-v2-Normal-Bold-latin1-tnum.woff2') format('woff2');
      font-weight: bold;
    }

    html {
      height: 100%;
    }

    body {
      background-color: #151414;
      margin:0;
      padding:0;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    div#image_container {
      width: 100%;
      height: calc(100vh - 130px);
    }

    div#image_container.narrow {
      height: auto;
    }

    img#image {
      height: 100%;
      display: block;
      margin: 0 auto;
    }

    img#image.narrow {
      height: auto;
      width: 100%;
    }

    div#message {
      width: 100%;
      height: 130px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;
      background-color: #353535;
    }

    div#message.narrow {
      height: 100%;
      padding-top: 30px;
      padding-bottom: 30px;
      justify-content: flex-start;;
    }

    h1, h2 {
      text-align:center;
      font-family: "Alright-v2-Normal";
      padding: 0 3%;
      margin-top: 0;
      margin-bottom: 0;
    }

    h1 {
      color: #E6E8E8;
    }

    h2 {
      font-size: 21px;
      margin-top: 4px;
      color: #949797;
    }

    div#message.narrow h1 {
      font-size: 24px;
    }

    div#message.narrow h2 {
      font-size: 18px;
    }

  </style>
</head>

<body>
  <div id="image_container">
    <img id="image" src="/images/502.png" alt="">
  </div>
  <div id="message">
    <h1>alonetone is down for maintenance</h1>
    <h2>We probably took the site down on purpose! It should be back up shortly...</h2>
  </div>
<script>

  const viewportResized = function () {
    let image_container = document.getElementById("image_container")
    let image = document.getElementById("image")
    let message = document.getElementById("message")

    if ((window.innerHeight / window.innerWidth) > 1.2) {
      image_container.classList.add('narrow')
      image.classList.add('narrow')
      message.classList.add('narrow')
    } else {
      image_container.classList.remove('narrow')
      image.classList.remove('narrow')
      message.classList.remove('narrow')
    }
    message.setAttribute("style","width:" + image_container.clientHeight * (1917/1624) + "px");
  }

  viewportResized()

  window.addEventListener('resize', function () {
    viewportResized()
  }, false)
</script>

</body>
</html>