Created
April 18, 2013 15:14
-
-
Save olih/5413530 to your computer and use it in GitHub Desktop.
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
/* GLOBAL STYLES | |
-------------------------------------------------- */ | |
/* Padding below the footer and lighter body text */ | |
body { | |
padding-bottom: 40px; | |
color: #5a5a5a; | |
} | |
/* CUSTOMIZE THE NAVBAR | |
-------------------------------------------------- */ | |
/* Special class on .container surrounding .navbar, used for positioning it into place. */ | |
.navbar-wrapper { | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
z-index: 10; | |
margin-top: 20px; | |
} | |
.navbar-wrapper .navbar { | |
} | |
/* Remove border and change up box shadow for more contrast */ | |
.navbar .navbar-inner { | |
border: 0; | |
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); | |
-moz-box-shadow: 0 2px 10px rgba(0,0,0,.25); | |
box-shadow: 0 2px 10px rgba(0,0,0,.25); | |
} | |
/* Downsize the brand/project name a bit */ | |
.navbar .brand { | |
padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */ | |
font-size: 16px; | |
font-weight: bold; | |
text-shadow: 0 -1px 0 rgba(0,0,0,.5); | |
} | |
/* Navbar links: increase padding for taller navbar */ | |
.navbar .nav > li > a { | |
padding: 15px 20px; | |
} | |
/* Offset the responsive button for proper vertical alignment */ | |
.navbar .btn-navbar { | |
margin-top: 10px; | |
} | |
/* MARKETING CONTENT | |
-------------------------------------------------- */ | |
/* Center align the text within the three columns below the carousel */ | |
.marketing .span4 { | |
text-align: center; | |
} | |
.marketing h2 { | |
font-weight: normal; | |
} | |
.marketing .span4 p { | |
margin-left: 10px; | |
margin-right: 10px; | |
} | |
/* Featurettes | |
------------------------- */ | |
.featurette-divider { | |
margin: 80px 0; /* Space out the Bootstrap <hr> more */ | |
} | |
.featurette { | |
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */ | |
overflow: hidden; /* Vertically center images part 2: clear their floats. */ | |
} | |
.featurette-image { | |
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */ | |
} | |
/* Give some space on the sides of the floated elements so text doesn't run right into it. */ | |
.featurette-image.pull-left { | |
margin-right: 40px; | |
} | |
.featurette-image.pull-right { | |
margin-left: 40px; | |
} | |
/* Thin out the marketing headings */ | |
.featurette-heading { | |
font-size: 50px; | |
font-weight: 300; | |
line-height: 1; | |
letter-spacing: -1px; | |
} | |
/* RESPONSIVE CSS | |
-------------------------------------------------- */ | |
@media (max-width: 979px) { | |
.container.navbar-wrapper { | |
margin-bottom: 0; | |
width: auto; | |
} | |
.navbar-inner { | |
border-radius: 0; | |
margin: -20px 0; | |
} | |
.featurette { | |
height: auto; | |
padding: 0; | |
} | |
.featurette-image.pull-left, | |
.featurette-image.pull-right { | |
display: block; | |
float: none; | |
max-width: 40%; | |
margin: 0 auto 20px; | |
} | |
} | |
@media (max-width: 767px) { | |
.navbar-inner { | |
margin: -20px; | |
} | |
.marketing .span4 + .span4 { | |
margin-top: 40px; | |
} | |
.featurette-heading { | |
font-size: 30px; | |
} | |
.featurette .lead { | |
font-size: 18px; | |
line-height: 1.5; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment