What are the default settings of Harlowes' stylesheet

Question

I've been searching for ages to no avail. I can't find the default font or its size, I'm guessing it is 24px but that is just a guess.

Many thanks in advance,

Answer 1

If you use your web-browser's builtin Web Developer Tools to Inspect the HTML Elments of the current Passage of a story while you play it, and then select each of the main elements in turn (like html, body, tw-story, tw-passage, etc...) the Styles section will display what CSS is effecting that element.

If you look at the Styles section while the tw-story element is selected you will see that the following CSS is being directly applyed to it.

tw-story {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font: 100% Georgia, serif;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    font-size: 1.5em;
    line-height: 1.5em;
    padding: 5% 20%;
    margin: 0;
    background-color: #000;
    color: #fff;
}

The font: 100% Georgia, serif; setting in the above lets us know that Harlowe's default font-family is Georgia and that the default font-size starts off as 100% of whatever font size that the web-browser your using defaults too.

The later font-size: 1.5em; setting override lets us know that Harlowe's default font-size is 1.5 times the font size of the previous value which was 100% of the web-browser's default font size.

So if your web-browser's default font size is 16px then Harlowe's default font size will be 24px.

(16 x 100%) x 1.5  =>  16 x 1.5  =>  24

... however if the default font size of your web-browser is some other value then Harlowe's default will also be different.

Comments

Many thanks for the answer and the additional technical know how.

---

Ok, I in a bit of a bind. I am trying to replicate harlowes default style in sugarcube, with little to no experience with CSS, I am getting closer due to your help with inspect element. But I have having trouble with line spacing and paragraph spacing, and I can't locate the source of the issue, even copying the vast majority of the harlowe style code does not fix the problem.

Many thanks in advance,

This is what I have, and CSS code that will replicate perfectly harlowes style is what I want,

body	{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font: 100% Georgia, serif;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    font-size: 1.5em;
    line-height: 1.5em;
    padding: 5% 20%;
    margin: 0;
    background-color: #000;
    color: #fff;
    position: relative;
    box-sizing: inherit;
    -webkit-box-direction: normal;
	height:auto;
	position:relative;
	width:auto


}

.passage a 
{

color: #0645AD;

}