The following is the CSS code contained in Sugarcane stories, which you, the story author, may accompany with your own stylesheets' CSS.
This is fundamental CSS which provides a base page structure to the story.
/* Sidebar */ #sidebar { position: fixed; list-style: none; width: 12em; } #sidebar #title, #sidebar #credits { cursor: auto; } #sidebar #storySubtitle, #sidebar #storyMenu { display: block; } .menu { position: absolute; display: none; z-index: 5; } /* Passages container */ #passages { margin-left: 18.2em; position:relative; } /* Links */ .passage a { color: #4d6ad8; } a.internalLink, a.externalLink, a.back, a.return, [data-passage], .menu div { cursor: pointer; } a.brokenLink { background-color: red; color: #000; } .marked { background-color: #f66; color: #000; } .marked[title] { cursor: help; } .passage li[data-bullet] { list-style-type: none; } .passage li[data-bullet]:before { content: attr(data-bullet); position: relative; left: -1em; } #storeArea { display: none; } #noscript { margin-left: 18.2em; font-size: 1.2em; font-weight: bold; } /* HTML4 compatibility */ img { vertical-align:bottom; } @media screen and (max-width: 640px) { #sidebar { position: static; margin: 0 auto; padding: 0; } body #sidebar li { text-align: center; } #passages { min-height: 100vh; margin-left: 0em; } } #loadingbar { position:fixed; top:0; left:0; border-top: solid #4d6ad8 6px; transition: width 0.5s; }
This CSS completes the default Sugarcane look-and-feel. This code is removed if you select “Don't use the Story Format's default CSS” in StorySettings, or if the words “blank stylesheet” appear anywhere within a comment in your story's stylesheets,
body { background-color: #000; color: #fff; font-family: Verdana,sans-serif; font-size: 62.5%; margin: 4em 15% 5% 5em; } #sidebar { left: 7.5em; margin: 0; padding: 0 1em 0 0; font: bold 1.1em Verdana,sans-serif; } #sidebar ul { padding: 0; } #sidebar li { color: #333; text-align: right; background-repeat: no-repeat; margin-bottom: 1em; line-height: 1.4em; list-style: none; } #sidebar li a { color: #333; text-decoration: none; } #sidebar li a:hover, #sidebar #title a:hover, #snapback:hover, #restart:hover { color: #fff; cursor: pointer; text-decoration: none; } #sidebar #title { font-size: 150%; } #sidebar #title, #sidebar #title:hover, #sidebar #title a { color: #999; } #sidebar #storySubtitle { font-size: 75%; } #storyAuthor { font-size: 50%; } #sidebar #storyMenu { line-height: 2.5em; margin-bottom: .5em; color: #999; cursor: auto; } #sidebar #credits { padding-top: 2em; font-weight: normal; font-size: 80%; } #sidebar #credits:hover { color: #333; } #sidebar #credits a { text-decoration: none; } #passages { border-left: 1px solid #333; padding-left: 1.5em; } .menu { background-color: #343434; color: #fff; opacity: .9; border: 1px solid #fff; text-align: left; font: 1.1em Verdana; line-height: 2em; } .menu div { padding: 0 .4em; } .menu div:hover { cursor: pointer; background-color: #fff; color: #343434; } .passage { font-size: 1.2em; line-height: 175%; margin-bottom: 2em; text-align: left; } .passage a { font-weight: bold; text-decoration: none; } .passage a:hover { color: #8ea6ff; text-decoration: underline; } .content > ul { padding-top: 1.3em; } .passage ul, .passage ol { margin-left: .5em; padding-left: 1.5em; } .passage li { margin-right: 6em; } .passage table { border-collapse: collapse; font-size: 100%; margin: .8em 1.0em; } .passage th,.passage td,.passage tr,.passage caption { padding: 3px; } .passage hr { height: 1px; } .passage center { max-width:50%; margin:auto; } .marked { margin-right: 12px; padding: 3px; } .disabled { font-weight: bold; color: #333; } @media screen and (max-width: 640px) { body { margin: 5%; } #sidebar { width:100%; margin: 0; border-bottom: 1px solid #333; } #passages { padding-top: 2em; border-left: 0; } }