Changing Sugarcube CSS to Harlowe?

Question

I wanted to change this sugarcube css to Harlowe but I wonder if it's even possible? I was able to get the boxes font etc right but not anything else.  It's supposed to be two boxes but I can't achieve that. 

 

#sidebar {
  display:none;
}
body {
  margin: 0;
  padding: 0;
  height:100%;
}
#passages {
  margin:0;
  padding: 0;
  height:100%;
}
#passages * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.passage {
  position:relative;
  width: 60%;
  font-size:2em;
  font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;
  margin: 2em auto 0 auto;
}
.passage .header {
  width:100%;
  height:480px;
  min-height: 480px;
  border: #fff double 0.5em;
  border-radius: 1em;
  margin: 0 auto 1.5em auto;
  padding: 0;
  background-position: center;
  background-repeat: no-repeat;
}
.passage .content {
  top: 500px;
  width:100%;
  border: #fff double 0.5em;
  border-radius: 1em;
  padding: 1em;
}
a.internalLink, a.externalLink {
  border-bottom: solid #fff 1px;
  color:#eee;
  font-weight:normal;
}
a.internalLink:hover, a.externalLink:hover {
  text-decoration:none;
  border-bottom: none;
  color:#000;
  background-color:#fff;
  font-weight:normal;
  padding-left: 0;
}
a.internalLink:active, a.externalLink:active {
  border-bottom: 0;
}
@media screen and (max-width: 960px) {
  .passage {
    font-size: 1.5em;
  width: 75%;
  }
}
@media screen and (max-width: 640px) {
  .passage {
    font-size: 1.25em;
  width: 95%;
  }
}

 

Answer 1

I will assume that the content of your 'top' box is contained within a header tagged special passage, and that the content of your 'bottom' box (eg. all the strandard Passages of your project) has a structure like the following.

|content>[\
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos excepturi perspiciatis obcaecati! Repellat, pariatur

[[Link Text->Target Passage Name]]
]

The following CSS isn't a direct conversion of the SugarCube based one you supplied, but it should result is something that looks similar. You need to place it within your project's Story Stylesheet area, and you can extend it as you need.

tw-story {
	font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;
	font-size: 2em;
}

tw-sidebar, tw-include[type="startup"] {
	display: none;
}

tw-include[type="header"] {
	display: inline-block;
	min-width: 100%;
	border: #fff double 0.5em;
	border-radius: 1em;

	height: 480px;
}

tw-hook[name="content"] {
	display: inline-block;
	min-width: 100%;
	border: #fff double 0.5em;
	border-radius: 1em;

	margin-top: 20px;
}

tw-link, .enchantment-link {
	font-weight: normal;
	color: #eee;
	border-bottom: solid #fff 1px;
}
tw-link:hover, .enchantment-link:hover {
	font-weight: normal;
	color: #000;
	background-color: #fff;
	border-bottom: none;
	text-decoration: none;
}
.visited, .visited:hover {
	border-bottom: 0;
}

 

Comments

thank you so much for this!