$color: white; $background-color: black; /* should be left alone, except where needed to accomodate . */ html { margin: 0; // This allows to cover the entire page height:100%; overflow-x:hidden; } /* This enables border-box on every element by default, unless overridden by a parent element. It also enables position:relative by default, which allows top, left, etc. to be used heedlessly. */ *, :before, :after { position: relative; box-sizing: inherit; } // This is just a reset. body { margin: 0; // This allows to cover the entire page height:100%; } /* houses the raw passage data of the story. Of course, it can't be visible. */ tw-storydata { display: none; } /* The element houses all of the s. This element can be styled by setting a ChangerCommand to ?page */ tw-story { @include flexbox; @include flex-direction(column); font: 100% Georgia, serif; // Use the more intuitive box model. box-sizing: border-box; // In case enchantments opt into content-box, their descendants // should still use border-box. [style*=content-box] * { box-sizing: border-box; } /* Instead of a 60% width, this uses 40% horizontal padding (applied below). */ width: 100%; min-height: 100%; /* This is the base font size, which is permuted below. */ $font-size: 1.5em; font-size: $font-size; line-height: $font-size; /* The 's default distance from the top and bottom of the page is 5%. */ padding: 5% 20%; /* This is necessary to make certain CSS animations (mainly slide-left) work with passages. */ overflow: hidden; background-color: $background-color; color: $color; /* Consecutive line breaks should consume less height than they normally would. Renderer converts those
s into this element. */ tw-consecutive-br { display: block; height: 1.6ex; visibility: hidden; } /* These are created by (dropdown:). This selector should be more specific, but I'm concerned about it being harder for user stylesheets to override... so I'm leaving it as-is. */ select { &:not([disabled]) { color: inherit; } background-color: transparent; font:inherit; border-style:solid; padding: 2px; } /* These are created by (input-box:). */ textarea { resize:none; background-color: transparent; font:inherit; color:inherit; border-style:none; padding: 2px; } /* These are created by (checkbox:). */ input[type=checkbox] { transform: scale(1.5); margin:0 0.5em; } /* This animation for the