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

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

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


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

// 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: 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,
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: 161px;
	margin-bottom: 40px;
	.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: 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
91e44d91 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";
c2cbe16d	20	//@import "bootstrap-4.0.0-alpha.6/scss/images";
91e44d91 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";
20df8773	29	//@import "bootstrap-4.0.0-alpha.6/scss/dropdown";
91e44d91	30	@import "bootstrap-4.0.0-alpha.6/scss/button-group";
20df8773 S	31	//@import "bootstrap-4.0.0-alpha.6/scss/input-group";
20df8773 S	32	//@import "bootstrap-4.0.0-alpha.6/scss/custom-forms";
91e44d91 S	33	@import "bootstrap-4.0.0-alpha.6/scss/nav";
91e44d91 S	34	@import "bootstrap-4.0.0-alpha.6/scss/navbar";
20df8773	35	//@import "bootstrap-4.0.0-alpha.6/scss/card";
91e44d91 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";
1423222c	40	// @import "bootstrap-4.0.0-alpha.6/scss/alert";
91e44d91 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";
1423222c S	44	// @import "bootstrap-4.0.0-alpha.6/scss/responsive-embed";
1423222c S	45	// @import "bootstrap-4.0.0-alpha.6/scss/close";
91e44d91 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
1423222c S	54	@import "bootstrap-4.0.0-alpha.6/scss/utilities";
1423222c S	55
f8c4f791 S	56	.container {
	57	width: 100%;
	58	max-width: 1200px;
	59	}
	60
5236a99a	61	// Custom stuff
e3325bcf S	62	@import '_fonts';
e3325bcf S	63	@import '_nav';
5236a99a S	64	@import '_buttons';
5236a99a S	65
c2cbe16d	66
f8c4f791	67
8ef25aa4	68	// Colors
8ef25aa4 S	69	.amber-800 {
	70	color: $amber-800;
	71	}
	72
c2cbe16d S	73	// Images
	74	img {
	75	&.img-fluid {
	76	width: 100%;
	77	max-width: 100%;
	78	height: auto;
	79	}
	80	}
	81
	82	// Icons
c2cbe16d S	83	.icon {
	84	width: 1.5rem;
	85	height: 1.5rem;
	86	fill: currentColor;
	87	vertical-align: -.15rem;
	88	overflow: hidden;
	89	margin-right: .5rem;
	90	}
	91
	92	.i_arrow_down {
	93	margin: 0;
fdae1aac S	94	position: absolute;
	95	left: .75rem;
	96	top: -.25rem;
61eaa9b2	97	animation: scroll 1.5s ease-in-out infinite;
8e18ac98	98	@include media-breakpoint-down(xs) {
609474e4 S	99	width: 1.75rem !important;
	100	height: 1.75rem !important;
	101	left: .25rem;
	102	top: -.5rem;
fdae1aac	103	}
c2cbe16d S	104	}
	105
	106	.i_lg {
	107	width: 2.5rem;
	108	height: 2.5rem;
	109	margin: 0;
fdae1aac	110	transform: translateY(-.35rem);
c2cbe16d S	111	fill: $red_900;
	112	}
	113
	114	.i_sm {
fdae1aac S	115	vertical-align: top;
fdae1aac S	116	transform: translateY(-.10rem);
c2cbe16d S	117	}
	118
	119	footer {
	120	.btn-toolbar .icon {
fdae1aac S	121	height: 2.25rem;
fdae1aac S	122	width: 2.25rem;
c2cbe16d S	123	fill: rgba($blue-grey-900, .6);
	124	}
	125	.i_heart {
fdae1aac S	126	vertical-align: top;
	127	transform: translateY(-.15rem);
	128	@include media-breakpoint-down(sm) {
	129	transform: translateY(-.75rem);
	130	}
c2cbe16d S	131	}
	132	}
	133
