90 lines
4.1 KiB
HTML
90 lines
4.1 KiB
HTML
{{ define "main" }}
|
|
<h2>{{ .Title }}</h2>
|
|
|
|
<hr>
|
|
|
|
{{ $char := index .Site.Data "character" }}
|
|
|
|
<div class="tabs-container">
|
|
<input type="radio" id="tab-1" name="my-tabs" checked>
|
|
<label for="tab-1" class="tab-label">Adventurer Plate</label>
|
|
<div class="container">
|
|
<div class="box">
|
|
<div style="width:100%; height:auto; aspect-ratio: 1.846153846153846; display: inline-block; position: relative">
|
|
<img style="pointer-events: none; position: absolute; width: 50%" src="backing.png"/>
|
|
<img style="pointer-events: none; position:absolute; left: 10%; top: 10%; width: 80%; z-index: 1" src="base-plate.png"/>
|
|
<img style="pointer-events: none; position:absolute; left: 10%; top: 10%; width: 80%; z-index: 2" src="pattern-overlay.png"/>
|
|
<img style="pointer-events: none; position:absolute;z-index:4; width:100%" src="plate-frame.png"/>
|
|
<img style="pointer-events: none; position:absolute;z-index:3; width:25%; left: 15%; top: 15%" src="plate-portrait.png"/>
|
|
<img style="pointer-events: none; position:absolute;z-index:5; height:135%; top: -14%; left: 5%" src="portrait-frame.png"/>
|
|
<img style="pointer-events: none; position:absolute;z-index:5; width:100%; top: 0" src="top-border.png"/>
|
|
<img style="pointer-events: none; position:absolute;z-index:5; width:100%; bottom: 0" src="bottom-border.png"/>
|
|
<div style="position: absolute; top: 30%; left: 45%; color: white; z-index: 99">
|
|
<b>Title</b>
|
|
<p>{{ $char.plate_title }}</p>
|
|
<b>Name</b>
|
|
<p>{{ $char.name }}</p>
|
|
<b>Favorite Class/Job</b>
|
|
<p>{{ $char.plate_classjob }} LEVEL {{ $char.plate_classjob_level }}</p>
|
|
<b>Comment</b>
|
|
<p>{{ $char.search_comment }}</p>
|
|
</div>
|
|
</div>
|
|
<p style="text-align: center">Generated by <a href="http://xiv.zone/software/auracite">Auracite</a>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="radio" id="tab-2" name="my-tabs" checked>
|
|
<label for="tab-2" class="tab-label">Artwork</label>
|
|
<div class="container">
|
|
<div class="box">
|
|
<h2>Artwork</h2>
|
|
|
|
<p>Here's some fan art of my WoL, I want to do more general FFXIV fan art in the future too!</p>
|
|
|
|
<div style="height: 500px; overflow: auto">
|
|
{{ partial "art-section" . }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="radio" id="tab-3" name="my-tabs">
|
|
<label for="tab-3" class="tab-label">Mods</label>
|
|
<div class="container">
|
|
<div class="box">
|
|
<h2>My Mods</h2>
|
|
|
|
<p>I have created a few mods to enhance the game:</p>
|
|
|
|
<ul>
|
|
<li><a href="https://xiv.zone/mods/rebound">Rebound</a>: Somehow even after the big graphical update, Square Enix hasn't fixed the bug where certain character physics (like the Viera ear wiggle) breaks under high framerates.</li>
|
|
<li><a href="https://xiv.zone/mods/refitter">Refitter</a>: I didn't like how some armor fit on my WoL, so I fixed it myself.</li>
|
|
<li><a href="https://xiv.zone/mods/hooky">Hooky</a>: I don't use this too much yet, but I really liked making it!</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.container {
|
|
display: flex;
|
|
column-gap: 15px;
|
|
width: 100%;
|
|
order: 99;
|
|
}
|
|
|
|
.box {
|
|
display: block;
|
|
width: 100%;
|
|
border: 1px solid gray;
|
|
padding: 5px;
|
|
}
|
|
|
|
.tabs-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.tabs-container > input[type="radio"]:not(:checked)+.tab-label+.container {
|
|
display: none;
|
|
}
|
|
</style>
|
|
{{ end }}
|