-
Notifications
You must be signed in to change notification settings - Fork 0
creating the game screen layout
You can use a css grid-container like in the example below. Make sure that the grid-template has a uniform number of columns in the rows.
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
background-color: #2196F3;
grid-template-areas:
'menu header header header header header'
'menu main main main main main'
'menu footer footer footer footer footer';
grid-gap: 10px;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3"><p>Main</p></div>
<div class="item5">Footer</div>
</div>
</body>
</html>
What is twine and interactive fiction
Exampl. SuperSimpleStory
What are storyformats
Why snowman
Setup tweego and snowman
Switching between Tweego and Twine
Snowman template methods
Snowman markup
javascript usage
debugging your story
Common issues with template methods and scripting
Story Telling in general
General concepts for IF
Scenes & Sequels
Designing Puzzles
See here about my js-framework running in snowman:
==> problems & solutions <==