Twine Version: 2.3.16
Story Format: SugarCube 2.36.1
I am new to Twine, and have been slowly learning the SugarCube story format. I recently changed from Harlowe to SugarCube, and have managed to clean up everything that broke as a result of the conversion.
One of the items that did not seem to break was the grid set up. I want to use the grid set up as a way to generate color-coded “cards” within the experiential learning module. Each card has a different image on the left, with text on the right. There are different colors, depending on whether an outcome is “good” or “bad.” Throughout the beginning of the story, the initial card color matched the passage background, both being a dark eggplant purple color. At specific terminal nodes, however, the card colors differ from the dark eggplant background, being either pink, gold, red, etc., depending on the nature of the player choice.
The problem is, that the multiple column/grid styles seem to be overriding each other, with the last one overtaking the specifications for all of the ones before it. Depending upon which style formatting is last, all of the grids turn out to be that same color, so that I am not able to customize the grid backgrounds within each passage.
I would appreciate any assistance you all could provide in ameliorating this issue.
A sample of the Twine code appears below.
((within the Story Stylesheet))
#passages {
margin: 2.5em 5em !important;
max-width: none;
}
body {
background-color: #221C34;
}
.passage a {
font-family: Georgia, Serif;
font-size: 150%
}
.passage a {
color: #0095C8;
}
.passage a:hover {
color: #BE3A34;
text-decoration: none;
}
.wrapper {
display: grid;
grid-template-columns: 25% 75%;
grid-template-areas:
"left-sidebar content"
"left-sidebar content"
"left-sidebar content";
}
.left-sidebar {
grid-area: left-sidebar;
background-color: #221C34;
padding: 10px;
padding-left: 20px
}
.content {
grid-area: content;
background-color: #221C34;
padding: 10px;
}
.dark {
color: #002A3A
}
.dark a {
color: #002A3A
}
.dark a:hover {
color: #2211C34;
text-decoration: none;
}
.danger {
display: grid;
grid-template-columns: 25% 75%;
grid-template-areas:
"left-sidebar content"
"left-sidebar content"
"left-sidebar content";
}
.left-sidebar {
grid-area: left-sidebar;
background-color: #CF202F;
padding: 10px;
padding-left: 20px
}
.content {
grid-area: content;
background-color: #CF202F;
padding: 10px;
}
.nogo {
display: grid;
grid-template-columns: 25% 75%;
grid-template-areas:
"left-sidebar content"
"left-sidebar content"
"left-sidebar content";
}
.left-sidebar {
grid-area: left-sidebar;
background-color: #DD0DA8;
padding: 10px;
padding-left: 20px
}
.content {
grid-area: content;
background-color: #DD0DA8;
padding: 10px;
}
.legacy {
display: grid;
grid-template-columns: 25% 75%;
grid-template-areas:
"left-sidebar content"
"left-sidebar content"
"left-sidebar content";
}
.left-sidebar {
grid-area: left-sidebar;
background-color: #F5A800;
padding: 10px;
padding-left: 20px
}
.content {
grid-area: content;
background-color: #F5A800;
padding: 10px;
}
((within one of the passages-- even though I specify the “danger” (red) formatting, Twine renders the color for the “legacy” formatting (which is gold).))
<div class="danger">
<div class="left-sidebar">
<img src=https://art.pixilart.com/a453b5b4afcc641.gif style="max-width: 100%"></div>
<div class="content"><span class="dark"><h1>(U) You Selected All</h1>\
"""(U//FOUO)""" CAUTION: All options within this category listing may not be authorized. Instead of selecting all options within this category, select each option individually.
(U) ''Go back to the [[Main Menu]].''</span>
</div>
</div>