X-Git-Url: http://git.ipfire.org/?a=blobdiff_plain;f=static%2Fscss%2Fstyle.scss;h=18621ad448460d7d4d222a6882270e7aa886a9aa;hb=2d8cbd13eb9f160d3a61a70a32b11e88b42af0f6;hp=f0b303177a94eaa7cdd4b95616e79cb0497ecb43;hpb=32efbb1feab0c5f6192b378983bce02d6f1dd908;p=ipfire.org.git

diff --git a/static/scss/style.scss b/static/scss/style.scss
index f0b30317..18621ad4 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -53,83 +53,17 @@
 // Utility classes
 @import "bootstrap-4.0.0-alpha.6/scss/utilities";
 
+// Custom stuff
+@import '_fonts';
+@import '_nav';
+@import '_buttons';
+
 
 // Colors
 .amber-800 {
 	color: $amber-800;
 }
 
-// Fonts
-h1 {
-	line-height: 3rem;
-}
-
-h2 {
-	line-height: 2.75rem;
-}
-
-h3 {
-	line-height: 2rem;
-}
-
-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;
-	&.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(sm) {
-		font-size: .875rem;
-		line-height: 1.25rem;
-	}
-}
-
-small {
-	line-height: 1rem;
-}
-
-.truncate {
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 // Images
 img {
 	&.img-fluid {
@@ -155,7 +89,7 @@ img {
 	left: .75rem;
 	top: -.25rem;
 	animation: scroll 1.5s ease-in-out infinite;
-	@include media-breakpoint-down(sm) {
+	@include media-breakpoint-down(xs) {
 		width: 1.75rem !important;
 		height: 1.75rem !important;
 		left: .25rem;
@@ -191,161 +125,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(sm) {
-		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 {
@@ -357,7 +136,7 @@ section.intro {
 	position: relative;
 	.branding {
 		padding-top: 6rem;
-		@include media-breakpoint-up(md) {
+		@include media-breakpoint-up(sm) {
 			padding-top: 192px;
 		}
 		margin-bottom: 64px;
@@ -366,7 +145,7 @@ section.intro {
 		h1 {
 			font-weight: 300 !important;
 			color: $blue-grey-900;
-			@include media-breakpoint-down(sm) {
+			@include media-breakpoint-down(xs) {
 				font-size: 4.5rem;
 			}
 			strong {
@@ -384,7 +163,7 @@ section.intro {
 			display: inline-block;
 			position: relative;
 			top: 4px;
-			@include media-breakpoint-up(md) {
+			@include media-breakpoint-up(sm) {
 				height: 120px;
 				width: 93px;
 				margin-right: 32px;
@@ -401,7 +180,7 @@ section.intro {
 			width: 36px;
 			height: 36px;
 			fill: $red_900;
-			@include media-breakpoint-up(md) {
+			@include media-breakpoint-up(sm) {
 				width: 64px;
 				height: 64px;
 			}
@@ -414,7 +193,7 @@ section.intro {
 
 section.content-section {
 	padding: 3rem 0;
-	@include media-breakpoint-up(md) {
+	@include media-breakpoint-up(sm) {
 		padding: 72px 0;
 	}
 }
@@ -467,8 +246,15 @@ section#fireinfo {
 	}
 }
 
+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);