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

// Custom stuff
@import '_custom_nav';
@import '_buttons';


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

// Fonts
h1 {
	line-height: 3rem;
}

h2 {
	line-height: 2.75rem;
}

h3 {
	line-height: 2rem;
	@include media-breakpoint-down(sm) {
		font-size: 1em;
	}
}

h4 {
	font-weight: 500;
	line-height: 1.75rem;
	@include media-breakpoint-down(sm) {
		font-size: 1em;
	}
}

h5 {
	line-height: 1.5rem;
}

p {
	line-height: 1.5rem;
	@include media-breakpoint-down(sm) {
		font-size: .85em;
	}
	&.lead {
		line-height: 2rem;
		@include media-breakpoint-down(md) {
			font-size: 1.5rem;
			line-height: 2rem;
		}
		@include media-breakpoint-down(sm) {
			font-size: 1rem;
			line-height: 1.5rem;
		}
	}
}

.display-2 {
	margin-bottom: 4rem;
	@include media-breakpoint-down(md) {
		font-size: 2.5rem;
		line-height: 3.5rem;
		margin-bottom: 3rem;
	}
	@include media-breakpoint-down(sm) {
		font-size: 2rem;
		line-height: 2.75rem;
	}
}

.display-4 {
	@include media-breakpoint-down(xs) {
		font-size: .875rem;
		line-height: 1.25rem;
	}
}

small {
	line-height: 1rem;
	@include media-breakpoint-down(sm) {
		font-size: .75em;
	}
}

.truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

// Icons
.icon {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
	vertical-align: -.15rem;
	overflow: hidden;
	margin-right: .5rem;
}

.i_arrow_down {
	margin: 0;
	position: absolute;
	left: .75rem;
	top: -.25rem;
	animation: scroll 1.5s ease-in-out infinite;
	@include media-breakpoint-down(xs) {
		width: 1.75rem !important;
		height: 1.75rem !important;
		left: .25rem;
		top: -.5rem;
	}
}

.i_lg {
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	transform: translateY(-.35rem);
	fill: $red_900;
}

