General : cleaning and optimizing CSS

General : responsive design
General : reload button now spins when you reload block
General : update jQuery plugin Knob to 1.2.11
General : optimizing security (config file esm.config.json is now in the conf/ folder with an htaccess)
CPU : retrieves correctly CPU frequency for Raspberry Pi
CPU : add CPU temperature (+ option to enable/disable)
System : little correction for getting distro name
Swap : fix if swap is disabled
Services status : adds protocol TCP or UDP for checking service status
Services status : new option to hide port number (see show_port in services section)

4 files changed, 129 insertions, 76 deletions

diff --git a/web/css/_src/_config.libs.scss b/web/css/_src/_config.libs.scss
index df02c1c..21d35c9 100644
--- a/web/css/_src/_config.libs.scss
+++ b/web/css/_src/_config.libs.scss
@@ -1,26 +1,27 @@
-/* Buttons */
-$button-default-color: #c5c5c5;
-$button-red: #ff0000;
-$button-orange: #fe9c43;
-$button-purple: #9a68c7;
-$button-blue: #3ba9e4;
-$button-green: #75b343;
-$button-black: #4b4b4b;
-$button-salmon: #F5AD9E;
+@import "_config.frontend";
 
 /* Labels */
-$label-default: #bfbfbf;
-$label-success: #46a546;
-$label-warning: #f89406;
-$label-important: #c43c35;
-$label-notice: #62cffc;
-$label-border-radius: 3px;
-$label-font-size: 10px;
+$label: (
+    types: (
+        default: #bfbfbf,
+        success: #46a546,
+        warning: #f89406,
+        important: #c43c35,
+        error: #c43c35,
+        notice: #62cffc
+    ),
+    border-radius: 3px,
+    font-size: 10px
+);
 
 /* Classic box */
-$classic-box-color: darken(#99AEC4, 7%);
-$classic-box-background: #fff;
-$classic-box-border: lighten(#99AEC4, 16%);
-$classic-box-header-height: 35px;
-$classic-box-title-color: #fff;
-$classic-box-title-fontsize: 14px;
+$classic-box: (
+    color: darken($main-color, 7%),
+    background: #fff,
+    border-color: lighten($main-color, 16%),
+    header: (
+        height: 35px,
+        color: #fff,
+        font-size: 14px
+    )
+);
\ No newline at end of file
diff --git a/web/css/_src/_mixins.scss b/web/css/_src/_mixins.scss
index d547306..450bf76 100644
--- a/web/css/_src/_mixins.scss
+++ b/web/css/_src/_mixins.scss
@@ -15,22 +15,29 @@
     }
 }
 
