Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Twine 2 Harlowe CSS Stylesheet

I am still awfully new at learning CSS and fear for creating a proper Stylesheet to fit Harlowe's Story Format. If someone could turn the following Stylesheet originally made for Sugarcane, it would help me admire what I need to do and what I need to do differently:

body {
background:LightGrey;
color: #000;
font: medium "Times New Roman", Times, serif;
margin: auto;
padding: 8px;
}
#passages {
margin: auto;
border: 0;
padding: 0;
}
.header, .footer {
border: 1px inset;
margin: 0.5rem auto;
}
.passage {
font: inherit;
line-height: inherit;
margin: auto;
}
.passage ul {
padding: 0;
text-align: left;
}
.passage li {
display:inherit;
margin: 0;
}
a, #sidebar #snapback, #sidebar #restart, #sidebar #share, .menu div {
font-weight:inherit !important;
text-decoration: underline !important;
color: #00F !important;
}
a.visited {
color: #7F007F;
}
#sidebar {
font: inherit !important;
position:static;
width: auto;
list-style: disc outside;
}
#sidebar ul {
padding: inherit;
}
#sidebar li {
color: inherit;
text-align:inherit;
margin:inherit;
display:inline;
}
#sidebar #titleSeparator {
display:none;
}
#sidebar #title, #sidebar #title:hover {
color:inherit;
}
#sidebar #storyTitle, #sidebar #storyTitle:hover {
font-size: 2rem;
margin: .67rem 0;
font-weight:bold;
}
#sidebar #storySubtitle {
font-size: inherit;
font-weight:bold;
}
#sidebar #storyAuthor::before {
content: "by ";
}
#sidebar #storyAuthor {
font-size:medium;
display:block;
font-weight:bold !important;
}
#sidebar #credits {
display:block;
font-size: smaller;
padding: inherit;
}
#snapbackMenu::before {
content: "Rewind to:";
font-weight:bold;
}
#shareMenu::before {
content: "Share this story at:";
font-weight:bold;
}
.menu::before {
content: "Rewind to:";
font-weight:bold;
}
.menu, .menu div:hover {
position: static;
background-color:inherit;
color:inherit;
opacity:1;
border:0;
font:inherit;
line-height:inherit;
}
.menu div {
margin: 0 1.12rem;
display: list-item;
list-style:disc outside;
}

