Skip to content

Commit

Permalink
Make the BLAST bomb table beautifully responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pyrofab
Pyrofab committed Mar 12, 2024
1 parent b2e37b5 commit 12d1343
Show file tree
Hide file tree
Showing 2 changed files with 143 additions and 42 deletions.
95 changes: 53 additions & 42 deletions public/wiki/blast.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,63 +24,74 @@ BLAST mainly focuses on various types of bombs with some common attributes:

### Basic Bombs

<table>
<tr><th></th><th style="width:32%">Iron Tier</th><th style="width:32%">Gold Tier</th><th style="width:32%">Diamond Tier</th></tr>
<tr><th rowspan=2 style="transform:rotate(270deg)">Timer</th><td>
<h4>Bomb</h4>
<link href="bomb_table.css" rel="stylesheet"/>

<p>A simple bomb with an explosion power of 1 and a fuse time of 2 seconds.</p>
<section class="bomb-table">
<h4>Iron Tier</h4>
<!--<span class="bomb-trigger-type">Timer</span>-->

<div class="bomb-type">
<h5>Bomb</h5>

<div>
<p>A simple bomb with an explosion power of 1 and a fuse time of 2 seconds.</p>
<p>Is defused and drops when coming into contact with water.</p>
</td><td>
<h4>Golden Bomb</h4>
</div>

<p>Works like the normal bomb, but applies Fortune III to all blown up blocks.</p>
{% include mc/crafting.liquid i1="minecraft:gunpowder" i2="minecraft:iron_ingot" i3="minecraft:string" result="blast:bomb" count=4 %}

<p>Like other gold items, Piglins love this bomb!</p>
</td><td>
<h4>Diamond Bomb</h4>
</div>
<div class="bomb-type">
<h5>Trigger Bomb</h5>

<p>Ignores explosion resistance, and therefore can destroy blocks like obsidian.</p>
<div>
<p>A simple bomb with an explosion power of 1 on impact instead of after a certain amount of time.</p>
<p>Explodes underwater, but will not destroy any blocks.</p>
</div>

<p>Exceptions are bedrock, barriers, end portal frames, and other admin-exclusive blocks.</p>
</td></tr>
<tr>
<td>
{% include mc/crafting.liquid i1="minecraft:gunpowder" i2="minecraft:iron_ingot" i3="minecraft:string" result="blast:bomb" count=4 %}
</td>
<td>
{% include mc/crafting.liquid i1="minecraft:gunpowder" i2="minecraft:gold_ingot" i3="minecraft:string" result="blast:golden_bomb" count=4 %}
</td>
<td>
{% include mc/crafting.liquid i1="minecraft:gunpowder" i2="minecraft:diamond" i3="minecraft:string" result="blast:diamond_bomb" count=4 %}
</td>
</tr>
<tr><th rowspan=2 style="transform:rotate(270deg)">Trigger</th><td>
<h4>Trigger Bomb</h4>
<img src="/wiki/blast/RecipeTriggerBomb.png" />

<p>A simple bomb with an explosion power of 1 on impact instead of after a certain amount of time.</p>
</div>
<h4>Gold Tier</h4>
<div class="bomb-type">
<h5>Golden Bomb</h5>

<p>Explodes underwater, but will not destroy any blocks.</p>
</td><td>
<h4>Golden Trigger Bomb</h4>
<div>
<p>Works like the normal bomb, but applies Fortune III to all blown up blocks.</p>
<p>Like other gold items, Piglins love this bomb!</p>
</div>

<p>A version of the golden bomb with a trigger instead of a fuse.</p>
{% include mc/crafting.liquid i1="minecraft:gunpowder" i2="minecraft:gold_ingot" i3="minecraft:string" result="blast:golden_bomb" count=4 %}

</div>
<div class="bomb-type">
<h5>Golden Trigger Bomb</h5>
<div>
<p>A version of the golden bomb with a trigger instead of a fuse.</p>
<p>It also explodes underwater without causing block destruction.</p>
</td><td>
<h4>Diamond Trigger Bomb</h4>
</div>
<img src="/wiki/blast/RecipeGoldTriggerBomb.png" />
</div>
<h4>Diamond Tier</h4>
<div class="bomb-type">
<h5>Diamond Bomb</h5>
<div>
<p>Ignores explosion resistance, and therefore can destroy blocks like obsidian.</p>
<p>Exceptions are bedrock, barriers, end portal frames, and other admin-exclusive blocks.</p>
</div>

{% include mc/crafting.liquid i1="minecraft:gunpowder" i2="minecraft:diamond" i3="minecraft:string" result="blast:diamond_bomb" count=4 %}
</div>
<!--<span class="bomb-trigger-type">Trigger</span>-->
<div class="bomb-type">
<h5>Diamond Trigger Bomb</h5>
<div>
<p>A version of the diamond bomb with a trigger instead of a fuse.</p>

<p>It also explodes underwater without causing block destruction.</p>
</td></tr>
<tr>
<td><img src="/wiki/blast/RecipeTriggerBomb.png" /></td>
<td><img src="/wiki/blast/RecipeGoldTriggerBomb.png" /></td>
<td><img src="/wiki/blast/RecipeDiamondTriggerBomb.png" /></td>
</tr>
</table>
</div>
<img src="/wiki/blast/RecipeDiamondTriggerBomb.png" />
</div>
</section>

### Dirt Bombs

Expand Down
90 changes: 90 additions & 0 deletions public/wiki/blast/bomb_table.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
---
---

@import 'mixins';

.bomb-table {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: min-content repeat(2, 4ex max-content min-content);
grid-auto-flow: column;
column-gap: 1em;
width: 80%;
// On tablets or equivalent, transpose the table: rows are material, columns are trigger type
@media (max-width: 1100px) {
width: 100%;
grid-auto-flow: row;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, min-content 4ex max-content min-content);
@include notMobile {
h4 {
grid-column-end: span 2;
}
.mcui {
font-size: 2vi;
}
}
}

// On mobiles, display everything as a single column
@include mobile {
grid-template-columns: 1fr;
}

// On large screens, display a little row indicator on the left
@media (min-width: 1400px) {
margin-inline-start: 2em;

.bomb-type::before {
position: absolute;
transform: rotate(270deg);
font-size: 18px;
top: 50%;
inset-inline-start: -3em;
}

.bomb-type:nth-child(2)::before {
content: 'Timer';
}

.bomb-type:nth-child(3)::before {
content: 'Trigger';
}
}

h4 {
font-weight: bold;
@include desktop {
font-weight: initial;
font-size: 18px;
text-align: center;
}
}

h5 {
font-size: 16px;
font-weight: bold;
margin: 0.5em 0 0 0;
}

.bomb-type {
margin-bottom: 2em;
position: relative;
display: grid;
grid-template-rows: subgrid;
@include mobile {
grid-template-rows: min-content max-content min-content;
}
grid-auto-flow: column;
grid-row-end: span 3;

& > p {
flex: auto;
}

& > div, & > img {
flex: initial;
justify-self: center;
}
}
}

0 comments on commit 12d1343

Please sign in to comment.