|
|
(9 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
− | /* 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 {
| |
− | margin-top: 16px;
| |
− | }
| |
− |
| |
− | /* CUSTOMIZE THE CAROUSEL
| |
− | -------------------------------------------------- */
| |
− |
| |
− | /* Carousel base class */
| |
− | .carousel {
| |
− | height: 500px;
| |
− | margin-bottom: 60px;
| |
− | margin-top: 48px;
| |
− |
| |
− | }
| |
− | /* 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;
| |
− | }
| |
− | }
| |
− |
| |
− | /*
| |
− | * Base structure
| |
− | */
| |
− |
| |
− | /* Move down content because we have a fixed navbar that is 50px tall */
| |
− | body {
| |
− | padding-top: 50px;
| |
− | }
| |
− |
| |
− |
| |
− | /*
| |
− | * Global add-ons
| |
− | */
| |
− |
| |
− | .sub-header {
| |
− | padding-bottom: 10px;
| |
− | border-bottom: 1px solid #eee;
| |
− | }
| |
− |
| |
− | /*
| |
− | * Top navigation
| |
− | * Hide default border to remove 1px line.
| |
− | */
| |
− | .navbar-fixed-top {
| |
− | border: 0;
| |
− | }
| |
− |
| |
− | /*
| |
− | * Sidebar
| |
− | */
| |
− |
| |
− | /* Hide for mobile, show later */
| |
− | .sidebar {
| |
− | display: none;
| |
− | }
| |
− | @media (min-width: 768px) {
| |
− | .sidebar {
| |
− | position: fixed;
| |
− | top: 51px;
| |
− | bottom: 0;
| |
− | left: 0;
| |
− | z-index: 1000;
| |
− | display: block;
| |
− | padding: 20px;
| |
− | overflow-x: hidden;
| |
− | overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
| |
− | background-color: #f5f5f5;
| |
− | border-right: 1px solid #eee;
| |
− | }
| |
− | }
| |
− |
| |
− | /* Sidebar navigation */
| |
− | .nav-sidebar {
| |
− | margin-right: -21px; /* 20px padding + 1px border */
| |
− | margin-bottom: 20px;
| |
− | margin-left: -20px;
| |
− | }
| |
− | .nav-sidebar > li > a {
| |
− | padding-right: 20px;
| |
− | padding-left: 20px;
| |
− | }
| |
− | .nav-sidebar > .active > a,
| |
− | .nav-sidebar > .active > a:hover,
| |
− | .nav-sidebar > .active > a:focus {
| |
− | color: #fff;
| |
− | background-color: #428bca;
| |
− | }
| |
− |
| |
− |
| |
− | /*
| |
− | * Main content
| |
− | */
| |
− |
| |
− | .main {
| |
− | padding: 20px;
| |
− | }
| |
− | @media (min-width: 768px) {
| |
− | .main {
| |
− | padding-right: 40px;
| |
− | padding-left: 40px;
| |
− | }
| |
− | }
| |
− | .main .page-header {
| |
− | margin-top: 0;
| |
− | }
| |
− |
| |
− |
| |
− | /*
| |
− | * Placeholder dashboard ideas
| |
− | */
| |
− |
| |
− | .placeholders {
| |
− | margin-bottom: 30px;
| |
− | text-align: center;
| |
− | }
| |
− | .placeholders h4 {
| |
− | margin-bottom: 0;
| |
− | }
| |
− | .placeholder {
| |
− | margin-bottom: 20px;
| |
− | }
| |
− | .placeholder img {
| |
− | display: inline-block;
| |
− | border-radius: 50%;
| |
− | }
| |