Navbar styling and Intro section for Website - Start - XL

[ipfire.org.git] / static / scss / style.scss

/*!
 * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "bootstrap-4.0.0-alpha.6/scss/variables";
@import "bootstrap-4.0.0-alpha.6/scss/mixins";
@import "bootstrap-4.0.0-alpha.6/scss/custom";

// Reset and dependencies
@import "bootstrap-4.0.0-alpha.6/scss/normalize";
// @import "bootstrap-4.0.0-alpha.6/scss/print";

// Core CSS
@import "bootstrap-4.0.0-alpha.6/scss/reboot";
@import "bootstrap-4.0.0-alpha.6/scss/type";
@import "bootstrap-4.0.0-alpha.6/scss/images";
// @import "bootstrap-4.0.0-alpha.6/scss/code";
@import "bootstrap-4.0.0-alpha.6/scss/grid";
// @import "bootstrap-4.0.0-alpha.6/scss/tables";
// @import "bootstrap-4.0.0-alpha.6/scss/forms";
@import "bootstrap-4.0.0-alpha.6/scss/buttons";

// Components
@import "bootstrap-4.0.0-alpha.6/scss/transitions";
@import "bootstrap-4.0.0-alpha.6/scss/dropdown";
@import "bootstrap-4.0.0-alpha.6/scss/button-group";
@import "bootstrap-4.0.0-alpha.6/scss/input-group";
@import "bootstrap-4.0.0-alpha.6/scss/custom-forms";
@import "bootstrap-4.0.0-alpha.6/scss/nav";
@import "bootstrap-4.0.0-alpha.6/scss/navbar";
@import "bootstrap-4.0.0-alpha.6/scss/card";
// @import "bootstrap-4.0.0-alpha.6/scss/breadcrumb";
// @import "bootstrap-4.0.0-alpha.6/scss/pagination";
// @import "bootstrap-4.0.0-alpha.6/scss/badge";
// @import "bootstrap-4.0.0-alpha.6/scss/jumbotron";
// @import "bootstrap-4.0.0-alpha.6/scss/alert";
@import "bootstrap-4.0.0-alpha.6/scss/progress";
@import "bootstrap-4.0.0-alpha.6/scss/media";
@import "bootstrap-4.0.0-alpha.6/scss/list-group";
// @import "bootstrap-4.0.0-alpha.6/scss/responsive-embed";
// @import "bootstrap-4.0.0-alpha.6/scss/close";

// Components w/ JavaScript
// @import "bootstrap-4.0.0-alpha.6/scss/modal";
// @import "bootstrap-4.0.0-alpha.6/scss/tooltip";
// @import "bootstrap-4.0.0-alpha.6/scss/popover";
// @import "bootstrap-4.0.0-alpha.6/scss/carousel";

// Utility classes
@import "bootstrap-4.0.0-alpha.6/scss/utilities";

.btn {
	text-transform: uppercase;
}

.navbar-brand {
	font-size: 2rem;
	font-weight: 300;
	img {
		margin-right: 1rem;
		transform: translateY(-5px);
	}
}


section.intro {
	min-height: 100vh;
	background-image: url('../img/header-background.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: center top;
	position: relative;
	.branding {
		padding-top: 192px;
		margin-bottom: 64px;
		text-align: center;
		color: $blue-grey-600;
		h1 {
			font-weight: 300 !important;
			color: $blue-grey-900;
			strong {
				font-weight: 700 !important;
			}
		}
		h1:before {
			content: "";
			height: 120px;
			width: 93px;
			background-image: url('../img/ipfire-tux.png');
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			margin-right: 32px;
			display: inline-block;
			position: relative;
			top: 8px;
		}
	}
	.btn-lg {
		margin: 0 24px;
	}
	.page-scroll {
		position: absolute;
		bottom: 48px;
		width: 66px;
		left: 50%;
		transform: translateX(-50%);
		.btn {
			width: 64px;
			height: 64px;
			fill: $red_900;
			&:hover {
				fill: white;
			}
			svg {
				width: 24px;
				height: auto;	
				position: absolute;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
}