scss

.gitignore

@@ -7,3 +7,5 @@ data
 build
 vendor
 html/scss/.sass-cache
+dart-sass
+.sass-cache

.travis/build.sh

@@ -3,6 +3,16 @@
 APP="statup"
 REPO="hunterlong/statup"
 
+
+# INSTALLING SASS
+SASS=1.7.1
+curl -OL https://github.com/sass/dart-sass/releases/download/$SASS/dart-sass-$SASS-linux-x64.tar.gz
+tar -xvzf dart-sass-$SASS-linux-x64.tar.gz
+chmod +x dart-sass/sass
+mv dart-sass/sass /usr/local/bin/sass
+# RENDERING CSS
+sass html/scss/base.scss:html/css/base.css
+
 printf "UPDATE core SET version='$VERSION';\n" >> sql/upgrade.sql
 
 rice embed-go

html/css/base.css

@@ -1,3 +1,15 @@
+/*
+      Main Design
+   =================
+    - Background
+    - Boxes
+    - Font Colors
+    - div widths
+*/
+/*
+    Card Design
+  ================
+*/
 HTML, BODY {
   background-color: #fcfcfc; }
 
@@ -28,40 +40,16 @@ HTML, BODY {
   color: #d1ffca;
   font-size: 0.85rem; }
 
-.failing_bg {
-  background-color: #ff4e4e !important;
-  font-weight: bold; }
-
 .lg_number {
   font-size: 26pt;
   font-weight: bold;
   display: block;
-  color: #3e3e3e; }
+  color: #474747; }
-
-.text_perfect {
-  color: #33b418;
-  text-shadow: 0px 1px 0 #0e6702; }
-
-.text_good {
-  color: #33b418;
-  text-shadow: 0px 1px 0 #0e6702; }
-
-.text_ok {
-  color: #33b418;
-  text-shadow: 0px 1px 0 #0e6702; }
-
-.text_bad {
-  color: #33b418;
-  text-shadow: 0px 1px 0 #0e6702; }
 
 .stats_area {
   text-align: center;
   color: #a5a5a5; }
 
-.offline_bg {
-  background-color: white !important;
-  padding-bottom: 70px !important; }
-
 .lower_canvas {
   height: 55px;
   width: 100%;
@@ -71,22 +59,6 @@ HTML, BODY {
 .lower_canvas SPAN {
   font-size: 1rem; }
 
-.offline_lower_canvas {
-  position: absolute;
-  bottom: -120px;
-  height: 60px;
-  left: -25px;
-  width: 805px;
-  padding: 17px 10px; }
-
-.offline_lower_canvas SPAN {
-  font-weight: bold;
-  font-size: 0.85rem; }
-
-.offline_lower_canvas A {
-  background-color: #c51b1a;
-  border: 1px solid #bb1727; }
-
 .footer {
   text-decoration: none;
   margin-top: 20px; }
@@ -114,6 +86,9 @@ HTML, BODY {
   height: 3px;
   border-radius: 0; }
 
+.card {
+  background-color: #fff; }
+
 .card-body {
   overflow: hidden; }
 

html/scss/base.scss

@@ -1,7 +1,4 @@
-$background-color: #262626;
+@import 'variables';
-$max-width: 860px;
-$card-background: #121212;
-$card-stats-color: #dfdfdf;
 
 
 HTML,BODY {
@@ -41,52 +38,18 @@ HTML,BODY {
     font-size: 0.85rem;
 }
 
-.failing_bg {
-    background-color: #ff4e4e !important;
-    font-weight: bold;
-}
-
 .lg_number {
-    font-size: 26pt;
+    font-size: $card-stats-size;
     font-weight: bold;
     display: block;
     color: $card-stats-color;
 }
 
-.text_perfect {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
-.text_good {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
-.text_ok {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
-.text_bad {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
 .stats_area {
     text-align: center;
     color: #a5a5a5;
 }
 
-.offline_bg {
-    background-color: white !important;
-    padding-bottom: 70px !important;
-}
-
-.online_list {
-
-}
-
 .lower_canvas {
     height: 55px;
     width: 100%;
@@ -98,25 +61,6 @@ HTML,BODY {
     font-size: 1rem;
 }
 
-.offline_lower_canvas {
-    position: absolute;
-    bottom: -120px;
-    height: 60px;
-    left: -25px;
-    width: 805px;
-    padding: 17px 10px;
-}
-
-.offline_lower_canvas SPAN {
-    font-weight: bold;
-    font-size: 0.85rem;
-}
-
-.offline_lower_canvas A {
-    background-color: #c51b1a;
-    border: 1px solid #bb1727;
-}
-
 .footer {
     text-decoration: none;
     margin-top: 20px;

html/scss/light-base.scss

@@ -1,251 +0,0 @@
-$background-color: #fcfcfc;
-$max-width: 860px;
-$primary-color: #333;
-$card-background: #fff;
-
-
-HTML,BODY {
-    background-color: $background-color;
-}
-
-.container {
-    padding-top: 20px;
-    padding-bottom: 20px;
-    max-width: $max-width;
-}
-
-.online_list .badge {
-    margin-top: 0.2rem;
-}
-
-.navbar {
-    margin-bottom: 30px;
-}
-
-.btn-sm {
-    line-height: 1.3;
-    font-size: 0.75rem;
-}
-
-.view_service_btn {
-    position: absolute;
-    bottom: -40px;
-    right: 40px;
-}
-
-.service_lower_info {
-    position: absolute;
-    bottom: -40px;
-    left: 40px;
-    color: #d1ffca;
-    font-size: 0.85rem;
-}
-
-.failing_bg {
-    background-color: #ff4e4e !important;
-    font-weight: bold;
-}
-
-.lg_number {
-    font-size: 26pt;
-    font-weight: bold;
-    display: block;
-    color: #3e3e3e;
-}
-
-.text_perfect {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
-.text_good {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
-.text_ok {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
-.text_bad {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
-.stats_area {
-    text-align: center;
-    color: #a5a5a5;
-}
-
-.offline_bg {
-    background-color: white !important;
-    padding-bottom: 70px !important;
-}
-
-.online_list {
-
-}
-
-.lower_canvas {
-    height: 55px;
-    width: 100%;
-    background-color: #48d338;
-    padding: 17px 10px;
-}
-
-.lower_canvas SPAN {
-    font-size: 1rem;
-}
-
-.offline_lower_canvas {
-    position: absolute;
-    bottom: -120px;
-    height: 60px;
-    left: -25px;
-    width: 805px;
-    padding: 17px 10px;
-}
-
-.offline_lower_canvas SPAN {
-    font-weight: bold;
-    font-size: 0.85rem;
-}
-
-.offline_lower_canvas A {
-    background-color: #c51b1a;
-    border: 1px solid #bb1727;
-}
-
-.footer {
-    text-decoration: none;
-    margin-top: 20px;
-}
-
-.footer A {
-    color: #aaaaaa;
-    text-decoration: none;
-}
-
-.footer A:HOVER {
-    color: #6d6d6d;
-}
-
-.online_badge {
-    color: #fff;
-    background-color: #35b317;
-}
-
-.offline_badge {
-    color: #fff;
-    background-color: #c51919;
-}
-
-.progress {
-    margin-top: -20px;
-    margin-left: -20px;
-    margin-bottom: 15px;
-    width: calc(100% + 40px);
-    height: 3px;
-    border-radius: 0;
-}
-
-.card-body {
-    overflow: hidden;
-}
-
-.card-body H4 A {
-    color: #239e07;
-    text-decoration: none;
-}
-
-.chart-container {
-    position: relative;
-    height: 170px;
-    width: 100%;
-}
-
-.btn-primary {
-    background-color: white;
-    border: 1px solid #b9b9b9;
-    color: #353535;
-    height: 35px;
-    padding: 5px 15px;
-}
-
-@media (max-width: 767px) {
-
-    .sm-container {
-        margin-top: 40px !important;
-        padding: 0 !important;
-    }
-
-    .list-group-item H5 {
-        font-size: 0.9rem;
-    }
-
-    .container {
-        padding: 0 !important;
-    }
-
-    .navbar {
-        margin-left: 0px;
-        margin-top: 0px;
-        width: 100%;
-        margin-bottom: 0;
-    }
-
-    .card-body {
-        font-size: 6pt;
-        padding: 5px 5px;
-    }
-
-    .lg_number {
-        font-size: 1.5rem;
-    }
-
-    .stats_area {
-        margin-top: 35px !important;
-        margin-bottom: 35px !important;
-    }
-
-    .stats_area .col-4 {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    .lower_canvas SPAN {
-        font-size: 0.9rem;
-        float: left;
-    }
-
-    .btn-sm {
-        line-height: 0.9rem;
-        font-size: 0.65rem;
-    }
-
-    .full-col-12 {
-        padding-left: 0px;
-        padding-right: 0px;
-    }
-
-    .card {
-        border: 0;
-        border-radius: 0;
-    }
-
-    .list-group-item {
-        border-top: 1px solid #e4e4e4;
-        border: 0px;
-    }
-
-    .list-group-item:first-child {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-
-    .list-group-item:last-child {
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-}

html/scss/variables.scss

@@ -0,0 +1,30 @@
+/*
+      Main Design
+   =================
+    - Background
+    - Boxes
+    - Font Colors
+    - div widths
+*/
+
+
+$background-color: #fcfcfc;
+$max-width: 860px;
+$online-color: #47d337;
+$offline-color: #dd3545;
+
+
+
+
+
+/*
+    Card Design
+  ================
+*/
+
+
+$card-background: #fff;
+$card-stats-color: #474747;
+$card-stats-size: 26pt;
+
+

html/tmpl/service.html

@@ -19,11 +19,17 @@
 
             <div class="col-12 mb-4">
 
+            {{if .Online }}
+                <span class="text-white d-md-none btn bg-success d-block">ONLINE</span>
+            {{ else }}
+                <span class="text-white d-md-none btn bg-danger d-block">OFFLINE</span>
+            {{end}}
+
                         <h4 class="mt-2">{{ .Name }}
                         {{if .Online }}
-                            <span class="badge online_badge float-right">ONLINE</span>
+                            <span class="badge online_badge float-right hidden-sm-up">ONLINE</span>
                         {{ else }}
-                            <span class="badge offline_badge float-right">OFFLINE</span>
+                            <span class="badge offline_badge float-right hidden-sm-up">OFFLINE</span>
                         {{end}}</h4>
 
                         <div class="row stats_area mt-5 mb-5">