Last active
September 7, 2017 03:22
-
-
Save codeHusky/2fa5d3c61e95c274d76c75fb88d64ed4 to your computer and use it in GitHub Desktop.
cx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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-color: #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; | |
} | |
/* Padding for spacing */ | |
.inner { | |
padding: 2rem; | |
} | |
/* | |
* Header | |
*/ | |
.masthead { | |
margin-bottom: 2rem; | |
} | |
.masthead-brand { | |
margin-bottom: 0; | |
} | |
.nav-masthead .nav-link { | |
padding: .25rem 0; | |
font-weight: bold; | |
color: rgba(255,255,255,.5); | |
background-color: transparent; | |
border-bottom: .25rem solid transparent; | |
} | |
.nav-masthead .nav-link:hover, | |
.nav-masthead .nav-link:focus { | |
border-bottom-color: rgba(255,255,255,.25); | |
} | |
.nav-masthead .nav-link + .nav-link { | |
margin-left: 1rem; | |
} | |
.nav-masthead .active { | |
color: #fff; | |
border-bottom-color: #fff; | |
} | |
/* | |
* Cover | |
*/ | |
.cover { | |
padding: 0 1.5rem; | |
} | |
.cover .btn-lg { | |
padding: .75rem 1.25rem; | |
font-weight: bold; | |
} | |
/* | |
* 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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment