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

h4 {
	font-weight: 600;
}

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

.btn {
	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;
	}
	svg {
		margin-right: .75rem;
		height: 17px;
		width: auto;
		transform: translateY(2px);
	}
}

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

.btn-lg {
	margin: 0 24px;
	@include media-breakpoint-down(md) {
		margin: 0 8px;
		font-size: 14px;
	}
}

.btn-sm small {
	display: inline-block;
	transform: translateY(-2px);
}

.btn-block {
		margin: 0 0 1.5rem 0;
	@include media-breakpoint-up(md) {
		margin: 0 0 2rem 0;
	}
}

.fixed-top {
	transition: background-color 700ms linear;
	.navbar {
		width: 100%;
	}
	.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;
	img {
		margin-right: 1rem;
		transform: translateY(-5px);
	}
}

.display-2 {
	margin-bottom: 4rem;
	@include media-breakpoint-down(md) {
		font-size: 32px;
	}
}

.display-4 {
	@include media-breakpoint-down(md) {
		font-size: 14px;
	}
}

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

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(md) {
				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;
			}
			&:hover {
				fill: white;
			}
			svg {
				width: 12px;
				height: auto;	
				position: absolute;
				top: 50%;
				transform: translate(-50%, -60%);
				animation: scroll 3s infinite;
				@include media-breakpoint-up(md) {
					width: 24px;
				}
			}
		}
	}
}

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

section#features,
section#appliances,
section#fireinfo {
	background-color: $blue-grey-50;
}

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

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

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

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

footer {
	padding: 3rem 0 0 0;
	h4 {
		margin-bottom: 1.25rem;
	}
	ul {
		li {
			font-size: $small-font-size;
			margin-bottom: .75rem;
			a {
				color: $blue-grey-900;
				text-decoration: none;
				&:hover {
					color: $blue-grey-600;
					text-decoration: underline;
				}
			}
		}
	}
	.btn-lg {
		margin-bottom: 2.75rem;
		svg {
			width: 20px;
			height: auto;
			margin-right: 1.125rem;
			transform: translateY(2px);
		}
	}
	.btn-sm {
		box-shadow: none;
		&:hover {
			box-shadow: none;
		}
		svg {
			width: auto;
			height: 28px;
		}
	}
}

.feature_icons {
	width: 40px;
	height: 100%;
	float: left;
	margin-right: .5rem;
	svg {
		width: 32px;
		height: auto;
		transform: translateY(-4px);
		fill: $red_900;
	}
}

@keyframes scroll {
  0%   { transform: translate(-50%, -60%); }
  50% { transform: translate(-50%, -30%); }
  100% { transform: translate(-50%, -60%); }
}

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

p.lead {
	@include media-breakpoint-down(md) {
		font-size: 1rem;
	}
}
Commit	Line	Data
b2051dd7 S	1	/*!
	2	* Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
	3	* Copyright 2011-2017 The Bootstrap Authors
	4	* Copyright 2011-2017 Twitter, Inc.
	5	* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
	6	*/
	7
	8	// Core variables and mixins
	9	@import "bootstrap-4.0.0-alpha.6/scss/variables";
	10	@import "bootstrap-4.0.0-alpha.6/scss/mixins";
	11	@import "bootstrap-4.0.0-alpha.6/scss/custom";
	12
	13	// Reset and dependencies
	14	@import "bootstrap-4.0.0-alpha.6/scss/normalize";
	15	// @import "bootstrap-4.0.0-alpha.6/scss/print";
	16
	17	// Core CSS
	18	@import "bootstrap-4.0.0-alpha.6/scss/reboot";
	19	@import "bootstrap-4.0.0-alpha.6/scss/type";
	20	@import "bootstrap-4.0.0-alpha.6/scss/images";
	21	// @import "bootstrap-4.0.0-alpha.6/scss/code";
	22	@import "bootstrap-4.0.0-alpha.6/scss/grid";
	23	// @import "bootstrap-4.0.0-alpha.6/scss/tables";
	24	// @import "bootstrap-4.0.0-alpha.6/scss/forms";
	25	@import "bootstrap-4.0.0-alpha.6/scss/buttons";
	26
	27	// Components
	28	@import "bootstrap-4.0.0-alpha.6/scss/transitions";
b6d1f3b7	29	//@import "bootstrap-4.0.0-alpha.6/scss/dropdown";
b2051dd7	30	@import "bootstrap-4.0.0-alpha.6/scss/button-group";
b6d1f3b7 S	31	//@import "bootstrap-4.0.0-alpha.6/scss/input-group";
b6d1f3b7 S	32	//@import "bootstrap-4.0.0-alpha.6/scss/custom-forms";
b2051dd7 S	33	@import "bootstrap-4.0.0-alpha.6/scss/nav";
b2051dd7 S	34	@import "bootstrap-4.0.0-alpha.6/scss/navbar";
b6d1f3b7	35	//@import "bootstrap-4.0.0-alpha.6/scss/card";
b2051dd7 S	36	// @import "bootstrap-4.0.0-alpha.6/scss/breadcrumb";
	37	// @import "bootstrap-4.0.0-alpha.6/scss/pagination";
	38	// @import "bootstrap-4.0.0-alpha.6/scss/badge";
	39	// @import "bootstrap-4.0.0-alpha.6/scss/jumbotron";
97ed546d	40	// @import "bootstrap-4.0.0-alpha.6/scss/alert";
b2051dd7 S	41	@import "bootstrap-4.0.0-alpha.6/scss/progress";
	42	@import "bootstrap-4.0.0-alpha.6/scss/media";
	43	@import "bootstrap-4.0.0-alpha.6/scss/list-group";
97ed546d S	44	// @import "bootstrap-4.0.0-alpha.6/scss/responsive-embed";
97ed546d S	45	// @import "bootstrap-4.0.0-alpha.6/scss/close";
b2051dd7 S	46
	47	// Components w/ JavaScript
	48	// @import "bootstrap-4.0.0-alpha.6/scss/modal";
	49	// @import "bootstrap-4.0.0-alpha.6/scss/tooltip";
	50	// @import "bootstrap-4.0.0-alpha.6/scss/popover";
	51	// @import "bootstrap-4.0.0-alpha.6/scss/carousel";
	52
	53	// Utility classes
97ed546d S	54	@import "bootstrap-4.0.0-alpha.6/scss/utilities";
97ed546d S	55
ccd81281 S	56	h4 {
	57	font-weight: 600;
	58	}
	59
	60	button.navbar-toggler div {
	61	font-family: 'Ubuntu', sans-serif;
	62	font-size: 1rem;
	63	display: inline-block;
	64	margin-left: 12px;
	65	}
	66
97ed546d S	67	.btn {
97ed546d S	68	text-transform: uppercase;
9ce2074c S	69	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
	70	transition: box-shadow .25s ease-in-out;
	71	&:hover {
	72	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
	73	transition: box-shadow .25s ease-in-out;
	74	}
	75	svg {
	76	margin-right: .75rem;
	77	height: 17px;
	78	width: auto;
	79	transform: translateY(2px);
	80	}
97ed546d S	81	}
97ed546d S	82
69a9b33d S	83	.btn-outline-primary,
	84	.btn-outline-secondary {
	85	transition: background-color .25s ease-in-out;
	86	&:hover {
	87	transition: background-color .25s ease-in-out;
	88	}
	89	}
	90
