Skip to content

Instantly share code, notes, and snippets.

@rockymontana
Last active September 13, 2017 21:20
Show Gist options
  • Save rockymontana/809145f6384504ed0f3fdc10b9176799 to your computer and use it in GitHub Desktop.
Save rockymontana/809145f6384504ed0f3fdc10b9176799 to your computer and use it in GitHub Desktop.
Underhåll Pågår
<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>
<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>
@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%;
}
<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" />

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment