0 votes
by (160 points)

Hello, everyone.

I've been looking for a solution for a while, but can't seem to find one.

I have moved #ui-bar to the right of my game because I prefer it to be there. However, the game exhibits some strange behavior. When the ui bar is not stowed, all text is shifted to the right even though that is not where the UI bar is. When it is stowed, it flows back to the left.

If anyone can help me figure out what is wrong, I would be deeply appreciative.

Screenshots:

Stowed - Looks fine.

https://gyazo.com/5bcd14bb6d2a2f64469630d7ffd62955

Unstowed - Pushed in the wrong direction.

https://gyazo.com/b1eba60cb90bd600f03c9fc1ba8b5e09

 

Here is my stylesheet, courtesy MadExile. The only thing I added was 

 

/* Basic styling for all */
#body {
 margin: 3.5em;
}
#ui-bar {
 left: auto;
 right: 0;
 width: 18em;
 padding: 3.5em 3.5em 0 1.5em;
 border: none;
 border-left: 1px solid #fff;
}
#ui-bar.stowed {
  left: auto;
 right: 0;
  width:2em;
}
#ui-bar header, #ui-bar #story-caption,
#ui-bar nav, #ui-bar footer {
 text-align: left;
}
#ui-bar ul {
 padding: 0;
}
#passages {
 margin-left: 0;
 margin-right: 23em;
 padding: 0;
 border: none;
}#uibar

#story {
  left: 0;
}

 

 

 

 

 

 

 

 

1 Answer

0 votes
by (63.1k points)

Add something like:

#story, #ui-bar.stowed~#story { margin-left: 4.5em; }

 

...