1e5bc9c9 S	91	.btn-lg {
1e5bc9c9 S	92	margin: 0 24px;
69a9b33d S	93	@include media-breakpoint-down(md) {
	94	margin: 0 8px;
	95	font-size: 14px;
	96	}
	97	}
	98
	99	.btn-sm small {
	100	display: inline-block;
	101	transform: translateY(-2px);
1e5bc9c9 S	102	}
1e5bc9c9 S	103
b6d1f3b7	104	.btn-block {
ccd81281 S	105	margin: 0 0 1.5rem 0;
	106	@include media-breakpoint-up(md) {
	107	margin: 0 0 2rem 0;
	108	}
b6d1f3b7 S	109	}
b6d1f3b7 S	110
1e5bc9c9 S	111	.fixed-top {
1e5bc9c9 S	112	transition: background-color 700ms linear;
69a9b33d S	113	.navbar {
	114	width: 100%;
	115	}
	116	.navbar-brand {
	117	opacity: 0;
	118	transition: opacity 700ms linear;
	119	@include media-breakpoint-up(lg) {
	120	opacity: 1;
	121	}
	122	}
1e5bc9c9 S	123	}
	124
	125	.scrolled {
	126	background-color: rgba(255, 255, 255, .96);
69a9b33d S	127	.navbar-brand {
	128	opacity: 1;
	129	transition: opacity 700ms linear;
	130	}
1e5bc9c9 S	131	}
1e5bc9c9 S	132
ccd81281 S	133	.menu-text.hidden {
	134	display: none;
	135	visibility: hidden;
	136	}
	137
1e5bc9c9 S	138	.navbar {
	139	a {
	140	color: $blue-grey-900;
	141	}
b6d1f3b7 S	142	.btn {
	143	margin-top: .15rem;
	144	}
1e5bc9c9 S	145	}
1e5bc9c9 S	146
97ed546d	147	.navbar-brand {
ccd81281 S	148	font-size: 1.25rem;
	149	@include media-breakpoint-up(sm) {
	150	font-size: 2rem;
	151	}
97ed546d S	152	font-weight: 300;
	153	img {
	154	margin-right: 1rem;
	155	transform: translateY(-5px);
	156	}
	157	}
	158
b6d1f3b7 S	159	.display-2 {
b6d1f3b7 S	160	margin-bottom: 4rem;
69a9b33d S	161	@include media-breakpoint-down(md) {
	162	font-size: 32px;
	163	}
	164	}
	165
	166	.display-4 {
	167	@include media-breakpoint-down(md) {
	168	font-size: 14px;
	169	}
b6d1f3b7 S	170	}
	171
	172	.bg-progress {
	173	background-image: linear-gradient(to right, $yellow-700, $amber-800);
	174	}
97ed546d S	175
	176	section.intro {
	177	min-height: 100vh;
	178	background-image: url('../img/header-background.jpg');
	179	background-size: cover;
	180	background-attachment: fixed;
	181	background-position: center top;
	182	position: relative;
	183	.branding {
69a9b33d S	184	padding-top: 6rem;
	185	@include media-breakpoint-up(md) {
	186	padding-top: 192px;
	187	}
97ed546d S	188	margin-bottom: 64px;
	189	text-align: center;
	190	color: $blue-grey-600;
	191	h1 {
	192	font-weight: 300 !important;
	193	color: $blue-grey-900;
69a9b33d S	194	@include media-breakpoint-down(md) {
	195	font-size: 4.5rem;
	196	}
97ed546d S	197	strong {
	198	font-weight: 700 !important;
	199	}
	200	}
	201	h1:before {
	202	content: "";
69a9b33d S	203	height: 60px;
69a9b33d S	204	width: 76px;
97ed546d S	205	background-image: url('../img/ipfire-tux.png');
	206	background-repeat: no-repeat;
	207	background-position: center center;
	208	background-size: contain;
97ed546d S	209	display: inline-block;
97ed546d S	210	position: relative;
69a9b33d S	211	top: 4px;
	212	@include media-breakpoint-up(md) {
	213	height: 120px;
	214	width: 93px;
	215	margin-right: 32px;
	216	top: 8px;
	217	}
97ed546d S	218	}
97ed546d S	219	}
97ed546d S	220	.page-scroll {
	221	position: absolute;
	222	bottom: 48px;
97ed546d S	223	left: 50%;
	224	transform: translateX(-50%);
	225	.btn {
69a9b33d S	226	width: 32px;
69a9b33d S	227	height: 32px;
97ed546d	228	fill: $red_900;
69a9b33d S	229	@include media-breakpoint-up(md) {
	230	width: 64px;
	231	height: 64px;
	232	}
97ed546d S	233	&:hover {
	234	fill: white;
	235	}
	236	svg {
69a9b33d	237	width: 12px;
97ed546d S	238	height: auto;
	239	position: absolute;
	240	top: 50%;
b6d1f3b7 S	241	transform: translate(-50%, -60%);
b6d1f3b7 S	242	animation: scroll 3s infinite;
69a9b33d S	243	@include media-breakpoint-up(md) {
	244	width: 24px;
	245	}
97ed546d S	246	}
	247	}
	248	}
1e5bc9c9 S	249	}
	250
	251	section.content-section {
ccd81281 S	252	padding: 3rem 0;
	253	@include media-breakpoint-up(md) {
	254	padding: 96px 0;
	255	}
1e5bc9c9 S	256	}
	257
	258	section#features,
