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 61c372f8313bdd58bf24ad6df86f935a6879af15..c0280318b807785ffdb44d090da4be0fefb813e6 100644 (file)
--- 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 6c9504d50a5f1a52610998b287e4ddef379fb048..9585f5fe7b677f9192c6bac5f084fc3f7c292c8c 100644 (file)
--- 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">