embed SVG Icons in the footer.

[people/shoehn/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";


// Fonts

h1 {
	line-height: 3rem;
}

h2 {
	line-height: 2.75rem;
}

h3 {
	line-height: 2rem;
}

h4 {
	font-weight: 600;
	line-height: 1.75rem;
}

h5 {
	line-height: 1.5rem;
}

p {
	line-height: 1.5rem;
	&.lead {
		line-height: 2rem;
		@include media-breakpoint-down(md) {
			font-size: 1.5rem;
			line-height: 2rem;
		}
		@include media-breakpoint-down(sm) {
			font-size: 1rem;
			line-height: 1.5rem;
		}
	}
}

.display-2 {
	margin-bottom: 4rem;
	@include media-breakpoint-down(md) {
		font-size: 2.5rem;
		line-height: 3.5rem;
		margin-bottom: 3rem;
	}
	@include media-breakpoint-down(sm) {
		font-size: 2rem;
		line-height: 2.75rem;
	}
}

.display-4 {
	@include media-breakpoint-down(sm) {
		font-size: .875rem;
		line-height: 1.25rem;
	}
}

small {
	line-height: 1rem;
}

.truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// Images
img {
	&.img-fluid {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

// Icons

.icon {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
	vertical-align: -.15rem;
	overflow: hidden;
	margin-right: .5rem;
}

.i_arrow_down {
	margin: 0;
	animation: scroll 3s infinite;
}

.i_lg {
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	transform: translateY(-.25rem);
	fill: $red_900;
}

.i_sm {
	width: 1rem;
	height: 1rem;
}

footer {
	.btn-toolbar .icon {
		height: 2rem;
		width: 2rem;
		fill: rgba($blue-grey-900, .6);
	}
	.i_heart {
		vertical-align: -.25rem;
	}
}

// Buttons

.btn-red900 {
  @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
}
.btn-white {
  @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
}
.btn-bluegrey900 {
  @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
}

button.navbar-toggler div {
	font-family: 'Ubuntu', sans-serif;
	font-size: 1rem;
	display: inline-block;
	margin-left: 12px;
}

.btn {
	height: 36px;
	text-transform: uppercase;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
	transition: box-shadow .25s ease-in-out;
	&:hover {
		box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
		transition: box-shadow .25s ease-in-out;
	}
	@include media-breakpoint-down(sm) {
		font-size: .875rem;
	}
}

.btn-outline-primary,
.btn-outline-secondary {
	transition: background-color .25s ease-in-out;
	&:hover {
		transition: background-color .25s ease-in-out;
	}
}

.btn-lg {
	height: 48px;
	margin: 0 24px;
	@include media-breakpoint-down(sm) {
		height: 36px;
		margin: 0 8px;
		padding: 1rem;
		font-size: .875rem;
		line-height: 0;
	}
}

.btn-block {
	margin: 0 0 1.5rem 0;
	@include media-breakpoint-up(md) {
		margin: 0 0 2rem 0;	
	}
	@include media-breakpoint-down(sm) {
		font-size: .875rem;
		line-height: 0;
	}
}

// Top Navigation

.fixed-top {
	transition: background-color 700ms linear;
	.navbar {
		width: 100%;
		@include media-breakpoint-down(md) {
			padding: .5rem 0;
		}
		.navbar-toggler-left {
			left: -1rem;
		}
	}
	.navbar-brand {
		opacity: 0;
		transition: opacity 700ms linear;
		@include media-breakpoint-up(lg) {
			opacity: 1;
		}
	}
}

.scrolled {
	background-color: rgba(255, 255, 255, .96);
	.navbar-brand {
		opacity: 1;
		transition: opacity 700ms linear;
	}
}

.menu-text.hidden {
	display: none;
	visibility: hidden;
}

.navbar {
	a {
		color: $blue-grey-900;
	}
	.btn {
		margin-top: .15rem;
	}
}

.navbar-brand {
	font-size: 1.25rem;
	@include media-breakpoint-up(sm) {
		font-size: 2rem;
	}
	font-weight: 300;
	strong {
		font-weight: 900;
	}
	img {
		margin-right: 1rem;
		transform: translateY(-5px);
	}
}

// Sections

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: 6rem;
		@include media-breakpoint-up(md) {
			padding-top: 192px;
		}
		margin-bottom: 64px;
		text-align: center;
		color: $blue-grey-600;
		h1 {
			font-weight: 300 !important;
			color: $blue-grey-900;
			@include media-breakpoint-down(sm) {
				font-size: 4.5rem;
			}
			strong {
				font-weight: 700 !important;
			}
		}
		h1:before {
			content: "";
			height: 60px;
			width: 76px;
			background-image: url('../img/ipfire-tux.png');
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			display: inline-block;
			position: relative;
			top: 4px;
			@include media-breakpoint-up(md) {
				height: 120px;
				width: 93px;
				margin-right: 32px;
				top: 8px;
			}
		}
	}
	.page-scroll {
		position: absolute;
		bottom: 48px;
		left: 50%;
		transform: translateX(-50%);
		.btn {
			width: 32px;
			height: 32px;
			fill: $red_900;
			@include media-breakpoint-up(md) {
				width: 64px;
				height: 64px;
			}
		}
	}
}

section.content-section {
		padding: 3rem 0;
	@include media-breakpoint-up(md) {
		padding: 72px 0;
	}
}

.feature_icons {
	width: 40px;
	height: 100%;
	float: left;
	margin-right: .75rem;
}

section#news,
footer {
	background-color: rgba($blue-grey-900, .06);
}

section#news {
	color: rgba($blue-grey-900, .6);
	h2 {
		color: $blue-grey-900;
	}
}

section#wishlist {
	background-image: url('../img/wishlist-background.jpg');
	background-size: cover;
	background-position: center center;
}

.bg-progress {
	background-image: linear-gradient(to right, $yellow-700, $amber-800);
}

section#fireinfo {
	border-bottom: 1px solid rgba($blue-grey-900, .2);
}

.circle {
	position: relative;
	p.lead {
		color: $blue-grey-600;
		position: absolute;
		top: calc(50% - 1.25rem);
		width: 100%;
	}
}

footer {
	padding: 3rem 0 0 0;
	h4 {
		margin-bottom: 1.25rem;
		color: rgba($blue-grey-900, .6);
	}
	ul {
		li {
			font-size: $small-font-size;
			margin-bottom: .75rem;
			a {
				color: rgba($blue-grey-900, .6);
				text-decoration: none;
				&:hover {
					color: $blue-grey-900;
					text-decoration: underline;
				}
			}
		}
	}
	.btn-lg {
		margin-bottom: 2.75rem;
	}
	.btn-sm {
		box-shadow: none;
		&:hover {
			box-shadow: none;
		}
	}
}

#copyright {
	background-color: rgba($blue-grey-900, .06);
	padding: 1rem 0;
}

// Animation

@keyframes scroll {
  0%   { transform: translateY(20%); }
  50% { transform: translateY(60%); }
  100% { transform: translateY(20%); }
}