.i_sm {
	vertical-align: top;
	transform: translateY(-.10rem);
}

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: 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(sm) {
				height: 120px;
				width: 93px;
				margin-right: 32px;
				top: 8px;
			}
		}
	}
	.page-scroll {
		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,
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.lead {
		color: $blue-grey-600;
		position: absolute;
		top: calc(50% - 1.25rem);
		width: 100%;
		font-size: 1.25em;
	}
}

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

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);
	}
	ul {
		li {
			font-size: $small-font-size;
			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;
}

// 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";
	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
55edf6f3 S	56	// Custom stuff
	57	@import '_custom_nav';
	58	@import '_buttons';
	59
22cfab2d	60
a6a4d1cf	61	// Colors
a6a4d1cf S	62	.amber-800 {
	63	color: $amber-800;
	64	}
	65
22cfab2d	66	// Fonts
22cfab2d S	67	h1 {
	68	line-height: 3rem;
	69	}
	70
	71	h2 {
	72	line-height: 2.75rem;
	73	}
	74
	75	h3 {
	76	line-height: 2rem;
7a9f7ff6 S	77	@include media-breakpoint-down(sm) {
	78	font-size: 1em;
	79	}
22cfab2d S	80	}
22cfab2d S	81
ccd81281	82	h4 {
32efbb1f	83	font-weight: 500;
22cfab2d	84	line-height: 1.75rem;
32efbb1f S	85	@include media-breakpoint-down(sm) {
	86	font-size: 1em;
	87	}
22cfab2d S	88	}
	89
	90	h5 {
	91	line-height: 1.5rem;
	92	}
	93
	94	p {
	95	line-height: 1.5rem;
7a9f7ff6 S	96	@include media-breakpoint-down(sm) {
	97	font-size: .85em;
	98	}
22cfab2d S	99	&.lead {
	100	line-height: 2rem;
	101	@include media-breakpoint-down(md) {
	102	font-size: 1.5rem;
	103	line-height: 2rem;
	104	}
	105	@include media-breakpoint-down(sm) {
	106	font-size: 1rem;
	107	line-height: 1.5rem;
	108	}
	109	}
	110	}
	111
	112	.display-2 {
	113	margin-bottom: 4rem;
	114	@include media-breakpoint-down(md) {
	115	font-size: 2.5rem;
	116	line-height: 3.5rem;
	117	margin-bottom: 3rem;
	118	}
	119	@include media-breakpoint-down(sm) {
	120	font-size: 2rem;
	121	line-height: 2.75rem;
	122	}
	123	}
	124
	125	.display-4 {
7a9f7ff6	126	@include media-breakpoint-down(xs) {
22cfab2d S	127	font-size: .875rem;
	128	line-height: 1.25rem;
	129	}
	130	}
	131
	132	small {
	133	line-height: 1rem;
7a9f7ff6 S	134	@include media-breakpoint-down(sm) {
	135	font-size: .75em;
	136	}
22cfab2d S	137	}
	138
	139	.truncate {
	140	width: 100%;
	141	white-space: nowrap;
	142	overflow: hidden;
	143	text-overflow: ellipsis;
	144	}
	145
	146	// Images
	147	img {
	148	&.img-fluid {
	149	width: 100%;
	150	max-width: 100%;
	151	height: auto;
	152	}
	153	}
	154
	155	// Icons
22cfab2d S	156	.icon {
	157	width: 1.5rem;
	158	height: 1.5rem;
	159	fill: currentColor;
	160	vertical-align: -.15rem;
	161	overflow: hidden;
	162	margin-right: .5rem;
	163	}
	164
	165	.i_arrow_down {
	166	margin: 0;
efb8b657 S	167	position: absolute;
	168	left: .75rem;
	169	top: -.25rem;
eafb8738	170	animation: scroll 1.5s ease-in-out infinite;
7a9f7ff6	171	@include media-breakpoint-down(xs) {
32efbb1f S	172	width: 1.75rem !important;
	173	height: 1.75rem !important;
	174	left: .25rem;
	175	top: -.5rem;
efb8b657	176	}
22cfab2d S	177	}
	178
	179	.i_lg {
	180	width: 2.5rem;
	181	height: 2.5rem;
	182	margin: 0;
efb8b657	183	transform: translateY(-.35rem);
22cfab2d S	184	fill: $red_900;
	185	}
	186
	187	.i_sm {
efb8b657 S	188	vertical-align: top;
efb8b657 S	189	transform: translateY(-.10rem);
22cfab2d S	190	}
	191
	192	footer {
	193	.btn-toolbar .icon {
efb8b657 S	194	height: 2.25rem;
efb8b657 S	195	width: 2.25rem;
22cfab2d S	196	fill: rgba($blue-grey-900, .6);
	197	}
	198	.i_heart {
efb8b657 S	199	vertical-align: top;
	200	transform: translateY(-.15rem);
	201	@include media-breakpoint-down(sm) {
	202	transform: translateY(-.75rem);
	203	}
22cfab2d S	204	}
	205	}
	206
97ed546d	207
22cfab2d	208	// Sections
97ed546d S	209	section.intro {
	210	min-height: 100vh;
	211	background-image: url('../img/header-background.jpg');
	212	background-size: cover;
	213	background-attachment: fixed;
	214	background-position: center top;
	215	position: relative;
	216	.branding {
69a9b33d	217	padding-top: 6rem;
7a9f7ff6	218	@include media-breakpoint-up(sm) {
69a9b33d S	219	padding-top: 192px;
69a9b33d S	220	}
97ed546d S	221	margin-bottom: 64px;
	222	text-align: center;
	223	color: $blue-grey-600;
	224	h1 {
	225	font-weight: 300 !important;
	226	color: $blue-grey-900;
7a9f7ff6	227	@include media-breakpoint-down(xs) {
69a9b33d S	228	font-size: 4.5rem;
69a9b33d S	229	}
97ed546d S	230	strong {
	231	font-weight: 700 !important;
	232	}
	233	}
	234	h1:before {
	235	content: "";
69a9b33d S	236	height: 60px;
69a9b33d S	237	width: 76px;
97ed546d S	238	background-image: url('../img/ipfire-tux.png');
	239	background-repeat: no-repeat;
	240	background-position: center center;
	241	background-size: contain;
97ed546d S	242	display: inline-block;
97ed546d S	243	position: relative;
69a9b33d	244	top: 4px;
7a9f7ff6	245	@include media-breakpoint-up(sm) {
69a9b33d S	246	height: 120px;
	247	width: 93px;
	248	margin-right: 32px;
	249	top: 8px;
	250	}
97ed546d S	251	}
97ed546d S	252	}
97ed546d S	253	.page-scroll {
	254	position: absolute;
	255	bottom: 48px;
97ed546d S	256	left: 50%;
	257	transform: translateX(-50%);
	258	.btn {
ac8ab589 S	259	width: 36px;
ac8ab589 S	260	height: 36px;
97ed546d	261	fill: $red_900;
7a9f7ff6	262	@include media-breakpoint-up(sm) {
69a9b33d S	263	width: 64px;
	264	height: 64px;
	265	}
a6a4d1cf S	266	&:hover .i_arrow_down {
	267	fill: white;
	268	}
97ed546d S	269	}
97ed546d S	270	}
1e5bc9c9 S	271	}
	272
	273	section.content-section {
6a63d20a	274	padding: 3rem 0;
7a9f7ff6	275	@include media-breakpoint-up(sm) {
22cfab2d	276	padding: 72px 0;
ccd81281	277	}
1e5bc9c9 S	278	}
1e5bc9c9 S	279
22cfab2d S	280	.feature_icons {
	281	width: 40px;
	282	height: 100%;
	283	float: left;
	284	margin-right: .75rem;
1e5bc9c9 S	285	}
1e5bc9c9 S	286
b6d1f3b7 S	287	section#news,
b6d1f3b7 S	288	footer {
22cfab2d S	289	background-color: rgba($blue-grey-900, .06);
	290	}
	291
	292	section#news {
	293	color: rgba($blue-grey-900, .6);
	294	h2 {
	295	color: $blue-grey-900;
	296	}
1e5bc9c9 S	297	}
	298
	299	section#wishlist {
	300	background-image: url('../img/wishlist-background.jpg');
	301	background-size: cover;
	302	background-position: center center;
