X-Git-Url: http://git.ipfire.org/?p=people%2Fshoehn%2Fipfire.org.git;a=blobdiff_plain;f=static%2Fscss%2Fstyle.scss;h=34a68875021bd745b0bf1ca22336243509dda837;hp=ce7879db1b2ed530c672c9a4374418ae305e7ea6;hb=e9131ad613a40860150be7d1a168f296a0f27256;hpb=7a9f7ff65c826092d1bdf7b3b0333afb4f719bb5

diff --git a/static/scss/style.scss b/static/scss/style.scss
index ce7879d..34a6887 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -21,7 +21,7 @@
 // @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/forms";
 @import "bootstrap-4.0.0-alpha.6/scss/buttons";
 
 // Components
@@ -35,9 +35,9 @@
 //@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/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/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";
@@ -53,90 +53,64 @@
 // Utility classes
 @import "bootstrap-4.0.0-alpha.6/scss/utilities";
 
+// Lightbox
+@import "photoswipe/main";
+@import "photoswipe/default-skin/default-skin";
 
-// Colors
-.amber-800 {
-	color: $amber-800;
-}
+// Donation Box
+@import "_donation";
 
-// Fonts
-h1 {
-	line-height: 3rem;
+body {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
 }
 
-h2 {
-	line-height: 2.75rem;
+.container {
+	width: 100%;
+	max-width: 1200px;
+	flex: 1;
 }
 
-h3 {
-	line-height: 2rem;
-	@include media-breakpoint-down(sm) {
-		font-size: 1em;
-	}
-}
+// Custom stuff
+@import '_fonts';
+@import '_nav';
+@import '_buttons';
+@import '_icons';
 
-h4 {
-	font-weight: 500;
-	line-height: 1.75rem;
-	@include media-breakpoint-down(sm) {
-		font-size: 1em;
-	}
+
+
+// Colors
+.amber-800 {
+	color: $amber-800;
+	border-color: $amber-800;
 }
 
-h5 {
-	line-height: 1.5rem;
+.green-600 {
+	color: $green-600;
+	border-color: $green-600;
 }
 
-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;
-		}
-	}
+.red-900 {
+	color: $red_900;
+	border-color: $red_900;
 }
 
-.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;
-	}
+.blue-700{
+	color: $blue-700;
+	border-color: $blue-700;
 }
 
-.display-4 {
-	@include media-breakpoint-down(xs) {
-		font-size: .875rem;
-		line-height: 1.25rem;
-	}
+.blue_grey_300 {
+	color: $blue_grey_300;
 }
 
-small {
-	line-height: 1rem;
-	@include media-breakpoint-down(sm) {
-		font-size: .75em;
-	}
+.bg-blue-grey-900 {
+	background-color: $blue-grey-900;
 }
 
-.truncate {
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.bg-blue-grey-50 {
+	background-color: $blue-grey-50;
 }
 
 // Images
@@ -148,42 +122,6 @@ img {
 	}
 }
 
-// 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 {
@@ -200,161 +138,6 @@ footer {
 	}
 }
 
-// Buttons
-.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);
-}
-
-button.navbar-toggler div {
-	font-family: 'Ubuntu', sans-serif;
-	font-size: 1rem;
-	display: inline-block;
-	position: relative;
-	top: -4px;
-}
-
-.btn {
-	height: 36px;
-	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;
-	}
-	@include media-breakpoint-down(sm) {
-		font-size: .875rem;
-	}
-}
-
-.btn-outline-primary,
-.btn-outline-secondary {
-	transition: background-color .25s ease-in-out;
-	&:hover {
-		transition: background-color .25s ease-in-out;
-	}
-}
-
-.btn-lg {
-	height: 48px;
-	margin: 0 24px;
-	@include media-breakpoint-down(sm) {
-		height: 36px;
-		margin: 0 8px;
-		padding: 1rem;
-		font-size: .875rem;
-		line-height: 0;
-	}
-}
-
-.btn-md {
-	font-size: 0.875rem;
-	line-height: 1.25rem;
-	padding: .4rem 1rem .5rem 1rem;
-}
-
-.btn-block {
-	margin: 0 0 1.5rem 0;
-	@include media-breakpoint-up(md) {
-		margin: 0 0 2rem 0;	
-	}
-	@include media-breakpoint-down(xs) {
-		font-size: .875rem;
-		line-height: 0;
-	}
-}
-
-button:focus {
-	outline: none;
-}
-
-// Top Navigation
-.fixed-top {
-	transition: background-color 700ms linear;
-	.navbar {
-		width: 100%;
-		@include media-breakpoint-down(md) {
-			padding: .5rem 0;
-		}
-		.navbar-toggler-left {
-			left: -1rem;
-		}
-	}
-	.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;
-	}
-}
-
-a.nav-link {
-	padding-bottom: 30px;
-	display: block;
-	position: relative;
-	&:after {
-		content: "";
-		border-bottom: 2px solid $red_900;
-		position: absolute;
-		transform: scaleX(0);
-		width: 100%;
-		left: 0;
-		padding: inherit;
-		transition: transform .3s ease-out, color .3s ease-out;
-	}
-}
-
-a.nav-link:hover {
-	color: $red_900;
-}
-
-a.nav-link:hover:after {
-	transform: scaleX(1);
-}
-
-.navbar-brand {
-	font-size: 1.25rem;
-	@include media-breakpoint-up(sm) {
-		font-size: 2rem;
-	}
-	font-weight: 300;
-	strong {
-		font-weight: 900;
-	}
-	img {
-		margin-right: 1rem;
-		transform: translateY(-5px);
-	}
-}
 
 // Sections
 section.intro {
@@ -376,7 +159,9 @@ section.intro {
 			font-weight: 300 !important;
 			color: $blue-grey-900;
 			@include media-breakpoint-down(xs) {
-				font-size: 4.5rem;
+				font-size: 72px;
+				line-height: 88px;
+				margin-bottom: 0;
 			}
 			strong {
 				font-weight: 700 !important;
@@ -401,22 +186,25 @@ section.intro {
 			}
 		}
 	}
-	.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;
-			}
+}
+
+.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;
 		}
 	}
 }
@@ -436,6 +224,7 @@ section.content-section {
 }
 
 section#news,
+section#support,
 footer {
 	background-color: rgba($blue-grey-900, .06);
 }
@@ -467,12 +256,11 @@ section#fireinfo {
 
 .circle {
 	position: relative;
-	p.lead {
+	p.fireinfo_per {
 		color: $blue-grey-600;
 		position: absolute;
-		top: calc(50% - 1.25rem);
+		top: calc(50% - 18px);
 		width: 100%;
-		font-size: 1.25em;
 	}
 }
 
@@ -480,6 +268,32 @@ 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) {
@@ -488,10 +302,12 @@ footer {
 	h4 {
 		margin-bottom: 1.25rem;
 		color: rgba($blue-grey-900, .6);
+		font-size: 20px;
+		line-height: 28px;
 	}
 	ul {
 		li {
-			font-size: $small-font-size;
+			font-size: 14px;
 			margin-bottom: .75rem;
 			a {
 				color: rgba($blue-grey-900, .6);
@@ -517,6 +333,10 @@ footer {
 #copyright {
 	background-color: rgba($blue-grey-900, .06);
 	padding: 1rem 0;
+	p {
+		font-size: 12px;
+		line-height: 16px;
+	}
 }
 
 // Animation