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

// Lightbox
@import "photoswipe/main";
@import "photoswipe/default-skin/default-skin";

// Donation Box
@import "_donation";

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

.container {
	width: 100%;
	max-width: 1200px;
	flex: 1;
}

// Custom stuff
@import '_fonts';
@import '_nav';
@import '_buttons';
@import '_icons';


// Colors
.amber-800 {
	color: $amber-800;
	border-color: $amber-800;
}

.green-600 {
	color: $green-600;
	border-color: $green-600;
}

.red-900 {
	color: $red_900;
	border-color: $red_900;
}

.blue-700{
	color: $blue-700;
	border-color: $blue-700;
}

.blue_grey_300 {
	color: $blue_grey_300;
}

.bg-blue-grey-900 {
	background-color: $blue-grey-900;
}

.bg-blue-grey-50 {
	background-color: $blue-grey-50;
}

// Images
img {
	&.img-fluid {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}


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


// Sections
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(sm) {
			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(xs) {
				font-size: 72px;
				line-height: 88px;
				margin-bottom: 0;
			}
			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(sm) {
				height: 120px;
				width: 93px;
				margin-right: 32px;
				top: 8px;
			}
		}
	}
}

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

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

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

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

section#news {
	color: rgba($blue-grey-900, .6);
	h2 {
		color: $blue-grey-900;
	}
}

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

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

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

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

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

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

.features-content {
	padding-top: 88px;
	margin-bottom: 40px;
	@include media-breakpoint-up(lg) {
		padding-top: 161px;
	}
	.content {
		background: white;
		border-radius: 4px;
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
		padding: 40px 24px;
		position: relative;
	}
}

.divider {
	width: 128px;
	height: 4px;
	border-radius: 2px;
	background-image: linear-gradient(to right, $red_900, $deep_orange_a400);
	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($blue-grey-900, .6);
		font-size: 20px;
		line-height: 28px;
	}
	ul {
		li {
			font-size: 14px;
			margin-bottom: .75rem;
			a {
				color: rgba($blue-grey-900, .6);
				text-decoration: none;
				&:hover {
					color: $blue-grey-900;
					text-decoration: underline;
				}
			}
		}
	}
	.btn-lg {
		margin-bottom: 2.75rem;
	}
	.btn-sm {
		box-shadow: none;
		&:hover {
			box-shadow: none;
		}
	}
}

#copyright {
	background-color: rgba($blue-grey-900, .06);
	padding: 1rem 0;
	p {
		font-size: 12px;
		line-height: 16px;
	}
}

// Animation
@keyframes scroll {
  0%, 100%   { transform: translateY(30%); }
  50% { transform: translateY(50%); }
}
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";
22cfab2d	20	//@import "bootstrap-4.0.0-alpha.6/scss/images";
b2051dd7 S	21	// @import "bootstrap-4.0.0-alpha.6/scss/code";
b2051dd7 S	22	@import "bootstrap-4.0.0-alpha.6/scss/grid";
6b18ec4c	23	@import "bootstrap-4.0.0-alpha.6/scss/tables";
a33e1b4b	24	@import "bootstrap-4.0.0-alpha.6/scss/forms";
b2051dd7 S	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";
b2051dd7 S	37	// @import "bootstrap-4.0.0-alpha.6/scss/pagination";
3c77f292	38	@import "bootstrap-4.0.0-alpha.6/scss/badge";
b2051dd7	39	// @import "bootstrap-4.0.0-alpha.6/scss/jumbotron";
e9131ad6	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
3878736e SH	56	// Lightbox
	57	@import "photoswipe/main";
	58	@import "photoswipe/default-skin/default-skin";
9581b35d	59
a33e1b4b SH	60	// Donation Box
	61	@import "_donation";
	62
9581b35d SH	63	body {
	64	min-height: 100vh;
	65	display: flex;
	66	flex-direction: column;
	67	}
	68
