Frank/Escapepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add "In Development" watermark badge over AI virus artwork

Browse Source 
Overlay a rotated CSS badge on the homepage hero and briefing page
image instead of baking it into the PNG, so it's easy to remove once
the game ships.
This commit is contained in:
Frank
2026-07-04 23:02:46 +02:00
parent 839113c356
commit 8554f04735
2 changed files with 52 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/website/home/index.html.twig
+26 -1
View File
@@ -22,6 +22,28 @@
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
.dev-watermark-wrap {
position: relative;
display: inline-block;
}
.dev-watermark-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-12deg);
background: rgba(220, 53, 69, .85);
color: #fff;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
padding: .35rem 1.25rem;
border: 2px solid rgba(255, 255, 255, .85);
border-radius: .25rem;
font-size: .9rem;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
pointer-events: none;
}
</style>
{% endblock %}
@@ -42,7 +64,10 @@
</div>
</div>
<div class="col-lg-5 text-center">
<img src="{{ asset('images/AI_virus.png') }}" alt="AI Virus" class="img-fluid" style="max-height: 260px;">
<div class="dev-watermark-wrap">
<img src="{{ asset('images/AI_virus.png') }}" alt="AI Virus" class="img-fluid" style="max-height: 260px;">
<span class="dev-watermark-badge">In Development</span>
</div>
</div>
</div>
</div>
templates/website/home/intro.html.twig
+26 -1
View File
@@ -30,6 +30,28 @@
color: var(--brand-teal-light, #6fb8d1);
padding-right: .1em;
}
.dev-watermark-wrap {
position: relative;
display: inline-block;
}
.dev-watermark-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-12deg);
background: rgba(220, 53, 69, .85);
color: #fff;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
padding: .35rem 1.25rem;
border: 2px solid rgba(255, 255, 255, .85);
border-radius: .25rem;
font-size: .9rem;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
pointer-events: none;
}
</style>
{% endblock %}
@@ -46,7 +68,10 @@
</div>
<div class="text-center mb-4">
<img src="{{ asset('images/AI_virus.png') }}" alt="AI Virus" class="img-fluid" style="max-height: 220px;">
<div class="dev-watermark-wrap">
<img src="{{ asset('images/AI_virus.png') }}" alt="AI Virus" class="img-fluid" style="max-height: 220px;">
<span class="dev-watermark-badge">In Development</span>
</div>
</div>
<div class="briefing-body">