'the system' mobile fixes

index.html

@@ -58,9 +58,9 @@
     <nav>
       <a aria-hidden="true" tabindex="-1" id="here" href="#">Home</a>
       <a href="support.html">Support</a>
-      <a href="subsystem/index.html" id="subsystem" onclick="disableInject()"
-        >SUBSYSTEM</a
-      >
+      <a href="subsystem/index.html" id="subsystem" onclick="disableInject()">
+        <p id="nonintrude">SUBSYSTEM</p>
+      </a>
     </nav>
     <hgroup>
       <h1>We Are <span class="dsre">The System</span></h1>

listings.html

@@ -56,7 +56,7 @@
     <nav>
       <a href="index.html">Home</a>
       <a href="support.html">Support</a>
-      <a href="subsystem/index.html" id="subsystem">SUBSYSTEM</a>
+      <a href="subsystem/index.html" id="subsystem"><div id="nonintrude">SUBSYSTEM</div></a>
     </nav>
     <hgroup>
       <h1>We Are <span class="dsre">The System</span></h1>

res/asset-index-style.css

@@ -10,14 +10,15 @@
 #ndx-decree,
 #ndx-more {
   margin: 0;
-  margin-left: min(2%, 25px);
-  margin-right: min(2%, 25px);
 }
 #ndx-news,
 #ndx-more {
   display: flex;
   flex-direction: column;
-  margin: auto;
+  min-width: 270px;
+
+  margin-left: min(2%, 25px);
+  margin-right: min(2%, 25px);
 }
 #ndx-news article,
 #ndx-more article {
@@ -64,7 +65,6 @@
   width: 10%;
   flex-grow: 1;
   max-width: 500px;
-  margin: auto;
 }
 #ndx-more img {
   width: 100%;

style.css

@@ -26,6 +26,8 @@
 body {
   background-color: var(--background);
   font-family: "playfair", serif;
+  margin: 0;
+  padding: 0;
 }
 h1,
 h2 {
@@ -84,8 +86,20 @@ nav a:hover {
 }
 
 #subsystem {
+  position: relative;
+  height: 41px;
   animation: glitch 1s infinite;
 }
+#nonintrude {
+  position: absolute;
+  height: 21px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  vertical-align: middle;
+}
 
 hgroup {
   margin: 20px auto;

subsystem/subres/portal.js

@@ -14,11 +14,11 @@ function inject() {
     "FO-CHÓRAS",
     "KĀNĀWAI",
     "SUBSYSTEM",
+    "サブシステム",
+    "ΥΠΟΣΥΣΤΕΜΑ",
   ];
 
-  //    "サブシステム", "ΥΠΟΣΥΣΤΕΜΑ",
-
-  document.getElementById("subsystem").innerHTML =
+  document.getElementById("nonintrude").innerHTML =
     terms[Math.floor(Math.random() * terms.length)];
 }
 

support.html

@@ -47,7 +47,9 @@
     <nav>
       <a href="index.html">Home</a>
       <a aria-hidden="true" tabindex="-1" id="here" href="#">Support</a>
-      <a href="subsystem/index.html" id="subsystem">SUBSYSTEM</a>
+      <a href="subsystem/index.html" id="subsystem"
+        ><div id="nonintrude">SUBSYSTEM</div></a
+      >
     </nav>
     <hgroup>
       <h1><span class="dsre">System</span> Support</h1>