CSS: Use rounded corners for buttons, etc.

[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;
}

.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 {
	section {
		padding: 3rem 0;

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

		h1 {
			margin-bottom: 64px;
		}
	}

	section.intro {
		// Make it cover the navbar, too
		margin-top: -6rem;
		padding-top: 6rem;

		min-height: 100vh;
		background-image: url('img/header-background.jpg');
		background-size: cover;
		background-attachment: fixed;
		background-position: center top;
		position: relative;

		.branding {
			margin-top: 7.5rem;
			margin-bottom: 4rem;

			@include media-breakpoint-down(xs) {
				margin-top: 2.5rem;
			}

			text-align: center;

			h1 {
				margin-bottom: 0;

				@include media-breakpoint-down(xs) {
					font-size: 72px;
					line-height: 88px;
				}
			}

			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(sm) {
					height: 120px;
					width: 93px;
					margin-right: 32px;
					top: 8px;
				}
			}

			h5 {
				color: $white;

				@include media-breakpoint-down(xs) {
					font-size: 14px;
					line-height: 20px;
				}
			}
		}
	}

	section#news, section#support, footer {
		background-color: rgba($gray-800, .06);
	}

	section#news {
		color: rgba($gray-800, .6);
	}

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

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

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

	.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;
}

.page-scroll {
	display: block;
	visibility: visible;
	position: absolute;
	bottom: 48px;
	left: 50%;
	transform: translateX(-50%);
	.btn {
		width: 36px;
		height: 36px;
		fill: $red;
		@include media-breakpoint-up(sm) {
			width: 64px;
			height: 64px;
		}
		&:hover .i_arrow_down {
			fill: white;
		}
	}
}

.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%); }
}