CSS: Adjust media breakpoints

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

$theme-colors: map-merge($theme-colors, $custom-colors);

@import "../bootstrap/scss/root";
@import "../bootstrap/scss/reboot";
@import "../bootstrap/scss/type";
@import "../bootstrap/scss/images";
@import "../bootstrap/scss/containers";
@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/nav";
@import "../bootstrap/scss/navbar";
@import "../bootstrap/scss/card";
@import "../bootstrap/scss/accordion";
@import "../bootstrap/scss/breadcrumb";
@import "../bootstrap/scss/pagination";
@import "../bootstrap/scss/badge";
@import "../bootstrap/scss/alert";
@import "../bootstrap/scss/progress";
@import "../bootstrap/scss/list-group";
@import "../bootstrap/scss/close";
@import "../bootstrap/scss/modal";
@import "../bootstrap/scss/tooltip";
@import "../bootstrap/scss/popover";
@import "../bootstrap/scss/carousel";
@import "../bootstrap/scss/spinners";
@import "../bootstrap/scss/offcanvas";
@import "../bootstrap/scss/placeholders";

@import "../bootstrap/scss/helpers";
@import "../bootstrap/scss/utilities/api";

// Include fonts
@import "_fonts.scss";

// Custom stuff
@import "icons";
@import "code-highlighting";

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

body {
	display: flex;
	min-height: 100vh;
	flex-flow: column;

	// Make the wiki slightly narrower
	&.wiki-ipfire-org {
		.container {
			max-width: 900px;
		}
	}
}

.header {
	padding-top: 5rem;
	margin-bottom: $spacer;
	background-color: $light;
}

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

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

code {
	background-color: $dark;
	border-radius: $border-radius;
	padding: 0.1rem 0.2rem;
}

pre {
	background-color: $dark;
	border-radius: $border-radius;
	padding: 0.5rem;

	code {
		background-color: inherit;
		padding: 0;
	}

	&.pre-light {
		background-color: $white;
		color: $body-bg;
	}
}

.navbar {
	.navbar-brand {
		font-weight: bold;
		letter-spacing: 0.07em;
	}
}

.bg-brand {
	min-height: 40rem;

	// Background Image
	background-image: url("img/bg-img.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	// Text is white
	color: $white;

	// Center the content
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.icon-large {
	font-size: 8em;

	@include media-breakpoint-up(lg) {
		font-size: 6em;
	}

	@include media-breakpoint-up(xl) {
		font-size: 8em;
	}

	@include media-breakpoint-up(xxl) {
		font-size: 10em;
	}
}

footer {
	margin-top: auto;

	.footer {
		margin: ($spacer * 2) 0;
		padding-top: $spacer * 2;

		ul {
			@include list-unstyled();

			li {
				padding: ($spacer / 2) 0;
			}
		}
	}

	.footer-link {
		color: inherit;

		&:hover {
			color: inherit;
		}
	}
}

.map {
	min-height: 24rem;
}

// Sections

section {
	padding: 3rem 1rem;

	@include media-breakpoint-up(lg) {
		padding: 5rem 0;
	}

	@include media-breakpoint-up(lg) {
		// Reset large headlines to normal size on mobile devices
		h1 {
			font-size: $display1-size;
			font-weight: $display-font-weight;
			line-height: $display-line-height;
		}
	}
}

blockquote {
	@extend .blockquote;

	// Add a light border to the left
	border-left: 0.5rem solid $light;
	padding: $spacer;

	quotes: "“" "”" "“" "”";

	// Quote
	&:before{
		color: $light;
		font-size: $display1-size;
		line-height: 0;
		margin-right: 0.25em;
		vertical-align: -0.4em;
	}

	&:before {
		content: open-quote;
	}

	p {
		margin-bottom: 0;
	}
}

.blog-post {
	.blog-header {
		h4 {
			margin-bottom: 0;

			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;

			// Center all images
			display: block;
			margin-left: auto;
			margin-right: auto;

			// Add some extra margin to the top & bottom
			padding: ($spacer * 2) 0 ($spacer * 2) 0;
		}

		table {
			@extend .table;
			@extend .table-sm;
			@extend .table-striped;

			// Apply CSS classes for alignment
			thead {
				th[align="left"], td[align="left"] {
					@extend .text-start;
				}

				th[align="center"], td[align="center"] {
					@extend .text-center;
				}

				th[align="right"], td[align="right"] {
					@extend .text-end;
				}
			}
		}
	}

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

			a {
				color: $lwl;
			}
		}

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

.wiki-content {
	h1, h2, h3, h4, h5, h6 {
		font-weight: $headings-font-weight;
		line-height: $headings-line-height;
		margin-bottom: 0.5rem;
	}

	h1 {
		font-size: $h4-font-size;
	}

	h2 {
		font-size: $h5-font-size;
	}

	h3, h4, h5, h6 {
		font-size: $h6-font-size;
	}

	figure {
		// Center images
		display: table;
		margin-right: auto;
		margin-left: auto;

		// Add some extra margin to the top & bottom
		padding: ($spacer * 2) 0 ($spacer * 2) 0;
	}

	blockquote {
		@extend .blockquote;
	}

	table {
		@extend .table;
		@extend .table-sm;
		@extend .table-striped;

		// Apply CSS classes for alignment
		thead {
			th[align="left"], td[align="left"] {
				@extend .text-start;
			}

			th[align="center"], td[align="center"] {
				@extend .text-center;
			}

			th[align="right"], td[align="right"] {
				@extend .text-end;
			}
		}
	}

	.footnote {
		font-size: $small-font-size;

		ol {
			margin-bottom: 0;

			li {
				p {
					margin-bottom: 0;
				}
			}
		}
	}
}

#preview {
	// Hide the spinner by default
	#spinner {
		display: none;
	}

	#preview-content {
		@include transition(opacity .5s linear);
	}

	&.updating {
		// Show the spinner during updates
		#spinner {
			display: block;
		}

		// While updating, we face out the content
		#preview-content {
			opacity: 0.5;
		}
	}
}

hr.divider {
	border-color: rgba($dark, .15);
	margin-top: 2rem;
	margin-bottom: 3rem;
}

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

.pdf-viewer {
	width: 100%;
	min-height: 32rem;
}