update tutorial gifs, add tutorial link to homepage

This commit is contained in:
AlecM33
2023-08-22 11:48:07 -04:00
parent 7c8d4083ca
commit ce121d35a6
5 changed files with 21 additions and 5 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 232 KiB

After

Width:  |  Height:  |  Size: 553 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 279 KiB

After

Width:  |  Height:  |  Size: 432 KiB

View File

@@ -114,6 +114,18 @@ img[src='../images/new-logo.png'], #new-logo-container {
aspect-ratio: 500 / 641;
}
h3 a {
color: #768df0;
text-decoration: underline;
cursor: pointer;
font-family: 'signika-negative', sans-serif;
width: fit-content;
}
h3 a:hover {
color: gray;
}
form > div {
margin: 15px 0;
}
@@ -164,6 +176,10 @@ label[for="room-code"], label[for="player-name"] {
padding: 15px;
}
img[src='../images/new-logo.png'], #new-logo-container {
margin: 1em 0 0 0;
}
#join-container > label {
font-size: 26px;
}

View File

@@ -28,7 +28,7 @@
<div id="new-logo-container">
<img alt="Werewolf App Logo" src="../images/new-logo.png"/>
</div>
<h3>A tool to run the social deception game Werewolf (aka Mafia) smoothly in a real or virtual social setting.</h3>
<h3>An app to create and run games of Werewolf (Mafia) with your friends. No sign-up, installation, or payment required. <a href="/how-to-use">How do I use it?</a></h3>
<div id="create-join">
<a href="/create">
<button id="home-create-button" class="app-button">Create A Room</button>

View File

@@ -79,13 +79,13 @@
<br><br>
Here I add 3 villagers to the game, and then remove them:
<br><br>
<img alt="adding a role to the deck" class='tutorial-image-small' src="../images/tutorial/add-role-to-deck.gif"/>
<img alt="adding a role to the deck" class='tutorial-image-small-portrait' src="../images/tutorial/add-role-to-deck.gif"/>
<br><br>
You can add, edit, and remove Custom Roles. You can also import and export them via a formatted text file. Click
the hamburger menu on the role box to see the import/export options. Here I create a new Custom Role and observe
it in the list:
the hamburger menu on the role box to see the import/export options. Here I create a new Custom Role, observe it
in the list, and add a copy of it to the game:
<br><br>
<img alt="create-custom-role" class='tutorial-image-small' src="../images/tutorial/create-custom-role.gif"/>
<img alt="create-custom-role" class='tutorial-image-small-portrait' src="../images/tutorial/create-custom-role.gif"/>
<br><br>
<h3>- Step Three: Set an optional timer</h3>
<br>