b6d1f3b7 S	259	section#appliances,
b6d1f3b7 S	260	section#fireinfo {
1e5bc9c9 S	261	background-color: $blue-grey-50;
	262	}
	263
b6d1f3b7 S	264	section#news,
b6d1f3b7 S	265	footer {
1e5bc9c9 S	266	background-color: rgba($blue-grey-900, .2);
	267	}
	268
	269	section#wishlist {
	270	background-image: url('../img/wishlist-background.jpg');
	271	background-size: cover;
	272	background-position: center center;
b6d1f3b7 S	273	}
	274
	275	section#fireinfo {
	276	border-bottom: 1px solid rgba($blue-grey-900, .2);
	277	}
	278
	279	#copyright {
	280	background-color: rgba($blue-grey-900, .3);
	281	padding: 1rem 0;
	282	}
	283
	284	footer {
	285	padding: 3rem 0 0 0;
9ce2074c S	286	h4 {
	287	margin-bottom: 1.25rem;
	288	}
	289	ul {
	290	li {
	291	font-size: $small-font-size;
	292	margin-bottom: .75rem;
	293	a {
	294	color: $blue-grey-900;
	295	text-decoration: none;
	296	&:hover {
	297	color: $blue-grey-600;
	298	text-decoration: underline;
	299	}
	300	}
	301	}
	302	}
	303	.btn-lg {
	304	margin-bottom: 2.75rem;
	305	svg {
	306	width: 20px;
	307	height: auto;
	308	margin-right: 1.125rem;
	309	transform: translateY(2px);
	310	}
	311	}
	312	.btn-sm {
	313	box-shadow: none;
	314	&:hover {
	315	box-shadow: none;
	316	}
	317	svg {
	318	width: auto;
	319	height: 28px;
	320	}
	321	}
b6d1f3b7 S	322	}
	323
	324	.feature_icons {
	325	width: 40px;
	326	height: 100%;
	327	float: left;
	328	margin-right: .5rem;
	329	svg {
	330	width: 32px;
	331	height: auto;
	332	transform: translateY(-4px);
	333	fill: $red_900;
	334	}
	335	}
	336
	337	@keyframes scroll {
	338	0% { transform: translate(-50%, -60%); }
	339	50% { transform: translate(-50%, -30%); }
	340	100% { transform: translate(-50%, -60%); }
	341	}
	342
b6d1f3b7 S	343	.btn-red900 {
b6d1f3b7 S	344	@include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
9ce2074c S	345	}
	346	.btn-white {
	347	@include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
	348	}
	349	.btn-bluegrey900 {
	350	@include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
69a9b33d S	351	}
	352
	353	p.lead {
	354	@include media-breakpoint-down(md) {
	355	font-size: 1rem;
	356	}
97ed546d	357	}