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

diff --git a/static/scss/style.scss b/static/scss/style.scss
index ac7064b..34a6887 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -17,11 +17,11 @@
 // 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/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/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,52 +53,93 @@
 // Utility classes
 @import "bootstrap-4.0.0-alpha.6/scss/utilities";
 
-.btn {
-	text-transform: uppercase;
+// Lightbox
+@import "photoswipe/main";
+@import "photoswipe/default-skin/default-skin";
+
+// Donation Box
+@import "_donation";
+
+body {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
 }
 
-.btn-lg {
-	margin: 0 24px;
+.container {
+	width: 100%;
+	max-width: 1200px;
+	flex: 1;
 }
 
-.btn-block {
-	margin: 0 0 2rem 0;
+// Custom stuff
+@import '_fonts';
+@import '_nav';
+@import '_buttons';
+@import '_icons';
+
+
+
+// Colors
+.amber-800 {
+	color: $amber-800;
+	border-color: $amber-800;
 }
 
-.fixed-top {
-	transition: background-color 700ms linear;
+.green-600 {
+	color: $green-600;
+	border-color: $green-600;
 }
 
-.scrolled {
-	background-color: rgba(255, 255, 255, .96);
+.red-900 {
+	color: $red_900;
+	border-color: $red_900;
 }
 
-.navbar {
-	a {
-		color: $blue-grey-900;
-	}
-	.btn {
-		margin-top: .15rem;
-	}
+.blue-700{
+	color: $blue-700;
+	border-color: $blue-700;
 }
 
-.navbar-brand {
-	font-size: 2rem;
-	font-weight: 300;
-	img {
-		margin-right: 1rem;
-		transform: translateY(-5px);
-	}
+.blue_grey_300 {
+	color: $blue_grey_300;
 }
 
-.display-2 {
-	margin-bottom: 4rem;
+.bg-blue-grey-900 {
+	background-color: $blue-grey-900;
 }
 
-.bg-progress {
-	background-image: linear-gradient(to right, $yellow-700, $amber-800);
+.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');
@@ -107,69 +148,92 @@ section.intro {
 	background-position: center top;
 	position: relative;
 	.branding {
-		padding-top: 192px;
+		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: 120px;
-			width: 93px;
+			height: 60px;
+			width: 76px;
 			background-image: url('../img/ipfire-tux.png');
 			background-repeat: no-repeat;
 			background-position: center center;
 			background-size: contain;
-			margin-right: 32px;
 			display: inline-block;
 			position: relative;
-			top: 8px;
+			top: 4px;
+			@include media-breakpoint-up(sm) {
+				height: 120px;
+				width: 93px;
+				margin-right: 32px;
+				top: 8px;
+			}
 		}
 	}
-	.page-scroll {
-		position: absolute;
-		bottom: 48px;
-		width: 66px;
-		left: 50%;
-		transform: translateX(-50%);
-		.btn {
+}
+
+.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;
-			fill: $red_900;
-			&:hover {
-				fill: white;
-			}
-			svg {
-				width: 24px;
-				height: auto;	
-				position: absolute;
-				top: 50%;
-				transform: translate(-50%, -60%);
-				animation: scroll 3s infinite;
-			}
+		}
+		&:hover .i_arrow_down {
+			fill: white;
 		}
 	}
 }
 
 section.content-section {
-	padding: 96px 0;
+	padding: 3rem 0;
+	@include media-breakpoint-up(sm) {
+		padding: 72px 0;
+	}
 }
 
-section#features,
-section#appliances,
-section#fireinfo {
-	background-color: $blue-grey-50;
+.feature_icons {
+	width: 40px;
+	height: 100%;
+	float: left;
+	margin-right: .75rem;
 }
 
 section#news,
+section#support,
 footer {
-	background-color: rgba($blue-grey-900, .2);
+	background-color: rgba($blue-grey-900, .06);
+}
+
+section#news {
+	color: rgba($blue-grey-900, .6);
+	h2 {
+		color: $blue-grey-900;
+	}
 }
 
 section#wishlist {
@@ -178,53 +242,105 @@ section#wishlist {
 	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);
 }
 
-#copyright {
-	background-color: rgba($blue-grey-900, .3);
-	padding: 1rem 0;
+.circle {
+	position: relative;
+	p.fireinfo_per {
+		color: $blue-grey-600;
+		position: absolute;
+		top: calc(50% - 18px);
+		width: 100%;
+	}
 }
 
-footer {
-	padding: 3rem 0 0 0;
+section#appliances {
+	padding-bottom: 48px;
 }
 
-.feature_icons {
-	width: 40px;
-	height: 100%;
-	float: left;
-	margin-right: .5rem;
-	svg {
-		width: 32px;
-		height: auto;
-		transform: translateY(-4px);
-		fill: $red_900;
+.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;
 	}
 }
 
-@keyframes scroll {
-  0%   { transform: translate(-50%, -60%); }
-  50% { transform: translate(-50%, -30%); }
-  100% { transform: translate(-50%, -60%); }
+.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;
+	}
 }
 
-.donate small {
-	display: inline-block;
-	transform: translateY(-2px);
-	&:before {
-		content: "";
-		width: 20px;
-		height: 19px;
-		margin-right: 8px;
-		display: inline-block;
-		background-image: url('../img/icons/icon-heart-filled-white.svg');
-		background-size: cover;
-		transform: translateY(5px);
+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;
 	}
 }
 
-.btn-red900 {
-  @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
+// Animation
+@keyframes scroll {
+  0%, 100%   { transform: translateY(30%); }
+  50% { transform: translateY(50%); }
 }
\ No newline at end of file