From 7a9f7ff65c826092d1bdf7b3b0333afb4f719bb5 Mon Sep 17 00:00:00 2001
From: Sven <sven.hoehn@posteo.de>
Date: Wed, 3 May 2017 17:41:21 +0200
Subject: [PATCH] work on spacing and sizes Viewport 600px wide.

---
 static/css/style.css   | 31 +++++++++++++++++++++++--------
 static/scss/style.scss | 32 ++++++++++++++++++++++++--------
 templates/base.html    | 10 +++++-----
 templates/index.html   |  2 +-
 4 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 469d7f6..a0be2ea 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4980,6 +4980,9 @@ h2 {
 
 h3 {
   line-height: 2rem; }
+  @media (max-width: 767px) {
+    h3 {
+      font-size: 1em; } }
 
 h4 {
   font-weight: 500;
@@ -4993,6 +4996,9 @@ h5 {
 
 p {
   line-height: 1.5rem; }
+  @media (max-width: 767px) {
+    p {
+      font-size: .85em; } }
   p.lead {
     line-height: 2rem; }
     @media (max-width: 991px) {
@@ -5016,13 +5022,16 @@ p {
       font-size: 2rem;
       line-height: 2.75rem; } }
 
-@media (max-width: 767px) {
+@media (max-width: 575px) {
   .display-4 {
     font-size: .875rem;
     line-height: 1.25rem; } }
 
 small {
   line-height: 1rem; }
+  @media (max-width: 767px) {
+    small {
+      font-size: .75em; } }
 
 .truncate {
   width: 100%;
@@ -5050,7 +5059,7 @@ img.img-fluid {
   top: -.25rem;
   -webkit-animation: scroll 1.5s ease-in-out infinite;
           animation: scroll 1.5s ease-in-out infinite; }
-  @media (max-width: 767px) {
+  @media (max-width: 575px) {
     .i_arrow_down {
       width: 1.75rem !important;
       height: 1.75rem !important;
@@ -5195,7 +5204,7 @@ button.navbar-toggler div {
   @media (min-width: 768px) {
     .btn-block {
       margin: 0 0 2rem 0; } }
-  @media (max-width: 767px) {
+  @media (max-width: 575px) {
     .btn-block {
       font-size: .875rem;
       line-height: 0; } }
@@ -5288,13 +5297,13 @@ section.intro {
     margin-bottom: 64px;
     text-align: center;
     color: #546e7a; }
-    @media (min-width: 768px) {
+    @media (min-width: 576px) {
       section.intro .branding {
         padding-top: 192px; } }
     section.intro .branding h1 {
       font-weight: 300 !important;
       color: #263238; }
-      @media (max-width: 767px) {
+      @media (max-width: 575px) {
         section.intro .branding h1 {
           font-size: 4.5rem; } }
       section.intro .branding h1 strong {
@@ -5310,7 +5319,7 @@ section.intro {
       display: inline-block;
       position: relative;
       top: 4px; }
-      @media (min-width: 768px) {
+      @media (min-width: 576px) {
         section.intro .branding h1:before {
           height: 120px;
           width: 93px;
@@ -5326,7 +5335,7 @@ section.intro {
       width: 36px;
       height: 36px;
       fill: #b71c1c; }
-      @media (min-width: 768px) {
+      @media (min-width: 576px) {
         section.intro .page-scroll .btn {
           width: 64px;
           height: 64px; } }
@@ -5335,7 +5344,7 @@ section.intro {
 
 section.content-section {
   padding: 3rem 0; }
-  @media (min-width: 768px) {
+  @media (min-width: 576px) {
     section.content-section {
       padding: 72px 0; } }
 
@@ -5378,8 +5387,14 @@ section#fireinfo {
     width: 100%;
     font-size: 1.25em; }
 
+section#appliances {
+  padding-bottom: 48px; }
+
 footer {
   padding: 3rem 0 0 0; }
+  @media (max-width: 991px) {
+    footer {
+      padding-top: 31px; } }
   footer h4 {
     margin-bottom: 1.25rem;
     color: rgba(38, 50, 56, 0.6); }
diff --git a/static/scss/style.scss b/static/scss/style.scss
index f0b3031..ce7879d 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -70,6 +70,9 @@ h2 {
 
 h3 {
 	line-height: 2rem;
+	@include media-breakpoint-down(sm) {
+		font-size: 1em;
+	}
 }
 
 h4 {
@@ -86,6 +89,9 @@ h5 {
 
 p {
 	line-height: 1.5rem;
+	@include media-breakpoint-down(sm) {
+		font-size: .85em;
+	}
 	&.lead {
 		line-height: 2rem;
 		@include media-breakpoint-down(md) {
@@ -113,7 +119,7 @@ p {
 }
 
 .display-4 {
-	@include media-breakpoint-down(sm) {
+	@include media-breakpoint-down(xs) {
 		font-size: .875rem;
 		line-height: 1.25rem;
 	}
@@ -121,6 +127,9 @@ p {
 
 small {
 	line-height: 1rem;
+	@include media-breakpoint-down(sm) {
+		font-size: .75em;
+	}
 }
 
 .truncate {
@@ -155,7 +164,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;
@@ -255,7 +264,7 @@ button.navbar-toggler div {
 	@include media-breakpoint-up(md) {
 		margin: 0 0 2rem 0;	
 	}
-	@include media-breakpoint-down(sm) {
+	@include media-breakpoint-down(xs) {
 		font-size: .875rem;
 		line-height: 0;
 	}
@@ -357,7 +366,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 +375,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 +393,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 +410,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 +423,7 @@ section.intro {
 
 section.content-section {
 	padding: 3rem 0;
-	@include media-breakpoint-up(md) {
+	@include media-breakpoint-up(sm) {
 		padding: 72px 0;
 	}
 }
@@ -467,8 +476,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);
diff --git a/templates/base.html b/templates/base.html
index b759405..d343b4f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -74,7 +74,7 @@
 			<footer class="footer">
 				<div class="container pb-3">
 					<div class="row mb-6">
-						<div class="col-6 col-md-3 col-lg-2 mb-5">
+						<div class="col-6 col-sm-5 offset-sm-1 col-md-3 col-lg-2 mb-5">
 							<h4>{{ _("About") }}</h4>
 
 							<ul class="list-unstyled">
@@ -93,7 +93,7 @@
 							</ul>
 						</div>
 
-						<div class="col-6 col-md-3 col-lg-2 mb-5">
+						<div class="col-6 col-sm-5 col-md-3 col-lg-2 mb-5">
 							<h4>{{ _("Support") }}</h4>
 
 							<ul class="list-unstyled">
@@ -106,7 +106,7 @@
 							</ul>
 						</div>
 
-						<div class="col-6 col-md-3 col-lg-2 mb-5">
+						<div class="col-6 col-sm-5 offset-sm-1 col-md-3 col-lg-2 mb-5">
 							<h4>{{ _("Community") }}</h4>
 
 							<ul class="list-unstyled">
@@ -125,7 +125,7 @@
 							</ul>
 						</div>
 
-						<div class="col-6 col-md-3 col-lg-2 mb-6">
+						<div class="col-6 col-sm-5 col-md-3 col-lg-2 mb-6">
 							<h4>{{ _("Development") }}</h4>
 
 							<ul class="list-unstyled">
@@ -144,7 +144,7 @@
 							</ul>
 						</div>
 
-						<div class="col-md-12 col-lg-4 pt-md-6 pt-lg-1 text-center">
+						<div class="col-sm-8 offset-sm-2 col-md-12 col-lg-4 pt-md-6 pt-lg-1 text-center">
 							<a class="btn btn-primary btn-lg" href="//www.ipfire.org/donate">
 								<svg class="icon i_heart"><use xlink:href="#heart"/></svg>
 								{{ _("Donate") }}
diff --git a/templates/index.html b/templates/index.html
index c1bd161..2deedf9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -317,7 +317,7 @@
 						{% end %}
 					</p>
 				</div>
-				<div class="col-md-6 offset-md-3 col-lg-4 offset-lg-1">
+				<div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1 mt-sm-5">
 					<a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
 					<a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</a>
 				</div>
-- 
2.39.2