Periodic/blazestar.net
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes some mobile rendering.

Browse Source
This commit is contained in:
Periodic committed 2026-09-19 16:46:38 -07:00
1 parent a56191ffca
commit c6ce366d95
3 files changed
+101 -73
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/content/blog/2026-05-19-deconstructing-brass-lancashire.mdx
+55 -53
View File
@@ -97,59 +97,61 @@ I am also not accounting for the second-level and higher industry tiles being sc
In this table each industry is listed with all of it's levels and the VP and income per money and action are calculated.
<table>
<tr>
<th>Industry Name</th>
<th>Level</th>
<th>Cost</th>
<th>VP</th>
<th>VP/Money</th>
<th>VP/Action</th>
<th>Income</th>
<th>Income/Money</th>
<th>Income/Action</th>
</tr>
{(() => {
const rows = analysisRows(2, 2);
const maxVpPerMoney = Math.max(...rows.map((row) => row.vpPerMoney));
const maxVpPerAction = Math.max(...rows.map((row) => row.vpPerAction));
const maxIncomePerMoney = Math.max(
...rows.map((row) => row.incomePerMoney),
);
const maxIncomePerAction = Math.max(
...rows.map((row) => row.incomePerAction),
);
return rows.map((row) => (
<tr>
<td>{row.industryName}</td>
<td>{row.industryLevel}</td>
<td>{row.cost}</td>
<td>{row.vp}</td>
<td
style={`color: rgb(${255 * (1 - row.vpPerMoney / maxVpPerMoney)}, ${(255 * row.vpPerMoney) / maxVpPerMoney}, 0)`}
>
{row.vpPerMoney.toFixed(2)}
</td>
<td
style={`color: rgb(${255 * (1 - row.vpPerAction / maxVpPerAction)}, ${(255 * row.vpPerAction) / maxVpPerAction}, 0)`}
>
{row.vpPerAction.toFixed(2)}
</td>
<td>{row.income}</td>
<td
style={`color: rgb(${255 * (1 - row.incomePerMoney)}, ${255 * row.incomePerMoney}, 0)`}
>
{row.incomePerMoney.toFixed(2)}
</td>
<td
style={`color: rgb(${255 * (1 - row.incomePerAction / maxIncomePerAction)}, ${(255 * row.incomePerAction) / maxIncomePerAction}, 0)`}
>
{row.incomePerAction.toFixed(2)}
</td>
</tr>
));
})()}
</table>
<div class="overflow">
<table>
<tr>
<th>Industry Name</th>
<th>Level</th>
<th>Cost</th>
<th>VP</th>
<th>VP/Money</th>
<th>VP/Action</th>
<th>Income</th>
<th>Income/Money</th>
<th>Income/Action</th>
</tr>
{(() => {
const rows = analysisRows(2, 2);
const maxVpPerMoney = Math.max(...rows.map((row) => row.vpPerMoney));
const maxVpPerAction = Math.max(...rows.map((row) => row.vpPerAction));
const maxIncomePerMoney = Math.max(
...rows.map((row) => row.incomePerMoney),
);
const maxIncomePerAction = Math.max(
...rows.map((row) => row.incomePerAction),
);
return rows.map((row) => (
<tr>
<td>{row.industryName}</td>
<td>{row.industryLevel}</td>
<td>{row.cost}</td>
<td>{row.vp}</td>
<td
style={`color: rgb(${255 * (1 - row.vpPerMoney / maxVpPerMoney)}, ${(255 * row.vpPerMoney) / maxVpPerMoney}, 0)`}
>
{row.vpPerMoney.toFixed(2)}
</td>
<td
style={`color: rgb(${255 * (1 - row.vpPerAction / maxVpPerAction)}, ${(255 * row.vpPerAction) / maxVpPerAction}, 0)`}
>
{row.vpPerAction.toFixed(2)}
</td>
<td>{row.income}</td>
<td
style={`color: rgb(${255 * (1 - row.incomePerMoney)}, ${255 * row.incomePerMoney}, 0)`}
>
{row.incomePerMoney.toFixed(2)}
</td>
<td
style={`color: rgb(${255 * (1 - row.incomePerAction / maxIncomePerAction)}, ${(255 * row.incomePerAction) / maxIncomePerAction}, 0)`}
>
{row.incomePerAction.toFixed(2)}
</td>
</tr>
));
})()}
</table>
</div>
### Cotton Mills
src/layouts/RootLayout.astro
+41 -19
View File
@@ -33,7 +33,25 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
</div>
</body>
<style>
@media (max-width: 1000px) {
@media (min-width: 1000px) {
body {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 20rem 1fr;
margin: 2rem 1rem;
max-width: 1600px;
}
.header {
display: none;
}
.sidebar {
display: block;
}
}
@media (min-width: 500px) and (max-width: 1000px) {
body {
grid-template-areas:
"header"
@@ -53,28 +71,27 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
}
}
@media (min-width: 1000px) {
body {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 20rem 1fr;
margin: 2rem 1rem;
max-width: 1600px;
}
.header {
display: none;
}
.sidebar {
display: block;
}
}
@media (max-width: 500px) {
body {
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: 1fr;
margin: 1rem 0;
font-size: 14px;
}
main {
padding: 0;
}
.header {
display: block;
}
.sidebar {
display: none;
}
}
body {
@@ -96,6 +113,11 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
min-width: 0;
}
main > * {
min-width: 0;
}
.footer {
src/styles/global.css
+5 -1
View File
@@ -110,7 +110,6 @@ body {
font-size: var(--font-size-md);
line-height: 1.7;
background-color: var(--color-space-blue);
min-width: 360px;
}
main {
@@ -220,3 +219,8 @@ figure {
/* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
white-space: nowrap;
}
.overflow {
width: 100%;
overflow: scroll;
}