Get the most out of your Centmin Mod LEMP stack
Become a Member

Maintenance Page Update

Discussion in 'Feature Requests & Suggestions' started by Jimmy, May 12, 2017.

  1. Jimmy

    Jimmy Well-Known Member

    1,788
    390
    83
    Oct 24, 2015
    East Coast USA
    Ratings:
    +990
    Local Time:
    5:24 PM
    Updated with some CDN references.
    Integrated font-awesome.
    Integrated google fonts.
    (changed some colors for my use)


    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <script src="https://use.fontawesome.com/a2089a23b5.js"></script>
        <title>Site Maintenance</title>
    
        <style type="text/css">
            @import url('https://fonts.googleapis.com/css?family=Roboto');
            body {
                background: #212327;
                color: #D7D7D7;
                font: 16px/1.3 "Roboto", sans-serif;
            }
            header {
                width: 100%;
                margin:0px auto;
            }
            h1 {
                text-align: center;
                color:#D7D7D7;
                font: 30px/1 "Roboto";
                text-transform: uppercase;
                display: block;
                margin: 5% auto 5%;
                margin-bottom: 35px;
            }
            p {
                font: 12px/1.3 "Roboto", sans-serif;
            }
    
            article { display: block; text-align: center; width: 650px; margin: 10px auto; }
    
            @media screen and (max-width: 720px) {
                article { display: block; text-align: center; width: 450px; margin: 0 auto; }
                h1 { font: 25px/1 "Roboto"; margin-bottom: 25px; }
            }
    
            @media screen and (max-width: 480px) {
                article { display: block; text-align: center; width: 300px !important; margin: 0 auto; }
                h1 { font: 20px/1 "Roboto"; margin-bottom: 15px;}
            }
        </style>
    
        <!--[if IE]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    </head>
    <body>
    <div class="wrap">
        <article>
            <header>
                <h1 id="fittext1">Site Maintenance</h1>
            </header>
            <p id="fittext2">Performing some site maintenance. Will be back shortly!</p>
            <i class="fa fa-cog fa-spin fa-5x fa-fw"></i>
        </article>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.js"></script>
    <script type="text/javascript">
        $("#fittext1").fitText(1.2);
        $("#fittext2").fitText(1.7);
    </script>
    </body>
    </html>
     
  2. pamamolf

    pamamolf Premium Member Premium Member

    4,084
    428
    83
    May 31, 2014
    Ratings:
    +834
    Local Time:
    12:24 AM
    Nginx-1.25.x
    MariaDB 10.3.x
    Post also a screenshot :)
     
  3. Jimmy

    Jimmy Well-Known Member

    1,788
    390
    83
    Oct 24, 2015
    East Coast USA
    Ratings:
    +990
    Local Time:
    5:24 PM
    The gear rotates. ;)

    Screenshot from 2017-05-11 20-19-05.png
     
  4. eva2000

    eva2000 Administrator Staff Member

    54,519
    12,211
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,780
    Local Time:
    8:24 AM
    Nginx 1.27.x
    MariaDB 10.x/11.4+