¶ Tooltips
Example text
Bottom text
This tooltip can be extremely finnicky whether it wants to work or not
will not work in every context, breaks on normal lines.
Use at own risk of annoyance
The tooltip is added in a single block, no whitelines allowed.
use <br> in order to move to next line, use <b> for bold.
example provided behind the word "usage" indicated by the [?]
<span class="tooltip">[?]<br></span><blockquote class= "tooltip-text is-info"><p><b>Example text</b><br>Bottom text</p></blockquote>
.tooltip {
cursor: help
}
.tooltip-text {
display: none;
font-weight: 400;
z-index: 1
}
.tooltip:hover + .tooltip-text {
display: inline-block;
position: absolute
}
¶ Character cards
Copy-Paste the code block and fill in the following:
- href="[link]" -> Link to character page, usually located at "/community/characters/[character-name]"
in the case there are multiple characters with the same name, add game of origin behind the character name. i.e.: "/community/characters/alice-this-new-game" - src="[src]" -> Image source for character card, should be a square image
- alt="[alt]" -> Name that will show if the image fails to load
- character-name: name of the character
- character-note: notes on the character. including whether the character is playable and any tags
Unknowy
Playable
Weight gain
<div class="character-grid">
<div class="character-card">
<a href=""><img src="/community/cover_images/game-example.png" alt="Unknowy"></a>
<div class="character-name">Unknowy</div>
<div class="character-note">Playable</div>
<div class="character-note">Weight gain</div>
</div>
<div class="character-card">
<a href=""><img src="" alt=""></a>
<div class="character-name"></div>
<div class="character-note"></div>
</div>
</div>
.character-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 16px
}
.character-card {
width: 130px;
background: #212121;
border-radius: 20px;
box-shadow: 0 10px 12px rgba(0,0,0,.08);
text-align: center;
padding: 12px 10px;
transition: transform .2s ease,box-shadow .2s ease;
cursor: pointer
}
.character-card:hover {
transform: scale(1.04);
box-shadow: 0 6px 16px rgba(0,0,0,.12)
}
.character-card img {
width: 100%;
height: auto
}
.character-name {
font-weight: 700;
margin-top: 10px
}
.character-note {
font-size: .85rem;
color: #aaa;
margin-top: 4px
}
¶ Game cards
Copy the code and fill in the necessary info
- <a href="">
<div class="gamecard">
<img src="/community/cover_images/game-example.png">
<div>
<span>Game Name</span>
<span class="subtext">Subtext goes here</span>
</div>
</div>
</a>
{.links-list}
.gamecard {
display: flex;
align-items: center;
flex-direction: row;
gap: 16px
}
.gamecard img {
height: 60px
}
.gamecard span {
display: flex;
flex-direction: column
}
.subtext {
color: grey;
font-size: 13px
}