From af5f3d4a29ec21c136189b5e90761457ccad10eee010167b9de5e9c895c3111b Mon Sep 17 00:00:00 2001
From: nnwhen <nnwhen@nnwhen.com>
Date: Wed, 19 Mar 2025 00:11:50 +0200
Subject: [PATCH] mobile updates

---
 res/asset-index-style.css           |  9 ++++---
 subsystem/about.html                | 17 ++++++-------
 subsystem/subres/profileShuffle.js  |  2 +-
 subsystem/subres/sub-aboutstyle.css |  6 ++++-
 subsystem/substyle.css              | 37 +++++++++++++++++++++++++++--
 5 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/res/asset-index-style.css b/res/asset-index-style.css
index 93e3366..62074d0 100644
--- a/res/asset-index-style.css
+++ b/res/asset-index-style.css
@@ -9,13 +9,15 @@
 #ndx-news,
 #ndx-decree,
 #ndx-more {
-  margin: 0 25px;
+  margin: 0;
+  margin-left: min(2%, 25px);
+  margin-right: min(2%, 25px);
 }
 #ndx-news,
 #ndx-more {
   display: flex;
   flex-direction: column;
-  min-width: 360px;
+  margin: auto;
 }
 #ndx-news article,
 #ndx-more article {
@@ -25,9 +27,6 @@
 }
 
 #ndx-decree {
-  width: 10%;
-  min-width: 605px;
-  max-height: 1000px;
   flex-grow: 2;
   text-align: center;
   border: var(--text) double 8px;
diff --git a/subsystem/about.html b/subsystem/about.html
index 588aa33..4aa132c 100644
--- a/subsystem/about.html
+++ b/subsystem/about.html
@@ -75,7 +75,7 @@
             <a href="https://nnwhen.com" target="_blank">Website</a>
           </h3>
         </hgroup>
-        <div>
+        <section class="bio">
           <p>
             I am a <em>Digital Entity</em>, which involves: creating digital
             spaces - like this website - and creating other forms of
@@ -90,7 +90,7 @@
             >. <br />
             Some are dedicated to the World of 'UkuThintana'.
           </p>
-        </div>
+        </section>
       </section>
 
       <section class="profile">
@@ -118,7 +118,8 @@
             >
           </h3>
         </hgroup>
-        <div>
+
+        <section class="bio">
           <p>
             <i>Elliot</i> is a multidisciplinary artist living and working in
             Joburg, South Africa. Originally from Zimbabwe, he studied for a
@@ -149,7 +150,7 @@
             growing herbs and veggies in faer garden; reading solarpunk books or
             watching animated shows; and most often cuddling with their cat.
           </p>
-        </div>
+        </section>
       </section>
 
       <section class="profile">
@@ -177,7 +178,7 @@
             >
           </h3>
         </hgroup>
-        <div>
+        <section class="bio">
           <p>
             I'm an ambitious lil man. I chase competitive stimulation in the
             form of virtual activities. Climbing the ranks to prove myself
@@ -193,7 +194,7 @@
             >. I love all forms of performing arts so expect to see me making
             things I think are cool in the future!
           </p>
-        </div>
+        </section>
       </section>
 
       <section class="profile">
@@ -210,7 +211,7 @@
             <a href="https://umabhengwane.com" target="_blank">Website</a>
           </h3>
         </hgroup>
-        <div>
+        <section class="bio">
           <p>My name is Cullen Mackenzie.</p>
           <p>
             I am the youngest of a big family and I grew up listening to stories
@@ -233,7 +234,7 @@
             rest of the Universe might be decaying around us but at least we can
             make beautiful things.
           </p>
-        </div>
+        </section>
       </section>
     </main>
   </body>
diff --git a/subsystem/subres/profileShuffle.js b/subsystem/subres/profileShuffle.js
index 8b1fea4..e52d696 100644
--- a/subsystem/subres/profileShuffle.js
+++ b/subsystem/subres/profileShuffle.js
@@ -12,7 +12,7 @@ function profileShuffle() {
       "rotate(" + rnd * -1 + "deg)";
 
     // Bio Text
-    shuffle[i].getElementsByTagName("div")[0].style.transform =
+    shuffle[i].getElementsByClassName("bio")[0].style.transform =
       "rotate(" + rnd * -1 + "deg)";
   }
 }
diff --git a/subsystem/subres/sub-aboutstyle.css b/subsystem/subres/sub-aboutstyle.css
index aaacbfe..9dc6b1a 100644
--- a/subsystem/subres/sub-aboutstyle.css
+++ b/subsystem/subres/sub-aboutstyle.css
@@ -4,6 +4,7 @@
 .profile {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   width: 90%;
   margin: 20px auto;
   padding: 10px 20px;
@@ -35,9 +36,12 @@
   margin: 5px;
   font-size: large;
 }
+.bio {
+  width: min(100%, 500px);
+  margin: auto;
+}
 
 .profile p {
-  flex-grow: 1;
   padding: 5px 10px;
 }
 .profile img {
diff --git a/subsystem/substyle.css b/subsystem/substyle.css
index 9d7921d..d0cab8e 100644
--- a/subsystem/substyle.css
+++ b/subsystem/substyle.css
@@ -21,6 +21,7 @@
 }
 
 body {
+  position: relative;
   margin: 0;
   padding: 0;
   background-color: var(--l-yellow);
@@ -41,7 +42,7 @@ nav {
   background-color: var(--d-red);
 }
 nav a {
-  margin: 0 10px;
+  margin: 0 5px;
   background-color: var(--red);
   color: var(--white);
 
@@ -81,7 +82,7 @@ nav a:hover {
   padding: 10px 20px;
 }
 #headnav a:first-child {
-  margin-left: 20px;
+  margin-left: 10px;
 }
 #headnav .spacer {
   flex-grow: 1;
@@ -102,3 +103,35 @@ nav a:hover {
 #socials a:hover {
   background-color: var(--l-red);
 }
+
+@media only screen and (max-width: 520px) {
+  #headnav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 25px;
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    margin: auto 0;
+    margin-right: 5px;
+    transform: rotate(0deg) !important;
+
+    z-index: 100;
+  }
+  #headnav a {
+    padding: 5px 0;
+    margin: 5px 0;
+  }
+  body {
+    width: calc(100% - 25px) !important;
+    margin: auto 0 auto auto !important;
+  }
+  #headnav a:first-child {
+    margin-left: 0;
+    margin-top: 0;
+  }
+  #bnav {
+    display: none;
+  }
+}