User Tools

Site Tools


jonah_css

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

jonah_css [2014/12/09 01:31]
l created
jonah_css [2017/10/09 20:39]
Line 1: Line 1:
-=====Sugarcane default CSS===== 
  
-The following is the default CSS code contained in Sugarcane stories, which you, the story author, may accompany with your own [[stylesheet]]s'​ CSS. 
- 
-====Base CSS==== 
- 
-This is fundamental CSS which provides a base page structure to the story. Notably, it places the Bookmark and Rewind links next to the passages'​ titles, allows passages to be organised vertically as they are added, and places the credits byline at the bottom. 
-<code css> 
-#passages { 
- position:​relative;​ 
- padding-bottom:​ 12em; 
-} 
-.content a { 
- color: #4d6ad8; 
-} 
-a.internalLink,​ a.externalLink,​ a.back, a.return, [data-passage] { 
- cursor: pointer; 
-} 
-a.brokenLink { 
- background-color:​ red; 
- color: black; 
-} 
-.marked { 
- background-color:​ pink; 
- margin-right:​ 12px; 
-} 
-.marked[title] { 
- cursor: help; 
-} 
-#floater { 
- position: fixed; 
- right: 0; 
- top: 0; 
- z-index: 5; 
- background-color:​ #fff; 
-} 
-.toolbar { 
- padding: 0; 
- visibility:​ hidden; 
-} 
-.toolbar a { 
- cursor:​pointer;​ 
-} 
-.passage:​hover .toolbar { 
- visibility:​ visible; 
-} 
-.passage li[data-bullet] { 
- list-style-type:​ none; 
-} 
-.passage li[data-bullet]:​before { 
- content: attr(data-bullet);​ 
- position: relative; 
- left: -1em; 
-} 
-.toolbar a { 
- margin-left:​ 12px; 
-} 
-#storeArea { 
- display: none; 
-} 
-img { 
- vertical-align:​bottom;​ 
-} 
-#noscript { 
- font-size: 120%; 
- font-weight:​ bold; 
-} 
-#loadingbar { 
- position:​fixed;​ 
- top:0; 
- left:0; 
- border-top:​ solid #4d6ad8 6px; 
- transition:​ width 0.5s; 
-} 
-</​code>​ 
-====Default CSS==== 
-This CSS completes the default Jonah 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,​ 
-<code css> 
-body { 
- font-family:​ Verdana,​sans-serif;​ 
- font-size: 62.5%; 
- margin: 0; 
- background-color:​ #f8f8f8; 
- color: #303030; 
- text-align:​ center; 
-} 
-h1,h2,h3 { 
- color: #000; 
- font-weight:​ normal; 
- text-align:​ center; 
-} 
-#content1 { 
- text-align:​ left; 
-} 
-h1 { 
- font-size: 4em; 
- line-height:​ 1.2em; 
- margin-bottom:​ 0; 
- margin-top:​ 1em; 
-} 
-h2 { 
- font-size: 1.4em; 
- font-style:​ italic; 
- margin-top:​ 1em; 
-} 
-h3 { 
- font-size: 1.3em; 
- margin-bottom:​ 5em; 
- margin-top:​ .8em; 
-} 
-.passage { 
- background-color:​ #f8f8f8; 
- font-size: 1.3em; 
- line-height:​ 175%; 
- margin-bottom:​ 2em; 
-} 
-.content a { 
- font-weight:​ bold; 
- text-decoration:​ none; 
-} 
-.content a:hover { 
- text-decoration:​ underline; 
- color: #8ea6ff; 
-} 
-.passage:​not(:​last-child):​not(:​hover) { 
- opacity: 0.4; 
- transition:​ 0.5s; 
- -webkit-transition:​ 0.5s; 
-} 
-.passage center { 
- max-width:​50%;​ 
- margin:​auto;​ 
-} 
-input, button { 
- font-size: 1.2em; 
-} 
-button { 
- padding: 0.2em 0.8em; 
-} 
-input[type=text] { 
- width: 20%; 
-} 
-.toolbar a { 
- color: #999; 
- text-decoration:​ none; 
-} 
-.toolbar a:hover { 
- text-decoration:​ underline; 
- color: #8ea6ff; 
-} 
-.title { 
- color: #000; 
- font: bold 1.4em Verdana,​sans-serif;​ 
- line-height:​ 200%; 
-} 
-#footer { 
- font-size: 1.1em; 
- font-style:​ italic; 
- margin-top:​ 5em; 
- text-align:​ center; 
-} 
-#footer a.externalLink { 
- border-bottom:​ 1px solid #464646; 
- color: #464646; 
- font-weight:​ normal; 
-} 
-#floater { 
- border-left:​ 1px solid #ddd; 
- border-bottom:​ 2px solid #aaa; 
- font-size: 1.1em; 
- padding: 0 20px; 
- text-align:​ center; 
- line-height:​ 100%; 
-} 
-#floater ul { 
- text-align:​ left; 
-} 
-#floater a { 
- color: #999; 
- cursor:​pointer;​ 
- font-weight:​ bold; 
- text-decoration:​ none; 
-} 
-#floater a:hover { 
- color: #8ea6ff; 
- text-decoration:​ underline; 
-} 
-#content1 { 
- margin: 0 12.7% 1em 12.7%; 
- text-align:​ left; 
-} 
-.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; 
-} 
- 
-.toolbar { 
- font-size: .5em; 
-} 
-.toolbar a { 
- margin-left:​ 12px; 
-} 
-.passage ul, .passage ol { 
- margin-left:​ .5em; 
- padding-left:​ 1.5em; 
-} 
-li { 
- list-style-type:​ square; 
-} 
-</​code>​ 
jonah_css.txt ยท Last modified: 2017/10/09 20:39 (external edit)