Comments

  • Please use the C button in the comment field's toolbar to wrap your examples in code tags, it makes them easier to read.

    Harlowe's underlining page HTML structure is dramatically different to SugarCubes, this impacts HOW (and maybe IF) a particular visually effect is implemented and these differences need to be resolved to achieve the visual result you are after.

    1. Harlowe does not display the Story's Name or Author.

    If you want that information to appear then one way you can do that is to use a header tagged passage to display it. One issue with using this technique is the way Harlowe attaches the header/footer related elements to the tw-passage element, it does wrap the original content of the tw-passage within it's own element which makes it difficult to use CSS to style only that original content.

    2. Harlowe does not use the web-browser's history navigation buttons to control Undo/Redo, it uses links that appear in a left sidebar to do that and this means you will need to leave an area for those links to appear.

    These links can also effect the layout of the header section mentioned in point 1 because the HTML used to implement the links is a child of the tw-passage element and it structurally appears before the HTML elements that make the header section.

    The following examples are offered as a starting point, they don't produce a page that looks exactly like the original SugarCane one and there are still styling/element issues to be resolved.

    a. Title section of the page:

    Create a new passage named Title and assign it a header passage tag, add the following content to it. The content defines elements to display a story title and an author, and you will need to edit the Untitled Story and Anonymous text to represent the correct values.
    |storyTitle>[Untitled Story]\
    |storyAuthor>[Anonymous]\
    |separator>[]
    


    b. CSS used to style the page's elements:

    The following CSS goes within your story's Story Stylesheet area, it is used to style Harlowe's default elements as well as the elements that make up the title section in point A.
    warning: You may want to get a more experienced CSS coder to look at the following, as it may contain errors or attributes that don't work in all web-browsers.
    /* Overrider some Harlowe defaults. */
    html {
    	background: LightGrey;
    	color: Black;
    	font: medium "Times New Roman", Times, serif;
    	padding: 8px;
    }
    tw-story {
    	width: auto;
    	margin: 0;
    	margin-left: 3em;
    }
    tw-passage {
    	font-size: 0.7em;
    	line-height: 1.25em;
    }
    tw-sidebar {
    	left: -3em;
    }
    
    /* Style the content of the Title passage. */
    tw-include[title="Title"] {
    	display: block;
    	font-weight: bold;
    	margin-bottom: 0.5rem;
    	line-height: 1.5em;
    }
    tw-hook[name="storyTitle"] {
    	display: block;
    	font-size: 2rem;
    }
    tw-hook[name="storyAuthor"] {
    	display: block;
    	font-size: medium;
    }
    tw-hook[name="storyAuthor"]:before {
    	content: "by ";
    }
    tw-hook[name="separator"] {
    	display: block;
    	height: 1px;
    	border: 1px inset;
    	margin: 0.5rem auto;
    }
    
  • I would even more so prefer this one in Harlowe CSS:

    body {
    margin: 10% 0 10% 0;
    }
    #passages{
    margin: 0;
    padding: 0;
    border: 0;
    }
    .passage, #sidebar * {
    font-family: Geneva, "Helvetica Neue", Helvetica, sans-serif;
    color:#000;
    text-align:left;
    }
    .passage {
    border-radius: 0.2em;
    width: 60%;
    margin: auto;
    padding: 2em;
    font-size:1.5rem;
    background-color:#fff;
    border: solid #000 0.05em;
    box-shadow: #000 0.5em 0.5em 0;
    }
    a.internalLink, a.externalLink {
    border: solid #000 0.05em;
    white-space: nowrap;
    padding: 0.1em 0.2em 0.1em 0.2em;
    border-radius: 0.5em;
    color:#000;
    }
    a.internalLink:hover, a.externalLink:hover {
    text-decoration: none;
    box-shadow: #000 0 0 0 0.1em;
    color:#000;
    }
    a.internalLink:active, a.externalLink:active {
    color: #fff;
    background-color:#000;
    }
    body {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQMAAACTPww9AAAABGdBTUEAALGPC/xhBQAAAAZQTFRFAAAA////pdmf3QAAAA5JREFUeF5jOACEBgwGAAnIAeGomjuiAAAAAElFTkSuQmCC);
    }
    #sidebar {
    position:absolute;
    top:0px;
    left:0px;
    width:99.2%;
    overflow-x:hidden;
    background-color:#fff;
    border-bottom: solid #000 1px;
    }
    #sidebar * {
    color: #000 !important;
    font-size:1.5rem;
    background-color:clear !important;
    display:inline !important;
    }
    #sidebar a:hover, #sidebar #snapback:hover, #sidebar #restart:hover {
    text-decoration:underline !important;
    }
    #sidebar a:active, #sidebar #snapback:active, #sidebar #restart:active {
    color:#fff !important;
    font-size:1.5rem;
    background-color:#000 !important;
    display:inline !important;
    }
    #sidebar li, #sidebar li > span {
    margin-left: 1rem;
    margin-right: 1rem;
    }
    #sidebar a, #sidebar a:hover {
    border: 0 !important;
    box-shadow: none;
    }
    .menu {
    background-color:#fff;
    color:#000;
    opacity:1;
    font-size: 1.5rem;
    border: solid #000 1px;
    box-shadow: #000 0.1em 0.1em 0;
    }
    .menu div:hover {
    background-color:#000;
    color:#fff;
    }
    #credits, #share, #titleSeparator, #sidebar li br {
    display:none !important;
    }
Sign In or Register to comment.