0 votes
by (750 points)

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

tw-story {
  color: #FFB3D9;
  text-shadow: 1.5px 1.5px #B0FFF5;
  font-size: 20px;
  font-family: "Press Start 2P","Helvetica","Arial",sans-serif;
}

tw-passage {
  border: 5px groove #FCAFC2;
  border-radius: 25px;
  background: #000000;
  padding: 25px;
}

tw-link {
  color:#FFFFFF;
  transition: color .2s ease-in-out;
}

tw-link:hover {
  color: #FA5F85;
}

img {
  max-width: 100%;
}

 


This is my style sheet. I can not get it to work on Sugarcube 2. is the formatting different or will it simply not work on Sugarcube?

 

 

1 Answer

0 votes
by (159k points)

Each Story Format is a mini web-application that is responsible for defining it's own core HTML structure, core CSS, and core functionality. The HTML section of the SugarCube 2 documentation describes its core structure and the CSS section describes the core CSS used to style that structure as well as the HTML elements used to represent things like markup based links as well as other visual output.

After reading the above linked information you will learn that SugarCube 2:

a. Defines the default font-family and font-size on the html element.
b. Defines the default foreground and background colours on the body element.
c. That the contents of the current passage is contained within an element with a .passage CSS class
d. That markup based links are styled using a .link-internal CSS class.

Based on the above your new style-sheet should look something like the following.

@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");

html {
	font-family: "Press Start 2P","Helvetica","Arial",sans-serif;
	font-size: 20px;
}
body {
	color: #FFB3D9;
	text-shadow: 1.5px 1.5px #B0FFF5;
}
.passage {
	border: 5px groove #FCAFC2;
	border-radius: 25px;
	background: #000000;
	padding: 25px;
}
.link-internal {
	color: #FFFFFF;
	transition: color .2s ease-in-out;
}
.link-internal:hover {
	color: #FA5F85;
}
.passage img {
	max-width: 100%;
}

note: you can also use your web-browser's built-in Web Developer tools to Inspect the HTML elements of the current page, and if you select one of the different elements that make up that page you should see the CSS rules that effect that element.

...