index: Redesign intro

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

@import "variables";

// Use all Bootstrap modules that we want
@import "../bootstrap/scss/functions";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";
@import "../bootstrap/scss/root";
@import "../bootstrap/scss/reboot";
@import "../bootstrap/scss/type";
@import "../bootstrap/scss/images";
@import "../bootstrap/scss/code";
@import "../bootstrap/scss/grid";
@import "../bootstrap/scss/tables";
@import "../bootstrap/scss/forms";
@import "../bootstrap/scss/buttons";
@import "../bootstrap/scss/transitions";
@import "../bootstrap/scss/dropdown";
@import "../bootstrap/scss/button-group";
@import "../bootstrap/scss/input-group";
@import "../bootstrap/scss/nav";
@import "../bootstrap/scss/navbar";
@import "../bootstrap/scss/card";
@import "../bootstrap/scss/pagination";
@import "../bootstrap/scss/badge";
@import "../bootstrap/scss/alert";
@import "../bootstrap/scss/progress";
@import "../bootstrap/scss/media";
@import "../bootstrap/scss/list-group";
@import "../bootstrap/scss/close";
@import "../bootstrap/scss/modal";
@import "../bootstrap/scss/utilities";
@import "../bootstrap/scss/print";

// Include fonts
@import "fonts";

// Custom stuff
@import '_icons';

body {
	// For scrollspy
	position: relative;

	padding-top: 6rem;
}

// Buttons
.btn {
	text-transform: uppercase;
}

// Headings

h1 {
	line-height: 4rem;
	font-weight: 300;
}

h2 {
	line-height: 3.5rem;
}

h3 {
	line-height: 3rem;
}

h4 {
	line-height: 2.75rem;
}

h5 {
	line-height: 2rem;
}

h6 {
	line-height: 1.75rem;
}

.card {
	color: $dark;

	.card-body {
		h1, h2, h3, h4, h5, h6 {
			color: inherit;
		}
	}
}

.nav {
	.nav-link {
		color: $white;

		&.active {
			color: $link-color;
			border-left: 2px solid $link-color;
		}
	}
}

.navbar {
	&.scrolled {
		background-color: white;

		transition: background-color 200ms linear;
	}

	.navbar-nav {
		.nav-link {
			color: $white;

			&.active {
				border-bottom: 2px solid $link-color;
			}
		}
	}
}

footer {
	.btn-toolbar .icon {
		height: 2.25rem;
		width: 2.25rem;
		fill: rgba($gray-400, .6);
	}
	.i_heart {
		vertical-align: top;
		transform: translateY(-.15rem);
		@include media-breakpoint-down(sm) {
			transform: translateY(-.75rem);
		}
	}
}

// Sections

.main {
	.intro {
		min-height: 100%;
		min-height: 100vh;

		margin-top: -6rem;

		display: flex;
		align-items: center;
	}

	section {
		padding: 3rem 0;

		@include media-breakpoint-up(sm) {
			padding: 72px 0;
		}

		h1 {
			margin-bottom: 64px;
		}
	}

	section#news, section#support, footer {
		background-color: $body-color;
		color: $body-bg;

		h1 {
			color: inherit;
		}
	}

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

	section#appliances {
		padding-bottom: 48px;
	}
}

.blog-post {
	.blog-header {
		h5 {
			a {
				color: $dark;
			}
		}
	}

	.blog-content {
		h1, h2, h3, h4, h5, h6 {
			font-size: 20px;
			font-weight: $headings-font-weight;

			line-height: 28px;

			margin-bottom: 0.25rem;
		}

		img {
			@include img-fluid;
		}
	}

	&.lightning-wire-labs {
		.blog-header {
			h5 {
				a {
					color: $lwl;
				}
			}

			a {
				color: $lwl;
			}
		}

		.blog-content {
			a {
				color: $lwl;
			}
		}
	}
}

// Donations

.faq {
	a {
		color: $body-color;
	}
}

.donation-explanation {
	margin-bottom: 2rem;

	p {
		color: $text-muted;
	}

	@include media-breakpoint-down(sm) {
		background-color: $dark;
		color: $white;

		padding: 1.5rem;

		h5, p {
			color: inherit;
		}
	}
}

// Sidebar navigation

#sidebar .nav {
	position: fixed;
}

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

.progress {
	background-color: rgba(255, 255, 255, .2);
}

.circle {
	position: relative;
	p.fireinfo_per {
		color: $gray-800;
		position: absolute;
		top: calc(50% - 18px);
		width: 100%;
	}
}

.fixed-top + .blog-content {
	padding-top: 88px;
	margin-bottom: 40px;
	@include media-breakpoint-up(lg) {
		padding-top: 161px;
	}
	.content {
		background: white;
		border-radius: 4px;
		padding: 40px 24px;
		position: relative;
	}
}

.blog-content {
	margin-bottom: 80px;
}

.divider {
	width: 128px;
	height: 4px;
	border-radius: 2px;
	background-image: linear-gradient(to right, $red, $gray-400);
	margin: 40px auto 24px auto;
	@include media-breakpoint-up(sm) {
		margin: 56px auto 40px auto;
	}
}

footer {
	padding: 3rem 0 0 0;
	@include media-breakpoint-down(md) {
		padding-top: 31px;
	}
	h4 {
		margin-bottom: 1.25rem;
		color: rgba($gray-400, .6);
		font-size: 20px;
		line-height: 28px;
	}
	ul {
		li {
			font-size: 14px;
			margin-bottom: .75rem;
			a {
				color: rgba($gray-400, .6);
				text-decoration: none;
				&:hover {
					color: $gray-400;
					text-decoration: underline;
				}
			}
		}
	}
	.btn-lg {
		margin-bottom: 2.75rem;
	}

	.copyright {
		background-color: rgba($gray-400, .06);
		padding: $spacer 0;

		font-size: $small-font-size;

		a {
			color: $text-muted;
		}
	}
}

// Animation
@keyframes scroll {
  0%, 100%   { transform: translateY(30%); }
  50% { transform: translateY(50%); }
}