1423222c	134
c2cbe16d	135	// Sections
1423222c S	136	section.intro {
	137	min-height: 100vh;
	138	background-image: url('../img/header-background.jpg');
	139	background-size: cover;
	140	background-attachment: fixed;
	141	background-position: center top;
	142	position: relative;
	143	.branding {
82468973	144	padding-top: 6rem;
8e18ac98	145	@include media-breakpoint-up(sm) {
82468973 S	146	padding-top: 192px;
82468973 S	147	}
1423222c S	148	margin-bottom: 64px;
	149	text-align: center;
	150	color: $blue-grey-600;
	151	h1 {
	152	font-weight: 300 !important;
	153	color: $blue-grey-900;
8e18ac98	154	@include media-breakpoint-down(xs) {
f8c4f791 S	155	font-size: 72px;
	156	line-height: 88px;
	157	margin-bottom: 0;
82468973	158	}
1423222c S	159	strong {
	160	font-weight: 700 !important;
	161	}
	162	}
	163	h1:before {
	164	content: "";
82468973 S	165	height: 60px;
82468973 S	166	width: 76px;
1423222c S	167	background-image: url('../img/ipfire-tux.png');
	168	background-repeat: no-repeat;
	169	background-position: center center;
	170	background-size: contain;
1423222c S	171	display: inline-block;
1423222c S	172	position: relative;
82468973	173	top: 4px;
8e18ac98	174	@include media-breakpoint-up(sm) {
82468973 S	175	height: 120px;
	176	width: 93px;
	177	margin-right: 32px;
	178	top: 8px;
	179	}
1423222c S	180	}
1423222c S	181	}
f8c4f791 S	182	}
	183
	184	.page-scroll {
	185	display: block;
	186	visibility: visible;
	187	position: absolute;
	188	bottom: 48px;
	189	left: 50%;
	190	transform: translateX(-50%);
	191	.btn {
	192	width: 36px;
	193	height: 36px;
	194	fill: $red_900;
	195	@include media-breakpoint-up(sm) {
	196	width: 64px;
	197	height: 64px;
	198	}
	199	&:hover .i_arrow_down {
	200	fill: white;
1423222c S	201	}
1423222c S	202	}
4b4334da S	203	}
	204
	205	section.content-section {
e2d13261	206	padding: 3rem 0;
8e18ac98	207	@include media-breakpoint-up(sm) {
c2cbe16d	208	padding: 72px 0;
d8c9a4d4	209	}
4b4334da S	210	}
4b4334da S	211
c2cbe16d S	212	.feature_icons {
	213	width: 40px;
	214	height: 100%;
	215	float: left;
	216	margin-right: .75rem;
4b4334da S	217	}
4b4334da S	218
20df8773 S	219	section#news,
20df8773 S	220	footer {
c2cbe16d S	221	background-color: rgba($blue-grey-900, .06);
	222	}
	223
	224	section#news {
	225	color: rgba($blue-grey-900, .6);
	226	h2 {
	227	color: $blue-grey-900;
	228	}
4b4334da S	229	}
	230
	231	section#wishlist {
	232	background-image: url('../img/wishlist-background.jpg');
	233	background-size: cover;
	234	background-position: center center;
20df8773 S	235	}
20df8773 S	236
61975d93 S	237	.progress {
	238	background-color: rgba(255, 255, 255, .2);
	239	}
	240
c2cbe16d S	241	.bg-progress {
	242	background-image: linear-gradient(to right, $yellow-700, $amber-800);
	243	}
	244
20df8773 S	245	section#fireinfo {
	246	border-bottom: 1px solid rgba($blue-grey-900, .2);
	247	}
	248
c2cbe16d S	249	.circle {
c2cbe16d S	250	position: relative;
f8c4f791	251	p.fireinfo_per {
c2cbe16d S	252	color: $blue-grey-600;
c2cbe16d S	253	position: absolute;
d56f505e	254	top: calc(50% - 18px);
c2cbe16d S	255	width: 100%;
c2cbe16d S	256	}
20df8773 S	257	}
20df8773 S	258
8e18ac98 S	259	section#appliances {
	260	padding-bottom: 48px;
	261	}
	262
0955047d S	263	.features-content {
	264	padding-top: 161px;
	265	margin-bottom: 40px;
	266	.content {
	267	background: white;
	268	border-radius: 4px;
	269	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	270	padding: 40px 24px;
f59b40f6	271	position: relative;
0955047d S	272	}
	273	}
	274
bf5b46d4	275	.divider {
0955047d	276	width: 128px;
bf5b46d4 S	277	height: 4px;
	278	border-radius: 2px;
	279	background-image: linear-gradient(to right, $red_900, $deep_orange_a400);
0955047d S	280	margin: 56px auto 40px auto;
	281	}
	282
20df8773 S	283	footer {
20df8773 S	284	padding: 3rem 0 0 0;
8e18ac98 S	285	@include media-breakpoint-down(md) {
	286	padding-top: 31px;
	287	}
6aa3b1ec S	288	h4 {
6aa3b1ec S	289	margin-bottom: 1.25rem;
c2cbe16d	290	color: rgba($blue-grey-900, .6);
f8c4f791 S	291	font-size: 20px;
f8c4f791 S	292	line-height: 28px;
6aa3b1ec S	293	}
	294	ul {
	295	li {
f8c4f791	296	font-size: 14px;
6aa3b1ec S	297	margin-bottom: .75rem;
6aa3b1ec S	298	a {
c2cbe16d	299	color: rgba($blue-grey-900, .6);
6aa3b1ec S	300	text-decoration: none;
6aa3b1ec S	301	&:hover {
c2cbe16d	302	color: $blue-grey-900;
6aa3b1ec S	303	text-decoration: underline;
	304	}
	305	}
	306	}
	307	}
	308	.btn-lg {
	309	margin-bottom: 2.75rem;
6aa3b1ec S	310	}
	311	.btn-sm {
	312	box-shadow: none;
	313	&:hover {
	314	box-shadow: none;
	315	}
6aa3b1ec	316	}
20df8773 S	317	}
20df8773 S	318
c2cbe16d S	319	#copyright {
	320	background-color: rgba($blue-grey-900, .06);
	321	padding: 1rem 0;
f8c4f791 S	322	p {
	323	font-size: 12px;
	324	line-height: 16px;
	325	}
ac7f3ec6 S	326	}
ac7f3ec6 S	327
c2cbe16d	328	// Animation
c2cbe16d	329	@keyframes scroll {
61eaa9b2	330	0%, 100% { transform: translateY(30%); }
fdae1aac	331	50% { transform: translateY(50%); }
1423222c	332	}