49baba87 S	69	.container {
	70	width: 100%;
	71	max-width: 1200px;
9581b35d	72	flex: 1;
49baba87 S	73	}
49baba87 S	74
55edf6f3	75	// Custom stuff
2d8cbd13 S	76	@import '_fonts';
2d8cbd13 S	77	@import '_nav';
55edf6f3	78	@import '_buttons';
9581b35d	79	@import '_icons';
55edf6f3	80
22cfab2d	81
49baba87	82
a6a4d1cf	83	// Colors
a6a4d1cf S	84	.amber-800 {
a6a4d1cf S	85	color: $amber-800;
3c77f292 SH	86	border-color: $amber-800;
	87	}
	88
	89	.green-600 {
	90	color: $green-600;
	91	border-color: $green-600;
	92	}
	93
	94	.red-900 {
	95	color: $red_900;
	96	border-color: $red_900;
	97	}
	98
	99	.blue-700{
	100	color: $blue-700;
	101	border-color: $blue-700;
a6a4d1cf S	102	}
a6a4d1cf S	103
0c707f0b SH	104	.blue_grey_300 {
	105	color: $blue_grey_300;
	106	}
	107
a33e1b4b SH	108	.bg-blue-grey-900 {
	109	background-color: $blue-grey-900;
	110	}
	111
	112	.bg-blue-grey-50 {
	113	background-color: $blue-grey-50;
	114	}
	115
22cfab2d S	116	// Images
	117	img {
	118	&.img-fluid {
	119	width: 100%;
	120	max-width: 100%;
	121	height: auto;
	122	}
	123	}
	124
22cfab2d S	125
	126	footer {
	127	.btn-toolbar .icon {
efb8b657 S	128	height: 2.25rem;
efb8b657 S	129	width: 2.25rem;
22cfab2d S	130	fill: rgba($blue-grey-900, .6);
	131	}
	132	.i_heart {
efb8b657 S	133	vertical-align: top;
	134	transform: translateY(-.15rem);
	135	@include media-breakpoint-down(sm) {
	136	transform: translateY(-.75rem);
	137	}
22cfab2d S	138	}
	139	}
	140
97ed546d	141
22cfab2d	142	// Sections
97ed546d S	143	section.intro {
	144	min-height: 100vh;
	145	background-image: url('../img/header-background.jpg');
	146	background-size: cover;
	147	background-attachment: fixed;
	148	background-position: center top;
	149	position: relative;
	150	.branding {
69a9b33d	151	padding-top: 6rem;
7a9f7ff6	152	@include media-breakpoint-up(sm) {
69a9b33d S	153	padding-top: 192px;
69a9b33d S	154	}
97ed546d S	155	margin-bottom: 64px;
	156	text-align: center;
	157	color: $blue-grey-600;
	158	h1 {
	159	font-weight: 300 !important;
	160	color: $blue-grey-900;
7a9f7ff6	161	@include media-breakpoint-down(xs) {
49baba87 S	162	font-size: 72px;
	163	line-height: 88px;
	164	margin-bottom: 0;
69a9b33d	165	}
97ed546d S	166	strong {
	167	font-weight: 700 !important;
	168	}
	169	}
	170	h1:before {
	171	content: "";
69a9b33d S	172	height: 60px;
69a9b33d S	173	width: 76px;
97ed546d S	174	background-image: url('../img/ipfire-tux.png');
	175	background-repeat: no-repeat;
	176	background-position: center center;
	177	background-size: contain;
97ed546d S	178	display: inline-block;
97ed546d S	179	position: relative;
69a9b33d	180	top: 4px;
7a9f7ff6	181	@include media-breakpoint-up(sm) {
69a9b33d S	182	height: 120px;
	183	width: 93px;
	184	margin-right: 32px;
	185	top: 8px;
	186	}
97ed546d S	187	}
97ed546d S	188	}
49baba87 S	189	}
	190
	191	.page-scroll {
	192	display: block;
	193	visibility: visible;
	194	position: absolute;
	195	bottom: 48px;
	196	left: 50%;
	197	transform: translateX(-50%);
	198	.btn {
	199	width: 36px;
	200	height: 36px;
	201	fill: $red_900;
	202	@include media-breakpoint-up(sm) {
	203	width: 64px;
	204	height: 64px;
	205	}
	206	&:hover .i_arrow_down {
	207	fill: white;
97ed546d S	208	}
97ed546d S	209	}
1e5bc9c9 S	210	}
	211
	212	section.content-section {
6a63d20a	213	padding: 3rem 0;
7a9f7ff6	214	@include media-breakpoint-up(sm) {
22cfab2d	215	padding: 72px 0;
ccd81281	216	}
1e5bc9c9 S	217	}
1e5bc9c9 S	218
22cfab2d S	219	.feature_icons {
	220	width: 40px;
	221	height: 100%;
	222	float: left;
	223	margin-right: .75rem;
1e5bc9c9 S	224	}
1e5bc9c9 S	225
b6d1f3b7	226	section#news,
ae6a2da5	227	section#support,
b6d1f3b7	228	footer {
22cfab2d S	229	background-color: rgba($blue-grey-900, .06);
	230	}
	231
	232	section#news {
	233	color: rgba($blue-grey-900, .6);
	234	h2 {
	235	color: $blue-grey-900;
	236	}
