From: Sven <sven.hoehn@posteo.de>
Date: Sun, 2 Apr 2017 18:39:06 +0000 (+0200)
Subject: add responsive layout.
X-Git-Url: http://git.ipfire.org/?p=people%2Fshoehn%2Fipfire.org.git;a=commitdiff_plain;h=69a9b33d51aa5d8ac5d827543021940b786533fd

add responsive layout.
spacing not right.
---

diff --git a/static/css/style.css b/static/css/style.css
index 4be90d1..a310821 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1425,7 +1425,7 @@ mark,
 .btn {
   display: inline-block;
   font-weight: normal;
-  line-height: 1.25;
+  line-height: 0.95;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -5010,8 +5010,26 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
     -webkit-transform: translateY(2px);
             transform: translateY(2px); }
 
+.btn-outline-primary,
+.btn-outline-secondary {
+  -webkit-transition: background-color .25s ease-in-out;
+  transition: background-color .25s ease-in-out; }
+  .btn-outline-primary:hover,
+  .btn-outline-secondary:hover {
+    -webkit-transition: background-color .25s ease-in-out;
+    transition: background-color .25s ease-in-out; }
+
 .btn-lg, .btn-group-lg > .btn {
   margin: 0 24px; }
+  @media (max-width: 991px) {
+    .btn-lg, .btn-group-lg > .btn {
+      margin: 0 8px;
+      font-size: 14px; } }
+
+.btn-sm small, .btn-group-sm > .btn small {
+  display: inline-block;
+  -webkit-transform: translateY(-2px);
+          transform: translateY(-2px); }
 
 .btn-block {
   margin: 0 0 2rem 0; }
@@ -5019,9 +5037,22 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
 .fixed-top {
   -webkit-transition: background-color 700ms linear;
   transition: background-color 700ms linear; }
+  .fixed-top .navbar {
+    width: 100%; }
+  .fixed-top .navbar-brand {
+    opacity: 0;
+    -webkit-transition: opacity 700ms linear;
+    transition: opacity 700ms linear; }
+    @media (min-width: 992px) {
+      .fixed-top .navbar-brand {
+        opacity: 1; } }
 
 .scrolled {
   background-color: rgba(255, 255, 255, 0.96); }
