style: Attempt to make the design more responsive

This should help with small viewports, for example on mobile.
The desktop layout, while suboptimal, should have worked with mobile
devices but some browsers don't display things properly.

html_resources/style.css

@@ -15,9 +15,15 @@ html {
 
 body {
   margin: 0 auto;
-  width: 90%;
+  width: 100%;
   min-height: 100%;
 }
+@media screen and (min-width: 48rem) {
+  body {
+    width: 90%;
+  }
+}
+
 
 /* TODO: media query, use entire width on small viewports */
 
@@ -42,12 +48,17 @@ p, pre, ul {
   margin-right: auto;
   margin-bottom: 0.9em;
 
-  width: 80%;
+  width: 98%;
   max-width: 720px;
 
   list-style-position: inside;
   list-style-type: disclosure-closed;
 }
+@media screen and (min-width: 48rem) {
+  p, ul {
+    width: 80%;
+  }
+}
 
 li ul {
   margin-left: 2em;
@@ -83,8 +94,24 @@ p.copyright {
 }
 
 pre {
-  width: 80ch;
+  max-width: 80ch;
   font-size: 0.9rem;
+  overflow: scroll;
+
+  /*
+    Workaround for extending off screen on small viewports bc I cba
+    to figure it out properly
+  */
+  width: 90%;
+}
+@media screen and (min-width: 48rem) {
+  pre {
+    /*
+      Get rid of scrollbars on browsers that show them regardless of
+      whether the content fits on screen or not
+    */
+    overflow: visible;
+  }
 }
 
 pre.terminal {

ma-Escape-from_dome_city.html

@@ -15,18 +15,18 @@
   blue. <span class="comment">note: make it a theme that the metro is
   always yellow and red</span> The only person inside is the guy who had
   called out to her, turning away from the door he had just opened.
-  His Neotek jacket flaps in the air as he runs to the other end of the
+  His Neotek jacket flaps in the air as he runs towards the other end of
-  train &ndash; that has to be Jack. The motors begin to hum while Annie
+  the train &ndash; that has to be Jack. The motors begin to hum while
-  is still running towards the open door. She jumps inside as the train
+  Annie is still running towards the open door. She jumps inside as the
-  starts moving back in the direction it came from. The door closes just
+  train starts moving back in the direction it came from. The door closes
-  after leaving the platform.
+  just after leaving the platform.
 </p>
 <p>
   The train accelerates with a force stronger than anything she has ever
   felt before. The motors scream, the entire train rattles. While making
   her way to the front, she looks outside. The city flies by. The horn
-  sounds as the train barrels though the next station. The platform
+  sounds as the train barrels through the next station. The platform
-  appears, is visible for just long enough to see the astonished faces of
+  appears, is visible just long enough to see the astonished faces of
   the onlookers, and disappears again.
 </p>
 <p>
@@ -71,16 +71,20 @@
   blueprints, manuals, everything we could find.</span><br />
   <span class="quote speech">Sounds good. Just put them in there for
   now.</span><br />
-  He gestures towards a small cabinet in the back of the driver&apos;s
+  He gestures towards a small cabinet on the wall behind them.
-  cabin. Annie places the pile on top of a few books and binders that are
+  Annie places the pile on top of a few books and binders already
-  already in there. The train barrels through another station. Jack slowly
+  inside.
-  decelerates the train.<br />
+</p>
+<p>
+  The train barrels through another station. Jack decelerates slowly,
+  saying:<br />
   <span class="quote speech">We&apos;re almost at your drop-off point, next
   station is Crystal Park ... uhhh ... and we might have a problem.</span>
   <br />
-  The train is going around a long curve overseeing the park and square in
+  The train is going around a long curve overseeing the park and the
-  front of the station. &lt;Grandpa&apos;s friend&gt;&apos;s car is there,
+  square in front of the station. &lt;Grandpa&apos;s friend&gt;&apos;s car
-  surrounded by police cruisers with flashing lights and open doors.<br />
+  is there, surrounded by police cruisers with flashing lights and open
+  doors.<br />
   <span class="quote speech">What do we do now?</span><br />
   <span class="quote speech">Well I&apos;m sure as fuck not staying around
   to see what they&apos;re up to down there.</span> Jack says while
@@ -89,15 +93,15 @@
 </p>
 <p>
   They pass a couple more stations before the train runs over a switch and
-  gets suddenly jolted to the side. The train rocks side to side for a
+  gets suddenly jolted to the left. It rocks side to side for a moment.
-  moment. They are now heading straight for the outer wall of the dome.
+  They are now heading straight for the outer wall of the dome.
   The airlock, now in view, is rapidly coming closer. The inner
-  &#8216;B33FY-AF&apos; door is wide open. Technicians and police are
+  <span class="quote non-speech">B33FY-AF</span> door is wide open.
-  standing around it in small groups, trying to figure out why and how
+  Technicians and police are standing around it in small groups, trying
-  it had opened. The ramps connecting the street below to the airlock are
+  to figure out how and why it had opened. The ramps connecting the streets
-  full of parked transporters and police cars. Some are even on the tracks
+  below to the airlock are full of parked transporters and police cars.
-  but the one Annie and Jack are approaching on is mostly clear.
+  Some are even on the tracks but the one Annie and Jack are approaching
-  He sounds the horn.
+  on is mostly clear. He sounds the horn.
 </p>
 <p>
   <span class="quote speech">Hold on to something!</span> Jack slams on the
@@ -112,11 +116,12 @@
   of pressurized air and the <i>ka-chonk</i> of large machinery.
   <span class="quote speech">Access authorized, cycling airlock, please
   stand by</span>, announces an automated voice. The bunker door behind
-  them starts to move with a squeaking noise. The &#8216;keepers of
+  them starts to move with a creaking noise. The
-  order&apos; that had started to run after the train into the airlock
+  <span class="quote non-speech">keepers of order</span> that had started
-  stop and look around in confusion. Everything around them turns to black.
+  to run into the airlock after the train stop and look around in
-  The only thing Annie sees are the illuminated gauges on the control
+  confusion. Everything around them turns to black. The only thing Annie
-  panel. More hissing of pressurized air.
+  sees are the illuminated gauges on the control panel. More hissing of
+  pressurized air.
 </p>
 <p>
   The train shakes slightly as it makes a noise that sounds like a
@@ -130,8 +135,8 @@
   <span class="quote speech">Everything okay? You look puzzled.</span>
   Jack looks at her.<br />
   <span class="quote speech">What&apos;s this weird noise?</span><br />
-  <span class="quote speech">The generator. There&apos;s no power out here
+  <span class="quote speech">The generator. The electrified tracks end
-  so the train itself has to generate it to drive.</span>
+  at the air lock so the train has to generate its own power.</span>
 </p>
 <p>
   The police start banging on the outside of the train and yell something.
@@ -142,15 +147,16 @@
   joins in with the noise of the generator.
 </p>
 <p>
-  <span class="quote speech">In a couple minutes, it&apos;s gonna get very
+  Jack sets the train in motion again.<br />
-  bright.</span> Jack says while driving the train into the tunnel.
+  <span class="quote speech">In a few minutes, it&apos;s gonna get very
+  bright.</span> he says while driving into the tunnel.
   <span class="quote speech">Close your eyes if it&apos;s too bright. It
-  might take a while to get used to the sun.</span><br />
+  might take a while to get used to the sunlight.</span><br />
   The train begins to move up a slight incline. An automated announcement
   comes on:<br />
   <span class="quote speech">Dear passengers, welcome to the combined
   Sentinel&nbsp;Shores and Ivydale local transit zone! Please keep in mind
-  that the last train returning to &lt;underground city&gt; for today
+  that the last train returning to Sunside Cove for today
   departs from Ivydale&nbsp;South at 10:15PM. Enjoy your travel!</span>
 </p>
 <p>
@@ -176,7 +182,7 @@
   out any details, they roll into another tunnel. The automated voice
   comes on again:<br />
   <span class="quote speech">We are now approaching Ivydale South. Your
-  next connections are line 7 to Ivydale Distillery from platform 5,
+  next connections are Metro line 7 to Ivydale Distillery from platform 5,
   HST1511 to Siren&apos;s Edge from platform 14, HST815 to Nova Metropolis
   from platform 11. This train will continue on line 5 to
   Sentinel&nbsp;Shores Sea&nbsp;Market via Ivydale&nbsp;West,
@@ -184,8 +190,8 @@
   After a moment, Jack says quietly:<br />
   <span class="quote speech">I wonder how much of these places is
   left...</span> Raising his voice back to a normal level, he adds:
-  <span class="quote speech">But for now, we&apos;ll head back to
+  <span class="quote speech">But for now, we&apos;ll leave the train here
-  base.</span><br />
+  and head back to base.</span><br />
   <span class="quote speech">Base?</span><br />
   <span class="quote speech">The bunker, we refer to it as our base of
   operations.</span><br />

mb-First_Steps_Outside.html

@@ -5,20 +5,20 @@
   The station is is much larger than any of the metro stations inside the
   dome. It has many platforms. Portions of the tall roof, supported by
   large stone pillars and rusty steel beams, have caved in and what's
-  still standing has holes. Rays of light poke through holes in the walls
+  still standing has holes. Rays of light poke through the roof and holes
-  and the roof. All of that is visually stunning but what really catches
+  in the walls. All of that is visually stunning but what really catches
   Annie's eyes are the plants everywhere. Parts of the platforms are
   densely covered in the thin, green blades of some plant giving them a
   fuzzy look. Vines cling to the walls and pillars, crawl along gaps and
-  edges, and hang from the rusty beams and the fringes of the caved in roof
+  edges, and hang from the fringes of the caved in roof sections and rusty
-  sections. Moss grows on the rusted benches and trash cans.
+  beams. Moss grows on the rusted benches and trash cans.
 </p>
 <p>
   Jack turns off the generator and decelerates the train. Clanging from
   under the floor followed by the squeaking of the brakes. The train runs
   over a bunch of bushes and tall flowers that have taken root on the
   tracks before coming to a halt next to a staircase in the center of the
-  platform.<br />
+  platform.
   <span class="quote speech">Exit to the right</span>, Jack says in unison
   with the automated voice while turning the switch for the doors.
   He gestures towards the passenger area.<br />
@@ -26,31 +26,33 @@
 </p>
 <p>
   Annie walks over to the closest door and pushes the button. Pressurized
-  air hisses and one half of it opens very slowly.<br />
+  air hisses and one half of it opens very slowly. She says:
+  <br />
   <span class="quote speech">This door has probably seen better
   days.</span><br />
   <span class="quote speech">Everything out here has seen better days
-  &ndash; except for the plants. They&apos;re thriving.</span><br />
+  &ndash; except for the plants...</span><br />
   <span class="quote speech">There are so many of them.</span><br />
-  They step out onto the platform. Annie  breathes the warm air. It smells
+  They step out onto the platform. Annie breathes the warm air. It smells
   of the run-over plants. Insects are buzzing around, and the wind rustles
   through the leaves. She crouches down and touches the carpet of green
   fuzziness.<br />
   <span class="quote speech">Grass. It grows pretty much everywhere &ndash;
   usually much taller than this though.</span><br />
   She looks up at him.<br />
-  <span class="comment">fix this</span>
+  <span class="quote speech">I&apos;m surprised the plants grow in
-  <span class="quote speech">I&apos;m surprised that anything grows in
   here.</span><br />
-  <span class="quote speech">Pretty much every building out here is
+  <span class="quote speech">Pretty much every building in the area is
-  overgrown. By the way: Welcome to the outside world. Wanna take a quick
+  overgrown. That&apos;s what happens when you don&apos;t maintain them:
-  look around?</span><br />
+  Nature takes over. By the way...</span><br />
-  She gets up.<br />
+  He helps her up.<br />
+  <span class="quote speech">Welcome to the outside world. Wanna take a
+  quick look around?</span><br />
   <span class="quote speech">Sure.</span><br />
   Jack uses a key to close the door and they get going.
 </p>
 <p>
-  The two walk down the flight of stairs in the center of the platform
+  The two walk down the flight of stairs in the center of the platform,
   taking them to an underpass. The floor is covered in water so they follow
   a ledge on the side. Jack leads Annie up the stairs to the last platform.
   From there, they step outside through a side entrance.
@@ -63,13 +65,13 @@
   <br />
   Jack chuckles. <span class="quote speech">Well... No. Only during the
   day.</span><br />
-  Annie looks around. They are standing on a balcony-like platform
+  She looks around. They are standing on a balcony-like platform
   overlooking a city in a valley.<br />
   <span class="quote speech">Wooow</span>, she utters in astonishment.
   <br />
-  <span class="quote speech">Ivydale - or at least what remains of
+  <span class="quote speech">Ivydale &ndash; or at least what remains of
   it.</span><br />
-  She walks over to the rusted railing and goes to lean against it.<br />
+  Annie walks over to the rusted railing and goes to lean against it.<br />
   <span class="quote speech">Don&apos;t lean on that.</span><br />
   <span class="quote speech">Why not?</span><br />
   She steps back.<br />
@@ -88,7 +90,7 @@
 <p>
   Cautiously stepping back to the edge, Annie looks down. Bushes overgrow
   everything, covering the hillside below the tall sandstone wall of
-  the embankment with the station. The walls of small ruins and half
+  the embankment the station is built on. The walls of small ruins and half
   fallen-in fences stick out here and there, and the bushes are interrupted
   by what remains of roads, paths, and staircases. Small rivers cut
   through the landscape. Annie looks up, into the distance: The ruins
@@ -108,9 +110,9 @@
 </p>
 <p>
   After pointing out some other notable landmarks, Jack decides it is time
-  to get going. He starts to lead the way, walking towards the side of the
+  to go. He leads the way, walking towards the end of the station that
-  station that they arrived from. The balcony-like walkway connects to
+  they arrived from. The balcony-like walkway connects to
-  a wide staircase down from the end of the embankment where the rear part
+  a wide staircase down from the end of the embankment, where the rear part
   of the station extends into the mountain. It leads to a collapsed bridge
   next to a large waterfall. Annie marvels at the sheer amount of water
   flowing by, something that she had never before seen.
@@ -124,6 +126,6 @@
   <span class="comment">Something interesting needs to happen here.</span>
   <br />
   They make their way across the fast-flowing river by stepping on large
-  stones in the water, and continue through the bushes towards Facility 53.
+  stones in the water, and continue through the bushes towards the bunker.
 </p>
 <p class="copyright">Copyright &#169; 2023 Jan Danielzick (aka. BodgeMaster) &ndash; All rights reserved.</p><script>let spans = ["<span class=\"paper green\">", "<span>"]; let pre_texts = document.getElementsByTagName("pre"); for (let i = 0; i < pre_texts.length; i++) {if (pre_texts[i].className != "paper") continue; let lines = pre_texts[i].innerHTML.split("\n"); let result = ""; for (let j = 0; j < lines.length; j++) {result = result + spans[j%2] + lines[j] + " ".repeat(80-lines[j].length) + "</span>\n";} pre_texts[i].innerHTML = result;}</script></body></html>

mc-welcome_home.html

@@ -1,23 +1,17 @@
-<!DOCTYPE html><html><head><title> Welcom Home </title><link rel="stylesheet" type="text/css" href="html_resources/style.css"></head><body><a href="index.html"><button class="back">&lt;</button></a>
+<!DOCTYPE html><html><head><title> Welcome Home </title><link rel="stylesheet" type="text/css" href="html_resources/style.css"></head><body><a href="index.html"><button class="back">&lt;</button></a>
 
 <h1>Welcome Home</h1>
-<p class="comment">
-  Annie and Jack arrive at the bunker.
-  Annie smells fire and is worried by that -> fire in dome city is always
-  a bad sign.
-  Michelle and Annie get introduced.
-  James shows up?
-</p>
 
 <p>
   <span class="quote speech">I smell fire.</span><br />
   <span class="quote speech">Yes, we&apos;re almost there.</span><br />
   Annie is slightly confused by his answer and how seemingly unfazed he is.
   <br />
-  <span class="quote speech">Don&apos;t you want to do anything about
+  <span class="quote speech">Don&apos;t you want to do something about
   it?</span><br />
-  <span class="quote speech">Fires out here aren&apos;t generally bad news.
+  <span class="quote speech">Fires out here aren&apos;t all bad news.
-  Sometimes, they are, but this one is our campfire.</span>
+  Sometimes, they are, but I&apos;m gonna guess this one&apos;s our
+  campfire.</span>
 </p>
 <p>
   They walk over a ridge, revealing a view of the small valley beyond.
@@ -30,11 +24,9 @@
   They make their way across and Jack introduces Michelle and Annie to each
   other.<br />
   <span class="quote speech">So you join us out here after all?</span><br />
-  <span class="quote speech">Well, I&apos;d rather be here unprepared than
+  <span class="quote speech">Things kinda went south quickly.</span></br />
-  in <span class="comment">prison? jail?</span>. Things kinda went south
+  They all sit down around the fire and Annie recounts the events of the
-  quickly.</span></br />
+  recent past. <span class="comment">Idk, something needs
-  They all sit down around the fire. Annie recounts the events of the recent
-  past and things going wrong. <span class="comment">Idk, something needs
   to happen here. They start making food or whatever.</span>
 </p>
 <p>

na-Telescope.html

@@ -3,40 +3,47 @@
 <h1>Telescope</h1>
 <p>
   Michelle says: <span class="quote speech">I know the way.</span><br />
-  <span class="quote speech">Wanna drive?</span> <span class="comment">make
+  Jack extends his hand with the keys.<br />
-  it clear that Jack says this</span><br />
+  <span class="quote speech">Wanna drive?</span><br />
   <span class="quote speech">Sure.</span><br />
-  The four of them get in the truck and she pulls onto the road in front of
+  She takes them and the four get in the truck. A few moments later,
-  the bunker.<br />
+  Michelle pulls onto the road in front of the bunker.<br />
   James asks: <span class="quote speech">How far is it?</span><br />
-  <span class="quote speech">A decent bit. About an hour if the highway is
+  <span class="quote speech">A decent bit. Used to be about an hour on the
-  in good shape.</span> She turns right at an intersection onto the
+  highway. If it&apos;s in even somewhat decent shape, I&apos;d say
-  on-ramp <span class="comment">Is that a word? I&apos;m 80% sure...</span>
+  we&apos;re gonna make it there in about that time.</span><br />
-  of said highway.<br />
+  She turns right at an intersection onto the on-ramp, saying:<br />
-  <span class="quote speech">We&apos;re gonna find out very soon...</span>
+  <span class="quote speech">Gonna find out very soon...</span>
-  she adds.
 </p>
 <p>
-  The highway has potholes and is partially overgrown but its condition is
+  The pavement is cracked and has potholes, and the highway is partially
-  somehow good enough to drive fast. Michelle floors it and the city
+  overgrown but, despite this, its condition is somehow good enough.
-  outskirts fly by. Within a couple minutes, they make it out of Ivydale,
+  Michelle floors it and the remains of the city outskirts flies by.
-  leaving its valley behind. The mountains make way for an area of plains.
+  Within a few minutes, they make it out of Ivydale, leaving its valley
-  Michelle takes an exit onto another highway. The large, rusty signs above
+  behind. The mountains make way for an area of plains and
-  the road still indicate the proximity of Sentinel Shores where they
+  <span class="comment">low, smooth</span> hills. She takes an exit onto
-  haven&apos;t faded completely.
+  another highway. The large, rusty signs above it still indicate the
+  proximity of Sentinel Shores where they haven&apos;t faded completely.
 </p>
 <p>
   The highway takes them north, around the western part of Ivydale&apos;s
-  lower side. After a while, they approach Sentinel Shores and Michelle
+  lower side. After a while, they approach what used to be the outskirts of
-  takes an exit onto a rural road. The observatory is located on a hill
+  Sentinel Shores and Michelle takes an exit, getting them onto a rural
-  ahead of them. It&apos;s a small group of buildings around a large round
+  road. The observatory is located on a hill, now ahead of them; a small
-  building with a dome for a roof. Off to the side is a group of four
+  group of buildings in the distance.
-  towers, three of them still holding small geodesic domes.
+  <span class="comment">What symbol to put where that semicolon is?
+  Keep the semicolon? A comma? A dash?</span>
+</p>
+<p>
+  As they get closer, the buildings take distinct shapes. Two of them stand
+  out: The one in the center holds a large geodesic dome and another one off
+  to the side <span class="comment">elegant description of an optical
+  observatory?</span>. The other buildings look mostly unremarkable.
 </p>
 <p>
   Michelle parks the truck on what remains of the large paved area between
   the buildings and they get out. Trees and bushes grow all over the place,
-  some even out of the windows of the buildings.
+  some even out of the windows and through the roofs of the buildings.
 </p>
 <p class="comment">
   What now? They start exploring but where to they begin?