Difference between revisions of "Team:Stanford-Brown/css/custom"
Forrestgtran (Talk | contribs) |
Forrestgtran (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | + | <html> | |
+ | <style> | ||
+ | /* Fixing previously installed css */ | ||
+ | |||
+ | .firstHeading { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #content { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border: 0px; | ||
+ | background-color: transparent; | ||
+ | margin: 0px; | ||
+ | margin-top: -48px; | ||
+ | padding: 0px; | ||
+ | line-height: normal; | ||
+ | } | ||
+ | |||
+ | li { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | ul.nav { | ||
+ | line-height: inherit; | ||
+ | list-style-type: none; | ||
+ | margin: 0 0 0 0; | ||
+ | padding: 0; | ||
+ | list-style-image: none; | ||
+ | } | ||
p { | p { | ||
− | + | margin: 0 0 0 0; | |
} | } | ||
− | + | /* GLOBAL STYLES | |
− | + | -------------------------------------------------- */ | |
+ | /* Padding below the footer and lighter body text */ | ||
+ | |||
+ | body { | ||
+ | color: #5a5a5a; | ||
} | } | ||
− | /*------- | + | /* CUSTOMIZE THE NAVBAR |
+ | -------------------------------------------------- */ | ||
+ | /* Special class on .container surrounding .navbar, used for positioning it into place. */ | ||
+ | .navbar-wrapper { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | left: 0; | ||
+ | z-index: 20; | ||
+ | } | ||
.navbar { | .navbar { | ||
− | margin-top: | + | margin-top: 20; |
+ | } | ||
+ | /* Flip around the padding for proper display in narrow viewports */ | ||
+ | .navbar-wrapper > .container { | ||
+ | padding-right: 0; | ||
+ | padding-left: 0; | ||
+ | } | ||
+ | .navbar-wrapper .navbar { | ||
+ | padding-right: 15px; | ||
+ | padding-left: 15px; | ||
+ | } | ||
+ | .navbar-wrapper .navbar .container { | ||
+ | width: auto; | ||
} | } | ||
− | |||
− | . | + | /* CUSTOMIZE THE CAROUSEL |
− | + | -------------------------------------------------- */ | |
+ | |||
+ | /* Carousel base class */ | ||
+ | .carousel { | ||
+ | height: 500px; | ||
+ | margin-bottom: 60px; | ||
+ | } | ||
+ | /* Since positioning the image, we need to help out the caption */ | ||
+ | .carousel-caption { | ||
+ | z-index: 10; | ||
} | } | ||
− | /* | + | /* Declare heights because of positioning of img element */ |
− | + | .carousel .item { | |
− | . | + | height: 500px; |
− | + | background-color: #777; | |
+ | } | ||
+ | .carousel-inner > .item > img { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | min-width: 100%; | ||
+ | height: 500px; | ||
} | } | ||
− | |||
− | + | /* MARKETING CONTENT | |
− | + | -------------------------------------------------- */ | |
− | + | ||
+ | /* Center align the text within the three columns below the carousel */ | ||
+ | .marketing .col-sm-4 { | ||
+ | margin-bottom: 20px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .marketing h2 { | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | .marketing .col-sm-4 p { | ||
+ | margin-right: 10px; | ||
+ | margin-left: 10px; | ||
} | } | ||
+ | .marketing .col-sm-3 { | ||
+ | margin-bottom: 20px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .marketing h2 { | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | .marketing .col-sm-3 p { | ||
+ | margin-right: 10px; | ||
+ | margin-left: 10px; | ||
+ | } | ||
− | |||
− | . | + | /* Featurettes |
− | + | ------------------------- */ | |
+ | |||
+ | .featurette-divider { | ||
+ | margin: 80px 0; /* Space out the Bootstrap <hr> more */ | ||
} | } | ||
− | . | + | /* Thin out the marketing headings */ |
− | + | .featurette-heading { | |
− | + | font-weight: 300; | |
+ | line-height: 1; | ||
+ | letter-spacing: -1px; | ||
+ | } | ||
+ | |||
+ | /* Footer | ||
+ | --------------------------------*/ | ||
+ | |||
+ | /*footer { | ||
+ | background: #333; | ||
+ | color: #eee; | ||
+ | font-size: 11px; | ||
+ | padding: 20px; | ||
+ | }*/ | ||
+ | |||
+ | /* RESPONSIVE CSS | ||
+ | -------------------------------------------------- */ | ||
+ | |||
+ | @media (min-width: 768px) { | ||
+ | /* Navbar positioning foo */ | ||
+ | .navbar-wrapper { | ||
+ | margin-top: 20px; | ||
+ | } | ||
+ | .navbar-wrapper .container { | ||
+ | padding-right: 15px; | ||
+ | padding-left: 15px; | ||
+ | } | ||
+ | .navbar-wrapper .navbar { | ||
+ | padding-right: 0; | ||
+ | padding-left: 0; | ||
+ | } | ||
+ | |||
+ | /* The navbar becomes detached from the top, so we round the corners */ | ||
+ | .navbar-wrapper .navbar { | ||
+ | border-radius: 4px; | ||
+ | } | ||
+ | |||
+ | /* Bump up size of carousel content */ | ||
+ | .carousel-caption p { | ||
+ | margin-bottom: 20px; | ||
+ | font-size: 21px; | ||
+ | line-height: 1.4; | ||
+ | } | ||
+ | |||
+ | .featurette-heading { | ||
+ | font-size: 50px; | ||
+ | } | ||
} | } | ||
− | + | @media (min-width: 992px) { | |
− | + | .featurette-heading { | |
− | + | margin-top: 120px; | |
− | + | } | |
} | } | ||
+ | |||
+ | </style> | ||
+ | </html> |
Revision as of 18:36, 21 August 2015