+  .scrolled .navbar-brand {
+    opacity: 1;
+    -webkit-transition: opacity 700ms linear;
+    transition: opacity 700ms linear; }
 
 .navbar a {
   color: #263238; }
@@ -5039,6 +5070,13 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
 
 .display-2 {
   margin-bottom: 4rem; }
+  @media (max-width: 991px) {
+    .display-2 {
+      font-size: 32px; } }
+
+@media (max-width: 991px) {
+  .display-4 {
+    font-size: 14px; } }
 
 .bg-progress {
   background-image: -webkit-linear-gradient(left, #fbc02d, #ff8f00);
@@ -5052,42 +5090,56 @@ section.intro {
   background-position: center top;
   position: relative; }
   section.intro .branding {
-    padding-top: 192px;
+    padding-top: 6rem;
     margin-bottom: 64px;
     text-align: center;
     color: #546e7a; }
+    @media (min-width: 768px) {
+      section.intro .branding {
+        padding-top: 192px; } }
     section.intro .branding h1 {
       font-weight: 300 !important;
       color: #263238; }
+      @media (max-width: 991px) {
+        section.intro .branding h1 {
+          font-size: 4.5rem; } }
       section.intro .branding h1 strong {
         font-weight: 700 !important; }
     section.intro .branding 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; }
+      @media (min-width: 768px) {
+        section.intro .branding h1:before {
+          height: 120px;
+          width: 93px;
+          margin-right: 32px;
+          top: 8px; } }
   section.intro .page-scroll {
     position: absolute;
     bottom: 48px;
-    width: 66px;
     left: 50%;
     -webkit-transform: translateX(-50%);
             transform: translateX(-50%); }
     section.intro .page-scroll .btn {
-      width: 64px;
-      height: 64px;
+      width: 32px;
+      height: 32px;
       fill: #b71c1c; }
+      @media (min-width: 768px) {
+        section.intro .page-scroll .btn {
+          width: 64px;
+          height: 64px; } }
       section.intro .page-scroll .btn:hover {
         fill: white; }
       section.intro .page-scroll .btn svg {
-        width: 24px;
+        width: 12px;
         height: auto;
         position: absolute;
         top: 50%;
@@ -5095,6 +5147,9 @@ section.intro {
                 transform: translate(-50%, -60%);
         -webkit-animation: scroll 3s infinite;
                 animation: scroll 3s infinite; }
+        @media (min-width: 768px) {
+          section.intro .page-scroll .btn svg {
+            width: 24px; } }
 
 section.content-section {
   padding: 96px 0; }
@@ -5183,21 +5238,6 @@ footer {
     -webkit-transform: translate(-50%, -60%);
             transform: translate(-50%, -60%); } }
 
-.donate small {
-  display: inline-block;
-  -webkit-transform: translateY(-2px);
-          transform: translateY(-2px); }
-  .donate small: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;
-    -webkit-transform: translateY(5px);
-            transform: translateY(5px); }
-
 .btn-red900 {
   color: #fff !important;
   background-color: #b71c1c;
@@ -5257,3 +5297,7 @@ footer {
     background-color: #11171a;
     background-image: none;
     border-color: #0d1114; }
+
+@media (max-width: 991px) {
+  p.lead {
+    font-size: 1rem; } }
diff --git a/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss b/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss
index 7446ce3..2285122 100755
--- a/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss
+++ b/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss
@@ -109,7 +109,7 @@ $small-font-size: .875rem;
 
 $btn-padding-x:                  1rem;
 $btn-padding-y:                  .5rem !default;
-$btn-line-height:                1.25 !default;
+$btn-line-height:                .95;
 $btn-font-weight:                $font-weight-normal !default;
 $btn-box-shadow:                 none;
 $btn-focus-box-shadow:           none;
diff --git a/static/scss/style.scss b/static/scss/style.scss
index 571157d..4115900 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -69,8 +69,25 @@
 	}
 }
 
+.btn-outline-primary,
+.btn-outline-secondary {
+	transition: background-color .25s ease-in-out;
+	&:hover {
+		transition: background-color .25s ease-in-out;
+	}
+}
+
 .btn-lg {
 	margin: 0 24px;
+	@include media-breakpoint-down(md) {
+		margin: 0 8px;
+		font-size: 14px;
+	}
+}
+
+.btn-sm small {
+	display: inline-block;
+	transform: translateY(-2px);
 }
 
 .btn-block {
@@ -79,10 +96,24 @@
 
 .fixed-top {
 	transition: background-color 700ms linear;
+	.navbar {
+		width: 100%;
+	}
+	.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;
+	}
 }
 
 .navbar {
@@ -105,6 +136,15 @@
 
 .display-2 {
 	margin-bottom: 4rem;
+	@include media-breakpoint-down(md) {
+		font-size: 32px;
+	}
+}
+
+.display-4 {
+	@include media-breakpoint-down(md) {
+		font-size: 14px;
+	}
 }
 
 .bg-progress {
@@ -119,51 +159,68 @@ section.intro {
 	background-position: center top;
 	position: relative;
 	.branding {
-		padding-top: 192px;
+		padding-top: 6rem;
+		@include media-breakpoint-up(md) {
+			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(md) {
+				font-size: 4.5rem;
+			}
 			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(md) {
+				height: 120px;
+				width: 93px;
+				margin-right: 32px;
+				top: 8px;
+			}
 		}
 	}
 	.page-scroll {
 		position: absolute;
 		bottom: 48px;
-		width: 66px;
 		left: 50%;
 		transform: translateX(-50%);
 		.btn {
-			width: 64px;
-			height: 64px;
+			width: 32px;
+			height: 32px;
 			fill: $red_900;
+			@include media-breakpoint-up(md) {
+				width: 64px;
+				height: 64px;
+			}
 			&:hover {
 				fill: white;
 			}
 			svg {
-				width: 24px;
+				width: 12px;
 				height: auto;	
 				position: absolute;
 				top: 50%;
 				transform: translate(-50%, -60%);
 				animation: scroll 3s infinite;
+				@include media-breakpoint-up(md) {
+					width: 24px;
+				}
 			}
 		}
 	}
@@ -258,21 +315,6 @@ footer {
   100% { transform: translate(-50%, -60%); }
 }
 
-.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);
-	}
-}
-
 .btn-red900 {
   @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
 }
@@ -281,4 +323,10 @@ footer {
 }
 .btn-bluegrey900 {
   @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
+}
+
+p.lead {
+	@include media-breakpoint-down(md) {
+		font-size: 1rem;
+	}
 }
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 62ec599..3e47bae 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -12,7 +12,6 @@
 		<meta name="description" content="{{ _("IPFire is a free firewall distribution based on Linux.") }}" />
 
 		<!-- styling stuff -->
-		<!-- live site -->
 		<link rel="stylesheet" type="text/css" href="{{ static_url("css/style.css") }}" />
 
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -25,13 +24,13 @@
 	<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
 		
 		<div class="fixed-top">
-			<div class="container">
-				<nav class="navbar navbar-toggleable justify-content-between">
-					<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-						<span class="navbar-toggler-icon"></span>
+			<div class="container d-flex justify-content-between">
+				<nav class="navbar navbar-toggleable-md align-items-md-start">
+					<button class="navbar-toggler navbar-toggler-left pt-4" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+						<svg width="18" height="12" viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-3-6h24v24H-3z"/><path d="M0 12h18v-2H0v2zm0-5h18V5H0v2zm0-7v2h18V0H0z" fill="#000"/></g></svg>
 					</button>
 					
-					<a class="navbar-brand" href="/">
+					<a class="navbar-brand align-self-md-center" href="/">
 						<img src="http://static.ipfire:8891/img/ipfire-tux.png" alt="IPFire Tux" height="40px" />
 						{% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
 							{{ _("IPFire") }}
@@ -46,12 +45,15 @@
 						{% end %}
 					</a>
 					
-					<div id="navbarSupportedContent">
+					<div id="navbarSupportedContent" class="navbar-collapse collapse d-lg-flex justify-content-lg-end pt-lg-2">
 						{% block menu %}
 							{% module Menu() %}
 						{% end block %}
 					</div>
 				</nav>
+				<div class="align-self-start hidden-md-down">
+					<a class="btn btn-red900 btn-sm mt-5" href="/donate"><svg width="20" height="19" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 18.35l-1.45-1.32C3.4 12.36 0 9.28 0 5.5 0 2.42 2.42 0 5.5 0 7.24 0 8.91.81 10 2.09 11.09.81 12.76 0 14.5 0 17.58 0 20 2.42 20 5.5c0 3.78-3.4 6.86-8.55 11.54L10 18.35z" fill="#fff"/></g></svg><small>{{ _("Donate") }}</small></a>
+				</div>
 			</div>
 		</div>
 
@@ -65,7 +67,7 @@
 			<footer class="footer">
 				<div class="container pb-3">
 					<div class="row mb-6">
-						<div class="col-2 links">
+						<div class="col-6 col-md-3 col-lg-2">
 							<h4>{{ _("About") }}</h4>
 
 							<ul class="list-unstyled">
@@ -84,7 +86,7 @@
 							</ul>
 						</div>
 
-						<div class="col-2 links">
+						<div class="col-6 col-md-3 col-lg-2">
 							<h4>{{ _("Support") }}</h4>
 
 							<ul class="list-unstyled">
@@ -97,7 +99,7 @@
 							</ul>
 						</div>
 
-						<div class="col-2 links">
+						<div class="col-6 col-md-3 col-lg-2">
 							<h4>{{ _("Community") }}</h4>
 
 							<ul class="list-unstyled">
@@ -116,7 +118,7 @@
 							</ul>
 						</div>
 
-						<div class="col-2 links">
+						<div class="col-6 col-md-3 col-lg-2">
 							<h4>{{ _("Development") }}</h4>
 
 							<ul class="list-unstyled">
@@ -135,7 +137,7 @@
 							</ul>
 						</div>
 
-						<div class="col-md-4 text-center">
+						<div class="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 version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 19" style="enable-background:new 0 0 20 19;" xml:space="preserve">
 									<g>
@@ -147,7 +149,7 @@
 								{{ _("Donate") }}
 							</a>
 
-							<div class="btn-toolbar justify-content-around">
+							<div class="btn-toolbar justify-content-around col-md-6 offset-md-3">
 								<a class="btn btn-sm" href="http://www.ipfire.org/news.rss">
 									<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-4-4h24v24H-4z"/><path d="M2.18 11.2a2.18 2.18 0 0 1 2.18 2.18c0 1.18-.98 2.18-2.18 2.18-1.18 0-2.18-1-2.18-2.18a2.18 2.18 0 0 1 2.18-2.18zM0 0c8.594 0 15.56 6.966 15.56 15.56h-2.83C12.73 8.53 7.03 2.83 0 2.83V0zm0 5.66c5.468 0 9.9 4.432 9.9 9.9H7.07A7.07 7.07 0 0 0 0 8.49V5.66z" fill="#263238" fill-rule="nonzero"/></g></svg>
 								</a>
@@ -191,6 +193,8 @@
 
 		<script src="{{ static_url("js/jquery.js") }}"></script>
 		<script src="{{ static_url("js/jquery.easing.js") }}"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
 		<script src="{{ static_url("js/site.js") }}"></script>
 	</body>
 </html>
diff --git a/templates/index.html b/templates/index.html
index 93c95be..1bb5c1f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -51,8 +51,8 @@
 		<div class="container">
 			<h3 class="display-2 text-center">{{ _("Secure up your network with IPFire") }}</h2>
 	
-			<div class="row mb-6">
-				<div class="col-4">
+			<div class="row mb-lg-6 mb-md-5">
+				<div class="col-md-6 col-lg-4 mb-6 pb-lg-5">
 					<div class="feature_icons">
 						<svg width="18" height="22" viewBox="0 0 18 22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-3-1h24v24H-3z"/><path d="M9 0L0 4v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V4L9 0zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V11H2V5.3l7-3.11v8.8z" fill="#b71c1c"/></g></svg>
 					</div>
@@ -70,7 +70,7 @@
 					</p>
 				</div>
 				
-				<div class="col-4">
+				<div class="col-md-6 col-lg-4 mb-6">
 					<div class="feature_icons">
 						<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 13a3 3 0 0 1-3-3c0-1.12.61-2.1 1.5-2.61l9.71-5.62-5.53 9.58c-.5.98-1.51 1.65-2.68 1.65zm0-13c1.81 0 3.5.5 4.97 1.32l-2.1 1.21C12 2.19 11 2 10 2a8 8 0 0 0-8 8c0 2.21.89 4.21 2.34 5.65h.01c.39.39.39 1.02 0 1.41-.39.39-1.03.39-1.42.01A9.969 9.969 0 0 1 0 10C0 4.477 4.477 0 10 0zm10 10c0 2.76-1.12 5.26-2.93 7.07-.39.38-1.02.38-1.41-.01a.996.996 0 0 1 0-1.41A7.95 7.95 0 0 0 18 10c0-1-.19-2-.54-2.9L18.67 5C19.5 6.5 20 8.18 20 10z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
 					</div>
@@ -87,7 +87,7 @@
 					</p>	
 				</div>
 				
-				<div class="col-4">
+				<div class="col-md-6 col-lg-4 mb-6">
 					<div class="feature_icons">
 						<svg width="22" height="14" viewBox="0 0 22 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h24v24H0z"/></defs><g transform="translate(-1 -5)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M21 10c-1.1 0-2 .9-2 2v3H5v-3c0-1.1-.9-2-2-2s-2 .9-2 2v5c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-5c0-1.1-.9-2-2-2zm-3-5H6c-1.1 0-2 .9-2 2v2.15c1.16.41 2 1.51 2 2.82V14h12v-2.03c0-1.3.84-2.4 2-2.82V7c0-1.1-.9-2-2-2z" fill="#b71c1c" mask="url(#b)"/></g></svg>
 					</div>
@@ -104,10 +104,8 @@
 						{% end %}
 					</p>
 				</div>
-			</div>
-						
-			<div class="row mb-6 pb-4">
-				<div class="col-4">
+
+				<div class="col-md-6 col-lg-4 mb-6">
 					<div class="feature_icons">
 						<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-2h24v24H-2z"/><path d="M11 16h1a1 1 0 0 1 1 1h7v2h-7a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1H0v-2h7a1 1 0 0 1 1-1h1v-1.66C6.07 13.13 4 10 4 6.67v-4L10 0l6 2.67v4c0 3.33-2.07 6.46-5 7.67V16zM10 2L6 3.69V7h4V2zm0 5v6c1.91-.47 4-2.94 4-5V7h-4z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
 					</div>
@@ -125,7 +123,7 @@
 					</p>
 				</div>
 				
-				<div class="col-4">
+				<div class="col-md-6 col-lg-4 mb-6">
 					<div class="feature_icons">
 						<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-2h24v24H-2z"/><path d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V19c0 .27.16.59.67.5C17.14 18.16 20 14.42 20 10A10 10 0 0 0 10 0z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
 					</div>
@@ -141,7 +139,7 @@
 					</p>
 				</div>
 				
-				<div class="col-4">
+				<div class="col-md-6 col-lg-4 mb-6">
 					<div class="feature_icons">
 						<svg width="20" height="19" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 18.35l-1.45-1.32C3.4 12.36 0 9.28 0 5.5 0 2.42 2.42 0 5.5 0 7.24 0 8.91.81 10 2.09 11.09.81 12.76 0 14.5 0 17.58 0 20 2.42 20 5.5c0 3.78-3.4 6.86-8.55 11.54L10 18.35z" fill="#b71c1c"/></g></svg>
 					</div>
@@ -171,9 +169,9 @@
 	<section id="news" class="content-section">
 		<div class="container">
 			<div class="row">
-				<div class="col-5">
+				<div class="col col-md-5">
 					<h2 class="display-2 mb-6">Latest Release</h2>
-					<p class="mb-2"><small>{{ locale.format_date(latest_release.date, shorter=True) }}</small></p>
+					<p class="mb-3"><small>{{ locale.format_date(latest_release.date, shorter=True) }}</small></p>
 					<h3 class="display-3 mb-5 pb-5"><a href="/news/{{ latest_release.news.slug }}">
 							{{ _("%s has been released!") % latest_release.name }}
 						</a>
@@ -186,7 +184,7 @@
 					<p>A complete history of IPFire releases is available at our <a href="/news">News</a> page.</p>
 				</div>
 				
-				<div class="col-5 offset-2">
+				<div class="col col-md-5 offset-md-2">
 					<h2 class="display-2 mb-6">What&rsquo;s going on?</h2>
 					<dl class="dl-horizontal">
 						{% for type, item in latest_news %}
@@ -253,22 +251,22 @@
 			<h2 class="display-2 text-center">Fire<strong>Info</strong> Statistics</h2>
 			
 			<div class="row pb-5 mb-6">
-				<div class="col-3 text-center">
+				<div class="col-6 col-md-3 text-center">
 					<p class="mb-3"><small>Latest Release</small></p>
 					<h4>2.19 Core 109</h4>	
 				</div>
 				
-				<div class="col-3 text-center">
+				<div class="col-6 col-md-3 text-center">
 					<p class="mb-3"><small>Favorite Kernel</small></p>
 					<h4>3.14.79-ipfire-pae</h4>	
 				</div>
 				
-				<div class="col-3 text-center">
+				<div class="col-6 col-md-3 text-center">
 					<p class="mb-3"><small>Favorite CPU</small></p>
 					<h4>Intel</h4>	
 				</div>
 				
-				<div class="col-3 text-center">
+				<div class="col-6 col-md-3 text-center">
 					<p class="mb-3"><small>Favorite Virtualisation</small></p>
 					<h4>VMWare</h4>	
 				</div>
@@ -284,8 +282,8 @@
 		<div class="container">
 			<h2 class="display-2 text-center">{{ _("Professional Appliances & Services") }}</h2>
 			
-			<div class="row mb-6 pb-6">
-				<div class="col-7">
+			<div class="row mb-lg-6 mb-md-4 pb-6">
+				<div class="col-md-12 col-lg-7 mb-md-6">
 					<p class="lead">
 						{% if lang == "de" %}
 							<a href="http://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> bietet
@@ -300,14 +298,14 @@
 						{% end %}
 					</p>
 				</div>
-				<div class="col-4 offset-1">
+				<div class="col-md-6 offset-md-3 col-lg-4 offset-lg-1">
 					<a class="btn btn-bluegrey900 btn-lg btn-block" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
 					<a class="btn btn-bluegrey900 btn-lg btn-block" href="/hardware">{{ _("Hardware Appliances") }}</a>
 				</div>
 			</div>
-		</div>
-		<div class="row justify-content-center">
-			<img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}">
+			<div class="row justify-content-center">
+				<img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}">
+			</div>
 		</div>
 	</section>
 {% end block %}
diff --git a/templates/modules/menu.html b/templates/modules/menu.html
index 0a42260..f5382c6 100644
--- a/templates/modules/menu.html
+++ b/templates/modules/menu.html
@@ -1,24 +1,20 @@
-<ul class="navbar-nav">
+<ul class="navbar-nav justify-content-lg-end">
 	{% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
 		<li class="nav-item mr-5">
 			<a class="nav-link" href="/features">{{ _("Features") }}</a>
 		</li>
 
-		<li class="nav-item ml-5 mr-5">
+		<li class="nav-item ml-lg-5 mr-lg-5">
 			<a class="nav-link" href="/download">{{ _("Download") }}</a>
 		</li>
 
-		<li class="nav-item ml-5 mr-5">
+		<li class="nav-item ml-lg-5 mr-lg-5">
 			<a class="nav-link" href="/get-support">{{ _("Support") }}</a>
 		</li>
 
-		<li class="nav-item ml-5 mr-5">
+		<li class="nav-item ml-lg-5 mr-lg-5">
 			<a class="nav-link" href="/get-involved">{{ _("Community") }}</a>
 		</li>
-
-		<li class="nav-item ml-5">
-			<a class="btn btn-red900 btn-sm donate" href="/donate"><small>{{ _("Donate") }}</small></a>
-		</li>
 		
 	{% elif hostname == "admin.ipfire.org" %}
 		<li class="nav-item">