From c7f1e7c5af1f7454687e64a0f0e0d1837770a105 Mon Sep 17 00:00:00 2001
From: T <T>
Date: Sun, 21 Sep 2025 21:23:13 +0200
Subject: [PATCH] gray status

---
 _includes/header.html | 41 ++++++++++++++++++----------------------
 _sass/_chaospott.scss | 40 ++++++++++++++++++++++++++++++---------
 css/main.scss         | 44 +++++++++++++++++++------------------------
 3 files changed, 68 insertions(+), 57 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 8654edc..ccadbfc 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -35,50 +35,45 @@
                 <li class="divider-vertical"></li>
                 <li><a href="/calendar.html">Termine</a></li>
             </ul>
-            <ul class="nav navbar-nav navbar-right"> 
+            <ul class="nav navbar-nav navbar-right">
                 <script>
                     $.getJSON("https://status.chaospott.de/status.json").done(function (data) {
                         if (data.state.open) {
-                            $("#status_open").css("display", "block");
+                            $("#foodoor").removeClass("unknown").addClass("open");
                             $("#status_bar").css("borderColor", "#29A900");
                         } else {
-                            $("#status_closed").css("display", "block");
+                            $("#foodoor").removeClass("unknown").addClass("closed");
                             $("#status_bar").css("borderColor", "#D9534F");
                         }
                     });
                     $.getJSON("https://status.chaospott.de/chaospott_mumble.json").done(function (data) {
-                        if (data.connected_users-1 > 0) {
-                            $("#status_mumble_open").css("display", "block");
-                            document.getElementById("mumble_users_online").textContent=data.connected_users;
+                        if (data.connected_users > 1) {
+                            $("#mumble").removeClass("unknown").addClass("open");
+                            document.getElementById("mumble_users_online").textContent = data.connected_users;
                         } else {
-                            $("#status_mumble_closed").css("display", "block");
+                            $("#mumble").removeClass("unknown").addClass("closed");
                         }
                     });
                 </script>
-                <li id="status_open" style="background-color:#29A900; display: none;">
-                    <a href="#" title="Der Club ist geöffnet">
-                      <span style="color:#ffffff !important;">Club: <i class="fa fa-lock-open"></i></span>
-                    </a>
-                </li>
-                <li id="status_closed" style="background-color:#D9534F; display: none;">
-                    <a href="#" title="Der Club ist geschlossen">
-                      <span style="color:#ffffff !important;">Club: <i class="fa fa-lock"></i></span>
+
+                <li id="foodoor" class="status unknown">
+                    <a href="#" style="color:#ffffff !important;">
+                        <span class="ifunknown" title="Clubstatus unbekannt">Club: <i class="fa fa-question"></i></span>
+                        <span class="ifopen" title="Der Club ist geöffnet">Club: <i class="fa fa-lock-open"></i></span>
+                        <span class="ifclosed" title="Der Club ist geschlossen">Club: <i class="fa fa-lock"></i></span>
                     </a>
                 </li>
 
                 <li id="spacer" style="background-color:#d2d4bc">&nbsp;</li>
 
-                <li id="status_mumble_open" style="background-color:#29A900; display: none;">
+                <li id="mumble" class="status unknown">
                     <a href="mumble://mumble.chaospott.de" style="color:#ffffff !important;">
-                        <i class="fa fa-microphone"></i> Mumble: <span id="mumble_users_online"></span>
+                        <span class="ifunknown"><i class="fa fa-microphone-alt"></i> Mumble</span>
+                        <span class="ifopen"><i class="fa fa-microphone"></i> Mumble: <span id="mumble_users_online"></span></span>
+                        <span class="ifclosed"><i class="fa fa-microphone-slash"></i> Mumble: 0</span>
                     </a>
                 </li>
-                <li id="status_mumble_closed" style="background-color:#D9534F; display: none;">
-                    <a href="mumble://mumble.chaospott.de" style="color:#ffffff !important;">
-                        <i class="fa fa-microphone-slash"></i> Mumble: 0
-                    </a>
-                </li>
-	        </ul>
+            </ul>
         </div>
     </div>
     <hr id="status_bar">
diff --git a/_sass/_chaospott.scss b/_sass/_chaospott.scss
index b1bcb5b..cfe7253 100644
--- a/_sass/_chaospott.scss
+++ b/_sass/_chaospott.scss
@@ -22,11 +22,13 @@ body {
 .jumbotron {
   margin: 0;
   padding: 0;
+
   .post-title {
     font-size: 42px;
     font-weight: normal;
   }
-  &>hr {
+
+  & > hr {
     background-color: #333;
     height: 1px;
     border: 3px #333 solid;
@@ -47,7 +49,7 @@ body {
 }
 
 .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
-    max-height: 600px;
+  max-height: 600px;
 }
 
 ul.navbar-right {
@@ -75,6 +77,7 @@ ul.navbar-nav li a {
 
 a {
   color: $nav-link-color;
+
   &:visited {
     color: $nav-link-color;
   }
@@ -82,6 +85,7 @@ a {
 
 .row {
   padding: 75px 0;
+
   &-centered {
     text-align: center;
     margin: 0;
@@ -94,6 +98,7 @@ a {
   height: 300px;
   margin: 0 0 100px 0;
   padding: 0;
+
   img {
     position: relative;
     top: 30px;
@@ -108,7 +113,7 @@ a {
   margin-right: -4px;
 }
 
-ul.nav>li>a {
+ul.nav > li > a {
   color: $nav-link-color;
 }
 
@@ -117,18 +122,35 @@ ul.nav>li>a {
   margin: auto;
 }
 
-#status_open,
-#status_closed {
+.status {
   display: none;
   border: 0;
 }
 
-#status_open a {
+.status {
   color: #fff !important;
 }
 
-#status_closed a {
-  color: #fff !important;
+.unknown {
+  background-color: #808080;
+}
+
+.open {
+  background-color: #29A900;
+}
+
+.closed {
+  background-color: #D9534F;
+}
+
+.ifopen, .ifclosed, .ifunknown {
+  display: none !important;
+}
+
+.status.open .ifopen,
+.status.closed .ifclosed,
+.status.unknown .ifunknown {
+  display: unset !important;
 }
 
 #status_bar {
@@ -152,7 +174,7 @@ ul.nav>li>a {
   .navbar-brand {
     display: block;
   }
-  .navbar-collapse .nav>.divider-vertical {
+  .navbar-collapse .nav > .divider-vertical {
     display: none;
   }
 }
diff --git a/css/main.scss b/css/main.scss
index cfd1d86..2be9cc1 100755
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,31 +1,30 @@
 ---
 # Only the main Sass file needs front matter (the dashes are enough)
 ---
-@charset "utf-8";
 
+@charset "utf-8";
 
 
 // Our variables
 $base-font-family: 'Share Tech', sans-serif;
-$base-font-size:   16px;
-$small-font-size:  $base-font-size * 0.875;
+$base-font-size: 16px;
+$small-font-size: $base-font-size * 0.875;
 $base-line-height: 1.5;
 
-$spacing-unit:     30px;
+$spacing-unit: 30px;
 
-$text-color:       #111;
+$text-color: #111;
 $background-color: #d2d4bc;
-$brand-color:      #2a7ae2;
+$brand-color: #2a7ae2;
 
-$grey-color:       #828282;
+$grey-color: #828282;
 $grey-color-light: lighten($grey-color, 40%);
-$grey-color-dark:  darken($grey-color, 25%);
+$grey-color-dark: darken($grey-color, 25%);
 
-$on-palm:          600px;
-$on-laptop:        800px;
-
-$nav-link-color:  #800032;
+$on-palm: 600px;
+$on-laptop: 800px;
 
+$nav-link-color: #800032;
 
 
 // Using media queries with like this:
@@ -36,20 +35,15 @@ $nav-link-color:  #800032;
 //     }
 // }
 @mixin media-query($device) {
-    @media screen and (max-width: $device) {
-        @content;
-    }
+  @media screen and (max-width: $device) {
+    @content;
+  }
 }
 
 
-
 // Import partials from `sass_dir` (defaults to `_sass`)
-@import
-        "base",
-        "layout",
-        "syntax-highlighting",
-        "chaospott",
-	"calendar"
-;
-
-
+@import "base",
+"layout",
+"syntax-highlighting",
+"chaospott",
+"calendar";