mobile view now includes info on open space

_includes/nav-header.html

@@ -22,6 +22,8 @@
   {% include nav-default.html %}
 {% endif %}
 
+<script src="{{site.baseurl}}/assets/jquery-3.6.4.min.js"></script>
+
 <script type="text/javascript">
 const applyToggle = (list, button, breakpoint) => {
   const navList = document.querySelector(list)
@@ -43,6 +45,31 @@ const applyToggle = (list, button, breakpoint) => {
 applyToggle('.list--nav', '.button', 640)
 </script>
 
+<script>
+$(document).ready(function(){
+  spaceopen();
+});
+
+function spaceopen() {
+  //http://nobreakspace.org/status/spaceapi.json
+
+  $.get( "https://status.nobreakspace.org/spaceapi.json", function( data ) {
+    console.log(data);
+    if(data.open) {
+      $("#spaceopen").css( "border", "3px solid green" );
+      $("#spaceopen").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/open.png' width='35'></div>Der Nbsp ist offen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
+      $("#spaceopenmobile").css( "border", "3px solid green" );
+      $("#spaceopenmobile").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/open.png' width='35'></div>Der Nbsp ist offen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
+    } else {
+      $("#spaceopen").css( "border", "3px solid red" );
+      $("#spaceopen").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/closed.png' width='35'></div>Der Nbsp ist geschlossen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
+      $("#spaceopenmobile").css( "border", "3px solid red" );
+      $("#spaceopenmobile").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/closed.png' width='35'></div>Der Nbsp ist geschlossen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
+    }
+  });
+}
+</script>
+
 <!-- Core CSS file -->
 <link rel="stylesheet" href="{{site.baseurl}}/assets/scripts/photoswipe.css">
 

_includes/site-header.html

@@ -22,6 +22,8 @@
     {% include site-feature.html %}
   {% endif %}
 
-<meta name="twitter:dnt" content="on">
+<div class="statusmobile" style="width: 80%; margin:0 auto; margin-top: -45px; background-color: #FAFAFA;">
+  {% include space-status-mobile.html %}
+</div>
   
 </header>

_includes/space-status-mobile.html

+<div id="spaceopenmobile">
+  Ob der Nobreakspace offen ist siehst du <a href='https://status.nobreakspace.org' target='_blank'>hier</a><p>Oder aktiviere Javascript</p>
+</div>

_includes/space-status.html

-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-<script>
-$(document).ready(function(){
-  spaceopen();
-  bbbopen();
-});
-
-function spaceopen() {
-  //http://nobreakspace.org/status/spaceapi.json
-
-  $.get( "https://status.nobreakspace.org/spaceapi.json", function( data ) {
-    console.log(data);
-    if(data.open) {
-      console.log("OPEN");
-      $("#spaceopen").css( "border", "3px solid green" );
-      $("#spaceopen").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/open.png' width='35'></div>Der Nbsp ist offen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
-    } else {
-      console.log("CLOSED");
-      $("#spaceopen").css( "border", "3px solid red" );
-      $("#spaceopen").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/closed.png' width='35'></div>Der Nbsp ist geschlossen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
-    }
-  });
-}
-</script>
 <div id="spaceopen">
   Ob der Nobreakspace offen ist siehst du <a href='https://status.nobreakspace.org' target='_blank'>hier</a><p>Oder aktiviere Javascript</p>
 </div>

_sass/_normalize.scss

@@ -86,16 +86,19 @@ figcaption {
   color: #EFEFEF;
 }
 
-@media (min-width: 650px) {
+@media (min-width: 643px) {
   .aside {
     margin-top: -80px;
   }
   .projectinfo {
-    visibility: hidden;
+    display: none;
+  }
+  .statusmobile {
+    display: none;
   }
 }
 
-#spaceopen, #cyberspaceopen {
+#spaceopen {
   background-color: #fafafa;
   padding: 2%;
   text-align: center;
@@ -108,7 +111,7 @@ figcaption {
   text-align: center;
 }
 
-#spaceopen:a, #cyberspaceopen:a {
+#spaceopen:a {
   background-color: #ff0000;
   text-align: left;
 }