Underhåll Pågår

index.html

  <div class="site-wrapper">
    <div class="site-wrapper-inner">
      <div class="cover-container">
        <div class="inner cover">
          <p class="lead">
              <img src="http://www.sitedirect.se/20.0.0.0/855/23a48da01b27752fc8fe3a5aa73c453e.svg" />
          </p>
          
          <p class="lead">JIRA, som hanterar våra supportärenden och kundprojekt, är just nu nere för underhåll. </p>
          <p class="lead">Vi räknar med att vara på banan kl. 7 igen!</p>
          <p class="lead">Tack för ditt tålamod!</p>
        </div>
        <div class="mastfoot">
        </div>
      </div>
    </div>
  </div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/*
   * Globals
   */

  /* Links */
  a,
  a:focus,
  a:hover {
    color: #fff;
  }

  /* Custom default button */
  .btn-secondary,
  .btn-secondary:hover,
  .btn-secondary:focus {
    color: #333;
    text-shadow: none; /* Prevent inheritance from `body` */
    background-color: #fff;
    border: .05rem solid #fff;
  }


  /*
   * Base structure
   */

  html,
  body {
    height: 100%;
    background: #333;
  }
  body {
    color: #fff;
    text-align: center;
    text-shadow: 0 .05rem .1rem rgba(0,0,0,.5);
  }

  /* Extra markup and styles for table-esque vertical and horizontal centering */
  .site-wrapper {
    display: table;
    width: 100%;
    height: 100%; /* For at least Firefox */
    min-height: 100%;
    -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
            box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
  }
  .site-wrapper-inner {
    display: table-cell;
    vertical-align: top;
  }
  .cover-container {
    margin-right: auto;
    margin-left: auto;
    width: 100% !important;
  }

  /* Padding for spacing */
  .inner {
    padding: 2rem;
  }


  /*
   * Header
   */

  .masthead {
    margin-bottom: 2rem;
  }

  .masthead-brand {
    margin-bottom: 0;
  }

  /*
   * Cover
   */

  .cover {
    padding: 0 1.5rem;
  }



  /*
   * Footer
   */

  .mastfoot {
    color: rgba(255,255,255,.5);
  }


  /*
   * Affix and center
   */

  @media (min-width: 40em) {
    /* Pull out the header and footer */
    .masthead {
      position: fixed;
      top: 0;
    }
    .mastfoot {
      position: fixed;
      bottom: 0;
    }
    /* Start the vertical centering */
    .site-wrapper-inner {
      vertical-align: middle;
    }
    /* Handle the widths */
    .masthead,
    .mastfoot,
    .cover-container {
      width: 100%; /* Must be percentage or pixels for horizontal alignment */
    }
  }

  @media (min-width: 62em) {
    .masthead,
    .mastfoot,
    .cover-container {
      width: 42rem;
    }
  }

.cover-heading,
p.lead{
  font-family: 'Open Sans', sans-serif;
/*  font-variant: small-caps;*/
  width: 100%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:700,300,600,400,300" rel="stylesheet" />

underhall-pagar.markdown

Underhåll Pågår

Maintenance mode is active which means that the site has been taken down so work such as site updates or hosting updates can be done.

A Pen by Jonas Erlandsson on CodePen.

License.