b6d1f3b7 S	303	}
b6d1f3b7 S	304
3d770ad7 S	305	.progress {
	306	background-color: rgba(255, 255, 255, .2);
	307	}
	308
22cfab2d S	309	.bg-progress {
	310	background-image: linear-gradient(to right, $yellow-700, $amber-800);
	311	}
	312
b6d1f3b7 S	313	section#fireinfo {
	314	border-bottom: 1px solid rgba($blue-grey-900, .2);
	315	}
	316
22cfab2d S	317	.circle {
	318	position: relative;
	319	p.lead {
	320	color: $blue-grey-600;
	321	position: absolute;
	322	top: calc(50% - 1.25rem);
	323	width: 100%;
32efbb1f	324	font-size: 1.25em;
22cfab2d	325	}
b6d1f3b7 S	326	}
b6d1f3b7 S	327
7a9f7ff6 S	328	section#appliances {
	329	padding-bottom: 48px;
	330	}
	331
b6d1f3b7 S	332	footer {
b6d1f3b7 S	333	padding: 3rem 0 0 0;
7a9f7ff6 S	334	@include media-breakpoint-down(md) {
	335	padding-top: 31px;
	336	}
9ce2074c S	337	h4 {
9ce2074c S	338	margin-bottom: 1.25rem;
22cfab2d	339	color: rgba($blue-grey-900, .6);
9ce2074c S	340	}
	341	ul {
	342	li {
	343	font-size: $small-font-size;
	344	margin-bottom: .75rem;
	345	a {
22cfab2d	346	color: rgba($blue-grey-900, .6);
9ce2074c S	347	text-decoration: none;
9ce2074c S	348	&:hover {
22cfab2d	349	color: $blue-grey-900;
9ce2074c S	350	text-decoration: underline;
	351	}
	352	}
	353	}
	354	}
	355	.btn-lg {
	356	margin-bottom: 2.75rem;
9ce2074c S	357	}
	358	.btn-sm {
	359	box-shadow: none;
	360	&:hover {
	361	box-shadow: none;
	362	}
9ce2074c	363	}
b6d1f3b7 S	364	}
b6d1f3b7 S	365
22cfab2d S	366	#copyright {
	367	background-color: rgba($blue-grey-900, .06);
	368	padding: 1rem 0;
b6eb5162 S	369	}
b6eb5162 S	370
22cfab2d	371	// Animation
22cfab2d	372	@keyframes scroll {
eafb8738	373	0%, 100% { transform: translateY(30%); }
efb8b657	374	50% { transform: translateY(50%); }
97ed546d	375	}