CSS Sidebar formatting in Sugarcane

bawpie

So I've been looking at some posted twine .css files including the rather helpful blank template provided by Sharp in this thread.

However, it doesn't seem to matter what I do, I can't adjust the width of the sidebar past a certain point, and it's way bigger than I'd like it to be.  If I try to adjust the width to a lesser percentage, it just squashes up the text in the sidebar up, but there's still a lot of whitespace before the left border in the passage that I just can't get rid of.

This is the CSS I'm using:

/* Your story will use the CSS in this passage to style the page.
Give this passage more tags, and it will only affect passages with those tags. */

/* Plain Sugarcane Stylesheet version 1.03 by Richard D. Sharpe, Dec. 30, 2013 */

@import url(http://fonts.googleapis.com/css?family=La+Belle+Aurore);

body {
/* This affects the entire page. */

/* Remove default styles */
margin: 0;
color: #293331;
font-family: 'La Belle Aurore',cursive;
font-size: 1.1em;
background-color: transparent;
}

#sidebar {
/* This affects the Sugarcane sidebar */
padding-top: 5%;
font-family: 'La Belle Aurore',cursive;
font-size: 1em;
left: 0.5em;
width: 8%;

}

#passages {
/* This is a container for all passages displayed on the page */

/* Passage width */
width: 85%;

/* Passage height */
height: auto;

/* Removes the vertical line to the left of Sugarcane passages */
border-left: 1;
}

.passage {
/* This only affects passages */

/* Centers the passage horizontally */
margin-left: 0%;
margin-right: 5%;

/* Padding */
padding-top:5%;
padding-bottom:5%;
padding-right:5%;
padding-left:0%;

/* Text formatting */
font-style: normal;
font-variant: normal;
font-weight: bold;
font-stretch: normal;
line-height: normal;
font-family: 'La Belle Aurore',cursive;
font-size: 1.1em;

/* Sets a border around the passage
border-style: solid;
border-width: 1;*/

/* Sets the passage background color */
background: transparent;
}

.passage a {
/* This affects passage links */

color: #4169E1;
}

.passage a:hover {
/* This affects links while the cursor is over them */

color: #6495ED;
}

I've linked to some examples below, but hopefully someone can give me an idea on how to reduce the amount of space the sidebar takes up.  I've also noticed the live link I've provided doesn't seem to load the googlefont at the beginning of the css, although it does work on my local machine which seems a bit weird?

Examples:  TWS File | HTML File

rosencrantz

The problem, I think, isn't going to be that you need to adjust the CSS for your sidebar, but for the #passages container.

The left margin is set as a fixed value in the default, and by omitting an explicit rule, you aren't overriding whatever the default is.

Try something like:

#passages {
/* This is a container for all passages displayed on the page */

/* Passage width */
width: 85%;

/* Passage height */
height: auto;

/* Removes the vertical line to the left of Sugarcane passages */
border-left: 1;

/* NEW */
margin-left:10%
}

That seemed to fix it for me.

As for the font... Yeah, it showed up when I was testing it locally, but your hosted html? No dice. Or rather, no fancy pants font.

bawpie

Wow, thank you.  I think I did have the margin-left field in there at some point and probably deleted it when I was trying to adjust other things.  Thank you! 

Re the fancy pants font ( ), I wonder if it's a dropbox issue? 

rosencrantz

You're welcome! A second pair of eyes makes all the difference.

A mysterious Dropbox issue was my first thought too. It seems silly for it to happen, but I bet that's what it is.

L

The CSS bug is because the Googfont URL starts with http, and Dropbox hosts files by https. To fix, simply remove the http and have it begin with //.

bawpie

Ah cool, I'll give that a try later.  Thanks!