style cleanup, add duel videos

This commit is contained in:
Ean Milligan
2026-01-18 22:25:51 -05:00
parent 7803887616
commit 3e3db8fab3

View File

@@ -35,6 +35,15 @@
grid-template-rows: var(--header-size) minmax(calc(100vh - var(--header-size) - var(--footer-size)), max-content) var(--footer-size); grid-template-rows: var(--header-size) minmax(calc(100vh - var(--header-size) - var(--footer-size)), max-content) var(--footer-size);
grid-template-columns: var(--tab-spacing) 1fr var(--tab-spacing); grid-template-columns: var(--tab-spacing) 1fr var(--tab-spacing);
} }
h3,
p {
margin-bottom: 0.5rem;
text-align: center;
}
ul {
list-style-type: none;
text-align: center;
}
abbr { abbr {
cursor: help; cursor: help;
@@ -47,6 +56,43 @@
top: -0.5rem; top: -0.5rem;
color: white; color: white;
} }
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
cursor: pointer;
padding: 2px;
margin: 2px;
border: 2px solid transparent;
background-color: #400a53;
}
input[type="radio"]:checked + label {
border: 2px solid #aa18df;
}
.tab-content {
text-align: initial;
user-select: text;
display: none;
}
#tab1:checked ~ #tab1-content,
#tab2:checked ~ #tab2-content,
#tab3:checked ~ #tab3-content,
#tab4:checked ~ #tab4-content,
#tab5:checked ~ #tab5-content,
#tab6:checked ~ #tab6-content,
#tab7:checked ~ #tab7-content {
display: block;
}
table,
th,
td {
border-collapse: collapse;
border: 1px solid white;
padding: 2px 4px;
}
</style> </style>
</head> </head>
<body> <body>
@@ -55,44 +101,14 @@
</header> </header>
<div id="tabs" style="user-select: none"> <div id="tabs" style="user-select: none">
<style>
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
cursor: pointer;
padding: 2px;
margin: 2px;
border: 2px solid transparent;
background-color: #400a53;
}
input[type="radio"]:checked + label {
border: 2px solid #aa18df;
}
.tab-content {
text-align: initial;
user-select: text;
display: none;
}
#tab1:checked ~ #tab1-content,
#tab2:checked ~ #tab2-content,
#tab3:checked ~ #tab3-content,
#tab4:checked ~ #tab4-content,
#tab5:checked ~ #tab5-content,
#tab6:checked ~ #tab6-content,
#tab7:checked ~ #tab7-content {
display: block;
}
</style>
<input type="radio" name="tabs" id="tab1" checked /> <input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Delubrum Pure Essences</label> <label for="tab1">Delubrum Pure Essences</label>
<input type="radio" name="tabs" id="tab2" /> <input type="radio" name="tabs" id="tab2" />
<label for="tab2">DRS Duel</label> <label for="tab2">DRS Duel</label>
<input type="radio" name="tabs" id="tab7" />
<label for="tab7">BSF/Zad Duels</label>
<input type="radio" name="tabs" id="tab3" /> <input type="radio" name="tabs" id="tab3" />
<label for="tab3">Buff Battery</label> <label for="tab3">Buff Battery</label>
<input type="radio" name="tabs" id="tab7" />
<label for="tab7">BSF/Zad Duels</label>
<input type="radio" name="tabs" id="tab4" /> <input type="radio" name="tabs" id="tab4" />
<label for="tab4">Zone Maps</label> <label for="tab4">Zone Maps</label>
<input type="radio" name="tabs" id="tab5" /> <input type="radio" name="tabs" id="tab5" />
@@ -104,8 +120,8 @@
<div id="tab1-content" class="tab-content"> <div id="tab1-content" class="tab-content">
<!-- WIP: update to have cards for these --> <!-- WIP: update to have cards for these -->
<h3 style="margin-bottom: 0.5rem; text-align: center">Delubrum Reginae Secret Pure Essence Interactions:</h3> <h3>Delubrum Reginae Secret Pure Essence Interactions:</h3>
<ul style="list-style-type: none; margin-bottom: 1rem"> <ul style="text-align: left; margin-bottom: 1rem">
<li> <li>
<u><i style="font-size: 1.2rem">Pure Essence of the Elder:</i></u> <u><i style="font-size: 1.2rem">Pure Essence of the Elder:</i></u>
"Lost Cure IV" now gives an AoE Bravery (Lasts 1min, 10% dmg up instead of "Lost Bravery"'s 10min, 5%dmg up) "Lost Cure IV" now gives an AoE Bravery (Lasts 1min, 10% dmg up instead of "Lost Bravery"'s 10min, 5%dmg up)
@@ -132,15 +148,7 @@
<a href="https://ffxiv.consolegameswiki.com/wiki/Dynamis_Dice" target="_blank">FFXIV ConsoleGamesWiki</a>) <a href="https://ffxiv.consolegameswiki.com/wiki/Dynamis_Dice" target="_blank">FFXIV ConsoleGamesWiki</a>)
</li> </li>
<li style="display: flex; justify-content: center"> <li style="display: flex; justify-content: center">
<style> <table>
table,
th,
td {
border: 1px solid white;
padding: 2px 4px;
}
</style>
<table style="border-collapse: collapse">
<caption> <caption>
Dynamis Dice Effect Probabilities Dynamis Dice Effect Probabilities
</caption> </caption>
@@ -201,8 +209,8 @@
</ul> </ul>
</div> </div>
<div id="tab2-content" class="tab-content"> <div id="tab2-content" class="tab-content">
<h3 style="margin-bottom: 0.5rem; text-align: center">DRS Duel Info</h3> <h3>DRS Duel Info</h3>
<ul style="list-style-type: none; text-align: center"> <ul>
<li><a href="https://docs.google.com/document/d/1Pej6Bt8OcScnZ24XjbLCmwKLO4FkroAwJwpndSOImW4/edit?tab=t.0" target="_blank">Text Guide</a></li> <li><a href="https://docs.google.com/document/d/1Pej6Bt8OcScnZ24XjbLCmwKLO4FkroAwJwpndSOImW4/edit?tab=t.0" target="_blank">Text Guide</a></li>
<li><a href="https://www.youtube.com/watch?v=9dwkndBF8aI" target="_blank">Excellence Cheese clear</a></li> <li><a href="https://www.youtube.com/watch?v=9dwkndBF8aI" target="_blank">Excellence Cheese clear</a></li>
<li><a href="https://www.youtube.com/watch?v=5Q0m1F0MKQQ" target="_blank">Video of All Mechanics</a></li> <li><a href="https://www.youtube.com/watch?v=5Q0m1F0MKQQ" target="_blank">Video of All Mechanics</a></li>
@@ -214,8 +222,8 @@
</ul> </ul>
</div> </div>
<div id="tab3-content" class="tab-content"> <div id="tab3-content" class="tab-content">
<h3 style="margin-bottom: 0.5rem; text-align: center">Buff Battery AKA Excellence Battery AKA get a bunch more dps</h3> <h3>Buff Battery AKA Excellence Battery AKA get a bunch more dps</h3>
<p style="margin-bottom: 0.5rem; text-align: center">Info adapted from messages in the <a href="https://discord.gg/YKP76AsMw8" target="_blank">Lego Steppers Discord</a>.</p> <p>Info adapted from messages in the <a href="https://discord.gg/YKP76AsMw8" target="_blank">Lego Steppers Discord</a>.</p>
<div style="display: flex; gap: 2rem; justify-content: space-around"> <div style="display: flex; gap: 2rem; justify-content: space-around">
<div> <div>
<h4 style="margin-bottom: 0.5rem">Directions for taking advantage of a <abbr title='A player with "Font of Power" and "Lost Excellence" slotted in.&#13;&#10;People usually prefer "Font of Power" on the left side.'>"physical battery"</abbr>:</h4> <h4 style="margin-bottom: 0.5rem">Directions for taking advantage of a <abbr title='A player with "Font of Power" and "Lost Excellence" slotted in.&#13;&#10;People usually prefer "Font of Power" on the left side.'>"physical battery"</abbr>:</h4>
@@ -234,7 +242,7 @@
<ol> <ol>
<li> <li>
Slot in "Font of Power" and "Lost Excellence" well before the boss pull. Slot in "Font of Power" and "Lost Excellence" well before the boss pull.
<ul style="list-style-type: none"> <ul style="text-align: left">
<li>- People usually prefer having "Font of Power" on the left side.</li> <li>- People usually prefer having "Font of Power" on the left side.</li>
</ul> </ul>
</li> </li>
@@ -248,16 +256,16 @@
</div> </div>
</div> </div>
<div id="tab4-content" class="tab-content"> <div id="tab4-content" class="tab-content">
<h3 style="margin-bottom: 0.5rem; text-align: center">Zone Maps</h3> <h3>Zone Maps</h3>
<p style="margin-bottom: 0.5rem; text-align: center">Images from <a href="https://xivfo.com/bozja/General_Guides" target="_blank">https://xivfo.com/bozja/General_Guides</a>.</p> <p>Images from <a href="https://xivfo.com/bozja/General_Guides" target="_blank">https://xivfo.com/bozja/General_Guides</a>.</p>
<ul style="list-style-type: none; text-align: center"> <ul>
<li><img src="./img/bsf-map.png" style="width: 100%" /></li> <li><img src="./img/bsf-map.png" style="width: 100%" /></li>
<li><img src="./img/zad-map.png" style="width: 100%" /></li> <li><img src="./img/zad-map.png" style="width: 100%" /></li>
</ul> </ul>
</div> </div>
<div id="tab5-content" class="tab-content"> <div id="tab5-content" class="tab-content">
<h3 style="margin-bottom: 0.5rem; text-align: center">Good Loadouts</h3> <h3>Good Loadouts</h3>
<p style="margin-bottom: 0.5rem; text-align: center">Images from <a href="https://xivfo.com/bozja/General_Guides" target="_blank">https://xivfo.com/bozja/General_Guides</a>.</p> <p>Images from <a href="https://xivfo.com/bozja/General_Guides" target="_blank">https://xivfo.com/bozja/General_Guides</a>.</p>
<div style="display: flex; flex-direction: row; align-items: center; justify-content: space-around; gap: 0.5%; flex-wrap: wrap"> <div style="display: flex; flex-direction: row; align-items: center; justify-content: space-around; gap: 0.5%; flex-wrap: wrap">
<img src="./img/loadouts-dal.png" style="width: 33%; min-width: 30rem" /> <img src="./img/loadouts-dal.png" style="width: 33%; min-width: 30rem" />
<img src="./img/loadouts-drn-beginner.png" style="width: 33%; min-width: 30rem" /> <img src="./img/loadouts-drn-beginner.png" style="width: 33%; min-width: 30rem" />
@@ -265,15 +273,35 @@
</div> </div>
</div> </div>
<div id="tab6-content" class="tab-content"> <div id="tab6-content" class="tab-content">
<h3 style="margin-bottom: 0.5rem; text-align: center">Additional Resources</h3> <h3>Additional Resources</h3>
<ul style="list-style-type: none; text-align: center"> <ul>
<li><a href="https://xivfo.com/bozja/Relics" target="_blank">Relic Weapon Tracker</a></li> <li><a href="https://xivfo.com/bozja/Relics" target="_blank">Relic Weapon Tracker</a></li>
<li><a href="https://xivfo.com/bozja/General_Guides" target="_blank">Additional Guides</a></li> <li><a href="https://xivfo.com/bozja/General_Guides" target="_blank">Additional Guides</a></li>
<li><a href="https://ffxiv.kmiwl.de/bozja/?a=1LNgh9gSCrLvePRyNl5" target="_blank">Lost Finds Cache</a></li> <li><a href="https://ffxiv.kmiwl.de/bozja/?a=1LNgh9gSCrLvePRyNl5" target="_blank">Lost Finds Cache</a></li>
</ul> </ul>
</div> </div>
<div id="tab7-content" class="tab-content"> <div id="tab7-content" class="tab-content">
<h3 style="margin-bottom: 0.5rem; text-align: center">BSF/Zad Duel Info</h3> <div>
<h3>BSF Duel Info</h3>
<ul>
<li><a href="https://www.youtube.com/watch?v=bybzBLT7nBo" target="_blank">BSF Duel Cheeses</a></li>
<li><a href="https://www.youtube.com/watch?v=QBqxAWhc1y8" target="_blank">BSF-Z1 Duel Guide (Aces High/Gabriel)</a></li>
<li><a href="https://www.youtube.com/watch?v=KsG5ji5toSo" target="_blank">BSF-Z2 Duel Guide (Beast of Man/Lyon)</a></li>
<li><a href="https://www.youtube.com/watch?v=zUDYU7iX_mY" target="_blank">BSF-Z3 Duel Guide (And the Flames Went Higher/Sartauvoir)</a></li>
</ul>
</div>
<div>
<h3></h3>
</div>
<div>
<h3>Zad Duel Info</h3>
<ul>
<li><a href="https://www.youtube.com/watch?v=ZGQPgT1gWuE" target="_blank">Zad Duel Cheeses</a></li>
<li><a href="https://www.youtube.com/watch?v=q1XxoE2GUkk" target="_blank">Zad-Z1 Duel Guide (The Broken Blade/Dabog)</a></li>
<li><a href="https://www.youtube.com/watch?v=6yeC-w5qNpM" target="_blank">Zad-Z2 Duel Guide (The Head of the Snake/Menenius)</a></li>
<li><a href="https://www.youtube.com/watch?v=Cniwova35KQ" target="_blank">Zad-Z3 Duel Guide (Taking the Lyon's Share/Lyon Rematch)</a></li>
</ul>
</div>
</div> </div>
</div> </div>
<footer> <footer>