{"id":688,"date":"2017-11-03T10:22:07","date_gmt":"2017-11-03T14:22:07","guid":{"rendered":"http:\/\/seriousplaylab.com\/courses\/edu5855\/?page_id=688"},"modified":"2017-11-03T10:27:13","modified_gmt":"2017-11-03T14:27:13","slug":"twine-css","status":"publish","type":"page","link":"https:\/\/seriousplaylab.com\/courses\/edu5855\/?page_id=688","title":{"rendered":"Twine CSS"},"content":{"rendered":"<p><strong>Thanks to <\/strong><a href=\"https:\/\/www.glorioustrainwrecks.com\/\" target=\"_blank\">Glorious Trainwrecks<\/a><strong>!<\/strong><\/p>\n<p><a class=\"bb-url\" href=\"http:\/\/l.j-factor.com\/twine\/stylesheets\/\">Click here for live previews of all these stylesheets!<\/a><\/p>\n<p><img class=\"bb-image\" src=\"http:\/\/i.imgur.com\/fpNNeqp.png\" alt=\"\" \/><br \/>\n&#8220;Sodden Tome&#8221;<br \/>\nThis requires Twine 1.4. Designed for slimy gloomy or spooky stories. &#8220;Wow! It really looks like it fell in a swamp!&#8221; &#8211; Marsh Boggart 341, Death Quadrant 9.<\/p>\n<pre class=\"bb-code-block\">html {\r\n  background-image: linear-gradient(to bottom,  hsl(70, 39%, 30%), black);\r\n  background-image: -webkit-linear-gradient(top,  hsl(70, 39%, 30%), black);\r\n  background-attachment: fixed;\r\n  background-color: black;\r\n}\r\nbody {\r\n  background-color: transparent;\r\n  margin: 2% 0 0 0;\r\n  font-size: 100%;\r\n}\r\n\r\n#passages {\r\n  background-image: linear-gradient(-135deg, beige, #c6c66c);\r\n  background-image: -webkit-linear-gradient(-45deg, beige, #c6c66c);\r\n  background-color: beige;\r\n  width: 40%;\r\n  margin:auto;\r\n  margin-bottom: 5%;\r\n  padding: 2em;\r\n  box-shadow: inset 0 0 2em olive;\r\n}\r\n\r\n.passage {\r\n  margin: 0px;\r\n  padding: 2em;\r\n\r\n  \/* Text formatting *\/\r\n  color: black;\r\n  font-family: \"Times New Roman\", serif;\r\n  text-align:justify;\r\n}\r\n.passage br + .char {\r\n  margin-left: 1.6em;\r\n}\r\n\r\n.char.e + .char, .char.t + .char, .char.a + .char, .char.o + .char, .char.i + .char, .char.n + .char, .char:nth-child(8n) {\r\n  text-shadow: 0em 3px 0.3em hsla(82, 39%, 20%, .25);\r\n  color: rgba(0,0,0,0.7);\r\n}\r\n\r\n\/* No sidebar *\/\r\n#sidebar {\r\n  display:none;\r\n}\r\n\r\nhr {\r\n  border: 0;\r\n  height: 2px !important;\r\n  background-color: black;\r\n  box-shadow: 0 0 1em darkolivegreen;\r\n}\r\n\r\n\/* Links *\/\r\n.passage a .char {\r\n  color: hsla(82, 39%, 20%, .75);\r\n  text-shadow: 0em 3px 0.2em hsla(82, 39%, 20%, .25), 0em 6px 0.4em hsla(82, 39%, 20%, .25);\r\n}\r\n.passage a:visited .char {\r\n  color: hsla(37, 39%, 20%, .75);\r\n  text-shadow: 0em 3px 0.2em hsla(37, 39%, 20%, .25), 0em 6px 0.4em hsla(37, 39%, 20%, .25);\r\n}\r\n.passage a:hover {\r\n  text-decoration: none;\r\n}\r\n.passage a:hover .char {\r\n  color: darkgreen !important;\r\n}\r\n.passage a:visited:hover .char {\r\n  color: darkred !important;\r\n}\r\n<\/pre>\n<p><img class=\"bb-image\" src=\"http:\/\/i.imgur.com\/h2vNuXA.png\" alt=\"\" \/><br \/>\n&#8220;Muet&#8221;<br \/>\nThis requires Twine 1.4. The background image is not included &#8211; but if you add an embedded image with the name &#8220;background&#8221;, it will be used by this stylesheet! Also, this has no sidebar, only the StoryTitle, StorySubtitle and StoryAuthor.<\/p>\n<pre class=\"bb-code-block\">@import url(<a href=\"http:\/\/fonts.googleapis.com\/css?family=Alegreya+Sans:300\">http:\/\/fonts.googleapis.com\/css?family=Alegreya+Sans:300<\/a>|Oxygen:400,700&amp;subset=latin,latin-ext);\r\n\r\nhtml {\r\n  background: [img[background]] fixed, dodgerblue;\r\n  background-size: cover;\r\n  min-height: 100%;\r\n  height:100%;\r\n}\r\nbody {\r\n  background-color: rgba(0,0,0,0.4);\r\n  background-attachment: fixed;\r\n  margin: 0;\r\n  padding: 0% 15% 0% 5em;\r\n  font-size: 100%;\r\n  font-family: Oxygen, \"Century Gothic\", sans-serif !important;\r\n  font-weight: 300;\r\n  min-height: 100%;\r\n}\r\n#sidebar, #passages {\r\n  padding-top: 4em;\r\n  padding-bottom: 0em;\r\n}\r\n#passages {\r\n  margin-left: 60%;\r\n  width: 50%;\r\n  min-height: 100%;\r\n  padding-bottom: 0;\r\n  margin-bottom: 0;\r\n  border: 0;\r\n}\r\n#passages::before {\r\n  border-left: 3px solid rgba(255,255,255,0.2);\r\n  position:fixed;\r\n  height:100%;\r\n  left: 50%;\r\n  top:0;\r\n  content:'';\r\n}\r\n.passage {\r\n  margin: 0px;\r\n  color: white;\r\n  opacity: 0.7;\r\n  font-size: 100%;\r\n  text-align:justify;\r\n  margin:auto;\r\n  padding: 0px 0px 5em 0px;\r\n}\r\n.passage a {\r\n  color: #cde8ff;\r\n  opacity: 1;\r\n}\r\n.passage a:hover {\r\n  color: white;\r\n  text-decoration: none;\r\n  border-bottom: 1px white solid;\r\n}\r\n.passage a:visited {\r\n  color: #d7ffcd;\r\n}\r\n#sidebar {\r\n  left: 1em;\r\n  width: 50%;\r\n  font-family: \"Alegreya Sans\",\"Century Gothic\",sans-serif !important;\r\n}\r\n#sidebar li {\r\n  color: white !important;\r\n  text-align: center;\r\n  opacity: 0.3;\r\n}\r\n#sidebar #storyTitle {\r\n  font-size: 4em;\r\n  line-height:0.8em;\r\n}\r\n#sidebar &gt; :not(.storyElement) {\r\n  display:none;\r\n}\r\n\/* Shrink the page when viewed on devices with a low screen width *\/\r\n@media screen and (max-width: 1600px) {\r\n  .passage, #sidebar { font-size: 90%; }\r\n}\r\n@media screen and (max-width: 1200px) {\r\n  #sidebar { font-size: 70%;}\r\n  .passage { font-size: 85%;}\r\n}\r\n@media screen and (max-width: 960px) {\r\n  #passages::before { display:none; }\r\n  #sidebar { position: relative; width: 100%;}\r\n  #passages { margin: 0; padding: 5%; width: 90%; border: 0; }\r\n}\r\n<\/pre>\n<p><img class=\"bb-image\" src=\"http:\/\/i.imgur.com\/ZoDbgx9.png\" alt=\"\" \/><br \/>\n&#8220;Simple Centered&#8221;<br \/>\nThe &#8220;simple&#8221; stylesheets are designed to be shorter and more customisable than the others. This one simply consists of passage text, centered horizontally AND vertically inside the window, along with a colour gradient background. See the code comments for places where colours and values can easily be changed.<\/p>\n<pre class=\"bb-code-block\">html {\r\n  width: 100%;\r\n\r\n  \/* Vertical colour gradient *\/\r\n  background-image: linear-gradient(to bottom,  black, midnightblue);\r\n  background-image: -webkit-linear-gradient(top,  black, midnightblue);\r\n  background-attachment: fixed;\r\n\r\n  \/* Fallback colour *\/\r\n  background-color: midnightblue;\r\n\r\n  \/* Vertical centering *\/\r\n  height: 100%;\r\n  display: table;\r\n}\r\nbody {\r\n  \/* Remove default styles *\/\r\n  font-size: 100%;\r\n  background-color: transparent;\r\n  margin: 0;\r\n\r\n  \/* Vertical centering *\/\r\n  height:100%;\r\n  display:table-cell;\r\n  vertical-align: middle;\r\n}\r\n#passages {\r\n  border-left: 0px;\r\n  margin: 0;\r\n  \/* Keep a gap at the top and bottom of the page,\r\n      when the text is longer than the window's height. *\/\r\n  padding: 5% 0;\r\n}\r\n\r\n.passage {\r\n  \/* Passage width *\/\r\n  width: 60%;\r\n  \/* Horizontal centering *\/\r\n  margin: 0 auto;\r\n\r\n  \/* Text formatting *\/\r\n  color: white;\r\n  font-size: 100%;\r\n  text-align:center;\r\n}\r\n\r\n\/* No sidebar *\/\r\n#sidebar {\r\n  display:none;\r\n}\r\n\r\n\/* Links *\/\r\na.internalLink, a.externalLink {\r\n  color: cornflowerblue;\r\n}\r\na.internalLink:hover, a.externalLink:hover {\r\n  color: lightskyblue;\r\n  text-decoration: none;\r\n}\r\n\r\n\/* Shrink the page when viewed on devices with a low screen width *\/\r\n@media screen and (max-width: 960px) {\r\n  .passage { font-size: 90%; width: 70%; }\r\n}\r\n@media screen and (max-width: 840px) {\r\n  .passage {  font-size: 87.5%; width: 80%; }\r\n}\r\n@media screen and (max-width: 720px) {\r\n  .passage { font-size: 75%; width: 90%; }\r\n}<\/pre>\n<p><img class=\"bb-image\" src=\"http:\/\/i.imgur.com\/HwtpPYe.png\" alt=\"\" \/><br \/>\n&#8220;Simple Box&#8221;<br \/>\nDisplays the passage text in a box, centered in the upper middle of the page, in front of a colour gradient.<br \/>\nSee the code comments for colours and values that can be customised.<\/p>\n<pre class=\"bb-code-block\">html {\r\n  \/* Vertical colour gradient *\/\r\n  background-image: linear-gradient(to bottom,  gainsboro, silver);\r\n  background-image: -webkit-linear-gradient(top,  gainsboro, silver);\r\n  background-attachment: fixed;\r\n\r\n  \/* Fallback colour *\/\r\n  background-color: silver;\r\n}\r\nbody {\r\n  \/* Remove default styles *\/\r\n  background-color: transparent;\r\n  margin: 10% 0 0 0;\r\n  font-size: 100%;\r\n  \/* Used to center the box *\/\r\n  text-align: center;\r\n}\r\n\r\n#passages {\r\n  \/* Box background (white with 70% opacity) *\/\r\n  background-color: rgba(255, 255, 255, 0.7);\r\n\r\n  \/* Border *\/\r\n  border: 2px solid white;\r\n\r\n  \/* Rounded corners *\/\r\n  border-radius: 1em;\r\n\r\n  \/* Box width *\/\r\n  width: 60%;\r\n\r\n  \/* Center the box *\/\r\n  display: inline-block;\r\n  min-height: 40%;\r\n  margin:auto;\r\n  margin-bottom: 5%;\r\n  padding: 0px;\r\n}\r\n\r\n.passage {\r\n  margin: 0px;\r\n  \/* Inner margin within the box *\/\r\n  padding: 2em;\r\n\r\n  \/* Text formatting *\/\r\n  color: black;\r\n  font-size: 100%;\r\n  text-align:justify;\r\n}\r\n\r\n\/* No sidebar *\/\r\n#sidebar {\r\n  display:none;\r\n}\r\n\r\n\/* Links *\/\r\na.internalLink, a.externalLink {\r\n  color: royalblue;\r\n}\r\na.internalLink:hover, a.externalLink:hover {\r\n  color: deepskyblue;\r\n  text-decoration: none;\r\n}\r\n\r\n\/* Shrink the page when viewed on devices with a low screen width *\/\r\n@media screen and (max-width: 960px) {\r\n  .passage { font-size: 90%;}\r\n  #passages { width: 70%; }\r\n}\r\n@media screen and (max-width: 840px) {\r\n  .passage {  font-size: 87.5%; }\r\n  #passages { width: 80%; }\r\n}\r\n@media screen and (max-width: 720px) {\r\n  .passage { font-size: 75%; }\r\n  #passages { width: 90%; }\r\n}<\/pre>\n<p><img class=\"bb-image\" src=\"http:\/\/i.imgur.com\/SXeOUDz.png\" alt=\"\" \/><br \/>\n&#8220;Squillions&#8221;<br \/>\n&#8220;It&#8217;s a Twine game that you can imagine James Bond playing.&#8221; ? Ian Bogost.<\/p>\n<pre class=\"bb-code-block\">head {\r\n  box-shadow: inset 0px 0px 30em #bbb;\r\n  width:100%;\r\n  height:100%;\r\n  display:block;\r\n  position:fixed;\r\n}\r\nhead * {\r\n  display:none;\r\n}\r\nbody {\r\n  background-color:#fff;\r\n  margin: 0;\r\n  text-align:center;\r\n}\r\n#passages {\r\n  border-left: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  line-height:100vh;\r\n}\r\n.passage {\r\n  position:absolute;\r\n  top: 0;  bottom: 0;  left: 0;  right: 0;\r\n  width: 75%;\r\n  height: 75%;\r\n  margin:auto;\r\n  font: bold 6em\/1.25em Helvetica, \"Helvetica Neue\", Arial, sans-serif;\r\n  color: #000;\r\n  letter-spacing: -0.05em;\r\n  text-align:center;\r\n}\r\n#sidebar {\r\n  display:table;\r\n  position:fixed;\r\n  top: 0; left: 0;\r\n  width:100%;\r\n  height:100%;\r\n}\r\n#sidebar #title {\r\n  display:table-cell; \r\n  vertical-align:middle;\r\n  text-align:center;\r\n}\r\n#sidebar #title #storyTitle {\r\n  font: bold 12em\/1.25em Helvetica, \"Helvetica Neue\", Arial, sans-serif;\r\n  letter-spacing: -0.05em;\r\n  color:rgba(0,0,0,0.15);\r\n}\r\n#title :not(#storyTitle){\r\n  display:none;\r\n}\r\n#storymenu, #snapback, #restart, #share, #credits {\r\n  display:none;\r\n}\r\na.internalLink:hover, a.externalLink:hover {\r\n  color:#de0000 !important;\r\n  text-decoration: none;\r\n}\r\na.internalLink:nth-child(3n), a.externalLink:nth-child(3n) {\r\n  color: #666;\r\n}\r\na.internalLink:nth-child(3n+1), a.externalLink:nth-child(3n+1) {\r\n  color: #777;\r\n}\r\na.internalLink:nth-child(3n+2), a.externalLink:nth-child(3n+2) {\r\n  color: #888;\r\n}\r\n@media screen and (max-width: 960px) {\r\n  body { font-size: 50%; }\r\n}\r\n@media screen and (max-width: 840px) {\r\n  body { font-size: 40%; }\r\n}\r\n@media screen and (max-width: 720px) {\r\n  body { \r\n    font-size: 30%;\r\n  }\r\n}<\/pre>\n<p><img class=\"bb-image\" src=\"http:\/\/i.imgur.com\/c8NIIW7.png\" alt=\"\" \/><br \/>\n&#8220;The Earth&#8217;s Story Illustrated&#8221;<br \/>\nBest used with a <a class=\"bb-url\" href=\"http:\/\/www.glorioustrainwrecks.com\/node\/5084\">dissolve transition<\/a>.<br \/>\nThis stylesheet is capable of displaying a 480-pixels-tall scene image above every passage&#8217;s text! You can set scene images using Tag CSS. To assign, say, the image &#8220;classroom_afternoon&#8221; to the tag &#8220;classroom&#8221;, simply create a stylesheet tagged &#8220;stylesheet classroom&#8221; and put this in it:<\/p>\n<pre class=\"bb-code-block\">.passage .header {\r\n  background-image: [img[classroom]];\r\n}<\/pre>\n<p>And then tag various passages with &#8220;classroom&#8221; to use the image.<br \/>\nTo have multiple images overlaid on each other, add multiple img declarations separated by commas, in order from frontmost to rearmost:<\/p>\n<pre class=\"bb-code-block\">.passage .header {\r\n  background-image: [img[character-funnycry]], [img[classroom]];\r\n}<\/pre>\n<p>That&#8217;s how you do it!<\/p>\n<pre class=\"bb-code-block\">#sidebar {\r\n  display:none;\r\n}\r\nbody {\r\n  margin: 0;\r\n  padding: 0;\r\n  height:100%;\r\n}\r\n#passages {\r\n  margin:0;\r\n  padding: 0;\r\n  height:100%;\r\n}\r\n#passages * {\r\n  box-sizing: border-box;\r\n  -moz-box-sizing: border-box;\r\n}\r\n.passage {\r\n  position:relative;\r\n  width: 60%;\r\n  font-size:2em;\r\n  font-family: \"Lucida Sans Typewriter\", Consolas, Monaco, monospace;\r\n  margin: 2em auto 0 auto;\r\n}\r\n.passage .header {\r\n  width:100%;\r\n  height:480px;\r\n  min-height: 480px;\r\n  border: #fff double 0.5em;\r\n  border-radius: 1em;\r\n  margin: 0 auto 1.5em auto;\r\n  padding: 0;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n}\r\n.passage .content {\r\n  top: 500px;\r\n  width:100%;\r\n  border: #fff double 0.5em;\r\n  border-radius: 1em;\r\n  padding: 1em;\r\n}\r\na.internalLink, a.externalLink {\r\n  border-bottom: solid #fff 1px;\r\n  color:#eee;\r\n  font-weight:normal;\r\n}\r\na.internalLink:hover, a.externalLink:hover {\r\n  text-decoration:none;\r\n  border-bottom: none;\r\n  color:#000;\r\n  background-color:#fff;\r\n  font-weight:normal;\r\n  padding-left: 0;\r\n}\r\na.internalLink:active, a.externalLink:active {\r\n  border-bottom: 0;\r\n}\r\n@media screen and (max-width: 960px) {\r\n  .passage {\r\n    font-size: 1.5em;\r\n  width: 75%;\r\n  }\r\n}\r\n@media screen and (max-width: 640px) {\r\n  .passage {\r\n    font-size: 1.25em;\r\n  width: 95%;\r\n  }\r\n}<\/pre>\n<p><img class=\"bb-image\" src=\"http:\/\/i.imgur.com\/OExY1tN.png\" alt=\"\" \/><br \/>\n&#8220;Remembering the 90&#8217;s&#8221;<br \/>\nBest used with an <a class=\"bb-url\" href=\"http:\/\/www.glorioustrainwrecks.com\/node\/5018\">instant passage transition<\/a>.<\/p>\n<pre class=\"bb-code-block\">body {\r\n  background:LightGrey;\r\n  color: #000;\r\n  font: medium \"Times New Roman\", Times, serif;\r\n  margin: auto;\r\n  padding: 8px;\r\n}\r\n#passages {\r\n  margin: auto;\r\n  border: 0;\r\n  padding: 0;\r\n}\r\n.header, .footer {\r\n  border: 1px inset;\r\n  margin: 0.5rem auto;\r\n}\r\n.passage {\r\n  font: inherit;\r\n  line-height: inherit;\r\n  margin: auto;\r\n}\r\n.passage ul {\r\n  padding: 0;\r\n  text-align: left;\r\n}\r\n.passage li {\r\n  display:inherit;\r\n  margin: 0;\r\n}\r\na, #sidebar #snapback, #sidebar #restart, #sidebar #share, .menu div {\r\n  font-weight:inherit !important;\r\n  text-decoration: underline !important;\r\n  color: #00F !important;\r\n}\r\na.visited {\r\n  color: #7F007F;\r\n}\r\n#sidebar {\r\n  font: inherit !important;\r\n  position:static;\r\n  width: auto;\r\n  list-style: disc outside;\r\n}\r\n#sidebar ul {\r\n  padding: inherit;\r\n}\r\n#sidebar li {\r\n  color: inherit;\r\n  text-align:inherit;\r\n  margin:inherit;\r\n  display:inline;\r\n}\r\n#sidebar #titleSeparator {\r\n  display:none;\r\n}\r\n#sidebar #title, #sidebar #title:hover {\r\n  color:inherit;\r\n}\r\n#sidebar #storyTitle, #sidebar #storyTitle:hover {\r\n  font-size: 2rem;\r\n  margin: .67rem 0;\r\n  font-weight:bold;\r\n}\r\n#sidebar #storySubtitle {\r\n  font-size: inherit;\r\n  font-weight:bold;\r\n}\r\n#sidebar #storyAuthor::before {\r\n  content: \"by \";\r\n}\r\n#sidebar #storyAuthor {\r\n  font-size:medium;\r\n  display:block;\r\n  font-weight:bold !important;\r\n}\r\n#sidebar #credits {\r\n  display:block;\r\n  font-size: smaller;\r\n  padding: inherit;\r\n}\r\n#snapbackMenu::before {\r\n  content: \"Rewind to:\";\r\n  font-weight:bold;\r\n}\r\n#shareMenu::before {\r\n  content: \"Share this story at:\";\r\n  font-weight:bold;\r\n}\r\n.menu::before {\r\n  content: \"Rewind to:\";\r\n  font-weight:bold;\r\n}\r\n.menu, .menu div:hover {\r\n  position: static;\r\n  background-color:inherit;\r\n  color:inherit;\r\n  opacity:1;\r\n  border:0;\r\n  font:inherit;\r\n  line-height:inherit;\r\n}\r\n.menu div {\r\n  margin: 0 1.12rem;\r\n  display: list-item;\r\n  list-style:disc outside;\r\n}\r\n<\/pre>\n<p><img class=\"bb-image\" src=\"http:\/\/i.imgur.com\/EMpyTFm.png\" alt=\"\" \/><br \/>\n&#8220;Porthole&#8221;<br \/>\nFeatures: Very roughly inspired by the title screen of &#8220;<a class=\"bb-url\" href=\"http:\/\/landsofdream.net\/games\/the-sea-will-claim-everything\/\">The Sea Will Claim Everything<\/a>&#8220;; Designed for games with brief passage text. No sidebar.<\/p>\n<pre class=\"bb-code-block\">body {\r\n  width: 100%;\r\n  margin-left: 0;\r\n  text-align:center;\r\n}\r\n#passages {\r\n  position:relative;\r\n  display:inline-block;\r\n  font-size: 1.5em;\r\n  background-color:skyblue;\r\n  background-image: -webkit-linear-gradient(top, #87ceeb 0%,#87ceeb 75%,#008eed 75%,#008eed 100%);\r\n  background-image: linear-gradient(to bottom, #87ceeb 0%,#87ceeb 75%,#008eed 75%,#008eed 100%);\r\n  width: 60em;\r\n  height: 60em;\r\n  border-radius: 30em;\r\n  border: darkgoldenrod 1em solid;\r\n  margin-left: 0;\r\n  padding-left: 0;\r\n}\r\n.passage {\r\n  position: absolute;\r\n text-align:center;\r\n  top: 20em;\r\n  bottom: 0;\r\n  margin: -10em 5em auto 5em;\r\n  display:inline-block;\r\n  width: 40em;\r\n  height: 40em;\r\n  overflow-y: hidden;\r\n  box-shadow: 0 0 2.5em 2.5em;\r\n}\r\na.internalLink, a.externalLink {\r\n  color: white;\r\n  font-size: 1.2em;\r\n}\r\na.internalLink:hover, a.externalLink:hover {\r\n  color: white;\r\n  text-decoration: none;\r\n  text-shadow: 0 0 0.5em white;\r\n}\r\n.passage .body {\r\n  color: white;\r\n}\r\n#sidebar {\r\n  display:none;\r\n}\r\n@media screen and (max-width: 960px) {\r\n  body { font-size: 55%; }\r\n}\r\n@media screen and (max-width: 840px) {\r\n  body { font-size: 45%; }\r\n}\r\n@media screen and (max-width: 720px) {\r\n  body { font-size: 40%; }\r\n}<\/pre>\n<p><img class=\"bb-image\" src=\"http:\/\/i.imgur.com\/xfIbAqa.png\" alt=\"\" \/><br \/>\n&#8220;The Earth&#8217;s Story 1.0&#8221;<br \/>\nFeatures: No sidebar. Similar to ZX Spectwine, below. Reminiscent of early 90s Nintendo RPGs &#8211; hence its gray sensibilities. Use <a class=\"bb-url\" href=\"http:\/\/www.glorioustrainwrecks.com\/node\/5013\">Tag CSS<\/a> and tag your passages &#8220;mint&#8221;, &#8220;strawberry&#8221;, &#8220;banana&#8221; or &#8220;peanut&#8221; to get different coloured borders for specific passages!<\/p>\n<pre class=\"bb-code-block\">body {\r\n  margin: 0;\r\n  background-color:#000;\r\n}\r\n#passages {\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n}\r\n.passage {\r\n  width: 40%;\r\n  min-width: 26em;\r\n  height: 33%;\r\n  min-height: 33%;\r\n  font-family: Helvetica, \"Helvetica Neue\", Arial, sans-serif;\r\n  letter-spacing: 0.1em;\r\n  padding: 1.5em;\r\n  padding-left: 2em;\r\n  font-size:1.8em;\r\n  background-color:#000;\r\n  color:#eee;\r\n  margin: 10%;\r\n  border: silver ridge 0.8em;\r\n  border-radius: 1em;\r\n}\r\n.passage[data-tags~=mint] {\r\n  border-color: MediumAquaMarine;\r\n}\r\n.passage[data-tags~=strawberry] {\r\n  border-color: HotPink;\r\n}\r\n.passage[data-tags~=banana] {\r\n  border-color: Gold;\r\n}\r\n.passage[data-tags~=peanut] {\r\n  border-color: Peru;\r\n}\r\n.content::before {\r\n  content: '&amp;#8226;';\r\n  position: relative;\r\n  left: -0.6em;\r\n  margin-right: -0.4em;\r\n}\r\na.internalLink, a.externalLink {\r\n  border-bottom: solid #fff 1px;\r\n  color:#eee;\r\n  font-weight:normal;\r\n}\r\na.internalLink:hover, a.externalLink:hover {\r\n  text-decoration:none;\r\n  border-bottom: solid #fff 2px;\r\n  color:#fff;\r\n  font-weight:normal;\r\n  padding-left: 0;\r\n}\r\na.internalLink:active, a.externalLink:active {\r\n  border-bottom: 0;\r\n}\r\n#sidebar {\r\n  display:none;\r\n}\r\n<\/pre>\n<p><img class=\"bb-image\" src=\"http:\/\/i.imgur.com\/WG63oVw.png\" alt=\"\" \/><br \/>\n&#8220;Hypercane 1.1&#8221;<br \/>\nAs used in <a class=\"bb-url\" href=\"http:\/\/aliendovecote.com\/uploads\/twine\/myriad%20hypercard.html\">Myriad<\/a><br \/>\nFeatures: Sidebar is converted to a top bar (minus Share); vaguely resembles System 6, but nowhere near enough for true aficionados.<\/p>\n<pre class=\"bb-code-block\">body {\r\n  margin: 10% 0 10% 0;\r\n}\r\n#passages{\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n}\r\n.passage, #sidebar * {\r\n  font-family: Geneva, \"Helvetica Neue\", Helvetica, sans-serif;\r\n  color:#000;\r\n  text-align:left;\r\n}\r\n.passage {\r\n  border-radius: 0.2em;\r\n  width: 60%;\r\n  margin: auto;\r\n  padding: 2em;\r\n  font-size:1.5rem;\r\n  background-color:#fff;\r\n  border: solid #000 0.05em;\r\n  box-shadow: #000 0.5em 0.5em 0;\r\n}\r\na.internalLink, a.externalLink {\r\n  border: solid #000 0.05em;\r\n  white-space: nowrap;\r\n  padding: 0.1em 0.2em 0.1em 0.2em;\r\n  border-radius: 0.5em;\r\n  color:#000;\r\n}\r\na.internalLink:hover, a.externalLink:hover {\r\n  text-decoration: none;\r\n  box-shadow: #000 0 0 0 0.1em;\r\n  color:#000;\r\n}\r\na.internalLink:active, a.externalLink:active {\r\n  color: #fff;\r\n  background-color:#000;\r\n}\r\nbody {\r\n  background:url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQMAAACTPww9AAAABGdBTUEAALGPC\/xhBQAAAAZQTFRFAAAA\/\/\/\/pdmf3QAAAA5JREFUeF5jOACEBgwGAAnIAeGomjuiAAAAAElFTkSuQmCC);\r\n}\r\n#sidebar {\r\n  position:absolute;\r\n  top:0px;\r\n  left:0px;\r\n  width:99.2%;\r\n  overflow-x:hidden;\r\n  background-color:#fff;\r\n  border-bottom: solid #000 1px;\r\n}\r\n#sidebar * {\r\n  color: #000 !important;\r\n  font-size:1.5rem;\r\n  background-color:clear !important;\r\n  display:inline !important;\r\n}\r\n#sidebar a:hover, #sidebar #snapback:hover,  #sidebar #restart:hover {\r\n  text-decoration:underline !important;\r\n}\r\n#sidebar a:active, #sidebar #snapback:active,  #sidebar #restart:active  {\r\n  color:#fff !important;\r\n  font-size:1.5rem;\r\n  background-color:#000 !important;\r\n  display:inline !important;\r\n}\r\n#sidebar li, #sidebar li &gt; span {\r\n  margin-left: 1rem;\r\n  margin-right: 1rem;\r\n}\r\n#sidebar a, #sidebar a:hover {\r\n  border: 0 !important;\r\n  box-shadow: none;\r\n}\r\n.menu {\r\n  background-color:#fff;\r\n  color:#000;\r\n  opacity:1;\r\n  font-size: 1.5rem;\r\n  border: solid #000 1px;\r\n  box-shadow: #000 0.1em 0.1em 0;\r\n}\r\n.menu div:hover {\r\n  background-color:#000;\r\n  color:#fff;\r\n}\r\n#credits, #share, #titleSeparator, #sidebar li br {\r\n  display:none !important;\r\n}\r\n<\/pre>\n<p><img class=\"bb-image\" src=\"http:\/\/i.imgur.com\/3lHBAGC.png\" alt=\"\" \/><br \/>\n&#8220;Closed In&#8221;<br \/>\nAs used in <a class=\"bb-url\" href=\"https:\/\/dl.dropboxusercontent.com\/u\/18841090\/Ludum%20Dare\/Solitary.html\">Solitary<\/a><br \/>\nFeatures: No sidebar; Enormous screen-filling font size designed for very terse stories; Font should scale down on mobile devices.<\/p>\n<pre class=\"bb-code-block\">body {\r\n  margin: 2%;\r\n}\r\n#passages{\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  width:96%;\r\n  margin: auto;\r\n}\r\n.passage {\r\n  font-size:6em; \r\n  color: #888;\r\n  text-shadow: #888 0 0 0.05em;\r\n}\r\n@media screen and (max-width: 960px) {\r\n  .passage {\r\n    font-size: 4em;\r\n  }\r\n}\r\n@media screen and (max-width: 640px) {\r\n  .passage {\r\n    font-size: 3em;\r\n  }\r\n}\r\na.internalLink, a.externalLink {\r\n  color: #eee;\r\n  text-shadow: #eee 0 0 0.07em;\r\n}\r\na.internalLink:hover, a.externalLink:hover {\r\n  color: #fff;\r\n  text-decoration: none;\r\n  text-shadow: #fff 0 0 0.09em;\r\n}\r\n#sidebar {\r\n\tdisplay:none;\r\n}<\/pre>\n<p><img class=\"bb-image\" src=\"http:\/\/i.imgur.com\/N0eEMwY.png\" alt=\"\" \/><br \/>\n&#8220;Orange Highlight&#8221;<br \/>\nAs used in <a class=\"bb-url\" href=\"https:\/\/dl.dropboxusercontent.com\/u\/106579376\/To%20my%20Grandma.html\">To my Grandma<\/a><br \/>\nFeatures: No sidebar; External links are a different colour to internal links.<\/p>\n<pre class=\"bb-code-block\">body {\r\n  margin: 5% 0 0 0;\r\n  background-color:#000;\r\n}\r\n#passages{\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n}\r\n.passage {\r\n  font-family: \"Times New Roman\",serif;\r\n  text-align:left;\r\n  color:#000;\r\n  width: 40em;\r\n  padding: 2em;\r\n  font-size:3em;\r\n  background-color:#fff;\r\n  background: -webkit-linear-gradient(left, #aaa 0%,#fff 19%);\r\n  background: linear-gradient(to right, #aaa 0%,#fff 19%);\r\n}\r\na.internalLink {\r\n  color:#620;\r\n  background-color:hsla(48, 100%, 50%, 0.5);\r\n}\r\na.externalLink {\r\n  color:#602;\r\n  background-color:hsla(320, 100%, 50%, 0.5);\r\n}\r\na.internalLink:hover {\r\n  color:#410;\r\n  background-color:hsla(40, 100%, 50%, 0.85);\r\n  text-decoration: none;\r\n}\r\na.externalLink:hover {\r\n  color:#401;\r\n  background-color:hsla(320, 100%, 50%, 0.85);\r\n  text-decoration: none;\r\n}\r\na.internalLink:active {\r\n  color:#140;\r\n  background-color:hsla(80, 100%, 50%, 0.85);\r\n  text-decoration: none;\r\n}\r\na.externalLink:active {\r\n  color:#104;\r\n  background-color:hsla(280, 100%, 50%, 0.85);\r\n  text-decoration: none;\r\n}\r\n#sidebar {\r\n  display:none;\r\n}\r\n<\/pre>\n<p><img class=\"bb-image\" src=\"http:\/\/i.imgur.com\/ahfWdtf.png\" alt=\"\" \/><br \/>\n&#8220;Warm Cabin&#8221;<br \/>\nFeatures: no sidebar; denotes a vague memory of varnished wood as approximated by the MS PowerPoint designers.<\/p>\n<pre class=\"bb-code-block\">body {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n#passages {\r\n  margin: 0 5% 0 5%;\r\n  padding: 2.5% 0 5% 0;\r\n  border-left: saddlebrown solid 1.5em;\r\n  height:auto;\r\n  background: #3d1d08;\r\n  background: -webkit-radial-gradient(center, ellipse cover,  #3d1d08 0%,#000000 80%);\r\n  background: radial-gradient(ellipse at center,  #3d1d08 0%,#000000 80%);\r\n}\r\n.header {\r\n  width: 25%;\r\n  border-top: saddlebrown solid 0.1em;\r\n  margin: auto;\r\n  padding: 0 0 2.5% 0;\r\n}\r\n.passage {\r\n  margin: 2em;\r\n  font-family: \"Georgia\", serif;\r\n  font-size:2.2em; \r\n  color: peru;\r\n  text-shadow: sienna 0.05em 0.05em 0.05em;\r\n}\r\na.internalLink, a.externalLink {\r\n  color: burlywood;\r\n  text-shadow: peru 0.05em 0.05em 0.05em;\r\n}\r\na.internalLink:hover, a.externalLink:hover {\r\n  color: cornsilk;\r\n  text-decoration: none;\r\n  text-shadow: peru 0.05em 0.05em 0.05em;\r\n}\r\n#sidebar {\r\n\tdisplay:none;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Thanks to Glorious Trainwrecks! Click here for live previews of all these stylesheets! &#8220;Sodden Tome&#8221; This requires Twine 1.4. Designed for slimy gloomy or spooky stories. &#8220;Wow! It really looks like it fell in a swamp!&#8221; &#8211; Marsh Boggart 341, Death Quadrant 9. html { background-image: linear-gradient(to bottom, hsl(70, 39%, 30%), black); background-image: -webkit-linear-gradient(top, hsl(70,&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":678,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/seriousplaylab.com\/courses\/edu5855\/index.php?rest_route=\/wp\/v2\/pages\/688"}],"collection":[{"href":"https:\/\/seriousplaylab.com\/courses\/edu5855\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/seriousplaylab.com\/courses\/edu5855\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/seriousplaylab.com\/courses\/edu5855\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seriousplaylab.com\/courses\/edu5855\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=688"}],"version-history":[{"count":1,"href":"https:\/\/seriousplaylab.com\/courses\/edu5855\/index.php?rest_route=\/wp\/v2\/pages\/688\/revisions"}],"predecessor-version":[{"id":689,"href":"https:\/\/seriousplaylab.com\/courses\/edu5855\/index.php?rest_route=\/wp\/v2\/pages\/688\/revisions\/689"}],"up":[{"embeddable":true,"href":"https:\/\/seriousplaylab.com\/courses\/edu5855\/index.php?rest_route=\/wp\/v2\/pages\/678"}],"wp:attachment":[{"href":"https:\/\/seriousplaylab.com\/courses\/edu5855\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}