CSS: Make footer sticky but with variable height

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

// Makes everything white with dark text on it
.inverse {
	background-color: $body-color;
	color: $body-bg;
}

html, body {
	height: 100%;
}

body {
	display: flex;
	flex-flow: column;
}

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

@each $color, $value in $theme-colors {
	.btn-glow-#{$color} {
		color: white;
		background-color: rgba($value, .15);
	}
}

.card {
	@extend .inverse;
}

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

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

.navbar {
	background-color: rgba($gray-400, .06);

	.navbar-brand {
		color: inherit;
	}

	.navbar-nav {
		.nav-link {
			color: inherit;

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

footer {
	margin-top: auto;
	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;
		}
	}
}

// Sections

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

		margin-top: -6rem;

		@include media-breakpoint-down(sm) {
			padding-top: 6rem;
		}

		display: flex;
		align-items: center;
	}

	section {
		padding: 3rem 0;

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

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

	.blog-content {
		h1, h2, h3, h4, h5, h6 {
			font-size: 1.375rem;
			font-weight: $headings-font-weight;
			line-height: $headings-line-height;
			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

.donation-explanation {
	color: $text-muted;
	padding: 1.5rem;

	.faq {
		a {
			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%;
	}
}

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

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