diff options
Diffstat (limited to 'docs/4.0/examples/cover')
| -rw-r--r-- | docs/4.0/examples/cover/cover.css | 66 | ||||
| -rw-r--r-- | docs/4.0/examples/cover/index.html | 63 |
2 files changed, 37 insertions, 92 deletions
diff --git a/docs/4.0/examples/cover/cover.css b/docs/4.0/examples/cover/cover.css index 1783756e7..ebf135f5c 100644 --- a/docs/4.0/examples/cover/cover.css +++ b/docs/4.0/examples/cover/cover.css @@ -23,37 +23,27 @@ a:hover { /* * Base structure */ + html, body { height: 100%; background-color: #333; } + body { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; 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%; 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; -} -/* Padding for spacing */ -.inner { - padding: 2rem; +.cover-container { + max-width: 42em; } @@ -118,39 +108,3 @@ body { .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; - } -} diff --git a/docs/4.0/examples/cover/index.html b/docs/4.0/examples/cover/index.html index 36035e84f..c19352fbc 100644 --- a/docs/4.0/examples/cover/index.html +++ b/docs/4.0/examples/cover/index.html @@ -16,45 +16,36 @@ <link href="cover.css" rel="stylesheet"> </head> - <body> - - <div class="site-wrapper"> - - <div class="site-wrapper-inner"> - - <div class="cover-container"> - - <header class="masthead clearfix"> - <div class="inner"> - <h3 class="masthead-brand">Cover</h3> - <nav class="nav nav-masthead"> - <a class="nav-link active" href="#">Home</a> - <a class="nav-link" href="#">Features</a> - <a class="nav-link" href="#">Contact</a> - </nav> - </div> - </header> - - <main role="main" class="inner cover"> - <h1 class="cover-heading">Cover your page.</h1> - <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p> - <p class="lead"> - <a href="#" class="btn btn-lg btn-secondary">Learn more</a> - </p> - </main> - - <footer class="mastfoot"> - <div class="inner"> - <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> - </div> - </footer> - + <body class="text-center"> + + <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> + <header class="masthead mb-auto"> + <div class="inner"> + <h3 class="masthead-brand">Cover</h3> + <nav class="nav nav-masthead justify-content-center"> + <a class="nav-link active" href="#">Home</a> + <a class="nav-link" href="#">Features</a> + <a class="nav-link" href="#">Contact</a> + </nav> </div> - - </div> - + </header> + + <main role="main" class="inner cover"> + <h1 class="cover-heading">Cover your page.</h1> + <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p> + <p class="lead"> + <a href="#" class="btn btn-lg btn-secondary">Learn more</a> + </p> + </main> + + <footer class="mastfoot mt-auto"> + <div class="inner"> + <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> + </div> + </footer> </div> + <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> |