Feature page complete page markup and added new icons
authorSven Hoehn <shoehn@ipfire.org>
Fri, 17 Nov 2017 17:15:01 +0000 (18:15 +0100)
committerSven Hoehn <shoehn@ipfire.org>
Fri, 17 Nov 2017 17:15:01 +0000 (18:15 +0100)
Index page fixed bug 11545 (Learn more button goes nowhere)

14 files changed:
static/css/style.css
static/img/icons/icon-server.svg [new file with mode: 0644]
static/img/icons/icon-verified.svg [new file with mode: 0644]
static/img/icons/icon-warning.svg [new file with mode: 0644]
static/img/icons/icon-wifi.svg [new file with mode: 0644]
static/js/jquery-scrollto.js [new file with mode: 0755]
static/scss/_icons.scss
static/scss/_nav.scss
static/scss/bootstrap-4.0.0-alpha.6/css/bootstrap.css
static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss
static/scss/style.scss
templates/base.html
templates/index.html
templates/static/features.html

index 0057d2d..7b2145a 100644 (file)
@@ -2025,6 +2025,64 @@ tbody.collapse.show {
 .navbar-inverse .navbar-text {
   color: rgba(255, 255, 255, 0.5); }
 
+.badge {
+  display: inline-block;
+  padding: 0.25em 0.4em;
+  font-size: 100%;
+  font-weight: bold;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem; }
+  .badge:empty {
+    display: none; }
+
+.btn .badge {
+  position: relative;
+  top: -1px; }
+
+a.badge:focus, a.badge:hover {
+  color: #fff;
+  text-decoration: none;
+  cursor: pointer; }
+
+.badge-pill {
+  padding-right: 0.6em;
+  padding-left: 0.6em;
+  border-radius: 10rem; }
+
+.badge-default {
+  background-color: #636c72; }
+  .badge-default[href]:focus, .badge-default[href]:hover {
+    background-color: #4b5257; }
+
+.badge-primary {
+  background-color: #0275d8; }
+  .badge-primary[href]:focus, .badge-primary[href]:hover {
+    background-color: #025aa5; }
+
+.badge-success {
+  background-color: #5cb85c; }
+  .badge-success[href]:focus, .badge-success[href]:hover {
+    background-color: #449d44; }
+
+.badge-info {
+  background-color: #5bc0de; }
+  .badge-info[href]:focus, .badge-info[href]:hover {
+    background-color: #31b0d5; }
+
+.badge-warning {
+  background-color: #f0ad4e; }
+  .badge-warning[href]:focus, .badge-warning[href]:hover {
+    background-color: #ec971f; }
+
+.badge-danger {
+  background-color: #d9534f; }
+  .badge-danger[href]:focus, .badge-danger[href]:hover {
+    background-color: #c9302c; }
+
 @keyframes progress-bar-stripes {
   from {
     background-position: 1rem 0; }
@@ -4721,7 +4779,7 @@ h5.fireinfo {
 
 #sidebar {
   padding: 0; }
-  @media (max-width: 991px) {
+  @media (max-width: 767px) {
     #sidebar {
       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
       position: fixed;
@@ -4974,8 +5032,45 @@ button:focus {
   vertical-align: top;
   transform: translateY(-0.1rem); }
 
+.i_features {
+  width: 40px;
+  height: 40px;
+  margin: auto; }
+
+.outline_i {
+  border: solid 4px;
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center; }
+
+.i_verified {
+  fill: #43a047; }
+
+.i_warning {
+  fill: #b71c1c; }
+
+.i_wifi {
+  fill: #1976d2; }
+
+.i_server {
+  fill: #ff8f00; }
+
 .amber-800 {
-  color: #ff8f00; }
+  color: #ff8f00;
+  border-color: #ff8f00; }
+
+.green-600 {
+  color: #43a047;
+  border-color: #43a047; }
+
+.red-900 {
+  color: #b71c1c;
+  border-color: #b71c1c; }
+
+.blue-700 {
+  color: #1976d2;
+  border-color: #1976d2; }
 
 img.img-fluid {
   width: 100%;
@@ -5105,7 +5200,7 @@ section#appliances {
 .features-content {
   padding-top: 88px;
   margin-bottom: 40px; }
-  @media (min-width: 576px) {
+  @media (min-width: 992px) {
     .features-content {
       padding-top: 161px; } }
   .features-content .content {
diff --git a/static/img/icons/icon-server.svg b/static/img/icons/icon-server.svg
new file mode 100644 (file)
index 0000000..c966874
--- /dev/null
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#000" fill-rule="nonzero" d="M13 18h1a1 1 0 0 1 1 1h7v2h-7a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1H2v-2h7a1 1 0 0 1 1-1h1v-2H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-7v2zM4 2h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm5 4h1V4H9v2zm0 8h1v-2H9v2zM5 4v2h2V4H5zm0 8v2h2v-2H5z"/>
+</svg>
diff --git a/static/img/icons/icon-verified.svg b/static/img/icons/icon-verified.svg
new file mode 100644 (file)
index 0000000..ae3511c
--- /dev/null
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0-1h24v24H0z"/>
+        <path fill="#000" d="M12 0L3 4v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V4l-9-4zm-2 16l-4-4 1.41-1.41L10 13.17l6.59-6.59L18 8l-8 8z"/>
+    </g>
+</svg>
diff --git a/static/img/icons/icon-warning.svg b/static/img/icons/icon-warning.svg
new file mode 100644 (file)
index 0000000..e679fec
--- /dev/null
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0-1h24v24H0z"/>
+        <path fill="#000" d="M1 20h22L12 1 1 20zm12-3h-2v-2h2v2zm0-4h-2V9h2v4z"/>
+    </g>
+</svg>
diff --git a/static/img/icons/icon-wifi.svg b/static/img/icons/icon-wifi.svg
new file mode 100644 (file)
index 0000000..253b4f7
--- /dev/null
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0-1h24v24H0z"/>
+        <path fill="#000" d="M1 8l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 1.93 7.08 1.93 1 8zm8 8l3 3 3-3a4.237 4.237 0 0 0-6 0zm-4-4l2 2a7.074 7.074 0 0 1 10 0l2-2C15.14 8.14 8.87 8.14 5 12z"/>
+    </g>
+</svg>
diff --git a/static/js/jquery-scrollto.js b/static/js/jquery-scrollto.js
new file mode 100755 (executable)
index 0000000..7d47976
--- /dev/null
@@ -0,0 +1,260 @@
+/***
+umd: true
+***/
+
+(function () {
+       // Prepare
+       var $, ScrollTo
+       $ = window.jQuery || require('jquery')
+
+       // Fix scrolling animations on html/body on safari
+       $.propHooks.scrollTop = $.propHooks.scrollLeft = {
+               get: function (elem, prop) {
+                       var result = null
+                       if ( elem.tagName === 'HTML' || elem.tagName === 'BODY' ) {
+                               if ( prop === 'scrollLeft' ) {
+                                       result = window.scrollX
+                               }
+                               else if ( prop === 'scrollTop' ) {
+                                       result = window.scrollY
+                               }
+                       }
+                       if ( result == null ) {
+                               result = elem[prop]
+                       }
+                       return result
+               }
+       }
+       $.Tween.propHooks.scrollTop = $.Tween.propHooks.scrollLeft = {
+               get: function (tween) {
+                       return $.propHooks.scrollTop.get(tween.elem, tween.prop)
+               },
+               set: function (tween) {
+                       // Our safari fix
+                       if ( tween.elem.tagName === 'HTML' || tween.elem.tagName === 'BODY' ) {
+                               // Defaults
+                               tween.options.bodyScrollLeft = (tween.options.bodyScrollLeft || window.scrollX)
+                               tween.options.bodyScrollTop = (tween.options.bodyScrollTop || window.scrollY)
+
+                               // Apply
+                               if ( tween.prop === 'scrollLeft' ) {
+                                       tween.options.bodyScrollLeft = Math.round(tween.now)
+                               }
+                               else if ( tween.prop === 'scrollTop' ) {
+                                       tween.options.bodyScrollTop = Math.round(tween.now)
+                               }
+
+                               // Apply
+                               window.scrollTo(tween.options.bodyScrollLeft, tween.options.bodyScrollTop)
+                       }
+                       // jQuery's IE8 Fix
+                       else if ( tween.elem.nodeType && tween.elem.parentNode ) {
+                               tween.elem[tween.prop] = tween.now
+                       }
+               }
+       }
+
+       // jQuery ScrollTo
+       ScrollTo = {
+               // Configuration
+               config: {
+                       duration: 400,
+                       easing: 'swing',
+                       callback: null,
+                       durationMode: 'each',
+                       offsetTop: 0,
+                       offsetLeft: 0
+               },
+
+               // Set Configuration
+               configure: function (options) {
+                       // Apply Options to Config
+                       $.extend(ScrollTo.config, options || {})
+
+                       // Chain
+                       return this
+               },
+
+               // Perform the Scroll Animation for the Collections
+               // We use $inline here, so we can determine the actual offset start for each overflow:scroll item
+               // Each collection is for each overflow:scroll item
+               scroll: function (collections, config) {
+                       // Prepare
+                       var collection, $container, $target, $inline, position,
+                               containerScrollTop, containerScrollLeft,
+                               containerScrollTopEnd, containerScrollLeftEnd,
+                               startOffsetTop, targetOffsetTop, targetOffsetTopAdjusted,
+                               startOffsetLeft, targetOffsetLeft, targetOffsetLeftAdjusted,
+                               scrollOptions,
+                               callback
+
+                       // Determine the Scroll
+                       collection = collections.pop()
+                       $container = collection.$container
+                       $target = collection.$target
+
+                       // Prepare the Inline Element of the Container
+                       $inline = $('<span/>').css({
+                               'position': 'absolute',
+                               'top': '0px',
+                               'left': '0px'
+                       })
+                       position = $container.css('position')
+
+                       // Insert the Inline Element of the Container
+                       $container.css({position: 'relative'})
+                       $inline.appendTo($container)
+
+                       // Determine the top offset
+                       startOffsetTop = $inline.offset().top
+                       targetOffsetTop = $target.offset().top
+                       targetOffsetTopAdjusted = targetOffsetTop - startOffsetTop - parseInt(config.offsetTop, 10)
+
+                       // Determine the left offset
+                       startOffsetLeft = $inline.offset().left
+                       targetOffsetLeft = $target.offset().left
+                       targetOffsetLeftAdjusted = targetOffsetLeft - startOffsetLeft - parseInt(config.offsetLeft, 10)
+
+                       // Determine current scroll positions
+                       containerScrollTop = $container.prop('scrollTop')
+                       containerScrollLeft = $container.prop('scrollLeft')
+
+                       // Reset the Inline Element of the Container
+                       $inline.remove()
+                       $container.css({position: position})
+
+                       // Prepare the scroll options
+                       scrollOptions = {}
+
+                       // Prepare the callback
+                       callback = function () {
+                               // Check
+                               if ( collections.length === 0 ) {
+                                       // Callback
+                                       if ( typeof config.callback === 'function' ) {
+                                               config.callback()
+                                       }
+                               }
+                               else {
+                                       // Recurse
+                                       ScrollTo.scroll(collections, config)
+                               }
+                               // Return true
+                               return true
+                       }
+
+                       // Handle if we only want to scroll if we are outside the viewport
+                       if ( config.onlyIfOutside ) {
+                               // Determine current scroll positions
+                               containerScrollTopEnd = containerScrollTop + $container.height()
+                               containerScrollLeftEnd = containerScrollLeft + $container.width()
+
+                               // Check if we are in the range of the visible area of the container
+                               if ( containerScrollTop < targetOffsetTopAdjusted && targetOffsetTopAdjusted < containerScrollTopEnd ) {
+                                       targetOffsetTopAdjusted = containerScrollTop
+                               }
+                               if ( containerScrollLeft < targetOffsetLeftAdjusted && targetOffsetLeftAdjusted < containerScrollLeftEnd ) {
+                                       targetOffsetLeftAdjusted = containerScrollLeft
+                               }
+                       }
+
+                       // Determine the scroll options
+                       if ( targetOffsetTopAdjusted !== containerScrollTop ) {
+                               scrollOptions.scrollTop = targetOffsetTopAdjusted
+                       }
+                       if ( targetOffsetLeftAdjusted !== containerScrollLeft ) {
+                               scrollOptions.scrollLeft = targetOffsetLeftAdjusted
+                       }
+
+                       // Check to see if the scroll is necessary
+                       if ( $container.prop('scrollHeight') === $container.height() ) {
+                               delete scrollOptions.scrollTop
+                       }
+                       if ( $container.prop('scrollWidth') === $container.width() ) {
+                               delete scrollOptions.scrollLeft
+                       }
+
+                       // Perform the scroll
+                       if ( scrollOptions.scrollTop != null || scrollOptions.scrollLeft != null ) {
+                               $container.animate(scrollOptions, {
+                                       duration: config.duration,
+                                       easing: config.easing,
+                                       complete: callback
+                               })
+                       }
+                       else {
+                               callback()
+                       }
+
+                       // Return true
+                       return true
+               },
+
+               // ScrollTo the Element using the Options
+               fn: function (options) {
+                       // Prepare
+                       var collections, config, $container, container
+                       collections = []
+
+                       // Prepare
+                       var     $target = $(this)
+                       if ( $target.length === 0 ) {
+                               // Chain
+                               return this
+                       }
+
+                       // Handle Options
+                       config = $.extend({}, ScrollTo.config, options)
+
+                       // Fetch
+                       $container = $target.parent()
+                       container = $container.get(0)
+
+                       // Cycle through the containers
+                       while ( ($container.length === 1) && (container !== document.body) && (container !== document) ) {
+                               // Check Container for scroll differences
+                               var containerScrollTop, containerScrollLeft
+                               containerScrollTop = $container.css('overflow-y') !== 'visible' && container.scrollHeight !== container.clientHeight
+                               containerScrollLeft =  $container.css('overflow-x') !== 'visible' && container.scrollWidth !== container.clientWidth
+                               if ( containerScrollTop || containerScrollLeft ) {
+                                       // Push the Collection
+                                       collections.push({
+                                               '$container': $container,
+                                               '$target': $target
+                                       })
+                                       // Update the Target
+                                       $target = $container
+                               }
+                               // Update the Container
+                               $container = $container.parent()
+                               container = $container.get(0)
+                       }
+
+                       // Add the final collection
+                       collections.push({
+                               '$container': $('html'),
+                               // document.body doesn't work in firefox, html works for all
+                               // internet explorer starts at the beggining
+                               '$target': $target
+                       })
+
+                       // Adjust the Config
+                       if ( config.durationMode === 'all' ) {
+                               config.duration /= collections.length
+                       }
+
+                       // Handle
+                       ScrollTo.scroll(collections, config)
+
+                       // Chain
+                       return this
+               }
+       }
+
+       // Apply our extensions to jQuery
+       $.ScrollTo = $.ScrollTo || ScrollTo
+       $.fn.ScrollTo = $.fn.ScrollTo || ScrollTo.fn
+
+       // Export
+       return ScrollTo
+}).call(this)
index c3eb103..cc679dc 100644 (file)
 .i_sm {
        vertical-align: top;
        transform: translateY(-.10rem);
+}
+
+.i_features {
+       width: 40px;
+       height: 40px;
+       margin: auto;   
+}
+
+.outline_i {
+       border: solid 4px;
+       width: 80px;
+       height: 80px;
+       display: flex;
+       align-items: center;
+}
+
+.i_verified {
+       fill: $green-600;
+}
+
+.i_warning {
+       fill: $red_900;
+}
+
+.i_wifi {
+       fill: $blue-700;
+}
+
+.i_server {
+       fill: $amber-800;
 }
\ No newline at end of file
index a7ea606..4a69e1d 100644 (file)
@@ -229,7 +229,7 @@ body.Involved li.nav-item a.community {
 
 #sidebar {
        padding: 0;
-       @include media-breakpoint-down(md) {
+       @include media-breakpoint-down(sm) {
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16),
                                0 1px 2px 0 rgba(0, 0, 0, 0.23);
                position: fixed;
index 0835477..2512fe1 100644 (file)
@@ -3187,7 +3187,7 @@ tbody.collapse.show {
 .badge {
   display: inline-block;
   padding: 0.25em 0.4em;
-  font-size: 75%;
+  font-size: 100%;
   font-weight: bold;
   line-height: 1;
   color: #fff;
index 6a0264f..dfd00e2 100755 (executable)
@@ -205,3 +205,24 @@ $nav-disabled-link-color:       $gray-light !default;
 // Navbar
 $navbar-padding-x:                  $spacer;
 $navbar-padding-y:                  $spacer;
+
+// Badges
+
+$badge-default-bg:            $gray-light !default;
+$badge-primary-bg:            $brand-primary !default;
+$badge-success-bg:            $brand-success !default;
+$badge-info-bg:               $brand-info !default;
+$badge-warning-bg:            $brand-warning !default;
+$badge-danger-bg:             $brand-danger !default;
+
+$badge-color:                 $white !default;
+$badge-link-hover-color:      $white !default;
+$badge-font-size:             100%;
+$badge-font-weight:           $font-weight-bold !default;
+$badge-padding-x:             .4em !default;
+$badge-padding-y:             .25em !default;
+
+$badge-pill-padding-x:        .6em !default;
+// Use a higher than normal value to ensure completely rounded edges when
+// customizing padding or font-size on labels.
+$badge-pill-border-radius:    10rem !default;
index e3b3f40..45e67dd 100644 (file)
@@ -35,7 +35,7 @@
 //@import "bootstrap-4.0.0-alpha.6/scss/card";
 // @import "bootstrap-4.0.0-alpha.6/scss/breadcrumb";
 // @import "bootstrap-4.0.0-alpha.6/scss/pagination";
-// @import "bootstrap-4.0.0-alpha.6/scss/badge";
+@import "bootstrap-4.0.0-alpha.6/scss/badge";
 // @import "bootstrap-4.0.0-alpha.6/scss/jumbotron";
 // @import "bootstrap-4.0.0-alpha.6/scss/alert";
 @import "bootstrap-4.0.0-alpha.6/scss/progress";
@@ -77,6 +77,22 @@ body {
 // Colors
 .amber-800 {
        color: $amber-800;
+       border-color: $amber-800;
+}
+
+.green-600 {
+       color: $green-600;
+       border-color: $green-600;
+}
+
+.red-900 {
+       color: $red_900;
+       border-color: $red_900;
+}
+
+.blue-700{
+       color: $blue-700;
+       border-color: $blue-700;
 }
 
 // Images
@@ -237,7 +253,7 @@ section#appliances {
 .features-content {
        padding-top: 88px;
        margin-bottom: 40px;
-       @include media-breakpoint-up(sm) {
+       @include media-breakpoint-up(lg) {
                padding-top: 161px;
        }
        .content {
index 1921398..ab3431c 100644 (file)
                        
                        <symbol id="couch" viewBox="0 0 24 24">
                                <defs><path id="a" d="M0 0h24v24H0z"/></defs><g><mask id="b"><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" mask="url(#b)"/></g>
-                       </symbol>               
+                       </symbol>       
                </svg>
        </body>
 </html>
index bb32d36..bf68124 100644 (file)
                        
                        <div class="row justify-content-center pt-0 pt-md-4">
                                <a class="btn btn-primary btn-lg px-4 px-md-6" href="/get-started">{{ _("Get Started") }}</a>
-                               <a class="btn btn-white btn-lg px-4 px-md-6" href="/learn-more">{{ _("Learn more") }}</a>
+                               <a class="btn btn-white btn-lg px-4 px-md-6" href="/features">{{ _("Learn more") }}</a>
                        </div>
                </div>
        </section>
index b8ba1cf..25c415a 100644 (file)
@@ -5,7 +5,7 @@
 {% block container %}
        <div class="container features-content">
                <div class="row">
-                       <nav id="sidebar" class="col-sm-12 col-md-3" role="dropdown">
+                       <nav id="sidebar" class="col-12 col-md-3" role="dropdown">
                                <input type="checkbox" id="menu">
                                <label for="menu" onclick></label>
                                <ul class="nav flex-column features_nav">
@@ -37,7 +37,7 @@
                                </ul>
                        </nav>
                
-               <section class="content col-sm-12 col-md-9">    
+               <section class="content col-12 col-md-9">       
                        <section id="about">
                                <h3 class="headline">About IP<strong>Fire</strong></h3>
                                <h5 class="subheadline">The Open Source Firewall Distribution</h5>
                                                in allen eingesetzten Komponenten beseitigt sind.
                                        </p>
                                        <p class="copy">
-                                               <span class="label label-success">IPFire 2.15 - Core Update 77</span>
-                                               <a href="http://planet.ipfire.org/post/feature-highlights-ipfire-2-15-1-hardening-the-system">Ab IPFire 2.15</a>
+                                               <span class="badge badge-success">IPFire 2.15 - Core Update 77</span>
+                                               <a href="//planet.ipfire.org/post/feature-highlights-ipfire-2-15-1-hardening-the-system">Ab IPFire 2.15</a>
                                                wird der IPFire/Linux-Kernel mit dem <a href="http://grsecurity.net">grsecurity</a>-Patchset gepatcht.
                                                Dies schützt den Kernel proaktiv gegen eine Vielzahl an Attacken -
                                                vornehmlich gegen zero-day-Exploits in dem ganze Klassen an
                                                components they utilize.
                                        </p>
                                        <p class="copy">
-                                               <span class="label label-success">IPFire 2.15 - Core Update 77</span>
-                                               <a href="http://planet.ipfire.org/post/feature-highlights-ipfire-2-15-1-hardening-the-system">Since IPFire 2.15</a>,
+                                               <span class="badge badge-success">IPFire 2.15 - Core Update 77</span>
+                                               <a href="//planet.ipfire.org/post/feature-highlights-ipfire-2-15-1-hardening-the-system">Since IPFire 2.15</a>,
                                                the IPFire Linux kernel is patched with the
-                                               <a href="http://grsecurity.net">grsecurity</a> patchset, which
+                                               <a href="//grsecurity.net">grsecurity</a> patchset, which
                                                pro-actively hardens the kernel against various forms of attacks.
                                                Most importantly, it protects from zero-day exploits by
                                                eliminating entire bug classes and exploit vectors.
                                                        Einsatzort und -zweck und alle Systeme in einem Segment werden
                                                        mit der gleichen Sicherheitspolicy behandelt:
                                                </p>
-               
-                                               <table class="table table-striped table-bordered">
-                                                       <tbody>
-                                                               <tr>
-                                                                       <td style="background-color: green; color: white;">
-                                                                               <strong>Green</strong>
-                                                                       </td>
-                                                                       <td>
-                                                                               Grün repräsentiert die "sichere" Zone.
-                                                                               In diese Zone gelangen alle herkömmlichen
-                                                                               Clients, welche meist mit dem Kabelnetzwerk
-                                                                               verbunden sind. Von hier aus können die Clients
-                                                                               uneingeschränkt auf alle anderen Zonen zugreifen.
-                                                                       </td>
-                                                               </tr>
-                                                               <tr>
-                                                                       <td style="background-color: red; color: white;">
-                                                                               <strong>Red</strong>
-                                                                       </td>
-                                                                       <td>
-                                                                               Rot impliziert "Gefahr" - also die Verbindung zum
-                                                                               Internet.
-                                                                               Nichts von hier aus darf die Firewall passieren,
-                                                                               außer dies ist explizit vom Administrator erlaubt.
-                                                                       </td>
-                                                               </tr>
-                                                               <tr>
-                                                                       <td style="background-color: darkblue; color: white;">
-                                                                               <strong>Blue</strong>
-                                                                       </td>
-                                                                       <td>
-                                                                               Blau repräsentiert das drahtlose Segment des
-                                                                               Netzwerks (aufgrund der Farbe des Himmels).
-                                                                               Da Wireless-Clients von Natur aus ein größeres
-                                                                               Gefahrenpotential sind, muss für jedes System
-                                                                               in diesem Teil der Zugang zum Internet gesondert
-                                                                               erlaubt werden.
-                                                                       </td>
-                                                               </tr>
-                                                               <tr>
-                                                                       <td style="background-color: orange; color: white;">
-                                                                               <strong>Orange</strong>
-                                                                       </td>
-                                                                       <td>
-                                                                               Das orangene Netzwerk wird auch als demilitarisierte
-                                                                               Zone (DMZ) bezeichnet.
-                                                                               Alle Server, die aus dem Internet erreichbar sind
-                                                                               gehören in dieses Netz um kein Sicherheitsrisiko
-                                                                               für andere lokale Systeme zu sein.
-                                                                       </td>
-                                                               </tr>
-                                                       </tbody>
-                                               </table>
+                                               
+                                               <div class="row d-flex align-items-center mb-6 mb-md-5">
+                                                       <div class="green-600 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
+                                                               <svg class="icon i_features i_verified"><use xlink:href="#verified"/></svg>
+                                                       </div>
+                                                       <p class="copy green-600 col-12 col-md-10 m-0">
+                                                               Grün repräsentiert die "sichere" Zone.
+                                                               In diese Zone gelangen alle herkömmlichen
+                                                               Clients, welche meist mit dem Kabelnetzwerk
+                                                               verbunden sind. Von hier aus können die Clients
+                                                               uneingeschränkt auf alle anderen Zonen zugreifen.
+                                                       </p>
+                                               </div>
+                                               
+                                               <div class="row d-flex align-items-center mb-6 mb-md-5">
+                                                       <div class="red-900 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
+                                                               <svg class="icon i_features i_warning"><use xlink:href="#warning"/></svg>
+                                                       </div>
+                                                       <p class="copy red-900 col-12 col-md-10 m-0">
+                                                               Rot impliziert "Gefahr" - also die Verbindung zum
+                                                               Internet.
+                                                               Nichts von hier aus darf die Firewall passieren,
+                                                               außer dies ist explizit vom Administrator erlaubt
+                                                       </p>
+                                               </div>
+                                               
+                                               <div class="row d-flex align-items-center mb-6 mb-md-5">
+                                                       <div class="blue-700 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
+                                                               <svg class="icon i_features i_wifi"><use xlink:href="#wifi"/></svg>
+                                                       </div>
+                                                       <p class="copy blue-700 col-12 col-md-10 m-0">
+                                                               Blau repräsentiert das drahtlose Segment des
+                                                               Netzwerks (aufgrund der Farbe des Himmels).
+                                                               Da Wireless-Clients von Natur aus ein größeres
+                                                               Gefahrenpotential sind, muss für jedes System
+                                                               in diesem Teil der Zugang zum Internet gesondert
+                                                               erlaubt werden.
+                                                       </p>
+                                               </div>
+                                               
+                                               <div class="row d-flex align-items-center mb-5">
+                                                       <div class="amber-800 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
+                                                               <svg class="icon i_features i_server"><use xlink:href="#server"/></svg>
+                                                       </div>
+                                                       <p class="copy amber-800 col-12 col-md-10 m-0">
+                                                               Das orangene Netzwerk wird auch als demilitarisierte
+                                                               Zone (DMZ) bezeichnet.
+                                                               Alle Server, die aus dem Internet erreichbar sind
+                                                               gehören in dieses Netz um kein Sicherheitsrisiko
+                                                               für andere lokale Systeme zu sein.
+                                                       </p>
+                                               </div>
                
                                                <p class="copy">
-                                                       <span class="label label-success">IPFire 2.15 - Core Update 77</span>
+                                                       <span class="badge badge-success">IPFire 2.15 - Core Update 77</span>
                                                        Mit IPFire 2.15 wurde die grafische Benutzeroberfläche der Firewall komplett
                                                        überarbeitet und mit vielen Funktionen erweitert.
                                                        Unter anderem gibt es nun eine Gruppenverwaltung für Hosts und Dienste.
                                                </p>
                
                                                <p class="copy">
-                                                       <a href="http://wiki.ipfire.org/en/configuration/firewall/start">
+                                                       <a href="//wiki.ipfire.org/en/configuration/firewall/start">
                                                                Firewall-Dokumentation
                                                        </a>
                                                </p>
                                                        These different segments may be enabled separately, depending on your requirements.
                                                        Each segment represents a group of computers who share a common security level:
                                                </p>
-               
-                                               <table class="table table-striped table-bordered">
-                                                       <tbody>
-                                                               <tr>
-                                                                       <td style="background-color: green; color: white;">
-                                                                               <strong>Green</strong>
-                                                                       </td>
-                                                                       <td>
-                                                                               Green represents a "safe" area.
-                                                                               This is where all regular clients will reside.
-                                                                               It is usually comprised of a wired, local network.
-                                                                               Clients on Green can access all other network
-                                                                               segments without restriction.
-                                                                       </td>
-                                                               </tr>
-                                                               <tr>
-                                                                       <td style="background-color: red; color: white;">
-                                                                               <strong>Red</strong>
-                                                                       </td>
-                                                                       <td>
-                                                                               Red indicates "danger" or the connection to the Internet.
-                                                                               Nothing from Red is permitted to pass through the
-                                                                               firewall unless specifically configured by the
-                                                                               administrator.
-                                                                       </td>
-                                                               </tr>
-                                                               <tr>
-                                                                       <td style="background-color: darkblue; color: white;">
-                                                                               <strong>Blue</strong>
-                                                                       </td>
-                                                                       <td>
-                                                                               Blue represents the "wireless" part of the local
-                                                                               network (chosen because it's the color of the sky).
-                                                                               Since the wireless network has the potential for abuse,
-                                                                               it is uniquely identified and specific rules govern
-                                                                               clients on it.
-                                                                               Clients on this network segment must be explicitly
-                                                                               allowed before they may access the network.
-                                                                       </td>
-                                                               </tr>
-                                                               <tr>
-                                                                       <td style="background-color: orange; color: white;">
-                                                                               <strong>Orange</strong>
-                                                                       </td>
-                                                                       <td>
-                                                                               Orange is referred to as the "demilitarized zone" (DMZ).
-                                                                               Any servers which are publicly accessible are separated
-                                                                               from the rest of the network here to limit security
-                                                                               breaches.
-                                                                       </td>
-                                                               </tr>
-                                                       </tbody>
-                                               </table>
+                                               
+                                               <div class="row d-flex align-items-center mb-6 mb-md-5">
+                                                       <div class="green-600 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
+                                                               <svg class="icon i_features i_verified"><use xlink:href="#verified"/></svg>
+                                                       </div>
+                                                       <p class="copy green-600 col-12 col-md-10 m-0">
+                                                               Green represents a "safe" area.
+                                                               This is where all regular clients will reside.
+                                                               It is usually comprised of a wired, local network.
+                                                               Clients on Green can access all other network
+                                                               segments without restriction.
+                                                       </p>
+                                               </div>
+                                               
+                                               <div class="row d-flex align-items-center mb-6 mb-md-5">
+                                                       <div class="red-900 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
+                                                               <svg class="icon i_features i_warning"><use xlink:href="#warning"/></svg>
+                                                       </div>
+                                                       <p class="copy red-900 col-12 col-md-10 m-0">
+                                                               Red indicates "danger" or the connection to the Internet.
+                                                               Nothing from Red is permitted to pass through the
+                                                               firewall unless specifically configured by the
+                                                               administrator.
+                                                       </p>
+                                               </div>
+                                               
+                                               <div class="row d-flex align-items-center mb-6 mb-md-5">
+                                                       <div class="blue-700 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
+                                                               <svg class="icon i_features i_wifi"><use xlink:href="#wifi"/></svg>
+                                                       </div>
+                                                       <p class="copy blue-700 col-12 col-md-10 m-0">
+                                                               Blue represents the "wireless" part of the local
+                                                               network (chosen because it's the color of the sky).
+                                                               Since the wireless network has the potential for abuse,
+                                                               it is uniquely identified and specific rules govern
+                                                               clients on it.
+                                                               Clients on this network segment must be explicitly
+                                                               allowed before they may access the network.
+                                                       </p>
+                                               </div>
+                                               
+                                               <div class="row d-flex align-items-center mb-5">
+                                                       <div class="amber-800 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
+                                                               <svg class="icon i_features i_server"><use xlink:href="#server"/></svg>
+                                                       </div>
+                                                       <p class="copy amber-800 col-12 col-md-10 m-0">
+                                                               Orange is referred to as the "demilitarized zone" (DMZ).
+                                                               Any servers which are publicly accessible are separated
+                                                               from the rest of the network here to limit security
+                                                               breaches.
+                                                       </p>
+                                               </div>
                
                                                <p class="copy">
                                                        <span class="label label-success">IPFire 2.15 - Core Update 77</span>
                                                </p>
                
                                                <p class="copy">
-                                                       <a href="http://wiki.ipfire.org/en/configuration/firewall/start">
+                                                       <a href="//wiki.ipfire.org/en/configuration/firewall/start">
                                                                Firewall Documentation
                                                        </a>
                                                </p>
                                        </p>
                                        <p class="copy">
                                                Qualitätssicherung ist jetzt eine Aufgabe für alle.
-                                               Mehr dazu auf <a href="http://pakfire.ipfire.org/">pakfire.ipfire.org</a>.
+                                               Mehr dazu auf <a href="//pakfire.ipfire.org/">pakfire.ipfire.org</a>.
                                        </p>
        
                                        <hr class="separator">
                                        </p>
                                        <p class="copy">
                                                Quality assurance became more social right now. Check it
-                                               out at <a href="http://pakfire.ipfire.org/">pakfire.ipfire.org</a>.
+                                               out at <a href="//pakfire.ipfire.org/">pakfire.ipfire.org</a>.
                                        </p>
                                {% end %}
                        </section>
                                        <p class="copy">
                                                Es werden alle gängigen Breitbandzugangsarten wie auch mobile Zugänge unterstützt:
                                        </p>
-       
-                                       <table class="table table-striped table-bordered">
-                                               <tbody>
-                                                       <tr>
-                                                               <td>
-                                                                       <strong>VDSL</strong>
-                                                               </td>
-                                                               <td>
-                                                                       VDSL ist die Abkürzung für <em>Very High Data Rate Digital Subscriber Line</em> und
-                                                                       bietet in Deutschland derzeit Bandbreiten bis zu 50 MBit/s im Downstream und 10 MBit/s im Upstream.
-                                                                       Damit eignet sich VDSL für die Zukunft und bringt auch IPTV mit sich. Mit IPFire kann der herkömmliche
-                                                                       Router ausgetauscht werden und auf ein vollwertiges System gesetzt werden, das den IPTV-Stream ins
-                                                                       eigene Netz bringt.
-                                                               </td>
-                                                       </tr>
-                                                       <tr>
-                                                               <td>
-                                                                       <strong>ADSL/SDSL</strong>
-                                                               </td>
-                                                               <td>
-                                                                       Selbstverständlich wird auch herkömmliches DSL unterstützt, wobei es sich
-                                                                       technisch um PPPoE oder PPPoA handelt. In einigen Ländern ist auch PPTP als Protokoll verbreitet und
-                                                                       wird ebenso unterstützt.
-                                                               </td>
-                                                       </tr>
-                                                       <tr>
-                                                               <td>
-                                                                       <strong>Ethernet</strong>
-                                                               </td>
-                                                               <td>
-                                                                       Über Ethernet kann IPFire ebenfalls mit dem Internet verbunden werden und
-                                                                       eine IP-Adresse entweder per DHCP beziehen oder statisch konfiguriert werden. Das wird u.a. bei
-                                                                       Verbindungen über Kabel genutzt.
-                                                               </td>
-                                                       </tr>
-                                                       <tr>
-                                                               <td>
-                                                                       <strong>3. Generation</strong>
-                                                               </td>
-                                                               <td>
-                                                                       Über USB-Modems wird auch jede Art von mobilen Breitbandverbindungen
-                                                                       unterstützt, welche bekannt sind unter den Bezeichnungen UMTS, 3G, CDMA, HSDPA oder LTE.
-                                                               </td>
-                                                       </tr>
-                                               </tbody>
-                                       </table>
+                                       
+                                       <ul>
+                                               <li>
+                                                       <strong>VDSL</strong><br>
+                                                       VDSL ist die Abkürzung für <em>Very High Data Rate Digital Subscriber Line</em> und
+                                                       bietet in Deutschland derzeit Bandbreiten bis zu 50 MBit/s im Downstream und 10 MBit/s im Upstream.
+                                                       Damit eignet sich VDSL für die Zukunft und bringt auch IPTV mit sich. Mit IPFire kann der herkömmliche
+                                                       Router ausgetauscht werden und auf ein vollwertiges System gesetzt werden, das den IPTV-Stream ins
+                                                       eigene Netz bringt.
+                                               </li>
+                                               <li>
+                                                       <strong>ADSL / SDSL</strong><br>
+                                                       Selbstverständlich wird auch herkömmliches DSL unterstützt, wobei es sich
+                                                       technisch um PPPoE oder PPPoA handelt. In einigen Ländern ist auch PPTP als Protokoll verbreitet und
+                                                       wird ebenso unterstützt.
+                                               </li>
+                                               <li>
+                                                       <strong>Ethernet</strong><br>
+                                                       Über Ethernet kann IPFire ebenfalls mit dem Internet verbunden werden und
+                                                       eine IP-Adresse entweder per DHCP beziehen oder statisch konfiguriert werden. Das wird u.a. bei
+                                                       Verbindungen über Kabel genutzt.
+                                               </li>
+                                               <li>
+                                                       <strong>3. Generation</strong><br>
+                                                       Über USB-Modems wird auch jede Art von mobilen Breitbandverbindungen
+                                                       unterstützt, welche bekannt sind unter den Bezeichnungen UMTS, 3G, CDMA, HSDPA oder LTE.
+                                               </li>
+                                       </ul>
                                {% else %}
                                        <p class="copy">
                                                IPFire as an Internet Gateway is able to dialup through various techniques
                                        <p class="copy">
                                                It supports all popular types of broadband access, as well as mobile access:
                                        </p>
-       
-                                       <table class="table table-striped table-bordered">
-                                               <tbody>
-                                                       <tr>
-                                                               <td>
-                                                                       <strong>VDSL</strong>
-                                                               </td>
-                                                               <td>
-                                                                       VDSL is short for <em>Very High Data Rate Digital Subscriber Line</em> and
-                                                                       it currently offers bandwidth up to 50 Mbit/s downstream and 10 Mbit/s upstream.
-                                                                       VDSL brings the possibility of using new technologies such as IPTV. With IPFire, a conventional
-                                                                       router can be replaced by a full-fledged system that brings the IPTV stream into your own home network.
-                                                               </td>
-                                                       </tr>
-                                                       <tr>
-                                                               <td>
-                                                                       <strong>ADSL/SDSL</strong>
-                                                               </td>
-                                                               <td>
-                                                                       Conventional DSL is also supported, although it is technically
-                                                                       called also PPPoE or PPPoA. In some countries, the PPTP protocol is also widely used and it is also fully
-                                                                       supported by IPFire.
-                                                               </td>
-                                                       </tr>
-                                                       <tr>
-                                                               <td>
-                                                                       <strong>Ethernet</strong>
-                                                               </td>
-                                                               <td>
-                                                                       Over Ethernet, IPFire can also be connected to the Internet and obtain
-                                                                       an IP address either via DHCP or static configuration.
-                                                               </td>
-                                                       </tr>
-                                                       <tr>
-                                                               <td>
-                                                                       <strong>4G/3G</strong>
-                                                               </td>
-                                                               <td>
-                                                                       Mobile broadband connections over USB modems, which are also known by the names
-                                                                       UMTS, 3G, CDMA, HSDPA or LTE are also supported by IPFire.
-                                                               </td>
-                                                       </tr>
-                                               </tbody>
-                                       </table>
+                                       
+                                       <ul>
+                                               <li>
+                                                       <strong>VDSL</strong><br>
+                                                       VDSL is short for <em>Very High Data Rate Digital Subscriber Line</em> and
+                                                       it currently offers bandwidth up to 50 Mbit/s downstream and 10 Mbit/s upstream.
+                                                       VDSL brings the possibility of using new technologies such as IPTV. With IPFire, a conventional
+                                                       router can be replaced by a full-fledged system that brings the IPTV stream into your own home network.
+                                               </li>
+                                               <li>
+                                                       <strong>ADSL / SDSL</strong><br>
+                                                       Conventional DSL is also supported, although it is technically
+                                                       called also PPPoE or PPPoA. In some countries, the PPTP protocol is also widely used and it is also fully
+                                                       supported by IPFire.
+                                               </li>
+                                               <li>
+                                                       <strong>Ethernet</strong><br>
+                                                       Over Ethernet, IPFire can also be connected to the Internet and obtain
+                                                       an IP address either via DHCP or static configuration.
+                                               </li>
+                                               <li>
+                                                       <strong>4G / 3G</strong><br>
+                                                       Mobile broadband connections over USB modems, which are also known by the names
+                                                       UMTS, 3G, CDMA, HSDPA or LTE are also supported by IPFire.
+                                               </li>
+                                       </ul>
                                {% end %}
                        </section>
                        
                                        <p class="copy">
                                                IPFire includes a full-fledged web proxy, which is the well-known, open-source software Squid. It is used by ISPs, universities, schools and large companies use because of its diversity, stability and mature development. Even for small home networks, it
                                                is a useful feature. In addition to the stateful paket inspection (SPI) filtering by the firewall on
-                                               the TCP/IP layer, the web content which is transmitted over HTTP, HTTPS or FTP can be analyzed
+                                               the TCP/IP layer, the web content which is transmitted over HTTP, HTTPS or FTP can be analysed
                                                and filtered as well.
                                        </p>
                                        <ul>
                
                                        {% if lang == "de" %}
                                                <p class="copy">
-                                                       <span class="label label-success">IPFire 2.15 - Core Update 77</span>
+                                                       <span class="badge badge-success">IPFire 2.15 - Core Update 77</span>
                                                        IPFire ist in der Lage verschiedene Kryptoprozessoren zu nutzen,
                                                        wie zum Beispiel den der AMD Geode CPUs, den VIA Padlock oder
                                                        CPU-Erweiterungen wie die AES-NI-Instruktionen von
                
                                                <ul>
                                                        <li>
-                                                               <a href="http://wiki.ipfire.org/en/cryptography/hardware">
+                                                               <a href="//wiki.ipfire.org/en/cryptography/hardware">
                                                                        Liste der unterstützten Kryptoprozessoren
                                                                </a>
                                                        </li>
                                                </ul>
                                        {% else %}
                                                <p class="copy">
-                                                       <span class="label label-success">IPFire 2.15 - Core Update 77</span>
+                                                       <span class="badge badge-success">IPFire 2.15 - Core Update 77</span>
                                                        IPFire can use various crypto processors like those to be found
                                                        in AMD Geode CPUs, the VIA Padlock or CPU extensions like AES-NI
                                                        of recent Intel and AMD CPUs.
                
                                                <ul>
                                                        <li>
-                                                               <a href="http://wiki.ipfire.org/en/cryptography/hardware">
+                                                               <a href="//wiki.ipfire.org/en/cryptography/hardware">
                                                                        List of supported crypto hardware
                                                                </a>
                                                        </li>
                
                                        {% if lang == "de" %}
                                                <p class="copy">
-                                                       <span class="label label-success">IPFire 2.15 - Core Update 77</span>
+                                                       <span class="badge badge-success">IPFire 2.15 - Core Update 77</span>
                                                        IPFire unterstützt ebenfalls verschiedene Hardware-Zufallszahlgeneratoren.
                                                        Diese generieren Entropie, wird in den Entropie-Pool des Kernels
                                                        eingespeißt und dann zum Erstellen von sicheren Schlüsseln und
                
                                                <ul>
                                                        <li>
-                                                               <a href="http://wiki.ipfire.org/en/cryptography/entropy">
+                                                               <a href="//wiki.ipfire.org/en/cryptography/entropy">
                                                                        Liste der unterstützen Zufallszahlgeneratoren
                                                                </a>
                                                        </li>
                                                </ul>
                                        {% else %}
                                                <p class="copy">
-                                                       <span class="label label-success">IPFire 2.15 - Core Update 77</span>
+                                                       <span class="badge badge-success">IPFire 2.15 - Core Update 77</span>
                                                        IPFire is also able to use various random hardware number generators
                                                        to seed the kernel's entropy pool. That entropy is needed to generate
                                                        secure keys and speeds up cryptographic operations as well.
                
                                                <ul>
                                                        <li>
-                                                               <a href="http://wiki.ipfire.org/en/cryptography/entropy">
+                                                               <a href="//wiki.ipfire.org/en/cryptography/entropy">
                                                                        List of supported hardware random number generators
                                                                </a>
                                                        </li>
                                                <p class="copy">
                                                        Der hohe Grad der Kompatibilität zu anderen Herstellern wird durch
                                                        die Verwendung der freien Implementierung 
-                                                       <a href="http://www.strongswan.org" target="_blank">strongSwan</a>
+                                                       <a href="//www.strongswan.org" target="_blank">strongSwan</a>
                                                        möglich, welches von Andreas Steffen, einem Professor für Sicherheit
                                                        in der Kommunikationstechnik und Leiter des Instituts für
                                                        Internetechnologien und -applikationen an der Universität der
                                                        angewandten Wissenschaften Rapperswil in der Schweiz entwickelt wird.
                                                        StrongSwan arbeitet besonders gut mit Produkten wie Microsoft Windows 7,
-                                                       Microsoft Windows Vista und Mac OS X zusammen.
+                                                       Microsoft Windows Vista und macOS zusammen.
                                                </p>
                                        {% else %}
                                                <p class="copy">
                                                <p class="copy">
                                                        This high-level of compatibility is achieved by using the free
                                                        implementation called
-                                                       <a href="http://www.strongswan.org" target="_blank">strongSwan</a>. It is maintained by Andreas Steffen, who is a professor for security in communications and head of the Institute for Internet Technologies
+                                                       <a href="//www.strongswan.org" target="_blank">strongSwan</a>. It is maintained by Andreas Steffen, who is a professor for security in communications and head of the Institute for Internet Technologies
                                                        and Applications at the University of Applied Sciences Rapperswil, in
                                                        Switzerland. StrongSwan also works with all current, major operating systems, such as Microsoft
-                                                       Windows 7, Microsoft Windows Vista and Mac OS X.
+                                                       Windows 7, Microsoft Windows Vista and macOS.
                                                </p>
                                        {% end %}
                
                                                </p>
                                                <p class="copy">
                                                        Durch die hohe Kompatibilität zu anderen Betriebssystemen
-                                                       (Microsoft Windows, Mac OSX, Linux, Android, uvam.)
+                                                       (Microsoft Windows, macOS, Linux, Android, uvm.)
                                                        eignet sich OpenVPN bestens zur Anbindung sogenannter Roadwarrior-Clients.
                                                        Eine leicht zu konfigurierende, durch Zertifikate gesicherte,
                                                        verschlüsselte Anbindung aus dem Internet
                                                </p>
                                                <p class="copy">
                                                        Due to its high compatibility to all sorts of operating systems,
-                                                       such as Microsoft Windows, Mac OSX, Linux, Android and many more,
+                                                       such as Microsoft Windows, macOS, Linux, Android and many more,
                                                        it is perfectly useful for roadwarrior connections.
                                                        With those, it is easy to connect your laptop, phone, tablet or
                                                        other devices to your company network, which makes it easy to
                                                        eine Breite Palette an neuer Hardware, wie 10-Gigabit-Netzwerkkarten und
                                                        Wireless-Hardware, ohne zusätzlichen Aufwand zu betreiben.
                                                        Den Entwicklern ist es ein Anliegen, IPFire auf einer möglichst breiten Palette von
-                                                       Hardware lauffähig zu machen. Dadurch lässt sich IPFire auf alter, günster Hardware
-                                                       genauso hervoragend verwenden, wie auf High-Performance-Systemen.
+                                                       Hardware lauffähig zu machen. Dadurch lässt sich IPFire auf alter, günstiger Hardware
+                                                       genauso hervorragend verwenden, wie auf High-Performance-Systemen.
                                                </p>
                                                <p class="copy">
                                    Dabei belaufen sich die Mindestanforderungen bei einem Pentium I (i568), 512MB RAM
                                                        und 2 GB Festplattenspeicher.
                                                </p>
                                                <p class="copy">
-                                                       Einige Erweiterungen haben zuätzliche Anforderungen an die Hardware um korrekt
+                                                       Einige Erweiterungen haben zusätzliche Anforderungen an die Hardware um korrekt
                                                        funktionieren zu können. Ein System welches alle Anforderungen erfüllt, ist in der
                                                        Lage hunderte Clients zur selben Zeit zu bedienen.
                                                </p>
                                                
                                                <h4 class="secondHeadline">Heads up: Zusätzliche Architekturen in Entwicklung</h4>
                                                <p class="copy">
-                                                       Das IPFire Projekt ist auch interessiert Ressorcen schonende Systeme zu unterstützen.
+                                                       Das IPFire Projekt ist auch interessiert Ressourcen schonende Systeme zu unterstützen.
                                                        In diesem Zusammenhang, ist die ARM Architektur erwähnenswert, welche äußerst wenig Strom
                                                        benötigt und ein großes Zukunftspotential aufweist.
                                                </p>
                                                </p>
                                                <p class="copy">
                                                        Minimum system requirements are an Intel Pentium I (i586),
-                                                      512MB RAM and 2GB hard drive space.
+                                   512MB RAM and 2GB hard drive space.
                                                </p>
                                                <p class="copy">
                                                        Some add-ons have extra requirements to perform smoothly.
                
                                                <h4 class="secondHeadline">Unterstützte Hypervisoren</h4>
                                                
-                                               <h4 class="secondHeadline">KVM</h4>
-                                               <p class="copy">
-                                                       <a href="http://www.linux-kvm.org">KVM</a> ist die Abkürzung
-                                                       für Kernel-based Virtual Machine und wird von
-                                                       <a href="http://www.redhat.com">Red Hat Inc.</a> entwickelt.
-                                                       Es ist die derzeit am häufigsten eingesetzte, freie Virtualisierungslösung
-                                                       und löst Xen zunehmend ab.
-                                               </p>
-                                               <p class="copy">
-                                                       Der IPFire-Kernel verfügt über die <em>virtio</em> Module,
-                                                       welche hervorragende Leistung bei wenig Virtualisierungsoverhead
-                                                       bieten.
-                                               </p>
-               
-                                               <h4 class="secondHeadline">VMware</h4>
-                                               <p class="copy">
-                                                       IPFire arbeitet auf verschiedenen VMware Produkten wie
-                                                       <em>vSphere</em>, <em>ESXi</em> und <em>VMware workstation</em>.
-                                                       Das optionale Paket <em>open-vm-tools</em> verbessert die
-                                                       Integration zusätzlich.
-                                               </p>
-               
-                                               <h4 class="secondHeadline">Xen</h4>
-                                               <p class="copy">
-                                                       Xen war der de-facto Open-Source-Hypervisor, wird
-                                                       allerdings immer öfter durch KVM ersetzt.
-                                               </p>
-                                               <p class="copy">
-                                                       IPFire bringt für den Einsatz auf einem Xen-Host einen
-                                                       paravirtualisierten Kernel mit.
-                                                       Die Installation ist sehr einfach, da bereits ein
-                                                       vorinstalliertes Image auf der Downloadseite heruntergeladen
-                                                       werden kann.
-                                               </p>
-               
-                                               <h4 class="secondHeadline">Andere</h4>
-                                               <p class="copy">
-                                                       IPFire ist nicht auf die oben genannten Lösungen beschränkt.
-                                                       Ebenso läuft die Distribution auch unter <em>Qemu</em>,
-                                                       <em>Microsoft Hyper-V</em> und <em>Oracle Virtualbox</em>.
-                                               </p>
+                                               <ul>
+                                                       <li>
+                                                               <strong>KVM</strong><br>
+                                                               <a href="//www.linux-kvm.org">KVM</a> ist die Abkürzung
+                                                               für Kernel-based Virtual Machine und wird von
+                                                               <a href="//www.redhat.com">Red Hat Inc.</a> entwickelt.
+                                                               Es ist die derzeit am häufigsten eingesetzte, freie Virtualisierungslösung
+                                                               und löst Xen zunehmend ab.<br>
+                                                               Der IPFire-Kernel verfügt über die <em>virtio</em> Module,
+                                                               welche hervorragende Leistung bei wenig Virtualisierungsoverhead
+                                                               bieten.
+                                                       </li>
+                                                       <li>
+                                                               <strong>VMware</strong>
+                                                               IPFire arbeitet auf verschiedenen VMware Produkten wie
+                                                               <em>vSphere</em>, <em>ESXi</em> und <em>VMware workstation</em>.
+                                                               Das optionale Paket <em>open-vm-tools</em> verbessert die
+                                                               Integration zusätzlich.
+                                                       </li>
+                                                       <li>
+                                                               <strong>Xen</strong><br>
+                                                               Xen war der de-facto Open-Source-Hypervisor, wird
+                                                               allerdings immer öfter durch KVM ersetzt.<br>
+                                                               IPFire bringt für den Einsatz auf einem Xen-Host einen
+                                                               paravirtualisierten Kernel mit.
+                                                               Die Installation ist sehr einfach, da bereits ein
+                                                               vorinstalliertes Image auf der Downloadseite heruntergeladen
+                                                               werden kann.
+                                                       </li>
+                                                       <li>
+                                                               <strong>Andere</strong><br>
+                                                               IPFire ist nicht auf die oben genannten Lösungen beschränkt.
+                                                               Ebenso läuft die Distribution auch unter <em>Qemu</em>,
+                                                               <em>Microsoft Hyper-V</em> und <em>Oracle Virtualbox</em>.
+                                                       </li>
+                                               </ul>
                
                                                <h4 class="secondHeadline">Ein Hinweis zu Virtualisierung</h4>
                                                <p class="copy">
                                                </p>
                
                                                <h4 class="secondHeadline">Supported hypervisors</h4>
-                                               <h4 class="secondHeadline">KVM</h4>
-                                               <p class="copy">
-                                                       <a href="http://www.linux-kvm.org">KVM</a> is short for
-                                                       Kernel-based Virtual Machine and is developed by
-                                                       <a href="http://www.redhat.com">Red Hat Inc.</a>.
-                                                       It is becoming the most advanced hypervisor and succeeding Xen, which
-                                                       has been used so far.
-                                               </p>
-                                               <p class="copy">
-                                                       IPFire is coming with the <em>virtio</em> kernel modules, that have best
-                                                       performance due to very less virtualization overhead.
-                                               </p>
-               
-                                               <h4 class="secondHeadline">VMware</h4>
-                                               <p class="copy">
-                                                       IPFire runs on different VMware products like <em>vSphere</em>,
-                                                       <em>ESXi</em> and <em>VMware workstation</em>. The additional package
-                                                       <em>open-vm-tools</em> offers tools for a better integration.
-                                               </p>
-               
-                                               <h4 class="secondHeadline">Xen</h4>
-                                               <p class="copy">
-                                                       Xen has recently been the de-facto Open Source hypervisor but is now
-                                                       succeeded by KVM.
-                                               </p>
-                                               <p class="copy">
-                                                       IPFire can optionally be run with a paravirtualized kernel, which has very
-                                                       less virtualization overhead as well. To make the installation very easy,
-                                                       a pregenerated Xen image can be downloaded from the download page.
-                                               </p>
-               
-                                               <h4 class="secondHeadline">Others</h4>
-                                               <p class="copy">
-                                                       IPFire is not limited to the hypervisors described above. It runs perfectly on
-                                                       <em>Qemu</em>, <em>Microsoft Hyper-V</em> or <em>Oracle VirtualBox</em>, too.
-                                               </p>
+                                               <ul>
+                                                       <li>
+                                                               <strong>KVM</strong><br>
+                                                               <a href="//www.linux-kvm.org">KVM</a> is short for
+                                                               Kernel-based Virtual Machine and is developed by
+                                                               <a href="//www.redhat.com">Red Hat Inc.</a>.
+                                                               It is becoming the most advanced hypervisor and succeeding Xen, which
+                                                               has been used so far.<br>
+                                                               IPFire is coming with the <em>virtio</em> kernel modules, that have best
+                                                               performance due to very less virtualization overhead.
+                                                       </li>
+                                                       <li>
+                                                               <strong>VMware</strong><br>
+                                                               IPFire runs on different VMware products like <em>vSphere</em>,
+                                                               <em>ESXi</em> and <em>VMware workstation</em>. The additional package
+                                                               <em>open-vm-tools</em> offers tools for a better integration.
+                                                       </li>
+                                                       <li>
+                                                               <strong>Xen</strong>
+                                                               Xen has recently been the de-facto Open Source hypervisor but is now
+                                                               succeeded by KVM.<br>
+                                                               IPFire can optionally be run with a paravirtualized kernel, which has very
+                                                               less virtualization overhead as well. To make the installation very easy,
+                                                               a pregenerated Xen image can be downloaded from the download page.
+                                                       </li>
+                                                       <li>
+                                                               <strong>Others</strong>
+                                                               IPFire is not limited to the hypervisors described above. It runs perfectly on
+                                                               <em>Qemu</em>, <em>Microsoft Hyper-V</em> or <em>Oracle VirtualBox</em>, too.
+                                                       </li>
+                                               </ul>
                
                                                <h4 class="secondHeadline">A note on virtualization</h4>
                                                <p class="copy">
                });
        });
 </script>
+
+<!-- Icons -->
+<svg aria-hidden="true" style="display: none">
+       <symbol id="verified" viewBox="0 0 24 24">
+               <path d="M12 0L3 4v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V4l-9-4zm-2 16l-4-4 1.41-1.41L10 13.17l6.59-6.59L18 8l-8 8z"/>
+       </symbol>
+       <symbol id="warning" viewBox="0 0 24 24">
+               <path d="M1 20h22L12 1 1 20zm12-3h-2v-2h2v2zm0-4h-2V9h2v4z"/>
+       </symbol>
+       <symbol id="wifi" viewBox="0 0 24 24">
+                <path d="M1 8l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 1.93 7.08 1.93 1 8zm8 8l3 3 3-3a4.237 4.237 0 0 0-6 0zm-4-4l2 2a7.074 7.074 0 0 1 10 0l2-2C15.14 8.14 8.87 8.14 5 12z"/>
+       </symbol>
+       <symbol id="server" viewBox="0 0 24 24">
+               <<path d="M13 18h1a1 1 0 0 1 1 1h7v2h-7a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1H2v-2h7a1 1 0 0 1 1-1h1v-2H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-7v2zM4 2h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm5 4h1V4H9v2zm0 8h1v-2H9v2zM5 4v2h2V4H5zm0 8v2h2v-2H5z"/>
+       </symbol>
+</svg>
 {% end block %}
\ No newline at end of file