From: Michael Tremer <michael.tremer@ipfire.org>
Date: Tue, 7 May 2019 14:18:00 +0000 (+0100)
Subject: features: Fix width of icons
X-Git-Url: http://git.ipfire.org/?p=ipfire.org.git;a=commitdiff_plain;h=b6d6d80f2e08b46a2074a92ccdef7786b137a75a

features: Fix width of icons

Those icons grew out of the box in some browsers.

Fixes: #11925
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 61c372f8..c0280318 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -124,6 +124,22 @@ header {
 	}
 }
 
+.icon-large {
+	font-size: 8em;
+
+	@include media-breakpoint-up(md) {
+		font-size: 6em;
+	}
+
+	@include media-breakpoint-up(lg) {
+		font-size: 8em;
+	}
+
+	@include media-breakpoint-up(xl) {
+		font-size: 10em;
+	}
+}
+
 footer {
 	margin-top: auto;
 
diff --git a/src/templates/static/features.html b/src/templates/static/features.html
index 6c9504d5..9585f5fe 100644
--- a/src/templates/static/features.html
+++ b/src/templates/static/features.html
@@ -23,7 +23,7 @@
 		<div class="container">
 			<div class="row">
 				<div class="col-12 col-md-3 d-flex align-items-center justify-content-center justify-content-md-start">
-					<span class="fas fa-shield-alt fa-10x text-primary my-5"></span>
+					<span class="fas fa-shield-alt icon-large text-primary my-5"></span>
 				</div>
 
 				<div class="col-12 col-md-9">
@@ -60,7 +60,7 @@
 		<div class="container">
 			<div class="row flex-md-row-reverse">
 				<div class="col-12 col-md-3 d-flex align-items-center justify-content-center justify-content-md-end">
-					<span class="fas fa-fire fa-10x my-5"></span>
+					<span class="fas fa-fire icon-large my-5"></span>
 				</div>
 
 				<div class="col-12 col-md-9">
@@ -114,7 +114,7 @@
 		<div class="container">
 			<div class="row">
 				<div class="col-12 col-md-3 d-flex align-items-center justify-content-center justify-content-md-start">
-					<span class="fas fa-network-wired fa-10x my-5"></span>
+					<span class="fas fa-network-wired icon-large my-5"></span>
 				</div>
 
 				<div class="col-12 col-md-9">
@@ -155,7 +155,7 @@
 		<div class="container">
 			<div class="row flex-md-row-reverse">
 				<div class="col-12 col-md-3 d-flex align-items-center justify-content-center justify-content-md-end">
-					<span class="fas fa-box-open fa-10x my-5"></span>
+					<span class="fas fa-box-open icon-large my-5"></span>
 				</div>
 
 				<div class="col-12 col-md-9">
@@ -210,7 +210,7 @@
 		<div class="container">
 			<div class="row">
 				<div class="col-12 col-md-3 d-flex align-items-center justify-content-center justify-content-md-start">
-					<span class="fas fa-angle-double-right fa-10x my-5"></span>
+					<span class="fas fa-angle-double-right icon-large my-5"></span>
 				</div>
 
 				<div class="col-12 col-md-9">
@@ -243,7 +243,7 @@
 		<div class="container">
 			<div class="row flex-md-row-reverse">
 				<div class="col-12 col-md-3 d-flex align-items-center justify-content-center justify-content-md-end">
-					<span class="fas fa-server fa-10x my-5"></span>
+					<span class="fas fa-server icon-large my-5"></span>
 				</div>
 
 				<div class="col-12 col-md-9">