Small TWINE 2 job, taking bids

Sage

Hello everyone,

Thank you for being amazing.

I'm wondering if I could pay a CSS designer to make some (not too difficult) tweaks to SugarCube for me?

The job would be (I think) very simple. I write books mostly (there is ONE game I was hired to write, which brought me to you guys), but anyway because I write books, that's really my style preference. I like to see things that look like a novel.

For example, maybe the first letter of a chapter would be bigger than the rest of the sentence. The page itself would look a lot like Harlowe, but it would have a 6pt space after each paragraph. Little things like that.

The reason I don't just use Harlowe is because (although I have the 1.1.o beta) the save feature works great on SugarCube and I just "get it" if that makes any sense. Also TME is freakin awesome and you can tell him I said so.

The other thing I would need the person to do is to put the save/load buttons on the screen in such a way that the sidebar doesn't take up SO MUCH space. The way it is currently feels like a game--which, I get it--it IS a game. I am just looking to make it more literary-looking.  For example, I already use the Bleached CSS that TME offers because reading black text on a white background fits my idea of a book better.

I hope this makes sense. Please PM if this is a job you can do, and how much it might cost me.

Thank you so much.

Sage.

greyelf

Is there an on-line example of the look-n-feel your aiming for? Maybe a website or app that looks similar?

Sage

Absolutely. I just added 2 of them as an example. I think the main difference between them is that one uses an indent and no 6pt space after a paragraph and the other has no indent but does use the space.

it makes more sense when you see the pics.

https://ssl.images-createspace.com/csp/Special/Img/services/examples/template_interior_sample_01.jpg
http://www.methods.co.nz/asciidoc/images/epub.png

Pneuma

Hi Sage,

I have been working on similar in Harlowe, as per attached.

I am sure it can be relatively easily converted to any other format, as the magic all occurs in the CSS portion.

Regards,

Pneuma

Sage

Wow. That is remarkably close! Let me see if I can use it on SugarCube. 
PayPal?

EDIT ** It works on yours (and looks cool--definitely a place to start) but on mine it really was kind of a disaster. If you're a CSS person, maybe we could work on something that is more of a fit?

TheMadExile

Try this instead:


