fix Webkit column latest news and feature section

diff --git a/static/scss/style.scss b/static/scss/style.scss
index 069b99a068cb560b6c627f49d66e8ebcc5046bc7..970343af9346a67cd35a77a41966dc94fc0d31d1 100644 (file)
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -359,7 +359,7 @@ section.intro {
 }
 
 section.content-section {
-               padding: 3rem 0;
+       padding: 3rem 0;
        @include media-breakpoint-up(md) {
                padding: 72px 0;
        }

diff --git a/templates/index.html b/templates/index.html
index ff119a9114005d612ed90bc27a409509b4be81fa..b1c76484a12b18e2ea656e5a7095b3b36cb9b625 100644 (file)
--- a/templates/index.html
+++ b/templates/index.html
@@ -28,110 +28,122 @@
                        <h3 class="display-2 text-center">{{ _("Secure up your network with IPFire") }}</h2>
        
                        <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">
+                               <div class="col-md-6 col-lg-4 mb-6 pb-lg-5 d-flex">
+                                       <div class="feature_icons align-self-stretch">
                                                <svg class="icon i_lg i_shield"><use xlink:href="#shield"/></svg>
                                        </div>
-                                       <h4 class="pb-3">{{ _("Firewall") }}</h4>
-                                       <p>
-                                               {% if lang == "de" %}
-                                                       Die vielseitige und State-of-the-Art Firewall-Engine
-                                                       in IPFire ist auch in komplexen Netzen übersichtlich
-                                                       und leicht zu nutzen.
-                                               {% else %}
-                                                       IPFire comes with a versatile and state of the art
-                                                       firewall engine that makes even the most complex
-                                                       setups easy to administer.
-                                               {% end %}
-                                       </p>
+                                       <div class="flex-column">
+                                               <h4 class="pb-3">{{ _("Firewall") }}</h4>
+                                               <p>
+                                                       {% if lang == "de" %}
+                                                               Die vielseitige und State-of-the-Art Firewall-Engine
+                                                               in IPFire ist auch in komplexen Netzen übersichtlich
+                                                               und leicht zu nutzen.
+                                                       {% else %}
+                                                               IPFire comes with a versatile and state of the art
+                                                               firewall engine that makes even the most complex
+                                                               setups easy to administer.
+                                                       {% end %}
+                                               </p>
+                                       </div>
                                </div>
                                
-                               <div class="col-md-6 col-lg-4 mb-6">
-                                       <div class="feature_icons">
+                               <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                       <div class="feature_icons align-self-stretch">
                                                <svg class="icon i_lg i_speed"><use xlink:href="#speed"/></svg>
                                        </div>
-                                       <h4 class="pb-3">{{ _("Performance") }}</h4>
-                                       <p>
-                                               {% if lang == "de" %}
-                                                       Auch schnelle Netze und der Einsatz
-                                                       auf eingebetteten Systemen sind kein Problem
-                                                       für IPFire.
-                                               {% else %}
-                                                       IPFire is ready for high performance networks
-                                                       and running evenly well on embedded hardware.
-                                               {% end %}
-                                       </p>    
+                                       <div class="flex-column">
+                                               <h4 class="pb-3">{{ _("Performance") }}</h4>
+                                               <p>
+                                                       {% if lang == "de" %}
+                                                               Auch schnelle Netze und der Einsatz
+                                                               auf eingebetteten Systemen sind kein Problem
+                                                               für IPFire.
+                                                       {% else %}
+                                                               IPFire is ready for high performance networks
+                                                               and running evenly well on embedded hardware.
+                                                       {% end %}
+                                               </p>
+                                       </div>  
                                </div>
                                
-                               <div class="col-md-6 col-lg-4 mb-6">
-                                       <div class="feature_icons">
+                               <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                       <div class="feature_icons align-self-stretch">
                                                <svg class="icon i_lg i_couch"><use xlink:href="#couch"/></svg>
                                        </div>
-                                       <h4 class="pb-3">{{ _("Easy to use") }}</h4>
-                                       <p class="mb-1">
-                                               {% if lang == "de" %}
-                                                       IPFire ist in 15 bis 20 Minuten installiert
-                                                       und kommt mit vielen wichtigen Funktionen für
-                                                       professionelle Netzwerke.
-                                               {% else %}
-                                                       IPFire is set up easily in 15 to 20 minutes
-                                                       but also comes with expert features that
-                                                       are needed in professional networks.
-                                               {% end %}
-                                       </p>
+                                       <div class="flex-column">
+                                               <h4 class="pb-3">{{ _("Easy to use") }}</h4>
+                                               <p class="mb-1">
+                                                       {% if lang == "de" %}
+                                                               IPFire ist in 15 bis 20 Minuten installiert
+                                                               und kommt mit vielen wichtigen Funktionen für
+                                                               professionelle Netzwerke.
+                                                       {% else %}
+                                                               IPFire is set up easily in 15 to 20 minutes
+                                                               but also comes with expert features that
+                                                               are needed in professional networks.
+                                                       {% end %}
+                                               </p>
+                                       </div>
                                </div>
 
-                               <div class="col-md-6 col-lg-4 mb-6">
-                                       <div class="feature_icons">
+                               <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                       <div class="feature_icons align-self-stretch">
                                                <svg class="icon i_lg i_security"><use xlink:href="#security"/></svg>
                                        </div>
-                                       <h4 class="pb-3">{{ _("Network Security") }}</h4>
-                                       <p>
-                                               {% if lang == "de" %}
-                                                       Sicherheit hat höchste Priorität.
-                                                       Das gehärtete System schützt sich selbst vor
-                                                       Angriffen aus dem Netz.
-                                               {% else %}
-                                                       IPFire is designed for high security.
-                                                       It is hardened to protect itself from attacks
-                                                       from the network.
-                                               {% end %}
-                                       </p>
+                                       <div class="flex-column"
+                                               <h4 class="pb-3">{{ _("Network Security") }}</h4>
+                                               <p>
+                                                       {% if lang == "de" %}
+                                                               Sicherheit hat höchste Priorität.
+                                                               Das gehärtete System schützt sich selbst vor
+                                                               Angriffen aus dem Netz.
+                                                       {% else %}
+                                                               IPFire is designed for high security.
+                                                               It is hardened to protect itself from attacks
+                                                               from the network.
+                                                       {% end %}
+                                               </p>
+                                       </div>
                                </div>
                                
-                               <div class="col-md-6 col-lg-4 mb-6">
-                                       <div class="feature_icons">
+                               <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                       <div class="feature_icons align-self-stretch">
                                                <svg class="icon i_lg i_github"><use xlink:href="#github"/></svg>
                                        </div>
-                                       <h4 class="pb-3">{{ _("Open Source") }}</h4>
-                                       <p>
-                                               {% if lang == "de" %}
-                                                       IPFire ist freie Software, welche von einer offenen
-                                                       Community tagtäglich verbessert wird.
-                                               {% else %}
-                                                       IPFire is free software and developed by an open community,
-                                                       that improves it every single day.
-                                               {% end %}
-                                       </p>
+                                       <div class="flex-column">
+                                               <h4 class="pb-3">{{ _("Open Source") }}</h4>
+                                               <p>
+                                                       {% if lang == "de" %}
+                                                               IPFire ist freie Software, welche von einer offenen
+                                                               Community tagtäglich verbessert wird.
+                                                       {% else %}
+                                                               IPFire is free software and developed by an open community,
+                                                               that improves it every single day.
+                                                       {% end %}
+                                               </p>
+                                       </div>
                                </div>
                                
-                               <div class="col-md-6 col-lg-4 mb-6">
-                                       <div class="feature_icons">
+                               <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                       <div class="feature_icons align-self-stretch">
                                                <svg class="icon i_lg i_heart"><use xlink:href="#heart"/></svg>
                                        </div>
-                                       <h4 class="pb-3">{{ _("Trusted by thousands") }}</h4>
-                                       <p>
-                                               {% if lang == "de" %}
-                                                       IPFire wird in Europa entwickelt,
-                                                       <a href="http://fireinfo.ipfire.org/statistics/geo-locations">in vielen Ländern</a>
-                                                       überall auf der Welt eingesetzt, und bietet
-                                                       Internetzugang für hundertausende Nutzer jeden Tag.
-                                               {% else %}
-                                                       IPFire is developed in Europe and used all over the world
-                                                       <a href="http://fireinfo.ipfire.org/statistics/geo-locations">in hundreds of countries</a>
-                                                       by hundreds of thousands of users every day.
-                                               {% end %}
-                                       </p>
+                                       <div class="flex-column">
+                                               <h4 class="pb-3">{{ _("Trusted by thousands") }}</h4>
+                                               <p>
+                                                       {% if lang == "de" %}
+                                                               IPFire wird in Europa entwickelt,
+                                                               <a href="http://fireinfo.ipfire.org/statistics/geo-locations">in vielen Ländern</a>
+                                                               überall auf der Welt eingesetzt, und bietet
+                                                               Internetzugang für hundertausende Nutzer jeden Tag.
+                                                       {% else %}
+                                                               IPFire is developed in Europe and used all over the world
+                                                               <a href="http://fireinfo.ipfire.org/statistics/geo-locations">in hundreds of countries</a>
+                                                               by hundreds of thousands of users every day.
+                                                       {% end %}
+                                               </p>
+                                       </div>
                                </div>
                        </div>
                        
@@ -145,7 +157,7 @@
        <section id="news" class="content-section">
                <div class="container">
                        <div class="row">
-                               <div class="col col-md-6 col-lg-5 mb-6">
+                               <div class="col-12 col-md-6 col-lg-5 mb-6">
                                        <h2 class="display-2 mb-6">Latest Release</h2>
                                        <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 }}">
@@ -166,7 +178,7 @@
                                        <p>A complete history of IPFire releases is available at our <a href="/news">News</a> page.</p>
                                </div>
                                
-                               <div class="col col-md-6 col-lg-5 offset-lg-2">
+                               <div class="col-12 col-md-6 col-lg-5 offset-lg-2">
                                        <h2 class="display-2 mb-6">What&rsquo;s going on?</h2>
                                        <dl class="dl-horizontal">
                                                {% for type, item in latest_news %}