1e5bc9c9 S	237	}
	238
	239	section#wishlist {
	240	background-image: url('../img/wishlist-background.jpg');
	241	background-size: cover;
	242	background-position: center center;
b6d1f3b7 S	243	}
b6d1f3b7 S	244
3d770ad7 S	245	.progress {
	246	background-color: rgba(255, 255, 255, .2);
	247	}
	248
22cfab2d S	249	.bg-progress {
	250	background-image: linear-gradient(to right, $yellow-700, $amber-800);
	251	}
	252
b6d1f3b7 S	253	section#fireinfo {
	254	border-bottom: 1px solid rgba($blue-grey-900, .2);
	255	}
	256
22cfab2d S	257	.circle {
22cfab2d S	258	position: relative;
49baba87	259	p.fireinfo_per {
22cfab2d S	260	color: $blue-grey-600;
22cfab2d S	261	position: absolute;
bf75d6d5	262	top: calc(50% - 18px);
22cfab2d S	263	width: 100%;
22cfab2d S	264	}
b6d1f3b7 S	265	}
b6d1f3b7 S	266
7a9f7ff6 S	267	section#appliances {
	268	padding-bottom: 48px;
	269	}
	270
9280b190	271	.features-content {
4a416dd3	272	padding-top: 88px;
9280b190	273	margin-bottom: 40px;
3c77f292	274	@include media-breakpoint-up(lg) {
4a416dd3 SH	275	padding-top: 161px;
4a416dd3 SH	276	}
9280b190 S	277	.content {
	278	background: white;
	279	border-radius: 4px;
	280	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	281	padding: 40px 24px;
aa44ed56	282	position: relative;
9280b190 S	283	}
	284	}
	285
8842c9d0	286	.divider {
9280b190	287	width: 128px;
8842c9d0 S	288	height: 4px;
	289	border-radius: 2px;
	290	background-image: linear-gradient(to right, $red_900, $deep_orange_a400);
4a416dd3 SH	291	margin: 40px auto 24px auto;
	292	@include media-breakpoint-up(sm) {
	293	margin: 56px auto 40px auto;
	294	}
9280b190 S	295	}
9280b190 S	296
b6d1f3b7 S	297	footer {
b6d1f3b7 S	298	padding: 3rem 0 0 0;
7a9f7ff6 S	299	@include media-breakpoint-down(md) {
	300	padding-top: 31px;
	301	}
9ce2074c S	302	h4 {
9ce2074c S	303	margin-bottom: 1.25rem;
22cfab2d	304	color: rgba($blue-grey-900, .6);
49baba87 S	305	font-size: 20px;
49baba87 S	306	line-height: 28px;
9ce2074c S	307	}
	308	ul {
	309	li {
49baba87	310	font-size: 14px;
9ce2074c S	311	margin-bottom: .75rem;
9ce2074c S	312	a {
22cfab2d	313	color: rgba($blue-grey-900, .6);
9ce2074c S	314	text-decoration: none;
9ce2074c S	315	&:hover {
22cfab2d	316	color: $blue-grey-900;
9ce2074c S	317	text-decoration: underline;
	318	}
	319	}
	320	}
	321	}
	322	.btn-lg {
	323	margin-bottom: 2.75rem;
9ce2074c S	324	}
	325	.btn-sm {
	326	box-shadow: none;
	327	&:hover {
	328	box-shadow: none;
	329	}
9ce2074c	330	}
b6d1f3b7 S	331	}
b6d1f3b7 S	332
22cfab2d S	333	#copyright {
	334	background-color: rgba($blue-grey-900, .06);
	335	padding: 1rem 0;
49baba87 S	336	p {
	337	font-size: 12px;
	338	line-height: 16px;
	339	}
b6eb5162 S	340	}
b6eb5162 S	341
22cfab2d	342	// Animation
22cfab2d	343	@keyframes scroll {
eafb8738	344	0%, 100% { transform: translateY(30%); }
efb8b657	345	50% { transform: translateY(50%); }
97ed546d	346	}