@import url(http://fonts.googleapis.com/css?family=Black+Ops+One|Inconsolata:400,700);
.passage {
position: relative;
font: 16px/18px "Inconsolata", sans-serif;
padding: 80px;
border-left: 5px solid #7f7664;
box-shadow: 5px 5px 0 0 rgba(127, 118, 100, 0.2);
color: #555;
background-color: #f5f4f2;
text-align: justify;
}
.passage h3 {
font-family: "Black Ops One", cursive;
line-height: 50px;
margin-bottom: 40px;
border-style: solid none;
border-width: 2px;
text-align: center;
}
.passage .bodyText {
display: block;
}
.passage .bodyText::first-letter {
float: left;
font: 74px/70px "Black Ops One", cursive;
padding: 10px;
height: 64px;
margin-right: 10px;
border-radius: 5px;
color: #fff;
background-color: #7F7664;
}


Pneuma

Also make sure you are correctly enclosing your passage text with the relevant divs for every passage.

That is the only way you can have the header formatted one way and the passage text the other.

Sage

Hey there hero member! I do see the difference that your code has added to the Pneuma set, and yes that has fixed the disaster part.

However, it still does not present the first letter larger nor does it do the 6pt after (which is a what Pneuma's does).  Any ideas? Also neither one reduces the ui-bar footprint.

By the way... and this is important (because I absolutely appreciate you guys) since this group as a whole seems to just help people for free, is there anyway that I can actually give something back?

I can't code like you guys can, of course. But I am working on a project that will highlight SugarCube specifically and Twine 2 in a big way.  Well... I hope it hits in a big way, of course!

Sage

Pneuma that is extremely helpful.  I wasn't doing that. (because: n00b)

Let me see what that does.  Maybe I can even combine that with the TME fix.

Sage

is that Div class=first-letter ?

TheMadExile

If you're using this with the BLEACHED style set, as you've said, ensure that you move all of your @-statements to the very top of the Story Stylesheet.  So, in this case, move the @import statement to the top.  CSS rules require that all @-statements come first.

Sage wrote:

The other thing I would need the person to do is to put the save/load buttons on the screen in such a way that the sidebar doesn't take up SO MUCH space. The way it is currently feels like a game--which, I get it--it IS a game. I am just looking to make it more literary-looking.  For example, I already use the Bleached CSS that TME offers because reading black text on a white background fits my idea of a book better.

What's the deadline for this project look like?  The reason I ask is because the sidebar in SugarCube 2.0.0 (still in development) can be stowed, which may be enough for your purposes (demo).

Sage

Just checked it out.

2.0 works perfectly!  That's a great way to move it.  For people who want to read it like a book, they can... for gamers it's there for stats or turn counts or what-have-you.  Awesome.

Now I just need to make it look more like the bleached/Pneuma stuff (and then build it locally (because internet here is unreliable)) and maybe this will be a home run!

Still can't get the first letter to be big or the 6pt spacing, but it seems literally minutes away from being perfect.

Pneuma

Sage wrote:

By the way... and this is important (because I absolutely appreciate you guys) since this group as a whole seems to just help people for free, is there anyway that I can actually give something back?

I can't code like you guys can, of course. But I am working on a project that will highlight SugarCube specifically and Twine 2 in a big way.  Well... I hope it hits in a big way, of course!

I can't speak for other forum members, but I personally enjoy that people just help each other out, and support the community.

Also, if you are doing anything commercial, supporting the guys who actually built the platform through the donate link on their pages (i.e. http://chrisklimas.com/donate/) would go a long way to keeping the community going.

I really can not think of any better payment than enjoying your creations and input down the line.

Pneuma

Sage wrote:

is that Div class=first-letter ?

first-letter is just a built-in CSS macro that is used to target any containers first letter. In the example I provided, and in the CSS that TheMadExile cleaned up for SugarCube, we used "bodyText", so make sure to wrap the text with <div class="bodyText"> Text ... </div>

Sage

Well... along those lines, there may be two projects then. There is a company that wants a game-book from me (I chose Twine 2 and SugarCube) and we already have the story-line, characters, arcs, etc... and then also I was toying with the idea of writing another book, more like an instruction manual of sorts on how to use SugarCube and Twine 2 to make games. Something that doesn't seem to exist.

I mean, a "see it on the shelf and buy it"-type book, as opposed to the forums and wikis.

I'm almost a ridiculous choice to write it, I know... because I know so little about it... but I do have other books out in stores and I do know how to self-publish in a way that gets it into Barnes and Noble. So my plan was to ask around for people that know about the parts I don't, and then after enough knowledge has been gained... write it and publish it.

Sage

TME, I think you can answer this one better... why is there such a long delay of showing the black css before the bleached shows up?

I know that it usually means that "internet" --mine here sucks.

But the reason I am asking is because it wasn't until I added the @import that it started... I believe.

Any ideas?

Or even Pneuma if you know, please.

Pneuma

Yeh no, I am using the @import to direct import three fairly large fonts from Google Fonts. This will definitely impact performance, and was really just meant to be a stop gap for me while I look for a better font that I am allowed to download and serve directly from my site in future.

You might therefore consider removing the @import, and utilize built-in fonts, or whichever font set the Bleached style set was configured to use.

TheMadExile

The @import statement loads the specified fonts from the Internet, specifically from Google's API servers.  It should serve well enough for this example, but you'll probably want to change the font families later.

Sage

Okay - it is mostly working.

Any idea on the 6pt after (between) each paragraph?

Sage

I am amazed at how fast this problem was solved.

AMAZED.

There must be other people that want their games to look like a book. Maybe I should re-title the Forum question?

TheMadExile

Sage wrote:

Any idea on the 6pt after (between) each paragraph?

Because of the way the TiddlyWiki engine at the core of SugarCube works, that would be difficult to address without manually wrapping every paragraph in a <p> element.

Sage

Hmmm... that definitely would take you out of the writing flow, I think. Well... if that's what it is, then I guess that's what it is. I just figured it was some sort of bottom margin or something, or the size of the <br>

Pneuma

A fairly "hackish" and somewhat ugly method is to add the following to code to CSS:

.six-point { margin-top: 6pt; }

as a new line at the bottom, and then in your passage, instead of any other paragraph breaking method (like a carriage return, enter, or a <br>) add the following code:

<div class="six-point"/></div>

Just like that, don't add spaces or anything else, so for instance your paragraphs would look like:

and this is the end of paragraph one.<div class="six-point"/></div>This here is where paragraph two will begin...

It will make the code look very clunky, but on the presentation layer, it is looking more like what you had hoped.

TheMadExile

Try the following archive, it should do mostly what you want (incl. BLEACHED, local fonts, the works).  You will want to switch the story format over to use your local copy of SugarCube.  I did change the class name and you'll need to wrap the main paragraph section of each passage with <<nobr>>, but it's not too bad.

Demo.

Sage

So do I understand then that I am to take the ENTIRE CSS and cover the bleached one from before? Or to use both at once?

Sage

Stupid question - i just opened it

TheMadExile

I'd say import it into Twine 2 via the Import From File sidebar menu item. 

Sage

Really?! I didn't expect that.

First things, first... even just pasted in... it works GREAT!  Excellent.  From there I can easily decide if I want the indent or the 6pt - Nailed it!

Rockstar status.

2nd question... for the improt should I replace the local version that you created? Or make it a new one... or...?

TheMadExile

Sage wrote:

2nd question... for the improt should I replace the local version that you created? Or make it a new one... or...?

Replace what local version?  The archive I attached is an example project with the title Bookish.  It contains everything we've been doing here, plus the things I mentioned in that post, all bundled together and wrapped in a bow.

Sage

...and the DUMB QUESTIONS just keep coming, folks!

I see it wasn't a format.js - it was the story file.

haha

I need a break from the computer for a minute. Someone told me once that they have a thing called sunlight outside!

Sage

Yeah - I just saw that. haha  thank you - and thanks for the bow!