Spaces:
Sleeping
Sleeping
File size: 9,864 Bytes
760ff9a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 |
<!DOCTYPE html>
<html>
<head>
<link href="../../dependencies/all.css" rel="stylesheet" />
<link href="../../dependencies/css.css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
<link href='../../dependencies/bundle.css' rel='stylesheet' />
<link rel="icon" href="../../dependencies/favicon.ico" type="image/x-icon" />
<title>Morgor’s Meaty Marvels</title>
<link href='../../dependencies/style.css' rel='stylesheet' />
<link href='../../dependencies/5ePHBstyle.css' rel='stylesheet' />
<link href="../../dependencies/themes/V3/Blank/style.css" type="text/css" rel="stylesheet">
<link href="../../dependencies/themes/V3/5ePHB/style.css" type="text/css" rel="stylesheet">
<style>
.page {
width: 100%;
height: 100%;
page-break-after: always; /* Ensure each page is treated separately */
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.grid-item {
page-break-inside: avoid; /* Avoid page break within items */
break-inside: avoid;
}
.column-split {
grid-column: span 2;
height: 20px;
}
.blank {
height: 50px; /* Adjust as needed for the amount of whitespace */
}
p {
margin-bottom: 20px; /* Ensure space at the bottom of paragraphs */
}
.dynamic-image {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class='brewRenderer'>
<div class="frame-content">
<div class="brewRenderer" style="height: 750;">
<div class="popups"></div>
<div class="pages" lang="en">
<div class="page" id="page1">
<div class="grid-container" id="grid-container-page1">
<!-- Place all content initially within page 1 -->
<div class="grid-item">
<h1 id="morgors-meaty-marvels">Morgor’s Meaty Marvels</h1>
<p><img class="" style="width:300px; mix-blend-mode:multiply;" src="https://raw.githubusercontent.com/Drakosfire/StoreGenerator/master/galleries/test_images/morgor_meaty_marvels.png" alt="shop"></p>
<p>A clandestine butcher shop tucked away in the narrow, winding alleyways of Grimborough. The shop boasts a thrilling array of exotic meats, from subterranean lizard tail to basilisk flank. Dimly lit and pungent with the metallic scent of freshly cut meat, the shop is an intoxicating blend of mystery and carnivorous delight.</p>
<p>Morgor Bloodclaw’s journey from a petty thief in Goblintown to the notorious butcher of Grimborough is the stuff of legend. His knack for procuring the most exotic meats has earned him a shadowy but well-regarded status.</p>
</div>
<div class="column-split"></div>
<div class="grid-item">
<h2 id="owner">Owner</h2>
<h3 id="morgor-bloodclaw">Morgor Bloodclaw</h3>
<table>
<thead>
<tr>
<th align="center"></th>
<th align="center"></th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><strong>Species</strong></td>
<td align="center">Goblin</td>
</tr>
<tr>
<td align="center"><strong>Class</strong></td>
<td align="center">Rogue</td>
</tr>
<tr>
<td align="center"><strong>Description</strong></td>
<td align="center">Morgor is a scruffy goblin with green skin, sharp teeth, and a greasy apron stained with the remnants of his work. His eyes gleam with a cunning intelligence.</td>
</tr>
<tr>
<td align="center"><strong>Personality</strong></td>
<td align="center">Shrewd and opportunistic, Morgor knows how to make a deal that benefits him the most. He has a sharp wit and a knack for making customers feel both uneasy and intrigued.</td>
</tr>
<tr>
<td align="center"><strong>Secrets</strong></td>
<td align="center">Morgor secretly supplies meat to a clandestine fighting ring., He once was part of a notorious thieves’ guild and still holds connections in the underworld.</td>
</tr>
</tbody>
</table>
<p><img class="" style="width:330px; mix-blend-mode:multiply;" src="https://raw.githubusercontent.com/Drakosfire/StoreGenerator/master/galleries/test_images/Morgor_bloodclaw.png" alt="Owner"></p>
</div>
<div class="grid-item">
<h2 id="employees">Employees</h2>
<h3 id="brega">Brega</h3>
<table>
<thead>
<tr>
<th align="center"></th>
<th align="center"></th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><strong>Species</strong></td>
<td align="center">Half-Orc</td>
</tr>
<tr>
<td align="center"><strong>Class</strong></td>
<td align="center">Assistant Butcher</td>
</tr>
<tr>
<td align="center"><strong>Description</strong></td>
<td align="center">A burly half-orc with a kind face and a perpetual smudge of blood on his cheek. Brega handles the heavy lifting and cutting of larger beasts.</td>
</tr>
<tr>
<td align="center"><strong>Personality</strong></td>
<td align="center">Soft-spoken and gentle despite his imposing appearance, Brega is loyal to Morgor and respects his cunning. He has a soft spot for stray animals.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Additional pages will be added dynamically -->
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const pagesContainer = document.querySelector('.pages');
const maxPageHeight = document.getElementById('page1').clientHeight;
function createNewPage() {
const newPage = document.createElement('div');
newPage.classList.add('page');
newPage.id = `page${pagesContainer.children.length + 1}`;
pagesContainer.appendChild(newPage);
const newGridContainer = document.createElement('div');
newGridContainer.classList.add('grid-container');
newGridContainer.id = `grid-container-page${pagesContainer.children.length}`;
newPage.appendChild(newGridContainer);
return newGridContainer;
}
function moveOverflowContent() {
let currentGridContainer = document.getElementById('grid-container-page1');
let currentColumn = 1;
const totalColumns = 2;
let itemsToMove = Array.from(currentGridContainer.children);
for (let item of itemsToMove) {
if (currentGridContainer.scrollHeight > maxPageHeight) {
if (currentColumn < totalColumns) {
currentColumn++;
} else {
currentGridContainer = createNewPage();
currentColumn = 1;
}
currentGridContainer.appendChild(item);
}
}
}
moveOverflowContent();
window.addEventListener('resize', moveOverflowContent);
});
</script>
</body>
</html>
|