Difference between revisions of "Team:British Columbia/Test/Custom CSS"
Line 65: | Line 65: | ||
font-size: 60px; | font-size: 60px; | ||
} | } | ||
+ | |||
+ | /* GLOBAL STYLES | ||
+ | -------------------------------------------------- */ | ||
+ | /* Padding below the footer and lighter body text */ | ||
+ | |||
+ | body { | ||
+ | padding-top: 48px; | ||
+ | padding-bottom: 40px; | ||
+ | color: #5a5a5a; | ||
+ | } | ||
+ | |||
+ | /* CUSTOMIZE THE NAVBAR | ||
+ | -------------------------------------------------- */ | ||
+ | |||
+ | /* Special class on .container surrounding .navbar, used for positioning it into place. */ | ||
+ | .navbar { | ||
+ | margin-top: 16px; | ||
+ | } | ||
+ | |||
+ | /* CUSTOMIZE THE CAROUSEL | ||
+ | -------------------------------------------------- */ | ||
+ | |||
+ | /* Carousel base class */ | ||
+ | .carousel { | ||
+ | height: 500px; | ||
+ | margin-bottom: 60px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | /* 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: #FFFFFF; | ||
+ | } | ||
+ | .carousel-inner > .item > img { | ||
+ | min-width: auto%; | ||
+ | height: 500px; | ||
+ | |||
+ | |||
+ | /* control colour */ | ||
+ | .carousel-control { | ||
+ | color: #000000; | ||
+ | |||
+ | } | ||
+ | |||
+ | /* MARKETING CONTENT | ||
+ | -------------------------------------------------- */ | ||
+ | |||
+ | /* Center align the text within the three columns below the carousel */ | ||
+ | .marketing .col-lg-4 { | ||
+ | margin-bottom: 20px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .marketing h2 { | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | .marketing .col-lg-4 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; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* 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; | ||
+ | } | ||
+ | |||
+ | /* Back to top */ | ||
+ | |||
+ | .back-to-top { | ||
+ | background: none; | ||
+ | margin: 0; | ||
+ | position: fixed; | ||
+ | bottom: 0; | ||
+ | right: 0; | ||
+ | width: 70px; | ||
+ | height: 70px; | ||
+ | z-index: 100; | ||
+ | display: none; | ||
+ | text-decoration: none; | ||
+ | color: #ffffff; | ||
+ | background-color: #ff9000; | ||
+ | } | ||
+ | |||
+ | .back-to-top i { | ||
+ | font-size: 60px; | ||
+ | } | ||
+ | |||
</style> | </style> |
Revision as of 23:13, 31 March 2015