CSS – Damit euer Twine hübsch wird

CSS – Einfügen unter Story -> #Stylesheet

body {
	background-image: url('https://images.pexels.com/photos/172276/pexels-photo-172276.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
	background-size: cover;
	background-repeat: no-repeat;
  font-size: 1.4em;
}

tw-story {
	background-color: rgba(255,255,255,0.80);
	padding: 5%;
	width: 60%;
	margin: auto;
font-family: 'Monaco', cursive;
	color: black;
 
}

tw-sidebar {display:none}

tw-link, .enchantment-link {
	font-weight: normal;
	padding-left: 5px;
	padding-right: 5px;
	color: black;
	background-color: rgba(252, 244, 86, 0.6);
}

tw-link:hover, .enchantment-link:hover {
 color: red;
}

Hinweis-Text auf der ersten Seite hinzufügen

(text-size: 0.6)[//Diese Geschichte enthält Bilder, die mit der Fobizz-KI Assistenz erstellt wurden.//]

Hintergrund verändern mit Tags

tw-story[tags~="zurück"] {
 background-image:url("https://images.pexels.com/photos/5778748/pexels-photo-5778748.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
 background-size:cover;
}

Tolle Sachen einfügen

Eine neue Seite hinzufügen:

[[Nächste Seite]] oder [[klicke hier-> Nächste Seite]]

Auf die letzte Seite zurückspringen:

(live:4s)[(undo:)]

Blinkender Text:

(text-style: "blink") [der Text der blinkt]

Bilder:

<img src="https://images.pexels.com/photos/87378/pexels-photo-87378.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" width="480">

Videos

<video width="480" controls autoplay>
  <source src="LINK" type="video/mp4">
</video>

Youtube/Vimeo-Clips:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/pTOr1IpK9e8' frameborder='0' allowfullscreen></iframe></div>

Gifs:

<iframe src="https://giphy.com/embed/qISaMW1xwmvNS"  width="480" height="360" frameBorder="0"></iframe><p></p>