-@mixin letterpress($opacity) {
-    text-shadow: rgba(255, 255, 255, $opacity) 0 1px 0;
-}
+@function map-get-deep($map, $keys...) {
+    @if length($keys) == 1 {
+        $keys: nth($keys, 1);
+    }
+    $warn: "#{nth($keys, 1)}";
+    $length: length($keys);
+    $get: map-get($map, nth($keys, 1));
 
-@mixin hide-text {
-    font: 0/0 a;
-    text-shadow: none;
-    color: transparent;
-}
+    @if $length > 1 {
+        @for $i from 2 through $length {
+            @if $get != null and type-of($get) == 'map' {
+                $warn: $warn + "->#{nth($keys, $i)}";
+                $get: map-get($get, nth($keys, $i));
 
-@mixin link-colors($normal, $hover: $normal, $visited: $normal) {
-    color: $normal;
-    &:hover, &:focus {
-        color: $hover;
+                @if $get == null {
+                    @return map-get-deep-warning($warn, $get);
+                }
+            }
+            @else {
+                @return map-get-deep-warning($warn, $get);
+            }
+        }
     }
-    &:visited {
-        color: $visited;
-    }
-}
+
+    @return $get;
+}
\ No newline at end of file
diff --git a/web/css/_src/frontend.scss b/web/css/_src/frontend.scss
index 341aa75..2369695 100644
--- a/web/css/_src/frontend.scss
+++ b/web/css/_src/frontend.scss
@@ -52,7 +52,7 @@ nav[role="main"] {
     
     #appname {
         float: left;
-        width: 120px;
+        width: 150px;
         text-align: left;
         
         a {
@@ -232,6 +232,35 @@ table.firstBold tbody tr td:first-child {
 
 
 /* --------------------------- */
+/*  ==     Reload style        */
+/* --------------------------- */
+.reload.spin {
+    @include animation(spin 2000ms infinite linear);
+}
+
+@-ms-keyframes spin {
+    from { -ms-transform: rotate(0deg); }
+    to { -ms-transform: rotate(360deg); }
+}
+@-moz-keyframes spin {
+    from { -moz-transform: rotate(0deg); }
+    to { -moz-transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+    from { -webkit-transform: rotate(0deg); }
+    to { -webkit-transform: rotate(360deg); }
+}
+@keyframes spin {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(360deg);
+    }
+}
+
+
+/* --------------------------- */
 /*  ==     Load Average        */
 /* --------------------------- */
 .box#esm-load_average {
@@ -239,3 +268,55 @@ table.firstBold tbody tr td:first-child {
         font-weight: normal;
     }
 }
+
+
+
+
+/* ------------------------- */
+/*  ==     Responsive        */
+/* ------------------------- */
+@media only screen and (max-width: 1024px) {
+    .column-left, .column-right {
+        float: none;
+        width: 100%;
+    }
+    .box {
+        width: 100%;
+        margin-right: 0 !important;
+        margin-left: 0 !important;
+    }
+}
+
+@media only screen and (max-width: 550px) {
+    nav[role="main"] {
+        #appname {
+            width: 135px;
+        }
+
+        #hostname {
+            margin-left: 0;
+            font-size: 12px;
+        }
+
+        #update {
+            margin-left: 0;
+            font-size: 9px;
+            position: absolute;
+            top: 47px;
+            line-height: inherit;
+        }
+
+        ul > li {
+            > a {
+                padding: 12px 0;
+            }
+        }
+    }
+
+    .box#esm-load_average {
+        div {
+            width: 100%;
+            float: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/web/css/_src/utilities.scss b/web/css/_src/utilities.scss
index a08dd0d..0dddffa 100644
--- a/web/css/_src/utilities.scss
+++ b/web/css/_src/utilities.scss
@@ -6,8 +6,7 @@
 /* -------------------- */
 /*  ==     Fonts        */
 /* -------------------- */
-
-@include font-face('OpenSans-Light', font-files('OpenSans-Light.ttf'));
+@include font-face('OpenSans-Light', font-files('OpenSans-Light.ttf', 'OpenSans-Light.svg', 'OpenSans-Light.woff'), 'OpenSans-Light.eot');
 @include font-face('Entypo', font-files('entypo.ttf', 'entypo.eot', 'entypo.svg', 'entypo.woff'));
 
 @import "../libs/_icons.entypo";
@@ -15,7 +14,6 @@
 /* ------------------- */
 /*  ==     Misc        */
 /* ------------------- */
-
 * { padding: 0; margin: 0; }
 *:focus { outline: none; }
 
@@ -37,11 +35,6 @@ img { border: 0; }
 
 .debug { border: 1px solid red; }
 
-.u { text-decoration: underline; }
-.b { font-weight: bold; }
-.i { font-style: italic; }
-.r { text-decoration: line-through; }
-
 .text_left, .t-left { text-align: left; }
 .text_right, .t-right { text-align: right !important; }
 .text_center, .t-center { text-align: center; }
@@ -65,9 +58,6 @@ img { border: 0; }
     width: 66%;
 }
 
-.m-l-10 { margin-left: 10px; }
-.m-r-10 { margin-right: 10px; }
-
 
 /*pre {
     background-color: #fafafa;
@@ -83,32 +73,6 @@ img { border: 0; }
 .w50p  { width: 50%; }
 .w100p { width: 100%; }
 
-.w30  { width: 30px; }
-.w50  { width: 50px; }
-.w60  { width: 60px; }
-.w70  { width: 70px; }
-.w75  { width: 75px; }
-.w90  { width: 90px; }
-.w100 { width: 100px; }
-.w110 { width: 110px; }
-.w120 { width: 120px; }
-.w130 { width: 130px; }
-.w150 { width: 150px; }
-.w180 { width: 180px; }
-.w200 { width: 200px; }
-.w220 { width: 220px; }
-.w250 { width: 250px; }
-.w300 { width: 300px; }
-.w350 { width: 350px; }
-.w400 { width: 400px; }
-.w450 { width: 450px; }
-.w500 { width: 500px; }
-.w600 { width: 600px; }
-.w700 { width: 700px; }
-.w800 { width: 800px; }
-.w900 { width: 900px; }
-.w1000 { width: 1000px; }
-
 
 /* ------------------------ */
 /*  ==     Scrollbar        */